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

<!-- 真正的首页 -->
<template>
  <div class="static">
    <div class="left_tree">
      <tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
    </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(item.value)"
        >
          <div class="item_img">
            <img :src="item.img" alt="" />
          </div>
          <div class="item_text">
            <p>{{ item.label }}</p>
          </div>
        </div>
      </div>

        <!-- <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="检测进度展示" name="1"> -->

        <!-- 饼图 -->
        <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>

          <!-- </el-collapse-item>
        </el-collapse> -->

  <el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
    <el-tab-pane :label="tabLabel1"> 
      <!-- 列表数据 -->
      <div class="container_table">
        <Table ref="tableRef1"></Table>
      </div>
    </el-tab-pane>
   
    <el-tab-pane label="已检设备"  v-if="tabShow">
      <!-- 列表数据 -->
      <div class="container_table">
        <Table ref="tableRef2"></Table>
      </div>
    </el-tab-pane>
  </el-tabs>


      </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();
const activeNames = ref(['2'])
const tabShow= ref(false);
const tabLabel1 = ref('自动检测')
const editableTabsValue = ref('0')
const handleChange = (val: string[]) => {
  console.log(val)
}

const handleTabsChange = (val) => {
  form.value.activeTabs = 0;
  form.value.activeTabs = 3;
  console.log(val)
}
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
  {
    label: "设备检测",
    value: 0,
    img: "/src/assets/images/plan/static/1.svg",
    checked: true,
  },
  {
    label: "设备复检",
    value: 2,
    img: "/src/assets/images/plan/static/2.svg",
    checked: false,
  },
  {
    label: "报告生成",
    value: 3,
    img: "/src/assets/images/plan/static/3.svg",
    checked: false,
  },
  {
    label: "设备归档",
    value: 4,
    img: "/src/assets/images/plan/static/4.svg",
    checked: false,
  },
]);
// 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/6.svg",
//     checked: false,
//   },
//   {
//     label: "报告生成",
//     value: 3,
//     img: "/src/assets/images/plan/static/3.svg",
//     checked: false,
//   },
//   {
//     label: "设备归档",
//     value: 4,
//     img: "/src/assets/images/plan/static/4.svg",
//     checked: false,
//   },
//   {
//     label: "设备浏览",
//     value: 5,
//     img: "/src/assets/images/plan/static/5.svg",
//     checked: false,
//   },
// ]);
form.value.activeTabs = tabsList.value[0].value;
const tableRef1 = ref();
const tableRef2 = ref();
watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
      tableRef2.value && tableRef2.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 = () => {
  treeRef.value.getTreeData(data);
  // 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) => {
  console.log("test",val);
  editableTabsValue.value = '0';
  tabsList.value.map((item: any, index: any) => {
    if (val == item.value) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });

  tabShow.value = false;

  switch (val) {
    case 0://自动检测
    tabLabel1.value = "自动检测";
    break;
    case 1://手动检测
    tabLabel1.value = "手动检测";
    break;
    case 2://设备复检
    tabLabel1.value = "设备复检";
    break;
    case 3://报告生成
    tabLabel1.value = "未检设备";
    tabShow.value = true;
    break;
    case 4://设备归档
    tabLabel1.value = "设备归档";
    break;
  }
    
  form.value.activeTabs = val;
};

onMounted(() => {
  console.log();
  getTree();
  getPieData();
});
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  // height: calc(100vh - 165px);
  height: 100%;
  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: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        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;
          margin-right: 5px;
          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;
          }
        }
      }
    }

    .el-collapse {
      width: 100% !important;
      // min-height: 200px !important;
      height:auto;
      background-color: #eee;
      // display: flex;
      // justify-content: space-between;
      // padding-left: 2ch;
      margin-bottom: 10px;
      }

      .el-collapse-item{
        width: 100% !important;
      // min-height: 200px !important;
      height:100% !important;
      background-color: #eee;
      // display: flex !important;
      }

    .container_charts {
      width: 100%;
      min-height: 180px !important;
      // height:100%;
      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;
      }
    }

    .el-tabs{
      width: 100% !important;
      border-radius: 4px;
    }

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