1.设备监控 图表下载 时间选择改为三天
2.能耗监控 - 图表前台页面
This commit is contained in:
fks-yangshouda
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061440927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11363" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M659.925333 128a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666zM512 405.333333c-88.362667 0-160 71.637333-160 160 0 88.362667 71.637333 160 160 160 88.362667 0 160-71.637333 160-160 0-88.362667-71.637333-160-160-160z m0 256a96 96 0 1 0 0-192 96 96 0 0 0 0 192z" fill="#000000" p-id="11364"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061440927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11363" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M659.925333 128a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666zM512 405.333333c-88.362667 0-160 71.637333-160 160 0 88.362667 71.637333 160 160 160 88.362667 0 160-71.637333 160-160 0-88.362667-71.637333-160-160-160z m0 256a96 96 0 1 0 0-192 96 96 0 0 0 0 192z" p-id="11364"></path></svg>
|
||||
|
Before Width: | Height: | Size: 969 B After Width: | Height: | Size: 954 B |
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061108318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10061" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 12L94.71 138v314.92C94.71 657.7 263.86 880.16 512 1012c248.14-131.84 417.29-354.3 417.29-559.08V138z m209.91 510H562v159.91H462V522H302.09V422H462V262.09h100V422h159.91z" fill="#2c2c2c" p-id="10062"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061108318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10061" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 12L94.71 138v314.92C94.71 657.7 263.86 880.16 512 1012c248.14-131.84 417.29-354.3 417.29-559.08V138z m209.91 510H562v159.91H462V522H302.09V422H462V262.09h100V422h159.91z" p-id="10062"></path></svg>
|
||||
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 535 B |
1
hx-ai-intelligent/src/icon/xiazai.svg
Normal file
1
hx-ai-intelligent/src/icon/xiazai.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720430904326" class="icon" viewBox="0 0 1354 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3403" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.15625" height="16"><path d="M1034.83248 645.406063l-191.508238 191.508238a53.622507 53.622507 0 0 1-75.964301 0l-191.508238-191.508238a53.622507 53.622507 0 0 1 0-75.964301 53.622507 53.622507 0 0 1 75.965301 0l102.775054 102.775054V303.884205a53.622507 53.622507 0 1 1 107.245014 0v368.332611l95.753119-102.775054a53.622507 53.622507 0 0 1 75.965301 0 53.622507 53.622507 0 0 1 1.276988 75.964301z m262.364587-175.548385a365.141641 365.141641 0 0 0-97.030108-98.94609 378.546518 378.546518 0 0 0-29.364729-123.202867 397.697341 397.697341 0 0 0-89.369178-127.671825 404.719277 404.719277 0 0 0-133.418773-91.28516A408.549242 408.549242 0 0 0 792.894706 0.026a400.251318 400.251318 0 0 0-225.977921 67.665377 410.464224 410.464224 0 0 0-97.669102 91.285161 261.088598 261.088598 0 0 0-63.836412-7.65993 247.044727 247.044727 0 0 0-176.18738 70.857348 245.129745 245.129745 0 0 0-72.134336 202.360139 324.925011 324.925011 0 0 0-84.263225 72.77333A308.965158 308.965158 0 0 0 0.053 702.22054a310.242146 310.242146 0 0 0 97.029107 228.531898 331.307952 331.307952 0 0 0 105.969025 69.58136 330.030964 330.030964 0 0 0 127.670826 23.619782h656.233963A360.034688 360.034688 0 0 0 1242.298572 919.261544a360.034688 360.034688 0 0 0 81.071254-116.181932 354.288741 354.288741 0 0 0 27.449748-138.523725 344.713829 344.713829 0 0 0-54.260501-194.699209z" fill="#5656FB" p-id="3404"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -43,6 +43,25 @@ const equipment = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'energyMonitor',
|
||||
name: 'EnergyMonitor',
|
||||
meta: { title: '能耗监测', hideChildren: true, icon: 'huanjingjiance' },
|
||||
component: Base,
|
||||
redirect: { name: 'EnergyMonitorIndex' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'EnergyMonitorIndex',
|
||||
component: () => import('/@/view/monitor/energyMonitor/index.vue'),
|
||||
meta: {
|
||||
title: '能耗监测',
|
||||
keepAlive: true,
|
||||
// backApi: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: 'group',
|
||||
// name: 'Group',
|
||||
|
||||
@@ -1,32 +1,29 @@
|
||||
|
||||
<template>
|
||||
|
||||
<div ref="chart" style="width: 100%; height: 80%;"></div>
|
||||
|
||||
<div ref="graphChart" style="width: 100%; height: 80%"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const data = [
|
||||
const data = [
|
||||
{
|
||||
date: '2023-12-01 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002（暖通电表）',
|
||||
value: '21'
|
||||
value: '21',
|
||||
},
|
||||
{
|
||||
name: 'AC_003（照明电表）',
|
||||
value: '36'
|
||||
value: '36',
|
||||
},
|
||||
{
|
||||
name: 'AC_004（给排水电表）',
|
||||
value: '5'
|
||||
}
|
||||
]
|
||||
value: '5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-02 0:00',
|
||||
@@ -34,18 +31,17 @@ const data = [
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002（暖通电表）',
|
||||
value: '26'
|
||||
value: '26',
|
||||
},
|
||||
{
|
||||
name: 'AC_003（照明电表）',
|
||||
value: '25'
|
||||
value: '25',
|
||||
},
|
||||
{
|
||||
name: 'AC_004（给排水电表）',
|
||||
value: '47'
|
||||
}
|
||||
]
|
||||
|
||||
value: '47',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-03 0:00',
|
||||
@@ -53,17 +49,17 @@ const data = [
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002（暖通电表）',
|
||||
value: '18'
|
||||
value: '18',
|
||||
},
|
||||
{
|
||||
name: 'AC_003（照明电表）',
|
||||
value: '22'
|
||||
value: '22',
|
||||
},
|
||||
{
|
||||
name: 'AC_004（给排水电表）',
|
||||
value: '26'
|
||||
}
|
||||
]
|
||||
value: '26',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-04 0:00',
|
||||
@@ -71,17 +67,17 @@ const data = [
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002（暖通电表）',
|
||||
value: '40'
|
||||
value: '40',
|
||||
},
|
||||
{
|
||||
name: 'AC_003（照明电表）',
|
||||
value: '15'
|
||||
value: '15',
|
||||
},
|
||||
{
|
||||
name: 'AC_004（给排水电表）',
|
||||
value: '12'
|
||||
}
|
||||
]
|
||||
value: '12',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-05 0:00',
|
||||
@@ -89,122 +85,115 @@ const data = [
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002（暖通电表）',
|
||||
value: '15'
|
||||
value: '15',
|
||||
},
|
||||
{
|
||||
name: 'AC_003（照明电表）',
|
||||
value: '18'
|
||||
value: '18',
|
||||
},
|
||||
{
|
||||
name: 'AC_004（给排水电表）',
|
||||
value: '15'
|
||||
}
|
||||
]
|
||||
value: '15',
|
||||
},
|
||||
];
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
name: 'Graph',
|
||||
|
||||
setup() {
|
||||
const chart = ref(null);
|
||||
const graphChart = ref(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
var seriesList = []
|
||||
var date = []
|
||||
var legendList: string|any[] = []
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
var seriesList = [];
|
||||
var date = [];
|
||||
var legendList: string | any[] = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
|
||||
date.push(data[i].date)
|
||||
date.push(data[i].date);
|
||||
|
||||
for (let j = 0; j < data[i].data.length; j++) {
|
||||
if (seriesList.length < j + 1) {
|
||||
seriesList.push(
|
||||
{
|
||||
seriesList.push({
|
||||
name: data[i].data[j].name,
|
||||
data: [data[i].data[j].value],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
)
|
||||
smooth: true,
|
||||
});
|
||||
} else {
|
||||
seriesList[j].data.push(data[i].data[j].value)
|
||||
seriesList[j].data.push(data[i].data[j].value);
|
||||
}
|
||||
|
||||
if (legendList.length == 0 || legendList.length < j + 1) {
|
||||
legendList.push(data[i].data[j].name)
|
||||
|
||||
legendList.push(data[i].data[j].name);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
const option = {
|
||||
|
||||
|
||||
legend: {
|
||||
data: legendList,
|
||||
orient: 'horizontal',
|
||||
bottom: 30
|
||||
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 || '';
|
||||
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('');
|
||||
})
|
||||
.join('');
|
||||
return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: date
|
||||
data: date,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
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'
|
||||
// }
|
||||
// ]
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
const chartInstance = echarts.init(chart.value);
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
chartInstance.setOption(option);
|
||||
});
|
||||
|
||||
return { chart };
|
||||
// 下载图表
|
||||
const downloadChart = () => {
|
||||
if (chartInstance) {
|
||||
const base64 = chartInstance.getDataURL({
|
||||
type: 'png',
|
||||
backgroundColor: '#fff',
|
||||
});
|
||||
const link = document.createElement('a');
|
||||
link.href = base64;
|
||||
link.download = 'chart.png';
|
||||
link.click();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
};
|
||||
|
||||
</style>
|
||||
return {
|
||||
graphChart,
|
||||
downloadChart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@@ -1,59 +1,64 @@
|
||||
<template>
|
||||
<a-row type="flex">
|
||||
<a-col :span="4">
|
||||
<div style="padding: 0 20px; width: 100%; height: 100%;">
|
||||
<tree ref="treeRef"></tree>
|
||||
<div style="padding: 0 20px; width: 100%; height: 100%">
|
||||
<tree ref="treeRef" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<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"/>
|
||||
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
||||
<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>
|
||||
<graph ref="graphRef" v-if="isGraph" />
|
||||
<environment-table ref="tableRef" v-else />
|
||||
</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';
|
||||
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 iconName = ref('biaoge');
|
||||
|
||||
const treeRef = ref();
|
||||
const graphRef = ref();
|
||||
const tableRef = ref();
|
||||
const treeRef = ref();
|
||||
const graphRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
let isGraph = ref(true)
|
||||
let isGraph = ref(true);
|
||||
|
||||
defineOptions({
|
||||
defineOptions({
|
||||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
});
|
||||
|
||||
function change() {
|
||||
|
||||
isGraph.value = !isGraph.value
|
||||
if (iconName.value == 'biaoge') {
|
||||
iconName.value = 'bingtu'
|
||||
} else {
|
||||
iconName.value = 'biaoge'
|
||||
const downloadChart = () => {
|
||||
if (isGraph.value) {
|
||||
if (graphRef.value) {
|
||||
graphRef.value.downloadChart();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
.ns-right-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -67,10 +72,9 @@ function change() {
|
||||
padding-left: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<template>
|
||||
<div class="parent-container">
|
||||
<div class="ns-tree-title">
|
||||
@@ -6,10 +7,8 @@
|
||||
<a-tree-select
|
||||
v-model:value="value"
|
||||
style="width: 100%"
|
||||
|
||||
:tree-line="treeLine && { showLeafIcon }"
|
||||
:tree-data="treeData1"
|
||||
>
|
||||
: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>
|
||||
@@ -21,9 +20,8 @@
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
checkable
|
||||
style="width: 100%; margin-bottom: 10px;"
|
||||
:tree-data="treeData2"
|
||||
>
|
||||
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>
|
||||
@@ -36,27 +34,34 @@
|
||||
ref="select"
|
||||
v-model:value="selectedValue"
|
||||
placeholder="请选择点位"
|
||||
style="width: 100%; margin-bottom: 10px;"
|
||||
:options="options1"
|
||||
></a-select>
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:options="options1" />
|
||||
<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>
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:options="options2" />
|
||||
<a-range-picker
|
||||
:value="hackValue || dateRange"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChange"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
|
||||
>查询</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';
|
||||
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'] = [
|
||||
const treeData2: TreeProps['treeData'] = [
|
||||
{
|
||||
title: 'AC_001(总电表)',
|
||||
key: '1',
|
||||
@@ -83,9 +88,10 @@ const treeData2: TreeProps['treeData'] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
export default defineComponent({
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
name: 'Tree',
|
||||
setup() {
|
||||
const treeLine = ref(true);
|
||||
@@ -171,14 +177,41 @@ export default defineComponent({
|
||||
];
|
||||
};
|
||||
|
||||
const getSelect = () => {};
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const dates = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
|
||||
const onChange = (val: RangeValue) => {
|
||||
dateRange.value = val;
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
dates.value = [] as any;
|
||||
hackValue.value = [] as any;
|
||||
} else {
|
||||
hackValue.value = undefined;
|
||||
}
|
||||
};
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
const onCalendarChange = (val: RangeValue) => {
|
||||
dates.value = val;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDianWeiList();
|
||||
});
|
||||
|
||||
const dateFormat = 'YYYY-MM-DD';
|
||||
|
||||
|
||||
|
||||
return {
|
||||
treeLine,
|
||||
showLeafIcon,
|
||||
@@ -194,13 +227,19 @@ export default defineComponent({
|
||||
frequencyValue,
|
||||
dateRange,
|
||||
getDianWeiList,
|
||||
getSelect,
|
||||
disabledDate,
|
||||
onCalendarChange,
|
||||
onOpenChange,
|
||||
onChange,
|
||||
hackValue,
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ns-tree-title {
|
||||
.ns-tree-title {
|
||||
user-select: text;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 10px;
|
||||
@@ -210,16 +249,16 @@ export default defineComponent({
|
||||
padding-left: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.parent-container {
|
||||
}
|
||||
.parent-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
.fixed-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } 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: 'GraphGraph',
|
||||
setup() {
|
||||
const graphGraphchart = ref(null);
|
||||
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
onMounted(() => {
|
||||
chartInstance = echarts.init(graphGraphchart.value);
|
||||
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: 0,
|
||||
left: 60,
|
||||
},
|
||||
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: [
|
||||
// {
|
||||
// height: 10,
|
||||
// start: 0,
|
||||
// end: 100,
|
||||
// handleSize: '300%', // 设置滑块的大小
|
||||
// bottom: 15,
|
||||
// },
|
||||
// ],
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// mark: { show: true },
|
||||
// saveAsImage: { show: true },
|
||||
// },
|
||||
// },
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
chartInstance = echarts.init(graphGraphchart.value);
|
||||
chartInstance.setOption(option);
|
||||
});
|
||||
|
||||
// 下载图表
|
||||
const downloadChart = () => {
|
||||
if (chartInstance) {
|
||||
const base64 = chartInstance.getDataURL({
|
||||
type: 'png',
|
||||
backgroundColor: '#fff',
|
||||
});
|
||||
const link = document.createElement('a');
|
||||
link.href = base64;
|
||||
link.download = 'chart.png';
|
||||
link.click();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
graphGraphchart,
|
||||
downloadChart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
88
hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
Normal file
88
hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey" style="height: 8%">
|
||||
<a-tab-pane key="1" tab="图表" />
|
||||
<a-tab-pane key="2" tab="分析" />
|
||||
</a-tabs>
|
||||
<a-row type="flex" style="height: 92%">
|
||||
<a-col :span="4">
|
||||
<div style="padding: 0 20px; width: 100%; height: 100%">
|
||||
<tree ref="treeRef" />
|
||||
</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="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
||||
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeKey == '1'" style="height: 90%">
|
||||
<graph-graph ref="graphRef" v-if="isGraph" />
|
||||
<environment-table ref="tableRef" v-else />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import tree from './tree/index.vue';
|
||||
import graphGraph from './graphGraph/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);
|
||||
const activeKey = ref('1');
|
||||
|
||||
defineOptions({
|
||||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
|
||||
const downloadChart = () => {
|
||||
if (activeKey.value == '1' && isGraph) {
|
||||
if (graphRef.value) {
|
||||
graphRef.value.downloadChart();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
166
hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
Normal file
166
hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<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,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: '1:00',
|
||||
dataIndex: '1:00',
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
330
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
Normal file
330
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<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"
|
||||
>
|
||||
</a-tree-select> -->
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="selectedValue"
|
||||
placeholder="请选择能耗类型"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:options="options1" />
|
||||
|
||||
<a-radio-group
|
||||
v-model:value="mode"
|
||||
@change="changeMode"
|
||||
style="padding-bottom: 10px; width: 100%">
|
||||
<a-radio-button value="1" style="width: 50%; text-align: center">设备</a-radio-button>
|
||||
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input v-model:value="value" placeholder="请输入设备名称" v-if="mode == '1'" />
|
||||
<a-input v-model:value="value" placeholder="请输入节点名称" v-else />
|
||||
<a-tree
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
checkable
|
||||
:height="300"
|
||||
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
||||
:tree-data="treeData2" />
|
||||
|
||||
<div class="fixed-bottom">
|
||||
<a-divider />
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择采集频率"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:options="options2" />
|
||||
<a-range-picker
|
||||
:value="hackValue || dateRange"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChange"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
|
||||
>查询</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
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 mode = ref<String>('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: '用电量' },
|
||||
{ value: '2', label: '用水量' },
|
||||
{ value: '3', label: '碳排量' },
|
||||
{ value: '4', label: '标煤量' },
|
||||
];
|
||||
};
|
||||
|
||||
const getSelect = () => {};
|
||||
|
||||
const treeData2 = ref<TreeProps['treeData']>([]);
|
||||
const changeMode = () => {
|
||||
if (mode.value == '1') {
|
||||
treeData2.value = [
|
||||
{
|
||||
title: 'AC_001(总电表)',
|
||||
key: '101',
|
||||
children: [
|
||||
{
|
||||
title: 'AC_002(暖通电表)',
|
||||
key: '102',
|
||||
},
|
||||
{
|
||||
title: 'AC_003(照明电表)',
|
||||
key: '103',
|
||||
},
|
||||
{
|
||||
title: 'AC_004(给排水电表)',
|
||||
key: '104',
|
||||
},
|
||||
{
|
||||
title: 'AC_005(通风电表)',
|
||||
key: '105',
|
||||
},
|
||||
{
|
||||
title: 'AC_006(电动门电表)',
|
||||
key: '106',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
} else {
|
||||
treeData2.value = [
|
||||
{
|
||||
title: '功能分项',
|
||||
key: '1',
|
||||
children: [
|
||||
{
|
||||
title: '照明',
|
||||
key: '2',
|
||||
children: [
|
||||
{
|
||||
title: '站台照明',
|
||||
key: '3',
|
||||
},
|
||||
{
|
||||
title: '站厅照明',
|
||||
key: '4',
|
||||
},
|
||||
{
|
||||
title: '应急照明',
|
||||
key: '5',
|
||||
},
|
||||
{
|
||||
title: '广告照明',
|
||||
key: '6',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '暖通',
|
||||
key: '7',
|
||||
},
|
||||
{
|
||||
title: '排放',
|
||||
key: '8',
|
||||
},
|
||||
{
|
||||
title: '给排水',
|
||||
key: '9',
|
||||
},
|
||||
{
|
||||
title: '光伏',
|
||||
key: '10',
|
||||
},
|
||||
{
|
||||
title: '电梯',
|
||||
key: '11',
|
||||
},
|
||||
{
|
||||
title: '电动门',
|
||||
key: '12',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const dates = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
dates.value = [] as any;
|
||||
hackValue.value = [] as any;
|
||||
} else {
|
||||
hackValue.value = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (val: RangeValue) => {
|
||||
dateRange.value = val;
|
||||
};
|
||||
|
||||
const onCalendarChange = (val: RangeValue) => {
|
||||
dates.value = val;
|
||||
};
|
||||
onMounted(() => {
|
||||
getDianWeiList();
|
||||
changeMode();
|
||||
});
|
||||
|
||||
// const dateFormat = 'YYYY-MM-DD';
|
||||
|
||||
return {
|
||||
// treeLine,
|
||||
// showLeafIcon,
|
||||
value,
|
||||
treeData1,
|
||||
treeData2,
|
||||
expandedKeys,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
options1,
|
||||
options2,
|
||||
mode,
|
||||
selectedValue,
|
||||
frequencyValue,
|
||||
dateRange,
|
||||
getDianWeiList,
|
||||
getSelect,
|
||||
changeMode,
|
||||
disabledDate,
|
||||
onCalendarChange,
|
||||
onOpenChange,
|
||||
onChange,
|
||||
hackValue,
|
||||
};
|
||||
},
|
||||
});
|
||||
</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>
|
||||
Reference in New Issue
Block a user