150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<template>
|
|
<div style="height: calc(100vh - 110px)">
|
|
<a-layout :theme="'light'" style="height: calc(100vh - 110px)">
|
|
<a-layout-sider :theme="'light'" :width="300" style="padding: 20px">
|
|
<div style="text-align: center; font-size: 16px">选择站点</div>
|
|
<a-divider />
|
|
<a-tree
|
|
v-model="checkedKeys"
|
|
checkable
|
|
:selected-keys="selectedKeys"
|
|
:auto-expand-parent="true"
|
|
:tree-data="treeData"
|
|
@select="onSelect"
|
|
showLine
|
|
>
|
|
<a-icon slot="switcherIcon" type="down" />
|
|
</a-tree>
|
|
</a-layout-sider>
|
|
<a-layout style="padding: 20px">
|
|
<a-layout-header style="background: #fff; padding: 15px 0 5px 15px">
|
|
|
|
<span>
|
|
<a-range-picker
|
|
separator="至"
|
|
:placeholder="['开始日期', '结束日期']"
|
|
:defaultValue="datetimeRange"
|
|
@change="dateRangeChange"
|
|
></a-range-picker>
|
|
<a-button style="margin-left: 15px" type="primary" icon="search"
|
|
>查询</a-button
|
|
>
|
|
<a-button style="margin-left: 15px" type="primary" icon="download"
|
|
>导出Excel</a-button
|
|
>
|
|
</span>
|
|
</a-layout-header>
|
|
<a-layout-content style="padding: 20px 0 20px 0">
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="data"
|
|
bordered
|
|
size="middle"
|
|
/>
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</a-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Moment from '../utils/moment.zh_cn';
|
|
export default {
|
|
data() {
|
|
return {
|
|
checkedKeys: ['all'],
|
|
autoExpandParent: true,
|
|
selectedKeys: [],
|
|
treeData: [],
|
|
datetimeRange: [],
|
|
columns: [],
|
|
data: [],
|
|
};
|
|
},
|
|
computed: {
|
|
sensorList() {
|
|
return this.$store.getters.sensorList;
|
|
},
|
|
deviceList() {
|
|
return this.$store.getters.deviceList;
|
|
},
|
|
},
|
|
methods: {
|
|
async fetch() {},
|
|
onSelect() {},
|
|
dateRangeChange() {},
|
|
},
|
|
mounted() {
|
|
const columns = [
|
|
{
|
|
title: "站点名",
|
|
dataIndex: "name",
|
|
},
|
|
{
|
|
title: "时间段",
|
|
dataIndex: "range",
|
|
},
|
|
{
|
|
title: '检测值',
|
|
dataIndex: "lur-count"
|
|
},
|
|
{
|
|
title: '超标等级',
|
|
dataIndex: "lur-level"
|
|
},
|
|
{
|
|
title: '是否处理',
|
|
dataIndex: "isok"
|
|
},
|
|
{
|
|
title: '处理人',
|
|
dataIndex: "people"
|
|
},
|
|
{
|
|
title: '处理时间',
|
|
dataIndex: "time"
|
|
},
|
|
{
|
|
title: '处理概述',
|
|
dataIndex: "msg"
|
|
},
|
|
];
|
|
|
|
this.columns = columns;
|
|
|
|
const deviceTree = [];
|
|
this.deviceList.forEach((device) => {
|
|
deviceTree.push({
|
|
title: device.device_name,
|
|
key: device._id,
|
|
});
|
|
});
|
|
this.treeData = [
|
|
{
|
|
title: "设备",
|
|
key: "all",
|
|
children: deviceTree,
|
|
},
|
|
];
|
|
|
|
let data = []
|
|
for(let i=0; i< 10; i++) {
|
|
let start = Moment().subtract(i + 10 * Math.ceil(Math.random() * 10), 'day')
|
|
let end = start.add(1, 'days')
|
|
data.push({
|
|
'range': start.format('ll') + '-' + end.format('ll'),
|
|
'lur-count': Math.ceil(10 *Math.random()) + Math.random(),
|
|
'lur-level': Math.ceil(10 *Math.random()),
|
|
'isok': Math.random() > 0.5 ? '是':'否',
|
|
'people': 'sf',
|
|
'time': start.add(Math.ceil(24 *Math.random()), 'hour').format('lll'),
|
|
|
|
})
|
|
this.data = data
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |