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_pieShow">
        <el-collapse model-value="1" accordion @change="handleCollapseChange">
            <el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
        <!-- 饼图 -->
        <div class="container_charts">
          <div class="charts_info" ref="chartsInfoRef">
            <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>
    </div>

    <el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }">
      <el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }"> 
        <!-- 列表数据 -->
        <div class="container_table" :style="{ height: tableHeight }">
          <Table ref="tableRef1"></Table>
        </div>
      </el-tab-pane>
    
      <el-tab-pane label="已检设备"  v-if="tabShow" :style="{ height: tabPaneHeight }">
        <!-- 列表数据 -->
        <div class="container_table" :style="{ height: tableHeight }">
          <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";
import deviceDataList from '@/api/device/device/deviceData'

const chartsInfoRef = ref<HTMLElement | null>(null);
const chartsWidth = ref<number>(0);
const deviceData = deviceDataList.plan_devicedata
const treeRef = ref();
const form: any = ref({
  activeTabs: 0, //功能选择,例如报告生成
  activeChildTabs: 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 tabsHeight = ref('calc(100vh - 538px)'); // 初始高度

const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
const tableHeight = ref('calc(100% - 5px)'); // 初始高度
const handleChange = (val: string[]) => {
 // console.log(val)
}

const handleCollapseChange = (val: string[]) => {

  console.log(val)
  console.log(val.length)
  // 计算新的高度
  const newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
  //const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
  tabsHeight.value = newHeight;
  tabPaneHeight.value = `calc(100% - 5px)`; 
  tableHeight.value = `calc(100% - 5px)`; 

  // tableRef1.value.resize();
  // tableRef2.value.resize();
};

const handleTabsChange = (val) => {
  form.value.activeTabs = 0;
  form.value.activeTabs = 3;
  form.value.activeChildTabs = Number(val);
  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,
  },
  {
    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) {

      console.log(form.value.activeTabs,111);
      
    if(form.value.activeTabs === 0 )//设备检测
    {
      const tabledata = deviceData.filter((item) => item.document_State === "未归档")
      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
    }
    else if(form.value.activeTabs === 4)//设备归档
    {
      const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档")
      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
    }
    else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
    {
      const tabledata = deviceData.filter((item) => item.check_State === "检测完成");
      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
    }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
      console.log(form.value.activeTabs,form.value.activeChildTabs);
    }
  },
  {
    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: 12, name: "未检", itemStyle: { color: '#fac858' } },
    { value: 0, name: "检测中", itemStyle: { color: '#ee6666' }  },
    { value: 6, name: "检测完成", itemStyle: { color: '#91cc75' }  },
    { value: 2, name: "归档", itemStyle: { color: '#5470c6' }  },
  ];
  chartsData2.value = [
    { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
    { value: 3, name: "不符合" , itemStyle: { color: '#ee6666' } },
    { value: 5, name: "符合", itemStyle: { color: '#91cc75' }  },
    //     { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项" , itemStyle: { color: '#ee6666' } },
    // { value: Math.floor(Math.random() * 100) + 1, name: "全部合格", itemStyle: { color: '#91cc75' }  },
  ];
  // pieRef2.value.init();
  chartsData3.value = [
    // { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
    // { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },

    { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
    { value: 4, name: "未生成" , itemStyle: { color: '#ee6666' } },
    { value: 4, name: "已生成", itemStyle: { color: '#91cc75' }  },


    // { value: Math.floor(Math.random() * 100) + 1, name: "未检" , itemStyle: { color: '#fac858' } },
    // { 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: "全部合格已生成报告" },
  ];

  pieRef1.value.init();
  pieRef2.value.init();
  pieRef3.value.init();
  // pieRef1.value.reSize(470,145,true);
  // pieRef2.value.reSize(470,145,true);
  // pieRef3.value.reSize(470,145,true);
};
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) => {

  editableTabsValue.value = '0';
  form.value.activeChildTabs = 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;
    case 5://数据查询
    tabLabel1.value = "数据查询";
    break;
  }

  form.value.activeTabs = val;
};


const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    chartsWidth.value = entry.contentRect.width;
    //console.log('Charts Info Width:', chartsWidth.value);

    pieRef1.value.reSize(chartsWidth.value * 0.95,180,true);
    pieRef2.value.reSize(chartsWidth.value * 0.95,180,true);
    pieRef3.value.reSize(chartsWidth.value * 0.95,180,true);
  }
});

onMounted(() => {
 // console.log();
 if (chartsInfoRef.value) {
    resizeObserver.observe(chartsInfoRef.value);
  }
  getTree();
  getPieData();
});


onUnmounted(() => {
  if (chartsInfoRef.value) {
    resizeObserver.unobserve(chartsInfoRef.value);
  }
});
</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: flex-start;
      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;
        margin-right: 50px;;
        .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:#fff;
            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_function {
    //   width: 100%;
    //   height: auto;
    //   background: #fff;
    //   border-radius: 4px;
    //   display: flex;
    //   // justify-content: space-around;
    //   // justify-content: space-evenly;
    //   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: 40px;
    //     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: 30px;
    //       height: 30px;
    //       border-radius: 50%;
    //       // background-color: #607eab;
    //       display: flex;
    //       align-items: center;
    //       justify-content: center;
    //       margin-right: 5px;
    //       img {
    //         width: 20px;
    //         height: auto;
    //       }
    //     }

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

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

    //     .item_text {
    //       p {
    //         width: 80px;
    //         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_pieShow{
      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 {
      width: 100% !important;
      // min-height: 200px !important;
      height:100% !important;
      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:90%;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

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

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

    .tabs-menu{
      height: 100%;
    }
    .container_table {
      // width: 100%;
      flex: 1 !important;
      //height: calc(100vh - 360px - 180px);
      height: 100% !important;
      border-radius: 4px;
      width: 100% !important;
      // display: none;
      .table_info {
        width: 100%;
        height: 100%;
      }
    }
  }
}
:deep(.el-collapse-item__header){
  color: var(--el-color-primary);
  font-size: 14px;
  font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}
:deep(.el-collapse-item__conten){
  // background-color:#f6f6f6;
  padding-bottom: 0px !important;
}
:deep(.el-collapse-item__content ){
  // background-color:#f6f6f6;
  padding-bottom: 0px !important;
}
</style>