src/views/appmana/deploy/components/ControlModal.vue

@@ -1,42 +1,23 @@
 <template>
-  <a-modal title="球阀控制" :width="width" :body-style="bodystyle" :visible="visible" @ok="handleOk" @cancel="handleCancel" footer="">
-    <a-descriptions
-      title="运行状态"
-      layout="vertical"
-      bordered
-      :labelStyle="{ fontWeight: 'bold', textAlign: 'center' }"
-      :contentStyle="{ textAlign: 'center' }"
-    >
-      <a-descriptions-item :label="item.moduleName" v-for="item in formState.runList" :key="item.id"> <span>停止</span> </a-descriptions-item>
-    </a-descriptions>
 
-    <a-descriptions title="" layout="vertical" bordered style="margin-top: 20px">
+  <a-modal title="球阀控制" :width="width"  :body-style="bodystyle" :visible="visible" @ok="handleOk"
-      <a-descriptions-item label="控制项">
+  @cancel="handleCancel"  footer="" >
+
+
   <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
-<!--          <a-form-item label="上报时间">-->
+
-<!--            <a-input v-model:value="formState.dataTime" disabled="true" />-->
+    <a-form-item label="上报时间">
-<!--          </a-form-item>-->
+      <a-input v-model:value="formState.dataTime"  disabled="true"/>
-          <div class="card-container">
+    </a-form-item>
-            <a-row :gutter="16" type="flex">
+
-              <a-col :span="8" v-for="group in formState.moduleList" :key="group.id" class="card-col">
+    <a-form-item :label="item.relayName" v-for="item in formState.relayList" :key="item.id">
-                <a-card :title="group.groupName" :bordered="true">
+      <a-switch v-model:checked="formState[item.id]" checked-children="打开" un-checked-children="关闭"  @change="(checked) => switchChange(checked, item)"/>
-                  <template #extra><a href="#">一键启动</a></template>
-                  <a-form-item :label="item.moduleName" v-for="item in group.modules" :key="item.id">
-                    <a-switch
-                      v-model:checked="formState[item.id]"
-                      checked-children="打开"
-                      un-checked-children="关闭"
-                      @change="(checked) => switchChange(checked, item)"
-                    />
     </a-form-item>
-                </a-card>
-              </a-col>
-            </a-row>
-          </div>
   </a-form>
-      </a-descriptions-item>
-    </a-descriptions>
   </a-modal>
+
+
+
 </template>
 
 <script lang="ts" setup>
@@ -45,10 +26,11 @@
   import { getValveStatus,sendDeviceCmd,getRelayList } from '../SurvDeviceDeploy.api';
   import { message } from 'ant-design-vue';
 
+
   const bodystyle = {
-    height: '900px',
+  height: '250px',
   margin: '20px',
-  };
+}
 
   interface FormState {
   deployCode:string;
@@ -56,64 +38,63 @@
   delivery2: boolean;
   delivery3: boolean;
   dataTime:string;
-    moduleList: [];
+  relayList:[];
-    runList: [];
 }
 const formState: UnwrapRef<FormState> = reactive({
   deployCode:'',
   delivery1: false,
   delivery2: false,
   dataTime:'',
-    moduleList: [],
+  relayList:[],
-    runList: [],
 });
 
 const labelCol = { style: { width: '150px' } };
 const wrapperCol = { span: 14 };
   const title = ref<string>('');
-  const width = ref<number>(1000);
+  const width = ref<number>(400);
   const visible = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
   const emit = defineEmits(['register', 'success']);
 
+
 const key = 'updatable';
 const openMessage = () => {
   message.loading({ content: '发送指令中', key,duration:7});
 };
 
+
+
   function switchChange(checked,relay) {
     openMessage();
-    let ops = '';
+    let ops = "";
     if(checked === true){
-      ops = '1';
+      ops = "1";
     }else if(checked === false){
-      ops = '0';
+      ops = "0";
     }
     let parmas = {relayId:relay.id,ops:ops};
     sendDeviceCmd(parmas).then((res) => {
-      if (res.code == 500) {
+      if (res.code == 500) {//操作失败
-        //操作失败
         formState[relay.id] = false;
         message.error({ content: res.message, key, duration: 2 });
       }
     });
   }
 
+
   function on1SwitchChange(checked) {
     openMessage();
         if(checked === true){
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '01' }).then((res) => {
+          sendDeviceCmd({deployCode:formState.deployCode,os:"01",valveCode:"01"}).then((res) => {
-        if (res.code == 500) {
+        if (res.code == 500) {//操作失败
-          //操作失败
           formState.delivery1=false;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
         }else if(checked === false){
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '01' }).then((res) => {
+          sendDeviceCmd({deployCode:formState.deployCode,os:"00",valveCode:"01"}).then((res) => {
-        if (res.code == 500) {
+        if (res.code == 500) {//操作失败
-          //操作失败
           formState.delivery1=true;
           message.error({ content: res.message, key, duration: 2 });
         }
@@ -121,17 +102,18 @@
         }
   }
 
+
   function on2SwitchChange(checked) {
     openMessage();
     if(checked === true){
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '02' }).then((res) => {
+          sendDeviceCmd({deployCode:formState.deployCode,os:"01",valveCode:"02"}).then((res) => {
         if (res.code == 500) {
           formState.delivery2=false;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
         }else if(checked === false){
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '02' }).then((res) => {
+          sendDeviceCmd({deployCode:formState.deployCode,os:"00",valveCode:"02"}).then((res) => {
         if (res.code == 500) {
           formState.delivery2=true;
           message.error({ content:res.message, key, duration: 2 });
@@ -147,16 +129,19 @@
     title.value = '球阀控制';
     visible.value = true;
 
+
     getRelayList({ deployId: record.deployId }).then((res) => {
         if (res.code == 200) {
-        formState.moduleList = res.result.moduleList;
+          formState.relayList = res.result.relayList;
-        formState.runList = res.result.runStatus;
+          formState.dataTime=res.result.dataTime
-        formState.dataTime = res.result.dataTime;
         } else {
         }
-    });
+      })
+
+
   }
 
+
   // getValveStatus({ deployCode: record.deployCode }).then((res) => {
   //   if (res.code == 200) {
   //     formState.dataTime=res.result.dataTime
@@ -221,20 +206,4 @@
   .jee-hidden {
     display: none !important;
   }
-
-  .card-container {
-    width: 100%;
-  }
-
-  .card-col {
-    flex: 0 0 33.333333%; /* 每个卡片占1/3宽度 */
-    max-width: 33.333333%; /* 最大宽度也是1/3 */
-    margin-bottom: 16px; /* 行间距 */
-  }
-
-  /* 可选：固定卡片高度统一 */
-  :deep(.ant-card) {
-    height: 100%;
-    min-height: 180px;
-  }
 </style>