websocket

src/api/project/excute.ts

@@ -13,10 +13,10 @@ export function searhTestType(data?: object): AxiosPromise {
 // 测试仪器配置列表查询
 export function searchTestMachineConfig(engineeringId: string): AxiosPromise {
   return request({
-    url: "/api/v1/test/engrInstrumentConfig/list",
+    url: "/api/v1/test/instrument/list",
     method: "post",
     data: {
-      engineeringIdList: [engineeringId, 0],
+      engineeringIdList: [engineeringId],
       instrumentProperty: 2,
       pageSize: 100,
     },

src/views/modules/global-config/components/resourceDetail.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import {
+  addInstrumentResource,
+  selectCommunicateType,
+  selectInstrumentType,
+  updateInstrumentResource,
+} from "@/api/config";
+
+const addVisible = ref(false);
+const dialogType = ref("1"); // 1新增 2修改
+const formRef = ref(null);
+const formData = ref({
+  baudRate: "",
+  channel: "",
+  checkBit: "",
+  commConfig: "",
+  commType: "",
+  connUrl: "",
+  dataBit: "",
+  instrumentModule: "",
+  instrumentName: "",
+  instrumentProperty: "1",
+  instrumentType: "",
+  ip: "",
+  port: "",
+  queryUrl: "",
+  slot: "",
+  stopBit: "",
+  writeUrl: "",
+});
+
+const openDialog = (data: any) => {
+  getDevTypes();
+  getCommTypes();
+
+  addVisible.value = true;
+
+  nextTick(() => {
+    formRef.value?.resetFields();
+  });
+
+  formData.value = data;
+};
+
+defineExpose({
+  openDialog,
+});
+
+// 查询仪器类型
+const deviceTypeOptions = ref<any[]>([]);
+const getDevTypes = () => {
+  selectInstrumentType().then((res) => {
+    deviceTypeOptions.value = res.data;
+  });
+};
+// 查询通讯类型
+const commTypeOptions = ref<any[]>([]);
+const getCommTypes = () => {
+  selectCommunicateType({}).then((res) => {
+    commTypeOptions.value = res.data;
+  });
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="addVisible"
+    :append-to-body="true"
+    width="500"
+    align-center
+  >
+    <el-form
+      label-width="auto"
+      ref="formRef"
+      v-model:model="formData"
+      style="max-width: 800px"
+    >
+      <el-form-item label="波特率" prop="baudRate">
+        <div v-text="formData.baudRate" />
+      </el-form-item>
+      <el-form-item label="通道号" prop="channel">
+        <div v-text="formData.channel" />
+      </el-form-item>
+      <el-form-item label="校验位" prop="checkBit">
+        <div v-text="formData.checkBit" />
+      </el-form-item>
+      <el-form-item label="通信配置" prop="commConfig">
+        <div class="detail-content" v-text="formData.commConfig" />
+      </el-form-item>
+      <el-form-item label="连接url" prop="connUrl">
+        <div v-text="formData.connUrl" />
+      </el-form-item>
+      <el-form-item label="数据位" prop="dataBit">
+        <div v-text="formData.dataBit" />
+      </el-form-item>
+      <el-form-item label="配置型号" prop="instrumentModule">
+        <div v-text="formData.instrumentModule" />
+      </el-form-item>
+      <el-form-item label="仪器名称" prop="instrumentName">
+        <div v-text="formData.instrumentName" />
+      </el-form-item>
+      <!--      <el-form-item label="仪器属性" prop="instrumentProperty">-->
+      <!--        <div v-text="formData.instrumentProperty" />-->
+      <!--      </el-form-item>-->
+      <el-form-item label="设备地址" prop="ip">
+        <div v-text="formData.ip" />
+      </el-form-item>
+      <el-form-item label="设备端口" prop="port">
+        <div v-text="formData.port" />
+      </el-form-item>
+      <el-form-item label="读url" prop="queryUrl">
+        <div v-text="formData.queryUrl" />
+      </el-form-item>
+      <el-form-item label="槽位号" prop="slot">
+        <div v-text="formData.slot" />
+      </el-form-item>
+      <el-form-item label="停止位" prop="stopBit">
+        <div v-text="formData.stopBit" />
+      </el-form-item>
+      <el-form-item label="写url" prop="writeUrl">
+        <div v-text="formData.writeUrl" />
+      </el-form-item>
+
+      <el-form-item label="通信类型" prop="commType">
+        <el-select
+          v-model="formData.commType"
+          placeholder="请选择通信类型"
+          disabled
+          size="large"
+        >
+          <el-option
+            v-for="item in commTypeOptions"
+            :key="item.id"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="仪器类型" prop="instrumentType">
+        <el-select
+          v-model="formData.instrumentType"
+          placeholder="请选择仪器类型"
+          disabled
+          size="large"
+        >
+          <el-option
+            v-for="item in deviceTypeOptions"
+            :key="item.id"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.detail-content {
+  width: 100%;
+  overflow: hidden;
+}
+</style>

src/views/modules/global-config/deviceResources.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import SecondHeader from "@/views/modules/conmon/SecondHeader.vue";
 import ResourceForm from "./components/resourceForm.vue";
+import ResourceDetail from "./components/resourceDetail.vue";
 import { delInstrumentResource, selectInstrumentResource } from "@/api/config";
 
 const resourceList = ref<any[]>([]);
@@ -29,6 +30,11 @@ const addConfigFun = () => {
 };
 
 const resourceRef = ref();
+const detailRef = ref();
+
+const showDetail = (row: any) => {
+  detailRef.value && detailRef.value.openDialog(row);
+};
 </script>
 
 <template>
@@ -68,7 +74,7 @@ const resourceRef = ref();
       <el-table-column label="仪器类型" prop="instrumentType">
       </el-table-column>
 
-      <el-table-column label="操作" prop="操作" fixed="right" width="180">
+      <el-table-column label="操作" prop="操作" fixed="right" width="220">
         <template #default="scope">
           <el-button
             text
@@ -86,11 +92,20 @@ const resourceRef = ref();
           >
             修改
           </el-button>
+          <el-button
+            text
+            size="small"
+            type="primary"
+            @click="showDetail(scope.row)"
+          >
+            查看
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <ResourceForm ref="resourceRef" @finished="getList"></ResourceForm>
+    <ResourceDetail ref="detailRef"></ResourceDetail>
   </div>
 </template>
 

src/views/modules/runTest/run-test.vue

@@ -46,6 +46,29 @@ const topProAllList = ref<any[]>([]);
 const topProSelectedList = ref<any[]>([]);
 const checkAll = ref(false);
 const isIndeterminate = ref(true);
+// 根据状态改变已经选择的项目的上方的名字
+const getSelectedStatusValue = (status: number) => {
+  // 1：未测试 2：正在测试 3：测试合格 4：测试不合格
+  let value = ["", "", ""]; //上方名字  中间icon class
+  switch (status) {
+    case 1:
+      value = ["未开始", "", "bg-normal"];
+      break;
+    case 2:
+      value = ["测试中", "Frame", "bg-progress"];
+      break;
+    case 3:
+      value = ["合格", "gougou", "bg-success"];
+      break;
+    case 4:
+      value = ["失败", "chacha", "bg-error"];
+      break;
+    default:
+      value = ["未开始", "", "bg-normal"];
+  }
+
+  return value;
+};
 
 const handleCheckAllChange = (val: CheckboxValueType) => {
   topProSelectedList.value = val
@@ -64,6 +87,12 @@ const getTestProjectTopList = () => {
   getTestProjectList({ engineeringId: route?.params?.engineerId })
     .then((result) => {
       topProAllList.value = result.data;
+
+      topProAllList.value[0].status = 1;
+      topProAllList.value[1].status = 2;
+      topProAllList.value[2].status = 3;
+      topProAllList.value[3].status = 4;
+
       topProSelectedList.value = result.data.map((item) => item.id); // 默认选中全部
     })
     .finally(() => {
@@ -159,6 +188,19 @@ const getSattisticData = () => {
 };
 
 // ===== websocket ====
+const logList = ref<any[]>([]); //日志数据
+const testingWSData = computed(() => {
+  //   根据选择的测试项目的名字作为key，值是空数组用来存放 日志数据
+  console.log("aa", topProSelectedList);
+  let data = {};
+  topProSelectedList.value.forEach((id) => {
+    // 根据id去所有的数据中找对应的项目
+    let project = topProAllList.value.find((item) => item.id == id);
+    data[project.projectName] = [];
+  });
+  return data;
+});
+
 const wsClient = useWebSocket(import.meta.env.VITE_WEBSOCKET_URL as string, {
   autoReconnect: {
     retries: 300,
@@ -180,7 +222,64 @@ const wsClient = useWebSocket(import.meta.env.VITE_WEBSOCKET_URL as string, {
     console.log("长链接断开");
   },
   onMessage: (msg) => {
-    console.log("长链接的消息", msg);
+    if (wsClient.data.value) {
+      let msgType = wsClient.data.value?.msgtype ?? "";
+
+      // 执行过程日志
+      if (msgType == 1) {
+        // let l = { data: { log: "label: 直流电源" }, msgtype: 1 };
+        let logData = wsClient.data.value?.data?.log;
+        if (logData) {
+          logList.value.push(logData);
+        }
+      }
+      // 测试数据
+      else if (msgType === 2) {
+        // {
+        //   "msgtype": 2,
+        //   "data": {
+        //   "status": 1,				// 1：未测试 2：正在测试 3：测试合格 4：测试不合格
+        //     "dataContent": "",
+        //     "dataItem": "",
+        //     "EngineeringId": "",
+        //     "projectId": "",
+        // }
+        // }
+        let logData = wsClient.data.value?.data;
+        if (logData) {
+          //   根据 projectId 去已经选择的项目中找到名字
+          let project = topProSelectedList.value.find(
+            (item) => item.id == logData.projectId
+          );
+          project.status = logData.status;
+          let proName = project?.projectName;
+          testingWSData.value[proName].push(logData);
+        }
+      }
+      // 测试仪器列表状态
+      else if (msgType === 3) {
+        // {
+        //   "msgtype": 3,
+        //   "data": [{
+        //   "deviceNo":"",				/* 设备编号 */
+        //   "devcieState":""				/* 0不在线，1在线 */
+        // }
+        // ]
+        // }
+        let devData = wsClient.data.value?.data ?? [];
+        devData.forEach((item) => {
+          //   根据 instrumentId 去已经选择的仪器中找到名字
+          let machine = testingMachines.value.find(
+            (machine) => machine.instrumentId == item.instrumentId
+          );
+          if (machine) {
+            machine.deviceState = item.deviceState; // 更新仪器状态
+          }
+        });
+      }
+    }
+
+    console.log("长链接的消息", data.value);
   },
 });
 
@@ -232,25 +331,37 @@ const checkStartEnable = (): boolean => {
       </div>
       <el-scrollbar height="100%">
         <div class="test-list">
+          <!--          // 1：未测试 2：正在测试 3：测试合格 4：测试不合格-->
           <div
             v-for="item in topOnShowProList"
             :key="item.id"
             class="test-list-item"
-            :class="item === 2 ? 'active' : ''"
+            :class="item.status == '2' ? 'active' : ''"
           >
-            <!-- //后面根据状态动态修改class -->
-            <!-- //'success',合格
-                'error', 失败
-                'progress',测试中
-                 'wait' 未开始-->
-            <!--  :class="['success', 'error', 'progress', 'wait']"-->
             <div class="body" :class="['success']">
-              <div class="line"></div>
-              <div class="head">合格</div>
+              <div
+                class="line"
+                :class="getSelectedStatusValue(item.status)[2]"
+              ></div>
+              <div class="head">
+                {{ getSelectedStatusValue(item.status)[0] }}
+              </div>
               <div class="icon">
-                <svg-icon icon-class="gougou" class="svg svg-success" />
-                <svg-icon icon-class="chacha" class="svg svg-error" />
-                <svg-icon icon-class="Frame" class="svg svg-progress" />
+                <svg-icon
+                  v-if="item.status == '3'"
+                  icon-class="gougou"
+                  class="svg svg-success"
+                />
+                <svg-icon
+                  v-else-if="item.status == '4'"
+                  icon-class="chacha"
+                  class="svg svg-error"
+                />
+                <svg-icon
+                  v-else-if="item.status == '2'"
+                  icon-class="Frame"
+                  class="svg svg-progress"
+                />
               </div>
               <div class="name">{{ item.projectName }}</div>
             </div>
@@ -308,7 +419,7 @@ const checkStartEnable = (): boolean => {
                 <el-option
                   v-for="item in excutingMachinesList"
                   :key="item.id"
-                  :label="item.configName"
+                  :label="item.instrumentName"
                   :value="item"
                 />
               </el-select>
@@ -319,8 +430,8 @@ const checkStartEnable = (): boolean => {
           </el-form-item>
         </el-form>
         <div>
-          <svg-icon icon-class="gougou" class="svg-success" />
-          <span>192.168.0.109</span>
+          <!--          <svg-icon icon-class="gougou" class="svg-success" />-->
+          <span>{{ selectedExcutingMachine?.ip }}</span>
         </div>
         <div class="csyq-tit">
           <span>测试仪器</span>
@@ -337,7 +448,12 @@ const checkStartEnable = (): boolean => {
             >
               <div>
                 <span class="item-icon">
-                  <svg-icon icon-class="gougou" class="svg-success" />
+                  <svg-icon
+                    v-if="item.deviceState == '1'"
+                    icon-class="gougou"
+                    class="svg-success"
+                  />
+                  <svg-icon v-else icon-class="chacha" class="svg-error" />
                 </span>
                 <span>{{ item.configName }}</span>
               </div>
@@ -351,8 +467,9 @@ const checkStartEnable = (): boolean => {
         <titHeader icon-class="zxgcrz" tit="执行过程日志" />
         <el-scrollbar class="content-B-height-3">
           <div class="content-log">
-            开始执行，时间14：28：32 打开电源 打开射频开关
-            执行增益测试，结果合格 执行杂波测试，结果合格 测试完成 电源关闭
+            <span v-for="(item, index) in logList" :key="index">{{
+              item?.label
+            }}</span>
           </div>
         </el-scrollbar>
       </div>
@@ -367,12 +484,16 @@ const checkStartEnable = (): boolean => {
           <span>数据内容</span>
         </div>
         <el-scrollbar class="content-B-height-4">
-          <div>
-            <div class="cssj-tit">测试项目：1dB压缩点</div>
-            <div v-for="(item, index) in 5" :key="index" class="cssj-row-flex">
+          <div v-for="(proName, index) in Object.keys(testingWSData)">
+            <div class="cssj-tit">项目名称: {{ proName }}</div>
+            <div
+              v-for="(data, index) in testingWSData[proName]"
+              :key="index"
+              class="cssj-row-flex"
+            >
               <span>{{ index }}</span>
-              <span>数据项</span>
-              <span>数据内容</span>
+              <span>{{ data?.dataItem }}</span>
+              <span>{{ data?.dataContent }}</span>
             </div>
           </div>
         </el-scrollbar>
@@ -513,6 +634,9 @@ $color-progress: #3cbaff;
   font-size: var(--hj-fs-22);
   color: var(--fc-color-7);
 }
+.svg-normal {
+  background-color: $hj-white-1;
+}
 .svg-success {
   color: $color-success;
 }
@@ -523,6 +647,19 @@ $color-progress: #3cbaff;
   color: $color-progress;
 }
 
+.bg-normal {
+  background-color: $hj-white-1;
+}
+.bg-error {
+  background-color: $color-error;
+}
+.bg-success {
+  background-color: $color-success;
+}
+.bg-progress {
+  background-color: $color-progress;
+}
+
 .runtest {
   position: absolute;
   top: 0;
@@ -602,44 +739,12 @@ $color-progress: #3cbaff;
           margin-top: 50px;
           margin-bottom: 50px;
           font-size: var(--hj-fs-32);
-          .svg {
-            display: none;
-          }
         }
         .name {
           font-weight: bold;
           font-size: var(--hj-fs-14);
         }
       }
-      .body.success {
-        .line {
-          background-color: #8fe200;
-        }
-        .svg-success {
-          display: block;
-        }
-      }
-      .body.error {
-        .line {
-          background-color: #f83c64;
-        }
-        .svg-error {
-          display: block;
-        }
-      }
-      .body.progress {
-        .line {
-          background-color: #3cbaff;
-        }
-        .svg-progress {
-          display: block;
-        }
-      }
-      .body.wait {
-        .line {
-          background-color: #ededed;
-        }
-      }
     }
   }
   .content-B {