pqs-9100_client/frontend/src/views/machine/controlSource/index.vue

<template>
    <div>
        <el-card style="margin-bottom: 10px" class="cardTop">
            <el-form
                :inline="true"
                label-width="auto"
                ref="dialogFormRef"
                class="form-five"
            >
            <el-form-item label='检测源' prop='sourceId' >
            <el-select  v-model="controlContent.sourceId" collapse-tags placeholder="请选择检测源">
              <el-option
                v-for="(option, index) in pqSourceArray"
                :key="index"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
                <el-form-item>
                    <div class="formBut">
                        <el-button type="primary" :icon="Select" @click="start()">通讯校验</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-if="show">
            <ControlSourceDetail v-if="secondLevelOptions.length > 0" :options="secondLevelOptions" :formContent="formContent" />
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, nextTick, onMounted, onBeforeMount, reactive } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import ControlSourceDetail from '@/views/machine/controlSource/components/controlSourceDetail.vue'
import { type TestScript } from '@/api/device/interface/testScript'
import type { Dict } from '@/api/system/dictionary/interface'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
import { Select } from '@element-plus/icons-vue'
import { pqScriptAdd } from '@/api/device/testScript'
import { getTestSourceList } from '@/api/plan/plan.ts'
import { TestSource } from '@/api/device/interface/testSource'
import { CascaderOption, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import socketClient from '@/utils/webSocketClient'
import { checkSimulate } from '@/api/device/controlSource/index.ts'
import { controlSource } from '@/api/device/interface/controlSource'
const show = ref(false)
const router = useRouter()
const modeId = ref()
const sourceValue = ref([])
const secondLevelOptions: any[] = []
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const pqSourceList=ref<TestSource.ResTestSource[]>([])//获取指定模式下所有检测源 
const modeStore = useModeStore()
const pqSourceArray = ref<{ label: string; value: string; }[]>()
const formContent = ref<TestScript.ResTestScript>({
        id : '9ff96807cf8c7524587982ed8baa8b57',
        name: '测试',
        type: '1',
        valueType: '2973cb938b591b93d0df2547599b87d8',
        pattern: modeId.value,
        standardName: 'GBT 19862',
        standardTime: '2025',
        state: 1
    })

const controlContent = ref<controlSource.ResControl>({
        userPageId: '', 
        scriptId: '',  
        scriptIndex: '',
        sourceId: '',  
})
//开始创建webSocket客户端
const dataSocket = reactive({
  socketServe: socketClient.Instance,
});
const webMsgSend = ref()//webSocket推送的数据
onMounted(async () => {
     // 检查 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
        }
      })

    const pqSource_Result = await getTestSourceList({
        'pattern': "a303b2224845fcc6f60098b8ca73dca7",
        datasourceIds: '',
        sourceIds: '',
        planId: '',
        scriptName: '',
        errorSysName: '',
        sourceName: '',
        devIds: [],
        id: '',
        name: '',
        dataSourceId: '',
        scriptId: '',
        errorSysId: '',
        timeCheck: 0,
        testState: 0,
        reportState: 0,
        result: 0,
        code: 0,
        state: 1
    })
    pqSourceList.value = pqSource_Result.data as TestSource.ResTestSource[];
    const sourceArray1 = Array.isArray(pqSourceList.value) ? pqSourceList.value : []
      // 将 pqSource_Result 转换成 { label, value } 数组
      pqSourceArray.value = sourceArray1.map(item => ({
        label: item.name  || '',
        value: item.id
      }));
    nextTick(async () => {
            await treeInfo(modeStore.currentMode)
            formContent.value.pattern = modeId.value
            show.value = true
    })
})

watch(webMsgSend, function (newValue, oldValue) {
  switch (newValue.requestId) {
    case 'connect':
      switch (newValue.operateCode) {
        case "Source":
        ElMessage.error('源服务端连接失败')
      }
      break;
   
  }

})
// 获取树字典
const treeInfo = async (currentMode: string) => {
    const data: Dict.ResDictTree = {
        name: '',
        id: '',
        pid: '',
        pids: '',
        code: 'Script_Indicator_Items',
        sort: 0
    }
    const result = await getDictTreeByCode(data)
    const result1 = (await getDictTreeByCode({ ...data, code: 'Script_Error' })).data[0].children
    const allOptions = await convertToOptions(result.data as Dict.ResDictTree[])
    const setAllTree = await setTree(allOptions[0]?.children, result1)
    secondLevelOptions.push(...(setAllTree || []))
    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
    console.log('🚀 ~ treeInfo ~ result1:', currentMode)
}

const setTree = async (data, data1) => {
    data.forEach(item => {
        data1.forEach(item1 => {
            if (item.label.replace(/准确度|检测/g, '') == item1.name) {
                item.value = item1.id
            }
        })
    })
    return data
}

// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
    return dictTree.map(item => ({
        value: item.id,
        code: item.code.split('-')[1] || item.code.split('-')[0],
        label: item.name,
        children: item.children ? convertToOptions(item.children) : undefined
    }))
}


const start = async () => {
    controlContent.value.userPageId = 'cdf'
    controlContent.value.scriptId = '9ff96807cf8c7524587982ed8baa8b5'
    controlContent.value.scriptIndex = '1'
    await checkSimulate(controlContent.value)
}

// 对外映射
defineExpose({ open })
</script>
<style lang="scss" scoped>
/* .dialog-content {
  padding: 10px;
} */
:deep(.cardTop) {
    .el-card__body {
        padding: 20px 0 0 20px;
    }
}
.formBut {
    width: 50%;
    display: flex;
    justify-content: end;
}
.form-five {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 22.8%;

        .el-form-item__content {
            flex: 1;
            .el-select,
            .el-cascader,
            .el-input__inner,
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>