diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
index a3c572f..dda707f 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -474,6 +474,7 @@
onMounted(() => {
getDianWeiList();
changeDeviceType(null, null);
+ getSelect();
});
return {
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
index 385fc40..b3948fa 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
@@ -1,16 +1,47 @@
-
- 同比
- 环比
-
-
+
+
+
+
+
-
@@ -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 `
- // | ${param.marker}${param.seriesName} |
- // ${param.value} ${unit} |
- //
`;
- // })
- // .join('');
- // return `${date}
`;
- // },
- // },
+ 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,
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
index 0f8df1c..3818385 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -24,7 +24,7 @@
@@ -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();
+ }
}
};
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
index d776a25..f6e8062 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -93,7 +93,7 @@
const options2 = ref([]);
const mode = ref('1');
// 能耗类型
- const selectedValue = ref();
+ const selectedValue = ref();
// 采集频率
const frequencyValue = ref();
// 时间
@@ -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 {