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></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="报告状态" v-if="form.activeTabs != 0">
            <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>

        <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>

        <!-- <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="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="scope.row.check_State === '检测完成' ? 'primary' : 'info'"
          link
          :icon="Notebook"
          @click="openDrawer('归档', scope.row)"
          v-if="form.activeTabs === 4"
          :disabled = "scope.row.checkState != 2"
          >归档</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 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
          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"></TestPopup>

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

    <dataCheckPopup ref="dataCheckPopupRef"/>

    <dataCheckChangeErrSysPopup
    :visible="dataCheckChangeErrSysDialogVisible"
      @update:visible="dataCheckChangeErrSysDialogVisible = $event"
      ></dataCheckChangeErrSysPopup>

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

      <!--系数校准-->
      <ChannelsTest  ref="channelsTest" :webMsgSend="webMsgSend"></ChannelsTest>
  </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 { getBoundPqDevList } from '@/api/plan/plan.ts'
import { 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";

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 dataCheckChangeErrSysDialogVisible = ref(false)
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 !== '归档';
  }
};

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
  }
})

//下拉框数据
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
  }
  return  getBoundPqDevList({'planId': props.id,
                             'checkStateList': checkStateList.value,
                             '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 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
      prop: 'name',
      label: '设备名称',
      minWidth: 220,
      //search: { el: 'input' },
    },
    {
      prop: 'devType',
      label: '设备类型',
      minWidth: 100,
      enum: dictStore.getDictData('Dev_Type'),
      fieldNames: { label: 'name', value: 'id' },
    },
    {
      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].dev_Chns;
  }

  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,
      deviceType: item.devType,
      chnNum: item.devChns,
    }
  });

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

//查询
const handleSearch = () => {
  proTable.value?.getTableList();
};
//重置
const handleRefresh = () => {
  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);
}

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==='不合格项复检'||val==='全部复检' )
  {
    if(devNum > 6)
    {
      ElMessageBox.confirm(
        '每次检测最多只能选择6台设备，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }
    if(devChannelsNum > 20)
    {
      ElMessageBox.confirm(
        '每次检测最多只能检测20个设备通道，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }
    if(testType === "reTest")
    {
      ElMessageBox.confirm(
        '请选择复检检测方式',
        '设备复检',
        {
          distinguishCancelAndClose: true,
          confirmButtonText: '不合格项复检',
          cancelButtonText: '全部复检',
          type: 'warning',
        },
    )
        .then(() => {
          ElMessage.success('不合格项复检');
          dialogTitle.value = val;
          testPopup.value?.open(channelsSelection.value,dialogTitle.value,props.isTimeCheck)// 打开对话框
        })
        .catch((action: Action) => {
          ElMessage.success('全部复检');
          dialogTitle.value = val;
          testPopup.value?.open(channelsSelection.value,dialogTitle.value,props.isTimeCheck) // 打开对话框
        })
    }
    else
    {
      dialogTitle.value = val;
      testPopup.value?.open(channelsSelection.value,dialogTitle.value,props.isTimeCheck)
    }
    return

  }

  if(val === '系数校准') {
    const checkStates = channelsSelection.value.map(item => item.checkState);
    const allCheckStatesEqual = new Set(checkStates).size <= 1;

    if (!allCheckStatesEqual) {
      ElMessageBox.confirm(
        '所勾选设备检测状态不一致，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }

    const factorFlagArray = ref<string[]>([]); // 初始化为空数组
    for (let i = 0; i < channelsSelection.value.length; i++) {
        const factorFlag = channelsSelection.value[i].factorFlag;
        if (factorFlag !== undefined && factorFlag !== null && factorFlag === 0) {
            factorFlagArray.value.push(channelsSelection.value[i].name.toString());
        }
    }
    if(factorFlagArray.value.length > 0){
      const factorFlags = factorFlagArray.value.join(', ');
      ElMessageBox.confirm(
        factorFlags + '设备不支持系数校准，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }

  // 检查 socketClient.Instance 是否存在
  if (!socketClient.Instance) {
        console.error('WebSocket 客户端实例不存在');
        return;
    }

    //开始创建webSocket客户端
    const data = reactive({
      socketServe: socketClient.Instance,
    });
    const url = 'ws://localhost:7777/hello?name=cdf';
    socketClient.Instance.connect(url);
    data.socketServe = socketClient.Instance;
    data.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;
}
  
  if(devTestedNum == 0)
  {
    ElMessageBox.confirm(
      '请先选择检测完成状态的被检设备',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    return
  }
  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}))
  }


  
};


// 打开 drawer(新增、查看、编辑)
const openDrawer = (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 === '生成')
    {
      //reportDialogVisible.value = true;
      useDownload(downloadDevData,'调试报告'+formatDate(new Date()), {planId:checkStore.planId,devId:row.id}, false,'.docx')
    }
      
    if(title === '检测数据查询')
    {
      dataCheckPopupRef.value?.open(row.id,'-1',null)
    }
    if (title === '误差体系更换')
    {
      dataCheckChangeErrSysDialogVisible.value = true;
    }


    if (title === '归档')
    {
      documentedPqDev([row.id])
    //   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) => {

    // 调用获取数据的方法
    handleSearch();
  },
  { immediate: 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>