|
|
|
@ -3,17 +3,18 @@
|
|
|
|
|
<div class="centerImg"></div>
|
|
|
|
|
<BoardTopNav nowMenu="4"></BoardTopNav>
|
|
|
|
|
<div class="collapse">
|
|
|
|
|
<div style="margin-bottom: 24px">
|
|
|
|
|
<el-collapse v-model="activeName" accordion>
|
|
|
|
|
<el-collapse-item name="1">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
<div class="title"> 大厅-摄像头</div>
|
|
|
|
|
<div :style="'background-image: url('+topData.devicePic+')'" class="icon2"></div>
|
|
|
|
|
<div class="title"> {{ topData.monitorUnitName }}</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
|
<div class="info2"> {{ topData.deviceName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
|
|
<div class="info1">位置:</div>
|
|
|
|
@ -27,194 +28,59 @@
|
|
|
|
|
</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 type="date" placeholder="选择日期" style="width: 100%;"></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 :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
<!-- <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' }"
|
|
|
|
|
:cell-style="setStyle">
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
<el-collapse-item name="2">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
<div class="title"> 大厅-摄像头</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>
|
|
|
|
|
<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 type="date" placeholder="选择日期" style="width: 100%;"></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 :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
style="width: 100%;margin-top: 12px;">
|
|
|
|
|
<el-table-column label="设备ID" prop="columnName">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
<el-table-column label="传感器编号" prop="columnKey">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
<el-table-column label="alias" prop="alias">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
<el-table-column label="rssi" prop="rssi">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
<el-table-column label="ts" prop="ts">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
<el-table-column label="value1" prop="value1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
<el-table-column label="voltage" prop="voltage">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
<el-pagination :total="1000" background layout="prev, pager, next">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
<el-collapse-item name="3">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
<div class="title"> 大厅-摄像头</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>
|
|
|
|
|
<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 type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
</el-collapse>
|
|
|
|
|
</div>
|
|
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
<el-button>导出</el-button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
<el-collapse-item name="4">
|
|
|
|
|
<el-collapse v-model="activeName" 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"> 大厅-摄像头</div>
|
|
|
|
|
<div class="title"> {{ i.deviceName }}</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
@ -229,52 +95,6 @@
|
|
|
|
|
</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 type="date" placeholder="选择日期" style="width: 100%;"></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 :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
</el-collapse>
|
|
|
|
|
</div>
|
|
|
|
@ -282,6 +102,11 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getDeviceInfo,
|
|
|
|
|
getHistoryData,
|
|
|
|
|
getLinkDevices
|
|
|
|
|
} from '@/api/board/senso'
|
|
|
|
|
import BoardTopNav from '@/components/BoardTopNav'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
@ -290,47 +115,16 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
topData: {},
|
|
|
|
|
bottomData: [],
|
|
|
|
|
radio: '日统计报表',
|
|
|
|
|
tableData: [{
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
date4: '12',
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
date6: '111',
|
|
|
|
|
date7: '222',
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
}, {
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
date4: '12',
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
date6: '111',
|
|
|
|
|
date7: '222',
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
}, {
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
date4: '12',
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
date6: '111',
|
|
|
|
|
date7: '222',
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
}, {
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
date4: '12',
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
date6: '111',
|
|
|
|
|
date7: '222',
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
}]
|
|
|
|
|
tableData: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.setDeviceInfo()
|
|
|
|
|
this.setHistoryData()
|
|
|
|
|
this.setLinkDevices()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setStyle(e) {
|
|
|
|
@ -339,6 +133,24 @@ export default {
|
|
|
|
|
} else {
|
|
|
|
|
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async setDeviceInfo() {
|
|
|
|
|
const {data} = await getDeviceInfo()
|
|
|
|
|
this.topData = data
|
|
|
|
|
},
|
|
|
|
|
async setHistoryData() {
|
|
|
|
|
const {data} = await getHistoryData()
|
|
|
|
|
this.tableData = data.historyData.rows.map((e, i) => {
|
|
|
|
|
return {
|
|
|
|
|
...e,
|
|
|
|
|
...data.deviceDataColumns[i]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
async setLinkDevices() {
|
|
|
|
|
const {data} = await getLinkDevices()
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.bottomData = data
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
@ -374,23 +186,29 @@ export default {
|
|
|
|
|
/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;
|
|
|
|
|
}
|
|
|
|
|