|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="centerImg"></div>
|
|
|
<BoardTopNav @sceneIdChange="sceneIdChange" nowMenu="4"></BoardTopNav>
|
|
|
<div class="collapse">
|
|
|
<div style="margin-bottom: 24px">
|
|
|
<el-collapse accordion>
|
|
|
<el-collapse-item name="1">
|
|
|
<template slot="title">
|
|
|
<div class="itemBg">
|
|
|
<div class="icon"></div>
|
|
|
<div class="icon1"></div>
|
|
|
<div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div>
|
|
|
<div class="title"> {{ topData.monitorUnitName }}</div>
|
|
|
<div class="info">
|
|
|
<div class="info1">所属区域</div>
|
|
|
<div class="info2"> {{ topData.deviceName }}</div>
|
|
|
</div>
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
<div class="info1">位置:</div>
|
|
|
<div class="info2">深圳</div>
|
|
|
</div>
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
<div class="info1">日期:</div>
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div>
|
|
|
<div>
|
|
|
<!-- <el-row :gutter="24">-->
|
|
|
<!-- <el-col :span="12">-->
|
|
|
<!-- <el-radio-group v-model="radio">-->
|
|
|
<!-- <el-radio-button label="日统计报表"></el-radio-button>-->
|
|
|
<!-- <el-radio-button label="月统计报表"></el-radio-button>-->
|
|
|
<!-- </el-radio-group>-->
|
|
|
<!-- </el-col>-->
|
|
|
<!-- <el-col :span="12">-->
|
|
|
<!-- <div style="position: absolute; right: 30px;">-->
|
|
|
<!-- <span style="color: #fff;"> 开始时间：</span>-->
|
|
|
<!-- <div style="display: inline-block;width: 200px;margin-right: 12px;">-->
|
|
|
<!-- <el-date-picker placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <el-button type="primary">搜索</el-button>-->
|
|
|
<!-- <el-button>重置</el-button>-->
|
|
|
<!-- <el-button>导出</el-button>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </el-col>-->
|
|
|
<!-- </el-row>-->
|
|
|
<el-table :cell-style="setStyle" :data="tableData"
|
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
|
|
|
style="width: 100%;margin-top: 12px;">
|
|
|
<el-table-column label="设备ID" prop="columnName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="传感器编号" prop="columnKey">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="alias" prop="alias">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="rssi" prop="rssi">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="ts" prop="ts">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="value1" prop="value1">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="voltage" prop="voltage">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<el-pagination :total="1000" background layout="prev, pager, next">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
|
|
|
<el-collapse accordion>
|
|
|
<el-collapse-item v-for="i in bottomData">
|
|
|
<template slot="title">
|
|
|
<div class="itemBg">
|
|
|
<div class="icon"></div>
|
|
|
<div class="icon1"></div>
|
|
|
<div class="icon2"></div>
|
|
|
<div class="title"> {{ i.deviceName }}</div>
|
|
|
<div class="info">
|
|
|
<div class="info1">所属区域</div>
|
|
|
<div class="info2">大厅</div>
|
|
|
</div>
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
<div class="info1">位置:</div>
|
|
|
<div class="info2">深圳</div>
|
|
|
</div>
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
<div class="info1">日期:</div>
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
getDeviceInfo,
|
|
|
getHistoryData,
|
|
|
getLinkDevices
|
|
|
} from '@/api/board/senso'
|
|
|
import BoardTopNav from '@/components/BoardTopNav'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
BoardTopNav
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
topData: {},
|
|
|
bottomData: [],
|
|
|
radio: '日统计报表',
|
|
|
tableData: [],
|
|
|
sceneId:0
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
sceneIdChange(e){
|
|
|
this.sceneId = e
|
|
|
this.getData()
|
|
|
},
|
|
|
async getData() {
|
|
|
await this.setDeviceInfo()
|
|
|
await this.setLinkDevices()
|
|
|
await this.setHistoryData()
|
|
|
},
|
|
|
setStyle(e) {
|
|
|
if (e.rowIndex % 2 === 0) {
|
|
|
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
|
|
|
} else {
|
|
|
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
|
|
|
}
|
|
|
},
|
|
|
async setDeviceInfo() {
|
|
|
const {data} = await getDeviceInfo(this.$store.getters.sceneId)
|
|
|
this.topData = data || {}
|
|
|
},
|
|
|
async setHistoryData() {
|
|
|
const {data} = await getHistoryData({
|
|
|
"sceneId":this.$store.getters.sceneId,
|
|
|
"deviceId": 2,
|
|
|
"offset": 0,
|
|
|
"limit": 5,
|
|
|
"startTime": 1266666666666
|
|
|
})
|
|
|
this.tableData = (data?.historyData?.rows || []).map((e, i) => {
|
|
|
return {
|
|
|
...e,
|
|
|
...data.deviceDataColumns[i]
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
async setLinkDevices() {
|
|
|
const {data} = await getLinkDevices(this.$store.getters.sceneId)
|
|
|
this.bottomData = data
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
|
background-image: url("~@/assets/board/senso/bg.jpg");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: calc(100vh);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.collapse {
|
|
|
position: absolute;
|
|
|
top: 9%;
|
|
|
left: 2%;
|
|
|
width: 96%;
|
|
|
height: 87%;
|
|
|
overflow: auto;
|
|
|
|
|
|
/deep/ .el-collapse-item__wrap {
|
|
|
background-color: #0000;
|
|
|
border-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table {
|
|
|
background-color: #FFF0 !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table tr {
|
|
|
background-color: #FFF0 !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table th.el-table__cell.is-leaf, {
|
|
|
border-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
|
|
|
background-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
|
|
|
background-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-collapse-item__header {
|
|
|
background-color: #0000;
|
|
|
border-color: #0000;
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-collapse {
|
|
|
border-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table td.el-table__cell {
|
|
|
border-color: #0000;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th {
|
|
|
color: #05ecf3;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.itemBg {
|
|
|
background-image: url("~@/assets/board/senso/itemBg.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 17vh;
|
|
|
position: relative;
|
|
|
|
|
|
.icon {
|
|
|
background-image: url("~@/assets/board/senso/iconBg.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 2vh;
|
|
|
left: 5vh;
|
|
|
width: 13vh;
|
|
|
height: 13vh;
|
|
|
}
|
|
|
|
|
|
.icon1 {
|
|
|
background-image: url("~@/assets/board/senso/iconBottom.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 2vh;
|
|
|
left: 5vh;
|
|
|
width: 13vh;
|
|
|
height: 13vh;
|
|
|
}
|
|
|
|
|
|
.icon2 {
|
|
|
background-image: url("~@/assets/board/senso/icon.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 10vh;
|
|
|
width: 2.6vh;
|
|
|
height: 3.3vh;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
left: 25vh;
|
|
|
color: #1fabf3;
|
|
|
line-height: 17vh;
|
|
|
font-size: 2.5vh;
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
position: absolute;
|
|
|
left: 60vh;
|
|
|
color: #1fabf3;
|
|
|
font-size: 1.5vh;
|
|
|
height: 100%;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.info1 {
|
|
|
position: absolute;
|
|
|
bottom: 55%;
|
|
|
color: #fffc
|
|
|
}
|
|
|
|
|
|
.info2 {
|
|
|
position: absolute;
|
|
|
top: 55%;
|
|
|
color: #fff
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|