球阀界面
This commit is contained in:
zy
parent
dacd296f0a
commit
1db9fd49ca
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 290 KiB |
|
|
@ -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"
|
||||
@cancel="handleCancel" footer="" >
|
||||
|
||||
|
||||
<a-descriptions title="" layout="vertical" bordered style="margin-top: 20px">
|
||||
<a-descriptions-item label="控制项">
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
</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;
|
||||
relayList:[];
|
||||
}
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
deployCode:'',
|
||||
dataTime: string;
|
||||
moduleList: [];
|
||||
runList: [];
|
||||
}
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
deployCode: '',
|
||||
delivery1: false,
|
||||
delivery2: false,
|
||||
dataTime:'',
|
||||
relayList:[],
|
||||
});
|
||||
dataTime: '',
|
||||
moduleList: [],
|
||||
runList: [],
|
||||
});
|
||||
|
||||
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>(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';
|
||||
const openMessage = () => {
|
||||
message.loading({ content: '发送指令中', key,duration:7});
|
||||
};
|
||||
|
||||
|
||||
|
||||
function switchChange(checked,relay) {
|
||||
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 });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -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.dataTime=res.result.dataTime
|
||||
formState.moduleList = res.result.moduleList;
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue