pqs-9100_client/frontend/src/views/home/components/table.vue

<template>
  <div class='table_info'>
    <!-- :request-api="getTableList" -->
    <ProTable
        ref='proTable'
        :columns='columns'
        @drag-sort='sortTable'
        :default-sort="{ prop: 'check_State', order: 'ascending' }"
        :stripe='true'
        :pagination='false'
        :key='tableKey'
        @selection-change='handleSelectionChange'
        :request-api='getTableList'
        :toolButton='false'
    >
      <!-- :height="tableHeight" -->
      <!-- 表格 header 按钮 -->
      <template #tableHeader=''>
        <el-form :model='form' :inline='true'>
          <el-form-item label='关键字'>
            <el-input v-model='form.search' placeholder='请输入设备名称' clearable style='width: 140px;'></el-input>
          </el-form-item>
          <el-form-item label='检测状态' v-if='form.activeTabs != 3 && form.activeTabs != 4 && form.activeTabs != 5'>
            <el-select v-model='form.checkStatus' clearable>
              <el-option
                  v-for='(item, index) in checkStatus'
                  :label='item.label'
                  :value='item.id'
                  :key='index'
                  v-show='shouldShowOption(item)'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='检测结果'>
            <el-select v-model='form.checkResult' clearable>
              <el-option
                  v-for='(item, index) in checkResult'
                  :label='item.label'
                  :value='item.id'

                  :key='index'
                  v-show='shouldShowOption(item)'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='报告状态'>
            <el-select v-model='form.checkReportStatus' clearable>
              <el-option
                  v-for='(item, index) in checkReportStatus'
                  :label='item.label'
                  :value='item.id'

                  :key='index'
                  v-show='shouldShowOption(item)'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' :icon='Search' @click='handleSearch'
            >查询
            </el-button
            >
            <el-button :icon="Delete" @click="handleRefresh"
            >重置
            </el-button
            >
            <!-- :disabled='!scope.isSelected' -->
            <el-button
                type='primary'
                :icon='Clock'
                @click="handleTest('手动检测')"
                v-if='form.activeTabs === 0'
            >手动检测
            </el-button
            >

            <!-- :disabled='!scope.isSelected' -->
            <el-button
                type='primary'
                :icon='ChatLineRound'
                @click="handleTest('一键检测')"
                v-if='form.activeTabs === 0'
            >一键检测
            </el-button>
<!--            <el-button type='primary' :icon='ChatLineSquare' @click="handleTest('不合格项复检')" v-if='form.activeTabs === 2'>不合格项复检</el-button>-->
<!--            <el-button type='primary' :icon='ChatDotSquare' @click="handleTest('全部复检')" v-if='form.activeTabs === 2'>全部复检</el-button>-->

            <!-- :disabled='!scope.isSelected' -->
            <!-- <el-button type="primary" :icon="Download"   @click="handleTest('批量下载')" v-if="form.activeTabs === 3"
              >报告下载</el-button
            > -->
            <!-- :disabled='!scope.isSelected' -->
            <!-- <el-button type="primary" :icon="Postcard"   @click="handleTest('批量生成')" v-if="form.activeTabs === 3"
              >报告生成</el-button
            > -->

            <!-- :disabled="!scope.isSelected || scope.selectedList.filter((item) => item.check_State === '检测完成').length === 0" -->
            <el-button type='primary' :icon='Notebook' @click="handleTest('批量归档')" v-if='form.activeTabs === 4'>归档</el-button>
            <!-- <el-button type="primary" :icon="CirclePlus" @click="addDevice('设备新增')" v-if="form.activeTabs === 0"
              >设备新增</el-button> -->

            <el-button type='primary' v-auth.role="'channelsTest'" :icon='Odometer' @click="handleTest('系数校准')"
                       v-if='form.activeTabs === 0'
            >系数校准
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- 表格操作 -->
      <template #operation='scope'>
        <el-button
            type='primary'
            link
            :icon='View'
            @click="openDrawer('查看', scope.row)"
            v-if='form.activeTabs === 3 && form.activeChildTabs === 1'
        >查看
        </el-button>


        <!-- <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
          <el-dropdown trigger='click'>
            <el-button link type='primary' :icon="Download" class='table-operate'>
              <div class='table-operate-text'>报告下载</div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Q/GDW 10650.2-2021 报告</el-dropdown-item>
                <el-dropdown-item>Q/GDW 1650.2-2016 报告</el-dropdown-item>
                <el-dropdown-item>GBT 19862-2016 报告</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div> -->

        <el-button
            type='primary'
            link
            :icon='Download'
            @click="openDrawer('报告下载', scope.row)"
            v-if='form.activeTabs === 3 && form.activeChildTabs === 0 && scope.row.reportState === 1'
        >报告下载
        </el-button>

        <el-button
            type='primary'
            link
            :icon='Postcard'
            @click="openDrawer('报告生成', scope.row)"
            v-if='form.activeTabs === 3 '
        >报告生成
        </el-button>
        <!-- <el-button
        type="primary"
          link
          :icon="View"
          @click="openDrawer('数据查看', scope.row)"
          v-if="form.activeTabs === 4"
          >数据查看</el-button
        > -->
        <el-button type='primary'
                   link
                   :icon='Notebook'
                   @click="openDrawer('归档', scope.row)"
                   v-if='form.activeTabs === 4'
                   :disabled='scope.row.reportState != 1'
        >归档
        </el-button>

        <el-button
            type='primary'
            link
            :icon='PieChart'
            @click="openDrawer('检测数据查询', scope.row)"
            v-if='form.activeTabs === 5'
        >检测数据查询
        </el-button>

        <el-button
            type='primary'
            link
            :icon='Switch'
            @click="openDrawer('误差体系更换', scope.row)"
            v-if='form.activeTabs === 5'
        >误差体系更换
        </el-button>

        <!-- <div class='cn-render-buttons' v-if="form.activeTabs === 5 ">
          <el-dropdown trigger='click'>
            <el-button link type='primary' :icon="Download" class='table-operate'>
              <div class='table-operate-text'>报告下载</div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
               
                <el-dropdown-item>Q/GDW 1650.2-2016 报告</el-dropdown-item>
                <el-dropdown-item>GBT 19862-2016 报告</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div> -->
        <!-- <el-button
          dictType="primary"
          link
          :icon="Delete"
          @click="deleteAccount(scope.row)"
          >删除</el-button
        > -->
      </template>
    </ProTable>

    <!-- 检测过程对话框 -->
    <!-- <testPopup
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
      @update:visible="dialogFormVisible = $event"
    /> -->
    <TestPopup ref='testPopup' @quitClicked='handleQuitClicked'></TestPopup>

    <reportPopup
        :visible='reportDialogVisible'
        @update:visible='reportDialogVisible = $event'
    ></reportPopup>

    <dataCheckPopup ref='dataCheckPopupRef'/>

    <matchPopup
        :visible='matchDialogVisible'
        @update:visible='matchDialogVisible = $event'
    ></matchPopup>

    <!--系数校准-->
    <ChannelsTest ref='channelsTest' :webMsgSend='webMsgSend' @quitClicked='handleQuitClicked' @submitClicked='handleSubmitClicked'></ChannelsTest>
    <!--  手动检测-勾选检测项弹窗  -->
    <SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup>
  </div>
</template>

<script setup lang='tsx' name='useProTable'>
import {useRouter} from 'vue-router'
import type {Device} from '@/api/device/interface/device'
import {useHandleData} from '@/hooks/useHandleData'
import {ElMessage, ElMessageBox, ElLoading, Action} from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import {type ProTableInstance, type ColumnProps} from '@/components/ProTable/interface'
import {
  Search,
  View,
  Delete,
  Download,
  EditPen,
  Clock,
  ChatLineRound,
  ChatLineSquare,
  ChatDotSquare,
  Postcard,
  Notebook,
  Switch,
  PieChart,
  CirclePlus,
  Odometer,
} from '@element-plus/icons-vue'
import {getPlanList} from '@/api/plan/planList'
import deviceDataList from '@/api/device/device/deviceData'
import TestPopup from './testPopup.vue'
import reportPopup from './reportPopup.vue'
import dataCheckPopup from './dataCheckSingleChannelSingleTestPopup.vue'
import dataCheckChangeErrSysPopup from './dataCheckChangeErrSysPopup.vue'
import {generateDevReport, getBoundPqDevList} from '@/api/plan/plan.ts'
import {onBeforeMount, onMounted, reactive, ref, watch} from 'vue'
import {useDictStore} from '@/stores/modules/dict'
import ChannelsTest from './channelsTest.vue'
import {useModeStore} from '@/stores/modules/mode' // 引入模式 store
import {useCheckStore} from '@/stores/modules/check'
import {CheckData} from '@/api/check/interface'
import socketClient from '@/utils/webSocketClient'
import auth from '@/directives/modules/auth'
import {useAuthStore} from '@/stores/modules/auth'
import {useDownload} from '@/hooks/useDownload'
import {downloadDevData} from '@/api/plan/plan.ts'
import {documentedPqDev} from '@/api/device/device'
import {getPqDev} from '@/api/device/device/index.ts'
import {ResultEnum} from '@/enums/httpEnum'
import SelectTestItemPopup from "@/views/home/components/selectTestItemPopup.vue";

const dictStore = useDictStore()
const checkStore = useCheckStore()
const webMsgSend = ref()//webSocket推送的数据
let devNum = 0//当前选取的被检设备数量
let devChannelsNum = 0//当前选择的被检设备通道总数
let devTestedNum = 0//当前选择的已完成检测的被检设备数量
const tableKey = ref(0)
const router = useRouter()
const value1 = ref('')
const value2 = ref('')
const tableHeight = ref(0)
const reportDialogVisible = ref(false)

const dataCheckPopupRef = ref<InstanceType<typeof dataCheckPopup>>()
const selectTestItemPopupRef = ref<InstanceType<typeof SelectTestItemPopup>>()

const matchDialogVisible = ref(false)
const dialogTitle = ref('手动检测')
const checkStateTable = ref<number[]>([0, 1, 2])
const dialogForm = ref<any>({
  id: '',
  name: '',
  standard_Name: '',
  standard_Time: '',
  dev_Level: '',
  enable: 1,
  state: 1,
})
const modeStore = useModeStore()
const shouldShowOption = (item) => {
  // 检查 weiJianTab 是否不等于 0
  if (weiJianTab.value !== 0) {
    // 排除 label 为“归档”和“未检”的项
    return item.label !== '归档' && item.label !== '未检'
  } else {
    // 只排除 label 为“归档”的项
    return item.label !== '归档'
  }
}

//开始创建webSocket客户端
const dataSocket = reactive({
  socketServe: socketClient.Instance,
});

tableHeight.value = window.innerHeight - 600
const deviceData = ref<Device.ResPqDev[]>([])
const operationShow = ref(false)
const documentStateShow = ref(false)
const checkStateShow = ref(true)
const factorCheckShow = ref(true)
const operationMinWidth = ref(200)
const selectionShow = ref(true)
const channelsTest = ref()
const testPopup = ref()
const weiJianTab = ref(0)//除设备检测外，检测结果不显示'未检'
const channelsSelection = ref<Device.ResPqDev[]>([])
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  isTimeCheck: {
    type: Boolean,
    required: true,
  },
  plan: {
    type: Object,
    default: null,
  },
})

const emit = defineEmits<{
  (e: 'batchGenerateClicked'): void;
}>()

// 存储设备类型选项
const devTypeOptions = ref<{
  id: string;
  name: string,
  icd: string,
  power: string,
  devVolt: number,
  devCurr: number,
  devChns: number,
}[]>([])

//下拉框数据
interface Dict {
  id: string;
  label: string;
}

//检测状态数据
const checkStatus: Dict[] = [
  {
    id: '0',
    label: '未检',
  },
  {
    id: '1',
    label: '检测中',
  },
  {
    id: '2',
    label: '检测完成',
  },
  {
    id: '3',
    label: '归档',
  },
]
//检测报告状态数据
const checkReportStatus: Dict[] = [
  {
    id: '0',
    label: '未生成',
  },
  {
    id: '1',
    label: '已生成',
  },
  {
    id: '2',
    label: '未检',
  },
]
//检测结果数组
const checkResult: Dict[] = [
  {
    id: '0',
    label: '不符合',
  },
  {
    id: '1',
    label: '符合',
  },
  {
    id: '2',
    label: '未检',
  },
]

//查询条件
const form: any = ref({
  activeTabs: 0, //功能选择
  search: null,//搜索内容
  activeChildTabs: 0,//子功能选择
  checkStatus: null, //检测状态
  checkResult: null, //检测结果
  checkReportStatus: null, //检测报告状态
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
})
const searchForm = ref({
  intervalType: 0,
  time: ['2024-08-20', '2024-08-27'],
  searchBeginTime: '',
  searchEndTime: '',
  checkStatus: 0,
  checkReportStatus: 0,
  checkResult: 0,
})
// ProTable 实例
const proTable = ref<ProTableInstance>()

const getTableList = async (params: any) => {
  //权限不包含通道系数，表格不展示列
  const authStore = useAuthStore()
  const currentPageRoles = authStore.authButtonListGet[authStore.routeName] ?? []
  if (!currentPageRoles.includes('channelsTest')) {
    factorCheckShow.value = false
  }


  // 调用 ProTable 的 clearSelection 方法清空选择
  if (proTable.value) {
    proTable.value.clearSelection()
  }
  if (props.id) {
    const checkStateList = ref<any>()
    if (form.value.checkStatus != null) {
      checkStateList.value = [form.value.checkStatus]
    } else {
      checkStateList.value = checkStateTable.value
    }
    //console.log('table，getBoundPqDevList')
    return getBoundPqDevList({
      'planId': props.id,
      'checkStateList': checkStateList.value,
      'checkResult': form.value.checkResult,
      'reportState': form.value.checkReportStatus,
      'name': form.value.search,
    })
  } else {//点击树根节点，表格显示无数据
    // return getBoundPqDevList({'planId': '',
    //                         'checkStateList': [0],
    //                         'checkResult': form.value.checkResult,
    //                         'reportState': form.value.checkReportStatus,
    //                         'name':form.value.search
    //                         });
  }
}

// 表格配置项
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
  {
    type: 'selection', fixed: 'left', width: 70,
    isShow: selectionShow,
    selectable(row) {
      if (weiJianTab.value === 4) {
        console.log(row.reportState)
        return row.reportState === 1
      }
      return true
    },
  },
  {type: 'index', fixed: 'left', width: 70, label: '序号'},
  {
    prop: 'name',
    label: '设备名称',
    minWidth: 220,
    //search: { el: 'input' },
  },
  {
    prop: 'devType',
    label: '设备类型',
    minWidth: 100,
    render: (scope) => {
      // 查找设备类型名称
      const name = devTypeOptions.value.find(option => option.id === scope.row.devType)
      return <span>{name?.name}</span>
    },
  },
  {
    prop: 'devChns',
    label: '通道数',
    minWidth: 100,
    sortable: true,
  },
  {
    prop: 'reCheckNum',
    label: '检测次数',
    minWidth: 100,
    sortable: true,
    // <template #header>
    //   <span>检测次数</span>
    //     <el-tooltip content = "最大检测次数为3次，超过会强制归档" placement="top" style="align-items: bottom;">
    //     <el-icon><InfoFilled  /></el-icon>
    //   </el-tooltip>
    // </template>
  },
  {
    prop: 'checkState',
    label: '检测状态',
    minWidth: 100,
    sortable: true,
    isShow: checkStateShow,
    render: scope => {
      return (
          scope.row.checkState === 0 ? '未检' : scope.row.checkState === 1 ? '检测中' : '检测完成'
      )
    },
  },
  {
    prop: 'checkResult',
    label: '检测结果',
    minWidth: 100,
    sortable: true,
    render: (scope) => {
      if (scope.row.checkResult === 0) {
        return <el-tag type='danger'>不符合</el-tag>
      } else if (scope.row.checkResult === 1) {
        return '符合'
      } else if (scope.row.checkResult === 2) {
        return '未检'
      }
      return ''
    },
  },
  {
    prop: 'reportState',
    label: '报告状态',
    minWidth: 100,
    sortable: true,
    render: scope => {
      if (scope.row.reportState === 0) {
        return '未生成'
      } else if (scope.row.reportState === 1) {
        return '已生成'
      } else if (scope.row.reportState === 2) {
        return '未检'
      }
      return ''
    },
  },
  {
    prop: 'factorCheckResult',
    label: '系数校准结果',
    minWidth: 100,
    sortable: true,
    isShow: factorCheckShow,
    render: scope => {
      if (scope.row.factorCheckResult === 0) {
        return '不合格'
      } else if (scope.row.factorCheckResult === 1) {
        return '合格'
      } else if (scope.row.factorCheckResult === 2) {
        return '/'
      }
      return ''
    },
  },
  {prop: 'operation', label: '操作', fixed: 'right', minWidth: 200, isShow: operationShow},
])
// 跳转详情页
const toDetail = () => {
  router.push(
      `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`,
  )
}
//重置查询条件
const resetSearchForm = () => {
  searchForm.value = {
    intervalType: 0,
    time: ['2024-08-20', '2024-08-27'],
    searchBeginTime: '',
    searchEndTime: '',
    checkStatus: 0,
    checkReportStatus: 0,
    checkResult: 0,
  }
}
let testType = 'test'//检测还是复检

const handleSelectionChange = (selection: any[]) => {
  channelsSelection.value = selection
  devNum = selection.length
  devChannelsNum = 0

  for (let i = 0; i < selection.length; i++) {
    devChannelsNum += selection[i].devChns
  }

  devTestedNum = selection.filter((item) => item.checkState === 2).length
  const result = selection.filter((item) => item.checkResult != 0)
  if (result.length > 0) {
    testType = 'test'
  } else {
    testType = 'reTest'
  }
  let devices: CheckData.Device[] = selection.map((item: any) => {
    return {
      deviceId: item.id,
      deviceName: item.name,
      chnNum: item.devChns,
      planId: item.planId,
      deviceType: item.devType,
      devVolt: item.devVolt,
      devCurr: item.devCurr,
      factorFlag: item.factorFlag,
    }
  })

  if (selection.length > 0) {
    checkStore.clearDevices()
    checkStore.addDevices(devices)
  } else {
    checkStore.clearDevices()
  }
}

//查询
const handleSearch = () => {
  //console.log('handleSearch，getBoundPqDevList')
  proTable.value?.getTableList()
}
//重置
const handleRefresh = () => {
  //console.log('handleRefresh，getBoundPqDevList')
  form.value.search = null
  form.value.checkStatus = null
  form.value.checkResult = null
  form.value.checkReportStatus = null
  proTable.value?.getTableList()
}
// 表格拖拽排序
const sortTable = ({
                     newIndex,
                     oldIndex,
                   }: {
  newIndex?: number;
  oldIndex?: number;
}) => {
  //console.log(newIndex, oldIndex);
  //console.log(proTable.value?.tableData);
  ElMessage.success('修改列表排序成功')
}


//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number, val2: number, tabledata: any[]) => {

  form.value.activeTabs = val
  form.value.activeChildTabs = val2
  deviceData.value = tabledata
  tableHeaderInit(val)
}

//根据当前功能，初始化表头下拉框中的默认值和禁用值
function tableHeaderInit(val: number) {
  refreshStatusList()
  weiJianTab.value = val
  switch (val) {
    case 0://设备检测
    case 1://手动检测
      //disableCheckStatus("检测中")
      disableCheckStatus('归档')
      // operationShow.value = false;
      // columns[columns.length - 1].minWidth = 100;
      checkStateTable.value = [0, 1, 2]
      tableKey.value++
      operationShow.value = false
      documentStateShow.value = false
      checkStateShow.value = true
      selectionShow.value = true
      factorCheckShow.value = true
      break
    case 2://设备复检
      // form.value.checkStatus = 2;//检测状态默认为检测完成
      // form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
      // form.value.checkResult = 1;//检测结果默认为不合格
      // disableCheckStatus("未检")
      // disableCheckStatus("检测中")
      // disableCheckStatus("归档")
      // disablecheckResultList("未出结果")
      // operationShow.value = false;
      break
    case 3://报告生成
      // form.value.checkStatus = 2;//检测状态默认为检测完成
      // form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
      // form.value.checkResult = 2;//检测结果默认为合格
      // disableCheckStatus("未检")
      // disableCheckStatus("检测中")
      // disableCheckStatus("归档")
      checkStateTable.value = [2, 3]
      disablecheckResultList('未检')
      disableCheckReportStatus('未检')
      columns[columns.length - 1].minWidth = 180
      tableKey.value += 1
      operationShow.value = true
      documentStateShow.value = true
      checkStateShow.value = false
      factorCheckShow.value = false
      selectionShow.value = true
      break
    case 4://设备归档
      // form.value.checkStatus = 2;//检测状态默认为检测完成
      // form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
      // form.value.checkResult = 2;//检测结果默认为合格
      // disableCheckStatus("未检")
      // disableCheckStatus("检测中")
      // disableCheckStatus("归档")
      checkStateTable.value = [2]
      disablecheckResultList('未检')
      disableCheckReportStatus('未检')
      columns[columns.length - 1].minWidth = 100
      tableKey.value += 1
      operationShow.value = true
      documentStateShow.value = false
      checkStateShow.value = false
      factorCheckShow.value = false
      selectionShow.value = true
      break
    case 5://数据查询
      checkStateTable.value = [2, 3]
      disablecheckResultList('未检')
      disableCheckReportStatus('未检')
      columns[columns.length - 1].minWidth = 290
      operationShow.value = true
      documentStateShow.value = true
      checkStateShow.value = false
      factorCheckShow.value = false
      selectionShow.value = false
      columns[0].isShow = false
      tableKey.value += 1
      break
  }
//console.log("test",columns);
  form.value.search = null
  form.value.checkStatus = null
  form.value.checkResult = null
  form.value.checkReportStatus = null
  //handleRefresh()
}

function refreshStatusList() {
  // devNum = 0;
  // devChannelsNum = 0;
  // devTestedNum = 0;
  devNum = 0
  devChannelsNum = 0
  devTestedNum = 0
  checkStatus.map((item: any, index: any) => {
    if (item.disabled) {
      item.disabled = false
    }
  })
  checkReportStatus.map((item: any, index: any) => {
    if (item.disabled) {
      item.disabled = false
    }
  })
  checkResult.map((item: any, index: any) => {
    if (item.disabled) {
      item.disabled = false
    }
  })

  form.value.checkStatus = null//检测状态默认为未检
  form.value.checkReportStatus = null//检测报告状态默认为未生成报告
  form.value.checkResult = null//检测结果默认为未出结果
}

function disableCheckStatus(val: string) {
  checkStatus.map((item: any, index: any) => {
    if (val == item.label) {
      item.disabled = true
    }
  })
}

function disableCheckReportStatus(val: string) {
  checkReportStatus.map((item: any, index: any) => {
    if (val == item.label) {
      item.disabled = true
    }
  })
}

function disablecheckResultList(val: string) {
  checkResult.map((item: any, index: any) => {
    if (val == item.label) {
      item.disabled = true
    }
  })
}

const addDevice = (val: string) => {
  router.push({
    path: '/machine/device',
  })
}

const handleTest = async (val: string) => {

  if (devNum == 0) {
    ElMessageBox.confirm(
        '请先选择被检设备',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
    )
    return
  }

  const checkDevVolt = channelsSelection.value.map(item => item.devVolt)
  const isDevVoltConsistent = new Set(checkDevVolt).size === 1
  if (!isDevVoltConsistent) {
    ElMessageBox.confirm(
        '所勾选设备额定电压不一致，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
    )
    return
  }

  const checkDevCurr = channelsSelection.value.map(item => item.devCurr)
  const isDevCurrConsistent = new Set(checkDevCurr).size === 1
  if (!isDevCurrConsistent) {
    ElMessageBox.confirm(
        '所勾选设备额定电流不一致，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
    )
    return
  }


  if (val === '手动检测' || val === '一键检测' || val === '系数校准') {
    // if (devNum > 6) {
    //   ElMessageBox.confirm(
    //     '每次检测最多只能选择6台设备，请重新选择',
    //     '提示',
    //     {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //     },
    //   )
    //   return
    // }
    // if (devTestedNum == 0) {
    //   ElMessageBox.confirm('请先选择检测完成状态的被检设备', '提示',
    //       {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning',
    //       })
    //   return
    // }
    const checkStates = channelsSelection.value.map(item => item.checkState)
    const allCheckStatesEqual = new Set(checkStates).size <= 1

    if (!allCheckStatesEqual) {
      // ElMessageBox.confirm(
      //     '所勾选设备检测状态不一致，请重新选择',
      //     '提示',
      //     {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning',
      //     },
      // )
      // return
      checkStore.setReCheckType(1)
    }
    if (devChannelsNum > 12) {
      ElMessageBox.confirm(
          '每次检测最多只能检测12个设备通道，请重新选择',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          },
      )
      return
    }

    dialogTitle.value = val
    if (val === '手动检测') {
      checkStore.setShowDetailType(2)
    
      if (testType === 'reTest') {
        ElMessageBox.confirm('请选择复检检测方式', '设备复检',
            {
              distinguishCancelAndClose: true,
              confirmButtonText: '不合格项复检',
              cancelButtonText: '全部复检',
              type: 'warning',
            })
            .then(() => {
              ElMessage.success('不合格项复检')
              if (checkStore.devices.length > 1) {
                checkStore.setReCheckType(1)
              } else {
                checkStore.setReCheckType(0)
              }
              selectTestItemPopupRef.value?.open()
            })
            .catch((action: Action) => {
              ElMessage.success('全部复检')
              checkStore.setReCheckType(1)
              selectTestItemPopupRef.value?.open()
            })
      } else {
        selectTestItemPopupRef.value?.open()
      }
    } else if (val === '系数校准') {
      // 检查 socketClient.Instance 是否存在
      if (!socketClient.Instance) {
            console.error('WebSocket 客户端实例不存在');
            return;
        }

      socketClient.Instance.connect();
      dataSocket.socketServe = socketClient.Instance;
      dataSocket.socketServe.registerCallBack('aaa', (res: { code: number; }) => {
        // 处理来自服务器的消息
        //console.log('Received message:', res)
        // 根据需要在这里添加更多的处理逻辑
        if (res.code === 20000) {
          ElMessage.error(message.message)
          loading.close()
        } else {
          webMsgSend.value = res
        }
      })

      channelsTest.value?.open(channelsSelection.value, props.plan)
      return
    } else {
      checkStore.setShowDetailType(2)
      checkStore.setCheckType(1)
      checkStore.initSelectTestItems()
      // 一键检测
      if (testType === 'reTest') {
        ElMessageBox.confirm('请选择复检检测方式', '设备复检',
            {
              distinguishCancelAndClose: true,
              confirmButtonText: '不合格项复检',
              cancelButtonText: '全部复检',
              type: 'warning',
            })
            .then(() => {
              ElMessage.success('不合格项复检')
              if (checkStore.devices.length > 1) {
                checkStore.setReCheckType(1)
              } else {
                checkStore.setReCheckType(0)
              }
              openTestDialog()
            })
            .catch((action: Action) => {
              ElMessage.success('全部复检')
              checkStore.setReCheckType(1)
              openTestDialog()
            })
      } else {
        openTestDialog()
      }
    }
  }
  if (val === '批量下载') {
    reportDialogVisible.value = true
    return
  }

  if (val === '批量归档') {
    // const loading = ElLoading.service({
    //   lock: true,
    //   text: '归档中...',
    //   background: 'rgba(0, 0, 0, 0.7)',
    // })
    // setTimeout(() => {
    //   loading.close()
    //   ElMessage.success("归档成功");
    // }, 2000)
    documentedPqDev(checkStore.devices.map(item => {
      item.deviceId
    })).then((res) => {
      if (res.code === ResultEnum.SUCCESS) {
        ElMessage.success('归档成功!')
      }
    })

    emit('batchGenerateClicked') // 触发事件
  }
}

const openTestDialog = () => {
  testPopup.value?.open(dialogTitle.value)
}

// 打开 drawer(新增、查看、编辑)
const openDrawer = async (title: string, row: any) => {
  if (title === '查看') {
    const link = document.createElement('a')
    const fileUrl = 'G:/南网数研院非结构化数据生成程序MMS_JSON修改记录.docx' // 文件路径
    link.href = fileUrl
    link.target = '_blank' // 在新标签页中打开
    link.download = 'file.docx' // 设置下载文件的名称
    link.click()
  }


  if (title === '报告生成') {
    await generateDevReport({'planId': checkStore.plan.id, 'devId': row.id,'scriptId':checkStore.plan.scriptId,'planCode':checkStore.plan.code+''})
    emit('batchGenerateClicked') // 触发事件
    ElMessage.success({message: `报告生成成功！`})
  }

  if (title === '报告下载') {
    await useDownload(downloadDevData, row.createId, {
      planId: checkStore.plan.id,
      devId: row.id,
    }, false, '.docx')
    emit('batchGenerateClicked') // 触发事件
  }

  if (title === '检测数据查询') {
    checkStore.setShowDetailType(0)
    dataCheckPopupRef.value?.open(row.id, '-1', null)
  }
  if (title === '误差体系更换') {
    checkStore.setShowDetailType(1)
    dataCheckPopupRef.value?.open(row.id, '-1', null)
  }


  if (title === '归档') {
    await documentedPqDev([row.id]).then((res) => {
      if (res.code === ResultEnum.SUCCESS) {
        ElMessage.success('归档成功!')
      }
    })
    emit('batchGenerateClicked') // 触发事件
    //   const loading = ElLoading.service({
    //   lock: true,
    //   text: '归档中...',
    //   background: 'rgba(0, 0, 0, 0.7)',
    // })
    // setTimeout(() => {
    //   loading.close()
    //   ElMessage.success("归档成功");
    // }, 2000)
  }
}

function formatDate(date: Date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  return `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`
}

// 监听 props.id 的变化
watch(
    () => props.id,
    (newId) => {
      handleRefresh()
      // 调用获取数据的方法
    },
    {immediate: true}, // 立即执行一次
)

onBeforeMount(async () => {
  const response = await getPqDev()
  devTypeOptions.value = response.data.map(item => ({
    id: item.id,
    name: item.name,
    icd: item.icd,
    power: item.power,
    devVolt: item.devVolt,
    devCurr: item.devCurr,
    devChns: item.devChns,
  }))
})

const handleQuitClicked = () => {
  //console.log('handleQuitClicked')
  dataSocket.socketServe.closeWs()
  emit('batchGenerateClicked') // 触发事件
}


const handleSubmitClicked = async (resolve: (value: boolean) => void) => {
  if (!dataSocket.socketServe.connected) {
    ElMessage.error('webSocket连接中断！请退出重新进行系数校准');
    resolve(false);
  } else {
    resolve(true);
  }
};

defineExpose({changeActiveTabs})
</script>
<style lang='scss' scoped>
/* 当屏幕宽度小于或等于1300像素时 */
@media screen and (max-width: 1300px) {
  .el-select {
    width: 130px !important;
  }
}

@media screen and (min-width: 1300px) {
  .el-select {
    width: 150px !important;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-button {
      margin: 0 !important;
      margin-right: 10px !important;
    }
  }
}

:deep(.card) {
  border: 0 !important;
}
</style>