1641 lines
52 KiB
Vue
1641 lines
52 KiB
Vue
<template>
|
|
<div class="workOrder">
|
|
<div class="ipt">
|
|
<div class="one">
|
|
<el-dropdown @command="toViewGrade" trigger="click">
|
|
<el-button type="primary" style="width: 200px;">
|
|
年级报告<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item :command="item.id" v-for="item in data.gradeList">{{ item.gradeName
|
|
}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<!-- <el-select v-model="data.gradeId" class="m-2" @change="toViewGrade">
|
|
<el-option v-for="item in data.gradeList" :key="item.id" :label="item.gradeName" :value="item.id" />
|
|
</el-select> -->
|
|
</div>
|
|
<div class="one">
|
|
<el-dropdown trigger="click" :hide-on-click="false">
|
|
<el-button type="primary" style="width: 200px;">
|
|
班级报告
|
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>
|
|
<el-cascader-panel v-model="data.ClassId" :options="data.classes" clearable
|
|
@change="toStudentView" />
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<!-- <p>班级报告:</p>
|
|
<el-cascader v-model="data.ClassId" clearable :options="data.classes" lazy filterable
|
|
@change="toStudentView"></el-cascader> -->
|
|
</div>
|
|
<div class="one">
|
|
<!-- <p>教师报告:</p>
|
|
<el-select v-model="data.teacherId" class="m-2" @change="toView1">
|
|
<el-option v-for="item in data.teacherList" :key="item.id" :label="item.teacherName"
|
|
:value="item.id" />
|
|
</el-select> -->
|
|
<el-dropdown @command="toView1" trigger="click">
|
|
<el-button type="primary" style="width: 200px;">
|
|
教师报告<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu :style="{ maxHeight: '300px', overflowY: 'auto' }">
|
|
<el-dropdown-item :command="item.id" v-for="item in data.teacherList">{{ item.teacherName
|
|
}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="one">
|
|
<!-- <p>学生报告:</p>
|
|
<el-cascader v-model="data.studentId" clearable :options="data.classes" lazy filterable
|
|
@change="toViewStudent"></el-cascader> -->
|
|
<el-dropdown trigger="click" :hide-on-click="false">
|
|
<el-button type="primary" style="width: 200px;">
|
|
学生报告
|
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>
|
|
<el-cascader-panel v-model="data.studentId" :options="data.classes" clearable
|
|
@change="toViewStudent" />
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="listOne" v-for="(item, index) in data.listData" :key="index">
|
|
<div class="left">
|
|
<img :src="item.url" alt="">
|
|
</div>
|
|
<div class="right">
|
|
<p>{{ item.num }}</p>
|
|
<p>{{ item.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cont1">
|
|
<div class="cont1Left">
|
|
<div class="title">
|
|
<p>年级体测平均成绩</p>
|
|
<div class="barChart" id="barChart">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="cont1Right">
|
|
<div class="title">
|
|
<div class="head">
|
|
<div class="left">
|
|
<p>各体测项目等级占比</p>
|
|
</div>
|
|
<div class="right">
|
|
<span>项目:</span>
|
|
<el-select @change="changeProject" v-model="data.project" placeholder="请选择"
|
|
style="width: 240px">
|
|
<el-option v-for="item in data.projectData" :key="item.categoryId"
|
|
:label="item.categoryName" :value="item.categoryId" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="levelbarChart" id="levelbarChart">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cont3">
|
|
<div class="title">
|
|
<p>班级体测达标率对比</p>
|
|
</div>
|
|
<div class="cont3Chart" id="classBarChart"></div>
|
|
</div>
|
|
<div class="cont4">
|
|
<div class="title">
|
|
<div class="left">
|
|
<p>成绩趋势</p>
|
|
</div>
|
|
<div class="right">
|
|
<div class="one">
|
|
<p>项目:</p>
|
|
<el-select @change="changeTrendProject" v-model="data.trendProject" placeholder="请选择"
|
|
style="width: 240px">
|
|
<el-option v-for="item in data.projectData" :key="item.categoryId"
|
|
:label="item.categoryName" :value="item.categoryId" />
|
|
</el-select>
|
|
</div>
|
|
<div class="one">
|
|
<p>日期:</p>
|
|
<el-select @change="changeTrendDate" v-model="data.date" placeholder="请选择" style="width: 240px">
|
|
<el-option v-for="item in data.dateData" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="cont4Chart" id="trendChart"></div>
|
|
</div>
|
|
<div class="tableCont">
|
|
<p>详细列表</p>
|
|
<commonTable :tableNeed="data.tableNeed" @toView="toView" v-if="data.tableNeed.refresh"></commonTable>
|
|
</div>
|
|
</div>
|
|
<commonDialog :list="data.dialogData" @cancle="confirm" @confirm="confirm">
|
|
<template #cont>
|
|
<div class="dialogManage">
|
|
<el-scrollbar height="400px">
|
|
<div class="cont">
|
|
<div class="one" @click="toViewStudentDetail(item)"
|
|
v-for="(item, index) in data.filterStudentList" :key="index">
|
|
<div class="left">
|
|
<img style="width: 100px;height: 100px;" :src="item.photo" alt="">
|
|
</div>
|
|
<div class="right">
|
|
<p>{{ item.studentName }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
</div>
|
|
</template>
|
|
</commonDialog>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onBeforeMount, onBeforeUnmount, markRaw } from 'vue';
|
|
import { ArrowDown } from '@element-plus/icons-vue'
|
|
import * as echarts from 'echarts';
|
|
import { useRoute } from 'vue-router';
|
|
import * as _api from '@/api/grade.js';
|
|
import commonTable from '@/views/motionData/trainingData/components/commonTbale/index.vue';
|
|
import eventBus from '@/eventBus.js';
|
|
import { ElMessage } from 'element-plus';
|
|
import commonDialog from '@/components/commonDialog/index.vue';
|
|
const route = useRoute();
|
|
const data = ref({
|
|
dialogData: {
|
|
dialogVisible: false,
|
|
width: 800,
|
|
title: '学生列表',
|
|
},
|
|
classes: [
|
|
|
|
],
|
|
ClassId: '',
|
|
gradeList: [],
|
|
gradeId: null,
|
|
teacherList: [],
|
|
teacherId: '',
|
|
studentId: '',
|
|
|
|
selectData: 1,
|
|
selectOptions: [{
|
|
label: '全部',
|
|
value: 1
|
|
}, {
|
|
label: '课堂模式',
|
|
value: 2
|
|
}, {
|
|
label: '自由模式',
|
|
value: 3
|
|
},],
|
|
listData: [{
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: 12,
|
|
name: '班级数量'
|
|
}, {
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: 12,
|
|
name: '学生数量'
|
|
}, {
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: '20%',
|
|
name: '优秀'
|
|
}, {
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: '20%',
|
|
name: '良好'
|
|
}, {
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: '20%',
|
|
name: '及格'
|
|
}, {
|
|
url: require('@/assets/imgs/icon.png'),
|
|
num: '20%',
|
|
name: '不及格'
|
|
}],
|
|
averageBarData: {
|
|
xData: [],
|
|
yData: [],
|
|
color: ['#4188FE']
|
|
},
|
|
project: 1,
|
|
projectData: [],
|
|
levelChartData: {
|
|
color: ['#4188FE', '#00DAAA', '#FFD11A', '#FF6C1A', '#7F70C9'],
|
|
seriesData: []
|
|
},
|
|
classBarData: {
|
|
xData: ['1班', '2班', '3班', '4班', '5班', '6班'],
|
|
yData: [],
|
|
yData1: [],
|
|
yData2: [],
|
|
color: ['#4188FE', '#00DAAA', '#FAC553'],
|
|
},
|
|
trendProject: 1,
|
|
date: 4,
|
|
dateData: [{
|
|
value: 1,
|
|
label: '近一周'
|
|
}, {
|
|
value: 2,
|
|
label: '近两周'
|
|
}, {
|
|
value: 3,
|
|
label: '近一月'
|
|
}, {
|
|
value: 4,
|
|
label: '近一年'
|
|
},],
|
|
chartsData3: {
|
|
ChartCont: {
|
|
xData: [],
|
|
yName: '分',
|
|
axisLabelColor: '#868A95',
|
|
legendColor: '#3F404A',
|
|
seriesName: "",
|
|
spitAreaColor: ['#fff', '#F6F7F9'],
|
|
labelColor: '#666566',
|
|
lineStyleColor: '#DDDEE2',
|
|
seriesData: [],
|
|
splitNumber: null,
|
|
color: '#0979FA',
|
|
areaStyle: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#0979FA" // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(67,173,255,0.08)" // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tableNeed: {
|
|
refresh: false,
|
|
showoperate: true,
|
|
showEdit: false,
|
|
showPagtion: 2,
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
height: '66.5vh',
|
|
tdHeight: '56px',
|
|
tableLabel: [
|
|
{
|
|
label: "序号",
|
|
prop: "ind",
|
|
|
|
},
|
|
{
|
|
label: "年级-班级",
|
|
prop: "gradeAndClassName",
|
|
},
|
|
{
|
|
label: "人数",
|
|
prop: "count",
|
|
},
|
|
{
|
|
label: "教师姓名",
|
|
prop: "teacherName",
|
|
},
|
|
{
|
|
label: "授课次数",
|
|
prop: "accumulatedTeachingTimes",
|
|
},
|
|
{
|
|
label: "达标率",
|
|
prop: "passRate",
|
|
},
|
|
],
|
|
tableData: [],
|
|
},
|
|
// gradeId: null
|
|
newGradeId: null,
|
|
allStudentList: [],
|
|
filterStudentList: []
|
|
})
|
|
function confirm() {
|
|
data.value.dialogData.dialogVisible = false
|
|
}
|
|
onMounted(() => {
|
|
console.log(route.params, 'route111111')
|
|
console.log(JSON.parse(localStorage.getItem('gradeId')), 'JSON.parse(localStorage.)')
|
|
data.value.newGradeId = route.params.id || JSON.parse(localStorage.getItem('gradeId'))?.id || 0;
|
|
data.value.gradeId = data.value.newGradeId
|
|
console.log(data.value.gradeId, 'data.value.gradeId')
|
|
initCategory(data.value.newGradeId)
|
|
initGradeWholeDataStats(data.value.newGradeId)
|
|
initCategoryRankRatio(data.value.project, data.value.newGradeId)
|
|
initResultTrends(data.value.date, data.value.trendProject, data.value.newGradeId)
|
|
|
|
|
|
GetGradeNames()
|
|
getAllGrade()
|
|
GetTeacherNames()
|
|
|
|
})
|
|
onBeforeUnmount(() => {
|
|
// localStorage.removeItem('gradeId')
|
|
})
|
|
function changeProject(e) {
|
|
console.log(e, 'changeProject')
|
|
data.value.project = e
|
|
data.value.levelChartData.seriesData = []
|
|
initCategoryRankRatio(data.value.project, data.value.gradeId)
|
|
}
|
|
function changeTrendProject(e) {
|
|
data.value.trendProject = e
|
|
data.value.chartsData3.ChartCont.xData = []
|
|
data.value.chartsData3.ChartCont.seriesData = []
|
|
initResultTrends(data.value.date, data.value.trendProject, data.value.gradeId)
|
|
}
|
|
function changeTrendDate(e) {
|
|
data.value.date = e
|
|
data.value.chartsData3.ChartCont.xData = []
|
|
data.value.chartsData3.ChartCont.seriesData = []
|
|
initResultTrends(data.value.date, data.value.trendProject, data.value.gradeId)
|
|
}
|
|
// 获取年级对应项目名称
|
|
async function initCategory(val) {
|
|
try {
|
|
const res = await _api.CategoryList(val != 0 ? val : 1);
|
|
if (res.code == 200) {
|
|
console.log(res, 'initCategory')
|
|
data.value.projectData = res.data
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
// 各体测项目等级占比
|
|
async function initCategoryRankRatio(val, val1) {
|
|
try {
|
|
const res = await _api.CategoryRankRatio(val, val1);
|
|
if (res.code == 200) {
|
|
for (let i in res.data) {
|
|
data.value.levelChartData.seriesData.push({ value: (res.data[i] * 100).toFixed(0), name: i })
|
|
}
|
|
levelChart(data.value.levelChartData)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
// 成绩趋势
|
|
async function initResultTrends(val, val1, val2) {
|
|
try {
|
|
const res = await _api.ResultTrends(val, val1, val2);
|
|
if (res.code == 200) {
|
|
console.log(res.data, 'initResultTrends')
|
|
data.value.chartsData3.ChartCont.xData = res.data.axisX
|
|
data.value.chartsData3.ChartCont.seriesData = res.data.axisY
|
|
trendEcharts(data.value.chartsData3)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
// 年级数据统计
|
|
async function initGradeWholeDataStats(val) {
|
|
try {
|
|
const res = await _api.GradeWholeDataStats(val);
|
|
if (res.code == 200) {
|
|
console.log(res, 'initGradeWholeDataStats')
|
|
data.value.listData[0].num = res.data.classCount
|
|
data.value.listData[1].num = res.data.studentCount
|
|
data.value.listData[2].num = res.data.excellentRate + '%'
|
|
data.value.listData[3].num = res.data.fineRate + '%'
|
|
data.value.listData[4].num = res.data.passRate + '%'
|
|
data.value.listData[5].num = res.data.failRate + '%'
|
|
for (let i in res.data.testResultAvg) {
|
|
data.value.averageBarData.xData.push(i)
|
|
data.value.averageBarData.yData.push(res.data.testResultAvg[i].toFixed(0))
|
|
}
|
|
data.value.classBarData.xData = res.data.testResultPassRate.axisX
|
|
res.data.testResultPassRate.axisY.map((i) => {
|
|
data.value.classBarData.yData.push((i.maleValue * 100).toFixed(0))
|
|
data.value.classBarData.yData1.push((i.femaleValue * 100).toFixed(0))
|
|
data.value.classBarData.yData2.push((i.overallValue * 100).toFixed(0))
|
|
|
|
})
|
|
data.value.tableNeed.tableData = res.data.gradeDetailsList
|
|
data.value.tableNeed.tableData.map((i, ind) => {
|
|
i.ind = ind + 1
|
|
i.passRate = (i.passRate * 100).toFixed(0) + '%'
|
|
})
|
|
data.value.tableNeed.refresh = true
|
|
averageBar(data.value.averageBarData)
|
|
classBar(data.value.classBarData)
|
|
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
// 查看详情
|
|
function toView(val) {
|
|
console.log(val, 'valllllltoView==============>')
|
|
const gradeName = val.gradeAndClassName.split("-")[0];
|
|
console.log(gradeName,'gradeName')
|
|
console.log(data.value.classes,'data.value.classes')
|
|
const grade = data.value.classes.find(item => item.label.startsWith(gradeName));
|
|
console.log(grade,'gradeeeeee')
|
|
let params = {
|
|
id: val.classId,
|
|
gradeId: grade.value
|
|
}
|
|
// let params=[val.classId,data.value.newGradeId!=0?data.value.newGradeId:1]
|
|
eventBus.emit('toDetail', params)
|
|
}
|
|
// 年级体测平均成绩
|
|
function averageBar(val) {
|
|
echarts.dispose(document.getElementById('barChart'));
|
|
let myChart = markRaw(echarts.init(document.getElementById('barChart')));
|
|
myChart.setOption(
|
|
{
|
|
color: val.color,
|
|
legend: {
|
|
icon: "rect",
|
|
x: "right",
|
|
padding: [5, 40, 0, 0],
|
|
itemWidth: 12,
|
|
itemHeight: 6,
|
|
itemGap: 41,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: "12px"
|
|
}
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "2%",
|
|
// top:'10%',
|
|
bottom: "5%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: val.xData,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
color: '#868A95',
|
|
fontSize: 12
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DDDEE2'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '分',
|
|
nameTextStyle: {
|
|
color: "#868A95",
|
|
fontSize: 12,
|
|
// padding: val.Ypadding
|
|
},
|
|
// interval: 20,
|
|
axisLabel: {
|
|
color: '#868A95',
|
|
fontStyle: "normal",
|
|
fontWeight: "400",
|
|
fontSize: "12"
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DDDEE2'
|
|
}
|
|
},
|
|
splitLine: {
|
|
//分割线配置
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
areaStyle: {
|
|
// color: val.splitAreaColor,
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '平均成绩',
|
|
data: val.yData,
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
formatter: "{c}",
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
fontWeight: "400",
|
|
fontSize: "14",
|
|
color: "#000"
|
|
}
|
|
},
|
|
}
|
|
}
|
|
},
|
|
]
|
|
}
|
|
)
|
|
window.onresize = function () { // 自适应大小
|
|
myChart.resize();
|
|
};
|
|
}
|
|
// 各体测项目等级占比
|
|
function levelChart(val) {
|
|
echarts.dispose(document.getElementById('levelbarChart'));
|
|
let myChart = markRaw(echarts.init(document.getElementById('levelbarChart')));
|
|
// 绘制图表
|
|
myChart.setOption({
|
|
color: val.color,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
center: ['50%', '45%'],
|
|
startAngle: 0,
|
|
hoverAnimation: true,
|
|
avoidLabelOverlap: true,
|
|
animationDurationUpdate: 2000, // 更新动画时长为 1s
|
|
animationEasingUpdate: 'cubicInOut', // 更新动画缓动效果为 'quinticInOut'
|
|
silent: true,
|
|
label: {
|
|
color: '#000',
|
|
show: true,
|
|
position: 'outside',
|
|
formatter: function (value) {
|
|
console.log(value)
|
|
let str = '{a|' + value.name + ':}' + '{a|' + value.value + '%}' + '\n\n'
|
|
return str
|
|
},
|
|
rich: {
|
|
a: {
|
|
padding: [10, 0, 0, 0],
|
|
},
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
fontWeight: 'bold'
|
|
}
|
|
}
|
|
},
|
|
data: val.seriesData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
window.onresize = function () { // 自适应大小
|
|
myChart.resize();
|
|
};
|
|
}
|
|
// 班级体测达标率对比
|
|
function classBar(val) {
|
|
echarts.dispose(document.getElementById('classBarChart'));
|
|
let myChart = markRaw(echarts.init(document.getElementById('classBarChart')));
|
|
myChart.setOption(
|
|
{
|
|
color: val.color,
|
|
tooltip: {},
|
|
legend: {
|
|
icon: "rect",
|
|
x: "right",
|
|
padding: [5, 40, 0, 0],
|
|
itemWidth: 12,
|
|
itemHeight: 6,
|
|
itemGap: 41,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: "12px"
|
|
}
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "2%",
|
|
// top:'10%',
|
|
bottom: "5%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: val.xData,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
color: '#868A95',
|
|
fontSize: 12
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DDDEE2'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '%',
|
|
nameTextStyle: {
|
|
color: "#868A95",
|
|
fontSize: 12,
|
|
// padding: val.Ypadding
|
|
},
|
|
// interval: 20,
|
|
axisLabel: {
|
|
color: '#868A95',
|
|
fontStyle: "normal",
|
|
fontWeight: "400",
|
|
fontSize: "12"
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DDDEE2'
|
|
}
|
|
},
|
|
splitLine: {
|
|
//分割线配置
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
areaStyle: {
|
|
// color: val.splitAreaColor,
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '男生',
|
|
data: val.yData,
|
|
type: 'bar',
|
|
barWidth: null, // 宽度自适应
|
|
barMaxWidth: 20, // 限制最大宽度为 20
|
|
// itemStyle: {
|
|
// normal: {
|
|
// label: {
|
|
// formatter: "{c}%",
|
|
// show: true,
|
|
// position: "top",
|
|
// textStyle: {
|
|
// fontWeight: "400",
|
|
// fontSize: "10",
|
|
// color: "#666566"
|
|
// }
|
|
// },
|
|
// // color: function (params) {
|
|
// // let colorList = val.color;
|
|
// // return colorList[params.dataIndex];
|
|
// // }
|
|
// }
|
|
// }
|
|
},
|
|
{
|
|
data: val.yData1,
|
|
name: '女生',
|
|
type: 'bar',
|
|
barWidth: null, // 宽度自适应
|
|
barMaxWidth: 20, // 限制最大宽度为 20
|
|
// itemStyle: {
|
|
// normal: {
|
|
// label: {
|
|
// formatter: "{c}%",
|
|
// show: true,
|
|
// position: "top",
|
|
// textStyle: {
|
|
// fontWeight: "400",
|
|
// fontSize: "10",
|
|
// color: "#666566"
|
|
// }
|
|
// },
|
|
// // color: function (params) {
|
|
// // let colorList = val.color;
|
|
// // return colorList[params.dataIndex];
|
|
// // }
|
|
// }
|
|
// }
|
|
},
|
|
{
|
|
data: val.yData2,
|
|
name: '总体',
|
|
type: 'bar',
|
|
barWidth: null, // 宽度自适应
|
|
barMaxWidth: 20, // 限制最大宽度为 20
|
|
// itemStyle: {
|
|
// normal: {
|
|
// label: {
|
|
// formatter: "{c}%",
|
|
// show: true,
|
|
// position: "insideTopLeft",
|
|
// textStyle: {
|
|
// fontWeight: "400",
|
|
// fontSize: "10",
|
|
// color: "#666566"
|
|
// }
|
|
// },
|
|
// // color: function (params) {
|
|
// // let colorList = val.color;
|
|
// // return colorList[params.dataIndex];
|
|
// // }
|
|
// }
|
|
// }
|
|
}
|
|
]
|
|
}
|
|
)
|
|
window.onresize = function () { // 自适应大小
|
|
myChart.resize();
|
|
};
|
|
}
|
|
// 成绩趋势
|
|
function trendEcharts(val) {
|
|
echarts.dispose(document.getElementById('trendChart'));
|
|
let myChart = markRaw(echarts.init(document.getElementById('trendChart')));
|
|
myChart.setOption(
|
|
{
|
|
grid: {
|
|
left: "2%",
|
|
right: "2%",
|
|
bottom: "10%",
|
|
containLabel: true
|
|
},
|
|
color: [val.ChartCont.color],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function (params) {
|
|
|
|
// 自定义tooltip内容
|
|
return `${params[0].name}<br/>平均成绩：${params[0].data}`;
|
|
}
|
|
},
|
|
legend: {
|
|
show: val.showLegend ? false : true,
|
|
icon: "rect",
|
|
x: "right",
|
|
padding: [val.padTop ? val.padTop : 35, val.padRight ? val.padRight : 20, 0, 0],
|
|
itemWidth: val.ChartCont.legendWidth ? val.ChartCont.legendWidth : 19,
|
|
itemHeight: val.ChartCont.legendHeight ? val.ChartCont.legendHeight : 9,
|
|
itemGap: 41,
|
|
textStyle: {
|
|
color: val.ChartCont.legendColor ? val.ChartCont.legendColor : '#F2F2F2',
|
|
fontSize: "12px"
|
|
}
|
|
},
|
|
toolbox: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
type: val.ChartCont.xType ? val.ChartCont.xType : "category",
|
|
// position: "bottom",
|
|
boundaryGap: false,
|
|
min: val.ChartCont.min ? val.ChartCont.min : null,
|
|
max: val.ChartCont.max ? val.ChartCont.max : null,
|
|
splitNumber: val.ChartCont.splitNumber ? val.ChartCont.splitNumber : null,
|
|
data: val.ChartCont.xData,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
// textStyle: {
|
|
color: val.ChartCont.axisLabelColor ? val.ChartCont.axisLabelColor : '#fff',
|
|
fontSize: 12
|
|
// }
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: val.ChartCont.lineStyleColor ? val.ChartCont.lineStyleColor : "#1C3B36"
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: val.ChartCont.yName,
|
|
nameTextStyle: {
|
|
color: val.ChartCont.axisLabelColor ? val.ChartCont.axisLabelColor : '#fff',
|
|
fontSize: 12,
|
|
padding: [0, val.chartsPadding ? val.chartsPadding : 20, 0, 0]
|
|
},
|
|
axisLabel: {
|
|
color: val.ChartCont.axisLabelColor ? val.ChartCont.axisLabelColor : '#fff',
|
|
fontStyle: "normal",
|
|
fontWeight: "400",
|
|
fontSize: "12",
|
|
align: val.ChartCont.yAxisAlign ? val.ChartCont.yAxisAlign : null,
|
|
margin: val.ChartCont.yAxisMargin ? val.ChartCont.yAxisMargin : 10, // 可以调整偏移量
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: val.ChartCont.lineStyleColor ? val.ChartCont.lineStyleColor : "#1C3B36"
|
|
}
|
|
},
|
|
splitLine: {
|
|
//分割线配置
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#012624"
|
|
}
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
areaStyle: {
|
|
color: val.ChartCont.spitAreaColor ? val.ChartCont.spitAreaColor : ["rgba(200,200,200,0.3)", "#8AFFDD"],
|
|
opacity: val.ChartCont.spitAreaColor ? 1 : 0.04
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: val.ChartCont.seriesName1,
|
|
// stack: 'Total',
|
|
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
|
symbolSize: 5,
|
|
type: "line",
|
|
// smooth: true,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontFamily: 'DIN-Black',
|
|
fontWeight: 900,
|
|
color: val.ChartCont.labelColor ? val.ChartCont.labelColor : '#fff',
|
|
position: 'top',
|
|
}
|
|
}
|
|
},
|
|
// symbol: 'circle',
|
|
data: val.ChartCont.seriesData,
|
|
// lineStyle: {
|
|
// width: val.ChartCont.seriesData.length === 1 ? 0 : 2, // 如果只有一条数据，隐藏线条
|
|
// },
|
|
areaStyle: val.ChartCont.areaStyle,
|
|
},
|
|
],
|
|
visualMap: val.ChartCont.visualMap ? val.ChartCont.visualMap : null
|
|
}
|
|
)
|
|
}
|
|
|
|
function transformData(data) {
|
|
return data.map(grade => ({
|
|
value: grade.id,
|
|
label: grade.gradeName,
|
|
children: grade.class.map(cls => ({
|
|
value: cls.id,
|
|
label: cls.className
|
|
}))
|
|
}));
|
|
}
|
|
//年级接口
|
|
async function GetGradeNames() {
|
|
try {
|
|
const res = await _api.GetGradeName();
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
data.value.classes = transformData(res.data)
|
|
}
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//班级接口
|
|
async function GetClassNames(val, num) {
|
|
try {
|
|
const res = await _api.GetClassNames(val);
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
data.value.classes = res.data
|
|
}
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
|
|
//获取所有年级名称
|
|
async function getAllGrade() {
|
|
try {
|
|
const res = await _api.GetGradeName();
|
|
if (res.code == 200) {
|
|
data.value.gradeList = res.data;
|
|
console.log(data.value.gradeList, 'data.value.gradeList')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//获取所有老师名称
|
|
async function GetTeacherNames() {
|
|
try {
|
|
const res = await _api.GetTeacherNames();
|
|
if (res.code == 200) {
|
|
data.value.teacherList = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
|
|
//获取所有学生
|
|
async function initStudent() {
|
|
try {
|
|
const res = await _api.StudentGetClassPageList('', '', '', '', '', 1, 1000000);
|
|
if (res.code == 200) {
|
|
console.log(res, 'initStudent')
|
|
data.value.allStudentList = res.data.datas
|
|
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
function toViewGrade(val) {
|
|
console.log(val, 'valllll')
|
|
// return
|
|
let params = {
|
|
id: val
|
|
}
|
|
data.value.newGradeId = val
|
|
eventBus.emit('toViewGrade', params);
|
|
}
|
|
function toStudentView(val) {
|
|
console.log(val, 'vallllltoStudentView')
|
|
let params = {
|
|
id: val[1],
|
|
gradeId: val[0]
|
|
}
|
|
console.log(params, 'paramstoStudentView')
|
|
eventBus.emit('toDetail', params);
|
|
}
|
|
function toView1(val) {
|
|
console.log(val, 'valllll')
|
|
let params = {
|
|
id: val
|
|
}
|
|
eventBus.emit('toView1', params);
|
|
}
|
|
async function toViewStudent(val) {
|
|
console.log(val, 'valllll')
|
|
await initStudent()
|
|
data.value.filterStudentList = data.value.allStudentList.filter(item => item.classId == val[1])
|
|
console.log(data.value.filterStudentList, 'kkkkkkk')
|
|
|
|
data.value.dialogData.dialogVisible = true
|
|
}
|
|
function toViewStudentDetail(val) {
|
|
console.log(val, 'toViewStudentDetail')
|
|
let k = data.value.gradeList.filter(item => item.gradeName == val.gradeName)
|
|
val.gradeId = k[0].id
|
|
eventBus.emit('toViewStudent', val);
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.dialogManage {
|
|
.cont {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.one {
|
|
width: 150px;
|
|
height: 150px;
|
|
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.63);
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.workOrder {
|
|
width: calc(100% - 40px);
|
|
height: auto;
|
|
margin: 20px;
|
|
|
|
.ipt {
|
|
width: calc(100% - 15px);
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: right;
|
|
background: #FFFFFF;
|
|
border-radius: 4px;
|
|
|
|
.one {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
margin-left: 20px;
|
|
|
|
p {
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 5px;
|
|
|
|
.one {
|
|
width: 330px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 4px;
|
|
// margin-left: 20px;
|
|
margin-right: 20px;
|
|
|
|
p {
|
|
width: 84px;
|
|
height: 40px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
border-right: 0px;
|
|
border-radius: 4px 0px 0px 4px;
|
|
}
|
|
|
|
.m-2 {
|
|
width: 246px;
|
|
|
|
// height: 60px;
|
|
:deep(.el-input__wrapper) {
|
|
height: 40px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
height: 122px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
margin-left: 5px;
|
|
|
|
.listOne {
|
|
width: 263px;
|
|
height: 122px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
|
|
.left {
|
|
width: 68px;
|
|
height: 68px;
|
|
background: rgba(0, 86, 221, 0.25);
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 27px 32px;
|
|
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
p:nth-of-type(1) {
|
|
height: 15px;
|
|
font-family: DINAlternate;
|
|
font-weight: 900;
|
|
font-size: 24px;
|
|
color: #4188FE;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
p:nth-of-type(2) {
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont1 {
|
|
width: 100%;
|
|
height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 5px;
|
|
margin-top: 20px;
|
|
|
|
.cont1Left,
|
|
.cont1Right {
|
|
width: 820px;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
// display: flex;
|
|
margin-right: 20px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 40px;
|
|
// display: flex;
|
|
|
|
|
|
p {
|
|
width: 100%;
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
#barChart {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
#levelbarChart {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
// .contList {
|
|
// width: 546px;
|
|
// height: 100%;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
|
|
// .descript {
|
|
// width: 235px;
|
|
// height: 75px;
|
|
// background: rgba(0, 86, 221, 0.25);
|
|
// border-radius: 8px;
|
|
// margin-top: 20px;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// margin-right: 25px;
|
|
|
|
// p:nth-of-type(1) {
|
|
// height: 0px;
|
|
// font-family: DINAlternate;
|
|
// font-weight: 900;
|
|
// font-size: 24px;
|
|
// color: #4188FE;
|
|
// margin-top: 8px;
|
|
// }
|
|
|
|
// p:nth-of-type(2) {
|
|
// font-family: PingFangSC;
|
|
// font-weight: 400;
|
|
// font-size: 14px;
|
|
// color: #666566;
|
|
// }
|
|
// }
|
|
|
|
// .descript:nth-of-type(3),
|
|
// .descript:nth-of-type(4) {
|
|
// margin-top: -5px;
|
|
// }
|
|
// }
|
|
}
|
|
|
|
.cont1Right {
|
|
.title {
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
|
|
span {
|
|
display: inline-block;
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont2 {
|
|
width: 100%;
|
|
height: 350px;
|
|
display: flex;
|
|
margin-top: 20px;
|
|
margin-left: 5px;
|
|
|
|
.cont2Left {
|
|
width: 820px;
|
|
height: 350px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
margin-right: 20px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: calc(100% - 240px);
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tabList {
|
|
width: 240px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: 83px;
|
|
height: 24px;
|
|
background: #FAFAFA;
|
|
// background: #4188FE;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
text-align: center;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: rgba(120, 118, 118, 0.85);
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
background: #4188FE;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.centerOneCont {
|
|
width: 100%;
|
|
height: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
margin-top: 30px;
|
|
|
|
.left {
|
|
|
|
.average {
|
|
width: 300px;
|
|
height: 300px;
|
|
margin-top: 180px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 410px;
|
|
margin-top: 180px;
|
|
|
|
.one {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-bottom: 20px;
|
|
margin-left: 20px;
|
|
position: relative;
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
|
|
p,
|
|
h5 {
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #2C2C2C;
|
|
}
|
|
|
|
h5 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
p::before {
|
|
content: ' ';
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 21%;
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
|
|
.bodyCont {
|
|
width: calc(100% - 60px);
|
|
height: 25px;
|
|
display: flex;
|
|
margin-top: -10px;
|
|
|
|
p {
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #868A95;
|
|
margin-right: 27px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 410px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.one:nth-of-type(1) {
|
|
.head {
|
|
p::before {
|
|
background-color: #00DAAA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.one:nth-of-type(2) {
|
|
.head {
|
|
p::before {
|
|
background-color: #7BADFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.one:nth-of-type(3) {
|
|
.head {
|
|
p::before {
|
|
background-color: #FFD271;
|
|
}
|
|
}
|
|
}
|
|
|
|
.one:nth-of-type(4) {
|
|
.head {
|
|
p::before {
|
|
background-color: #FE7B9B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.cont2Right {
|
|
width: 820px;
|
|
height: 350px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: calc(100% - 240px);
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tabList {
|
|
width: 240px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: 83px;
|
|
height: 24px;
|
|
background: #FAFAFA;
|
|
// background: #4188FE;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
text-align: center;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: rgba(120, 118, 118, 0.85);
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
background: #4188FE;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.centerThreeChart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont3,
|
|
.cont4 {
|
|
width: 1665px;
|
|
height: 350px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
margin-left: 5px;
|
|
margin-top: 20px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: auto;
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.cont3Chart,
|
|
.cont4Chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
|
|
.cont4 {
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
|
|
.one {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tableCont {
|
|
width: calc(100% - 15px);
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
background-color: #fff;
|
|
|
|
p {
|
|
width: auto;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style> |