Browse Source

1.设备监控 图表下载 时间选择改为三天

2.能耗监控 - 图表前台页面
deploy-dev
fks-yangshouda 4 months ago
parent
commit
fb1980d73a
  1. 2
      hx-ai-intelligent/src/icon/huanjingjiance.svg
  2. 2
      hx-ai-intelligent/src/icon/jiankongzhongxin.svg
  3. 1
      hx-ai-intelligent/src/icon/xiazai.svg
  4. 19
      hx-ai-intelligent/src/router/monitor.ts
  5. 155
      hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
  6. 34
      hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
  7. 71
      hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
  8. 206
      hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
  9. 88
      hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
  10. 166
      hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
  11. 330
      hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

2
hx-ai-intelligent/src/icon/huanjingjiance.svg

@ -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

2
hx-ai-intelligent/src/icon/jiankongzhongxin.svg

@ -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

@ -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

19
hx-ai-intelligent/src/router/monitor.ts

@ -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',

155
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

@ -1,8 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 80%;"></div>
<div ref="graphChart" style="width: 100%; height: 80%"></div>
</template>
<script lang="ts">
@ -16,17 +13,17 @@ const data = [
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>

34
hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue

@ -1,21 +1,21 @@
<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>
@ -33,23 +33,28 @@ const treeRef = ref();
const graphRef = ref();
const tableRef = ref();
let isGraph = ref(true)
let isGraph = ref(true);
defineOptions({
name: 'EnvironmentMonitorIndex', // name
});
function change() {
const downloadChart = () => {
if (isGraph.value) {
if (graphRef.value) {
graphRef.value.downloadChart();
}
}
};
isGraph.value = !isGraph.value
function change() {
isGraph.value = !isGraph.value;
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu'
iconName.value = 'bingtu';
} else {
iconName.value = 'biaoge'
iconName.value = 'biaoge';
}
}
</script>
<style lang="less" scoped>
@ -71,6 +76,5 @@ function change() {
.button {
display: inline-block;
padding-right: 10px;
}
</style>

71
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

@ -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,17 +34,24 @@
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>
@ -86,6 +91,7 @@ const treeData2: TreeProps['treeData'] = [
];
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,6 +227,12 @@ export default defineComponent({
frequencyValue,
dateRange,
getDianWeiList,
getSelect,
disabledDate,
onCalendarChange,
onOpenChange,
onChange,
hackValue,
};
},
});

206
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

@ -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

@ -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

@ -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

@ -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>
Loading…
Cancel
Save