258 lines
9.3 KiB
Vue
258 lines
9.3 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="sn">
|
||
<template #label><span title="SN">SN</span></template>
|
||
<a-input placeholder="请输入SN" v-model:value="queryParam.sn" allow-clear ></a-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,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: '60px', padding: '0 24px' }" :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.sn}}</span></div>
|
||
<div style="font-size: 12px;">抄表时间：{{item.reportingTime?item.reportingTime:'未抄表'}}</div>
|
||
</a-col>
|
||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.status=='1'?'在线':'离线'}}</div>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
<a-row>
|
||
<a-col :span="12" style="margin-top: -10px;">{{item.nuName?item.nuName:'未配置'}}</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: 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>
|
||
</a-col>
|
||
</a-row>
|
||
<a-divider />
|
||
<p style="text-align:center;">
|
||
<span style="display:inline-block;" @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%;" @click="handleEdit(item)">
|
||
<span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br/>
|
||
<span class="antTitle">配置</span>
|
||
</span>
|
||
<span style="display:inline-block;margin-left:10%;" @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-card style="width: 100%;border-radius: 8px;">
|
||
<template #title >
|
||
<div class="cardTitle">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<span style="margin-left:15px;font-size:14px;">SN：{{item.sn}}</span>
|
||
</a-col>
|
||
<a-col :span="12" style="text-align: right;">
|
||
<span style="margin-right:15px;font-size:14px;">{{item.status=='0'?'在线':'离线'}}</span>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
<p>
|
||
<span>护理单元名称：{{item.nuName?item.nuName:'未配置'}}</span>
|
||
</p>
|
||
<p>
|
||
<span>上次抄表时间：{{item.reportingTime?item.reportingTime:'未抄表'}}</span>
|
||
</p>
|
||
<p style="margin-top: 20px;">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<span><Statistic title="温度" :value="item.temperature?item.temperature:'无'" style="text-align:center;" /></span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<span><Statistic title="湿度" :value="item.humidity?item.humidity:'无'" style="text-align:center;" /></span>
|
||
</a-col>
|
||
</a-row>
|
||
</p>
|
||
<a-divider />
|
||
<p style="text-align:center;">
|
||
<span>
|
||
<a @click="handleRead(item)">抄表</a>
|
||
<a-divider type="vertical" />
|
||
<a @click="handleEdit(item)">配置</a>
|
||
<a-divider type="vertical" />
|
||
<a @click="showApiLog(item)">日志</a>
|
||
</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>
|
||
<!--引用表格-->
|
||
<ApiLogAlarmModal ref="apiLogAlarmModal"></ApiLogAlarmModal>
|
||
<DeviceInfoDrawer @register="registerDrawer" @success="handleSuccess" />
|
||
</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 {deleteDevice, updateDeviceRealTime} from './humid.api';
|
||
import { Pagination } from 'ant-design-vue';
|
||
|
||
import ApiLogAlarmModal from './components/ApiLogAlarmModal.vue'
|
||
import DeviceInfoDrawer from "./components/DeviceInfoDrawer.vue";
|
||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||
import { set } from 'lodash-es';
|
||
import {useDrawer} from "@/components/Drawer";
|
||
|
||
//注册drawer
|
||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||
const formRef = ref();
|
||
const queryParam = reactive<any>({});
|
||
const apiLogAlarmModal = 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 = {
|
||
'sn' : record.sn,
|
||
};
|
||
await updateDeviceRealTime(params);
|
||
setTimeout(() => {
|
||
reload();
|
||
}, 4000);
|
||
}
|
||
|
||
// 编辑
|
||
async function handleEdit(record) {
|
||
record["isUpdate"] = true;
|
||
console.log(record);
|
||
openDrawer(true, {
|
||
record,
|
||
isUpdate: true,
|
||
showFooter: true,
|
||
tenantSaas: false,
|
||
});
|
||
}
|
||
/**
|
||
* 查看api日志
|
||
*/
|
||
function showApiLog(record){
|
||
apiLogAlarmModal.value.disableSubmit = true;
|
||
apiLogAlarmModal.value.showLogAlarm(record);
|
||
}
|
||
|
||
function reload(){
|
||
queryParam.pageSize = pageParams.value.pageSize;
|
||
queryParam.pageNo = pageParams.value.pageNo;
|
||
defHttp.get({url: '/iot/yiweilian/humidDevice/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>
|