taskid:282,remark:'commit'

hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue

@@ -73,6 +73,14 @@
   defineOptions({
     energyType: 'all', // 与页面路由name一致缓存才可生效
   });
+  // 父组件id
+  const props = defineProps({
+    tabId: {
+      type: Number,
+    },
+  });
+  console.log(props, 'xxy');
+
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
@@ -93,6 +101,9 @@
     columns.value[2].dataIndex = 'month';
     selectedTime.value = false;
     getMonthData();
+    getBallQuery.value.yearAndMonth = 'month';
+    getBallData();
+    getMonthPillarData();
   };
   const changeToYear = () => {
     monthStyles.value = 'background: #f2f2f2';
@@ -101,10 +112,40 @@
     columns.value[2].dataIndex = 'year';
     selectedTime.value = true;
     getYearData();
+    getBallQuery.value.yearAndMonth = 'year';
+    getBallData();
+    getYearPillarData();
   };
   // echarts图
   const pillarChartRef = ref(null);
   let chartInstance: echarts.ECharts | null = null;
+  const getPillarQuery = ref({
+    orgId: orgId.value,
+    type: props.tabId,
+    year: selectYearValue.value.format('YYYY'),
+  });
+  const xAxisData = ref([]);
+  const referenceValue = ref([]);
+  const budget = ref([]);
+  const actualUsage = ref([]);
+  const getYearPillarData = () => {
+    fetch(carbonPlanning.annualElectricityConsumption, getPillarQuery.value).then((res) => {
+      xAxisData.value = res.data.year;
+      referenceValue.value = res.data.referenceValue;
+      budget.value = res.data.budget;
+      actualUsage.value = res.data.actualUsage;
+      drawPillarChart();
+    });
+  };
+  const getMonthPillarData = () => {
+    fetch(carbonPlanning.electricityUsageBackThen, getPillarQuery.value).then((res) => {
+      xAxisData.value = res.data.year;
+      referenceValue.value = res.data.referenceValue;
+      budget.value = res.data.budget;
+      actualUsage.value = res.data.actualUsage;
+      drawPillarChart();
+    });
+  };
   const drawPillarChart = () => {
     chartInstance = echarts.init(pillarChartRef.value);
     const option = {
@@ -125,7 +166,7 @@
         bottom: '10%',
       },
       legend: {
-        data: ['昨日总人数', '今日实时人数', '昨日使用率'],
+        data: ['实际用量', '预算量', '基准线'],
         top: '0',
         left: '0',
         textStyle: {
@@ -134,7 +175,7 @@
         },
       },
       xAxis: {
-        data: ['2020', '2021', '2022', '2023', '2024'],
+        data: xAxisData.value,
         axisLine: {
           show: true, //隐藏X轴轴线
           lineStyle: {
@@ -182,7 +223,7 @@
       ],
       series: [
         {
-          name: '昨日总人数',
+          name: '实际用量',
           type: 'bar',
           barWidth: 18,
           itemStyle: {
@@ -190,10 +231,10 @@
               color: '#6395f9',
             },
           },
-          data: [24, 45, 43, 35, 76],
+          data: actualUsage.value,
         },
         {
-          name: '今日实时人数',
+          name: '预算量',
           type: 'bar',
           barWidth: 18,
           itemStyle: {
@@ -201,10 +242,10 @@
               color: '#62daab',
             },
           },
-          data: [133, 23, 114, 67, 89],
+          data: budget.value,
         },
         {
-          name: '昨日使用率',
+          name: '基准线',
           type: 'line',
           smooth: true, // 开启平滑曲线
           symbol: 'none', //标记的图形为实心圆
@@ -212,7 +253,7 @@
             color: '#f4664a',
             width: 2,
           },
-          data: [4.2, 3.5, 2.9, 7.8, 2],
+          data: referenceValue.value,
         },
       ],
     };
@@ -220,25 +261,65 @@
     chartInstance.setOption(option);
   };
   const ballChartRef = ref(null);
+  const getBallQuery = ref({
+    orgId: orgId.value,
+    type: props.tabId,
+    year: selectYearValue.value.format('YYYY'),
+    yearAndMonth: 'year',
+  });
+  const ballValue = ref();
+  const getBallData = () => {
+    fetch(carbonPlanning.yearAndMonthAchievement, getBallQuery.value).then((res) => {
+      ballValue.value = res.data;
+      drawSQ();
+    });
+  };
   let ballChartInstance: echarts.ECharts | null = null;
   const drawSQ = () => {
     ballChartInstance = echarts.init(ballChartRef.value);
+    let ballData = (Number(ballValue.value)/100).toFixed(2)
     const option = {
       series: [
         {
           type: 'liquidFill',
-          data: [0.6, 0.5, 0.4, 0.3],
-          radius: '80%',
+          radius: '78.1%',
+          center: ['50%', '50%'],
+          color: ['#ecf3fe', '#c8dcfe', '#5594fa'],
+          data: [ballData, ballData, ballData], // data个数代表波浪数
+          amplitude: 5,
+          // 图形样式
+          itemStyle: {
+            opacity: 1, // 波浪的透明度
+            shadowBlur: 0, // 波浪的阴影范围
+          },
+          label: {
+            show: true,
+            textStyle: {
+              color: '#5594fa',
+              insideColor: '#12786f',
+              fontSize: 40,
+            },
+            formatter: (params) => {
+              // return `${(params.value * 100).toFixed(2)}%`;
+              return `${Number(params.value * 100).toFixed(2)}%`;
+            },
+          },
+
+          outline: {
+            show: true,
+            borderDistance: 5,
+            itemStyle: {
+              borderColor: 'rgba(68, 197, 253,1)',
+              borderWidth: 2,
+            },
+          },
         },
       ],
     };
+
     ballChartInstance = echarts.init(ballChartRef.value);
     ballChartInstance.setOption(option);
   };
-  setTimeout(() => {
-    drawPillarChart();
-    drawSQ();
-  }, 500);
   // 新增节点
   const visible = ref(false);
   const addNode = () => {
@@ -293,7 +374,7 @@
   // 获取年数据
   const yearQueryParams = ref({
     orgId: orgId.value,
-    type: 1,
+    type: props.tabId,
     year: selectYearValue.value.format('YYYY'),
   });
   const changeYear = () => {
@@ -308,8 +389,8 @@
   // 获取月数据
   const monthQueryParams = ref({
     orgId: orgId.value,
-    type: 1,
-    yearMonth: selectMonthValue.value,
+    type: props.tabId,
+    yearMonth: selectYearValue.value.format('YYYY'),
   });
   const changeMonth = () => {
     monthQueryParams.value.yearMonth = selectMonthValue.value;
@@ -322,6 +403,8 @@
   };
   defineExpose({
     getYearData,
+    getBallData,
+    getYearPillarData,
   });
   const parentId = ref();
   const detailData = (record) => {