|
|
@@ -1,85 +1,118 @@
|
|
|
<template>
|
|
|
<div style="width: 100%">
|
|
|
<el-main>
|
|
|
- <div class="tou">
|
|
|
- <span>平台数据检测</span>
|
|
|
+ <div class="tou">
|
|
|
+ <span>平台数据检测</span>
|
|
|
+ </div>
|
|
|
+ <div id="statistics">
|
|
|
+ <div class="count">
|
|
|
+ <!-- <h4><div></div>目前平台学生(个)</h4> -->
|
|
|
+ <div>
|
|
|
+ <span>{{statics.sCount}}</span>
|
|
|
+ <img src="../../assets/dataimage/greenUp.png" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div id="statistics">
|
|
|
- <div class="count">
|
|
|
- <!-- <h4><div></div>目前平台学生(个)</h4> -->
|
|
|
- <div><span>1024</span><img src="../../assets/dataimage/greenUp.png"></div>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <!-- <h4><div></div>劳动作业数量</h4> -->
|
|
|
- <div><span>1863</span><img src="../../assets/dataimage/redUp.png"></div>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <!-- <h4><div></div>劳动课程数量</h4> -->
|
|
|
- <div><span>228</span><img src="../../assets/dataimage/blueUp.png"></div>
|
|
|
- </div>
|
|
|
+ <div class="count">
|
|
|
+ <!-- <h4><div></div>劳动作业数量</h4> -->
|
|
|
+ <div>
|
|
|
+ <span>{{statics.wCount}}</span>
|
|
|
+ <img src="../../assets/dataimage/redUp.png" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div id="graphicalArea">
|
|
|
- <div class="graphical">
|
|
|
- <span>课程劳动教育</span>
|
|
|
- <div><img src="../../assets/dataimage/1.png"></div>
|
|
|
- </div>
|
|
|
- <div class="graphical">
|
|
|
- <span>五育融合</span>
|
|
|
- <div><img src="../../assets/dataimage/2.png"></div>
|
|
|
- </div>
|
|
|
- <div class="graphical">
|
|
|
- <span>得奖占比</span>
|
|
|
- <div><img src="../../assets/dataimage/3.png"></div>
|
|
|
- </div>
|
|
|
- <div class="graphical">
|
|
|
- <span>家校社</span>
|
|
|
- <div><img src="../../assets/dataimage/4.png"></div>
|
|
|
- </div>
|
|
|
- <div class="graphical">
|
|
|
- <span>义工社团情况</span>
|
|
|
- <div><img src="../../assets/dataimage/5.png"></div>
|
|
|
- </div>
|
|
|
- <div class="graphical">
|
|
|
- <span>劳动素养</span>
|
|
|
- <div><img src="../../assets/dataimage/6.png"></div>
|
|
|
- </div>
|
|
|
+ <div class="count">
|
|
|
+ <!-- <h4><div></div>劳动课程数量</h4> -->
|
|
|
+ <div>
|
|
|
+ <span>{{statics.cCount}}</span>
|
|
|
+ <img src="../../assets/dataimage/blueUp.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="graphicalArea">
|
|
|
+ <div class="graphical">
|
|
|
+ <span>课程劳动教育</span>
|
|
|
+ <div>
|
|
|
+ <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ id="course_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%;margin:0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="graphical">
|
|
|
+ <span>五育融合</span>
|
|
|
+ <div>
|
|
|
+ <!-- <img src="../../assets/dataimage/2.png" style="width:90%" /> -->
|
|
|
+ <div
|
|
|
+ id="five_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%;margin:0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="graphical">
|
|
|
+ <span>得奖占比</span>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ id="title_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%;margin:0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="graphical">
|
|
|
+ <span>家校社</span>
|
|
|
+ <div>
|
|
|
+ <!-- <img src="../../assets/dataimage/4.png" style="width:90%" /> -->
|
|
|
+ <div id="hsc_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- stripe="true"
|
|
|
- :header-cell-style="{ background: '#3867d6',color:'#ffffff',textAlign:'center'}"
|
|
|
- style="width: 91.5%;margin-top:20px;">
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="排名"
|
|
|
- align="center"
|
|
|
- width="250">
|
|
|
- <!-- <img src="../../assets/dataimage/flag.png"> -->
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="姓名"
|
|
|
- align="center"
|
|
|
- width="300">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="class"
|
|
|
- label="班级"
|
|
|
- align="center"
|
|
|
- width="200">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="fraction"
|
|
|
- label="积分"
|
|
|
- align="center"
|
|
|
- width="200">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="school"
|
|
|
- align="center"
|
|
|
- label="学校">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div class="graphical">
|
|
|
+ <span>义工社团情况</span>
|
|
|
+ <div>
|
|
|
+ <!-- <img src="../../assets/dataimage/5.png" style="width:90%" /> -->
|
|
|
+ <div
|
|
|
+ id="home_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%;margin:0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="graphical">
|
|
|
+ <span>劳动素养</span>
|
|
|
+ <div>
|
|
|
+ <!-- <img src="../../assets/dataimage/6(1).png" width="200rem" />
|
|
|
+ <img src="../../assets/dataimage/6.png" />-->
|
|
|
+ <div id="lao_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :stripe="true"
|
|
|
+ :header-cell-style="{ background: '#3867d6',color:'#ffffff',textAlign:'center'}"
|
|
|
+ style="width: 91.5%;margin-top:20px;"
|
|
|
+ height="500px"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="排名" align="center" min-width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display:flex;align-items:center;justify-content: center;">
|
|
|
+ {{scope.$index+1}}
|
|
|
+ <img src="../../assets/dataimage/flag.png" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- <img src="../../assets/dataimage/flag.png"> -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" align="center" min-width="100"></el-table-column>
|
|
|
+ <el-table-column prop="classname" label="班级" align="center" min-width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>{{scope.row.classname ? scope.row.classname : '暂无班级'}}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zscore" label="积分" align="center" min-width="100"></el-table-column>
|
|
|
+ <el-table-column prop="school" align="center" label="学校" min-width="100"></el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-main>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -88,154 +121,694 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: [{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- }, {
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- }, {
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- }, {
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- },{
|
|
|
- name: '王小虎',
|
|
|
- class: '六年级三班',
|
|
|
- fraction:687,
|
|
|
- school:'深圳市龙岗区X城外国语小学'
|
|
|
- }]
|
|
|
+ timer:null,
|
|
|
+ chartObj1: null,
|
|
|
+ chartObj2: null,
|
|
|
+ chartObj3: null,
|
|
|
+ chartObj4: null,
|
|
|
+ chartObj5: null,
|
|
|
+ chartObj6: null,
|
|
|
+ loading: false,
|
|
|
+ tableData: [],
|
|
|
+ oid: "1123",
|
|
|
+ statics: {
|
|
|
+ sCount: 0,
|
|
|
+ wCount: 0,
|
|
|
+ cCount: 0,
|
|
|
+ },
|
|
|
+ courseJson: {
|
|
|
+ data: [],
|
|
|
+ sData: [],
|
|
|
+ },
|
|
|
+ CourseOption: {
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (val) {
|
|
|
+ var strs = val.split(""); //字符串数组
|
|
|
+ var str = "";
|
|
|
+ for (var i = 0, s; (s = strs[i++]); ) {
|
|
|
+ //遍历字符串数组
|
|
|
+ str += s;
|
|
|
+ if (!(i % 2)) str += "\n";
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ confine: true,
|
|
|
+ enterable: true, //鼠标是否可以移动到tooltip区域内
|
|
|
+ backgroundColor: "rgba(255,255,255,0.9)",
|
|
|
+ textStyle: {
|
|
|
+ // 文字样式
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ left: "right",
|
|
|
+ top: "bottom",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [],
|
|
|
+ type: "bar",
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: "rgba(220, 220, 220, 0.8)",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgb(84,111,198)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ titleJson: [],
|
|
|
+ titleOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "horizontal",
|
|
|
+ left: "center",
|
|
|
+ bottom: "5%",
|
|
|
+ icon: "circle",
|
|
|
+ itemGap: 18,
|
|
|
+ // selectedMode: false,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "得奖占比",
|
|
|
+ type: "pie",
|
|
|
+ radius: "70%",
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{d}%",
|
|
|
+ inside: true,
|
|
|
+ position: "inner",
|
|
|
+ },
|
|
|
+ labelLine: { show: false },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ studentJson: [],
|
|
|
+ homeJson: {
|
|
|
+ data: [],
|
|
|
+ sData: [],
|
|
|
+ },
|
|
|
+ homeOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "1%",
|
|
|
+ bottom: "10%",
|
|
|
+ top: "15%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 1],
|
|
|
+ minInterval: 1,
|
|
|
+ position: "top",
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ z: 10,
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "inside",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ startValue: 0,
|
|
|
+ endValue: 5,
|
|
|
+ zoomLock: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: [],
|
|
|
+ showBackground: true,
|
|
|
+ barWidth: "65%",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [0, 5000, 5000, 0],
|
|
|
+ color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgb(71,171,98)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgb(185,244,200)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ color: "#2e2e2e",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ fiveJson: {
|
|
|
+ data: [],
|
|
|
+ cData: [],
|
|
|
+ wData: [],
|
|
|
+ },
|
|
|
+ fiveOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: "#6a7985",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (val) {
|
|
|
+ var strs = val.split(""); //字符串数组
|
|
|
+ var str = "";
|
|
|
+ for (var i = 0, s; (s = strs[i++]); ) {
|
|
|
+ //遍历字符串数组
|
|
|
+ str += s;
|
|
|
+ if (!(i % 2)) str += "\n";
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ boundaryGap: [0, 0.5],
|
|
|
+ minInterval: 1,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "课程数量",
|
|
|
+ type: "line",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "作业数量",
|
|
|
+ type: "line",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ hscJson: {
|
|
|
+ data: ["家", "校", "社"],
|
|
|
+ cData: [0, 0, 0],
|
|
|
+ },
|
|
|
+ hscOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["家", "校", "社"],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "1%",
|
|
|
+ bottom: "10%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ boundaryGap: [0, 0.5],
|
|
|
+ minInterval: 1,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "课程数量",
|
|
|
+ data: [],
|
|
|
+ type: "line",
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgb(56 174 0)",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgb(56 174 0)",
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgb(56 174 0)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "white", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ laoJson: [],
|
|
|
+ laoOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "horizontal",
|
|
|
+ left: "center",
|
|
|
+ bottom: "5%",
|
|
|
+ icon: "circle",
|
|
|
+ itemGap: 18,
|
|
|
+ // selectedMode: false,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "课程占比",
|
|
|
+ type: "pie",
|
|
|
+ radius: "70%",
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{d}%",
|
|
|
+ inside: true,
|
|
|
+ position: "inner",
|
|
|
+ },
|
|
|
+ labelLine: { show: false },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ a(a) {
|
|
|
+ console.log(a);
|
|
|
+ },
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.courseJson = {
|
|
|
+ data: [],
|
|
|
+ sData: [],
|
|
|
+ };
|
|
|
+ this.titleJson = [];
|
|
|
+ this.studentJson = [];
|
|
|
+ this.homeJson = {
|
|
|
+ data: [],
|
|
|
+ sData: [],
|
|
|
+ };
|
|
|
+ this.fiveJson = {
|
|
|
+ data: [],
|
|
|
+ cData: [],
|
|
|
+ wData: [],
|
|
|
+ };
|
|
|
+ this.hscJson = {
|
|
|
+ data: ["家", "校", "社"],
|
|
|
+ cData: [0, 0, 0],
|
|
|
+ };
|
|
|
+ this.laoJson = [];
|
|
|
+ },
|
|
|
+ getDataStatic2() {
|
|
|
+ let params = { oid: this.oid };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getDataAdmin", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.statics.sCount = res.data[0][0].sCount; //学校人数
|
|
|
+ this.statics.wCount = res.data[1][0].wCount; //作业总数
|
|
|
+ this.statics.cCount = res.data[2][0].cCount; //课程总数
|
|
|
+ res.data[3].filter((item, index) => {
|
|
|
+ //劳动课程数量
|
|
|
+ this.courseJson.data.push(item.name);
|
|
|
+ this.courseJson.sData.push(item.number);
|
|
|
+ });
|
|
|
+ res.data[4].filter((item, index) => {
|
|
|
+ //劳动课程数量
|
|
|
+ this.titleJson.push({
|
|
|
+ value: item.tCount,
|
|
|
+ name:
|
|
|
+ item.title == "1"
|
|
|
+ ? "星级义工"
|
|
|
+ : item.title == "3"
|
|
|
+ ? "劳动教育小讲师"
|
|
|
+ : "少年科学院小院士",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.tableData = res.data[5]; //学生积分排行榜
|
|
|
+ res.data[6].filter((item, index) => {
|
|
|
+ //义工社团情况
|
|
|
+ this.homeJson.data.push(item.workName);
|
|
|
+ this.homeJson.sData.push(item.hCount);
|
|
|
+ });
|
|
|
+
|
|
|
+ res.data[7].filter((item, index) => {
|
|
|
+ //五育融合
|
|
|
+ this.fiveJson.data.push(item.name);
|
|
|
+ this.fiveJson.cData.push(item.cCount);
|
|
|
+ this.fiveJson.wData.push(item.wCount);
|
|
|
+
|
|
|
+ //劳动素养
|
|
|
+ this.laoJson.push({
|
|
|
+ value: item.cCount,
|
|
|
+ name: item.name,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ res.data[8].filter((item, index) => {
|
|
|
+ //家校社
|
|
|
+ if (item.type == "0") {
|
|
|
+ this.hscJson.cData[0] = item.tCount;
|
|
|
+ } else if (item.type == "1") {
|
|
|
+ this.hscJson.cData[1] = item.tCount;
|
|
|
+ } else if (item.type == "2") {
|
|
|
+ this.hscJson.cData[2] = item.tCount;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.setChart2();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDataStatic() {
|
|
|
+ this.loading = false;
|
|
|
+ let params = { oid: this.oid };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getDataAdmin", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ this.statics.sCount = res.data[0][0].sCount; //学校人数
|
|
|
+ this.statics.wCount = res.data[1][0].wCount; //作业总数
|
|
|
+ this.statics.cCount = res.data[2][0].cCount; //课程总数
|
|
|
+ res.data[3].filter((item, index) => {
|
|
|
+ //劳动课程数量
|
|
|
+ this.courseJson.data.push(item.name);
|
|
|
+ this.courseJson.sData.push(item.number);
|
|
|
+ });
|
|
|
+ res.data[4].filter((item, index) => {
|
|
|
+ //劳动课程数量
|
|
|
+ this.titleJson.push({
|
|
|
+ value: item.tCount,
|
|
|
+ name:
|
|
|
+ item.title == "1"
|
|
|
+ ? "星级义工"
|
|
|
+ : item.title == "3"
|
|
|
+ ? "劳动教育小讲师"
|
|
|
+ : "少年科学院小院士",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.tableData = res.data[5]; //学生积分排行榜
|
|
|
+ res.data[6].filter((item, index) => {
|
|
|
+ //义工社团情况
|
|
|
+ this.homeJson.data.push(item.workName);
|
|
|
+ this.homeJson.sData.push(item.hCount);
|
|
|
+ });
|
|
|
+
|
|
|
+ res.data[7].filter((item, index) => {
|
|
|
+ //五育融合
|
|
|
+ this.fiveJson.data.push(item.name);
|
|
|
+ this.fiveJson.cData.push(item.cCount);
|
|
|
+ this.fiveJson.wData.push(item.wCount);
|
|
|
+
|
|
|
+ //劳动素养
|
|
|
+ this.laoJson.push({
|
|
|
+ value: item.cCount,
|
|
|
+ name: item.name,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ res.data[8].filter((item, index) => {
|
|
|
+ //家校社
|
|
|
+ if (item.type == "0") {
|
|
|
+ this.hscJson.cData[0] = item.tCount;
|
|
|
+ } else if (item.type == "1") {
|
|
|
+ this.hscJson.cData[1] = item.tCount;
|
|
|
+ } else if (item.type == "2") {
|
|
|
+ this.hscJson.cData[2] = item.tCount;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.setChart();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setChart() {
|
|
|
+ // 雷达图显示的标签
|
|
|
+ let newPromise = new Promise((resolve) => {
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ //然后异步执行echarts的初始化函数
|
|
|
+ newPromise.then(() => {
|
|
|
+ const chartObj1 = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#course_canvas")
|
|
|
+ );
|
|
|
+ this.CourseOption.xAxis.data = this.courseJson.data;
|
|
|
+ this.CourseOption.series[0].data = this.courseJson.sData;
|
|
|
+
|
|
|
+ const chartObj2 = this.$echarts.init(
|
|
|
+ //得奖占比
|
|
|
+ this.$el.querySelector("#title_canvas")
|
|
|
+ );
|
|
|
+ this.titleOption.series[0].data = this.titleJson;
|
|
|
|
|
|
+ const chartObj3 = this.$echarts.init(
|
|
|
+ //义工社团情况
|
|
|
+ this.$el.querySelector("#home_canvas")
|
|
|
+ );
|
|
|
+ this.homeOption.yAxis.data = this.homeJson.data;
|
|
|
+ this.homeOption.series[0].data = this.homeJson.sData;
|
|
|
+
|
|
|
+ const chartObj4 = this.$echarts.init(
|
|
|
+ //五育融合
|
|
|
+ this.$el.querySelector("#five_canvas")
|
|
|
+ );
|
|
|
+ this.fiveOption.xAxis.data = this.fiveJson.data;
|
|
|
+ this.fiveOption.series[0].data = this.fiveJson.cData;
|
|
|
+ this.fiveOption.series[1].data = this.fiveJson.wData;
|
|
|
+
|
|
|
+ const chartObj5 = this.$echarts.init(
|
|
|
+ //家校社
|
|
|
+ this.$el.querySelector("#hsc_canvas")
|
|
|
+ );
|
|
|
+ this.hscOption.series[0].data = this.hscJson.cData;
|
|
|
+
|
|
|
+ const chartObj6 = this.$echarts.init(
|
|
|
+ //得奖占比
|
|
|
+ this.$el.querySelector("#lao_canvas")
|
|
|
+ );
|
|
|
+ this.laoOption.series[0].data = this.laoJson;
|
|
|
+
|
|
|
+ // 初始化雷达图
|
|
|
+ this.chartObj1 = chartObj1;
|
|
|
+ this.chartObj1.setOption(this.CourseOption);
|
|
|
+ this.chartObj2 = chartObj2;
|
|
|
+ this.chartObj2.setOption(this.titleOption);
|
|
|
+ this.chartObj3 = chartObj3;
|
|
|
+ this.chartObj3.setOption(this.homeOption);
|
|
|
+ this.chartObj4 = chartObj4;
|
|
|
+ this.chartObj4.setOption(this.fiveOption);
|
|
|
+ this.chartObj5 = chartObj5;
|
|
|
+ this.chartObj5.setOption(this.hscOption);
|
|
|
+ this.chartObj6 = chartObj6;
|
|
|
+ this.chartObj6.setOption(this.laoOption);
|
|
|
+ console.log(this.chartObj1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setChart2() {
|
|
|
+ this.CourseOption.xAxis.data = this.courseJson.data;
|
|
|
+ this.CourseOption.series[0].data = this.courseJson.sData;
|
|
|
+ this.titleOption.series[0].data = this.titleJson;
|
|
|
+ this.homeOption.yAxis.data = this.homeJson.data;
|
|
|
+ this.homeOption.series[0].data = this.homeJson.sData;
|
|
|
+ this.fiveOption.xAxis.data = this.fiveJson.data;
|
|
|
+ this.fiveOption.series[0].data = this.fiveJson.cData;
|
|
|
+ this.fiveOption.series[1].data = this.fiveJson.wData;
|
|
|
+ this.hscOption.series[0].data = this.hscJson.cData;
|
|
|
+ this.laoOption.series[0].data = this.laoJson;
|
|
|
+
|
|
|
+ this.chartObj1.setOption(this.CourseOption);
|
|
|
+ this.chartObj2.setOption(this.titleOption);
|
|
|
+ this.chartObj3.setOption(this.homeOption);
|
|
|
+ this.chartObj4.setOption(this.fiveOption);
|
|
|
+ this.chartObj5.setOption(this.hscOption);
|
|
|
+ this.chartObj6.setOption(this.laoOption);
|
|
|
+ // console.log(this.chartObj1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.timer = null
|
|
|
+ clearInterval(this.timer)
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDataStatic();
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.init();
|
|
|
+ this.getDataStatic2();
|
|
|
+ }, 5000);
|
|
|
+ var _this = this;
|
|
|
+ window.onresize = function () {
|
|
|
+ // this.$echarts.resize();
|
|
|
+ _this.chartObj1.resize();
|
|
|
+ _this.chartObj2.resize();
|
|
|
+ _this.chartObj3.resize();
|
|
|
+ _this.chartObj4.resize();
|
|
|
+ _this.chartObj5.resize();
|
|
|
+ _this.chartObj6.resize();
|
|
|
+ };
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-#statistics{
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- display: flex;
|
|
|
- justify-content:flex-start;
|
|
|
- margin-top:20px ;
|
|
|
-}
|
|
|
-.count{
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- width: 400px;
|
|
|
- border-radius: 15px;
|
|
|
-}
|
|
|
-.count:nth-child(1){
|
|
|
- background-image: url('../../assets/dataimage/studentMessage.png');
|
|
|
-}
|
|
|
-.count:nth-child(2){
|
|
|
- background-image: url('../../assets/dataimage/labourMessage.png');
|
|
|
-}
|
|
|
-.count:nth-child(3){
|
|
|
- background-image: url('../../assets/dataimage/curriculumMessage.png');
|
|
|
-}
|
|
|
-.count:nth-child(n+2){
|
|
|
- margin-left: 25px;
|
|
|
-}
|
|
|
-.count>h4>div{
|
|
|
- float: left;
|
|
|
- width: 4px;
|
|
|
- height: 20px;
|
|
|
- margin-right:8px ;
|
|
|
- background: white;
|
|
|
-}
|
|
|
-.count>h4{
|
|
|
- top: 20px;
|
|
|
- left: 40px;
|
|
|
- position: absolute;
|
|
|
- color: white;
|
|
|
- font-weight:300 ;
|
|
|
- font-size:.89em ;
|
|
|
-}
|
|
|
-.count>div{
|
|
|
- position: absolute;
|
|
|
- top: 45px;
|
|
|
- left: 40px;
|
|
|
-}
|
|
|
-.count>div>span{
|
|
|
- color: white;
|
|
|
- font-size:4em ;
|
|
|
- margin-right: 5px;
|
|
|
-}
|
|
|
-.count>div>img{
|
|
|
- position: relative;
|
|
|
- bottom: -5px;
|
|
|
-}
|
|
|
-#graphicalArea{
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.graphical{
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 45%;
|
|
|
- height: 450px;
|
|
|
- margin-top:20px ;
|
|
|
- /* border-radius: 10px; */
|
|
|
- background: #f1f2f6;
|
|
|
-}
|
|
|
-.graphical:nth-child(2n){
|
|
|
- margin-left:20px ;
|
|
|
-}
|
|
|
-.graphical>span{
|
|
|
- position:absolute;
|
|
|
- font-size:1.1em ;
|
|
|
- font-weight:500 ;
|
|
|
- top: 15px;
|
|
|
- left: 10px;
|
|
|
- color: #636e72;
|
|
|
-}
|
|
|
-.graphical>div{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-main{
|
|
|
- overflow-y:hidden ;
|
|
|
+#statistics {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.count {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 400px;
|
|
|
+ border-radius: 15px;
|
|
|
+}
|
|
|
+.count:nth-child(1) {
|
|
|
+ background-image: url("../../assets/dataimage/studentMessage.png");
|
|
|
+}
|
|
|
+.count:nth-child(2) {
|
|
|
+ background-image: url("../../assets/dataimage/labourMessage.png");
|
|
|
+}
|
|
|
+.count:nth-child(3) {
|
|
|
+ background-image: url("../../assets/dataimage/curriculumMessage.png");
|
|
|
+}
|
|
|
+.count:nth-child(n + 2) {
|
|
|
+ margin-left: 25px;
|
|
|
+}
|
|
|
+.count > h4 > div {
|
|
|
+ float: left;
|
|
|
+ width: 4px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+.count > h4 {
|
|
|
+ top: 20px;
|
|
|
+ left: 40px;
|
|
|
+ position: absolute;
|
|
|
+ color: white;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 0.89em;
|
|
|
+}
|
|
|
+.count > div {
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ left: 25px;
|
|
|
+}
|
|
|
+.count > div > span {
|
|
|
+ color: white;
|
|
|
+ font-size: 4em;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.count > div > img {
|
|
|
+ position: relative;
|
|
|
+ bottom: -5px;
|
|
|
+}
|
|
|
+#graphicalArea {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.graphical {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 45%;
|
|
|
+ height: 450px;
|
|
|
+ margin-top: 20px;
|
|
|
+ /* border-radius: 10px; */
|
|
|
+ background: #f1f2f6;
|
|
|
+}
|
|
|
+.graphical:nth-child(2n) {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.graphical > span {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 1.1em;
|
|
|
+ font-weight: 500;
|
|
|
+ top: 15px;
|
|
|
+ left: 10px;
|
|
|
+ color: #636e72;
|
|
|
+}
|
|
|
+.graphical > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+main {
|
|
|
+ overflow-y: hidden;
|
|
|
}
|
|
|
</style>
|
