Browse Source

能耗监测 分析 右侧图

temp
fks-yangshouda 4 months ago
parent
commit
4fcdae08de
  1. 1
      hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
  2. 337
      hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
  3. 8
      hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
  4. 72
      hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

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

@ -474,6 +474,7 @@
onMounted(() => { onMounted(() => {
getDianWeiList(); getDianWeiList();
changeDeviceType(null, null); changeDeviceType(null, null);
getSelect();
}); });
return { return {

337
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue

@ -1,16 +1,47 @@
<template> <template>
<a-row type="flex" style="height: 92%"> <a-row type="flex" style="height: 92%">
<a-col :span="8"> <a-col :span="8">
<a-radio-group <div
v-model:value="mode" style="
@change="changeMode" box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px"> width: 98%;
<a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button> height: 96%;
<a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button> margin: 2%;
</a-radio-group> ">
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div> <a-radio-group
v-model:value="mode"
@change="changeMode"
style="
padding-bottom: 10px;
width: 40%;
height: 4%;
padding-left: 30px;
padding-top: 10px;
">
<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>
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
</div>
</a-col>
<a-col :span="16">
<div
ref="analysisGraphRingchart"
style="
width: 98%;
height: 38%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
margin: 1%;
"></div>
<div
ref="analysisGraphBarchart"
style="
width: 98%;
height: 58%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
margin: 1%;
"></div>
</a-col> </a-col>
<a-col :span="16" />
</a-row> </a-row>
</template> </template>
@ -52,11 +83,24 @@
); );
const changeMode = () => {}; const changeMode = () => {};
const analysisGraphchart = ref(null); const analysisGraphchart = ref(null);
const analysisGraphRingchart = ref(null);
const analysisGraphBarchart = ref(null);
//
let chartInstance: echarts.ECharts | null = null; let chartInstance: echarts.ECharts | null = null;
//
let chartRight1: echarts.ECharts | null = null;
//
let chartRight2: echarts.ECharts | null = null;
const draw = () => { const draw = () => {
data.value = pageData.analysisGraphList; data.value = pageData.analysisGraphList;
//
drawLeft();
drawRight1();
};
const drawLeft = () => {
if (data.value && data.value.length > 0) { if (data.value && data.value.length > 0) {
if (chartInstance) { if (chartInstance) {
chartInstance.dispose(); chartInstance.dispose();
@ -65,7 +109,6 @@
var seriesdata = []; var seriesdata = [];
var dateX = []; var dateX = [];
// var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) { for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name); dateX.push(data.value[i].name);
@ -81,26 +124,39 @@
show: true, show: true,
formatter: '{b}', formatter: '{b}',
}, },
barWidth: '25%',
}, },
]; ];
const option = { const option = {
// tooltip: { grid: {
// trigger: 'axis', top: 60,
// formatter: (params: any) => { bottom: 20,
// const date = params[0].name; },
// const values = params dataZoom: [
// .map((param: any) => { {
// const unit = data.value.find((d) => d.name === date)?.unit || ''; show: true,
// return `<tr> type: 'slider',
// <td>${param.marker}${param.seriesName}</td> zoomLock: true,
// <td style="text-align: right;">${param.value} ${unit}</td> startValue: 0, //
// </tr>`; endValue: 4,
// }) showDetail: false,
// .join(''); width: 5,
// return `<div>${date}</div><table style="width: 100%;">${values}</table>`; yAxisIndex: [0, 1], // y
// }, },
// }, {
show: true,
type: 'inside',
// width: 0,
startValue: 0,
endValue: 10,
minValueSpan: 10,
yAxisIndex: [0],
zoomOnMouseWheel: false, //
moveOnMouseWheel: true, //
moveOnMouseMove: true, //
},
],
yAxis: { yAxis: {
type: 'category', type: 'category',
axisLine: { show: false }, axisLine: { show: false },
@ -125,6 +181,233 @@
chartInstance.setOption(option); chartInstance.setOption(option);
} }
}; };
const drawRight1 = () => {
if (data.value && data.value.length > 0) {
if (chartRight1) {
chartRight1.dispose();
}
chartRight1 = echarts.init(analysisGraphRingchart.value);
var seriesdata = [];
var dateX = [];
// var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
seriesdata.push({ value: data.value[i].ringValue, name: data.value[i].name });
}
var seriesList = [
{
// name: data.value[0].energyType,
data: seriesdata,
type: 'pie',
//
radius: ['70%', '90%'],
center: ['30%', '50%'], //
// 线
labelLine: {
show: true,
length: 10, // 线
length2: 30, // 线
},
label: {
show: true,
// formatter: '{b}',
position: 'outside', //
// alignTo: 'edge',
formatter: '{c}' + data.value[0].energyUnit + '\n{d}%',
alignTo: 'labelLine',
distanceToLabelLine: 5, // 线
distance: 10, //
},
itemStyle: {
normal: {
//
borderWidth: 2,
borderColor: '#ffffff',
},
},
},
];
const option = {
tooltip: {
trigger: 'item',
},
//
legend: {
top: 'center',
left: '60%',
//
orient: 'vertical',
},
yAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: dateX,
},
xAxis: {
type: 'value',
position: 'top',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
series: seriesList,
};
chartRight1 = echarts.init(analysisGraphRingchart.value);
chartRight1.setOption(option);
//
if (seriesdata.length > 0) {
drawRight2(seriesdata[0]);
}
chartRight1.on('click', function (params) {
//
console.log(params.name + ' 被点击了');
drawRight2(params);
});
}
};
//
// chartRight2
// analysisGraphBarchart
const drawRight2 = (auxiliary: any) => {
if (chartRight2) {
chartRight2.dispose();
}
// 线
var compareData: any[] = [];
//
var showData: any[] = [];
// X
var dateX: any[] = [];
data.value.forEach((item) => {
if (item.name !== auxiliary.name) {
dateX.push(item.name);
showData.push(item.ringValue);
compareData.push(auxiliary.value);
}
});
const option = {
//
legend: {
data: [
{ name: '对比值', icon: 'rect' }, // 使
{
name: '参考线',
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
}, // 线使线
],
orient: 'horizontal',
bottom: 10,
left: 60,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
lineStyle: {
color: 'red', // tooltip 线
},
},
},
grid: {
top: 20,
bottom: 60,
},
xAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: true },
axisTick: { show: false },
splitLine: { show: false },
data: dateX,
},
yAxis: {
type: 'value',
position: 'top',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
dataZoom: [
{
show: true,
type: 'slider',
zoomLock: true,
startValue: 0, //
endValue: 5,
bottom: '0%',
height: 10,
showDetail: false,
},
{
show: true,
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: false, //
moveOnMouseMove: true, //
moveOnMouseWheel: true,
},
],
series: [
{
name: '对比值',
type: 'bar',
stack: 'Total',
label: {
// show: true,
position: 'right',
formatter: '{b}',
},
data: showData,
barWidth: 30, //
},
{
name: '参考线',
type: 'line',
data: compareData,
markLine: {
symbol: 'none',
label: {
show: false,
},
lineStyle: {
type: 'dashed',
color: 'red',
},
},
itemStyle: {
color: 'red', // 线
},
emphasis: {
itemStyle: {
opacity: 0, //
},
},
showSymbol: false, //
lineStyle: {
type: 'dashed', // 线
color: 'red',
},
},
],
};
chartRight2 = echarts.init(analysisGraphBarchart.value);
chartRight2.setOption(option);
};
onMounted(() => { onMounted(() => {
draw(); draw();
}); });
@ -145,6 +428,8 @@
return { return {
analysisGraphchart, analysisGraphchart,
analysisGraphRingchart,
analysisGraphBarchart,
downloadChart, downloadChart,
mode, mode,
changeMode, changeMode,

8
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue

@ -24,7 +24,7 @@
<environment-table ref="tableRef" v-else /> <environment-table ref="tableRef" v-else />
</div> </div>
<div v-else style="height: 90%"> <div v-else style="height: 90%">
<analysis-graph ref="graphRef" v-if="isGraph" /> <analysis-graph ref="analysisGraphRef" v-if="isGraph" />
<analysis-table ref="analysisTableRef" v-else /> <analysis-table ref="analysisTableRef" v-else />
</div> </div>
</div> </div>
@ -44,6 +44,8 @@
const treeRef = ref(); const treeRef = ref();
const graphRef = ref(); const graphRef = ref();
const analysisGraphRef = ref();
const tableRef = ref(); const tableRef = ref();
const analysisTableRef = ref(); const analysisTableRef = ref();
@ -59,6 +61,10 @@
if (graphRef.value) { if (graphRef.value) {
graphRef.value.downloadChart(); graphRef.value.downloadChart();
} }
} else {
if (analysisGraphRef.value) {
analysisGraphRef.value.downloadChart();
}
} }
}; };

72
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

@ -93,7 +93,7 @@
const options2 = ref<SelectProps['options']>([]); const options2 = ref<SelectProps['options']>([]);
const mode = ref<String>('1'); const mode = ref<String>('1');
// //
const selectedValue = ref<string | undefined>(); const selectedValue = ref<string | number | null | undefined>();
// //
const frequencyValue = ref<string | undefined>(); const frequencyValue = ref<string | undefined>();
// //
@ -107,6 +107,9 @@
(item.value = item.cnValue), (item.label = item.cnValue); (item.value = item.cnValue), (item.label = item.cnValue);
}); });
options1.value = options.data.data; // options1.value options1.value = options.data.data; // options1.value
if (options1.value) {
selectedValue.value = options1.value[0].value;
}
} catch (error) { } catch (error) {
console.error('Failed to fetch options:', error); console.error('Failed to fetch options:', error);
} }
@ -148,7 +151,7 @@
// //
const changeEnergyType = () => { const changeEnergyType = () => {
if (selectedValue.value == '8') { if (selectedValue.value == '碳排量') {
shebei.value = true; shebei.value = true;
mode.value = '2'; mode.value = '2';
} else { } else {
@ -337,7 +340,9 @@
{ {
name: 'AC_002(暖通电表)', name: 'AC_002(暖通电表)',
value: -21, value: -21,
ringValue: 21,
energyType: selectedValue.value, energyType: selectedValue.value,
energyUnit: 'kWh',
unit: 'V', unit: 'V',
labelRight: { labelRight: {
position: 'right', position: 'right',
@ -346,6 +351,7 @@
{ {
name: 'AC_003(照明电表)', name: 'AC_003(照明电表)',
value: 36, value: 36,
ringValue: 36,
energyType: selectedValue.value, energyType: selectedValue.value,
unit: 'V', unit: 'V',
labelRight: { labelRight: {
@ -355,6 +361,67 @@
{ {
name: 'AC_004(给排水电表)', name: 'AC_004(给排水电表)',
value: -5, value: -5,
ringValue: 5,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_005(给排水电表)',
value: -25,
ringValue: 15,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_006(给排水电表)',
value: 35,
ringValue: 30,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_007(给排水电表)',
value: 15,
ringValue: 18,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_008(给排水电表)',
value: -25,
ringValue: 41,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_009(给排水电表)',
value: -5,
ringValue: 55,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_0090(给排水电表)',
value: -5,
ringValue: 55,
energyType: selectedValue.value, energyType: selectedValue.value,
unit: 'V', unit: 'V',
labelRight: { labelRight: {
@ -634,6 +701,7 @@
onMounted(() => { onMounted(() => {
getOptionsList(); getOptionsList();
changeMode(); changeMode();
getSelect();
}); });
return { return {

Loading…
Cancel
Save