124 lines
2.9 KiB
Vue
124 lines
2.9 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>
|
|
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: "time",
|
|
},
|
|
];
|
|
this.sensorList.forEach((sensor) => {
|
|
columns.push({
|
|
title: sensor.param_name,
|
|
children: [
|
|
{
|
|
title: sensor.uint || "-",
|
|
dataIndex: sensor.param_key,
|
|
},
|
|
],
|
|
});
|
|
});
|
|
columns.push({
|
|
title:'水质质量等级',
|
|
dataIndex:'level',
|
|
|
|
})
|
|
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,
|
|
},
|
|
];
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |