xgxt_sd/zhxg_pc
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
18154758993
2025-07-28 15:52:07 +08:00
commit cd0e77b332
1304 changed files with 302802 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/student_info/components/AgeEchart.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="age-wrapper">
<div v-for="item of dataList" :key="item.name" class="age-item-bar">
<p class="bar-left">{{item.name}}</p>
<div class="bar-right" :title="item.value">
<span :style="{background: item.color, width: item.rate}" class="color-bar"></span>
</div>
</div>
</div>
</template>
<script>
import {getSrsAgeCount} from '@/api/stuCQS/basedata/student.js';
export default {
name: 'AgeEchart',
components: {
},
data() {
return {
dataList: [
{ name: '18岁及以下', rate: '60%', value: '128', color: '#3BA4DA' },
{ name: '18岁-20岁', rate: '20%', value: '108', color: '#F3DB70' },
{ name: '20岁及以上', rate: '80%', value: '138', color: '#06D532' },
]
}
},
methods: {
async getSrsAgeCounts(){
var res =await getSrsAgeCount();
}
},
mounted() {},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

40
src/views/student_info/components/HonorDataList.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="honor-wrapper">
<div v-for="(item, index) of dataList" :key="item.name" class="honor-item-bar">
<div :class="{'honor-left': true, ['honor-left' + index]: true}"></div>
<div class="honor-right">
<p class="honor-text-left">{{ item.name }}</p>
<p class="honor-text-right">{{ item.value }}<span>人</span></p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HonorDataList',
components: {
},
data() {
return {
dataList: [
{ name: '文明风采获奖人物', value: '28' },
{ name: '技能大赛获奖人数', value: '16' },
{ name: '优秀学生人数', value: '22' },
{ name: '优秀团员人数', value: '36' },
]
}
},
methods: {
},
mounted() {},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

120
src/views/student_info/components/PKTypeEchart.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="echarts-wrapper" id="PKTypeEchartId">
</div>
</template>
<script>
import * as echarts from 'echarts';
import {getSrsknrdCount} from '@/api/stuCQS/basedata/student.js';
export default {
name: 'PKTypeEchart',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
var res =await getSrsknrdCount();
var fromTable={};
var myData=[];
if (res.code == 200) {
var data = [...res.data];
for(var i=0;i< data.length;i++){
fromTable={'name':data[i].xsqmyj,'value':data[i].quantity};
myData.push(fromTable);
}
}
this.chartInstance = echarts.init(document.getElementById('PKTypeEchartId'));
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
top: 'center',
right: '-3%',
type: 'scroll',
orient: 'vertical',
itemWidth: 10,
itemHeight: 10,
itemSymbol: 'rect',
textStyle: {
color: '#fff',
}
},
series: [
{
name: '贫困类型',
type: 'pie',
radius: ['30%', '62%'],
center: ['43%', '50%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 10,
color: '#8897B0',
align: 'left',
padding: 0,
whiteSpace: 'nowrap',
},
c: {
fontSize: 10,
color: '#8897B0',
align: 'left',
padding: 4,
whiteSpace: 'nowrap',
}
}
},
labelLine: {
show: true,
length: 4,
length2: 6,
lineStyle: {
color: '#8897B0',
}
},
// data: [
// { value: 168, name: '脱贫家庭' },
// { value: 108, name: '城乡低保' },
// { value: 108, name: '残疾学生' },
// { value: 108, name: '特困救助供养' },
// { value: 108, name: '普通' },
// ]
data:myData
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

114
src/views/student_info/components/PoliticalEchartEchart.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="echarts-wrapper" id="politicalSideEchartId">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getSrsZZCount } from '@/api/stuCQS/basedata/student.js';
export default {
name: 'PoliticalEchartEchart',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
var res = await getSrsZZCount();
var fromTable = {};
var myData = [];
if (res.code == 200) {
var data = [...res.data];
for (var i = 0; i< data.length; i++) {
fromTable = { 'name': data[i].zzmm, 'value': data[i].quantity };
myData.push(fromTable);
}
}
this.chartInstance = echarts.init(document.getElementById('politicalSideEchartId'));
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
bottom: '1%',
left: 'center',
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
itemSymbol: 'rect',
textStyle: {
color: '#fff',
}
},
series: [
{
name: '政治面貌',
type: 'pie',
radius: ['20%', '65%'],
center: ['50%', '45%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 0
},
c: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 4
}
}
},
labelLine: {
show: true,
length: 8,
length2: 14,
lineStyle: {
color: '#8897B0',
}
},
// data: [
// { value: 168, name: '男' },
// { value: 108, name: '女' },
// ]
data:myData
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

115
src/views/student_info/components/SexEchart.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div class="echarts-wrapper" id="SexEchartId">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getSrsGenderCount } from '@/api/stuCQS/basedata/student.js';
export default {
name: 'SexEchart',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
var res = await getSrsGenderCount();
var fromTable = {};
var myData = [];
if (res.code == 200) {
var data = [...res.data];
for (var i = 0; i< data.length; i++) {
fromTable = { 'name': data[i].gender, 'value': data[i].quantity };
myData.push(fromTable);
}
}
this.chartInstance = echarts.init(document.getElementById('SexEchartId'));
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
bottom: '3%',
left: 'center',
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
itemSymbol: 'rect',
textStyle: {
color: '#fff',
}
},
series: [
{
name: '男女比例',
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '45%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 0
},
c: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 4
}
}
},
labelLine: {
show: true,
length: 8,
length2: 14,
lineStyle: {
color: '#8897B0',
}
},
// data: [
// { value: 168, name: '团员' },
// { value: 108, name: '群众' },
// ]
data:myData
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

41
src/views/student_info/components/ZCDataList.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="ZCDataList-wrapper">
<div v-for="item of dataList" :key="item.name" class="zc-item-card">
<p class="key-value">{{ item.value }}
<span>人</span>
</p>
<p class="key-name">{{ item.name }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'ZCDataList',
components: {
},
data() {
return {
dataList: [
{ name: '困难认证', value: '28' },
{ name: '助学申请', value: '28' },
{ name: '困难补助', value: '28' },
{ name: '自治区奖学金', value: '28' },
{ name: '国家励志奖学金', value: '28' },
{ name: '突发困难资助', value: '28' },
]
}
},
methods: {
},
mounted() {},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

166
src/views/student_info/components/center/CenterBottom.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="center-bottom-wrapper">
<div class="title-bg">
<img src="../../../../assets/controlCabinImages/title_remark.png" alt="">
<p>学院分布</p>
</div>
<div class="echarts-wrap" id="ZYEchartsId"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getMajorsCount } from '@/api/stuCQS/basedata/student.js';
export default {
name: 'CenterBottom',
components: {},
data() {
return {
chartInstance: null,
deptNames: [],
firstCounts: [],
thirdCounts: [],
secondCounts: []
}
},
methods: {
async initChart() {
var res = await getMajorsCount();
if (res.code == 200) {
var result = [...res.data];
for (var i = 0; i < result.length; i++) {
this.deptNames.push(result[i].deptName);
this.firstCounts.push(result[i].firstCount);
this.thirdCounts.push(result[i].thirdCount);
this.secondCounts.push(result[i].secondCount);
}
}
this.chartInstance = echarts.init(document.getElementById('ZYEchartsId'));
const data = {
area: this.deptNames,
legend: ['大一', '大二', '大三'],
data: [
//[320, 302, 301, 334, 390, 330, 320, 100, 50, 330, 320, 100, 50],
//[320, 302, 301, 334, 390, 330, 320, 100, 50, 330, 320, 100, 50],
//[320, 302, 301, 334, 390, 330, 320, 100, 50, 330, 320, 100, 50],
this.firstCounts,
this.thirdCounts,
this.secondCounts
]
}
var colors = ['#2298E8', '#28DFB7', '#94D857', '#73DEBD', '#26C978', '#8CDF6C', '#FBD657', '#F56679', '#E07BCE', '#9D50E0', '#634FDA']
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color: colors,
legend: {
top: 10,
right: '2%',
itemWidth: 18,
itemHeight: 10,
textStyle: {
fontSize: 14,
color: '#fff',
padding: [3, 0, 0, 0]
},
data: data.legend
},
grid: {
left: '2%',
right: '1%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
color: '#A8D6FF',
formatter: function (value) {
return value.split("").join("\n") //垂直显示
},
},
axisLine: {
lineStyle: {
color: '#96A4F4'
},
width: 5
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.149)'
}
},
data: data.area
},
yAxis: {
type: 'value',
axisLabel: {
color: '#A8D6FF'
},
axisLine: {
lineStyle: {
color: '#164F93'
},
width: 5
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.149)'
}
},
},
series: [
]
};
for (var i = 0; i < data.legend.length; i++) {
option.series.push({
name: data.legend[i],
type: 'bar',
//stack: '总量',
barWidth: '12',
label: {
show: false,
position: 'insideRight'
},
data: data.data[i]
})
}
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
</style>

83
src/views/student_info/components/center/CenterTop.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div class="centertop-wrapper">
<div class="center-top-left">
<div class="top-left-data">
<p class="total-num">学校总人数：<span>{{ studentList[0].TotalCount }}</span></p>
<div class="top-left-sex">
<div class="sex-item">
<p class="sex-name">男</p>
<p class="sex-num">{{ studentList[0].NaCount }}<span>人</span><span class="sex-rate">{{ studentList[0].NaZB }}</span></p>
</div>
<div class="sex-item">
<p class="sex-name">女</p>
<p class="sex-num">{{ studentList[0].NvCount }}<span>人</span><span class="sex-rate">{{ studentList[0].NvZB }}</span></p>
</div>
</div>
</div>
</div>
<div class="center-top-right">
<div v-for="item of dataList" :key="item.name" class="right-item">
<div class="item-bg">
<p class="item-top-name new-family">{{ item.value }}<span>人</span></p>
</div>
<p class="item-bottom-name">{{ item.name }}</p>
</div>
</div>
</div>
</template>
<script>
import {getSchoolCountbyGrade,getSchoolTotalCount} from '@/api/stuCQS/basedata/student.js';
export default {
name: 'CenterTop',
components: {
},
data() {
return {
// dataList: [
// { name: '一年级', value: '650' },
// { name: '二年级', value: '530' },
// { name: '三年级', value: '680' },
// ]
dataList:[],
studentList: []
}
},
created() {
this.init();
this.getData();
},
methods: {
async init(){
var res =await getSchoolCountbyGrade();
var fromTable={};
if (res.code == 200) {
var data = [...res.data];
for(var i=0;i< data.length;i++){
fromTable={'name':this.arabicToChinese(i),'value':data[i].number};
this.dataList.push(fromTable);
}
}
},
getData() {
getSchoolTotalCount().then(response => {
this.studentList = response.data;
})
},
arabicToChinese(num){
const chineseNumerals = [ '大一', '大二', '大三'];
return chineseNumerals[num];
}
},
mounted() {},
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
.center-top-left{
width: 340rem;
}
</style>

490
src/views/student_info/components/center/GuangxiMap.vue Normal file
View File

@@ -0,0 +1,490 @@
<template>
<div class="mapContent">
<div id="mapContent" class="map-content"> </div>
<div class="leng-wrap">
<div v-for="item of mydata" :key="item.name" class="leng-item">
<span class="leng-item-name">{{item.name}}</span>
<span class="leng-item-bg"></span>
<span class="leng-item-value">{{item.value}}</span>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import guangxiJson from '../../../../assets/js/guangxi.json';
import mapBg from '../../../../assets/controlCabinImages/mapBg.png';
import 'echarts-gl';
import {getCountbyCity,getNotSchoolTotalCount} from '@/api/stuCQS/basedata/student.js';
export default {
name: 'GuangxiMap',
data() {
return {
myChart:null,
// mydata: [
// { name: '崇左市', value: 1257, nan: 1000, nv: 257 },
// { name: '来宾市', value: 1034, nan: 1000, nv: 257 },
// { name: '贺州市', value: 1257, nan: 1000, nv: 257 },
// { name: '百色市', value: 1257, nan: 1000, nv: 257 },
// { name: '玉林市', value: 1257, nan: 1000, nv: 257 },
// { name: '贵港市', value: 1257, nan: 1000, nv: 257 },
// { name: '钦州市', value: 1057, nan: 1000, nv: 257 },
// { name: '防城港市', value: 1257, nan: 1000, nv: 257 },
// { name: '北海市', value: 1257, nan: 1000, nv: 257 },
// { name: '梧州市', value: 1257, nan: 1000, nv: 257 },
// { name: '桂林市', value: 1257, nan: 1000, nv: 257 },
// { name: '柳州市', value: 1257, nan: 1000, nv: 257 },
// { name: '南宁市', value: 1257, nan: 1000, nv: 257 },
// { name: '河池市', value: 1257, nan: 1000, nv: 257 },
// ]
mydata:[]
}
},
methods: {
async initMap() {
var res = await getCountbyCity();
var fromTable = {};
//var mydata = [];
if (res.code == 200) {
var data = [...res.data];
for (var i = 0; i< data.length; i++) {
fromTable = { 'name': data[i].city, 'value': data[i].total_count,'nan':data[i].male_count,'nv':data[i].female_count };
this.mydata.push(fromTable);
}
}
var res1 = await getNotSchoolTotalCount();
if (res1.code == 200) {
var data1 = [...res1.data];
fromTable = { 'name': '非广西', 'value': data1[0].number};
this.mydata.push(fromTable);
}
echarts.registerMap('guangxiJson', guangxiJson);
echarts.registerMap('china1', guangxiJson);
echarts.registerMap('china2', guangxiJson);
const option = {
tooltip: {
trigger: 'item',
backgroundColor: 'transparent',
padding: 0,
borderWidth: 0,
formatter: function(params) {
// linear-gradient(to right bottom, rgba(4, 64, 102, 0.9),rgba(4, 16, 35, 0.9))
const dom = `<div style="width: 170px; height: 138px;background: rgba(4, 69, 157, 0.8);">
<p style="width: 100%;height: 43px; background: linear-gradient(to right, #0069EB,rgba(0, 105, 235, 0.2) ); color: #FFFFFF;font-size: 18px;display:flex;align-items: center;justify-content: center;">${params.name}</p>
<p style="display: flex;align-items: center;color: #fff;font-size: 14px;padding-left: 12px;margin-top: 12px;margin-bottom: 4px;">学生数：<span style="font-size: 16px;margin-left: 8px;font-family: 'newFont';">${params.value}人</span></p>
<p style="display: flex;align-items: center;color: #fff;font-size: 14px;padding-left: 12px;margin-bottom: 4px;">男：<span style="font-size: 16px;margin-left: 8px;font-family: 'newFont';">${params.data.nan}人</span></p>
<p style="display: flex;align-items: center;color: #fff;font-size: 14px;padding-left: 12px;margin-bottom: 4px;">女：<span style="font-size: 16px;margin-left: 8px;font-family: 'newFont';">${params.data.nv}人</span></p>
</div>`;
return dom;
}
},
// //左侧小导航图标
// visualMap: {
// show: true,
// x: '10px',
// // y: 'bottom',
// itemWidth: 60,
// itemHeight: 24,
// itemSymbol: 'rect',
// // bottom: 8,
// textStyle: {
// color: '#fff',
// fontSize: 20
// },
// right: '0',
// bottom: 'center',
// backgroundColor: 'rgba(27, 166, 255, 0.4)',
// borderColor: 'rgba(77, 255, 245, 0.4)',
// borderWidth: 1,
// borderRadius: 2,
// padding: 16,
// pieces: [
// {
// gt: 19.5,
// label: "20个以上",
// color: "#FF3A3A",
// },
// {
// gt: 9.5,
// lt: 19,
// label: "10 ~ 19",
// color: "#FFF83F"
// },
// {
// gt: 0.5,
// lt: 9,
// label: "1 ~ 9",
// color: "#4DFFF5"
// },
// {
// gt: 0,
// lt: 0.5,
// label: "0",
// color: "#19A7FF"
// }
// ],
// },
geo: [
// {
// map: 'guangxiJson',
// aspectScale: 0.75,
// layoutCenter: ['50%', '50%'],//位置
// label: {
// emphasis: {
// show: true
// }
// },
// top: '30',
// itemStyle: {
// normal: {
// borderColor: 'rgba(147, 235, 248, 0)',
// borderWidth: 0.5,
// areaColor: {
// x: 1000,
// y: 1000,
// x2: 1000,
// y2: 0,
// colorStops: [{
// offset: 0,
// color: '#19A7FF' // 0% 处的颜色
// }, {
// offset: 1,
// color: '#19A7FF' // 50% 处的颜色
// }],
// global: true // 缺省为 false
// },
// opacity: 1,
// silent: true,
// },
// emphasis: {
// show: false,
// areaColor: 'transparent'
// }
// },
// z: 2,
// zlevel: 2,
// zoom: 1.1,
// },
],
//配置属性
series: [
{
type: 'map3D',
map: "guangxiJson",
regionHeight: 10, // 建议添加区域高度
viewControl: {
speed: 10,
distance: 130,
center: [0, 0, 10],
beta: 0, // 初始角度
autoRotate: false, // 启用自动旋转
autoRotateSpeed: 10, // 旋转速度（1-10）
autoRotateAfterStill: 1, // 静止3秒后开始旋转，
alpha: 55,
minAlpha: -270, // 解除俯角限制
maxAlpha: 360,
minBeta: -Infinity, // 解除方位角限制
maxBeta: Infinity,
rotateSensitivity: 0 // 方位角
},
boxWidth: '150',
boxHeight: '150',
groundPlane: {
show: false, // 显示地面
color: '#ffffff' // 地面颜色
},
label: {
show: false, // 始终显示标签
position: 'top', // 标签位置
distance: 5, // 标签与表面的距离
textStyle: {
color: '#fff', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: 'bold', // 加粗
// backgroundColor: '#121823', // 背景色
padding: [5, 5], // 内边距
borderRadius: 0, // 圆角
borderWidth: 0, // 边框宽度
},
// ================= 标签避让配置 =================
emphasis: { // 鼠标悬停时的特殊样式
show: true,
textStyle: {
color: '#fff', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: 'bold', // 加粗
backgroundColor: '#121823', // 背景色
padding: [5, 5], // 内边距
borderRadius: 0, // 圆角
borderWidth: 0, // 边框宽度
}
},
// formatter: function(params) {
// // 使用 Unicode 图标或 FontAwesome 等字体图标
// return `{icon|\ue603} {name|${params.name}}`;
// },
// rich: {
// icon: {
// fontSize: 24,
// color: '#ff0000',
// // 使用 iconfont 字体（需提前引入字体文件）
// fontFamily: 'iconfont',
// verticalAlign: 'middle'
// },
// name: {
// fontSize: 12,
// color: '#FFF',
// padding: [5, 0]
// }
// }
},
itemStyle: {
color: "rgba(255,255,255,1)",
borderWidth: 1,
borderColor: `#fff`,
},
shading: "lambert",
lambertMaterial: {
detailTexture: mapBg, // 替换为有效纹理URL
// detailTexture:"https://img.isqqw.com/profile/upload/2024/08/17/6ee0cfc7-84a7-46a9-8724-8c615862a92c.jpg",
textureTiling: 1, // 贴图平铺次数（数值越大贴图尺寸越小）
textureScale: 0.2, // 贴图整体缩放系数（需开启 shading: 'realistic'）
detailTextureScale: 2, // 细节纹理缩放
// ====== 方向控制 ======
textureOffset: [0, 0], // 贴图偏移 [水平, 垂直]
uvScale: [2, 1] // UV方向独立缩放（部分版本支持）
},
light: {
main: {
color: '#fff',
intensity: 1.1,
shadow: true,
shadowQuality: 'ultra',
},
ambient: {
color: 'skyblue',
intensity: 0.2
}
},
emphasis: {
label: {
show: true,
fontSize: 16,
color: '#f9fcff',
fontWeight: 600
},
itemStyle: {
color: '#539efe9a',
}
},
data: this.mydata,
zlevel: 3,
zoom: 1.2
},
// {
// name: '学生数量',
// type: 'map',
// map: 'guangxiJson',
// layoutCenter: ['50%', '50%'],//位置
// // layoutSize: '110%',//大小
// zoom: 1.1,
// top: '30',
// tooltip: {
// show: true
// },
// label: {
// normal: {
// show: true, //省份名称
// },
// emphasis: {
// show: true,
// color:'#fff'
// }
// },
// aspectScale: 0.75,
// roam: false,
// regions: [{
// name: '南宁市', // 指定要添加纹理的区域
// itemStyle: {
// color: {
// image: mapBg, // 纹理图片路径
// repeat: 'repeat' // 重复模式
// }
// }
// }],
// itemStyle: {
// normal: {
// // borderColor: 'rgba(226,246,255,0.75)',
// // borderColor: 'rgba(9,44,90,0.75)',
// borderColor: '#CDF9FE',
// borderWidth: 1,
// fontSize: 12,
// areaColor: {
// type: 'linear-gradient',
// x: 1000,
// y: 600,
// x2: 1000,
// y2: 0,
// colorStops: [{
// offset: 0,
// color: '#19A7FF' // 0% 处的颜色
// }, {
// offset: 1,
// color: '#19A7FF' // 50% 处的颜色
// }],
// global: false, // 缺省为 false
// },
// shadowColor: 'transparent',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// },
// emphasis: {
// show:false,
// areaColor: 'rgba(4, 64, 102, 0.5)'
// }
// },
// zlevel: 3,
// data: mydata
// },
// {
// name: '',
// type: 'map',
// map: 'china1',
// layoutCenter: ['50%', '50%'],//位置
// zoom: 1,
// tooltip: {
// show: false
// },
// label: {
// normal: {
// show: false, //省份名称
// },
// emphasis: {
// show: false,
// color:'#fff'
// }
// },
// top: '28',
// left: '180',
// aspectScale: 0.75,
// roam: false,
// itemStyle: {
// normal: {
// borderColor: 'rgba(226,246,255,0.35)',
// borderWidth: 0.8,
// fontSize: 16,
// areaColor: {
// type: 'linear-gradient',
// x: 1000,
// y: 600,
// x2: 1000,
// y2: 0,
// colorStops: [{
// offset: 0,
// color: '#092C5A' // 0% 处的颜色
// }, {
// offset: 1,
// // color: 'rgba(9,44,90,1)' // 50% 处的颜色
// color: '#092C5A' // 50% 处的颜色
// }],
// global: false, // 缺省为 false
// },
// shadowColor: 'transparent',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// },
// emphasis: {
// show:false,
// areaColor: 'transparent'
// }
// },
// zlevel: 1,
// },
// {
// name: '',
// type: 'map',
// map: 'china2',
// layoutCenter: ['50%', '50%'],//位置
// zoom: 1.1,
// tooltip: {
// show: false
// },
// label: {
// normal: {
// show: false, //省份名称
// },
// emphasis: {
// show: false,
// color:'#fff'
// }
// },
// top: '56',
// left: '176',
// aspectScale: 0.75,
// roam: false,
// itemStyle: {
// normal: {
// borderColor: 'rgba(226,246,255,0.35)',
// borderWidth: 0.8,
// fontSize: 16,
// areaColor: {
// type: 'linear-gradient',
// x: 1000,
// y: 600,
// x2: 1000,
// y2: 0,
// colorStops: [{
// offset: 0,
// color: 'rgba(9,44,90,0.35)' // 0% 处的颜色
// }, {
// offset: 1,
// color: 'rgba(9,44,90,0.35)' // 50% 处的颜色
// }],
// global: false, // 缺省为 false
// },
// shadowColor: 'transparent',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// },
// emphasis: {
// show:false,
// areaColor: 'transparent'
// }
// },
// zlevel: 1,
// }
]
};
this.myChart = echarts.init(document.getElementById('mapContent'))
this.myChart && this.myChart.setOption(option)
}
},
mounted() {
this.$nextTick(() => {
this.initMap();
});
},
beforeDestroy() {
// clearInterval(this.timer);
// this.timer = null;
}
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
</style>

211
src/views/student_info/components/controlCabinLeft.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<div class="control-cabin-left-wrapper">
<div class="title-bg">
<img src="@/assets/controlCabinImages/title_remark.png" alt="">
<p>学生概况</p>
</div>
<div class="cabin-left-and-right">
<div class="left-wrap-left">
<div class="wrapper-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>民族</p>
</div>
<div class="echarts-wrap" id="nationId"></div>
</div>
<div class="wrapper-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>农村/城镇</p>
</div>
<div class="echarts-wrap">
<ContrySideEchart></ContrySideEchart>
</div>
</div>
<div class="wrapper-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>政治面貌</p>
</div>
<div class="echarts-wrap">
<PoliticalEchartEchart></PoliticalEchartEchart>
</div>
</div>
<div class="wrapper-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>男女比例</p>
</div>
<div class="echarts-wrap">
<SexEchart></SexEchart>
</div>
</div>
</div>
<div class="left-wrap-right">
<div class="left-wrap-left">
<div class="wrapper-item die-height">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>贫困类型</p>
</div>
<div class="echarts-wrap">
<PKTypeEchart></PKTypeEchart>
</div>
</div>
<div class="wrapper-item age-item">
<div class="sub-special-title">
<div class="sub-special-left">
<img src="@/assets/controlCabinImages/title_dir_left.png" alt="">
<p>年龄分布</p>
<img src="@/assets/controlCabinImages/title_dir_right.png" alt="">
</div>
<div class="sub-special-right">出生年份</div>
</div>
<div class="echarts-wrap">
<AgeEchart></AgeEchart>
</div>
</div>
<div class="wrapper-item zc-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>政策奖励及补助</p>
</div>
<div class="echarts-wrap">
<ZCDataList></ZCDataList>
</div>
</div>
<div class="wrapper-item">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>荣誉</p>
</div>
<div class="echarts-wrap honor-wrap">
<HonorDataList></HonorDataList>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import ContrySideEchart from './contrySideEchart.vue';
import PoliticalEchartEchart from './PoliticalEchartEchart.vue';
import SexEchart from './SexEchart.vue';
import PKTypeEchart from './PKTypeEchart.vue';
import AgeEchart from './AgeEchart.vue';
import ZCDataList from './ZCDataList.vue';
import HonorDataList from './HonorDataList.vue';
import {getSrsMZCount} from '@/api/stuCQS/basedata/student.js';
export default {
name: 'ControlCabin',
components: {
ContrySideEchart,
PoliticalEchartEchart,
SexEchart,
PKTypeEchart,
AgeEchart,
ZCDataList,
HonorDataList,
},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
var res =await getSrsMZCount();
var fromTable={};
var myData=[];
if (res.code == 200) {
var data = [...res.data];
for(var i=0;i< data.length;i++){
fromTable={'name':data[i].mz,'value':data[i].quantity};
myData.push(fromTable);
}
}
this.chartInstance = echarts.init(document.getElementById('nationId'));
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
bottom: '1%',
left: 'center',
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff',
}
},
series: [
{
name: '民族',
type: 'pie',
radius: ['30%', '65%'],
center: ['50%', '45%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 0
},
c: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 4
}
}
},
labelLine: {
show: true,
length: 6,
length2: 14,
lineStyle: {
color: '#8897B0',
}
},
data:myData
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

114
src/views/student_info/components/contrySideEchart.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="echarts-wrapper" id="contrySideEchartId">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getSrsHZCount } from '@/api/stuCQS/basedata/student.js';
export default {
name: 'contrySideEchart',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
var res = await getSrsHZCount();
var fromTable = {};
var myData = [];
if (res.code == 200) {
var data = [...res.data];
for (var i = 0; i< data.length; i++) {
fromTable = { 'name': data[i].hkxz + "户口", 'value': data[i].quantity };
myData.push(fromTable);
}
}
this.chartInstance = echarts.init(document.getElementById('contrySideEchartId'));
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
bottom: '1%',
left: 'center',
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
itemSymbol: 'rect',
textStyle: {
color: '#fff',
}
},
series: [
{
name: '农村/城镇',
type: 'pie',
radius: '65%',
center: ['50%', '45%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 0
},
c: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 4
}
}
},
labelLine: {
show: true,
length: 8,
length2: 14,
lineStyle: {
color: '#8897B0',
}
},
// data: [
// { value: 168, name: '城镇户口' },
// { value: 118, name: '农村户口' },
// ]
data: myData
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../page1.css";
@import "../../../assets/style/controlCabin.css";
</style>

136
src/views/student_info/components/right/RightBottom.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<div class="right-bottom-wrapper">
<div class="right-bottom-top">
<div class="bottom-top-item">综合素质评价<img src="../../../../assets/controlCabinImages/dir_bottom.png" alt=""></div>
<div class="bottom-top-item">2023-2024学年 上学期<img src="../../../../assets/controlCabinImages/dir_bottom.png" alt=""></div>
</div>
<div class="echarts-wrap" id="XGPJEchartsId"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'RightCenter',
components: {},
data() {
return {
chartInstance: null,
dataname: ['德', '劳', '美', '体', '智'],
datamax: [100, 100, 100, 100, 100],
datavaule: [87, 94, 96, 83, 90]
}
},
methods: {
generateRichText(value, percent) {
const mapping = {
'德': 'a',
'劳': 'b',
'美': 'c',
'体': 'd',
'智': 'e'
}
const prefix = mapping[value]
return `{${prefix}1|${value}} {${prefix}2|${percent}}`
},
// 获取样式配置
getRichStyleConfig() {
return {
// 德
a1: { fontSize: 12, color: '#fff', align: 'center' },
a2: { fontSize: 12, color: '#fff', padding: 4 },
// 中龄林
b1: { fontSize: 12, color: '#fff', align: 'center' },
b2: { fontSize: 12, color: '#fff', padding: 4 },
// 美
c1: { fontSize: 12, color: '#fff', align: 'center' },
c2: { fontSize: 12, color: '#fff', padding: 4 },
// 体
d1: { fontSize: 12, color: '#fff', align: 'center' },
d2: { fontSize: 12, color: '#fff', padding: 4 },
// 智
e1: { fontSize: 12, color: '#fff', align: 'center' },
e2: { fontSize: 12, color: '#fff', padding: 4 }
}
},
// 生成指示器配置
generateIndicator() {
return this.dataname.map((name, index) => ({
name,
max: this.datamax[index]
}))
},
// 查找索引
contains(obj) {
return this.dataname.findIndex(item => item === obj)
},
initChart() {
this.chartInstance = echarts.init(document.getElementById('XGPJEchartsId'));
const option = {
backgroundColor: 'transparent',
tooltip: { show: false },
radar: {
center: ['50%', '60%'],
radius: '70%',
startAngle: 90,
splitNumber: 5,
splitArea: {
areaStyle: {
color: ['rgba(66, 89, 136, 0.3)', 'rgba(66, 89, 136, 0.4)', 'rgba(66, 89, 136, 0.5)','rgba(66, 89, 136, 0.6)', 'rgba(66, 89, 136, 0.7)'].reverse()
}
},
axisLine: { show: true, lineStyle: { color: 'transparent' } },
splitLine: { show: true, lineStyle: { color: 'transparent' } },
name: {
formatter: (value) => {
const i = this.contains(value)
const percent = this.datavaule[i]
return this.generateRichText(value, percent)
},
textStyle: {
rich: this.getRichStyleConfig()
}
},
indicator: this.generateIndicator()
},
series: [{
type: 'radar',
symbol: 'none',
symbolSize: 7,
areaStyle: { color: 'rgba(170, 216, 255, 0)' },
itemStyle: {
show: false,
color: '#84E1FF',
borderColor: '#00A7FE',
borderWidth: 1
},
lineStyle: { color: '#70B22F', width: 1 },
data: [this.datavaule]
}]
}
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
</style>

116
src/views/student_info/components/right/RightCenter.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div class="right-center-wrapper">
<div class="sub-title sub-title-between">
<div class="sub-title-left">
<img src="../../../../assets/controlCabinImages/title_spot.png" alt="">
<p>在校生发展去向</p>
</div>
<div class="more">更多 <img src="../../../../assets/controlCabinImages/direction.png" alt=""></div>
</div>
<div class="echarts-wrap" id="FZQXEchartsId"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'RightCenter',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
initChart() {
this.chartInstance = echarts.init(document.getElementById('FZQXEchartsId'));
let label = [2020, 2021, 2022, 2023, 2024];
let value = [1125, 2586, 2200, 3765, 2964];
const option = {
tooltip: {
trigger: 'item'
},
grid: {
},
legend: {
bottom: '1%',
left: 'center',
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
itemSymbol: 'rect',
textStyle: {
color: '#fff',
}
},
series: [
{
name: '在校生发展去向',
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '50%'],
label: {
show: true,
color: '#8897B0',
formatter: '{c|{c}人}\n{d|{d}%}',
rich: {
d: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 0
},
c: {
fontSize: 12,
color: '#8897B0',
align: 'left',
padding: 4
}
}
},
labelLine: {
show: false,
length: 0,
length2: 14,
lineStyle: {
color: '#8897B0',
}
},
data: [
{ value: 668, name: '就业' },
{ value: 315, name: '其他' },
{ value: 578, name: '国内深造' },
{ value: 398, name: '国外深造' },
]
}
]
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
</style>

206
src/views/student_info/components/right/RightTop.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<div class="center-top-wrapper">
<div class="sub-title sub-title-between">
<div class="sub-title-left">
<img src="../../../../assets/controlCabinImages/title_spot.png" alt="">
<p>近五年在校人数</p>
</div>
<!-- <div class="more">更多 <img src="../../../../assets/controlCabinImages/direction.png" alt=""></div> -->
</div>
<div class="echarts-wrap" id="FZFXEchartsId"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getFiveSchoolTotalCount } from '@/api/stuCQS/basedata/student.js';
export default {
name: 'CenterBottom',
components: {},
data() {
return {
chartInstance: null
}
},
methods: {
async initChart() {
let label=[];
let value=[];
this.chartInstance = echarts.init(document.getElementById('FZFXEchartsId'));
let res =await getFiveSchoolTotalCount();
if (res.code == 200) {
let data = [...res.data];
data.forEach(item=>{
label.push(item.gradeCode);
value.push(item.number);
})
}
// let label = [2020, 2021, 2022, 2023, 2024];
// let value = [1125, 2586, 2200, 3765, 2964];
const option = {
grid: {
top: '6%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255,255,255,0)', // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255,255,255,1)', // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
formatter: '{value}',
fontSize: 14,
margin: 20,
textStyle: {
color: '#7ec7ff',
},
},
axisLine: {
lineStyle: {
color: '#164F93',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#243753',
},
},
axisTick: {
show: true,
},
data: label,
},
],
yAxis: [
{
boundaryGap: false,
type: 'value',
axisLabel: {
textStyle: {
color: '#7ec7ff',
},
},
nameTextStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 40,
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.149)',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#164F93',
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '在校人数',
type: 'line',
smooth: true,
showSymbol: true,
symbolSize: 8,
zlevel: 3,
itemStyle: {
color: '#19a3df',
borderColor: '#a3c8d8',
},
lineStyle: {
normal: {
width: 2,
color: '#7DC9FF',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(54, 211, 255, 0.6) ',
},
{
offset: 0.8,
color: 'rgba(54, 211, 255, 0.1) ',
},
],
false
),
},
},
data: value,
},
],
};
this.chartInstance && this.chartInstance.setOption(option)
},
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize()
}
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chartInstance) {
this.chartInstance.dispose()
}
},
}
</script>
<style scoped lang="css">
@import "../../page1.css";
@import "../../../../assets/style/controlCabin.css";
</style>

224
src/views/student_info/index.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div class="control-cabin-wrapper" ref="fullscreenElement">
<div class="header-container">学生管理驾驶舱</div>
<div class="back-btn">
<img src="../../assets/controlCabinImages/dir_left.png" alt="">
<span @click="notFull">返回</span>
</div>
<div class="body-container">
<div class="body-left-container">
<ControlCabinLeft></ControlCabinLeft>
</div>
<div class="body-center-container">
<div class="body-center-top">
<CenterTop></CenterTop>
</div>
<div class="body-center-center">
<div class="sub-title">
<img src="@/assets/controlCabinImages/title_spot.png" alt="">
<p>广西区图</p>
</div>
<div class="echarts-wrap">
<GuangxiMap></GuangxiMap>
</div>
</div>
<div class="body-center-bottom">
<CenterBottom></CenterBottom>
</div>
</div>
<div class="body-right-container">
<!-- <div class="r-select-con">
<img class="location-img" src="@/assets/imagesPage1/pic-location.png" />
<p class="select-t">学生搜索</p>
<div class="field-con" style="margin-right: 18rem;">
<p class="field">姓名</p>
<div type="text" class="field-input"></div>
<img src="@/assets/imagesPage1/refrsh.png" />
</div>
<div class="field-con">
<p class="field">姓名</p>
<div type="text" class="field-input"></div>
<img src="@/assets/imagesPage1/refrsh.png" />
</div>
</div> -->
<div class="body-right-dir-wrap">
<div class="title-flex-right">
<div class="title-bg title-right-backbg">
<div class="flex-center">
<p class="title-backbg-text">专业分布</p>
<img src="@/assets/controlCabinImages/title_remark.png" alt="">
</div>
</div>
</div>
<RightTop></RightTop>
</div>
<RightCenter></RightCenter>
<div class="title-flex-right">
<div class="title-bg title-right-backbg">
<div class="flex-center">
<p class="title-backbg-text">修改评价</p>
<img src="@/assets/controlCabinImages/title_remark.png" alt="">
</div>
</div>
</div>
<RightBottom></RightBottom>
</div>
</div>
<div class="footer-container"></div>
</div>
</template>
<script>
(function () {
const BASE_WIDTH = 1920 // 设计稿基准宽度
const root = document.documentElement
function refreshRem() {
// 计算比例（关键公式）
const ratio = root.clientWidth / BASE_WIDTH
// 设置基准值（1rem = 1设计像素）
root.style.fontSize = ratio + 'px'
}
// 初始化执行
refreshRem()
// 监听窗口变化
window.addEventListener('resize', refreshRem);
})();
import ControlCabinLeft from '@/views/student_info/components/controlCabinLeft.vue';
import CenterTop from '@/views/student_info/components/center/CenterTop.vue';
import GuangxiMap from '@/views/student_info/components/center/GuangxiMap.vue';
import CenterBottom from '@/views/student_info/components/center/CenterBottom.vue';
import RightTop from '@/views/student_info/components/right/RightTop.vue';
import RightCenter from '@/views/student_info/components/right/RightCenter.vue';
import RightBottom from '@/views/student_info/components/right/RightBottom.vue';
export default {
name: 'ControlCabin',
components: {
ControlCabinLeft,
CenterTop,
GuangxiMap,
CenterBottom,
RightTop,
RightCenter,
RightBottom
},
data() {
return {
}
},
create() {
},
mounted() {
this.doFull();
},
methods: {
doFull() {
this.$store.dispatch('app/toggleSideBarHide', true);
document.querySelector('.navbar').style.display = "none";
document.querySelector('.tags-view-container').style.display = "none";
},
notFull() {
this.$store.dispatch('app/toggleSideBarHide', false);
document.querySelector('.navbar').style.display = "block";
document.querySelector('.tags-view-container').style.display = "block";
},
},
}
</script>
<style scoped lang="css">
@import "page1.css";
@import "../../assets/style/controlCabin.css";
.main-container2 {
background: url(../../assets/imagesPage1/bg.png) no-repeat center;
}
.control-cabin-wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
background: url(../../assets/controlCabinImages/wrap_bg.png);
background-size: 100% 100%;
overflow: hidden;
}
.body-left-container {
width: 30%;
height: 100%;
}
.body-center-container {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
.body-center-top {
height: 132rem;
width: 100%;
}
.body-center-center {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
.body-center-center .sub-title {
padding-left: 54rem;
}
.body-center-center .echarts-wrap {
padding-left: 32rem;
}
.body-center-bottom {
height: 348rem;
width: 100%;
display: flex;
flex-direction: column;
}
.body-right-container {
width: 31%;
height: 100%;
display: flex;
flex-direction: column;
padding-left: 64rem;
padding-right: 24rem;
}
.back-btn {
display: flex;
align-items: center;
position: fixed;
top: 22rem;
right: 81rem;
cursor: pointer;
z-index: 99999;
}
.back-btn img {
width: 6rem;
height: 12rem;
;
}
.back-btn span {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 8rem;
}
</style>

736
src/views/student_info/page1.css Normal file
View File

@@ -0,0 +1,736 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--min-font: 14rem;
--max-font: 36rem;
--base-width: 1920rem;
}
@font-face {
font-family: 'newFont';
src: url('../../assets/font/ysbth.ttf');
}
html{
scrollbar-width: thin; /* auto | thin | none */
scrollbar-color: #1A5FE8 #0C121D;
}
::-webkit-scrollbar {
width: 7rem;
}
::-webkit-scrollbar-track {
background: #0C121D;
border-radius: 6px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: #1A5FE8;
border-radius: 6px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: #1A5FE8;
}
body, html{
width: 100%;
height: 100%;
}
.main-container{
/* width: 100vw; */
height: 100vh;
display: flex;
flex-direction: column;
/* background: url(../../assets/imagesPage1/bg.png) no-repeat center; */
background-size: 100% 100%;
}
.header-right{
display: flex;
position: absolute;
top: 15rem;
right: 31rem;
justify-content: center;
align-items: center;
}
.header-right p{
font-size: 12rem;
margin: 0 18rem 0 7rem;
}
.close-png{
width: 32rem;
height: 32rem;
}
.header-container{
height: 7.407vh;
display: flex;
align-items: center;
width: 100%;
background: url(../../assets/imagesPage1/header.png) no-repeat center;
background-size: 100% 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
font-size: 55rem;
font-family: 'newFont';
color: #fff;
position: relative;
}
.body-container{
display: flex;
flex: 1;
min-height: 0;
padding: 0 15rem 0 15rem;
width: 100%;
}
.footer-container{
height: 50rem;
background: url(../../assets/imagesPage1/footer.png) no-repeat center;
background-size: 100% 100%;
width: 100%;
}
.left-part{
width: 33%;
margin-right: 30rem;
display: flex;
flex-direction: column;
min-height: 0;
padding-top: 5.74vh;
position: relative;
margin-top: 3.9814vh;
}
.l-title{
width: 450rem;
height: 4.629vh;
position: absolute;
left: 0;
top: 0;
background: url(../../assets/imagesPage1/pic6.png) no-repeat center;
background-size: 100% 100%;
padding-left: 84rem;
display: flex;
align-items: center;
}
.l-title img{
width: 14rem;
height: 14rem;
margin-right: 16rem;
}
.l-title p{
font-family: 'newFont';
font-size: 24rem;
color: #fff;
}
.l-1-1{
height: 50%;
background: url(../../assets/imagesPage1/pic1.png) no-repeat center;
background-size: 100% 100%;
position: relative;
margin-bottom: 21rem;
}
.l-1-1:before{
content: "";
position: absolute;
width: 52rem;
height: 52rem;
background: url(../../assets/imagesPage1/pic1-1.png) no-repeat center;
background-size: 100% 100%;
top: -10rem;
right: -10rem;
}
.block:after{
content: "";
position: absolute;
height: 10rem;
width: 120rem;
bottom: -5rem;
right: 0;
background: url(../../assets/imagesPage1/pic-point.png) no-repeat center;
background-size: cover;
}
.l-1-2{
height: 21%;
margin-bottom: 21rem;
background: url(../../assets/imagesPage1/pic2.png) no-repeat center;
background-size: 100% 100%;
position: relative;
}
.l-1-2:before{
content: "";
position: absolute;
width: 52rem;
height: 52rem;
background: url(../../assets/imagesPage1/pic2-1.png) no-repeat center;
background-size: 100% 100%;
top: -10rem;
right: -13rem;
}
.l-1-3{
height: 24%;
background: url(../../assets/imagesPage1/pic3.png) no-repeat center;
background-size: 100% 100%;
position: relative;
display: flex;
flex-direction: column;
}
.class-con{
flex:1;
display: flex;
flex-direction: column;
min-height: 0;
}
.class-title{
height: 3.518vh;
color: #fff;
justify-content: center;
align-items: center;
display: flex;
}
.class-title p{
font-size: 16rem;
}
.class-title p:nth-child(1){
width: 20%;
text-align: center;
}
.class-title p:nth-child(2){
width: 50%;
}
.class-title p:nth-child(3){
width: 30%;
}
.class-list-cont{
overflow: auto;
flex:1;
min-height: 0;
}
.class-item{
display: flex;
height: 4.44vh;
justify-content: center;
align-items: center;
}
.class-item:nth-child(odd){
background: linear-gradient(0deg, #2451A1, #2451A1), #0B3D96;
}
.class-item p{
font-size: 14rem;
color: #fff;
}
.class-item p:nth-child(1){
width: 20%;
text-align: center;
}
.class-item p:nth-child(2){
width: 50%;
}
.class-item p:nth-child(3){
width: 30%;
}
.l-1-3:before{
content: "";
position: absolute;
width: 52rem;
height: 52rem;
background: url(../../assets/imagesPage1/pic3-1.png) no-repeat center;
background-size: 100% 100%;
top: -10rem;
right: -13rem;
}
.mid-part{
flex: 1;
min-height: 0;
margin-right: 30rem;
display: flex;
flex-direction: column;
margin-top: 6.48vh;
}
.m-1-1{
height: 58.33vh;
background: url(../../assets/imagesPage1/pic4.png) no-repeat center;
background-size: 100% 100%;
margin-bottom: 2.4vh;
}
.m-1-2{
height: 19.9vh;
background: url(../../assets/imagesPage1/pic5.png) no-repeat center;
background-size: 100% 100%;
position: relative;
}
.m-1-2:before{
content: "";
position: absolute;
width: 52rem;
height: 52rem;
background: url(../../assets/imagesPage1/pic5-1.png) no-repeat center;
background-size: 100% 100%;
top: -10rem;
right: -13rem;
}
.right-part{
width: 33%;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
.r-pic-1{
width: 80%;
}
.r-1-1{
flex: 1;
min-height: 0;
position: relative;
display: flex;
}
.r-1-2{
height: 25%;
position: relative;
display: flex;
}
.ai-con{
position: relative;
flex: 1;
}
.ai-con img{
height: 17.87vh;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 70%;
}
.block{
padding: 2.492vh 36rem;
}
.r-select-con{
height: 35rem;
display: flex;
justify-content: flex-end;
margin-bottom: 34rem;
}
.location-img{
width: 27rem;
height: 27rem;
}
.select-t{
font-size: 24rem;
margin-right: 18rem;
font-family: 'newFont';
color: #fff;
}
.field-con{
width: 148rem;
background: #1C2A57;
border: 1rem solid #EBEDF1;
display: flex;
padding: 6rem 12rem;
border-radius: 4rem;
}
.field-con .field{
color: #FFFFFF;
font-family: 'newFont';
color: #fff;
font-size: 18rem;
}
.field-input{
background: none;
flex: 1;
border: none;
}
.tree-l{
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
padding-bottom: 20%;
}
.tree-r{
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
padding-top: 10%;
padding-bottom: 5%;
}
.tag{
height: 7.22vh;
padding: 2rem 6rem;
display: flex;
flex-direction: column;
color: #fff;
border-radius: 4rem;;
min-height: 69rem;
}
.tag:not(:last-child){
margin-bottom: 4.0vh;
}
.tag-top{
font-size: 18rem;
font-family: 'newFont';
}
.tag-mid{
font-size: 14rem;
height: 34rem;
}
.tag-bot{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10rem;
}
.tag-date{
font-size: 10px;
}
.tree-con{
display: flex;
padding-top: 80rem;
padding-bottom: 26rem;
flex: 1;
min-height: 0;
width: 100%;
padding-right: 40rem;
}
.tree-m{
width: 2.777vh;
margin: 0 4rem;
display: flex;
flex-direction: column;
position: relative;
}
.tree-arrow{
width: 14rem;
height: 9rem;
background: url(../../assets/imagesPage1/arr-down.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
bottom:0;
left: 50%;
transform: translateX(-50%);
}
.tree-line{
position: absolute;
height: 98%;
width: 1px;
background-color: #fff;
left: 50%;
top: -10rem;
z-index: 0;
}
.tree-m img{
width:2.777vh;
height: 2.777vh;
margin-bottom: 2.777vh;
position: relative;
z-index: 1;
}
.tag-more{
font-family: 'newFont';
font-size: 10rem;
}
.tag-more img{
width: 4rem;
height: 7rem;
}
.tag-1{
background: url(../../assets/imagesPage1/tree-bg-blue.png);
background-size: 100% 100%;
}
.tag-2{
background: url(../../assets/imagesPage1/tree-bg-2.png);
background-size: 100% 100%;
}
.tag-3{
background: url(../../assets/imagesPage1/tree-bg-2.png);
background-size: 100% 100%;
}
.tag-4{
background: url(../../assets/imagesPage1/tree-bg-3.png);
background-size: 100% 100%;
}
.tag-5{
background: url(../../assets/imagesPage1/tree-bg-4.png);
background-size: 100% 100%;
padding-left: 10rem;
}
.tag-6{
background: url(../../assets/imagesPage1/tree-bg-4.png);
background-size: 100% 100%;
padding-left: 10rem;
}
.tag-7{
background: url(../../assets/imagesPage1/tree-bg-5.png);
background-size: 100% 100%;
padding-left: 10rem;
}
.tag-8{
background: url(../../assets/imagesPage1/tree-bg-6.png);
background-size: 100% 100%;
padding-left: 10rem;
}
.tag-yellow{
background: linear-gradient(285deg, #65B01A 2%, #56AA01 94%), #D8D8D8;
}
.tag-red{
background: linear-gradient(285deg, #FD5377 2%, #FE2E5A 94%), #D8D8D8;
}
.block-t-1{
font-family: "newFont";
font-size: 18rem;
color: #fff;
}
.block-t-2{
font-family: "newFont";
font-size: 12rem;
color: #fff;
}
.block-title{
margin-bottom: 10rem;
}
.block-content{
display: flex;
flex-wrap: wrap;
}
.block-item{
flex: 1 1 calc(50% - 20rem); /* 计算间隙补偿 */
height: 2.777vh;
display: flex;;
justify-content: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
max-width: calc(50% - 20rem);
margin-bottom: 1vh;
}
.block-item:not(:nth-child(2n)){
margin-right: 20rem;
}
.item-left{
font-size: 14rem;
color: #D1E1F7;
text-align: center;
width: 33.33%;
background: #2273DD;
height: 2.777vh;
line-height: 2.777vh;
}
.item-right{
font-size: 14rem;
color: #fff;
text-align: left;
width: 66.66%;
background: #1F69D6;
height: 2.777vh;
line-height: 2.777vh;
padding-left: 10rem;
}
.m-part-1{
height: 110rem;
display: flex;
margin-top: 75rem;
}
.m-part-1-mid{
width: 107rem;
height: 107rem;
}
.m-part-1-left{
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 8rem;
}
.m-part-1-right{
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 8rem;
}
.small-tag{
border-radius: 11rem;
height: 22rem;
color: #fff;
text-align: center;
display: inline-block;
line-height: 22rem;
font-size: 12rem;
font-family: 'newFont';
margin-bottom: 21rem;
}
.small-tag-1{
background: #2189D8;
width: 65rem;
margin: 0 0 21rem 0;
}
.small-tag-2{
background: #0AC593;
width: 65rem;
margin-right: 15rem;
}
.small-tag-3{
background: #9E51FE;
width: 65rem;
margin: 0 0 21rem 0;
}
.small-tag-4{
background: #5BB500;
width: 65rem;
margin: 0 0 21rem 0;
}
.small-tag-5{
background: #FF8848;
width: 83rem;
margin: 0 0 21rem 0;
margin-left: 15rem;
}
.small-tag-6{
background: #FE5578;
width: 65rem;
margin: 0 0 21rem 0;
}
.name-con{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.name-con-name{
font-size: 22rem;
margin-right: 6rem;
font-family: 'newFont';
color: #fff;
}
.name-con img{
width: 24rem;
height: 24rem;
}
.year-con-1{
color: rgba(255, 255, 255, 0.46);
font-size: 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.option-con{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 32rem;
}
.option-con-1{
display: flex;
font-size: 12rem;
justify-content: center;
align-items: center;
padding: 2.5rem 10.5rem;
background: #0E42A1;
border-radius: 4rem;
}
.option-con-1:not(:last-child){
margin-right: 26rem;
}
.option-con-1 img{
width: 16rem;
height: 16rem;
margin-left: 2rem;
}
.option-name{
font-size: 12rem;
color: #fff;
}
.chart-con{
width: 41.8vh;
height: 23.8vh;
margin: 0 auto;
margin-top: 4.2vh;
}
.ai-tag{
display: flex;
flex-direction: column;
position: absolute;
}
.ai-tag p{
color: #D1E1F7;
font-size: 14rem;
}
.ai-tag span{
font-size: 20rem;
font-family: 'newFont';
}
.ai-tag-1{
left: 94rem;
top: 5vh;
}
.ai-tag-2{
left: 94rem;
top: 11vh;
}
.ai-tag-3{
left: 94rem;
top: 17vh;
}
.ai-tag-4{
right: 94rem;
top: 5vh;
}
.ai-tag-5{
right: 94rem;
top: 11vh;
}
.ai-tag-6{
right: 94rem;
top: 17vh;
}
.ai-tag-1 span{
color: #2CA4FF;
}
.ai-tag-2 span{
color: #0AC593;
}
.ai-tag-3 span{
color: #9E51FE;
}
.ai-tag-4 span{
color: #5BB500;
}
.ai-tag-5 span{
color: #FF8848;
}
.ai-tag-6 span{
color: #FE5578;
}