<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">
        <span>平台数据检测</span>
      </div>
      <div id="statistics">
        <div class="count">
          <!-- <h4><div></div>目前平台学生(个)</h4> -->
          <div>
            <span>{{statics.sCount}}</span>
            <img src="../../assets/dataimage/greenUp.png" />
          </div>
        </div>
        <div class="count">
          <!-- <h4><div></div>劳动作业数量</h4> -->
          <div>
            <span>{{statics.wCount}}</span>
            <img src="../../assets/dataimage/redUp.png" />
          </div>
        </div>
        <div class="count">
          <!-- <h4><div></div>劳动课程数量</h4> -->
          <div>
            <span>{{statics.cCount}}</span>
            <img src="../../assets/dataimage/blueUp.png" />
          </div>
        </div>
      </div>
      <div id="graphicalArea">
        <div class="graphical">
          <span>课程劳动教育</span>
          <div>
            <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
            <div
              v-if="loading"
              id="course_canvas"
              class="echart"
              style="width: 100%; height: 100%;margin:0 0 0 1rem"
            ></div>
          </div>
        </div>
        <div class="graphical">
          <span>五育融合</span>
          <div>
            <!-- <img src="../../assets/dataimage/2.png" style="width:90%" /> -->
            <div
              id="five_canvas"
              class="echart"
              style="width: 100%; height: 100%;margin:0 0 0 1rem"
            ></div>
          </div>
        </div>
        <div class="graphical">
          <span>得奖占比</span>
          <div>
            <div
              id="title_canvas"
              class="echart"
              style="width: 100%; height: 100%;margin:0 0 0 1rem"
            ></div>
          </div>
        </div>
        <div class="graphical">
          <span>家校社</span>
          <div>
            <!-- <img src="../../assets/dataimage/4.png" style="width:90%" /> -->
            <div id="hsc_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
          </div>
        </div>
        <div class="graphical">
          <span>义工社团情况</span>
          <div>
            <!-- <img src="../../assets/dataimage/5.png" style="width:90%" /> -->
            <div
              id="home_canvas"
              class="echart"
              style="width: 100%; height: 100%;margin:0 0 0 1rem"
            ></div>
          </div>
        </div>
        <div class="graphical">
          <span>劳动素养</span>
          <div>
            <!-- <img src="../../assets/dataimage/6(1).png" width="200rem" />
            <img src="../../assets/dataimage/6.png" />-->
            <div id="lao_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        :stripe="true"
        :header-cell-style="{ background: '#3867d6',color:'#ffffff',textAlign:'center'}"
        style="width: 91.5%;margin-top:20px;"
        height="500px"
      >
        <el-table-column prop="name" label="排名" align="center" min-width="100">
          <template slot-scope="scope">
            <div style="display:flex;align-items:center;justify-content: center;">
              {{scope.$index+1}}
              <img src="../../assets/dataimage/flag.png" />
            </div>
          </template>
          <!-- <img src="../../assets/dataimage/flag.png"> -->
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" min-width="100"></el-table-column>
        <el-table-column prop="classname" label="班级" align="center" min-width="100">
          <template slot-scope="scope">
            <div>{{scope.row.classname ? scope.row.classname : '暂无班级'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="zscore" label="积分" align="center" min-width="100"></el-table-column>
        <el-table-column prop="school" align="center" label="学校" min-width="100"></el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer:null,
      chartObj1: null,
      chartObj2: null,
      chartObj3: null,
      chartObj4: null,
      chartObj5: null,
      chartObj6: null,
      loading: false,
      tableData: [],
      oid: "1123",
      statics: {
        sCount: 0,
        wCount: 0,
        cCount: 0,
      },
      courseJson: {
        data: [],
        sData: [],
      },
      CourseOption: {
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (val) {
              var strs = val.split(""); //字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                //遍历字符串数组
                str += s;
                if (!(i % 2)) str += "\n";
              }
              return str;
            },
          },
        },
        tooltip: {
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: {
            // 文字样式
            align: "left",
          },
          left: "right",
          top: "bottom",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            itemStyle: {
              color: "rgb(84,111,198)",
            },
          },
        ],
      },
      titleJson: [],
      titleOption: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "5%",
          icon: "circle",
          itemGap: 18,
          //   selectedMode: false,
        },
        series: [
          {
            name: "得奖占比",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
      studentJson: [],
      homeJson: {
        data: [],
        sData: [],
      },
      homeOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "shadow",
          },
        },
        grid: {
          left: "1%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 1],
          minInterval: 1,
          position: "top",
          axisLine: {
            onZero: false,
          },
        },
        yAxis: {
          type: "category",
          data: [],
          inverse: true,
          axisLabel: {
            inside: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        dataZoom: [
          {
            type: "inside",
            yAxisIndex: 0,
            startValue: 0,
            endValue: 5,
            zoomLock: true,
          },
        ],
        series: [
          {
            type: "bar",
            data: [],
            showBackground: true,
            barWidth: "65%",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 5000, 5000, 0],
                color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(71,171,98)",
                  },
                  {
                    offset: 1,
                    color: "rgb(185,244,200)",
                  },
                ]),
              },
            },
            label: {
              show: true,
              position: "right",
              color: "#2e2e2e",
            },
          },
        ],
      },
      fiveJson: {
        data: [],
        cData: [],
        wData: [],
      },
      fiveOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: [],
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            formatter: function (val) {
              var strs = val.split(""); //字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                //遍历字符串数组
                str += s;
                if (!(i % 2)) str += "\n";
              }
              return str;
            },
          },
        },
        yAxis: [
          {
            boundaryGap: [0, 0.5],
            minInterval: 1,
            type: "value",
          },
        ],
        series: [
          {
            name: "课程数量",
            type: "line",
            data: [],
          },
          {
            name: "作业数量",
            type: "line",
            data: [],
          },
        ],
      },
      hscJson: {
        data: ["家", "校", "社"],
        cData: [0, 0, 0],
      },
      hscOption: {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["家", "校", "社"],
        },
        grid: {
          left: "1%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          boundaryGap: [0, 0.5],
          minInterval: 1,
          type: "value",
        },
        series: [
          {
            name: "课程数量",
            data: [],
            type: "line",
            lineStyle: {
              color: "rgb(56 174 0)",
            },
            itemStyle: {
              color: "rgb(56 174 0)",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(56 174 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "white", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      },
      laoJson: [],
      laoOption: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "5%",
          icon: "circle",
          itemGap: 18,
          //   selectedMode: false,
        },
        series: [
          {
            name: "课程占比",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    a(a) {
      console.log(a);
    },

    init() {
      this.courseJson = {
        data: [],
        sData: [],
      };
      this.titleJson = [];
      this.studentJson = [];
      this.homeJson = {
        data: [],
        sData: [],
      };
      this.fiveJson = {
        data: [],
        cData: [],
        wData: [],
      };
      this.hscJson = {
        data: ["家", "校", "社"],
        cData: [0, 0, 0],
      };
      this.laoJson = [];
    },
    getDataStatic2() {
      let params = { oid: this.oid };
      this.ajax
        .get(this.$store.state.api + "getDataAdmin", params)
        .then((res) => {
          this.statics.sCount = res.data[0][0].sCount; //学校人数
          this.statics.wCount = res.data[1][0].wCount; //作业总数
          this.statics.cCount = res.data[2][0].cCount; //课程总数
          res.data[3].filter((item, index) => {
            //劳动课程数量
            this.courseJson.data.push(item.name);
            this.courseJson.sData.push(item.number);
          });
          res.data[4].filter((item, index) => {
            //劳动课程数量
            this.titleJson.push({
              value: item.tCount,
              name:
                item.title == "1"
                  ? "星级义工"
                  : item.title == "3"
                  ? "劳动教育小讲师"
                  : "少年科学院小院士",
            });
          });
          this.tableData = res.data[5]; //学生积分排行榜
          res.data[6].filter((item, index) => {
            //义工社团情况
            this.homeJson.data.push(item.workName);
            this.homeJson.sData.push(item.hCount);
          });

          res.data[7].filter((item, index) => {
            //五育融合
            this.fiveJson.data.push(item.name);
            this.fiveJson.cData.push(item.cCount);
            this.fiveJson.wData.push(item.wCount);

            //劳动素养
            this.laoJson.push({
              value: item.cCount,
              name: item.name,
            });
          });

          res.data[8].filter((item, index) => {
            //家校社
            if (item.type == "0") {
              this.hscJson.cData[0] = item.tCount;
            } else if (item.type == "1") {
              this.hscJson.cData[1] = item.tCount;
            } else if (item.type == "2") {
              this.hscJson.cData[2] = item.tCount;
            }
          });
          this.setChart2();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getDataStatic() {
      this.loading = false;
      let params = { oid: this.oid };
      this.ajax
        .get(this.$store.state.api + "getDataAdmin", params)
        .then((res) => {
          this.loading = true;

          this.statics.sCount = res.data[0][0].sCount; //学校人数
          this.statics.wCount = res.data[1][0].wCount; //作业总数
          this.statics.cCount = res.data[2][0].cCount; //课程总数
          res.data[3].filter((item, index) => {
            //劳动课程数量
            this.courseJson.data.push(item.name);
            this.courseJson.sData.push(item.number);
          });
          res.data[4].filter((item, index) => {
            //劳动课程数量
            this.titleJson.push({
              value: item.tCount,
              name:
                item.title == "1"
                  ? "星级义工"
                  : item.title == "3"
                  ? "劳动教育小讲师"
                  : "少年科学院小院士",
            });
          });
          this.tableData = res.data[5]; //学生积分排行榜
          res.data[6].filter((item, index) => {
            //义工社团情况
            this.homeJson.data.push(item.workName);
            this.homeJson.sData.push(item.hCount);
          });

          res.data[7].filter((item, index) => {
            //五育融合
            this.fiveJson.data.push(item.name);
            this.fiveJson.cData.push(item.cCount);
            this.fiveJson.wData.push(item.wCount);

            //劳动素养
            this.laoJson.push({
              value: item.cCount,
              name: item.name,
            });
          });

          res.data[8].filter((item, index) => {
            //家校社
            if (item.type == "0") {
              this.hscJson.cData[0] = item.tCount;
            } else if (item.type == "1") {
              this.hscJson.cData[1] = item.tCount;
            } else if (item.type == "2") {
              this.hscJson.cData[2] = item.tCount;
            }
          });
          this.setChart();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj1 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#course_canvas")
        );
        this.CourseOption.xAxis.data = this.courseJson.data;
        this.CourseOption.series[0].data = this.courseJson.sData;

        const chartObj2 = this.$echarts.init(
          //得奖占比
          this.$el.querySelector("#title_canvas")
        );
        this.titleOption.series[0].data = this.titleJson;

        const chartObj3 = this.$echarts.init(
          //义工社团情况
          this.$el.querySelector("#home_canvas")
        );
        this.homeOption.yAxis.data = this.homeJson.data;
        this.homeOption.series[0].data = this.homeJson.sData;

        const chartObj4 = this.$echarts.init(
          //五育融合
          this.$el.querySelector("#five_canvas")
        );
        this.fiveOption.xAxis.data = this.fiveJson.data;
        this.fiveOption.series[0].data = this.fiveJson.cData;
        this.fiveOption.series[1].data = this.fiveJson.wData;

        const chartObj5 = this.$echarts.init(
          //家校社
          this.$el.querySelector("#hsc_canvas")
        );
        this.hscOption.series[0].data = this.hscJson.cData;

        const chartObj6 = this.$echarts.init(
          //得奖占比
          this.$el.querySelector("#lao_canvas")
        );
        this.laoOption.series[0].data = this.laoJson;

        // 初始化雷达图
        this.chartObj1 = chartObj1;
        this.chartObj1.setOption(this.CourseOption);
        this.chartObj2 = chartObj2;
        this.chartObj2.setOption(this.titleOption);
        this.chartObj3 = chartObj3;
        this.chartObj3.setOption(this.homeOption);
        this.chartObj4 = chartObj4;
        this.chartObj4.setOption(this.fiveOption);
        this.chartObj5 = chartObj5;
        this.chartObj5.setOption(this.hscOption);
        this.chartObj6 = chartObj6;
        this.chartObj6.setOption(this.laoOption);
        console.log(this.chartObj1);
      });
    },
    setChart2() {
      this.CourseOption.xAxis.data = this.courseJson.data;
      this.CourseOption.series[0].data = this.courseJson.sData;
      this.titleOption.series[0].data = this.titleJson;
      this.homeOption.yAxis.data = this.homeJson.data;
      this.homeOption.series[0].data = this.homeJson.sData;
      this.fiveOption.xAxis.data = this.fiveJson.data;
      this.fiveOption.series[0].data = this.fiveJson.cData;
      this.fiveOption.series[1].data = this.fiveJson.wData;
      this.hscOption.series[0].data = this.hscJson.cData;
      this.laoOption.series[0].data = this.laoJson;

      this.chartObj1.setOption(this.CourseOption);
      this.chartObj2.setOption(this.titleOption);
      this.chartObj3.setOption(this.homeOption);
      this.chartObj4.setOption(this.fiveOption);
      this.chartObj5.setOption(this.hscOption);
      this.chartObj6.setOption(this.laoOption);
      // console.log(this.chartObj1);
    },
  },
  destroyed() {
    this.timer = null
    clearInterval(this.timer)
  },
  created() {
    this.getDataStatic();
    this.timer = setInterval(() => {
      this.init();
      this.getDataStatic2();
    }, 5000);
    var _this = this;
    window.onresize = function () {
      //   this.$echarts.resize();
      _this.chartObj1.resize();
      _this.chartObj2.resize();
      _this.chartObj3.resize();
      _this.chartObj4.resize();
      _this.chartObj5.resize();
      _this.chartObj6.resize();
    };
  },
};
</script>

<style scoped>
#statistics {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}
.count {
  position: relative;
  height: 100%;
  width: 400px;
  border-radius: 15px;
}
.count:nth-child(1) {
  background-image: url("../../assets/dataimage/studentMessage.png");
}
.count:nth-child(2) {
  background-image: url("../../assets/dataimage/labourMessage.png");
}
.count:nth-child(3) {
  background-image: url("../../assets/dataimage/curriculumMessage.png");
}
.count:nth-child(n + 2) {
  margin-left: 25px;
}
.count > h4 > div {
  float: left;
  width: 4px;
  height: 20px;
  margin-right: 8px;
  background: white;
}
.count > h4 {
  top: 20px;
  left: 40px;
  position: absolute;
  color: white;
  font-weight: 300;
  font-size: 0.89em;
}
.count > div {
  position: absolute;
  top: 45px;
  left: 25px;
}
.count > div > span {
  color: white;
  font-size: 4em;
  margin-right: 5px;
}
.count > div > img {
  position: relative;
  bottom: -5px;
}
#graphicalArea {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.graphical {
  position: relative;
  box-sizing: border-box;
  width: 45%;
  height: 450px;
  margin-top: 20px;
  /* border-radius: 10px; */
  background: #f1f2f6;
}
.graphical:nth-child(2n) {
  margin-left: 20px;
}
.graphical > span {
  position: absolute;
  font-size: 1.1em;
  font-weight: 500;
  top: 15px;
  left: 10px;
  color: #636e72;
}
.graphical > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  overflow-y: hidden;
}
</style>
