总能耗页面功能完善

src/views/energyManage/totalEnergyC/index.vue

@@ -92,13 +92,15 @@ function handleTimeRangeChange(val) {
 }
 
 function handleDataViewChange(val, type) {
+  initData()
   if (state.timeRangeType == 'overview' && val == 'usage') {
-    initData()
     proxy.$refs['overviewUsageRef'].initChartData()
     proxy.$refs['overviewUsageRef'].getDayChartData();
     proxy.$refs['overviewUsageRef'].getMonthChartData();
   } else {
-    console.log(1)
+    proxy.$refs['overviewCostRef'].initChartData()
+    proxy.$refs['overviewCostRef'].getMonthChartData();
+    proxy.$refs['overviewCostRef'].getYearChartData();
   }
 }
 

src/views/energyManage/totalEnergyC/overview-cost.vue

@@ -48,9 +48,9 @@
 
                 <div class="card-area-center" style="flex-wrap: wrap;" v-loading="oneChartLoading">
                     <div class="mr-20" style="width: calc(20% - 20px);">
-                        <StatSideItem :title="'当月总费用'" :subTitle="'元'" :value="[props.overviewList.month]" />
+                        <StatSideItem :title="'当月总费用'" :subTitle="'元'" :value="[oneChartData.current]" />
                         <StatSideItem :title="'上月同期总费用'" :subTitle="'元'"
-                            :value="[props.overviewList.month, props.overviewList.todayRingRatio]" />
+                            :value="[oneChartData.previous, oneChartData.ratio]" />
                     </div>
 
                     <countChart ref="oneChartRef" class="chart" style="width: 80%;" height="280px"
@@ -68,12 +68,12 @@
                 <div class="card-area-center" style="flex-wrap: wrap;" v-loading="twoChartLoading">
                     <div class="mr-20" style="width: calc(20% - 20px);">
 
-                        <StatSideItem :title="'当年总费用'" :subTitle="'元'" :value="[props.overviewList.today]" />
+                        <StatSideItem :title="'当年总费用'" :subTitle="'元'" :value="[twoChartData.current]" />
                         <StatSideItem :title="'上一年同期总费用'" :subTitle="'元'"
-                            :value="[props.overviewList.today, props.overviewList.todayRingRatio]" />
+                            :value="[twoChartData.previous, twoChartData.ratio]" />
                     </div>
 
-                    <countChart ref="twoChartRef" class="chart" style="wi dth: 80%;" height="280px"
+                    <countChart ref="twoChartRef" class="chart" style="width: 80%;" height="280px"
                         :chartData="twoChartData" />
                 </div>
             </el-card>
@@ -93,6 +93,7 @@ import StatSideItem from './components/StatSideItem.vue'
 import countChart from './components/countChart.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
+import dayjs from 'dayjs';
 import { GetTimeIntervals } from '@/utils/timeProcessing.utils.js'
 /*----------------------------------公共变量-----------------------------------*/
 const store = useStore()
@@ -107,6 +108,9 @@ const state = reactive({
     oneChartLoading: true,
     oneChartData: {
         subtext: '吨标准煤',
+        current: 0,
+        previous: 0,
+        ratio: 0,
         legendData: ['当月', '上月'],
         xAxisData: [],
         seriesData: [
@@ -117,6 +121,9 @@ const state = reactive({
     twoChartLoading: true,
     twoChartData: {
         subtext: '吨标准煤',
+        current: 0,
+        previous: 0,
+        ratio: 0,
         legendData: ['当年', '上一年'],
         xAxisData: [],
         seriesData: [
@@ -128,6 +135,79 @@ const state = reactive({
 const { oneChartLoading, oneChartData, twoChartLoading, twoChartData } = toRefs(state)
 
 
+// 取月图表数据
+function getMonthChartData() {
+    state.oneChartLoading = true
+
+    let param = {
+        siteId: 395,
+        queryPeriod: "month",
+        queryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        queryType: 'cost'
+    }
+    energyApi()
+        .EchartsData(param)
+        .then((item1) => {
+            param.queryTime = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
+
+            energyApi()
+                .EchartsData(param)
+                .then((item2) => {
+                    state.oneChartData.current = item1.data.current
+                    state.oneChartData.previous = item1.data.previous
+                    state.oneChartData.ratio = item1.data.ratio
+                    state.oneChartData.subtext = item1.data.unit;
+                    state.oneChartData.seriesData[0].data = item1.data.amountList;
+                    state.oneChartData.seriesData[1].data = item2.data.amountList;
+                    proxy.$refs["oneChartRef"].initEcharts()
+                    state.oneChartLoading = false;
+                })
+                .catch((err) => {
+                    state.oneChartLoading = false;
+                });
+        })
+        .catch((err) => {
+            state.oneChartLoading = false;
+        });
+
+}
+
+// 取月图表数据
+function getYearChartData() {
+    state.twoChartLoading = true
+
+    let param = {
+        siteId: 395,
+        queryPeriod: "year",
+        queryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        queryType: 'cost'
+    }
+    energyApi()
+        .EchartsData(param)
+        .then((item1) => {
+            param.queryTime = dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
+
+            energyApi()
+                .EchartsData(param)
+                .then((item2) => {
+                    state.twoChartData.current = item1.data.current
+                    state.twoChartData.previous = item1.data.previous
+                    state.twoChartData.ratio = item1.data.ratio
+                    state.twoChartData.subtext = item1.data.unit;
+                    state.twoChartData.seriesData[0].data = item1.data.amountList;
+                    state.twoChartData.seriesData[1].data = item2.data.amountList;
+                    proxy.$refs["twoChartRef"].initEcharts()
+                    state.twoChartLoading = false;
+                })
+                .catch((err) => {
+                    state.twoChartLoading = false;
+                });
+        })
+        .catch((err) => {
+            state.twoChartLoading = false;
+        });
+
+}
 
 function initChartData() {
     state.oneChartData.subtext = '元'
@@ -172,6 +252,8 @@ defineExpose({
     oneChartData,
     twoChartData,
     initChartData,
+    getMonthChartData,
+    getYearChartData,
 });
 </script>
 <style lang="scss" scoped></style>