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-four"
      >
        <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 label='检测脚本' prop='scriptId'>
          <el-select v-model="controlContent.scriptId" collapse-tags placeholder="请选择检测脚本" @change="handleScriptChange">
            <el-option
                v-for="(option, index) in scriptArray"
                :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()" :disabled="connectDisabeld">通讯校验</el-button>
          <el-button v-if="!connectDisabeld" type="text" style="color: #303133" disabled>源未连接</el-button>
          <el-button v-else type="text" style="color: #67c23a" disabled>源连接成功</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" :formControl="controlContent"
                           @update:activeName="handleActiveNameChange"
                           @update:active-index="handleActiveIndexChange"

                           v-model:startDisabeld="startDisabeld"
                           @update:startDisabeld="startDisabeld=$event"
                           v-model:pauseDisabled="pauseDisabled"
                           @update:pauseDisabled="pauseDisabled=$event"
      ref="controlSourceDetailRef"/>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, onMounted, onBeforeMount, reactive, watch } 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'
import {getPqScriptList} from '@/api/plan/plan.ts'

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 scriptArray = reactive<{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 connectDisabeld = ref(false)
const startDisabeld = ref(true)
const pauseDisabled = ref(true)
const controlSourceDetailRef=ref<InstanceType<typeof ControlSourceDetail>>()

const controlContent = ref<controlSource.ResControl>({
  userPageId: '',
  scriptId: '',
  scriptIndex: 0,
  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
  }));
  controlContent.value.sourceId = pqSourceArray.value[0].value

  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id //获取数据字典中对应的id
  const {data} = await getPqScriptList({pattern:patternId})
  scriptArray.push(...data.map(item => ({ label: item.name, value: item.id})))
  if(scriptArray.length > 0){
    controlContent.value.scriptId = scriptArray[0].value
  }

  nextTick(async () => {
    await treeInfo(modeStore.currentMode)
    formContent.value.pattern = modeId.value
    show.value = true
  })
})

watch(webMsgSend, function (newValue, oldValue) {
  console.log('webMsgSend:', newValue)
  if (newValue.requestId.includes('formal_real&&') && newValue.operateCode === 'OPER_GATHER') {
    if (newValue.code === 10200) {
      ElMessage.success('启动成功!')
      startDisabeld.value = false
      pauseDisabled.value = false
      controlSourceDetailRef.value?.startTimeCount()
    }else if(newValue.code !== 10201){
      ElMessage.error('启动失败!')
      startDisabeld.value = false
      pauseDisabled.value = true
      console.log('错误信息:',webMsgSend)
    }
  }
  if (newValue.requestId.includes('close_source') && newValue.operateCode === 'CLOSE_GATHER') {
    if (newValue.code === 10200) {
      setTimeout(() => {
        ElMessage.success('停止成功!')
        connectDisabeld.value = false
        startDisabeld.value = true
        pauseDisabled.value = true
        controlSourceDetailRef.value?.stopTimeCount()
      }, 5000)
    } else {
      ElMessage.error('停止失败!')
      startDisabeld.value = true
      pauseDisabled.value = false
      console.log('错误信息:',webMsgSend)
    }
  }
  switch (newValue.requestId) {
    case 'yjc_ytxjy':
      switch (newValue.operateCode) {
        case 'INIT_GATHER':
          if (newValue.code == 10200) {
            ElMessage.success('源连接成功!')
            connectDisabeld.value = true
            startDisabeld.value = false
            pauseDisabled.value = false
          } else if(newValue.code !== 10201) {
            ElMessage.error('源连接失败!')
            console.log('错误信息:',webMsgSend)
            connectDisabeld.value = false
            startDisabeld.value = true
            pauseDisabled.value = true
          }
          break;


      }
      break;
    case 'connect':
      switch (newValue.operateCode) {
        case "Source":
          ElMessage.error('源连接失败!')
      }
      break;
    case 'server_error':
      if(newValue.operateCode === 'server_error'){
        ElMessage.error('服务端主动关闭连接,请20秒后重试!')
        connectDisabeld.value = true
        startDisabeld.value = true
        pauseDisabled.value = true
        setTimeout(() => {
          connectDisabeld.value = false
          startDisabeld.value = true
          pauseDisabled.value = true
        }, 20000)
      }
      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
}

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 scriptId = ref('')
const scriptIndex = ref(0)
const handleActiveNameChange = (newActiveName: string) => {
  scriptId.value = newActiveName
}

const handleActiveIndexChange = (newActiveIndex: number) => {

  scriptIndex.value = newActiveIndex
}


// 定义 handleScriptChange 方法
const handleScriptChange = (value: string) => {
  // 根据业务需求实现具体逻辑
  console.log('检测脚本变更:', value);
  router.push({
                path: '/machine/controlSource',
                state: { title: '新增检测脚本', row: '', mode: modeStore.currentMode }
            })
}
const start = async () => {
 
  controlContent.value.userPageId = 'cdf'
  controlContent.value.scriptIndex = scriptIndex.value
  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-four {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  .el-form-item {
    display: flex;
    width: 24.0%;

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