Merge remote-tracking branch 'origin/main'

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

@@ -1,122 +1,140 @@
 <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-modal title="球阀控制" :width="width"  :body-style="bodystyle" :visible="visible" @ok="handleOk"
+    <a-descriptions title="" layout="vertical" bordered style="margin-top: 20px">
-  @cancel="handleCancel"  footer="" >
+      <a-descriptions-item label="控制项">
-
-
         <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
-
+<!--          <a-form-item label="上报时间">-->
-    <a-form-item label="上报时间">
+<!--            <a-input v-model:value="formState.dataTime" disabled="true" />-->
-      <a-input v-model:value="formState.dataTime"  disabled="true"/>
+<!--          </a-form-item>-->
-    </a-form-item>
+          <div class="card-container">
-
+            <a-row :gutter="16" type="flex">
-    <a-form-item :label="item.relayName" v-for="item in formState.relayList" :key="item.id">
+              <a-col :span="8" v-for="group in formState.moduleList" :key="group.id" class="card-col">
-      <a-switch v-model:checked="formState[item.id]" checked-children="打开" un-checked-children="关闭"  @change="(checked) => switchChange(checked, item)"/>
+                <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>
+                </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: '250px',
+    height: '900px',
     margin: '20px',
-}
+  };
 
   interface FormState {
-  deployCode:string;
+    deployCode: string;
     delivery1: boolean;
     delivery2: boolean;
     delivery3: boolean;
-  dataTime:string;
+    dataTime: string;
-  relayList:[];
+    moduleList: [];
-}
+    runList: [];
-const formState: UnwrapRef<FormState> = reactive({
+  }
-  deployCode:'',
+  const formState: UnwrapRef<FormState> = reactive({
+    deployCode: '',
     delivery1: false,
     delivery2: false,
-  dataTime:'',
+    dataTime: '',
-  relayList:[],
+    moduleList: [],
-});
+    runList: [],
+  });
 
-const labelCol = { style: { width: '150px' } };
+  const labelCol = { style: { width: '150px' } };
-const wrapperCol = { span: 14 };
+  const wrapperCol = { span: 14 };
   const title = ref<string>('');
-  const width = ref<number>(400);
+  const width = ref<number>(1000);
   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 });
+  };
 
-const key = 'updatable';
+  function switchChange(checked, relay) {
-const openMessage = () => {
-  message.loading({ content: '发送指令中', key,duration:7});
-};
-
-
-
-  function switchChange(checked,relay) {
     openMessage();
-    let ops = "";
+    let ops = '';
-    if(checked === true){
+    if (checked === true) {
-      ops = "1";
+      ops = '1';
-    }else if(checked === false){
+    } else if (checked === false) {
-      ops = "0";
+      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){
+    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;
+          //操作失败
+          formState.delivery1 = false;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
-        }else if(checked === false){
+    } 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;
+          //操作失败
+          formState.delivery1 = true;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
     }
   }
 
-
   function on2SwitchChange(checked) {
     openMessage();
-    if(checked === true){
+    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;
+          formState.delivery2 = false;
           message.error({ content: res.message, key, duration: 2 });
         }
       });
-        }else if(checked === false){
+    } 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;
+          formState.delivery2 = true;
-          message.error({ content:res.message, key, duration: 2 });
+          message.error({ content: res.message, key, duration: 2 });
         }
       });
     }
@@ -129,19 +147,16 @@ const openMessage = () => {
     title.value = '球阀控制';
     visible.value = true;
 
-
     getRelayList({ deployId: record.deployId }).then((res) => {
       if (res.code == 200) {
-          formState.relayList = res.result.relayList;
+        formState.moduleList = res.result.moduleList;
-          formState.dataTime=res.result.dataTime
+        formState.runList = res.result.runStatus;
+        formState.dataTime = res.result.dataTime;
       } else {
       }
-      })
+    });
-
-
   }
 
-
   // getValveStatus({ deployCode: record.deployCode }).then((res) => {
   //   if (res.code == 200) {
   //     formState.dataTime=res.result.dataTime
@@ -206,4 +221,20 @@ const openMessage = () => {
   .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>