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

@@ -1,140 +1,122 @@
 <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-descriptions-item label="控制项">
+  <a-modal title="球阀控制" :width="width"  :body-style="bodystyle" :visible="visible" @ok="handleOk"
+  @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>-->
-          <div class="card-container">
-            <a-row :gutter="16" type="flex">
-              <a-col :span="8" v-for="group in formState.moduleList" :key="group.id" class="card-col">
-                <a-card :title="group.groupName" :bordered="true">
-                  <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 label="上报时间">
+      <a-input v-model:value="formState.dataTime"  disabled="true"/>
+    </a-form-item>
+
+    <a-form-item :label="item.relayName" v-for="item in formState.relayList" :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>
-  import { onMounted, ref, reactive, nextTick, defineExpose } from 'vue';
+  import { onMounted,ref, reactive,nextTick, defineExpose } from 'vue';
   import type { UnwrapRef } from 'vue';
-  import { getValveStatus, sendDeviceCmd, getRelayList } from '../SurvDeviceDeploy.api';
+  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;
+  deployCode:string;
   delivery1: boolean;
   delivery2: boolean;
   delivery3: boolean;
-    dataTime: string;
-    moduleList: [];
-    runList: [];
-  }
-  const formState: UnwrapRef<FormState> = reactive({
-    deployCode: '',
+  dataTime:string;
+  relayList:[];
+}
+const formState: UnwrapRef<FormState> = reactive({
+  deployCode:'',
   delivery1: false,
   delivery2: false,
-    dataTime: '',
-    moduleList: [],
-    runList: [],
-  });
+  dataTime:'',
+  relayList:[],
+});
 
-  const labelCol = { style: { width: '150px' } };
-  const wrapperCol = { span: 14 };
+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) {
+const key = 'updatable';
+const openMessage = () => {
+  message.loading({ content: '发送指令中', key,duration:7});
+};
+
+
+
+  function switchChange(checked,relay) {
     openMessage();
-    let ops = '';
-    if (checked === true) {
-      ops = '1';
-    } else if (checked === false) {
-      ops = '0';
+    let ops = "";
+    if(checked === true){
+      ops = "1";
+    }else if(checked === false){
+      ops = "0";
     }
-    let parmas = { relayId: relay.id, ops: ops };
+    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) => {
-        if (res.code == 500) {
-          //操作失败
-          formState.delivery1 = false;
+        if(checked === true){
+          sendDeviceCmd({deployCode:formState.deployCode,os:"01",valveCode:"01"}).then((res) => {
+        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) => {
-        if (res.code == 500) {
-          //操作失败
-          formState.delivery1 = true;
+        }else if(checked === false){
+          sendDeviceCmd({deployCode:formState.deployCode,os:"00",valveCode:"01"}).then((res) => {
+        if (res.code == 500) {//操作失败
+          formState.delivery1=true;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
         }
   }
 
+
   function on2SwitchChange(checked) {
     openMessage();
-    if (checked === true) {
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '02' }).then((res) => {
+    if(checked === true){
+          sendDeviceCmd({deployCode:formState.deployCode,os:"01",valveCode:"02"}).then((res) => {
         if (res.code == 500) {
-          formState.delivery2 = false;
+          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) => {
+        }else if(checked === false){
+          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 });
+          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.runList = res.result.runStatus;
-        formState.dataTime = res.result.dataTime;
+          formState.relayList = res.result.relayList;
+          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>