WanZai_School/src/views/home/home.vue

<template>
  <div class="content-box">
    <div class="middle">
      <div class="cartogram">
        <div class="apply">
          <div class="addApply">
            <span class="title">应用入口</span>
            <img src="@/assets/items/addApply.png" alt="" />
          </div>
        </div>
      </div>
      <div class="cartogram">
        <!-- 用户类别占比 -->
        <div class="annulus" ref="annulus">
          <div class="title">用户类别占比</div>
          <div id="annulus"></div>
          <div class="headcount">
            <div class="num">
              <span>总人数</span>
              <span>{{ personNum }}</span>
            </div>
          </div>
        </div>
        <!-- 能耗趋势图 -->
        <div class="annulus">
          <div class="title">能耗趋势图</div>
          <div id="broken"></div>
        </div>
        <!-- 表格3  视频监控管理-->
        <div class="annulus">
          <div class="title">视频监控管理</div>
          <div class="video">
            <ul>
              <li>
                <span>100</span>
                <span>摄像头总数</span>
              </li>
              <li>
                <span>16</span>
                <span>水表总数</span>
              </li>
              <li>
                <span>100</span>
                <span>电表总数</span>
              </li>
            </ul>
            <ul>
              <li>
                <span>100</span>
                <span>电子班牌总数</span>
              </li>
              <li>
                <span>100</span>
                <span>一体机总数</span>
              </li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cartogram">
        <!--4 待办事项 -->
        <div class="annulus">
          <div class="title">
            <span>待办事项</span>
            <span>20/30</span>
          </div>
          <div class="backlog">
            <ul>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
              <li>
                <span>上传人脸采集</span>
                <span>5/7</span>
              </li>
            </ul>
          </div>
        </div>
        <!--5 门禁管理 -->
        <div class="annulus">
          <div class="title">门禁管理</div>
          <div id="doorForbid"></div>
        </div>
        <!-- 6  行为统计-->
        <div class="annulus">
          <div class="title">行为统计</div>
          <div id="behavior6"></div>
        </div>
      </div>
      <div class="cartogram">
        <!--7 班级考勤 -->
        <div class="annulus" ref="annulus">
          <div class="title">班级考勤</div>
          <div id="class"></div>
        </div>
        <!--8 最受欢迎老师TOP6 -->
        <div class="annulus">
          <div class="title">最受欢迎老师TOP6</div>
          <div class="teacher">
            <ul>
              <li v-for="(i, index) in greetTeaData">
                <span>{{ index + 1 }}</span>
                <span>{{ i.name }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!--9 资源大数据-->
        <div class="annulus">
          <div class="title">资源大数据</div>
          <!-- <div class="table">
            <el-table
              :data="tableData3.list"
              height="200"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                textAlign: 'center',
              }"
            >
              <el-table-column type="index" align="center" label="序号" />
              <el-table-column prop="schoolName" align="center" label="校区" />
              <el-table-column
                prop="ordersTotal"
                align="center"
                label="工单总数"
              />
              <el-table-column
                prop="ordersCompensation"
                align="center"
                label="有偿"
              />
              <el-table-column
                prop="ordersGratis"
                align="center"
                label="无偿"
              />
              <el-table-column
                prop="totalPrice"
                align="center"
                label="耗材总费用"
              />
            </el-table>
          </div> -->
          <div id="resource"></div>
        </div>
      </div>
    </div>
    <el-dialog
      class="reply"
      v-model="nameVisible6"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="师傅详情"
      align-center
      width="820"
      :before-close="cancelName6"
    >
      <div class="reply">
        <div class="content">
          <table border>
            <tr>
              <td>姓名</td>
              <td>工单总数</td>
              <td>好评数</td>
              <td>超时率</td>
              <td>平时响应时长（分）</td>
              <td>平时维修时长（分）</td>
              <td>耗材总费用（元）</td>
            </tr>
            <tr>
              <td>{{ nameList6.name }}</td>
              <td>{{ nameList6.workOrderTotal }}</td>
              <td>{{ nameList6.degreePraise }}</td>
              <td>{{ nameList6.timeOut }}</td>
              <td>{{ nameList6.answer }}</td>
              <td>{{ nameList6.maintain }}</td>
              <td>{{ nameList6.totalPrice }}</td>
            </tr>
          </table>
          <!-- <div class="nameInfo">姓名: <span>{{ nameList.name }}</span></div>
          <div class="nameInfo">校区: <span>{{ nameList.schoolName }}</span></div>
          <div class="nameInfo">工单总数: <span> {{ nameList.workOrderTotal }}</span></div>
          <div class="nameInfo">好评率: <span>{{ nameList.degreePraise }}</span></div> -->
        </div>
        <!-- <div class="options">
          <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
            确定
          </el-button>
          <el-button @click="cancelName">取消</el-button>
        </div> -->
      </div>
    </el-dialog>
    <el-dialog
      class="reply"
      v-model="nameVisible8"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="师傅详情"
      align-center
      width="820"
      :before-close="cancelName8"
    >
      <div class="reply">
        <div class="content">
          <table border>
            <tr>
              <td>姓名</td>
              <td>工单总数</td>
              <td>好评数</td>
              <td>超时率</td>
              <td>平时响应时长（分）</td>
              <td>平时维修时长（分）</td>
              <td>耗材总费用（元）</td>
            </tr>
            <tr>
              <td>{{ nameList8.name }}</td>
              <td>{{ nameList8.workOrderTotal }}</td>
              <td>{{ nameList8.degreePraise }}</td>
              <td>{{ nameList8.timeOut }}</td>
              <td>{{ nameList8.answer }}</td>
              <td>{{ nameList8.maintain }}</td>
              <td>{{ nameList8.totalPrice }}</td>
            </tr>
          </table>
          <!-- <div class="nameInfo">姓名: <span>{{ nameList.name }}</span></div>
          <div class="nameInfo">校区: <span>{{ nameList.schoolName }}</span></div>
          <div class="nameInfo">工单总数: <span> {{ nameList.workOrderTotal }}</span></div>
          <div class="nameInfo">好评率: <span>{{ nameList.degreePraise }}</span></div> -->
        </div>
        <!-- <div class="options">
          <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
            确定
          </el-button>
          <el-button @click="cancelName">取消</el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, reactive, nextTick, onUnmounted, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 用户类别占比
const echarts1 = ref();
const personNum = ref(0);
// 能耗趋势图
const echarts2 = ref();
// 门禁管理
const echarts3 = ref();
// 行为统计
const echarts4 = ref();
// 班级考勤
const echarts5 = ref();
// 最受欢迎老师TOP6
const greetTeaData = ref();
// 资源大数据
const echarts6 = ref();

const getList = async () => {
  cartogram();
  cartogram2();
  doorForbidClick();
  behaviorClick();
  classClick();
  greetTeaClick();
  resourceClick();
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/login/queryReduce",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(res, "加密参数测试");
  console.log(JSON.parse(eds.decryptDes(res.data.data)), "EDS解密");
  //                import eds from "@/utils/eds.js";
};

// 用户类别占比（------------------------------）
const cartogram = async () => {
  // 基于准备好的dom，初始化echarts实例
  // 圆环统计图
  // let data = {
  //   state: tabIndex1.value,
  // };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getUserIdTj",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "用户类别占比");
  let data = [];
  let color = [
    "rgba(67, 181, 244, 1)",
    "rgba(137, 207, 245, 1)",
    "rgba(180, 226, 251, 1)",
    "rgba(212, 237, 251, 1)",
  ];
  JSON.parse(eds.decryptDes(res.data.data)).forEach((item, index) => {
    let arr = {
      value: item.num,
      name: item.name,
      itemStyle: { color: color[index] },
    };
    data.push(arr);
  });
  // 用户总计
  let ress = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getUserIdTjt",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(ress, JSON.parse(eds.decryptDes(ress.data.data)), "用户总计");
  personNum.value = JSON.parse(eds.decryptDes(ress.data.data)).total;

  echarts1.value = echarts.init(document.getElementById("annulus"));
  echarts1.value.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "11%",
      top: "30%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        data: data,
        center: ["32%", "50%"],
        radius: "65%",
        label: {
          show: true,
          //   position: "center",
          formatter: "{b} ({d}%)",
          padding: 1,
        },
        labelLine: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};
// 能耗趋势图（----------------------------）
const cartogram2 = async () => {
  // let data = {
  //   state: tabIndex2.value,
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/repairRecord/repairTrend",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("userhead"),
  //   },
  //   params: data,
  // });
  // console.log(res, "折现 报修趋势分析");
  // let dayData = []; // 年份
  // let newTitle = ""; // 年比（今年标题）
  // let oldTitle = ""; // 年比（去年标题）
  // // 月份
  // let monthData = [];
  // for (let j = 1; j <= 31; j++) {
  //   monthData.push(j);
  // }
  // let oldData = []; // 上-级数据
  // let newData = []; // 当前数据
  // let xname = "";
  // if (res.data.code == 200) {
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
  // 折现统计图
  echarts2.value = echarts.init(document.getElementById("broken"));
  echarts2.value.setOption({
    // title: {
    //   text: "运动量对比",
    //   textStyle: {
    //     color: "#000",
    //     fontSize: 14,
    //   },
    // },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      textStyle: {
        color: "#000",
      },

      itemWidth: 8,
      itemHeight: 8, // 修改icon图形大小
      itemGap: 30, // 修改间距
      // top: "bottom",
      bottom: "5%",
      data: [
        { name: "水", icon: "circle" },
        { name: "电", icon: "circle" },
      ],
    },
    grid: {
      left: "8%",
      top: "15%",
      bottom: "20%",
      right: "8%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisTick: { show: false },
      axisLabel: {
        textStyle: {
          color: "#000", //刻度颜色
          fontSize: 10, //刻度大小
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD",
          width: 1,
          type: "solid",
        },
      },
      data: [
        "11.20",
        "11.21",
        "11.22",
        "11.23",
        "11.24",
        "11.25",
        "11.26",
        "11.27",
        "11.28",
        "11.29",
        "11.30",
      ],
    },
    yAxis: [
      {
        name: "吨",
        type: "value",
        axisTick: { show: false },
        axisLabel: {
          textStyle: {
            color: "#000", //刻度颜色
            fontSize: 10, //刻度大小
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#000",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        name: "度",
        type: "value",
        axisTick: { show: false },
        axisLabel: {
          textStyle: {
            color: "#000", //刻度颜色
            fontSize: 10, //刻度大小
          },
          // formatter: "{value}",
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#000",
            width: 1,
            type: "solid",
          },
        },
        // axisLabel: {  },
        // splitLine: {
        //   show: false,
        // },
      },
    ],
    series: [
      {
        name: "水",
        type: "line",
        smooth: true, // 折线拐点平滑
        // symbol: "circle",
        symbolSize: 3,
        itemStyle: {
          color: "#6FB6B8",
          // borderColor: "#fff",
          // borderWidth: 10,
        },
        lineStyle: {
          normal: {
            color: "rgba(111, 182, 184, 1)",
            opacity: 1,
          },
        },
        areaStyle: {
          color: "rgba(111, 182, 184, 0.2)",
        },
        data: [10, 20, 70, 10, 23, 50, 6, 30, 20, 14, 22],
      },
      {
        name: "电",
        type: "line",
        smooth: true,
        symbolSize: 3,
        yAxisIndex: 1,
        itemStyle: {
          color: "rgba(30, 125, 251, 1)", // 拐点的颜色
          borderColor: "#fff", // 拐点边框颜色
          // borderWidth: 10, // 拐点边框大小
        },
        lineStyle: {
          normal: {
            color: "rgba(30, 125, 251, 1)", // 折线点的颜色
          },
        },
        areaStyle: {
          color: "rgba(30, 125, 251, 0.2)",
        },
        data: [15, 20, 19, 30, 11, 20, 11, 9, 12, 32, 10],
      },
    ],
  });
};
// 门禁管理
const doorForbidClick = () => {
  echarts3.value = echarts.init(document.getElementById("doorForbid"));
  echarts3.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      // data: dayTitle,
      bottom: "15",
      icon: "circle",
      itemHeight: 13, // 修改icon图形大小
      itemGap: 30, // 修改间距
      textStyle: {
        fontSize: 10,
        color: "#000",
        padding: [0, 0, 0, -5], // 修改文字和图标距离
      },
    },
    grid: {
      top: "12%",
      left: "5%",
      right: "8%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        data: [
          "11.18",
          "11.19",
          "11.20",
          "11.21",
          "11.22",
          "11.23",
          "11.24",
          "11.25",
          "11.26",
          "11.27",
          "11.28",
          "11.29",
          "11.30",
        ],
        // axisLabel: {
        //   // 每个数据后面都会带有单位
        //   formatter: "{value}月",
        // },
        name: "",
        nameLocation: "end",
        nameTextStyle: {
          padding: [60, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "刷脸",
        type: "line",
        // stack: "Total",
        emphasis: {
          focus: "series",
        },
        data: [15, 20, 68, 20, 19, 30, 11, 20, 11, 9, 12, 32, 10],
        symbolSize: 4, // 点的大小
        symbol: "none", // 折线点设置为实心点
        // itemStyle: {
        //   normal: {
        //     color: "rgba(30, 125, 251, 1)", // 拐点的颜色
        //     borderColor: "white", // 拐点边框颜色
        //     borderWidth: 2, // 拐点边框大小
        //   },
        // },
        lineStyle: {
          normal: {
            color: "rgba(102, 153, 255, 1)", // 折线点的颜色
          },
        },
        smooth: true, //平滑曲线图。值可为数字
        // areaStyle: {
        //   //2.基础面积图。区域填充样式
        //   color: "rgba(30, 125, 251, 0.3)", //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
        // },
      },
      {
        name: "刷码",
        type: "line",
        // stack: "Total",
        emphasis: {
          focus: "series",
        },
        data: [10, 12, 21, 40, 70, 10, 23, 10, 6, 10, 20, 14, 22],
        symbolSize: 4, // 点的大小
        symbol: "none", // 折线点设置为实心点
        // itemStyle: {
        //   normal: {
        //     color: "rgba(111, 182, 184, 1)", // 拐点的颜色
        //     borderColor: "white", // 拐点边框颜色
        //     borderWidth: 2, // 拐点边框大小
        //   },
        // },
        lineStyle: {
          normal: {
            color: "rgba(78, 206, 163, 1)", // 折线点的颜色
          },
        },
        smooth: true, //平滑曲线图。值可为数字
        // areaStyle: {
        //   //2.基础面积图。区域填充样式
        //   color: "rgba(111, 182, 184, 0.3)", //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
        // },
      },
      {
        name: "车牌",
        type: "line",
        // stack: "Total",
        emphasis: {
          focus: "series",
        },
        data: [20, 15, 40, 19, 28, 30, 12, 40, 16, 18, 10, 24, 12],
        symbolSize: 4, // 点的大小
        symbol: "none", // 折线点设置为实心点
        // itemStyle: {
        //   normal: {
        //     color: "rgba(111, 182, 184, 1)", // 拐点的颜色
        //     borderColor: "white", // 拐点边框颜色
        //     borderWidth: 2, // 拐点边框大小
        //   },
        // },
        lineStyle: {
          normal: {
            color: "rgba(67, 181, 244, 1)", // 折线点的颜色
          },
        },
        smooth: true, //平滑曲线图。值可为数字
        // areaStyle: {
        //   //2.基础面积图。区域填充样式
        //   color: "rgba(111, 182, 184, 0.3)", //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
        // },
      },
    ],
  });
};
// 6 行为统计
const behaviorClick = async () => {
  // 基于准备好的dom，初始化echarts实例
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartWarning/behaviour",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "行为统计");
  let color = [
    "rgba(67, 181, 244, 1)",
    "rgba(137, 207, 245, 1)",
    "rgba(180, 226, 251, 1)",
    "rgba(212, 237, 251, 1)",
    "rgba(171, 249, 255, 1)",
  ];
  let typeData = [];
  JSON.parse(eds.decryptDes(res.data.data)).forEach((item, index) => {
    let arr = {
      value: item.typeCount,
      name: item.typeName,
      itemStyle: {
        color: color[index],
      },
    };
    typeData.push(arr);
  });
  echarts4.value = echarts.init(document.getElementById("behavior6"));
  echarts4.value.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "6%",
      top: "15%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        // data: [
        //   {
        //     value: 224,
        //     name: "区域入侵",
        //     itemStyle: {
        //       color: "rgba(67, 181, 244, 1)",
        //     },
        //   },
        //   {
        //     value: 304,
        //     name: "防溺水",
        //     itemStyle: {
        //       color: "rgba(137, 207, 245, 1)",
        //     },
        //   },
        //   {
        //     value: 484,
        //     name: "睡觉",
        //     itemStyle: {
        //       color: "rgba(180, 226, 251, 1)",
        //     },
        //   },
        //   {
        //     value: 300,
        //     name: "抽烟",
        //     itemStyle: {
        //       color: "rgba(212, 237, 251, 1)",
        //     },
        //   },
        //   {
        //     value: 180,
        //     name: "打架",
        //     itemStyle: {
        //       color: "rgba(171, 249, 255, 1)",
        //     },
        //   },
        // ],
        data: typeData,
        center: ["40%", "48%"],
        radius: ["48%", "65%"],
        label: {
          show: true,
          //   position: "center",
          formatter: "{b} ({d}%)",
          padding: 1,
        },
        labelLine: {
          show: true,
          //   length: -1,
        },
        // itemStyle: {
        //   shadowBlur: 10,
        //   shadowOffsetX: 0,
        //   shadowColor: "rgba(0, 0, 0, 0.5)",
        // },
      },
    ],
  });
};
// 7 班级考勤
const classClick = async () => {
  // 基于准备好的dom，初始化echarts实例
  // 圆环统计图
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartAttendance/queryAttendanceList",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "圆环 班级考勤");
  let colorSel = [
    "rgba(67, 181, 244, 1)",
    "rgba(137, 207, 245, 1)",
    "rgba(180, 226, 251, 1)",
    "rgba(212, 237, 251, 1)",
    "rgba(171, 249, 255, 1)",
  ];
  let data = [];
  JSON.parse(eds.decryptDes(res.data.data)).forEach((item, index) => {
    let aug = {
      value: item.proportion,
      name: item.name,
      itemStyle: {
        color: colorSel[index],
      },
    };
    data.push(aug);
  });
  echarts5.value = echarts.init(document.getElementById("class"));
  echarts5.value.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "6%",
      top: "15%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        data: data,
        center: ["40%", "48%"],
        radius: ["48%", "65%"],
        label: {
          show: true,
          //   position: "center",
          formatter: "{b} ({d}%)",
          padding: 1,
        },
        labelLine: {
          show: true,
          //   length: -1,
        },
      },
    ],
  });
};
// 8 最受欢迎老师TOP6
const greetTeaClick = async () => {
  // 基于准备好的dom，初始化echarts实例
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartEvaluateTeacher/queryTopSixTeacher",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)),
    "最受欢迎老师TOP6"
  );
  greetTeaData.value = JSON.parse(eds.decryptDes(res.data.data));
};
// 9 资源大数据
const resourceClick = async () => {
  // 基于准备好的dom，初始化echarts实例
  // 圆环统计图
  // let data = {
  //   state: tabIndex1.value,
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/repairRecord/repairAnalysis",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("userhead"),
  //   },
  //   params: data,
  // });
  // console.log(res, "圆环 报修分析统计");
  // let echartsData1 = [];
  echarts6.value = echarts.init(document.getElementById("resource"));
  echarts6.value.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "6%",
      top: "15%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        data: [
          {
            value: 224,
            name: "电子资源库",
            itemStyle: {
              color: "rgba(67, 181, 244, 1)",
            },
          },
          {
            value: 304,
            name: "课程资源库",
            itemStyle: {
              color: "rgba(137, 207, 245, 1)",
            },
          },
          {
            value: 484,
            name: "教学方案库",
            itemStyle: {
              color: "rgba(180, 226, 251, 1)",
            },
          },
          {
            value: 300,
            name: "第三资源库",
            itemStyle: {
              color: "rgba(212, 237, 251, 1)",
            },
          },
        ],
        center: ["40%", "48%"],
        radius: ["48%", "65%"],
        label: {
          show: true,
          //   position: "center",
          formatter: "{b} ({d}%)",
          padding: 1,
        },
        labelLine: {
          show: true,
          //   length: -1,
        },
      },
    ],
  });
};

// 墨轩湖搜索关键字
const searchTable6 = async () => {
  table6Load.value = true;
  table6CurrentPage.value = 1;
  table6pageCount.value = 10;
  let data = {
    state: tabIndex6.value,
    currentPage: table6CurrentPage.value,
    pageCount: table6pageCount.value,
    schoolId: 2,
    keyWord: searchInput6.value,
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorker",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "黄家湖维修师傅效率统计数据");
  if (res.data.code == 200) {
    if (res.data.data.records) {
      table6Total.value = res.data.data.records.length;
      if (table6CurrentPage.value > 1) {
        tableData6.list = tableData6.list.concat(res.data.data.records);
      } else {
        tableData6.list = res.data.data.records;
      }
    } else {
      tableData6.list = [];
    }
    table6Load.value = false;
  } else {
    table6Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 维修师傅效率统计导出
const importTable6 = async () => {
  let datas = {
    state: tabIndex6.value,
    schoolId: 2,
    keyWord: searchInput6.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorkerExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "墨轩湖维修师傅效率统计");
  if (res.status == 200) {
    let name = `墨轩湖维修师傅效率统计`;
    var content = res.data;
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

onMounted(() => {
  api.value = store.state.user.api;
  getList();

  if (router.currentRoute.value.query.token) {
    console.log(router.currentRoute.value.query.token);
    sessionStorage.setItem(
      "token",
      JSON.stringify(router.currentRoute.value.query.token)
    );
  }
});
onUnmounted(() => {
  echarts1.value.dispose();
  echarts2.value.dispose();
  echarts3.value.dispose();
  echarts4.value.dispose();
  echarts5.value.dispose();
  echarts6.value.dispose();
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  //   background-color: #fff;
  //   border: 1px solid #000;
  color: #fff;
  display: flex;
  flex-direction: column;

  .middle {
    width: 100%;
    // height: 100%;
    margin: 0 auto;
    overflow: auto;

    .cartogram {
      display: flex;
      justify-content: space-between;
      margin: 0 0 25px 0;
      // 应用入口
      .apply {
        width: 100%;
        min-width: 1240px;
        height: 120px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
        .addApply {
          color: #000;
          height: 40px;
          display: flex;
          align-items: center;
          .title {
            margin: 0 10px;
          }
          img {
            width: 25px;
            height: 25px;
          }
        }
      }
      // 用户类别占比
      .annulus {
        // width: 520px;
        flex: 1;
        min-width: 400px;
        height: 300px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

        .title {
          margin: 10px 30px;
          color: #000;
          font-weight: 700;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span:nth-child(2) {
            background-color: rgba(230, 239, 255, 1);
            color: rgba(0, 97, 255, 1);
            font-weight: 400;
            font-size: 16px;
            padding: 3px 5px;
            border-radius: 3px;
          }
        }
        // 总人数
        .headcount {
          position: relative;
          top: -250px;
          right: 0;
          width: 100%;
          .num {
            display: flex;
            flex-direction: column;
          }
          span:nth-child(1) {
            font-size: 14px;
            color: #000;
            text-align: right;
            margin-right: 30px;
          }
          span:nth-child(2) {
            font-size: 26px;
            font-weight: 600;
            color: rgba(42, 42, 42, 1);
            text-align: right;
            margin-right: 30px;
          }
        }
        .table {
          width: 90%;
          margin: 20px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 50px;
              color: #000;
            }
          }
        }
        // 用户类别占比
        #annulus {
          width: 100%;
          height: 250px;
        }

        // 能耗趋势图
        #broken {
          width: 100%;
          height: 250px;
        }
        // 视频监控管理
        .video {
          width: 100%;
          height: 250px;
          // margin: 20px auto;
          color: #000;
          ul {
            // height: 100%;
            margin: 12px 20px;
            padding: 0;
            display: flex;
            // flex-wrap: wrap;
            justify-content: space-around;
            li {
              width: 45%;
              height: 100px;
              // background-color: rgba(237, 245, 250, 1);
              border-radius: 7px;
              list-style: none;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              span:nth-child(1) {
                font-size: 30px;
                color: #000;
                font-weight: 600;
              }
              span:nth-child(2) {
                font-size: 16px;
                color: rgba(51, 51, 51, 1);
                // font-weight: 600;
              }
            }
          }
        }
        // 待办事项
        .backlog {
          margin: 0 30px;
          ul {
            height: 230px;
            color: rgba(0, 97, 255, 1);
            margin: 0;
            padding: 0;
            overflow: auto;
            li {
              list-style: none;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              border-bottom: 1px solid rgba(230, 230, 230, 1);
              span:nth-child(2) {
                padding: 0 8px;
              }
            }
          }
          ul::-webkit-scrollbar-track {
            background-color: #daeeff;
          }

          ul::-webkit-scrollbar {
            background-color: rgba(0, 97, 255, 1);
            height: 3px;
            width: 2px;
          }

          // ul::-webkit-scrollbar-thumb {
          //   background: #57b2ff;
          //   border-radius: 4px;
          //   height: 3px;
          //   width: 2px;
          // }
        }
        // 待办事项
        .teacher {
          margin: 0 30px;
          ul {
            height: 230px;
            color: rgba(0, 97, 255, 1);
            margin: 0;
            padding: 0;
            overflow: auto;
            li {
              list-style: none;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              border-bottom: 1px solid rgba(230, 230, 230, 1);
              span {
                color: rgba(166, 166, 166, 1);
              }
              span:nth-child(2) {
                padding: 0 8px;
                color: rgba(0, 97, 255, 1);
              }
            }
            li:nth-child(1) {
              span:nth-child(1) {
                color: rgba(212, 48, 48, 1);
              }
            }
            li:nth-child(2) {
              span:nth-child(1) {
                color: rgba(255, 87, 51, 1);
              }
            }
            li:nth-child(3) {
              span:nth-child(1) {
                color: rgba(0, 97, 255, 1);
              }
            }
          }
          ul::-webkit-scrollbar-track {
            background-color: #daeeff;
          }

          ul::-webkit-scrollbar {
            background-color: rgba(0, 97, 255, 1);
            height: 3px;
            width: 2px;
          }

          // ul::-webkit-scrollbar-thumb {
          //   background: #57b2ff;
          //   border-radius: 4px;
          //   height: 3px;
          //   width: 2px;
          // }
        }
        // 门禁管理
        #doorForbid {
          width: 100%;
          height: 250px;
        }
        // 班级考勤
        #class {
          width: 100%;
          height: 250px;
        }
        // 资源大数据
        #resource {
          width: 100%;
          height: 250px;
        }
      }

      .annulus:nth-child(2) {
        margin: 0 20px;
      }

      //3 视频监控管理

      // 6 行为统计
      #behavior6 {
        width: 100%;
        height: 250px;
      }
    }
    .cartogram:nth-child(4) {
      margin: 0;
    }
  }
}

.item::-webkit-scrollbar-track {
  background-color: #fff;
}

.item::-webkit-scrollbar {
  background-color: #57b2ff;
  height: 5px;
  width: 3px;
}

.item::-webkit-scrollbar-thumb {
  background: #57b2ff;
  border-radius: 4px;
  height: 3px;
  width: 3px;
}
</style>