274 lines
9.2 KiB
Vue
274 lines
9.2 KiB
Vue
<template>
|
||
<div class="p-2">
|
||
<!--查询区域-->
|
||
<div class="jeecg-basic-table-form-container">
|
||
<a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||
<a-row :gutter="24">
|
||
<a-col :lg="6">
|
||
<a-form-item name="address">
|
||
<template #label><span title="SN">SN</span></template>
|
||
<j-input placeholder="请输入SN" v-model:value="queryParam.address" allow-clear ></j-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item name="nuId">
|
||
<template #label><span title="区域">区域</span></template>
|
||
<j-dict-select-tag type='list' v-model:value="queryParam.nuId" :dictCode="`nu_base_info,nu_name,nu_id`" placeholder="请选区域" allow-clear />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
|
||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<a-row>
|
||
<a-col v-for="(item,index) in tableData.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" 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>
|
||
<a-row style="font-weight: normal;">
|
||
<a-col :span="18" style="font-size: 14px;">
|
||
<div>SN：<span style="font-weight: bold;">{{item.address}}</span></div>
|
||
<div style="font-size: 12px;">抄表时间：{{item.readTime?item.readTime:'未抄表'}}</div>
|
||
</a-col>
|
||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'开阀':'关阀'}}</div>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<a-divider style="margin: 10px 0 0 0" />
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
<a-row style="margin-top:-10px;">
|
||
<a-col :span="12" style="margin-top: -10px;">{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
|
||
<a-col :span="12" style="text-align: right;margin-top: -10px;">
|
||
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
|
||
</a-col>
|
||
<a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:18px;">
|
||
<span>{{item.eleValue?item.eleValue:'0.00'}}</span>
|
||
</a-col>
|
||
<a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
|
||
<div style="font-size: 12px;margin: 8px 0 -5px 2px;">m³</div>
|
||
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用水量</span></div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-divider />
|
||
<p style="text-align:center;">
|
||
<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="antTitle">抄表</span>
|
||
</span>
|
||
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlLz(item)" v-if="item.relayState=='0'">
|
||
<span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br/>
|
||
<span class="antTitle">开阀</span>
|
||
</span>
|
||
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlHz(item)" v-if="item.relayState=='1'">
|
||
<span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br/>
|
||
<span class="antTitle">关阀</span>
|
||
</span>
|
||
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleReset(item)">
|
||
<span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/>
|
||
<span class="antTitle">清零</span>
|
||
</span>
|
||
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showApiLog(item)">
|
||
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
|
||
<span class="antTitle">日志</span>
|
||
</span>
|
||
</p>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col v-if="tableData.total==0" >
|
||
<div style="margin: 30px auto;">
|
||
<a-empty />
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<div v-if="tableData.total > 0"
|
||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
|
||
<span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
|
||
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
|
||
show-quick-jumper :total="tableData.total" @change="reload" />
|
||
</div>
|
||
<!--引用表格-->
|
||
<ApiLogModal ref="apiLogModal"></ApiLogModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" name="iot-nuIotRegionInfo" setup>
|
||
import {reactive, ref,h,onMounted} from 'vue';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { Statistic } from 'ant-design-vue';
|
||
import {Modal} from "ant-design-vue";
|
||
import {list, eleReset, eleControl, eleRead } from './water.api';
|
||
import { Pagination } from 'ant-design-vue';
|
||
|
||
import ApiLogModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
|
||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||
import { set } from 'lodash-es';
|
||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||
|
||
const formRef = ref();
|
||
const queryParam = reactive<any>({});
|
||
const apiLogModal = ref();
|
||
const tableData = ref<any>([]);
|
||
const pageParams = ref({ pageNo: 1, pageSize: 8 })
|
||
|
||
|
||
const labelCol = reactive({
|
||
xs:24,
|
||
sm:4,
|
||
xl:6,
|
||
xxl:4
|
||
});
|
||
const wrapperCol = reactive({
|
||
xs: 24,
|
||
sm: 20,
|
||
});
|
||
|
||
/**
|
||
* 重置
|
||
*/
|
||
function searchReset() {
|
||
formRef.value.resetFields();
|
||
//刷新数据
|
||
reload();
|
||
}
|
||
// 抄水表
|
||
async function handleRead(record) {
|
||
const params = {
|
||
'cid' : record.cid,
|
||
'address' : record.address,
|
||
};
|
||
await eleRead(params);
|
||
setTimeout(() => {
|
||
reload();
|
||
}, 4000);
|
||
}
|
||
|
||
// 水表开阀
|
||
async function handleControlLz(record) {
|
||
if(record.relayState == '1'){
|
||
Modal.info({
|
||
title: '开阀',
|
||
content: h('div', {}, [
|
||
h('p', '此水表已开阀！'),
|
||
]),
|
||
onOk() {},
|
||
});
|
||
return;
|
||
}
|
||
const params = {
|
||
'cid' : record.cid,
|
||
'address' : record.address,
|
||
'type' : '43',
|
||
};
|
||
await eleControl(params);
|
||
setTimeout(() => {
|
||
reload();
|
||
}, 4000);
|
||
}
|
||
|
||
// 水表关阀
|
||
async function handleControlHz(record) {
|
||
if(record.relayState == '0'){
|
||
Modal.info({
|
||
title: '关阀',
|
||
content: h('div', {}, [
|
||
h('p', '此水表已关阀！'),
|
||
]),
|
||
onOk() {},
|
||
});
|
||
return;
|
||
}
|
||
const params = {
|
||
'cid' : record.cid,
|
||
'address' : record.address,
|
||
'type' : '53',
|
||
};
|
||
await eleControl(params);
|
||
setTimeout(() => {
|
||
reload();
|
||
}, 4000);
|
||
}
|
||
|
||
// 水表清零
|
||
async function handleReset(record) {
|
||
const params = {
|
||
'cid' : record.cid,
|
||
'address' : record.address,
|
||
};
|
||
await eleReset(params);
|
||
setTimeout(() => {
|
||
reload();
|
||
}, 4000);
|
||
}
|
||
|
||
|
||
/**
|
||
* 查看api日志
|
||
*/
|
||
function showApiLog(record){
|
||
console.log(record);
|
||
apiLogModal.value.disableSubmit = true;
|
||
apiLogModal.value.showApiLog(record);
|
||
}
|
||
|
||
function reload(){
|
||
queryParam.pageSize = pageParams.value.pageSize;
|
||
queryParam.pageNo = pageParams.value.pageNo;
|
||
defHttp.get({url: '/iot/tq/waterMeter/list',params:queryParam}).then(res => {
|
||
console.log("🚀 ~ defHttp.get ~ res:", res)
|
||
tableData.value = res;
|
||
});
|
||
}
|
||
|
||
// 自动请求并暴露内部方法
|
||
onMounted(() => {
|
||
reload();
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.cardTitle{
|
||
background: #1ea0fa;
|
||
width: 100%;
|
||
margin: -28px -24px;
|
||
padding-top: 15px;
|
||
border-radius: 5px 5px 0px 0px;
|
||
color: white;
|
||
height: 55px;
|
||
display: block;
|
||
position: absolute;
|
||
}
|
||
.zxClass{
|
||
font-size:14px;
|
||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||
border-radius: 8px;
|
||
height: 35px;
|
||
color: white;
|
||
line-height: 35px;
|
||
}
|
||
|
||
.lxClass{
|
||
font-size:14px;
|
||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||
border-radius: 8px;
|
||
height: 35px;
|
||
color: white;
|
||
line-height: 35px;
|
||
}
|
||
.tbClass{
|
||
background: #f6f6f6;
|
||
padding: 8px;
|
||
border-radius: 5px;
|
||
}
|
||
.antTitle{
|
||
margin-top: 10px;
|
||
display: block;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|