综合数据中心*2

src/components/pages/sz/dataBoardArea/dataCenter/chartList/courseNum/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    weekCourse2: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        chart: {
+          type: 'column',
+          backgroundColor: 'rgba(0,0,0,0)'
+        },
+        title: {
+          text: null
+        },
+        credits: {
+          enabled: false//不显示LOGO
+        },
+        xAxis: {
+          categories: [
+          ]
+        },
+        yAxis: [{
+          allowDecimals: false,
+          min: 0,
+          title: {
+            text: '课程总数'
+          }
+        },
+          // {
+          //   title: {
+          //     text: '项目总数'
+          //   },
+          //   opposite: true
+          // }
+        ],
+        legend: {
+          shadow: false
+        },
+        tooltip: {
+          shared: true
+        },
+        plotOptions: {
+          column: {
+            grouping: false,
+            shadow: false,
+            borderWidth: 0,
+            dataLabels: {
+              enabled: true,  //显示数量提示
+              color: '#000000',
+              formatter : function() {
+                var employee = this.point.series.chart.series[0].yData[this.point.index];
+                var optimizedEmployee = this.point.series.chart.series[1].yData[this.point.index];
+                var employeePercentage = 0;
+                if(optimizedEmployee > employee){
+                  employeePercentage = ((optimizedEmployee - employee) / optimizedEmployee) * 100
+                }
+                if (this.series.name === '本月课程总数') {
+                  return  employeePercentage.toFixed(1) + '%';
+                } else {
+                  return '';
+                }
+              }
+            }
+          }
+        },
+        series: [{
+          name: '上月课程总数',
+          color: '#96D8A8',
+          data: [],
+          pointPadding: 0.3, // 通过 pointPadding 和 pointPlacement 控制柱子位置
+          // pointPlacement: -0.2
+        }, {
+          name: '本月课程总数',
+          color: '#5E9AFC',
+          data: [],
+          pointPadding: 0.4,
+          // pointPlacement: -0.2
+        },
+          //  {
+          //   name: '上周项目总数',
+          //   color: 'rgba(248,161,63,1)',
+          //   data: [153, 178, 195],
+          //   pointPadding: 0.3,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1  // 指定数据列所在的 yAxis
+          // }, {
+          //   name: '本周项目总数',
+          //   color: 'rgba(186,60,61,.9)',
+          //   data: [203, 198, 208],
+          //   pointPadding: 0.4,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1
+          // }
+        ]
+      }
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = Highcharts.chart('cateRank', this.option);
+        // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.option.xAxis.categories = []
+      this.option.series[0].data = []
+      this.option.series[1].data = []
+      for (var i = 0; i < array.length; i++) {
+        this.option.xAxis.categories.push(array[i].name)
+        this.option.series[0].data.push(array[i].lastCourse)
+        this.option.series[1].data.push(array[i].toCourse)
+      }
+    }
+  },
+  watch: {
+    weekCourse2: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.weekCourse2)
+    // this.setChart();
+
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardArea/dataCenter/chartList/courseRank/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px;overflow: auto;">
+      <el-table :data="tableData" style="width: 100%" height="100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
+        :row-class-name="tableRowClassName" class="tableClass">
+        <el-table-column label="排名" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="courseName" label="课程名称" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="compare" label="较上周" min-width="80" align="center">
+					<template slot-scope="scope">
+						<div>
+							<!-- {{ Math.abs(scope.row.compare) }} -->
+							<div v-if="scope.row.compare>0" class="el-icon-top compareDown">{{ Math.abs(scope.row.compare) }}</div>
+							<div v-if="scope.row.compare==0">{{ Math.abs(scope.row.compare) }}</div>
+							<div v-if="scope.row.compare<0" class="el-icon-bottom compareUp">{{ Math.abs(scope.row.compare) }}</div>
+						</div>
+					</template>
+        </el-table-column>
+        <el-table-column prop="total" label="上课人次" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rankData: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = JSON.parse(JSON.stringify(array))
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.total - a.total;
+      })
+    }
+  },
+  watch: {
+    rankData: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.rankData)
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: #f2f7ff !important;
+}
+
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+
+.data_body div::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #fff;
+}
+
+/*定义滑块 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px #AECCFE;
+    background-color: #AECCFE;
+}
+
+.compareUp{
+	color: #17C469;
+	letter-spacing: 5px;
+}
+
+.compareDown{
+	color: #EE3E3E;
+	background-color: #FFDDDD;
+	padding: 5px 10px;
+	letter-spacing: 5px;
+	border-radius: 3px;
+}
+
+</style>

src/components/pages/sz/dataBoardArea/dataCenter/chartList/loginTime/index.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        yearArray: {
+            type: String,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                series: [
+                    {
+                        type: 'gauge',
+                        startAngle: 180,
+                        endAngle: 0,
+                        center: ['50%', '75%'],
+                        radius: '150%',
+                        min: 0,
+                        max: 4000,
+                        splitNumber: 8,
+                        axisLine: {
+                            lineStyle: {
+                                width: 10,
+                                color: [
+                                    [0.25, 'rgb(251, 223, 148)'],
+                                    [0.5, 'rgb(145, 208, 237)'],
+                                    [0.75, 'rgb(68, 96, 193)'],
+                                    [1, 'rgb(240, 141, 158)']
+                                ]
+                            }
+                        },
+                        pointer: {
+                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+                            length: '12%',
+                            width: 12,
+                            offsetCenter: [0, '-60%'],
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisTick: {
+                            length: 6,
+                            lineStyle: {
+                                color: 'auto',
+                                width: 2
+                            }
+                        },
+                        splitLine: {
+                            length: 20,
+                            lineStyle: {
+                                color: 'auto',
+                                width: 5
+                            }
+                        },
+                        axisLabel: {
+                            show:false
+                        },
+                        title:{
+                            show:false
+                        },
+                        title: {
+                            offsetCenter: [0, '10%'],
+                            fontSize: 20
+                        },
+                        detail: {
+                            fontSize: 30,
+                            offsetCenter: [0, '-15%'],
+                            color: 'inherit'
+                        },
+                        data: [
+                            {
+                                value: 0,
+                                name: '深度使用'
+                            }
+                        ]
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+
+                // this.option.xAxis.data = option.xdata;
+                this.option.series[0].data[0].value = this.yearArray;
+                // this.option.visualMap.max = option.max ? option.max : 0;
+
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+        yearArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.ooption = {
+                    xdata: [],
+                    sdata: [],
+                    max: 0
+                }
+                let _array = newValue
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    this.option.series[0].data[0].value = this.yearArray;
+                    // this.option.xAxis.data = this.ooption.xdata;
+                    // this.option.series[0].data[0] = this.ooption.sdata;
+                    // this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
+                    this.chartObj.setOption(this.option);
+                }
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        
+
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    /* background: #fff; */
+}
+</style>
+  

src/components/pages/sz/dataBoardArea/dataCenter/chartList/schoolRank/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px;overflow: auto;">
+      <el-table :data="tableData" style="width: 100%" height="100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
+        :row-class-name="tableRowClassName" class="tableClass">
+        <el-table-column label="排名" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="schoolName" label="学校名称" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="area" label="区域" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="teacherLogin" label="教师登录" min-width="90" align="center">
+        </el-table-column>
+				<el-table-column prop="studentLogin" label="学生登录" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="teaching" label="授课次数" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="submitJob" label="提交作业" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="score" label="综合得分" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rankData: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = JSON.parse(JSON.stringify(array))
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.score - a.score;
+      })
+    }
+  },
+  watch: {
+    rankData: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.rankData)
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: #f2f7ff !important;
+}
+
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+
+.data_body div::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #fff;
+}
+
+/*定义滑块 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px #AECCFE;
+    background-color: #AECCFE;
+}
+</style>

src/components/pages/sz/dataBoardArea/dataCenter/chartList/teaFre/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    monthArray: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        login: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+          minInterval: 1
+        },
+        grid: {
+          top: "30",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            // data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: [],
+            type: "line",
+            areaStyle: {},
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.login;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        login: [],
+      }
+      let _array = array
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.login.push(_array[i].login)
+      }
+
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.login;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.monthArray)
+
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardArea/dataCenter/chartList/toolUser/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="data_body">
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["Josn"],
+  data() {
+    return {
+      mindV: true,
+      chartObj: null,
+      timer: null,
+      range: "",
+      ooption: [],
+      option: {
+        // title: {
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
+        // },
+        tooltip: {
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'次';
+          }
+        },
+        visualMap: {
+          top: 'center',
+          left: 10,
+          right: 0,
+          min: 0,
+          max: 0,
+          type: 'continuous',
+          inRange: {
+            color: ['#65b9fc', '#477cd7']
+          },
+          precision: 0,
+          calculable: true,
+        },
+        calendar: {
+          top: 'center',
+          left: 80,
+          right: 20,
+          cellSize: ["auto", 15],
+          range: "",
+          itemStyle: {
+            borderWidth: 0.5,
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: true,
+          },
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
+      },
+    };
+  },
+  methods: {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.series.data = option;
+        this.option.calendar.range = year;
+        // this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        let array = []
+        for(var i = 0; i < Object.keys(this.Josn).length; i++){
+          array.push(this.Josn[Object.keys(this.Josn)[i]])
+        }
+        this.option.visualMap.max = array.sort(function (a, b) {
+          return b - a;
+        })[0];
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
+      }
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
+      if (!this.chartObj) {
+        this.setChart(this.ooption, t);
+      } else {
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        let array = []
+        for(var i = 0; i < Object.keys(this.Josn).length; i++){
+          array.push(this.Josn[Object.keys(this.Josn)[i]])
+        }
+        this.option.visualMap.max = array.sort(function (a, b) {
+          return b - a;
+        })[0];
+        this.chartObj.setOption(this.option, t);
+      }
+    },
+  },
+  watch: {
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
+      deep: true,
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  mounted() {
+    this.setData();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  /* background: #fff; */
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardArea/dataCenter/index.vue

@@ -0,0 +1,1319 @@
+<template>
+  <div class="body1">
+    <!-- <loading :isLoading="isLoading"></loading> -->
+    <!-- 教师数据 -->
+    <div class="left">
+      <div class="top">
+				<div class="titleBox">
+          <div class="title">在线时长</div>
+        </div>
+				<div class="info_box">
+          <div class="info">
+						<span>{{ OnlineDuration[0] }}</span>
+            <span>累计时长</span>
+          </div>
+          <div class="info">
+						<span>{{ OnlineDuration[1] }}</span>
+            <span>人均使用时长</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<loginTime style="height: calc(100% - 100px);width: calc(100% - 100px);" :yearArray="yearArray"></loginTime>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">登录频次</div>
+        </div>
+				<div class="info_box">
+          <div class="info2">
+						<span>{{ LoginFrequency[0] }}</span>
+            <span>登录频次</span>
+          </div>
+          <div class="info2">
+						<span>{{ LoginFrequency[1] }}</span>
+            <span>教师登录频次</span>
+          </div>
+					<div class="info2">
+						<span>{{ LoginFrequency[2] }}</span>
+            <span>学生登录频次</span>
+          </div>
+					<div class="info2">
+						<span>{{ LoginFrequency[3] }}</span>
+            <span>人均登录频次</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<toolUser style="height: calc(100% - 50px);width: calc(100% - 50px)" :Josn="loginCountYearArray"/>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+				<div class="titleBox">
+          <div class="title">上课次数</div>
+        </div>
+				<div class="dataBox">
+         <courseNum style="height: calc(100% - 50px);width: calc(100% - 50px)" :weekCourse2="weekCourse2"/>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">学校排行榜</div>
+        </div>
+				<div class="dataBox">
+         <schoolRank :rankData="schoolRankData"/>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top" style="border-radius: 5px">
+				<div class="titleBox">
+          <div class="title">基础概况</div>
+        </div>
+				<div class="info_box">
+          <div class="info3">
+						<span>{{ BasicOverview[0] }}</span>
+            <span>用户总数（个）</span>
+          </div>
+          <div class="info3">
+						<span>{{ BasicOverview[1] }}</span>
+            <span>新增用户（个）</span>
+          </div>
+					<div class="info3">
+						<span>{{ BasicOverview[2] }}</span>
+            <span>本月新增登录（次）</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<TeaFre style="height: calc(100% - 50px)" :monthArray="monthArray"/>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">课程排行榜</div>
+        </div>
+				<div class="dataBox">
+         <courseRank :rankData="courseRankData"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loginTime from './chartList/loginTime'
+import toolUser from './chartList/toolUser'
+import TeaFre from './chartList/teaFre'
+import schoolRank from './chartList/schoolRank'
+import courseRank from './chartList/courseRank'
+import courseNum from './chartList/courseNum'
+export default {
+  components: {
+		loginTime,
+		toolUser,
+		TeaFre,
+		schoolRank,
+		courseRank,
+		courseNum
+  //   TeaFre,
+  //   TeaAct,
+  //   TeaData,
+  //   FunPlot,
+  //   WorkNum,
+  //   WorkTime,
+  //   ToolUse,
+  
+  //   TeaActSecond,
+  //   CateRank,
+  //   loading
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+			yearArray:"0",
+			OnlineDuration:['0','0'],
+			BasicOverview:['0','0','0'],
+			LoginFrequency:['0','0','0','0'],
+			loginCountYearArray:{
+				"2023-12-06":1,
+				"2023-12-07":1,
+				"2023-12-13":1,
+				"2023-12-18":1,
+				"2023-12-19":1,
+				"2023-12-22":1,
+				"2023-12-24":1,
+				"2023-12-25":1,
+				"2023-12-26":1,
+				"2024-01-02":2,
+				"2024-01-03":1,
+				"2024-01-04":1,
+				"2024-01-08":2,
+				"2024-01-09":1,
+				"2024-01-10":1,
+				"2024-01-11":1,
+				"2024-01-12":1,
+				"2024-01-19":1,
+				"2024-01-20":1,
+				"2024-01-22":2,
+				"2024-01-23":2,
+				"2024-01-24":2,
+				"2024-01-25":1,
+				"2024-01-30":1,
+				"2024-01-31":1,
+				"2024-02-01":2,
+				"2024-02-02":1,
+				"2024-02-05":2,
+				"2024-02-06":1,
+				"2024-02-07":1,
+				"2024-02-08":1,
+				"2024-02-19":1,
+				"2024-02-20":1,
+				"2024-02-21":1,
+				"2024-02-22":1,
+				"2024-02-23":2,
+				"2024-02-24":1,
+				"2024-02-25":1,
+				"2024-02-26":1,
+				"2024-02-27":1,
+				"2024-02-28":1,
+				"2024-03-04":1,
+				"2024-03-05":1,
+				"2024-03-07":1
+			},
+			monthArray:[{"Year":2023,"Month":6,"login":210},{"Year":2023,"Month":7,"login":350},{"Year":2023,"Month":8,"login":140},{"Month":9,"Year":2023,"login":80},{"Month":10,"Year":2023,"login":280}],
+			schoolRankData:[
+				{schoolName:"深圳市南山实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"海滨实验小学逾...",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+			],
+			courseRankData:[
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+			],
+			weekCourse2:[
+				{
+					name:"三年级",
+					lastCourse:1.5,
+					toCourse:3.1
+				},
+				{
+					name:"四年级",
+					lastCourse:2.9,
+					toCourse:4
+				},
+				{
+					name:"五年级",
+					lastCourse:2,
+					toCourse:3.9
+				},
+				{
+					name:"六年级",
+					lastCourse:0.2,
+					toCourse:4
+				},
+				{
+					name:"七年级",
+					lastCourse:1.2,
+					toCourse:3
+				},
+				{
+					name:"八年级",
+					lastCourse:1.7,
+					toCourse:3.5
+				},
+				{
+					name:"数据",
+					lastCourse:3,
+					toCourse:2
+				},
+			],
+    //   skType: 0,
+    //   courseType: 0,
+    //   bType: 0,
+    //   sType: 0,
+    //   cType4: "grade",
+    //   cType: "1",
+    //   oType: false,
+    //   teacherNum: 0,
+    //   allLoginTeacher: 0,
+    //   teacherNumCountMonthArray: [],
+    //   teacherLoginCountMonthArray: [],
+    //   tedurArray: [],
+    //   allTime: 0,
+    //   workTime: [],
+    //   gradeTime: [],
+    //   subjectTime: [],
+    //   themeListTime: [],
+    //   loginCountYearArray: {},
+    //   courseArray: [],
+    //   _courseArray: [],
+    //   _course2: [],
+    //   courseNumberArray: [],
+    //   gradeArray: [],
+    //   subjectArray: [],
+    //   themeArray: [],
+    //   allArray: [],
+    //   workNumList: [],
+    //   allCourse: 0,
+    //   allProject: 0,
+    //   lightJson: {
+    //     teachers: 0,
+    //     createCourse: 0, //创建课程
+    //     gCourseTeachers: 0, //协同教研
+    //     useTemplate: 0, //使用模板
+    //     commentTeachers: 0, //互动交流
+    //     useTool: 0, //使用工具
+    //     useEvalution: 0, //实施评价
+    //     evaWorksCount: 0, //教学评一体化
+    //   },
+    //   lightJson1: {
+    //     teachers: 0,
+    //     createProject: 0, //创建项目
+    //     gProjectTeachers: 0, //师生协作
+    //     useTemplate: 0, //使用模板
+    //     commentTeachers: 0, //互动交流
+    //     useTool: 0, //使用工具
+    //   },
+    //   pusaDep: [
+    //     { value: 0, name: "登录" },
+    //     { value: 0, name: "创建" },
+    //     { value: 0, name: "授课" },
+    //     { value: 0, name: "评价" },
+    //   ],
+    //   pusaDep1: [
+    //     { value: 0, name: "登录" },
+    //     { value: 0, name: "创建" },
+    //     { value: 0, name: "师生协作" },
+    //     { value: 0, name: "使用工具" },
+    //   ],
+    //   rankData: [],
+    //   rankLoading: false,
+    //   cTypeRank: "",
+    //   classList: [],
+    };
+  },
+  mounted() {
+    // this.getData();
+  },
+  methods: {
+    // otherEchart() {
+    //   this.oType = !this.oType;
+    // },
+    // format(percentage) {
+    //   return percentage + "%";
+    // },
+    // typeChange() {
+    //   if (this.cType4 === "") {
+    //     this.courseNumberArray = this.allArray;
+    //   } else if (this.cType4 === "grade") {
+    //     this.courseNumberArray = this.gradeArray;
+    //   } else if (this.cType4 === "theme") {
+    //     this.courseNumberArray = this.themeArray;
+    //   } else if (this.cType4 === "subject") {
+    //     this.courseNumberArray = this.subjectArray;
+    //   }
+    //   this.$forceUpdate();
+    // },
+    // typeChange2() {
+    //   let _grade = JSON.parse(JSON.stringify(this._grade)); //年级
+    //   let _subject = JSON.parse(JSON.stringify(this._subject)); //学科
+    //   let _course = JSON.parse(JSON.stringify(this._courseArray));
+    //   let _course2 = JSON.parse(JSON.stringify(this._course2));
+    //   let _gradeCourse = 0; //各年级上传课程
+    //   let _subjectCourse = 0; //各学科上传课程
+    //   let _courseArray = [];
+    //   // _subject.push({ name: "其他" });
+
+    //   if (this.cType == "1") {
+    //     for (var i = 0; i < _grade.length; i++) {
+    //       _courseArray.push({
+    //         name: _grade[i].name,
+    //         id: _grade[i].id,
+    //         courseid: [],
+    //         subject: [],
+    //       });
+    //       for (var z = 0; z < _course.length; z++) {
+    //         if (_course[z].typeid && _course[z].typeid.indexOf(_grade[i].id) !== -1) {
+    //           _gradeCourse++;
+    //           if (
+    //             _courseArray[i].courseid.indexOf(_course[z].courseid) === -1
+    //           ) {
+    //             _courseArray[i].courseid.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       for (var j = 0; j < _subject.length; j++) {
+    //         _courseArray[i].subject.push({
+    //           name: _subject[j].name,
+    //           id: _subject[j].id,
+    //           course: 0,
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (
+    //             _course[z].typeid && _course[z].typeid.indexOf(_subject[j].id) !== -1 &&
+    //             _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1
+    //           ) {
+    //             _courseArray[i].subject[j].course++;
+    //           }
+    //         }
+    //       }
+    //       let sum = 0;
+    //       for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+    //         sum += _courseArray[i].subject[j].course;
+    //       }
+    //       // _courseArray[i].subject[_courseArray[i].subject.length - 1].course =
+    //       //   _courseArray[i].courseid.length - sum < 0
+    //       //     ? 0
+    //       //     : _courseArray[i].courseid.length - sum;
+    //     }
+    //   } else {
+    //     for (var i = 0; i < _grade.length; i++) {
+    //       _courseArray.push({
+    //         name: _grade[i].name,
+    //         id: _grade[i].id,
+    //         courseid: [],
+    //         subject: [],
+    //       });
+    //       for (var z = 0; z < _course2.length; z++) {
+    //         if (_course2[z].typeid && _course2[z].typeid.indexOf(_grade[i].id) !== -1) {
+    //           if (
+    //             _courseArray[i].courseid.indexOf(_course2[z].courseid) === -1
+    //           ) {
+    //             _courseArray[i].courseid.push(_course2[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       for (var j = 0; j < _subject.length; j++) {
+    //         _courseArray[i].subject.push({
+    //           name: _subject[j].name,
+    //           id: _subject[j].id,
+    //           course: 0,
+    //         });
+    //         for (var z = 0; z < _course2.length; z++) {
+    //           if (
+    //             _course2[z].typeid && _course2[z].typeid.indexOf(_subject[j].id) !== -1 &&
+    //             _courseArray[i].courseid.indexOf(_course2[z].courseid) !== -1
+    //           ) {
+    //             if (this.cType == "0") {
+    //               _courseArray[i].subject[j].course += _course2[z].text
+    //                 ? parseInt((parseInt(_course2[z].text) / 3600).toFixed(0))
+    //                 : 0;
+    //             } else if (this.cType == "2") {
+    //               if (_course2[z].course_teacher.split(",").length > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             } else if (this.cType == "3") {
+    //               if (_course2[z].worksCount > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             } else if (this.cType == "4") {
+    //               if (_course2[z].evaCount > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             }
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    //   // for (var j = 0; j < _subject.length; j++) {
+    //   //   for (var z = 0; z < _course.length; z++) {
+    //   //     if (_course[z].typeid == _subject[j].id) {
+    //   //       _subjectCourse++;
+    //   //     }
+    //   //   }
+    //   // }
+    //   this.courseArray = _courseArray;
+    //   this.$forceUpdate();
+    // },
+    // getData() {
+    //   this.isLoading = true;
+    //   let params = [
+    //     {
+    //       oid: this.oid,
+    //       org: this.org,
+    //     },
+    //   ];
+    //   this.ajax
+    //     .post(this.$store.state.api + "selectDataBoardTeacherNew", params)
+    //     .then((res) => {
+    //       this.isLoading = false;
+    //       let _grade = res.data[0]; //年级
+    //       let _subject = res.data[1]; //学科
+    //       this._grade = JSON.parse(JSON.stringify(_grade));
+    //       this._subject = JSON.parse(JSON.stringify(_subject));
+    //       let _themeList = res.data[2]; //主题
+    //       this.teacherNum = res.data[3][0].count; //教师总数
+    //       let _teacherNumYear = res.data[4]; //半年内教师数量
+    //       let _teacherLoginYear = res.data[5]; //半年内登录教师
+    //       let _classList1 = res.data[21]; //班级
+    //       this.classList = _classList1.filter((el) => {
+    //         return el.count > 0;
+    //       });
+    //       // this.cTypeRank = _classList1[0].id
+    //       //将数据根据time里面的月份分成多个数组
+    //       let teacherNumCountMonthArray = [];
+    //       let teacherLoginCountMonthArray = [];
+    //       const date = new Date();
+    //       var Month = date.getMonth() + 1;
+    //       var Year = date.getFullYear();
+    //       for (var i = Month; i > Month - 6; i--) {
+    //         if (i <= 0) {
+    //           teacherNumCountMonthArray.push({
+    //             Year: Year - 1,
+    //             Month: 12 + i,
+    //             num: 0,
+    //           });
+    //           teacherLoginCountMonthArray.push({
+    //             Year: Year - 1,
+    //             Month: 12 + i,
+    //             login: 0,
+    //           });
+    //         } else {
+    //           teacherNumCountMonthArray.push({
+    //             Month: i,
+    //             Year: Year,
+    //             num: 0,
+    //           });
+    //           teacherLoginCountMonthArray.push({
+    //             Month: i,
+    //             Year: Year,
+    //             login: 0,
+    //           });
+    //         }
+    //       }
+
+    //       teacherNumCountMonthArray = teacherNumCountMonthArray.reverse();
+    //       teacherLoginCountMonthArray = teacherLoginCountMonthArray.reverse();
+    //       for (var i = 0; i < _teacherNumYear.length; i++) {
+    //         let _date = new Date(_teacherNumYear[i].time);
+    //         var _month = _date.getMonth() + 1;
+    //         var _year = _date.getFullYear();
+    //         for (var j = 0; j < teacherNumCountMonthArray.length; j++) {
+    //           if (
+    //             _month == teacherNumCountMonthArray[j].Month &&
+    //             _year == teacherNumCountMonthArray[j].Year
+    //           ) {
+    //             teacherNumCountMonthArray[j].num+=_teacherNumYear[i].usernum;
+    //             break;
+    //           }
+    //         }
+    //       }
+    //       for (var i = 0; i < _teacherLoginYear.length; i++) {
+    //         let _date = new Date(_teacherLoginYear[i].time);
+    //         var _month = _date.getMonth() + 1;
+    //         var _year = _date.getFullYear();
+    //         for (var j = 0; j < teacherLoginCountMonthArray.length; j++) {
+    //           if (
+    //             _month == teacherLoginCountMonthArray[j].Month &&
+    //             _year == teacherLoginCountMonthArray[j].Year
+    //           ) {
+    //             teacherLoginCountMonthArray[j].login+=_teacherLoginYear[i].usernum;
+    //             break;
+    //           }
+    //         }
+    //       }
+    //       var allLoginTeacher = 0;
+    //       for (var i = 0; i < teacherLoginCountMonthArray.length; i++) {
+    //         allLoginTeacher += teacherLoginCountMonthArray[i].login;
+    //       }
+
+    //       this.allLoginTeacher = allLoginTeacher;
+    //       this.teacherNumCountMonthArray = teacherNumCountMonthArray;
+    //       this.teacherLoginCountMonthArray = teacherLoginCountMonthArray;
+
+    //       let _classList = res.data[21]; //查询学校教研室
+    //       let _workTime = res.data[6]; //查询教研室在线时长
+    //       var mergedArray = [];
+
+    //       for (var i = 0; i < _classList.length; i++) {
+    //         mergedArray.push({
+    //           id: _classList[i].id,
+    //           name: _classList[i].name,
+    //           text: 0,
+    //         });
+    //         for (let j = 0; j < _workTime.length; j++) {
+    //           const _user = _workTime[j];
+    //           if (_classList[i].id == _user.id) {
+    //             mergedArray[i].text += Number(_user.time);
+    //           }
+    //         }
+    //         mergedArray[i].text = (mergedArray[i].text / 60 / 60).toFixed(0); //换算成小时
+    //       }
+    //       this.workTime = mergedArray;
+
+    //       var _allTime = 0;
+
+    //       for (var i = 0; i < mergedArray.length; i++) {
+    //         _allTime += Number(mergedArray[i].text);
+    //       }
+
+    //       // this.allTime = parseInt(res.data[7][0].time) / 60 / 60;
+    //       this.allTime = _allTime;
+
+    //       let allLoginCount = res.data[8]; //一年的登录频次
+    //       let loginCountYearArray = {};
+    //       let timeArray = [];
+    //       for(var i = 0;i<allLoginCount.length;i++){
+    //         timeArray.push({time:allLoginCount[i].time, num:allLoginCount[i].usernum});
+    //       }
+    //       timeArray.forEach((item) => {
+    //         loginCountYearArray[item.time] = loginCountYearArray[item.time] + item.num || item.num;
+    //       });
+    //       // for (var i = Month; i > Month - 12; i--) {
+    //       //   if (i <= 0) {
+    //       //     loginCountYearArray.push({
+    //       //       Year: Year - 1,
+    //       //       Month: 12 + i,
+    //       //       mon: 0,
+    //       //       tue: 0,
+    //       //       wed: 0,
+    //       //       thur: 0,
+    //       //       fri: 0,
+    //       //       sat: 0,
+    //       //       sun: 0,
+    //       //     });
+    //       //   } else {
+    //       //     loginCountYearArray.push({
+    //       //       Month: i,
+    //       //       Year: Year,
+    //       //       mon: 0,
+    //       //       tue: 0,
+    //       //       wed: 0,
+    //       //       thur: 0,
+    //       //       fri: 0,
+    //       //       sat: 0,
+    //       //       sun: 0,
+    //       //     });
+    //       //   }
+    //       // }
+    //       // loginCountYearArray = loginCountYearArray.reverse();
+
+    //       // for (var i = 0; i < allLoginCount.length; i++) {
+    //       //   let _date = new Date(allLoginCount[i].time);
+    //       //   var _month = _date.getMonth() + 1;
+    //       //   var _year = _date.getFullYear();
+    //       //   var _day = _date.getDay();
+    //       //   let dayArray = ["sun", "mon", "tue", "wed", "thur", "fri", "sat"];
+    //       //   for (var j = 0; j < loginCountYearArray.length; j++) {
+    //       //     if (
+    //       //       _month == loginCountYearArray[j].Month &&
+    //       //       _year == loginCountYearArray[j].Year
+    //       //     ) {
+    //       //       loginCountYearArray[j][dayArray[_day]]++;
+    //       //       break;
+    //       //     }
+    //       //   }
+    //       // }
+    //       this.loginCountYearArray = loginCountYearArray;
+
+    //       this.allLoginTime = res.data[9][0].count; //一年的登录频次
+
+    //       let _course = res.data[10]; //课程
+    //       this._courseArray = JSON.parse(JSON.stringify(_course));
+          
+    //       this._course2 = res.data[22]; //查询课程
+    //       this.typeChange2();
+
+    //       let _gradeArray = [];
+    //       let _subjectArray = [];
+    //       let _themeArray = [];
+
+    //       for (var i = 0; i < _grade.length; i++) {
+    //         _gradeArray.push({
+    //           name: _grade[i].name,
+    //           typeid: _grade[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_grade[i].id) != -1) {
+    //             _gradeArray[i].course++;
+    //             _gradeArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+
+    //       for (var i = 0; i < _subject.length; i++) {
+    //         _subjectArray.push({
+    //           name: _subject[i].name,
+    //           typeid: _subject[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_subject[i].id) != -1) {
+    //             _subjectArray[i].course++;
+    //             _subjectArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+
+    //       for (var i = 0; i < _themeList.length; i++) {
+    //         _themeArray.push({
+    //           name: _themeList[i].name,
+    //           typeid: _themeList[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_themeList[i].id) != -1) {
+    //             _themeArray[i].course++;
+    //             _themeArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       this.gradeArray = _gradeArray;
+    //       this.subjectArray = _subjectArray;
+    //       this.themeArray = _themeArray;
+    //       this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray];
+    //       this.typeChange();
+
+    //       let _teacherCourse = res.data[11]; //老师创建的课程
+    //       let cNum = 0
+    //       let cNum3 = 0
+    //       for(var i = 1; i < _teacherCourse.length; i++){
+    //         cNum += _teacherCourse[i].coursecount;
+    //         if(_teacherCourse[i].coursecount > 0){
+    //           cNum3++
+    //         }
+    //       }
+    //       this.allCourse = cNum; //得按上面计算
+    //       let _teacherProject = res.data[12]; //老师创建的项目
+    //       let cNum2 = 0
+    //       let cNum4 = 0
+    //       for(var i = 1; i < _teacherProject.length; i++){
+    //         cNum2 += _teacherProject[i].count;
+    //         if(_teacherProject[i].count > 0){
+    //           cNum4++
+    //         }
+    //       }
+    //       this.allProject = cNum2;//得按上面计算
+
+    //       var _workNumList = [];
+    //       // 创建一个对象来存储结果
+    //       var result = {};
+
+    //       // 合并数据 _teacherCourse 和 _teacherProject 到结果对象
+    //       _teacherCourse.forEach((item) => {
+    //         var userid = item.userid;
+    //         var username = item.username;
+    //         var count = item.coursecount;
+    //         if (!result[username]) {
+    //           result[username] = {
+    //             username: username,
+    //             userid: userid,
+    //             course: 0,
+    //             project: 0,
+    //           };
+    //         }
+    //         result[username].course = count;
+    //       });
+
+    //       _teacherProject.forEach((item) => {
+    //         var userid = item.userid;
+    //         var username = item.username;
+    //         var count = item.count;
+    //         if (!result[username]) {
+    //           result[username] = {
+    //             username: username,
+    //             userid: userid,
+    //             course: 0,
+    //             project: 0,
+    //           };
+    //         }
+    //         result[username].project = count;
+    //       });
+
+    //       for (var username in result) {
+    //         var entry = result[username];
+    //         _workNumList.push([
+    //           entry.course,
+    //           entry.project,
+    //           entry.username,
+    //           entry.userid,
+    //         ]);
+    //       }
+
+    //       this.workNumList = _workNumList;
+
+    //       this.lightJson.teachers = res.data[3][0].count; //教师总数
+    //       this.lightJson1.teachers = res.data[3][0].count; //教师总数
+    //       this.lightJson.createCourse = cNum3; //创建了课程的老师 --计算
+    //       this.lightJson.gCourseTeachers = res.data[13][0].count; //参与协同课程的老师
+    //       this.lightJson.commentTeachers = res.data[14][0].count; //参与互动交流的老师
+    //       this.lightJson.useTool = res.data[15][0].count; //使用工具
+    //       this.lightJson.useEvalution = res.data[16].length; //实施评价
+    //       this.lightJson.evaWorksCount = res.data[17][0].count; //教学评一体化
+
+    //       let _isLoginTeacher = res.data[18][0].usercount; //登录过的教师
+    //       let _isCourseTeacher = res.data[15][0].count; //授课了的教师
+
+    //       for (var i = 0; i < this.pusaDep.length; i++) {
+    //         if (this.pusaDep[i].name == "登录") {
+    //           this.pusaDep[i].value = (
+    //             (_isLoginTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "创建") {
+    //           this.pusaDep[i].value = (
+    //             (this.lightJson.createCourse / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "授课") {
+    //           this.pusaDep[i].value = (
+    //             (_isCourseTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "评价") {
+    //           this.pusaDep[i].value = (
+    //             (this.lightJson.useEvalution / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         }
+    //       }
+
+    //       this.lightJson1.createProject = cNum4; //创建项目 
+
+    //       let _teacherAndStudent = res.data[19]; //师生协作
+    //       this.lightJson1.useTool = res.data[20][0].count; //项目使用工具
+    //       let _tsCount = 0;
+
+    //       for (var i = 0; i < _teacherAndStudent.length; i++) {
+    //         if (_teacherAndStudent[i].type2) {
+    //           if (
+    //             (_teacherAndStudent[i].type =
+    //               1 && _teacherAndStudent[i].type2.indexOf(2) != -1) ||
+    //             (_teacherAndStudent[i].type =
+    //               2 && _teacherAndStudent[i].type2.indexOf(1) != -1)
+    //           ) {
+    //             _tsCount++;
+    //           }
+    //         }
+    //       }
+
+    //       this.lightJson1.gProjectTeachers = _tsCount;
+
+    //       for (var i = 0; i < this.pusaDep1.length; i++) {
+    //         if (this.pusaDep1[i].name == "登录") {
+    //           this.pusaDep1[i].value = (
+    //             (_isLoginTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "创建") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.createProject / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "师生协作") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.gProjectTeachers / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "使用工具") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.useTool / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         }
+    //       }
+
+    //       this.$forceUpdate();
+    //     })
+    //     .catch((err) => {
+    //       this.isLoading = false;
+    //       this.$message.error(
+    //         "因加载数据量过大，服务器统计异常，请联系管理员。"
+    //       );
+    //       console.error(err);
+    //     });
+    // },
+    // checkRank() {
+    //       this.courseType = 1;
+    //   this.rankLoading = true;
+    //   let params = [
+    //     {
+    //       oid: this.oid,
+    //       org: this.org,
+    //       cid: this.cTypeRank,
+    //     },
+    //   ];
+    //   this.ajax
+    //     .post(this.$store.state.api + "selectDataboardTeacherRank", params)
+    //     .then((res) => {
+    //       this.rankLoading = false;
+    //       let rankData = [];
+    //       let teachers = res.data[0]; //教师总数
+    //       let loginTimeAll = res.data[1]; //教师总登录时长
+    //       let loginCountAll = res.data[2]; //教师总登录频次
+    //       let courses = res.data[3]; //教师创建及协同课程总数
+    //       let projects = res.data[4]; //教师创建及协同项目总数
+    //       let courseWorks = res.data[5]; //教师创建及协同有作业的课程总数
+    //       let evaWorks = res.data[6]; //教师创建及协同有作业有评价的课程总数
+
+    //       for (let i = 0; i < teachers.length; i++) {
+    //         rankData.push({
+    //           name: teachers[i].name,
+    //           userid: teachers[i].userid,
+    //           classid: teachers[i].cclassid,
+    //           loginTime: 0,
+    //           loginCount: 0,
+    //           courses: 0,
+    //           projects: 0,
+    //           courseWorks: 0,
+    //           worksRate: 0,
+    //           score: 0,
+    //         });
+    //       }
+
+    //       for (var j = 0; j < rankData.length; j++) {
+    //         for (var i = 0; i < loginTimeAll.length; i++) {
+    //           if (loginTimeAll[i].userid == rankData[j].userid) {
+    //             rankData[j].loginTime += parseInt(
+    //               (loginTimeAll[i].text / 60 / 60).toFixed(0)
+    //             );
+    //           }
+    //         }
+
+    //         for (var i = 0; i < loginCountAll.length; i++) {
+    //           if (loginCountAll[i].userid == rankData[j].userid) {
+    //             rankData[j].loginCount++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < courses.length; i++) {
+    //           if (courses[i].userid == rankData[j].userid) {
+    //             rankData[j].courses++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < projects.length; i++) {
+    //           if (projects[i].userid == rankData[j].userid) {
+    //             rankData[j].projects++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < courseWorks.length; i++) {
+    //           if (courseWorks[i].userid == rankData[j].userid) {
+    //             rankData[j].courseWorks++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < evaWorks.length; i++) {
+    //           if (evaWorks[i].userid == rankData[j].userid) {
+    //             rankData[j].worksRate++;
+    //           }
+    //         }
+
+    //         rankData[j].score = (
+    //           rankData[j].loginTime * 0.1 +
+    //           rankData[j].loginCount * 0.1 +
+    //           rankData[j].courses * 0.1 +
+    //           rankData[j].projects * 0.1 +
+    //           rankData[j].courseWorks * 0.3 +
+    //           rankData[j].worksRate * 0.3
+    //         ).toFixed(0);
+    //       }
+
+    //       this.rankData = rankData;
+    //       this.$forceUpdate();
+    //     })
+    //     .catch((err) => {
+    //       this.rankLoading = false;
+    //       this.$message.error(
+    //         "因加载数据量过大，服务器统计异常，请联系管理员。"
+    //       );
+    //       console.error(err);
+    //     });
+    // },
+  },
+};
+</script>
+
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 20px);
+  height: 100%;
+  margin: 0 10px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+}
+
+.titleBox::after {
+  content: '';
+  position: absolute;
+  height: 2px;
+  width: calc(100% - 30px);
+  bottom: 0;
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
+}
+
+.title {
+  color: #060e17;
+  margin-right: 25px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+	position: relative;
+}
+
+.title::before{
+  content: '';
+  background-image: url('../../../../../assets/icon/test/data_title_icon.png');
+  background-size: 100% 100%;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dataBox {
+	flex: 1;
+  /* height: calc(100% - 40px); */
+  width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/* .middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+} */
+
+
+
+/* .teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+} */
+
+/* .teaMiddle {
+  width: calc(100% / 3 - 10px);
+} */
+
+/* .timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
+} */
+
+/* .timeDiv > div {
+  margin-right: 10px;
+  cursor: pointer;
+} */
+
+/* .cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+} */
+
+/* .tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+} */
+
+/* .tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+} */
+
+/* .teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+} */
+
+/* .teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+} */
+
+/* .halfBox {
+  width: 50%;
+} */
+
+/* .isClick {
+  box-sizing: border-box;
+} */
+
+/* .noClick{
+  font-weight: 500;
+  opacity: .6;
+} */
+
+/* .otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+} */
+
+/* .otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+} */
+
+/* .otherImg > img {
+  width: 100%;
+  height: 100%;
+} */
+
+/* .allBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+} */
+
+/* .allBox_left {
+  width: 30%;
+  height: 100%;
+} */
+
+/* .allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+} */
+
+/* .depth {
+  width: calc(100% / 4 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+} */
+
+/* .depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+} */
+
+/* .depth > div:nth-child(1) {
+} */
+
+.selectBox {
+  width: 100px;
+	position: absolute;
+	right: 20px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #3681FC;
+}
+
+.selectBox >>> .el-input__icon {
+  line-height: 30px;
+}
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-around;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: center;
+	align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+
+.info_box>.info2 {
+  width: calc(100% / 4 - 10px);
+}
+
+.info_box>.info3 {
+  width: calc(100% / 3 );
+  margin-bottom: 5px;
+}
+
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
+	font-size: 24px;
+  font-weight: 700;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 12px;
+  color: #565e6a;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+</style>

src/components/pages/sz/dataBoardArea/index.vue

@@ -1,15 +1,118 @@
 <template>
-  <div>
-    区
+    <div class="body">
+    <div class="db_bg">
+      <div class="db_header">
+				<div class="db_header_title"></div>
+      </div>
+      <div class="db_body">
+				<dataCenter :oid="oid" :org="org"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import dataCenter from './dataCenter'
 export default {
+	components:{
+		dataCenter
+	},
+  data() {
+    return {
+      type: 1,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      scourseLength: 0,
+    };
+  },
+  methods: {
+    setType(type) {
+      this.type = type;
+    },
+    getData() {
+			return console.log('获取数据')
+      // this.isLoading = true;
+      // let params = [
+      //   {
+      //     oid: this.oid,
+      //     org: this.org,
+      //   },
+      // ];
+      // this.ajax
+      //   .post(this.$store.state.api + "getCourseLength", params)
+      //   .then((res) => {
+      //     this.isLoading = false;
 
+      //     this.scourseLength = res.data[0][0].count;
+      //     this.$forceUpdate();
+      //   })
+      //   .catch((err) => {
+      //     this.isLoading = false;
+      //     console.error(err);
+      //   });
+    },
+  },
+  mounted() {
+    // this.getData();
+  },
 }
 </script>
 
-<style>
+<style scoped>
+.body {
+  height: 100%;
+  width: 100%;
+  min-width: 1550px;
+  min-height: 750px;
+  background: #e7f3fe;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.db_bg {
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  /* padding: 10px; */
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 2px solid #3681FC3D;
+  box-shadow: 20px 20px 80px 0px #3681FC3D inset;
+}
+
+.db_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  /* background: #fff; */
+  align-items: center;
+}
 
+.db_header:after {
+  content: "";
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    bottom: 0.5px;
+    left: 50%;
+    z-index: 1;
+    background: linear-gradient(90deg, #9ac1fd 0%, rgba(134, 179, 253, 0) 91.13%);
+}
+
+.db_header_title {
+  /* background-image: url("../../../assets/icon/test/data_title.png"); */
+  background-image: url("../../../../assets/icon/test/data_title2.png");
+  width: 290px;
+  height: 100%;
+  background-size: 100% 100%;
+}
+
+.db_body {
+  height: calc(100% - 50px);
+  width: 100%;
+  overflow: auto;
+  /* background: rgb(231, 242, 252); */
+}
 </style>

src/components/pages/sz/dataBoardCity/dataCenter/chartList/courseNum/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    weekCourse2: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        chart: {
+          type: 'column',
+          backgroundColor: 'rgba(0,0,0,0)'
+        },
+        title: {
+          text: null
+        },
+        credits: {
+          enabled: false//不显示LOGO
+        },
+        xAxis: {
+          categories: [
+          ]
+        },
+        yAxis: [{
+          allowDecimals: false,
+          min: 0,
+          title: {
+            text: '课程总数'
+          }
+        },
+          // {
+          //   title: {
+          //     text: '项目总数'
+          //   },
+          //   opposite: true
+          // }
+        ],
+        legend: {
+          shadow: false
+        },
+        tooltip: {
+          shared: true
+        },
+        plotOptions: {
+          column: {
+            grouping: false,
+            shadow: false,
+            borderWidth: 0,
+            dataLabels: {
+              enabled: true,  //显示数量提示
+              color: '#000000',
+              formatter : function() {
+                var employee = this.point.series.chart.series[0].yData[this.point.index];
+                var optimizedEmployee = this.point.series.chart.series[1].yData[this.point.index];
+                var employeePercentage = 0;
+                if(optimizedEmployee > employee){
+                  employeePercentage = ((optimizedEmployee - employee) / optimizedEmployee) * 100
+                }
+                if (this.series.name === '本月课程总数') {
+                  return  employeePercentage.toFixed(1) + '%';
+                } else {
+                  return '';
+                }
+              }
+            }
+          }
+        },
+        series: [{
+          name: '上月课程总数',
+          color: '#96D8A8',
+          data: [],
+          pointPadding: 0.3, // 通过 pointPadding 和 pointPlacement 控制柱子位置
+          // pointPlacement: -0.2
+        }, {
+          name: '本月课程总数',
+          color: '#5E9AFC',
+          data: [],
+          pointPadding: 0.4,
+          // pointPlacement: -0.2
+        },
+          //  {
+          //   name: '上周项目总数',
+          //   color: 'rgba(248,161,63,1)',
+          //   data: [153, 178, 195],
+          //   pointPadding: 0.3,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1  // 指定数据列所在的 yAxis
+          // }, {
+          //   name: '本周项目总数',
+          //   color: 'rgba(186,60,61,.9)',
+          //   data: [203, 198, 208],
+          //   pointPadding: 0.4,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1
+          // }
+        ]
+      }
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = Highcharts.chart('cateRank', this.option);
+        // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.option.xAxis.categories = []
+      this.option.series[0].data = []
+      this.option.series[1].data = []
+      for (var i = 0; i < array.length; i++) {
+        this.option.xAxis.categories.push(array[i].name)
+        this.option.series[0].data.push(array[i].lastCourse)
+        this.option.series[1].data.push(array[i].toCourse)
+      }
+    }
+  },
+  watch: {
+    weekCourse2: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.weekCourse2)
+    // this.setChart();
+
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardCity/dataCenter/chartList/courseRank/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px;overflow: auto;">
+      <el-table :data="tableData" style="width: 100%" height="100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
+        :row-class-name="tableRowClassName" class="tableClass">
+        <el-table-column label="排名" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="courseName" label="课程名称" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="compare" label="较上周" min-width="80" align="center">
+					<template slot-scope="scope">
+						<div>
+							<!-- {{ Math.abs(scope.row.compare) }} -->
+							<div v-if="scope.row.compare>0" class="el-icon-top compareDown">{{ Math.abs(scope.row.compare) }}</div>
+							<div v-if="scope.row.compare==0">{{ Math.abs(scope.row.compare) }}</div>
+							<div v-if="scope.row.compare<0" class="el-icon-bottom compareUp">{{ Math.abs(scope.row.compare) }}</div>
+						</div>
+					</template>
+        </el-table-column>
+        <el-table-column prop="total" label="上课人次" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rankData: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = JSON.parse(JSON.stringify(array))
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.total - a.total;
+      })
+    }
+  },
+  watch: {
+    rankData: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.rankData)
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: #f2f7ff !important;
+}
+
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+
+.data_body div::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #fff;
+}
+
+/*定义滑块 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px #AECCFE;
+    background-color: #AECCFE;
+}
+
+.compareUp{
+	color: #17C469;
+	letter-spacing: 5px;
+}
+
+.compareDown{
+	color: #EE3E3E;
+	background-color: #FFDDDD;
+	padding: 5px 10px;
+	letter-spacing: 5px;
+	border-radius: 3px;
+}
+
+</style>

src/components/pages/sz/dataBoardCity/dataCenter/chartList/loginTime/index.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        yearArray: {
+            type: String,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                series: [
+                    {
+                        type: 'gauge',
+                        startAngle: 180,
+                        endAngle: 0,
+                        center: ['50%', '75%'],
+                        radius: '150%',
+                        min: 0,
+                        max: 4000,
+                        splitNumber: 8,
+                        axisLine: {
+                            lineStyle: {
+                                width: 10,
+                                color: [
+                                    [0.25, 'rgb(251, 223, 148)'],
+                                    [0.5, 'rgb(145, 208, 237)'],
+                                    [0.75, 'rgb(68, 96, 193)'],
+                                    [1, 'rgb(240, 141, 158)']
+                                ]
+                            }
+                        },
+                        pointer: {
+                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+                            length: '12%',
+                            width: 12,
+                            offsetCenter: [0, '-60%'],
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisTick: {
+                            length: 6,
+                            lineStyle: {
+                                color: 'auto',
+                                width: 2
+                            }
+                        },
+                        splitLine: {
+                            length: 20,
+                            lineStyle: {
+                                color: 'auto',
+                                width: 5
+                            }
+                        },
+                        axisLabel: {
+                            show:false
+                        },
+                        title:{
+                            show:false
+                        },
+                        title: {
+                            offsetCenter: [0, '10%'],
+                            fontSize: 20
+                        },
+                        detail: {
+                            fontSize: 30,
+                            offsetCenter: [0, '-15%'],
+                            color: 'inherit'
+                        },
+                        data: [
+                            {
+                                value: 0,
+                                name: '深度使用'
+                            }
+                        ]
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+
+                // this.option.xAxis.data = option.xdata;
+                this.option.series[0].data[0].value = this.yearArray;
+                // this.option.visualMap.max = option.max ? option.max : 0;
+
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+        yearArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.ooption = {
+                    xdata: [],
+                    sdata: [],
+                    max: 0
+                }
+                let _array = newValue
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    this.option.series[0].data[0].value = this.yearArray;
+                    // this.option.xAxis.data = this.ooption.xdata;
+                    // this.option.series[0].data[0] = this.ooption.sdata;
+                    // this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
+                    this.chartObj.setOption(this.option);
+                }
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        
+
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    /* background: #fff; */
+}
+</style>
+  

src/components/pages/sz/dataBoardCity/dataCenter/chartList/schoolRank/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px;overflow: auto;">
+      <el-table :data="tableData" style="width: 100%" height="100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
+        :row-class-name="tableRowClassName" class="tableClass">
+        <el-table-column label="排名" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="schoolName" label="学校名称" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="area" label="区域" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="teacherLogin" label="教师登录" min-width="90" align="center">
+        </el-table-column>
+				<el-table-column prop="studentLogin" label="学生登录" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="teaching" label="授课次数" min-width="90" align="center">
+        </el-table-column>
+        <el-table-column prop="submitJob" label="提交作业" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="score" label="综合得分" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rankData: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = JSON.parse(JSON.stringify(array))
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.score - a.score;
+      })
+    }
+  },
+  watch: {
+    rankData: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.rankData)
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: #f2f7ff !important;
+}
+
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+
+.data_body div::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #fff;
+}
+
+/*定义滑块 内阴影+圆角*/
+.data_body div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px #AECCFE;
+    background-color: #AECCFE;
+}
+</style>

src/components/pages/sz/dataBoardCity/dataCenter/chartList/teaFre/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    monthArray: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        login: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+          minInterval: 1
+        },
+        grid: {
+          top: "30",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            // data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: [],
+            type: "line",
+            areaStyle: {},
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.login;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        login: [],
+      }
+      let _array = array
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.login.push(_array[i].login)
+      }
+
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.login;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.monthArray)
+
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardCity/dataCenter/chartList/toolUser/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="data_body">
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["Josn"],
+  data() {
+    return {
+      mindV: true,
+      chartObj: null,
+      timer: null,
+      range: "",
+      ooption: [],
+      option: {
+        // title: {
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
+        // },
+        tooltip: {
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'次';
+          }
+        },
+        visualMap: {
+          top: 'center',
+          left: 10,
+          right: 0,
+          min: 0,
+          max: 0,
+          type: 'continuous',
+          inRange: {
+            color: ['#65b9fc', '#477cd7']
+          },
+          precision: 0,
+          calculable: true,
+        },
+        calendar: {
+          top: 'center',
+          left: 80,
+          right: 20,
+          cellSize: ["auto", 15],
+          range: "",
+          itemStyle: {
+            borderWidth: 0.5,
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: true,
+          },
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
+      },
+    };
+  },
+  methods: {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.series.data = option;
+        this.option.calendar.range = year;
+        // this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        let array = []
+        for(var i = 0; i < Object.keys(this.Josn).length; i++){
+          array.push(this.Josn[Object.keys(this.Josn)[i]])
+        }
+        this.option.visualMap.max = array.sort(function (a, b) {
+          return b - a;
+        })[0];
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
+      }
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
+      if (!this.chartObj) {
+        this.setChart(this.ooption, t);
+      } else {
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        let array = []
+        for(var i = 0; i < Object.keys(this.Josn).length; i++){
+          array.push(this.Josn[Object.keys(this.Josn)[i]])
+        }
+        this.option.visualMap.max = array.sort(function (a, b) {
+          return b - a;
+        })[0];
+        this.chartObj.setOption(this.option, t);
+      }
+    },
+  },
+  watch: {
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
+      deep: true,
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  mounted() {
+    this.setData();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  /* background: #fff; */
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  /* background: #fff; */
+}
+</style>

src/components/pages/sz/dataBoardCity/dataCenter/index.vue

@@ -0,0 +1,1336 @@
+<template>
+  <div class="body1">
+    <!-- <loading :isLoading="isLoading"></loading> -->
+    <!-- 教师数据 -->
+    <div class="left">
+      <div class="top">
+				<div class="titleBox">
+          <div class="title">在线时长</div>
+        </div>
+				<div class="info_box">
+          <div class="info">
+						<span>{{ OnlineDuration[0] }}</span>
+            <span>累计时长</span>
+          </div>
+          <div class="info">
+						<span>{{ OnlineDuration[1] }}</span>
+            <span>人均使用时长</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<loginTime style="height: calc(100% - 100px);width: calc(100% - 100px);" :yearArray="yearArray"></loginTime>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">登录频次</div>
+        </div>
+				<div class="info_box">
+          <div class="info2">
+						<span>{{ LoginFrequency[0] }}</span>
+            <span>登录频次</span>
+          </div>
+          <div class="info2">
+						<span>{{ LoginFrequency[1] }}</span>
+            <span>教师登录频次</span>
+          </div>
+					<div class="info2">
+						<span>{{ LoginFrequency[2] }}</span>
+            <span>学生登录频次</span>
+          </div>
+					<div class="info2">
+						<span>{{ LoginFrequency[3] }}</span>
+            <span>人均登录频次</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<toolUser style="height: calc(100% - 50px);width: calc(100% - 50px)" :Josn="loginCountYearArray"/>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+				<div class="titleBox">
+          <div class="title">上课次数</div>
+        </div>
+				<div class="dataBox">
+         <courseNum style="height: calc(100% - 50px);width: calc(100% - 50px)" :weekCourse2="weekCourse2"/>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">学校排行榜</div>
+					<el-select v-model="selectArea2" @change="typeChangeArea2" class="selectBox">
+            <!-- <el-option label="全部" value=""></el-option> -->
+            <el-option label="南山区" :value="0"></el-option>
+          </el-select>
+        </div>
+				<div class="dataBox">
+         <schoolRank :rankData="schoolRankData"/>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top" style="border-radius: 5px">
+				<div class="titleBox">
+          <div class="title">基础概况</div>
+        </div>
+				<div class="info_box">
+          <div class="info3">
+						<span>{{ BasicOverview[0] }}</span>
+            <span>用户总数（个）</span>
+          </div>
+          <div class="info3">
+						<span>{{ BasicOverview[1] }}</span>
+            <span>新增用户（个）</span>
+          </div>
+					<div class="info3">
+						<span>{{ BasicOverview[2] }}</span>
+            <span>本月新增登录（次）</span>
+          </div>
+        </div>
+				<div class="dataBox">
+					<TeaFre style="height: calc(100% - 50px)" :monthArray="monthArray"/>
+        </div>
+      </div>
+      <div class="bottom">
+				<div class="titleBox">
+          <div class="title">课程排行榜</div>
+					<el-select v-model="selectArea2" @change="typeChangeArea2" class="selectBox">
+            <!-- <el-option label="全部" value=""></el-option> -->
+            <el-option label="南山区" :value="0"></el-option>
+          
+          </el-select>
+        </div>
+				<div class="dataBox">
+         <courseRank :rankData="courseRankData"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loginTime from './chartList/loginTime'
+import toolUser from './chartList/toolUser'
+import TeaFre from './chartList/teaFre'
+import schoolRank from './chartList/schoolRank'
+import courseRank from './chartList/courseRank'
+import courseNum from './chartList/courseNum'
+export default {
+  components: {
+		loginTime,
+		toolUser,
+		TeaFre,
+		schoolRank,
+		courseRank,
+		courseNum
+  //   TeaFre,
+  //   TeaAct,
+  //   TeaData,
+  //   FunPlot,
+  //   WorkNum,
+  //   WorkTime,
+  //   ToolUse,
+  
+  //   TeaActSecond,
+  //   CateRank,
+  //   loading
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+			selectArea:0,//学校排行切换区域下拉框
+			selectArea2:0,//课程排行切换区域下拉框
+			yearArray:"0",
+			OnlineDuration:['0','0'],
+			BasicOverview:['0','0','0'],
+			LoginFrequency:['0','0','0','0'],
+			loginCountYearArray:{
+				"2023-12-06":1,
+				"2023-12-07":1,
+				"2023-12-13":1,
+				"2023-12-18":1,
+				"2023-12-19":1,
+				"2023-12-22":1,
+				"2023-12-24":1,
+				"2023-12-25":1,
+				"2023-12-26":1,
+				"2024-01-02":2,
+				"2024-01-03":1,
+				"2024-01-04":1,
+				"2024-01-08":2,
+				"2024-01-09":1,
+				"2024-01-10":1,
+				"2024-01-11":1,
+				"2024-01-12":1,
+				"2024-01-19":1,
+				"2024-01-20":1,
+				"2024-01-22":2,
+				"2024-01-23":2,
+				"2024-01-24":2,
+				"2024-01-25":1,
+				"2024-01-30":1,
+				"2024-01-31":1,
+				"2024-02-01":2,
+				"2024-02-02":1,
+				"2024-02-05":2,
+				"2024-02-06":1,
+				"2024-02-07":1,
+				"2024-02-08":1,
+				"2024-02-19":1,
+				"2024-02-20":1,
+				"2024-02-21":1,
+				"2024-02-22":1,
+				"2024-02-23":2,
+				"2024-02-24":1,
+				"2024-02-25":1,
+				"2024-02-26":1,
+				"2024-02-27":1,
+				"2024-02-28":1,
+				"2024-03-04":1,
+				"2024-03-05":1,
+				"2024-03-07":1
+			},
+			monthArray:[{"Year":2023,"Month":6,"login":210},{"Year":2023,"Month":7,"login":350},{"Year":2023,"Month":8,"login":140},{"Month":9,"Year":2023,"login":80},{"Month":10,"Year":2023,"login":280}],
+			schoolRankData:[
+				{schoolName:"深圳市南山实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"海滨实验小学逾...",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+				{schoolName:"深圳市海滨实验小学",area:"南山区",teacherLogin:0,studentLogin:0,teaching:0,submitJob:0,score:0},
+			],
+			courseRankData:[
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+				{courseName:"深圳市人工智能课程1",compare:0,total:0},
+			],
+			weekCourse2:[
+				{
+					name:"三年级",
+					lastCourse:1.5,
+					toCourse:3.1
+				},
+				{
+					name:"四年级",
+					lastCourse:2.9,
+					toCourse:4
+				},
+				{
+					name:"五年级",
+					lastCourse:2,
+					toCourse:3.9
+				},
+				{
+					name:"六年级",
+					lastCourse:0.2,
+					toCourse:4
+				},
+				{
+					name:"七年级",
+					lastCourse:1.2,
+					toCourse:3
+				},
+				{
+					name:"八年级",
+					lastCourse:1.7,
+					toCourse:3.5
+				},
+				{
+					name:"数据",
+					lastCourse:3,
+					toCourse:2
+				},
+			],
+    //   skType: 0,
+    //   courseType: 0,
+    //   bType: 0,
+    //   sType: 0,
+    //   cType4: "grade",
+    //   cType: "1",
+    //   oType: false,
+    //   teacherNum: 0,
+    //   allLoginTeacher: 0,
+    //   teacherNumCountMonthArray: [],
+    //   teacherLoginCountMonthArray: [],
+    //   tedurArray: [],
+    //   allTime: 0,
+    //   workTime: [],
+    //   gradeTime: [],
+    //   subjectTime: [],
+    //   themeListTime: [],
+    //   loginCountYearArray: {},
+    //   courseArray: [],
+    //   _courseArray: [],
+    //   _course2: [],
+    //   courseNumberArray: [],
+    //   gradeArray: [],
+    //   subjectArray: [],
+    //   themeArray: [],
+    //   allArray: [],
+    //   workNumList: [],
+    //   allCourse: 0,
+    //   allProject: 0,
+    //   lightJson: {
+    //     teachers: 0,
+    //     createCourse: 0, //创建课程
+    //     gCourseTeachers: 0, //协同教研
+    //     useTemplate: 0, //使用模板
+    //     commentTeachers: 0, //互动交流
+    //     useTool: 0, //使用工具
+    //     useEvalution: 0, //实施评价
+    //     evaWorksCount: 0, //教学评一体化
+    //   },
+    //   lightJson1: {
+    //     teachers: 0,
+    //     createProject: 0, //创建项目
+    //     gProjectTeachers: 0, //师生协作
+    //     useTemplate: 0, //使用模板
+    //     commentTeachers: 0, //互动交流
+    //     useTool: 0, //使用工具
+    //   },
+    //   pusaDep: [
+    //     { value: 0, name: "登录" },
+    //     { value: 0, name: "创建" },
+    //     { value: 0, name: "授课" },
+    //     { value: 0, name: "评价" },
+    //   ],
+    //   pusaDep1: [
+    //     { value: 0, name: "登录" },
+    //     { value: 0, name: "创建" },
+    //     { value: 0, name: "师生协作" },
+    //     { value: 0, name: "使用工具" },
+    //   ],
+    //   rankData: [],
+    //   rankLoading: false,
+    //   cTypeRank: "",
+    //   classList: [],
+    };
+  },
+  mounted() {
+    // this.getData();
+  },
+  methods: {
+		typeChangeArea(){
+			console.log(this.selectArea)
+		},
+		typeChangeArea2(){
+			console.log(this.selectArea2)
+		}
+    // otherEchart() {
+    //   this.oType = !this.oType;
+    // },
+    // format(percentage) {
+    //   return percentage + "%";
+    // },
+    // typeChange() {
+    //   if (this.cType4 === "") {
+    //     this.courseNumberArray = this.allArray;
+    //   } else if (this.cType4 === "grade") {
+    //     this.courseNumberArray = this.gradeArray;
+    //   } else if (this.cType4 === "theme") {
+    //     this.courseNumberArray = this.themeArray;
+    //   } else if (this.cType4 === "subject") {
+    //     this.courseNumberArray = this.subjectArray;
+    //   }
+    //   this.$forceUpdate();
+    // },
+    // typeChange2() {
+    //   let _grade = JSON.parse(JSON.stringify(this._grade)); //年级
+    //   let _subject = JSON.parse(JSON.stringify(this._subject)); //学科
+    //   let _course = JSON.parse(JSON.stringify(this._courseArray));
+    //   let _course2 = JSON.parse(JSON.stringify(this._course2));
+    //   let _gradeCourse = 0; //各年级上传课程
+    //   let _subjectCourse = 0; //各学科上传课程
+    //   let _courseArray = [];
+    //   // _subject.push({ name: "其他" });
+
+    //   if (this.cType == "1") {
+    //     for (var i = 0; i < _grade.length; i++) {
+    //       _courseArray.push({
+    //         name: _grade[i].name,
+    //         id: _grade[i].id,
+    //         courseid: [],
+    //         subject: [],
+    //       });
+    //       for (var z = 0; z < _course.length; z++) {
+    //         if (_course[z].typeid && _course[z].typeid.indexOf(_grade[i].id) !== -1) {
+    //           _gradeCourse++;
+    //           if (
+    //             _courseArray[i].courseid.indexOf(_course[z].courseid) === -1
+    //           ) {
+    //             _courseArray[i].courseid.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       for (var j = 0; j < _subject.length; j++) {
+    //         _courseArray[i].subject.push({
+    //           name: _subject[j].name,
+    //           id: _subject[j].id,
+    //           course: 0,
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (
+    //             _course[z].typeid && _course[z].typeid.indexOf(_subject[j].id) !== -1 &&
+    //             _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1
+    //           ) {
+    //             _courseArray[i].subject[j].course++;
+    //           }
+    //         }
+    //       }
+    //       let sum = 0;
+    //       for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+    //         sum += _courseArray[i].subject[j].course;
+    //       }
+    //       // _courseArray[i].subject[_courseArray[i].subject.length - 1].course =
+    //       //   _courseArray[i].courseid.length - sum < 0
+    //       //     ? 0
+    //       //     : _courseArray[i].courseid.length - sum;
+    //     }
+    //   } else {
+    //     for (var i = 0; i < _grade.length; i++) {
+    //       _courseArray.push({
+    //         name: _grade[i].name,
+    //         id: _grade[i].id,
+    //         courseid: [],
+    //         subject: [],
+    //       });
+    //       for (var z = 0; z < _course2.length; z++) {
+    //         if (_course2[z].typeid && _course2[z].typeid.indexOf(_grade[i].id) !== -1) {
+    //           if (
+    //             _courseArray[i].courseid.indexOf(_course2[z].courseid) === -1
+    //           ) {
+    //             _courseArray[i].courseid.push(_course2[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       for (var j = 0; j < _subject.length; j++) {
+    //         _courseArray[i].subject.push({
+    //           name: _subject[j].name,
+    //           id: _subject[j].id,
+    //           course: 0,
+    //         });
+    //         for (var z = 0; z < _course2.length; z++) {
+    //           if (
+    //             _course2[z].typeid && _course2[z].typeid.indexOf(_subject[j].id) !== -1 &&
+    //             _courseArray[i].courseid.indexOf(_course2[z].courseid) !== -1
+    //           ) {
+    //             if (this.cType == "0") {
+    //               _courseArray[i].subject[j].course += _course2[z].text
+    //                 ? parseInt((parseInt(_course2[z].text) / 3600).toFixed(0))
+    //                 : 0;
+    //             } else if (this.cType == "2") {
+    //               if (_course2[z].course_teacher.split(",").length > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             } else if (this.cType == "3") {
+    //               if (_course2[z].worksCount > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             } else if (this.cType == "4") {
+    //               if (_course2[z].evaCount > 0) {
+    //                 _courseArray[i].subject[j].course++;
+    //               }
+    //             }
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    //   // for (var j = 0; j < _subject.length; j++) {
+    //   //   for (var z = 0; z < _course.length; z++) {
+    //   //     if (_course[z].typeid == _subject[j].id) {
+    //   //       _subjectCourse++;
+    //   //     }
+    //   //   }
+    //   // }
+    //   this.courseArray = _courseArray;
+    //   this.$forceUpdate();
+    // },
+    // getData() {
+    //   this.isLoading = true;
+    //   let params = [
+    //     {
+    //       oid: this.oid,
+    //       org: this.org,
+    //     },
+    //   ];
+    //   this.ajax
+    //     .post(this.$store.state.api + "selectDataBoardTeacherNew", params)
+    //     .then((res) => {
+    //       this.isLoading = false;
+    //       let _grade = res.data[0]; //年级
+    //       let _subject = res.data[1]; //学科
+    //       this._grade = JSON.parse(JSON.stringify(_grade));
+    //       this._subject = JSON.parse(JSON.stringify(_subject));
+    //       let _themeList = res.data[2]; //主题
+    //       this.teacherNum = res.data[3][0].count; //教师总数
+    //       let _teacherNumYear = res.data[4]; //半年内教师数量
+    //       let _teacherLoginYear = res.data[5]; //半年内登录教师
+    //       let _classList1 = res.data[21]; //班级
+    //       this.classList = _classList1.filter((el) => {
+    //         return el.count > 0;
+    //       });
+    //       // this.cTypeRank = _classList1[0].id
+    //       //将数据根据time里面的月份分成多个数组
+    //       let teacherNumCountMonthArray = [];
+    //       let teacherLoginCountMonthArray = [];
+    //       const date = new Date();
+    //       var Month = date.getMonth() + 1;
+    //       var Year = date.getFullYear();
+    //       for (var i = Month; i > Month - 6; i--) {
+    //         if (i <= 0) {
+    //           teacherNumCountMonthArray.push({
+    //             Year: Year - 1,
+    //             Month: 12 + i,
+    //             num: 0,
+    //           });
+    //           teacherLoginCountMonthArray.push({
+    //             Year: Year - 1,
+    //             Month: 12 + i,
+    //             login: 0,
+    //           });
+    //         } else {
+    //           teacherNumCountMonthArray.push({
+    //             Month: i,
+    //             Year: Year,
+    //             num: 0,
+    //           });
+    //           teacherLoginCountMonthArray.push({
+    //             Month: i,
+    //             Year: Year,
+    //             login: 0,
+    //           });
+    //         }
+    //       }
+
+    //       teacherNumCountMonthArray = teacherNumCountMonthArray.reverse();
+    //       teacherLoginCountMonthArray = teacherLoginCountMonthArray.reverse();
+    //       for (var i = 0; i < _teacherNumYear.length; i++) {
+    //         let _date = new Date(_teacherNumYear[i].time);
+    //         var _month = _date.getMonth() + 1;
+    //         var _year = _date.getFullYear();
+    //         for (var j = 0; j < teacherNumCountMonthArray.length; j++) {
+    //           if (
+    //             _month == teacherNumCountMonthArray[j].Month &&
+    //             _year == teacherNumCountMonthArray[j].Year
+    //           ) {
+    //             teacherNumCountMonthArray[j].num+=_teacherNumYear[i].usernum;
+    //             break;
+    //           }
+    //         }
+    //       }
+    //       for (var i = 0; i < _teacherLoginYear.length; i++) {
+    //         let _date = new Date(_teacherLoginYear[i].time);
+    //         var _month = _date.getMonth() + 1;
+    //         var _year = _date.getFullYear();
+    //         for (var j = 0; j < teacherLoginCountMonthArray.length; j++) {
+    //           if (
+    //             _month == teacherLoginCountMonthArray[j].Month &&
+    //             _year == teacherLoginCountMonthArray[j].Year
+    //           ) {
+    //             teacherLoginCountMonthArray[j].login+=_teacherLoginYear[i].usernum;
+    //             break;
+    //           }
+    //         }
+    //       }
+    //       var allLoginTeacher = 0;
+    //       for (var i = 0; i < teacherLoginCountMonthArray.length; i++) {
+    //         allLoginTeacher += teacherLoginCountMonthArray[i].login;
+    //       }
+
+    //       this.allLoginTeacher = allLoginTeacher;
+    //       this.teacherNumCountMonthArray = teacherNumCountMonthArray;
+    //       this.teacherLoginCountMonthArray = teacherLoginCountMonthArray;
+
+    //       let _classList = res.data[21]; //查询学校教研室
+    //       let _workTime = res.data[6]; //查询教研室在线时长
+    //       var mergedArray = [];
+
+    //       for (var i = 0; i < _classList.length; i++) {
+    //         mergedArray.push({
+    //           id: _classList[i].id,
+    //           name: _classList[i].name,
+    //           text: 0,
+    //         });
+    //         for (let j = 0; j < _workTime.length; j++) {
+    //           const _user = _workTime[j];
+    //           if (_classList[i].id == _user.id) {
+    //             mergedArray[i].text += Number(_user.time);
+    //           }
+    //         }
+    //         mergedArray[i].text = (mergedArray[i].text / 60 / 60).toFixed(0); //换算成小时
+    //       }
+    //       this.workTime = mergedArray;
+
+    //       var _allTime = 0;
+
+    //       for (var i = 0; i < mergedArray.length; i++) {
+    //         _allTime += Number(mergedArray[i].text);
+    //       }
+
+    //       // this.allTime = parseInt(res.data[7][0].time) / 60 / 60;
+    //       this.allTime = _allTime;
+
+    //       let allLoginCount = res.data[8]; //一年的登录频次
+    //       let loginCountYearArray = {};
+    //       let timeArray = [];
+    //       for(var i = 0;i<allLoginCount.length;i++){
+    //         timeArray.push({time:allLoginCount[i].time, num:allLoginCount[i].usernum});
+    //       }
+    //       timeArray.forEach((item) => {
+    //         loginCountYearArray[item.time] = loginCountYearArray[item.time] + item.num || item.num;
+    //       });
+    //       // for (var i = Month; i > Month - 12; i--) {
+    //       //   if (i <= 0) {
+    //       //     loginCountYearArray.push({
+    //       //       Year: Year - 1,
+    //       //       Month: 12 + i,
+    //       //       mon: 0,
+    //       //       tue: 0,
+    //       //       wed: 0,
+    //       //       thur: 0,
+    //       //       fri: 0,
+    //       //       sat: 0,
+    //       //       sun: 0,
+    //       //     });
+    //       //   } else {
+    //       //     loginCountYearArray.push({
+    //       //       Month: i,
+    //       //       Year: Year,
+    //       //       mon: 0,
+    //       //       tue: 0,
+    //       //       wed: 0,
+    //       //       thur: 0,
+    //       //       fri: 0,
+    //       //       sat: 0,
+    //       //       sun: 0,
+    //       //     });
+    //       //   }
+    //       // }
+    //       // loginCountYearArray = loginCountYearArray.reverse();
+
+    //       // for (var i = 0; i < allLoginCount.length; i++) {
+    //       //   let _date = new Date(allLoginCount[i].time);
+    //       //   var _month = _date.getMonth() + 1;
+    //       //   var _year = _date.getFullYear();
+    //       //   var _day = _date.getDay();
+    //       //   let dayArray = ["sun", "mon", "tue", "wed", "thur", "fri", "sat"];
+    //       //   for (var j = 0; j < loginCountYearArray.length; j++) {
+    //       //     if (
+    //       //       _month == loginCountYearArray[j].Month &&
+    //       //       _year == loginCountYearArray[j].Year
+    //       //     ) {
+    //       //       loginCountYearArray[j][dayArray[_day]]++;
+    //       //       break;
+    //       //     }
+    //       //   }
+    //       // }
+    //       this.loginCountYearArray = loginCountYearArray;
+
+    //       this.allLoginTime = res.data[9][0].count; //一年的登录频次
+
+    //       let _course = res.data[10]; //课程
+    //       this._courseArray = JSON.parse(JSON.stringify(_course));
+          
+    //       this._course2 = res.data[22]; //查询课程
+    //       this.typeChange2();
+
+    //       let _gradeArray = [];
+    //       let _subjectArray = [];
+    //       let _themeArray = [];
+
+    //       for (var i = 0; i < _grade.length; i++) {
+    //         _gradeArray.push({
+    //           name: _grade[i].name,
+    //           typeid: _grade[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_grade[i].id) != -1) {
+    //             _gradeArray[i].course++;
+    //             _gradeArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+
+    //       for (var i = 0; i < _subject.length; i++) {
+    //         _subjectArray.push({
+    //           name: _subject[i].name,
+    //           typeid: _subject[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_subject[i].id) != -1) {
+    //             _subjectArray[i].course++;
+    //             _subjectArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+
+    //       for (var i = 0; i < _themeList.length; i++) {
+    //         _themeArray.push({
+    //           name: _themeList[i].name,
+    //           typeid: _themeList[i].id,
+    //           course: 0,
+    //           array: [],
+    //         });
+    //         for (var z = 0; z < _course.length; z++) {
+    //           if (_course[z].typeid && _course[z].typeid.indexOf(_themeList[i].id) != -1) {
+    //             _themeArray[i].course++;
+    //             _themeArray[i].array.push(_course[z].courseid);
+    //           }
+    //         }
+    //       }
+    //       this.gradeArray = _gradeArray;
+    //       this.subjectArray = _subjectArray;
+    //       this.themeArray = _themeArray;
+    //       this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray];
+    //       this.typeChange();
+
+    //       let _teacherCourse = res.data[11]; //老师创建的课程
+    //       let cNum = 0
+    //       let cNum3 = 0
+    //       for(var i = 1; i < _teacherCourse.length; i++){
+    //         cNum += _teacherCourse[i].coursecount;
+    //         if(_teacherCourse[i].coursecount > 0){
+    //           cNum3++
+    //         }
+    //       }
+    //       this.allCourse = cNum; //得按上面计算
+    //       let _teacherProject = res.data[12]; //老师创建的项目
+    //       let cNum2 = 0
+    //       let cNum4 = 0
+    //       for(var i = 1; i < _teacherProject.length; i++){
+    //         cNum2 += _teacherProject[i].count;
+    //         if(_teacherProject[i].count > 0){
+    //           cNum4++
+    //         }
+    //       }
+    //       this.allProject = cNum2;//得按上面计算
+
+    //       var _workNumList = [];
+    //       // 创建一个对象来存储结果
+    //       var result = {};
+
+    //       // 合并数据 _teacherCourse 和 _teacherProject 到结果对象
+    //       _teacherCourse.forEach((item) => {
+    //         var userid = item.userid;
+    //         var username = item.username;
+    //         var count = item.coursecount;
+    //         if (!result[username]) {
+    //           result[username] = {
+    //             username: username,
+    //             userid: userid,
+    //             course: 0,
+    //             project: 0,
+    //           };
+    //         }
+    //         result[username].course = count;
+    //       });
+
+    //       _teacherProject.forEach((item) => {
+    //         var userid = item.userid;
+    //         var username = item.username;
+    //         var count = item.count;
+    //         if (!result[username]) {
+    //           result[username] = {
+    //             username: username,
+    //             userid: userid,
+    //             course: 0,
+    //             project: 0,
+    //           };
+    //         }
+    //         result[username].project = count;
+    //       });
+
+    //       for (var username in result) {
+    //         var entry = result[username];
+    //         _workNumList.push([
+    //           entry.course,
+    //           entry.project,
+    //           entry.username,
+    //           entry.userid,
+    //         ]);
+    //       }
+
+    //       this.workNumList = _workNumList;
+
+    //       this.lightJson.teachers = res.data[3][0].count; //教师总数
+    //       this.lightJson1.teachers = res.data[3][0].count; //教师总数
+    //       this.lightJson.createCourse = cNum3; //创建了课程的老师 --计算
+    //       this.lightJson.gCourseTeachers = res.data[13][0].count; //参与协同课程的老师
+    //       this.lightJson.commentTeachers = res.data[14][0].count; //参与互动交流的老师
+    //       this.lightJson.useTool = res.data[15][0].count; //使用工具
+    //       this.lightJson.useEvalution = res.data[16].length; //实施评价
+    //       this.lightJson.evaWorksCount = res.data[17][0].count; //教学评一体化
+
+    //       let _isLoginTeacher = res.data[18][0].usercount; //登录过的教师
+    //       let _isCourseTeacher = res.data[15][0].count; //授课了的教师
+
+    //       for (var i = 0; i < this.pusaDep.length; i++) {
+    //         if (this.pusaDep[i].name == "登录") {
+    //           this.pusaDep[i].value = (
+    //             (_isLoginTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "创建") {
+    //           this.pusaDep[i].value = (
+    //             (this.lightJson.createCourse / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "授课") {
+    //           this.pusaDep[i].value = (
+    //             (_isCourseTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep[i].name == "评价") {
+    //           this.pusaDep[i].value = (
+    //             (this.lightJson.useEvalution / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         }
+    //       }
+
+    //       this.lightJson1.createProject = cNum4; //创建项目 
+
+    //       let _teacherAndStudent = res.data[19]; //师生协作
+    //       this.lightJson1.useTool = res.data[20][0].count; //项目使用工具
+    //       let _tsCount = 0;
+
+    //       for (var i = 0; i < _teacherAndStudent.length; i++) {
+    //         if (_teacherAndStudent[i].type2) {
+    //           if (
+    //             (_teacherAndStudent[i].type =
+    //               1 && _teacherAndStudent[i].type2.indexOf(2) != -1) ||
+    //             (_teacherAndStudent[i].type =
+    //               2 && _teacherAndStudent[i].type2.indexOf(1) != -1)
+    //           ) {
+    //             _tsCount++;
+    //           }
+    //         }
+    //       }
+
+    //       this.lightJson1.gProjectTeachers = _tsCount;
+
+    //       for (var i = 0; i < this.pusaDep1.length; i++) {
+    //         if (this.pusaDep1[i].name == "登录") {
+    //           this.pusaDep1[i].value = (
+    //             (_isLoginTeacher / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "创建") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.createProject / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "师生协作") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.gProjectTeachers / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         } else if (this.pusaDep1[i].name == "使用工具") {
+    //           this.pusaDep1[i].value = (
+    //             (this.lightJson1.useTool / this.lightJson.teachers) *
+    //             100
+    //           ).toFixed(0);
+    //         }
+    //       }
+
+    //       this.$forceUpdate();
+    //     })
+    //     .catch((err) => {
+    //       this.isLoading = false;
+    //       this.$message.error(
+    //         "因加载数据量过大，服务器统计异常，请联系管理员。"
+    //       );
+    //       console.error(err);
+    //     });
+    // },
+    // checkRank() {
+    //       this.courseType = 1;
+    //   this.rankLoading = true;
+    //   let params = [
+    //     {
+    //       oid: this.oid,
+    //       org: this.org,
+    //       cid: this.cTypeRank,
+    //     },
+    //   ];
+    //   this.ajax
+    //     .post(this.$store.state.api + "selectDataboardTeacherRank", params)
+    //     .then((res) => {
+    //       this.rankLoading = false;
+    //       let rankData = [];
+    //       let teachers = res.data[0]; //教师总数
+    //       let loginTimeAll = res.data[1]; //教师总登录时长
+    //       let loginCountAll = res.data[2]; //教师总登录频次
+    //       let courses = res.data[3]; //教师创建及协同课程总数
+    //       let projects = res.data[4]; //教师创建及协同项目总数
+    //       let courseWorks = res.data[5]; //教师创建及协同有作业的课程总数
+    //       let evaWorks = res.data[6]; //教师创建及协同有作业有评价的课程总数
+
+    //       for (let i = 0; i < teachers.length; i++) {
+    //         rankData.push({
+    //           name: teachers[i].name,
+    //           userid: teachers[i].userid,
+    //           classid: teachers[i].cclassid,
+    //           loginTime: 0,
+    //           loginCount: 0,
+    //           courses: 0,
+    //           projects: 0,
+    //           courseWorks: 0,
+    //           worksRate: 0,
+    //           score: 0,
+    //         });
+    //       }
+
+    //       for (var j = 0; j < rankData.length; j++) {
+    //         for (var i = 0; i < loginTimeAll.length; i++) {
+    //           if (loginTimeAll[i].userid == rankData[j].userid) {
+    //             rankData[j].loginTime += parseInt(
+    //               (loginTimeAll[i].text / 60 / 60).toFixed(0)
+    //             );
+    //           }
+    //         }
+
+    //         for (var i = 0; i < loginCountAll.length; i++) {
+    //           if (loginCountAll[i].userid == rankData[j].userid) {
+    //             rankData[j].loginCount++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < courses.length; i++) {
+    //           if (courses[i].userid == rankData[j].userid) {
+    //             rankData[j].courses++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < projects.length; i++) {
+    //           if (projects[i].userid == rankData[j].userid) {
+    //             rankData[j].projects++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < courseWorks.length; i++) {
+    //           if (courseWorks[i].userid == rankData[j].userid) {
+    //             rankData[j].courseWorks++;
+    //           }
+    //         }
+
+    //         for (var i = 0; i < evaWorks.length; i++) {
+    //           if (evaWorks[i].userid == rankData[j].userid) {
+    //             rankData[j].worksRate++;
+    //           }
+    //         }
+
+    //         rankData[j].score = (
+    //           rankData[j].loginTime * 0.1 +
+    //           rankData[j].loginCount * 0.1 +
+    //           rankData[j].courses * 0.1 +
+    //           rankData[j].projects * 0.1 +
+    //           rankData[j].courseWorks * 0.3 +
+    //           rankData[j].worksRate * 0.3
+    //         ).toFixed(0);
+    //       }
+
+    //       this.rankData = rankData;
+    //       this.$forceUpdate();
+    //     })
+    //     .catch((err) => {
+    //       this.rankLoading = false;
+    //       this.$message.error(
+    //         "因加载数据量过大，服务器统计异常，请联系管理员。"
+    //       );
+    //       console.error(err);
+    //     });
+    // },
+  },
+};
+</script>
+
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 20px);
+  height: 100%;
+  margin: 0 10px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 5 * 2.7 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.3 - 5px);
+  /* background: #fff; */
+  border-radius: 5px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
+  border: 2px solid #fff;
+  box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+}
+
+.titleBox::after {
+  content: '';
+  position: absolute;
+  height: 2px;
+  width: calc(100% - 30px);
+  bottom: 0;
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
+}
+
+.title {
+  color: #060e17;
+  margin-right: 25px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+	position: relative;
+}
+
+.title::before{
+  content: '';
+  background-image: url('../../../../../assets/icon/test/data_title_icon.png');
+  background-size: 100% 100%;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dataBox {
+	flex: 1;
+  /* height: calc(100% - 40px); */
+  width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/* .middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+} */
+
+
+
+/* .teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+} */
+
+/* .teaMiddle {
+  width: calc(100% / 3 - 10px);
+} */
+
+/* .timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
+} */
+
+/* .timeDiv > div {
+  margin-right: 10px;
+  cursor: pointer;
+} */
+
+/* .cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+} */
+
+/* .tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+} */
+
+/* .tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+} */
+
+/* .teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+} */
+
+/* .teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+} */
+
+/* .halfBox {
+  width: 50%;
+} */
+
+/* .isClick {
+  box-sizing: border-box;
+} */
+
+/* .noClick{
+  font-weight: 500;
+  opacity: .6;
+} */
+
+/* .otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+} */
+
+/* .otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+} */
+
+/* .otherImg > img {
+  width: 100%;
+  height: 100%;
+} */
+
+/* .allBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+} */
+
+/* .allBox_left {
+  width: 30%;
+  height: 100%;
+} */
+
+/* .allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+} */
+
+/* .depth {
+  width: calc(100% / 4 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+} */
+
+/* .depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+} */
+
+/* .depth > div:nth-child(1) {
+} */
+
+.selectBox {
+  width: 100px;
+	position: absolute;
+	right: 20px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #3681FC;
+}
+
+.selectBox >>> .el-input__icon {
+  line-height: 30px;
+}
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-around;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: center;
+	align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+
+.info_box>.info2 {
+  width: calc(100% / 4 - 10px);
+}
+
+.info_box>.info3 {
+  width: calc(100% / 3 );
+  margin-bottom: 5px;
+}
+
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
+	font-size: 24px;
+  font-weight: 700;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 12px;
+  color: #565e6a;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+</style>

src/components/pages/sz/dataBoardCity/index.vue

@@ -1,15 +1,118 @@
 <template>
-  <div>
-    市
+    <div class="body">
+    <div class="db_bg">
+      <div class="db_header">
+				<div class="db_header_title"></div>
+      </div>
+      <div class="db_body">
+				<dataCenter :oid="oid" :org="org"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import dataCenter from './dataCenter'
 export default {
+	components:{
+		dataCenter
+	},
+  data() {
+    return {
+      type: 1,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      scourseLength: 0,
+    };
+  },
+  methods: {
+    setType(type) {
+      this.type = type;
+    },
+    getData() {
+			return console.log('获取数据')
+      // this.isLoading = true;
+      // let params = [
+      //   {
+      //     oid: this.oid,
+      //     org: this.org,
+      //   },
+      // ];
+      // this.ajax
+      //   .post(this.$store.state.api + "getCourseLength", params)
+      //   .then((res) => {
+      //     this.isLoading = false;
 
+      //     this.scourseLength = res.data[0][0].count;
+      //     this.$forceUpdate();
+      //   })
+      //   .catch((err) => {
+      //     this.isLoading = false;
+      //     console.error(err);
+      //   });
+    },
+  },
+  mounted() {
+    // this.getData();
+  },
 }
 </script>
 
-<style>
+<style scoped>
+.body {
+  height: 100%;
+  width: 100%;
+  min-width: 1550px;
+  min-height: 750px;
+  background: #e7f3fe;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.db_bg {
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  /* padding: 10px; */
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 2px solid #3681FC3D;
+  box-shadow: 20px 20px 80px 0px #3681FC3D inset;
+}
+
+.db_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  /* background: #fff; */
+  align-items: center;
+}
 
+.db_header:after {
+  content: "";
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    bottom: 0.5px;
+    left: 50%;
+    z-index: 1;
+    background: linear-gradient(90deg, #9ac1fd 0%, rgba(134, 179, 253, 0) 91.13%);
+}
+
+.db_header_title {
+  /* background-image: url("../../../assets/icon/test/data_title.png"); */
+  background-image: url("../../../../assets/icon/test/data_title2.png");
+  width: 290px;
+  height: 100%;
+  background-size: 100% 100%;
+}
+
+.db_body {
+  height: calc(100% - 50px);
+  width: 100%;
+  overflow: auto;
+  /* background: rgb(231, 242, 252); */
+}
 </style>