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 class="imgList">
            <div class="imgListLi" v-for="item in applyData">
              <div class="imgListLi" @click="applyLink(item)">
                <img :src="item.logo" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </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="bar">
            <div class="title">班级考勤</div>
            <el-select
              v-model="searchInput.class"
              placeholder="请选择班级"
              style="width: 160px; margin-right: 10px"
              filterable
              remote
              remote-show-suffix
              :remote-method="classDataMethod"
              @change="classClick"
              :clearable="false"
            >
              <el-option
                v-for="i in classData"
                :label="`${i.className}`"
                :value="i.id"
              />
            </el-select>
            <el-date-picker
              v-model="searchInput.date"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请输入日期"
              :size="size"
              :clearable="false"
            />
          </div>
          <div id="class"></div>
        </div>
        <!--8 最受欢迎老师TOP6 -->
        <div class="annulus">
          <div class="bar">
            <div class="title">最受欢迎老师TOP6</div>
            <el-select
              v-model="searchInput.termId"
              class="sel"
              placeholder="请选择学期"
              style="width: 250px"
              @change="greetTeaClick"
              :clearable="true"
            >
              <el-option
                :label="i.name"
                :value="i.id"
                v-for="i in semesterData"
              />
            </el-select>
          </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 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,
  onBeforeMount,
  markRaw,
} 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 { RSAdecrypt } from "@/utils/rsa.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 应用数据
const applyData = ref();
// 用户类别占比
const echarts1 = ref();
const personNum = ref(0);
// 能耗趋势图
const echarts2 = ref();
// 门禁管理
const echarts3 = ref();
// 行为统计
const echarts4 = ref();
// 班级考勤
const echarts5 = ref();
const userType = ref();
const classData = ref(); // 班级数据

const searchInput = reactive({
  class: "", // 班级考勤  班级筛选
  date: dayjs().format("YYYY-MM-DD"),
  termId: "", // 最受欢迎老师 班级筛选
});
// 最受欢迎老师TOP6
const greetTeaData = ref();
const semesterData = ref();
// 资源大数据
// const echarts6 = ref();

const getList = async () => {
  applyList();
  cartogram();
  cartogram2();
  doorForbidClick();
  behaviorClick();
  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 applyList = async () => {
  let data = {
    currentPage: 1,
    pageCount: 100,
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartApply/queryPageSmartApply",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });

  if (res.data.code == 200) {
    console.log(
      res,
      JSON.parse(eds.decryptDes(res.data.data)).list,
      "应用管理分页数据"
    );
    let data = JSON.parse(eds.decryptDes(res.data.data)).list;
    applyData.value = data.filter((item) => {
      return item.category == "管理后台";
    });
  } else {
    if(res.data.message=='登录凭证已过期，请重新登录'){
      router.push({
        path: `/login`,
      });
    }
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 应用链接跳转
const applyLink = (row) => {
  console.log(row);
  let str = row.urlLink;
  let charToCheck = "http";

  if (str.includes(charToCheck)) {
    if (row.descript == "领导驾驶舱") {
      window.open(`${row.urlLink}?token=${sessionStorage.getItem("token")}`);
    } else {
      window.open(row.urlLink);
    }
  } else {
    window.open(
      `https://${row.urlLink}?token=${sessionStorage.getItem("token")}`
    );
  }
};

// 用户类别占比（------------------------------）
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",
      align: "auto",
      right: "15%",
      // top: "8%",
      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 eleData = [];
  let water = [];
  let name = [];
  {
    let data = new FormData();
    data.append("type", 0);
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/driver/getEnergyDay",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    console.log(res, "水 能耗趋势");
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        water.push(item.data[0].num);
        name.push(item.date);
      });
      console.log(water, name);
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  {
    let data = new FormData();
    data.append("type", 1);
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/driver/getEnergyDay",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    console.log(res, "电 能耗趋势");
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        eleData.push(item.data[0].num);
      });
      console.log(water, name);
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // 折现统计图
  echarts2.value = markRaw(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: name,
    },
    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: water,
      },
      {
        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: eleData,
      },
    ],
  });
};
// 门禁管理
const doorForbidClick = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartFaceDiscern/access",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "门禁管理");
  let timeList = [];
  let faceData = [];
  let codeData = [];
  let carData = [];
  JSON.parse(eds.decryptDes(res.data.data))
    .reverse()
    .forEach((item) => {
      timeList.push(item.date);
      faceData.push(item.face);
      codeData.push(item.code);
      carData.push(item.car);
    });
  echarts3.value = markRaw(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,
    },
    dataZoom: [
      {
        // 这部分是关键
        type: "inside", //slider  inside 添加滑动条类型 dataZoom 组件
        start: 0, // 默认数据初始选择范围为 10% 到 90%
        end: 30,
      },
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        data: timeList,
        // 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: faceData,
        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: codeData,
        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: carData,
        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: "10%",
      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 resFlag = {
    date: searchInput.date,
    classId: searchInput.class,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartAttendance/queryAttendanceList",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: resFlag,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "圆环 班级考勤");
  // console.log(res, "圆环 班级考勤");
  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: "12%",
      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: {
      termId: searchInput.termId,
    },
  });
  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 resizeChart = () => {
  echarts1.value.resize();
  // 能耗趋势图
  echarts2.value.resize();
  // 门禁管理
  echarts3.value.resize();
  // 行为统计
  echarts4.value.resize();
  // 班级考勤
  echarts5.value.resize();
};
// 判断为班主任 还是 超级管理员
const userTypeChange = async (value) => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartAuthorGroup/getClassById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      userHead: sessionStorage.getItem("userhead"),
    },
  });
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)),
    "断为班主任 还是 超级管理员"
  );
  if (res.data.code == 200) {
    userType.value = JSON.parse(eds.decryptDes(res.data.data)).schoolClass;
    classList();
  }
};
// 班级数据
const classList = async (val = "") => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartClass/getSchoolClasses",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      schoolClass: userType.value,
      className: val,
    },
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "班级数据");
  // classData.value = JSON.parse(eds.decryptDes(res.data.data));
  // searchInput.class=classData.value[0].id
  let classList = JSON.parse(eds.decryptDes(res.data.data));
  if (userType.value == 0) {
    classData.value = classList;
    if (!searchInput.class) {
      searchInput.class = classData.value[0].id;
    }
  } else {
    classData.value = [{ className: classList.className, id: classList.id }];
    searchInput.class = classList.id;
  }
  classClick();
};
const classDataMethod = async (query) => {
  if (query) {
    classList(query);
  } else {
    classList();
  }
};

// 获取学期下拉
const semesterList = async () => {
  let semester = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySmartSemesters",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(
    semester,
    JSON.parse(eds.decryptDes(semester.data.data)),
    "学期下拉数据"
  );
  semesterData.value = JSON.parse(eds.decryptDes(semester.data.data));
};
onMounted(async () => {
  api.value = store.state.user.api;

  window.addEventListener("resize", () => {
    resizeChart();
  });
  if (
    router.currentRoute.value.query.userhead &&
    router.currentRoute.value.query.token
  ) {
    let userhead = router.currentRoute.value.query.userhead;
    let token = router.currentRoute.value.query.token;
    sessionStorage.setItem("token", token);
    sessionStorage.setItem("userhead", userhead);
    console.log(userhead, "userhead");
    console.log(token, "token");
    const formDatas = new FormData();
    formDatas.append("userId", "");
    let resData = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartAuthorGroup/queryUserAuthor",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: formDatas,
    });
    console.log(resData, "查看当前用户权限");
    if (resData.data.code == 200) {
      let roleList = resData.data.data[0].treAuthor;
      sessionStorage.setItem("roleList", JSON.stringify(roleList));
      // store.commit("ROLELIST", "");
      let flag = roleList.some((item) => {
        return item.route == "/wanzai/home";
      });
      let address = roleList[0].route;
      console.log(flag, address);
      if (!flag) {
        store.commit("indexUp", address);
        router.push({
          path: `${address}`,
        });
      } else {
        store.commit("indexUp", "/wanzai/home");
        router.push({
          path: `/wanzai/home`,
        });
      }
    } else {
      // ElMessage({
      //   type: "error",
      //   showClose: true,
      //   message: resData.data.message,
      //   center: true,
      // });
    }
  }
  if (sessionStorage.getItem("token") && sessionStorage.getItem("userhead")) {
    getList();
    userTypeChange();
    semesterList();
  } else {
    router.push({ path: `/wanzai/login` });
    ElMessage({
      type: "error",
      showClose: true,
      message: "登录凭证已过期，请重新登录",
      center: true,
    });
  }

  // let userhead = "1B0430E15102ADC65C43E475AC697D9A";
  // let token =
  //   "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MTMyMzQ2NDQsImNhcmRObyI6IjAwMDAwMSIsImlhdCI6MTcxMzE0ODI0NH0.jxuGCqDkqzRa3poVNQq5aoSrKGDCZauXFLVKrB4M87s";
  // sessionStorage.setItem("token", JSON.stringify(token));
  // sessionStorage.setItem("userhead", JSON.stringify(userhead));
});
onUnmounted(() => {
  if (echarts1.value) {
    echarts1.value.dispose();
  }
  if (echarts2.value) {
    echarts2.value.dispose();
  }
  if (echarts3.value) {
    echarts3.value.dispose();
  }
  if (echarts4.value) {
    echarts4.value.dispose();
  }
  if (echarts5.value) {
    echarts5.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%;

        height: 165px;
        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 20px;
          }
          img {
            width: 25px;
            height: 25px;
          }
        }
        .imgList {
          display: flex;
          align-items: center;
          width: calc(100% - 40px);
          margin: 0 auto;
          overflow: auto;
          .imgListLi {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 15px;
            cursor: pointer;

            img {
              width: 70px;
              height: 70px;
              margin-bottom: 8px;
            }
            span {
              color: #000;
              font-size: 12px;
            }
          }
          .imgListLi:last-child {
            margin-right: 0;
          }
        }
        .imgList:hover {
          &::-webkit-scrollbar-track {
            background-color: #fff;
          }

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

          &::-webkit-scrollbar-thumb {
            background: #57b2ff;
            border-radius: 4px;
            height: 3px;
            width: 3px;
          }
        }
      }
      // 用户类别占比
      .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);
        position: relative;
        .bar {
          display: flex;
          // justify-content: center;
          align-items: center;
        }
        .title {
          margin: 10px 20px;
          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: calc(-100% + 120px);
          width: 120px;
          .num {
            display: flex;
            flex-direction: column;
          }
          span:nth-child(1) {
            font-size: 14px;
            color: #000;
            text-align: right;
            // margin-right: 30px;
            text-align: center;
          }
          span:nth-child(2) {
            font-size: 26px;
            font-weight: 600;
            color: rgba(42, 42, 42, 1);
            text-align: right;
            // margin-right: 30px;
            text-align: center;
          }
        }
        .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 0 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>