区域信息各弹窗宽度调整

This commit is contained in:
1378012178@qq.com 2026-02-04 15:37:38 +08:00
parent 9250a74507
commit e57dbf7c97
4 changed files with 526 additions and 501 deletions

View File

@ -1,16 +1,18 @@
<template> <template>
<div > <div>
<a-row> <a-row>
<a-col v-for="(item,index) in sxtList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 9px;"> <a-col v-for="(item, index) in sxtList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px',border:'0px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"> style="padding: 9px;">
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px', border: '0px' }"
:bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title> <template #title>
<a-row style="font-weight: normal;"> <a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;"> <a-col :span="18" style="font-size: 14px;">
<div>SN<span style="font-weight: bold;">{{item.sn}}</span></div> <div>SN<span style="font-weight: bold;">{{ item.sn }}</span></div>
<div style="font-size: 12px;">名称{{item.deviceName}}</div> <div style="font-size: 12px;">名称{{ item.deviceName }}</div>
</a-col> </a-col>
<a-col :span="6" style="display: flex; justify-content: flex-end;"> <a-col :span="6" style="display: flex; justify-content: flex-end;">
<div :class="item.deviceStatus=='1'?'zxClass':'lxClass'">{{item.deviceStatus=='1'?'在线':'离线'}}</div> <div :class="item.deviceStatus == '1' ? 'zxClass' : 'lxClass'">{{ item.deviceStatus == '1' ? '在线' : '离线' }}</div>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-divider style="margin: 10px 0 0 0" /> <a-divider style="margin: 10px 0 0 0" />
@ -27,9 +29,9 @@
</a-col> </a-col>
<a-col :span="12" style="margin-top: -1px;"><a-tag color="purple">摄像头</a-tag></a-col> <a-col :span="12" style="margin-top: -1px;"><a-tag color="purple">摄像头</a-tag></a-col>
<a-col :span="12" style="margin-top: -11px;text-align:right;"> <a-col :span="12" style="margin-top: -11px;text-align:right;">
<span v-if="item.maintainStatus==0" style="font-weight:700;font-size:16px;">正常</span> <span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span>
<span v-if="item.maintainStatus==1" style="font-weight:700;font-size:16px;color:red;">维修中</span> <span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span>
<span v-if="item.maintainStatus==2" style="font-weight:700;font-size:16px;">报废</span> <span v-if="item.maintainStatus == 2" style="font-weight:700;font-size:16px;">报废</span>
<div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div> <div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div>
</a-col> </a-col>
</a-row> </a-row>
@ -37,15 +39,16 @@
<p style="text-align:center;margin-bottom:5px !important"> <p style="text-align:center;margin-bottom:5px !important">
<span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)"> <span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
<span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br />
<span class="antTitle">预览</span> <span class="antTitle">预览</span>
</span> </span>
<!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handlePicConfig(item)"> <!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handlePicConfig(item)">
<span class="tbClass"><img src="../../../../assets/iot/a12.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a12.png" style="width:20px;" /></span><br/>
<span class="antTitle">画面配置</span> <span class="antTitle">画面配置</span>
</span> --> </span> -->
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'1')" v-if="item.maintainStatus==0"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item, '1')"
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/> v-if="item.maintainStatus == 0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br />
<span class="antTitle">报修</span> <span class="antTitle">报修</span>
</span> </span>
</p> </p>
@ -53,16 +56,18 @@
</a-col> </a-col>
<a-col v-for="(item,index) in zndbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;"> <a-col v-for="(item, index) in zndbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px',border:'0px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"> style="padding: 8px;">
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px', border: '0px' }"
:bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title> <template #title>
<a-row style="font-weight: normal;"> <a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;"> <a-col :span="18" style="font-size: 14px;">
<div>SN<span style="font-weight: bold;">{{item.address}}</span></div> <div>SN<span style="font-weight: bold;">{{ item.address }}</span></div>
<div style="font-size: 12px;">抄表时间{{item.readTime?item.readTime:'未抄表'}}</div> <div style="font-size: 12px;">抄表时间{{ item.readTime ? item.readTime : '未抄表' }}</div>
</a-col> </a-col>
<a-col :span="6" style="display: flex; justify-content: flex-end;"> <a-col :span="6" style="display: flex; justify-content: flex-end;">
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'合闸':'拉闸'}}</div> <div :class="item.relayState == '1' ? 'zxClass' : 'lxClass'">{{ item.relayState == '1' ? '合闸' : '拉闸' }}</div>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-divider style="margin: 10px 0 0 0" /> <a-divider style="margin: 10px 0 0 0" />
@ -75,44 +80,48 @@
{{item.nuName?item.nuName:'未配置'}} {{item.nuName?item.nuName:'未配置'}}
</a-col> --> </a-col> -->
<a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:10px;"> <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:10px;">
<span>{{item.eleValue?item.eleValue:'0.00'}}</span> <span>{{ item.eleValue ? item.eleValue : '0.00' }}</span>
</a-col> </a-col>
<a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;"> <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
<div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div> <div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div> <div style="margin-top:-3px;"><span
style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
</a-col> </a-col>
<a-col :span="12" style="margin-top: 10px;"><a-tag color="red">智能电表</a-tag></a-col> <a-col :span="12" style="margin-top: 10px;"><a-tag color="red">智能电表</a-tag></a-col>
<a-col :span="12" style="margin-top: 0px;text-align:right;"> <a-col :span="12" style="margin-top: 0px;text-align:right;">
<span v-if="item.maintainStatus==0" style="font-weight:700;font-size:16px;">正常</span> <span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span>
<span v-if="item.maintainStatus==1" style="font-weight:700;font-size:16px;color:red;">维修中</span> <span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span>
<span v-if="item.maintainStatus==2" style="font-weight:700;font-size:16px;">报废</span> <span v-if="item.maintainStatus == 2" style="font-weight:700;font-size:16px;">报废</span>
<div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div> <div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div>
</a-col> </a-col>
</a-row> </a-row>
<a-divider style="margin: 10px 0 20px 0" /> <a-divider style="margin: 10px 0 20px 0" />
<p style="text-align:center;margin-bottom:5px !important"> <p style="text-align:center;margin-bottom:5px !important">
<span style="display:inline-block;cursor: pointer;" @click="handleRead(item)"> <span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
<span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br />
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlLz(item)" v-if="item.relayState=='1'"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlLz(item)"
<span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br/> v-if="item.relayState == '1'">
<span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br />
<span class="antTitle">拉闸</span> <span class="antTitle">拉闸</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlHz(item)" v-if="item.relayState=='0'"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlHz(item)"
<span class="tbClass"><img src="../../../../assets/iot/a2.png" style="width:20px;" /></span><br/> v-if="item.relayState == '0'">
<span class="tbClass"><img src="../../../../assets/iot/a2.png" style="width:20px;" /></span><br />
<span class="antTitle">合闸</span> <span class="antTitle">合闸</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleReset(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleReset(item)">
<span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br />
<span class="antTitle">清零</span> <span class="antTitle">清零</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br />
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'2')" v-if="item.maintainStatus==0"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item, '2')"
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/> v-if="item.maintainStatus == 0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br />
<span class="antTitle">报修</span> <span class="antTitle">报修</span>
</span> </span>
</p> </p>
@ -120,16 +129,18 @@
</a-col> </a-col>
<a-col v-for="(item,index) in znsbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;"> <a-col v-for="(item, index) in znsbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px',border:'0px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"> style="padding: 8px;">
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '70px', padding: '0 24px', border: '0px' }"
:bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title> <template #title>
<a-row style="font-weight: normal;"> <a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;"> <a-col :span="18" style="font-size: 14px;">
<div>SN<span style="font-weight: bold;">{{item.address}}</span></div> <div>SN<span style="font-weight: bold;">{{ item.address }}</span></div>
<div style="font-size: 12px;">抄表时间{{item.readTime?item.readTime:'未抄表'}}</div> <div style="font-size: 12px;">抄表时间{{ item.readTime ? item.readTime : '未抄表' }}</div>
</a-col> </a-col>
<a-col :span="6" style="display: flex; justify-content: flex-end;"> <a-col :span="6" style="display: flex; justify-content: flex-end;">
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'开阀':'关阀'}}</div> <div :class="item.relayState == '1' ? 'zxClass' : 'lxClass'">{{ item.relayState == '1' ? '开阀' : '关阀' }}</div>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-divider style="margin: 10px 0 0 0" /> <a-divider style="margin: 10px 0 0 0" />
@ -142,60 +153,67 @@
{{item.nuName?item.nuName:'未配置'}} {{item.nuName?item.nuName:'未配置'}}
</a-col> --> </a-col> -->
<a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:10px;"> <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:10px;">
<span>{{item.waterValue?item.waterValue:'0.00'}}</span> <span>{{ item.waterValue ? item.waterValue : '0.00' }}</span>
</a-col> </a-col>
<a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;"> <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
<div style="font-size: 12px;margin: 8px 0 -5px 2px;"></div> <div style="font-size: 12px;margin: 8px 0 -5px 2px;"></div>
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用水量</span></div> <div style="margin-top:-3px;"><span
style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用水量</span></div>
</a-col> </a-col>
<a-col :span="12" style="margin-top: 10px;"><a-tag color="blue">智能水表</a-tag></a-col> <a-col :span="12" style="margin-top: 10px;"><a-tag color="blue">智能水表</a-tag></a-col>
<a-col :span="12" style="margin-top: 0px;text-align:right;"> <a-col :span="12" style="margin-top: 0px;text-align:right;">
<span v-if="item.maintainStatus==0" style="font-weight:700;font-size:16px;">正常</span> <span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span>
<span v-if="item.maintainStatus==1" style="font-weight:700;font-size:16px;color:red;">维修中</span> <span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span>
<span v-if="item.maintainStatus==2" style="font-weight:700;font-size:16px;">报废</span> <span v-if="item.maintainStatus == 2" style="font-weight:700;font-size:16px;">报废</span>
<div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div> <div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div>
</a-col> </a-col>
</a-row> </a-row>
<a-divider style="margin: 10px 0 20px 0" /> <a-divider style="margin: 10px 0 20px 0" />
<p style="text-align:center;margin-bottom:5px !important"> <p style="text-align:center;margin-bottom:5px !important">
<span style="display:inline-block;cursor: pointer;" @click="handleSbRead(item)"> <span style="display:inline-block;cursor: pointer;" @click="handleSbRead(item)">
<span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br />
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlLz(item)" v-if="item.relayState=='0'"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlLz(item)"
<span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br/> v-if="item.relayState == '0'">
<span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br />
<span class="antTitle">开阀</span> <span class="antTitle">开阀</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlHz(item)" v-if="item.relayState=='1'"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlHz(item)"
<span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br/> v-if="item.relayState == '1'">
<span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br />
<span class="antTitle">关阀</span> <span class="antTitle">关阀</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbReset(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbReset(item)">
<span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br />
<span class="antTitle">清零</span> <span class="antTitle">清零</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiWaterLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiWaterLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br />
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'3')" v-if="item.maintainStatus==0"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item, '3')"
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/> v-if="item.maintainStatus == 0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br />
<span class="antTitle">报修</span> <span class="antTitle">报修</span>
</span> </span>
</p> </p>
</a-card> </a-card>
</a-col> </a-col>
<a-col v-for="(item,index) in wsdjList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;"> <a-col v-for="(item, index) in wsdjList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
<a-card style="width: 100%;border-radius: 8px;min-height:280px;" :headStyle="{ height: '70px', padding: '0 24px',border:'0px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"> style="padding: 8px;">
<a-card style="width: 100%;border-radius: 8px;min-height:280px;"
:headStyle="{ height: '70px', padding: '0 24px', border: '0px' }"
:bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title> <template #title>
<a-row style="font-weight: normal;"> <a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;"> <a-col :span="18" style="font-size: 14px;">
<div>SN<span style="font-weight: bold;">{{item.sn}}</span></div> <div>SN<span style="font-weight: bold;">{{ item.sn }}</span></div>
<div style="font-size: 12px;">抄表时间{{item.reportingTime?item.reportingTime:'未抄表'}}</div> <div style="font-size: 12px;">抄表时间{{ item.reportingTime ? item.reportingTime : '未抄表' }}</div>
</a-col> </a-col>
<a-col :span="6" style="display: flex; justify-content: flex-end;"> <a-col :span="6" style="display: flex; justify-content: flex-end;">
<div :class="item.status=='0'?'zxClass':'lxClass'">{{item.status=='0'?'在线':'离线'}}</div> <div :class="item.status == '0' ? 'zxClass' : 'lxClass'">{{ item.status == '0' ? '在线' : '离线' }}</div>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-divider style="margin: 10px 0 0 0" /> <a-divider style="margin: 10px 0 0 0" />
@ -211,31 +229,33 @@
<a-row> <a-row>
<a-col :span="11" style="text-align: center;"> <a-col :span="11" style="text-align: center;">
<span><img src="../../../../assets/iot/a8.png" style="width:25px;margin-top: -1px;" /></span> <span><img src="../../../../assets/iot/a8.png" style="width:25px;margin-top: -1px;" /></span>
<span style="font-size: 30px;font-weight:700;">{{item.temperature?item.temperature:'-'}}</span> <span style="font-size: 30px;font-weight:700;">{{ item.temperature ? item.temperature : '-' }}</span>
<span style="font-size: 16px;"></span> <span style="font-size: 16px;"></span>
</a-col> </a-col>
<a-col :span="2" style="text-align: center;"> <a-col :span="2" style="text-align: center;">
<a-divider type="vertical" style="height: 40px;"/> <a-divider type="vertical" style="height: 40px;" />
</a-col> </a-col>
<a-col :span="11" style="text-align: center;"> <a-col :span="11" style="text-align: center;">
<span style="margin-top:0px;"><img src="../../../../assets/iot/a9.png" style="width:25px;margin-top: -15px;" /></span> <span style="margin-top:0px;"><img src="../../../../assets/iot/a9.png"
<span style="font-size: 30px;font-weight:700;margin-left: 6px;">{{item.humidity?item.humidity:'-'}}</span> style="width:25px;margin-top: -15px;" /></span>
<span
style="font-size: 30px;font-weight:700;margin-left: 6px;">{{ item.humidity ? item.humidity : '-' }}</span>
<span style="font-size: 16px;">%</span> <span style="font-size: 16px;">%</span>
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="12" style="margin-top: 20px;"><a-tag color="green">温湿度计</a-tag></a-col> <a-col :span="12" style="margin-top: 20px;"><a-tag color="green">温湿度计</a-tag></a-col>
<a-col :span="12" style="margin-top: 10px;text-align:right;"> <a-col :span="12" style="margin-top: 10px;text-align:right;">
<span v-if="item.maintainStatus==0" style="font-weight:700;font-size:16px;">正常</span> <span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span>
<span v-if="item.maintainStatus==1" style="font-weight:700;font-size:16px;color:red;">维修中</span> <span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span>
<span v-if="item.maintainStatus==2" style="font-weight:700;font-size:16px;">报废</span> <span v-if="item.maintainStatus == 2" style="font-weight:700;font-size:16px;">报废</span>
<div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div> <div style="font-size: 12px;color: #9d9d9d;margin-top:-5px">报修状态</div>
</a-col> </a-col>
</a-row> </a-row>
<a-divider style="margin: 10px 0 20px 0" /> <a-divider style="margin: 10px 0 20px 0" />
<p style="text-align:center;margin-bottom:5px !important;"> <p style="text-align:center;margin-bottom:5px !important;">
<span style="display:inline-block;cursor: pointer;" @click="handleWsdjRead(item)"> <span style="display:inline-block;cursor: pointer;" @click="handleWsdjRead(item)">
<span class="tbClass"><img src="../../../../assets/iot/a7.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a7.png" style="width:20px;" /></span><br />
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleEdit(item)"> <!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleEdit(item)">
@ -243,17 +263,19 @@
<span class="antTitle">配置</span> <span class="antTitle">配置</span>
</span> --> </span> -->
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showWsdjApiLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showWsdjApiLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br />
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'4')" v-if="item.maintainStatus==0"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item, '4')"
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/> v-if="item.maintainStatus == 0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br />
<span class="antTitle">报修</span> <span class="antTitle">报修</span>
</span> </span>
</p> </p>
</a-card> </a-card>
</a-col> </a-col>
<a-col v-if="zndbList?.records.length==0 && znsbList?.records.length==0 && wsdjList?.records.length == 0" span="24"> <a-col v-if="zndbList?.records.length == 0 && znsbList?.records.length == 0 && wsdjList?.records.length == 0"
span="24">
<div style="margin: 30px auto;"> <div style="margin: 30px auto;">
<a-empty /> <a-empty />
</div> </div>
@ -269,40 +291,40 @@
<CameraPreviewModal ref="previewModal"></CameraPreviewModal> <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
<CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal> <CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, defineExpose, h } from 'vue'; import { ref, reactive, defineExpose, h } from 'vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import {eleReset, eleControl, eleRead } from '/@/views/iot/tq/electricity/electricity.api'; import { eleReset, eleControl, eleRead } from '/@/views/iot/tq/electricity/electricity.api';
import {Modal} from "ant-design-vue"; import { Modal } from "ant-design-vue";
import ApiLogModal from "@/views/iot/tq/electricity/apilog/ApiLogModal.vue"; import ApiLogModal from "@/views/iot/tq/electricity/apilog/ApiLogModal.vue";
import ApiLogWaterModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue"; import ApiLogWaterModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
import ApiLogAlarmModal from '/@/views/iot/yiweilian/components/ApiLogAlarmModal.vue' import ApiLogAlarmModal from '/@/views/iot/yiweilian/components/ApiLogAlarmModal.vue'
import DeviceInfoDrawer from "/@/views/iot/yiweilian/components/DeviceInfoDrawer.vue"; import DeviceInfoDrawer from "/@/views/iot/yiweilian/components/DeviceInfoDrawer.vue";
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue' import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
import CameraPictureConfigModal from '/@/views/iot/tplink/camera/components/CameraPictureConfigModal.vue'; import CameraPictureConfigModal from '/@/views/iot/tplink/camera/components/CameraPictureConfigModal.vue';
import {useDrawer} from "@/components/Drawer"; import { useDrawer } from "@/components/Drawer";
import {updateDeviceRealTime} from '/@/views/iot/yiweilian/humid.api'; import { updateDeviceRealTime } from '/@/views/iot/yiweilian/humid.api';
import {eleSbReset, eleSbControl, eleSbRead } from "/@/views/iot/tq/water/water.api"; import { eleSbReset, eleSbControl, eleSbRead } from "/@/views/iot/tq/water/water.api";
import { ReloadOutlined } from '@ant-design/icons-vue'; import { ReloadOutlined } from '@ant-design/icons-vue';
const formRef = ref(); const formRef = ref();
const apiLogModal = ref(); const apiLogModal = ref();
const apiLogWaterModal = ref(); const apiLogWaterModal = ref();
const apiLogAlarmModal = ref(); const apiLogAlarmModal = ref();
const previewModal = ref(); const previewModal = ref();
const cameraPictureConfigModal = ref(); const cameraPictureConfigModal = ref();
const sxtList = ref<any>({records: []});// const sxtList = ref<any>({ records: [] });//
const zndbList = ref<any>({records: []});// const zndbList = ref<any>({ records: [] });//
const znsbList = ref<any>({records: []});// const znsbList = ref<any>({ records: [] });//
const wsdjList = ref<any>({records: []});//湿 const wsdjList = ref<any>({ records: [] });//湿
const anyInfo = ref<any>({});// const anyInfo = ref<any>({});//
//drawer //drawer
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
function handleBaoxiu(record,type){ function handleBaoxiu(record, type) {
console.log("🚀 ~ handleBaoxiu ~ record,type:", record,type) console.log("🚀 ~ handleBaoxiu ~ record,type:", record, type)
Modal.confirm({ Modal.confirm({
title: '报修', title: '报修',
@ -312,16 +334,16 @@ console.log("🚀 ~ handleBaoxiu ~ record,type:", record,type)
cancelText: '取消', cancelText: '取消',
async onOk() { async onOk() {
var url = ""; var url = "";
if(type=='1'){// if (type == '1') {//
url = '/iot/tplink/cameraInfo/baoxiu'; url = '/iot/tplink/cameraInfo/baoxiu';
}else if(type=='2'){ // } else if (type == '2') { //
url = '/iot/tq/electricityMeter/baoxiu'; url = '/iot/tq/electricityMeter/baoxiu';
}else if(type=='3'){ // } else if (type == '3') { //
url = '/iot/tq/waterMeter/baoxiu'; url = '/iot/tq/waterMeter/baoxiu';
}else if(type=='4'){ //湿 } else if (type == '4') { //湿
url = '/iot/yiweilian/humidDevice/baoxiu'; url = '/iot/yiweilian/humidDevice/baoxiu';
} }
defHttp.post({url: url,params:{id:record.id}}).then(res => { defHttp.post({ url: url, params: { id: record.id } }).then(res => {
edit(anyInfo.value); edit(anyInfo.value);
}); });
}, },
@ -336,218 +358,218 @@ function edit(record) {
getWsdj(record);//湿 getWsdj(record);//湿
} }
// //
function getSxt(record){ function getSxt(record) {
var queryParam = {pageSize:-1,nuId:record.nuId} var queryParam = { pageSize: -1, nuId: record.nuId }
defHttp.get({url: '/iot/tplink/cameraInfo/list',params:queryParam}).then(res => { defHttp.get({ url: '/iot/tplink/cameraInfo/list', params: queryParam }).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res) console.log("🚀 ~ defHttp.get ~ res:", res)
sxtList.value = res; sxtList.value = res;
console.log("🚀 ~ defHttp.get ~ 获取摄像头:", sxtList) console.log("🚀 ~ defHttp.get ~ 获取摄像头:", sxtList)
}); });
} }
// //
function getZndb(record){ function getZndb(record) {
var queryParam = {pageSize:-1,nuId:record.nuId} var queryParam = { pageSize: -1, nuId: record.nuId }
defHttp.get({url: '/iot/tq/electricityMeter/list',params:queryParam}).then(res => { defHttp.get({ url: '/iot/tq/electricityMeter/list', params: queryParam }).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res) console.log("🚀 ~ defHttp.get ~ res:", res)
zndbList.value = res; zndbList.value = res;
console.log("🚀 ~ defHttp.get ~ zndbList:", zndbList) console.log("🚀 ~ defHttp.get ~ zndbList:", zndbList)
}); });
} }
// //
function getZnsb(record){ function getZnsb(record) {
var queryParam = {pageSize:-1,nuId:record.nuId} var queryParam = { pageSize: -1, nuId: record.nuId }
defHttp.get({url: '/iot/tq/waterMeter/list',params:queryParam}).then(res => { defHttp.get({ url: '/iot/tq/waterMeter/list', params: queryParam }).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res) console.log("🚀 ~ defHttp.get ~ res:", res)
znsbList.value = res; znsbList.value = res;
}); });
} }
//湿 //湿
function getWsdj(record){ function getWsdj(record) {
var queryParam = {pageSize:-1,nuId:record.nuId} var queryParam = { pageSize: -1, nuId: record.nuId }
defHttp.get({url: '/iot/yiweilian/humidDevice/list',params:queryParam}).then(res => { defHttp.get({ url: '/iot/yiweilian/humidDevice/list', params: queryParam }).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res) console.log("🚀 ~ defHttp.get ~ res:", res)
wsdjList.value = res; wsdjList.value = res;
}); });
} }
// //
async function handleRead(record) { async function handleRead(record) {
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
}; };
await eleRead(params); await eleRead(params);
setTimeout(() => { setTimeout(() => {
getZndb(anyInfo); getZndb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleControlLz(record) { async function handleControlLz(record) {
if(record.relayState == '0'){ if (record.relayState == '0') {
Modal.info({ Modal.info({
title: '拉闸', title: '拉闸',
content: h('div', {}, [ content: h('div', {}, [
h('p', '此电表已拉闸!'), h('p', '此电表已拉闸!'),
]), ]),
onOk() {}, onOk() { },
}); });
return; return;
} }
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
'type' : '10', 'type': '10',
}; };
await eleControl(params); await eleControl(params);
setTimeout(() => { setTimeout(() => {
getZndb(anyInfo); getZndb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleControlHz(record) { async function handleControlHz(record) {
if(record.relayState == '1'){ if (record.relayState == '1') {
Modal.info({ Modal.info({
title: '合闸', title: '合闸',
content: h('div', {}, [ content: h('div', {}, [
h('p', '此电表已合闸!'), h('p', '此电表已合闸!'),
]), ]),
onOk() {}, onOk() { },
}); });
return; return;
} }
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
'type' : '11', 'type': '11',
}; };
await eleControl(params); await eleControl(params);
setTimeout(() => { setTimeout(() => {
getZndb(anyInfo); getZndb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleReset(record) { async function handleReset(record) {
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
}; };
await eleReset(params); await eleReset(params);
setTimeout(() => { setTimeout(() => {
getZndb(anyInfo); getZndb(anyInfo);
}, 4000); }, 4000);
} }
/** /**
* 查看电表api日志 * 查看电表api日志
*/ */
function showApiLog(record){ function showApiLog(record) {
console.log(record); console.log(record);
apiLogModal.value.disableSubmit = true; apiLogModal.value.disableSubmit = true;
apiLogModal.value.showApiLog(record); apiLogModal.value.showApiLog(record);
} }
// //
async function handleSbRead(record) { async function handleSbRead(record) {
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
}; };
await eleSbRead(params); await eleSbRead(params);
setTimeout(() => { setTimeout(() => {
getZnsb(anyInfo); getZnsb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleSbControlLz(record) { async function handleSbControlLz(record) {
if(record.relayState == '1'){ if (record.relayState == '1') {
Modal.info({ Modal.info({
title: '开阀', title: '开阀',
content: h('div', {}, [ content: h('div', {}, [
h('p', '此水表已开阀!'), h('p', '此水表已开阀!'),
]), ]),
onOk() {}, onOk() { },
}); });
return; return;
} }
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
'type' : '43', 'type': '43',
}; };
await eleSbControl(params); await eleSbControl(params);
setTimeout(() => { setTimeout(() => {
getZnsb(anyInfo); getZnsb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleSbControlHz(record) { async function handleSbControlHz(record) {
if(record.relayState == '0'){ if (record.relayState == '0') {
Modal.info({ Modal.info({
title: '关阀', title: '关阀',
content: h('div', {}, [ content: h('div', {}, [
h('p', '此水表已关阀!'), h('p', '此水表已关阀!'),
]), ]),
onOk() {}, onOk() { },
}); });
return; return;
} }
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
'type' : '53', 'type': '53',
}; };
await eleSbControl(params); await eleSbControl(params);
setTimeout(() => { setTimeout(() => {
getZnsb(anyInfo); getZnsb(anyInfo);
}, 4000); }, 4000);
} }
// //
async function handleSbReset(record) { async function handleSbReset(record) {
const params = { const params = {
'cid' : record.cid, 'cid': record.cid,
'address' : record.address, 'address': record.address,
}; };
await eleSbReset(params); await eleSbReset(params);
setTimeout(() => { setTimeout(() => {
getZnsb(anyInfo); getZnsb(anyInfo);
}, 4000); }, 4000);
} }
/** /**
* 查看水表api日志 * 查看水表api日志
*/ */
function showApiWaterLog(record){ function showApiWaterLog(record) {
console.log(record); console.log(record);
apiLogWaterModal.value.disableSubmit = true; apiLogWaterModal.value.disableSubmit = true;
apiLogWaterModal.value.showApiLog(record); apiLogWaterModal.value.showApiLog(record);
} }
// 湿 // 湿
async function handleWsdjRead(record) { async function handleWsdjRead(record) {
const params = { const params = {
'sn' : record.sn, 'sn': record.sn,
}; };
await updateDeviceRealTime(params); await updateDeviceRealTime(params);
setTimeout(() => { setTimeout(() => {
getWsdj(anyInfo);//湿 getWsdj(anyInfo);//湿
}, 4000); }, 4000);
} }
// 湿 // 湿
async function handleEdit(record) { async function handleEdit(record) {
record["isUpdate"] = true; record["isUpdate"] = true;
console.log(record); console.log(record);
openDrawer(true, { openDrawer(true, {
@ -556,29 +578,29 @@ function getWsdj(record){
showFooter: true, showFooter: true,
tenantSaas: false, tenantSaas: false,
}); });
} }
/** /**
* 温湿度计查看api日志 * 温湿度计查看api日志
*/ */
function showWsdjApiLog(record){ function showWsdjApiLog(record) {
apiLogAlarmModal.value.disableSubmit = true; apiLogAlarmModal.value.disableSubmit = true;
apiLogAlarmModal.value.showLogAlarm(record); apiLogAlarmModal.value.showLogAlarm(record);
} }
/** /**
* 摄像头预览 * 摄像头预览
*/ */
function handlePreview(record: Recordable) { function handlePreview(record: Recordable) {
previewModal.value.disableSubmit = true; previewModal.value.disableSubmit = true;
previewModal.value.edit(record); previewModal.value.edit(record);
} }
/** /**
* 摄像头画面配置 * 摄像头画面配置
*/ */
function handlePicConfig(record) { function handlePicConfig(record) {
var params = { var params = {
deviceIndex: record.deviceIndex, deviceIndex: record.deviceIndex,
parentId: record.parentId, parentId: record.parentId,
@ -589,7 +611,7 @@ function getWsdj(record){
} }
cameraPictureConfigModal.value.disableSubmit = true; cameraPictureConfigModal.value.disableSubmit = true;
cameraPictureConfigModal.value.edit(params); cameraPictureConfigModal.value.edit(params);
} }
defineExpose({ defineExpose({
edit, edit,
@ -598,10 +620,10 @@ defineExpose({
<style lang="less" scoped> <style lang="less" scoped>
.antd-modal-form { .antd-modal-form {
padding: 14px; padding: 0px;
} }
.cardTitle{ .cardTitle {
background: #1ea0fa; background: #1ea0fa;
width: 100%; width: 100%;
margin: -28px -24px; margin: -28px -24px;
@ -612,35 +634,38 @@ defineExpose({
display: block; display: block;
position: absolute; position: absolute;
} }
.zxClass{
font-size:14px; .zxClass {
font-size: 14px;
background: linear-gradient(to right, #1ea0fa, #017de9); background: linear-gradient(to right, #1ea0fa, #017de9);
border-radius: 8px; border-radius: 8px;
height: 25px; height: 25px;
color: white; color: white;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
width:50px; width: 50px;
margin-top:11px; margin-top: 11px;
} }
.lxClass{ .lxClass {
font-size:14px; font-size: 14px;
background: linear-gradient(to right, #cccccc, #cccccc); background: linear-gradient(to right, #cccccc, #cccccc);
border-radius: 8px; border-radius: 8px;
height: 25px; height: 25px;
color: white; color: white;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
width:50px; width: 50px;
margin-top:11px; margin-top: 11px;
} }
.tbClass{
.tbClass {
background: #f6f6f6; background: #f6f6f6;
padding: 8px; padding: 8px;
border-radius: 5px; border-radius: 5px;
} }
.antTitle{
.antTitle {
margin-top: 8px; margin-top: 8px;
display: block; display: block;
font-size: 12px; font-size: 12px;

View File

@ -1,6 +1,6 @@
<template> <template>
<!-- <j-modal :title="title" :width="width" :maxHeight="`200px`" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> --> <!-- <j-modal :title="title" :width="width" :maxHeight="`200px`" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> -->
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true" bodyStyle="padding:6px;" <a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true" bodyStyle="padding:14px;"
:footer-style="{ textAlign: 'right' }" @close="handleCancel"> :footer-style="{ textAlign: 'right' }" @close="handleCancel">
<BaseWlsbListForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></BaseWlsbListForm> <BaseWlsbListForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></BaseWlsbListForm>
<template #footer> <template #footer>
@ -16,7 +16,7 @@
import JModal from '/@/components/Modal/src/JModal/JModal.vue'; import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>(''); const title = ref<string>('');
const width = ref<string>('80%'); const width = ref<string>('1400px');
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false); const disableSubmit = ref<boolean>(false);
const registerForm = ref(); const registerForm = ref();

View File

@ -5,7 +5,7 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="NuBaseInfoForm"> name="NuBaseInfoForm">
<a-row> <a-row>
<a-col :span="24" style="margin-top: 60px;margin-bottom: 60px;"> <a-col :span="24">
<a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName"> <a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName">
<a-input v-model:value="formData.nuName" placeholder="请输入区域名称" maxLength="15" allow-clear></a-input> <a-input v-model:value="formData.nuName" placeholder="请输入区域名称" maxLength="15" allow-clear></a-input>
</a-form-item> </a-form-item>
@ -166,6 +166,6 @@ defineExpose({
<style lang="less" scoped> <style lang="less" scoped>
.antd-modal-form { .antd-modal-form {
padding: 14px; padding: 0px;
} }
</style> </style>

View File

@ -39,7 +39,7 @@
* @param record * @param record
*/ */
function edit(record) { function edit(record) {
title.value = disableSubmit.value ? '详情' : '编辑'; title.value = disableSubmit.value ? '详情' : '更名';
visible.value = true; visible.value = true;
nextTick(() => { nextTick(() => {
registerForm.value.edit(record); registerForm.value.edit(record);