pqs-9100_client/frontend/src/views/home/tabs/dashboard.vue

<!-- 真正的首页 -->
<template>
  <div class="static">
    <div class="left_tree">
      <tree ref="treeRef" @jump="jump" />
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
      <!-- 功能选择 -->
      <div class="container_function">
        <div
          class="function_item"
          :class="
            item.checked ? 'function_item checked_function' : 'function_item'
          "
          v-for="(item, index) in tabsList"
          :key="index"
          @click="handleCheckFunction(index)"
        >
          <div class="item_img">
            <img :src="item.img" alt="" />
          </div>
          <div class="item_text">
            <p>{{ item.label }}</p>
          </div>
        </div>
      </div>
      <!-- 饼图 -->
      <div class="container_charts">
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测状态',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData1"
            ref="pieRef1"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测结果',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData2"
            ref="pieRef2"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '报告状态',
              textAlign: 'right',
              label: {
                normal: {
                  position: 'inner',
                },
              },
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData3"
            ref="pieRef3"
          ></pie>
        </div>
      </div>
      <!-- 列表数据 -->
      <div class="container_table">
        <Table ref="tableRef"></Table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getStaticTreeData } from "@/api/plan/static";
import pie from "@/components/echarts/pie/default.vue";
import { useRouter } from "vue-router";
import tree from "../components/tree.vue";
import Table from "../components/table.vue";
import { data } from "@/api/plan/static.json";
const treeRef = ref();
const form: any = ref({
  activeTabs: 0, //功能选择
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
});
const router = useRouter();
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
  {
    label: "自动检测",
    value: 0,
    img: "/src/assets/images/plan/static/1.svg",
    checked: true,
  },
  {
    label: "手动检测",
    value: 1,
    img: "/src/assets/images/plan/static/2.svg",
    checked: false,
  },
  {
    label: "报告生成",
    value: 2,
    img: "/src/assets/images/plan/static/3.svg",
    checked: false,
  },
  {
    label: "设备归档",
    value: 3,
    img: "/src/assets/images/plan/static/4.svg",
    checked: false,
  },
  {
    label: "设备浏览",
    value: 4,
    img: "/src/assets/images/plan/static/5.svg",
    checked: false,
  },
  {
    label: "设备导入",
    value: 5,
    img: "/src/assets/images/plan/static/6.svg",
    checked: false,
  },
]);

form.value.activeTabs = tabsList.value[0].value;
const tableRef = ref();
watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
      tableRef.value && tableRef.value.changeActiveTabs(form.value.activeTabs);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const pieRef1 = ref(),
  pieRef2 = ref(),
  pieRef3 = ref();
const changeSelect = () => {
  console.log(form.value.activeTabs);
  getPieData();
};
const chartsData1: any = ref([]),
  chartsData2: any = ref([]),
  chartsData3: any = ref([]);
const getPieData = () => {
  chartsData1.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测完成" },
    { value: Math.floor(Math.random() * 100) + 1, name: "归档" },
  ];
  chartsData2.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "/" },
    { value: Math.floor(Math.random() * 100) + 1, name: "合格" },
    { value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
  ];
  // pieRef2.value.init();
  chartsData3.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
    { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
  ];
  // pieRef3.value.init();
  pieRef1.value.init();
};
const getTree = () => {
  getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
    console.log(res, "99999999");
    // treeRef.value.getTreeData(res.data);
    treeRef.value.getTreeData(data);
  });
};
//前往检测
const handleDetection = () => {
  router.push({
    path: "/detection",
  });
};
//前往计划详情
const planDetail = () => {
  router.push({
    path: "/plan/planList",
  });
};
//功能选择css切换
const handleCheckFunction = (val: any) => {
  tabsList.value.map((item: any, index: any) => {
    if (val == index) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });
  form.value.activeTabs = val;
};
// 树点击跳转
const jump = (e: any) => {
  console.log("🚀 ~ jump ~ e:", e);
  router.push({
    path: "/plan/planList",
  });
};
onMounted(() => {
  console.log();
  getTree();
  getPieData();
});
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  height: calc(100vh - 165px);
  display: flex;
  justify-content: space-between;
  // background-color: #eee;

  .left_tree {
    width: 14% !important;
    height: 100%;
    background-color: #fff;
  }

  .right_container {
    flex: none;
    width: 85.8%;
    // padding: 0 10px 0 10px;
    margin-left: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .container_function {
      width: 100%;
      height: auto;
      background: #fff;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;

      .function_item {
        flex: none;
        width: 6%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        background-color: #607eab;
        border-radius: 8px;
        padding: 0px 30px;

        .item_img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          // background-color: #607eab;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 40px;
            height: auto;
          }
        }

        .item_img:nth-child(3),
        .item_img:nth-child(6) {
          padding: 10px !important;

          img {
            width: 20px !important;
            height: auto;
          }
        }

        .item_text {
          p {
            margin: 0;
            font-weight: 800;
            color: var(--el-color-primary);
            font-size: 14px;
            font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
          }
        }
      }

      .function_item:hover,
      .checked_function {
        background-color: var(--el-color-primary);

        .item_img {
          // background-color: var(--el-color-primary);
        }

        .item_text {
          p {
            // color: var(--el-color-primary);
            color: #fff;
          }
        }
      }
    }

    .container_charts {
      width: 100%;
      min-height: 200px !important;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .charts_info {
        flex: none;
        width: 32.9%;
        height: 100% !important;
        background-color: #fff;
        border-radius: 4px;
      }
    }

    .container_table {
      // width: 100%;
      flex: 1 !important;
      height: calc(100vh - 360px);
      border-radius: 4px;
      width: 100% !important;
      // display: none;
      .table_info {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>