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

<!-- 真正的首页 -->
<template>
  <div class='static'>
    <el-row :gutter='10'>
      <el-col :lg='4' :xl='4' :md='4' :sm='4'>
        <div class='left_tree'>
          <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' />
        </div>
      </el-col>
      <el-col :lg='20' :xl='20' :md='20' :sm='20'>
        <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' />
              </div>
              <div class='item_text'>
                <p>{{ item.label }}</p>
              </div>
            </div>
          </div>
          <!--检测计划统计 饼图统计-->
          <div class='container_pieShow'>
            <el-collapse model-value='1' accordion @change='handleCollapseChange'>
              <el-collapse-item name='1'>
                <template #title>
                  <div class='container_pieShow_title'>
                    <span>检测计划统计</span>
                    <span>{{ planName }}</span>
                  </div>
                </template>
                <!-- 饼图 -->
                <div class='container_charts'>
                  <div class='charts_info' ref='chartsInfoRef'>
                    <pie
                      :customData="{
                       title: '设备检测状态',
                       textAlign: 'left',
                      }"
                      :legendData="{
                       icon: 'circle',
                       left: 'left',
                       top: 'bottom',
                      }"
                      :chartsData='chartsData1'
                      ref='pieRef1'
                    ></pie>
                  </div>
                  <div class='charts_info'>
                    <pie
                      :customData="{
                       title: '设备检测结果',
                       textAlign: 'left',
                      }"
                      :legendData="{
                       icon: 'circle',
                       left: 'left',
                       top: 'bottom',
                      }"
                      :chartsData='chartsData2'
                      ref='pieRef2'
                    ></pie>
                  </div>
                  <div class='charts_info'>
                    <pie
                      :customData="{
                       title: '设备报告状态',
                       textAlign: 'left',
                      }"
                      :legendData="{
                        icon: 'circle',
                        left: 'left',
                        top: 'bottom',
                      }"
                      :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' :id='currentId' :isTimeCheck='isTimeCheck' :plan = 'select_Plan'></Table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang='ts' setup>
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 deviceDataList from '@/api/device/device/deviceData'
import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict'
import { type Plan } from '@/api/plan/interface'
import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import { type Device } from '@/api/device/interface/device'
import { ResultData } from '@/api/interface'

const planName = ref('')
const dictStore = useDictStore()
const modeStore = useModeStore()
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 tabShow = ref(false)
const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0')
const checkStateTable = ref<number[]>([0, 1, 2])
const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
const tableHeight = ref('calc(100% - 50px)') // 初始高度

const isTimeCheck = ref<boolean>(false)
const planList = ref<ResultData<Plan.ReqPlan[]>>()
const select_Plan = ref<Plan.ReqPlan>()
const handleCollapseChange = (val: CollapseModelValue) => {

  // 计算新的高度
  let newHeight
  if (Array.isArray(val)) {
    newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
  } else {
    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
  }
  tabsHeight.value = newHeight
  tabPaneHeight.value = `calc(100% - 5px)`
  tableHeight.value = `calc(100% - 5px)`
}

const handleTabsChange = (val: any) => {
  form.value.activeTabs = 0
  form.value.activeTabs = 3
  form.value.activeChildTabs = Number(val)

}
localStorage.setItem('color', 'red')
//功能选择数据
const tabsList = ref([
  {
    label: '设备检测',
    value: 0,
    img: '/src/assets/images/plan/static/1.svg',
    checked: true,
  },
  {
    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()
const currentId = ref('')

watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {

      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)
    }
  },
  {
    immediate: true,
    deep: true,
  },
)
const pieRef1 = ref(),
  pieRef2 = ref(),
  pieRef3 = ref()

const chartsData1: any = ref([]),
  chartsData2: any = ref([]),
  chartsData3: any = ref([])

const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
  for (const plan of plans) {
    if (plan.id === id) {
      return plan
    }
    if (plan.children) {
      const foundPlan = findPlanById(plan.children, id)
      if (foundPlan) {
        return foundPlan
      }
    }
  }
  return undefined
}

const getPieData = async (id: string) => {
  currentId.value = id // 设置当前ID

  // 初始化计数对象
  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
  if (id) {
    const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
    const plan = findPlanById(planList.value?.data || [], id)
    planName.value = '所选计划:' + plan.name
    select_Plan.value = plan
    if (plan) {
      //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
      isTimeCheck.value = false // 将 1 转换为 true，0 转换为 false   ----目前不用守时检测，先去除
    } else {
      // 处理未找到计划的情况
      isTimeCheck.value = false // 或者其他默认值
    }
    const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
    // 遍历 boundPqDevList 并更新计数对象
    boundPqDevList.value.forEach(t => {
      if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
        checkStateCount[t.checkState]++
      }
    })
    boundPqDevList.value.forEach(t => {
      if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
        checkResultCount[t.checkResult]++
      }
    })
    boundPqDevList.value.forEach(t => {
      if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
        reportStateCount[t.reportState]++
      }
    })
  }

  chartsData1.value = [
    { value: checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
    { value: checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
    { value: checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
    { value: checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
  ]
  chartsData2.value = [
    { value: checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
    { value: checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
    { value: checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
  ]
  chartsData3.value = [
    { value: reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
    { value: reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
    { value: reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
  ]

  pieRef1.value.init()
  pieRef2.value.init()
  pieRef3.value.init()
}
const getTree = (data?: any) => {
  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://自动检测
      checkStateTable.value = [0, 1, 2]
      tabLabel1.value = '设备检测'
      break
    case 1://手动检测
      tabLabel1.value = '手动检测'
      break
    case 2://设备复检
      tabLabel1.value = '设备复检'
      break
    case 3://报告生成
      checkStateTable.value = [2, 3]
      tabLabel1.value = '报告生成'
      //tabShow.value = true;
      break
    case 4://设备归档
      checkStateTable.value = [2]
      tabLabel1.value = '设备归档'
      break
    case 5://数据查询
      checkStateTable.value = [2, 3]
      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)
  }
})

onBeforeMount(async () => {
  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
  const reqPlan: Plan.ReqPlan = {
    pattern: patternId,
    datasourceIds: '',
    sourceIds: '',
    planId: '',
    scriptName: '',
    errorSysName: '',
    sourceName: '',
    devIds: [],
    id: '',
    name: '',
    dataSourceId: '',
    scriptId: '',
    errorSysId: '',
    timeCheck: 0,
    testState: 0,
    reportState: 0,
    result: 0,
    code: 0,
    state: 0,
  }
  planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>

  if (planList.value.data[0].children[0]) {
    currentId.value = planList.value.data[0].children[0].id
  }
  if (chartsInfoRef.value) {
    resizeObserver.observe(chartsInfoRef.value)
  }
  getTree(planList.value.data)

  getPieData(currentId.value)
})

onUnmounted(() => {
  if (chartsInfoRef.value) {
    resizeObserver.unobserve(chartsInfoRef.value)
  }
})


</script>
<style lang='scss' scoped>

.static {

  .left_tree {
    height: 100%;
    background-color: #fff;
  }

  .right_container {
    flex: none;
    height: 100%;
    display: flex;
    flex-direction: column;


    .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_pieShow {
      width: 100% !important;
      height: auto;
      background-color: #eee;
      margin-bottom: 10px;

      .container_pieShow_title {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        font-weight: bold;
        width: 100%;
        font-size: 14px;
      }

    }

    .el-collapse {
      width: 100% !important;
      height: 100% !important;
      background-color: #eee;
    }

    .el-collapse-item {
      width: 100% !important;
      height: 100% !important;
      background-color: #eee;
    }

    .container_charts {
      width: 100%;
      height: 100%;
      background-color: #eee;
      display: flex;
      justify-content: space-between;

      .charts_info {
        margin-top: 1px;
        flex: none;
        width: 33.1%;
        height: 100% !important;
        background-color: #fff;
      }
    }

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



    .tabs-menu {
      height: 100%;
      border: 0;
    }

    .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) {
  padding-bottom: 0px !important;
}

:deep(.el-collapse-item__content ) {
  padding-bottom: 0px !important;
}

:deep(.el-tabs--border-card > .el-tabs__content) {
  padding: 0 !important;
}




</style>