28723
4 months ago
10 changed files with 948 additions and 0 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 838 B |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 549 B |
@ -0,0 +1,67 @@ |
|||||
|
const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue'); |
||||
|
const equipment = { |
||||
|
path: '/monitor', |
||||
|
name: 'Monitor', |
||||
|
meta: { title: '监控中心', icon: 'jiankongzhongxin', index: 1 }, |
||||
|
redirect: { name: 'EnvironmentMonitor' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: 'environmentMonitor', |
||||
|
name: 'EnvironmentMonitor', |
||||
|
meta: { title: '环境监测', hideChildren: true, icon: 'huanjingjiance' }, |
||||
|
component: Base, |
||||
|
redirect: { name: 'EnvironmentMonitorIndex' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: 'index', |
||||
|
name: 'EnvironmentMonitorIndex', |
||||
|
component: () => import('/@/view/monitor/environmentMonitor/index.vue'), |
||||
|
meta: { |
||||
|
title: '环境监测', |
||||
|
keepAlive: true, |
||||
|
// backApi: [],
|
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'deviceMonitor', |
||||
|
name: 'DeviceMonitor', |
||||
|
meta: { title: '设备监测', hideChildren: true, icon: 'huanjingjiance' }, |
||||
|
component: Base, |
||||
|
redirect: { name: 'DeviceMonitorIndex' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: 'index', |
||||
|
name: 'DeviceMonitorIndex', |
||||
|
component: () => import('/@/view/monitor/deviceMonitor/index.vue'), |
||||
|
meta: { |
||||
|
title: '设备监测', |
||||
|
keepAlive: true, |
||||
|
// backApi: [],
|
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
// {
|
||||
|
// path: 'group',
|
||||
|
// name: 'Group',
|
||||
|
// meta: { title: '分组管理', hideChildren: true, icon: 'shebeiguanli' },
|
||||
|
// component: Base,
|
||||
|
// redirect: { name: 'GroupIndex' },
|
||||
|
// children: [
|
||||
|
// {
|
||||
|
// path: 'index',
|
||||
|
// name: 'GroupIndex',
|
||||
|
// component: () => import('/@/view/monitor/group/index.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '分组管理',
|
||||
|
// keepAlive: true,
|
||||
|
// // backApi: [],
|
||||
|
// },
|
||||
|
// },
|
||||
|
// ],
|
||||
|
// },
|
||||
|
], |
||||
|
}; |
||||
|
export default equipment; |
||||
@ -0,0 +1,180 @@ |
|||||
|
import { dateUtil } from '/nerv-lib/util/date-util'; |
||||
|
import data from './mock.json'; |
||||
|
export const tableConfig = { |
||||
|
title: '设备台账', |
||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||
|
value: data.dataSource, |
||||
|
treeConfig: { |
||||
|
header: { |
||||
|
icon: 'orgLink', |
||||
|
title: '设备类别', |
||||
|
}, |
||||
|
defaultExpandAll: true, |
||||
|
api: () => { |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
resolve(data); |
||||
|
}, 100); |
||||
|
}); |
||||
|
}, |
||||
|
formConfig: { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'name', |
||||
|
label: '设备名称', |
||||
|
component: 'NsInput', |
||||
|
autoSubmit: true, |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
params: { |
||||
|
page: 0, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
rowSelection: null, |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '设备名称', |
||||
|
dataIndex: 'id', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备型号', |
||||
|
dataIndex: 'deviceCode', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'SN码', |
||||
|
dataIndex: 'deviceName', |
||||
|
textNumber: 8, |
||||
|
textEllipsis: true, |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备一级区域', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备二级区域', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备详细位置', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备规格', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备厂商纳税人识别号', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '厂商联系人', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备描述', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'IP地址', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '生产日期', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '采购日期', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '启用日期', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备成本（元）', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '使用期限', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '额定功率', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '特殊参数', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
formConfig: { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'name', |
||||
|
label: '设备名称', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'provider', |
||||
|
label: '设备厂商', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'payWay', |
||||
|
label: '设备区域', |
||||
|
component: 'NsSelect', |
||||
|
componentProps: { |
||||
|
placeholder: '请选择', |
||||
|
options: [ |
||||
|
{ |
||||
|
label: '全部', |
||||
|
value: '', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'createTime', |
||||
|
label: '生产日期', |
||||
|
component: 'NsRangePicker', |
||||
|
fieldMap: ['queryStartDate', 'queryEndDate'], |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'createTime1', |
||||
|
label: '采购日期', |
||||
|
component: 'NsRangePicker', |
||||
|
fieldMap: ['queryStartDate', 'queryEndDate'], |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'createTime2', |
||||
|
label: '启用日期', |
||||
|
component: 'NsRangePicker', |
||||
|
fieldMap: ['queryStartDate', 'queryEndDate'], |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
params: {}, |
||||
|
}, |
||||
|
// pagination: { pageSizeOptions: false },
|
||||
|
rowKey: 'uuid', |
||||
|
}; |
||||
@ -0,0 +1,210 @@ |
|||||
|
|
||||
|
<template> |
||||
|
|
||||
|
<div ref="chart" style="width: 100%; height: 80%;"></div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, onMounted, ref, watch } from 'vue'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
const data = [ |
||||
|
{ |
||||
|
date: '2023-12-01 0:00', |
||||
|
unit: 'V', |
||||
|
data: [ |
||||
|
{ |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
value: '21' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_003（照明电表）', |
||||
|
value: '36' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
value: '5' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-12-02 0:00', |
||||
|
unit: 'V', |
||||
|
data: [ |
||||
|
{ |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
value: '26' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_003（照明电表）', |
||||
|
value: '25' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
value: '47' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-12-03 0:00', |
||||
|
unit: 'V', |
||||
|
data: [ |
||||
|
{ |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
value: '18' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_003（照明电表）', |
||||
|
value: '22' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
value: '26' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-12-04 0:00', |
||||
|
unit: 'V', |
||||
|
data: [ |
||||
|
{ |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
value: '40' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_003（照明电表）', |
||||
|
value: '15' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
value: '12' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-12-05 0:00', |
||||
|
unit: 'V', |
||||
|
data: [ |
||||
|
{ |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
value: '15' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_003（照明电表）', |
||||
|
value: '18' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
value: '15' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'Graph', |
||||
|
setup() { |
||||
|
const chart = ref(null); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
|
||||
|
var seriesList = [] |
||||
|
var date = [] |
||||
|
var legendList: string|any[] = [] |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
|
||||
|
date.push(data[i].date) |
||||
|
|
||||
|
for (let j = 0; j < data[i].data.length; j++) { |
||||
|
if (seriesList.length < j + 1) { |
||||
|
seriesList.push( |
||||
|
{ |
||||
|
name: data[i].data[j].name, |
||||
|
data: [data[i].data[j].value], |
||||
|
type: 'line', |
||||
|
smooth: true |
||||
|
} |
||||
|
) |
||||
|
} else { |
||||
|
seriesList[j].data.push(data[i].data[j].value) |
||||
|
} |
||||
|
|
||||
|
if (legendList.length == 0 || legendList.length < j + 1) { |
||||
|
legendList.push(data[i].data[j].name) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
const option = { |
||||
|
|
||||
|
|
||||
|
legend: { |
||||
|
data: legendList, |
||||
|
orient: 'horizontal', |
||||
|
bottom: 30 |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
formatter: (params: any) => { |
||||
|
const date = params[0].name; |
||||
|
const values = params.map((param: any) => { |
||||
|
const unit = data.find(d => d.date === date)?.unit || ''; |
||||
|
return `<tr> |
||||
|
<td>${param.marker}${param.seriesName}</td> |
||||
|
<td style="text-align: right;">${param.value} ${unit}</td> |
||||
|
</tr>`; |
||||
|
}).join(''); |
||||
|
return `<div>${date}</div><table style="width: 100%;">${values}</table>`; |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: date |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
// { |
||||
|
// type: 'inside', |
||||
|
// start: 0, |
||||
|
// end: 10 |
||||
|
// }, |
||||
|
{ |
||||
|
height: 10, |
||||
|
start: 0, |
||||
|
end: 100, |
||||
|
handleSize: '300%', // 设置滑块的大小 |
||||
|
bottom: 15, |
||||
|
|
||||
|
} |
||||
|
], |
||||
|
series: seriesList |
||||
|
// series: [ |
||||
|
|
||||
|
// { |
||||
|
// data: [820, 932, 901, 934, 1290, 1330, 1320], |
||||
|
// type: 'line' |
||||
|
// } |
||||
|
// ] |
||||
|
}; |
||||
|
|
||||
|
const chartInstance = echarts.init(chart.value); |
||||
|
chartInstance.setOption(option); |
||||
|
}); |
||||
|
|
||||
|
return { chart }; |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<a-row type="flex"> |
||||
|
<a-col :span="4"> |
||||
|
<div style="padding: 0 20px; width: 100%; height: 100%;"> |
||||
|
<tree ref="treeRef"></tree> |
||||
|
</div> |
||||
|
</a-col> |
||||
|
<a-col :span="20"> |
||||
|
<div style="width: 100%; height: 100%;"> |
||||
|
<div class="ns-right-title"> |
||||
|
<span>历史数据</span> |
||||
|
<div class="button"> |
||||
|
<ns-icon name="biaoge" size="18" style="margin-right: 10px;"/> |
||||
|
<ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<graph ref="graphRef" v-if="isGraph"></graph> |
||||
|
<environment-table ref="tableRef" v-else></environment-table> |
||||
|
</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import tree from './tree/index.vue'; |
||||
|
import graph from './graph/index.vue'; |
||||
|
import environmentTable from './table/index.vue'; |
||||
|
|
||||
|
const iconName = ref('biaoge'); |
||||
|
|
||||
|
const treeRef = ref(); |
||||
|
const graphRef = ref(); |
||||
|
const tableRef = ref(); |
||||
|
|
||||
|
let isGraph = ref(true) |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
|
||||
|
function change() { |
||||
|
|
||||
|
isGraph.value = !isGraph.value |
||||
|
if (iconName.value == 'biaoge') { |
||||
|
iconName.value = 'bingtu' |
||||
|
} else { |
||||
|
iconName.value = 'biaoge' |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.ns-right-title { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
user-select: text; |
||||
|
margin-bottom: 5px; |
||||
|
padding-bottom: 10px; |
||||
|
padding-top: 10px; |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
|
||||
|
> span { |
||||
|
padding-left: 10px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
} |
||||
|
.button { |
||||
|
display: inline-block; |
||||
|
padding-right: 10px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,186 @@ |
|||||
|
<template> |
||||
|
<a-table :columns="columns" :data-source="data" bordered /> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { defineComponent } from 'vue'; |
||||
|
import type { TableColumnType } from 'ant-design-vue'; |
||||
|
|
||||
|
const data = [ |
||||
|
{ |
||||
|
key: '1', |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
position: 'A 相电压', |
||||
|
unit: 'V', |
||||
|
date: '2023-12-01', |
||||
|
'1:00': '3626', |
||||
|
}, |
||||
|
{ |
||||
|
key: '1', |
||||
|
name: 'AC_002（暖通电表）', |
||||
|
position: 'A 相电压', |
||||
|
unit: 'V', |
||||
|
date: '2023-12-01', |
||||
|
'1:00': '3626', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
name: 'AC_003（照明电表）', |
||||
|
position: 'A 相电压', |
||||
|
unit: 'V', |
||||
|
date: '2023-12-01', |
||||
|
'1:00': '3626', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
name: 'AC_003（照明电表）', |
||||
|
position: 'A 相电压', |
||||
|
unit: 'V', |
||||
|
date: '2023-12-01', |
||||
|
'1:00': '3626', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
name: 'AC_004（给排水电表）', |
||||
|
position: 'A 相电压', |
||||
|
unit: 'V', |
||||
|
date: '2023-12-01', |
||||
|
'1:00': '3626', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'EnvironmentTable', |
||||
|
setup() { |
||||
|
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => { |
||||
|
let rowSpan = 1; |
||||
|
for (let i = data.indexOf(record) + 1; i < data.length; i++) { |
||||
|
let shouldMerge = true; |
||||
|
for (const dependent of dependents) { |
||||
|
if (data[i][dependent] !== record[dependent]) { |
||||
|
shouldMerge = false; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) { |
||||
|
rowSpan++; |
||||
|
} else { |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return rowSpan; |
||||
|
}; |
||||
|
|
||||
|
const columns: TableColumnType[] = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'key', |
||||
|
customCell: (record, rowIndex) => { |
||||
|
const rowSpan = getRowSpan('name', record, data); |
||||
|
if (rowIndex != 0 && data[rowIndex-1].key == record.key) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
rowSpan: rowSpan, |
||||
|
}; |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备名称', |
||||
|
dataIndex: 'name', |
||||
|
customCell: (record, rowIndex) => { |
||||
|
const rowSpan = getRowSpan('name', record, data); |
||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
rowSpan: rowSpan, |
||||
|
}; |
||||
|
|
||||
|
// if (rowIndex === data.indexOf(record)) { |
||||
|
// return { |
||||
|
// rowSpan: rowSpan, |
||||
|
// }; |
||||
|
// } |
||||
|
// return { |
||||
|
// rowSpan: 0, |
||||
|
// colSpan: 0, |
||||
|
// }; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备点位', |
||||
|
dataIndex: 'position', |
||||
|
customCell: (record, rowIndex) => { |
||||
|
const rowSpan = getRowSpan('position', record, data, ['name']); |
||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
rowSpan: rowSpan, |
||||
|
}; |
||||
|
// if (rowIndex === data.indexOf(record)) { |
||||
|
// return { |
||||
|
// rowSpan: rowSpan, |
||||
|
// }; |
||||
|
// } |
||||
|
// return { |
||||
|
// rowSpan: 0, |
||||
|
// colSpan: 0, |
||||
|
// }; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '计量单位', |
||||
|
dataIndex: 'unit', |
||||
|
customCell: (record, rowIndex) => { |
||||
|
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']); |
||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
rowSpan: rowSpan, |
||||
|
}; |
||||
|
// if (rowIndex === data.indexOf(record)) { |
||||
|
// return { |
||||
|
// rowSpan: rowSpan, |
||||
|
// }; |
||||
|
// } |
||||
|
// return { |
||||
|
// rowSpan: 0, |
||||
|
// colSpan: 0, |
||||
|
// }; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '日期', |
||||
|
dataIndex: 'date', |
||||
|
}, |
||||
|
{ |
||||
|
title: '1:00', |
||||
|
dataIndex: '1:00', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return { |
||||
|
data, |
||||
|
columns, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped></style> |
||||
@ -0,0 +1,225 @@ |
|||||
|
<template> |
||||
|
<div class="parent-container"> |
||||
|
<div class="ns-tree-title"> |
||||
|
<span>设备列表</span> |
||||
|
</div> |
||||
|
<a-tree-select |
||||
|
v-model:value="value" |
||||
|
style="width: 100%" |
||||
|
|
||||
|
:tree-line="treeLine && { showLeafIcon }" |
||||
|
:tree-data="treeData1" |
||||
|
> |
||||
|
<!-- <template #title="{ value: val, title }"> |
||||
|
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> |
||||
|
<template v-else>{{ title }}</template> |
||||
|
</template> --> |
||||
|
</a-tree-select> |
||||
|
|
||||
|
<a-tree |
||||
|
v-model:expandedKeys="expandedKeys" |
||||
|
v-model:selectedKeys="selectedKeys" |
||||
|
v-model:checkedKeys="checkedKeys" |
||||
|
checkable |
||||
|
style="width: 100%; margin-bottom: 10px;" |
||||
|
:tree-data="treeData2" |
||||
|
> |
||||
|
<!-- <template #title="{ title, key }"> |
||||
|
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span> |
||||
|
<template v-else>{{ title }}</template> |
||||
|
</template> --> |
||||
|
</a-tree> |
||||
|
|
||||
|
<div class="fixed-bottom"> |
||||
|
<a-divider /> |
||||
|
<a-select |
||||
|
ref="select" |
||||
|
v-model:value="selectedValue" |
||||
|
placeholder="请选择点位" |
||||
|
style="width: 100%; margin-bottom: 10px;" |
||||
|
:options="options1" |
||||
|
></a-select> |
||||
|
<a-select |
||||
|
v-model:value="frequencyValue" |
||||
|
placeholder="请选择频率" |
||||
|
style="width: 100%; margin-bottom: 10px;" |
||||
|
:options="options2" |
||||
|
></a-select> |
||||
|
<a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/> |
||||
|
<a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue'; |
||||
|
import { defineComponent, ref, watch ,onMounted } from 'vue'; |
||||
|
import dayjs, { Dayjs } from 'dayjs'; |
||||
|
|
||||
|
const treeData2: TreeProps['treeData'] = [ |
||||
|
{ |
||||
|
title: 'AC_001(总电表)', |
||||
|
key: '1', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: 'AC_002(暖通电表)', |
||||
|
key: '2', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'AC_003(照明电表)', |
||||
|
key: '3', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'AC_004(给排水电表)', |
||||
|
key: '4', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'AC_005(通风电表)', |
||||
|
key: '5', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'AC_006(电动门电表)', |
||||
|
key: '6', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'Tree', |
||||
|
setup() { |
||||
|
const treeLine = ref(true); |
||||
|
const showLeafIcon = ref(false); |
||||
|
const value = ref<string>(); |
||||
|
|
||||
|
const treeData1 = ref<TreeSelectProps['treeData']>([ |
||||
|
{ |
||||
|
title: '3.电梯', |
||||
|
value: '3', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: '301.扶梯', |
||||
|
value: '301', |
||||
|
}, |
||||
|
{ |
||||
|
title: '302.直梯', |
||||
|
value: '302', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
title: '4.冷热源', |
||||
|
value: '4', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: '401.冷水机组', |
||||
|
value: '401', |
||||
|
}, |
||||
|
{ |
||||
|
title: '402.热泵机组', |
||||
|
value: '402', |
||||
|
}, |
||||
|
{ |
||||
|
title: '403.锅炉', |
||||
|
value: '403', |
||||
|
}, |
||||
|
{ |
||||
|
title: '404.水处理机组', |
||||
|
value: '404', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
||||
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
||||
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
||||
|
|
||||
|
const options1 = ref<SelectProps['options']>([]); |
||||
|
const options2 = ref<SelectProps['options']>([ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '5分钟', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '10分钟', |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '30分钟', |
||||
|
}, |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '1小时', |
||||
|
}, |
||||
|
]); |
||||
|
const selectedValue = ref<string | undefined>(); |
||||
|
const frequencyValue = ref<string | undefined>(); |
||||
|
const dateRange = ref<[Dayjs, Dayjs] | undefined>(); |
||||
|
|
||||
|
const getDianWeiList = () => { |
||||
|
console.log('getDianWeiList 被调用'); |
||||
|
options1.value = [ |
||||
|
{ value: '1', label: 'A 项电压' }, |
||||
|
{ value: '2', label: 'B 项电压' }, |
||||
|
{ value: '3', label: 'C 项电压' }, |
||||
|
{ value: '4', label: 'AB 线电压' }, |
||||
|
{ value: '5', label: 'BC 线电压' }, |
||||
|
{ value: '6', label: 'A 项电流' }, |
||||
|
{ value: '7', label: 'B 项电流' }, |
||||
|
]; |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getDianWeiList(); |
||||
|
}); |
||||
|
|
||||
|
const dateFormat = 'YYYY-MM-DD'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
return { |
||||
|
treeLine, |
||||
|
showLeafIcon, |
||||
|
value, |
||||
|
treeData1, |
||||
|
treeData2, |
||||
|
expandedKeys, |
||||
|
selectedKeys, |
||||
|
checkedKeys, |
||||
|
options1, |
||||
|
options2, |
||||
|
selectedValue, |
||||
|
frequencyValue, |
||||
|
dateRange, |
||||
|
getDianWeiList, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.ns-tree-title { |
||||
|
user-select: text; |
||||
|
margin-bottom: 5px; |
||||
|
padding-bottom: 10px; |
||||
|
padding-top: 10px; |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
> span { |
||||
|
padding-left: 10px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
} |
||||
|
.parent-container { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.fixed-bottom { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue