<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<div>
|
<div class="basic_search">
|
<span>企业名称：</span>
|
<el-input v-model.trim="listQuery.filter.companyName" style="width: 300px"/>
|
</div>
|
<div class="basic_search">
|
<el-button style="margin-left: 10px;" type="primary" @click="reset()">重置</el-button>
|
<el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
|
</div>
|
</div>
|
</div>
|
<br/>
|
<div class="table_content">
|
<el-tree :data="dataTree" highlight-current class="left-tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
<div class="cardList" v-if="deviceList.length>0">
|
<div class="card-item" v-for="(item,index) in deviceList" :key="index">
|
<div class="itemTitle">
|
{{item.storeName}}-{{item.storeroomName}}-{{item.deviceName }}
|
</div>
|
<div class="cont">
|
<img :src="deviceItem">
|
<div class="rightCont">
|
<div class="rightItem">
|
<span>温度： {{item.temperatureValue }}℃</span>
|
<el-button size="mini" plain type="primary" @click="openHistory('温度',item)">历史数据</el-button>
|
</div>
|
<div class="rightItem">
|
<span>湿度： {{item.humidityValue }}%RH</span>
|
<el-button size="mini" plain type="primary" @click="openHistory('湿度',item)">历史数据</el-button>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="cardList" v-else>
|
<div style="color: #999;padding-top: 15px;padding-left: 20px">暂无设备信息...</div>
|
</div>
|
<th-dialog ref="thRef"></th-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import thDialog from "./components/thDialog"
|
import {
|
getDeviceList,
|
getDevicePageList,
|
getOriginalPerson,
|
getStorePageList,
|
getStoreroomPageV2
|
} from "../../../api/monitorAlert";
|
import deviceItem from "../../../assets/deviceItem.png"
|
|
export default {
|
name: "temperatureHumidity",
|
components: { thDialog },
|
data() {
|
return {
|
deviceItem: deviceItem,
|
tableKey: '',
|
listLoading: false,
|
dataList: [],
|
dataTree: [],
|
listQuery: {
|
filter:{
|
companyName: ''
|
},
|
pageIndex:1,
|
pageSize:9999
|
},
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
deviceQuery: {
|
filter:{
|
companyCode: '',
|
storeNum: '',
|
storeroomNum: '',
|
deviceType: 1
|
}
|
},
|
deviceList: []
|
}
|
},
|
created() {
|
this.getDataList()
|
this.getDeviceList()
|
},
|
mounted() {
|
},
|
watch: {},
|
methods: {
|
openHistory(type,data){
|
this.$refs.thRef.open(type,data)
|
},
|
deleteData(data){
|
|
},
|
handleNodeClick(data) {
|
this.deviceQuery.filter = {
|
companyCode: '',
|
storeNum: '',
|
storeroomNum: '',
|
deviceType: 1
|
}
|
if(data.type == 1){
|
this.deviceQuery.filter.companyCode = data.code
|
this.getDeviceList()
|
}else if(data.type == 2){
|
this.deviceQuery.filter.storeNum = data.code
|
this.getDeviceList()
|
}else{
|
this.deviceQuery.filter.storeroomNum = data.code
|
this.getDeviceList()
|
}
|
},
|
async getDataList() {
|
let res = await getStoreroomPageV2(this.listQuery)
|
if (res.data.code === "200") {
|
const data = res.data.result
|
if(Array.isArray(data.records)){
|
this.dataList = data.records
|
if(data.records.length>0){
|
this.dataTree = this.transformToTree(data.records)
|
}else{
|
this.dataTree = []
|
}
|
}else{
|
this.dataList = []
|
this.dataTree = []
|
}
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.message
|
})
|
}
|
this.listLoading = false
|
},
|
|
async getDeviceList(){
|
let res = await getDeviceList(this.deviceQuery)
|
if (res.data.code === "200"){
|
this.deviceList = res.data.result
|
}else{
|
this.$message({
|
type: 'warning',
|
message: res.data.message
|
})
|
}
|
},
|
|
transformToTree(data) {
|
const tree = [];
|
const companyMap = new Map()
|
data.forEach(item => {
|
const companyKey = item.companyCode;
|
let companyNode = companyMap.get(companyKey);
|
if (!companyNode) {
|
companyNode = {
|
id: item.companyCode,
|
code: item.companyCode,
|
name: item.companyName,
|
children: [],
|
type: 1
|
};
|
companyMap.set(companyKey, companyNode);
|
tree.push(companyNode);
|
}
|
const storeKey = `${companyKey}-${item.storeName}`;
|
let storeNode = companyNode.children.find(child => child.name === item.storeName);
|
if (!storeNode) {
|
storeNode = {
|
id: storeKey,
|
code: item.storeNum,
|
name: item.storeName,
|
children: [],
|
type: 2
|
};
|
companyNode.children.push(storeNode);
|
}
|
|
const storeroomKey = `${storeKey}-${item.storeroomNum}`;
|
let storeroomNode = storeNode.children.find(child => child.code === item.storeroomNum);
|
if (!storeroomNode) {
|
storeroomNode = {
|
...item, // 保留原始数据
|
id: storeroomKey,
|
code: item.storeroomNum,
|
name: item.storeroomName,
|
type: 3
|
};
|
storeNode.children.push(storeroomNode);
|
}
|
});
|
return tree;
|
},
|
|
reset(){
|
this.listQuery = {
|
filter:{
|
companyName: ''
|
},
|
pageIndex:1,
|
pageSize:9999
|
}
|
this.deviceQuery.filter = {
|
companyCode: '',
|
storeNum: '',
|
storeroomNum: '',
|
deviceType: 1
|
}
|
this.getDataList()
|
},
|
search(){
|
this.listQuery.pageIndex = 1
|
this.getDataList()
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.basic_search {
|
display: inline-block;
|
}
|
|
.table_content{
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
}
|
|
.left-tree{
|
width: 20%;
|
/deep/.el-tree-node{
|
.el-tree-node__content{
|
padding: 10px 0;
|
height: auto;
|
.el-tree-node__label{
|
font-size: 16px;
|
}
|
}
|
}
|
/deep/.is-current>.el-tree-node__content{
|
background-color: #034ea2;
|
color: #fff;
|
}
|
}
|
|
.cardList{
|
width: 80%;
|
padding: 0 10px 10px;
|
display: grid;
|
grid-gap: 20px;
|
grid-template-columns: repeat(2, 1fr);
|
|
.card-item{
|
width: 100%;
|
background: #f5f5f5;
|
padding: 15px;
|
border-radius: 8px;
|
cursor: pointer;
|
|
.itemTitle{
|
width: 100%;
|
font-size: 18px;
|
font-weight: bolder;
|
margin-bottom: 10px;
|
}
|
.cont{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
img{
|
width: 100px;
|
height: 100px;
|
object-fit: cover;
|
}
|
.rightCont{
|
width: calc(100% - 110px);
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.rightItem{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
&:first-of-type{
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
