xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

能耗监测 分析 右侧图

Browse Source
This commit is contained in:
fks-yangshouda
2024-07-12 17:05:41 +08:00
parent 0282d2d1aa
commit 4fcdae08de
4 changed files with 389 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,16 +1,47 @@
<template>
<a-row type="flex" style="height: 92%">
<a-col :span="8">
<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
style="
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
width: 98%;
height: 96%;
margin: 2%;
">
<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 :span="16" />
</a-row>
</template>
@@ -52,11 +83,24 @@
);
const changeMode = () => {};
const analysisGraphchart = ref(null);
const analysisGraphRingchart = ref(null);
const analysisGraphBarchart = ref(null);
// 左侧柱状图
let chartInstance: echarts.ECharts | null = null;
// 圆环图
let chartRight1: echarts.ECharts | null = null;
// 右下角柱状图
let chartRight2: echarts.ECharts | null = null;
const draw = () => {
data.value = pageData.analysisGraphList;
// 绘制左侧图
drawLeft();
drawRight1();
};
const drawLeft = () => {
if (data.value && data.value.length > 0) {
if (chartInstance) {
chartInstance.dispose();
@@ -65,7 +109,6 @@
var seriesdata = [];
var dateX = [];
// var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
@@ -81,26 +124,39 @@
show: true,
formatter: '{b}',
},
barWidth: '25%',
},
];
const option = {
// tooltip: {
// trigger: 'axis',
// formatter: (params: any) => {
// const date = params[0].name;
// const values = params
// .map((param: any) => {
// const unit = data.value.find((d) => d.name === 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>`;
// },
// },
grid: {
top: 60,
bottom: 20,
},
dataZoom: [
{
show: true,
type: 'slider',
zoomLock: true,
startValue: 0, // 从头开始。
endValue: 4,
showDetail: false,
width: 5,
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: {
type: 'category',
axisLine: { show: false },
@@ -125,6 +181,233 @@
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(() => {
draw();
});
@@ -145,6 +428,8 @@
return {
analysisGraphchart,
analysisGraphRingchart,
analysisGraphBarchart,
downloadChart,
mode,
changeMode,

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

@@ -24,7 +24,7 @@
<environment-table ref="tableRef" v-else />
</div>
<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 />
</div>
</div>
@@ -44,6 +44,8 @@
const treeRef = ref();
const graphRef = ref();
const analysisGraphRef = ref();
const tableRef = ref();
const analysisTableRef = ref();
@@ -59,6 +61,10 @@
if (graphRef.value) {
graphRef.value.downloadChart();
}
} else {
if (analysisGraphRef.value) {
analysisGraphRef.value.downloadChart();
}
}
};

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

@@ -93,7 +93,7 @@
const options2 = ref<SelectProps['options']>([]);
const mode = ref<String>('1');
// 能耗类型
const selectedValue = ref<string | undefined>();
const selectedValue = ref<string | number | null | undefined>();
// 采集频率
const frequencyValue = ref<string | undefined>();
// 时间
@@ -107,6 +107,9 @@
(item.value = item.cnValue), (item.label = item.cnValue);
});
options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
if (options1.value) {
selectedValue.value = options1.value[0].value;
}
} catch (error) {
console.error('Failed to fetch options:', error);
}
@@ -148,7 +151,7 @@
// 选择能耗类型
const changeEnergyType = () => {
if (selectedValue.value == '8') {
if (selectedValue.value == '碳排量') {
shebei.value = true;
mode.value = '2';
} else {
@@ -337,7 +340,9 @@
{
name: 'AC_002（暖通电表）',
value: -21,
ringValue: 21,
energyType: selectedValue.value,
energyUnit: 'kWh',
unit: 'V',
labelRight: {
position: 'right',
@@ -346,6 +351,7 @@
{
name: 'AC_003（照明电表）',
value: 36,
ringValue: 36,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
@@ -355,6 +361,67 @@
{
name: 'AC_004（给排水电表）',
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,
unit: 'V',
labelRight: {
@@ -634,6 +701,7 @@
onMounted(() => {
getOptionsList();
changeMode();
getSelect();
});
return {