空数据保护

ems-ui-cloud/src/views/index.vue

@@ -14,7 +14,7 @@
           <div class="summary-item">
             <div>
               <div class="summary-bg">
-                <img class="energyImg" src="@/assets/images/energy.svg" alt="">
+                <img class="energyImg" src="@/assets/images/energy.svg" alt="电图标">
               </div>
               <div class="summary-title">
                 <div>电消耗</div>
@@ -30,7 +30,7 @@
             </div>
             <div>
               <div class="summary-bg">
-                <img src="@/assets/images/water.svg" alt="">
+                <img src="@/assets/images/water.svg" alt="水图标">
               </div>
               <div class="summary-title">
                 <div>水消耗</div>
@@ -233,6 +233,12 @@ const dtCostConst = {
     }
   ]
 }
+
+// 接口响应处理工具函数
+function handleApiResponse(response, defaultValue = {}) {
+  return response.data || defaultValue;
+}
+
 export default {
   name: "Index",
   data() {
@@ -266,8 +272,8 @@ export default {
       ],
       sumCost: {},
       dtCost: {},
-      waterMeter: {},
-      elecMeter: {},
+      waterMeter: { quantity: 0, useCost: 0 },
+      elecMeter: { quantity: 0, useCost: 0 },
       activeDimension: '2',
       dimensionList: [
         {
@@ -322,96 +328,114 @@ export default {
     },
     async getWaterElecMeterTrend(item) {
       const options = copyObj(dtCostConst);
-      if (item.value === '2') {
-        const [day, timeIndex] = item.date()
-        const _24Time = DateTool.get24Time(60);
-        const {data: timeElecIndex} = await qryTimeIndexElecMeterByDay(day, timeIndex)
-        const {data: timeWaterIndex} = await qryTimeIndexWaterMeterByDay(day, timeIndex)
-        options.xAxis[0].data = _24Time;
-        _24Time.map((item, index) => {
-          options.series[0].data.push(timeWaterIndex[index] ? this.decimalFormat(timeWaterIndex[index].useWaterCost) : 0)
-          options.series[1].data.push(timeElecIndex[index] ? this.decimalFormat(timeElecIndex[index].useElecCost) : 0)
-        })
-        options.xAxis[0].axisLabel.formatter = function (value) {
-          // 按空格分割字符串并换行显示
-          return value.split(' ').join('\n');
-        }
-        this.dtCost = options
-        return
-      }
+      const defaultDataItem = { useWaterCost: 0, useElecCost: 0 };
 
-      if (item.value === '3') {
-        const day = item.date()
-        const days = DateTool.getDayOfRange(day, DateTool.now(), DateTool.DateFormat.MM_DD);
-        const {data: timeElecIndex} = await qryDateElecMeterByDate(day)
-        const {data: timeWaterIndex} = await qryDateWaterMeterByDate(day)
-        options.xAxis[0].data = days;
-        days.map((item, index) => {
-          options.series[0].data.push(timeWaterIndex[index] ? this.decimalFormat(timeWaterIndex[index].useWaterCost) : 0)
-          options.series[1].data.push(timeElecIndex[index] ? this.decimalFormat(timeElecIndex[index].useElecCost) : 0)
-        })
-        options.xAxis[0].axisLabel.formatter = function (value) {
-          // 按空格分割字符串并换行显示
-          return value.split(' ').join('\n');
-        }
-        this.dtCost = options
-        return
-      }
+      try {
+        if (item.value === '2') {
+          const [day, timeIndex] = item.date()
+          const _24Time = DateTool.get24Time(60);
+          const {data: timeElecIndex} = await qryTimeIndexElecMeterByDay(day, timeIndex)
+          const {data: timeWaterIndex} = await qryTimeIndexWaterMeterByDay(day, timeIndex)
+
+          options.xAxis[0].data = _24Time;
+          _24Time.map((item, index) => {
+            options.series[0].data.push(timeWaterIndex?.[index]?.useWaterCost !== undefined
+              ? this.decimalFormat(timeWaterIndex[index].useWaterCost)
+              : 0)
+            options.series[1].data.push(timeElecIndex?.[index]?.useElecCost !== undefined
+              ? this.decimalFormat(timeElecIndex[index].useElecCost)
+              : 0)
+          })
+        } else if (item.value === '3') {
+          const day = item.date()
+          const days = DateTool.getDayOfRange(day, DateTool.now(), DateTool.DateFormat.MM_DD);
+          const {data: timeElecIndex} = await qryDateElecMeterByDate(day)
+          const {data: timeWaterIndex} = await qryDateWaterMeterByDate(day)
 
-      if (item.value === '4') {
-        const day = item.date()
-        const days = DateTool.getMonthOfRange(day, DateTool.now(), DateTool.DateFormat.YYYY_MM);
-        const {data: timeElecIndex} = await qryElecMeterByYear(day)
-        const {data: timeWaterIndex} = await qryDateWaterMeterByYear(day)
-        options.xAxis[0].data = days;
-        const indexMap = {
-          elec: {},
-          water: {}
+          options.xAxis[0].data = days;
+          days.map((item, index) => {
+            options.series[0].data.push(timeWaterIndex?.[index]?.useWaterCost !== undefined
+              ? this.decimalFormat(timeWaterIndex[index].useWaterCost)
+              : 0)
+            options.series[1].data.push(timeElecIndex?.[index]?.useElecCost !== undefined
+              ? this.decimalFormat(timeElecIndex[index].useElecCost)
+              : 0)
+          })
+        } else if (item.value === '4') {
+          const day = item.date()
+          const days = DateTool.getMonthOfRange(day, DateTool.now(), DateTool.DateFormat.YYYY_MM);
+          const {data: timeElecIndex} = await qryElecMeterByYear(day)
+          const {data: timeWaterIndex} = await qryDateWaterMeterByYear(day)
+
+          options.xAxis[0].data = days;
+          const indexMap = {
+            elec: {},
+            water: {}
+          }
+
+          timeElecIndex?.forEach(item => {
+            if (item.startRecTime) indexMap.elec[item.startRecTime] = item.useElecCost;
+          });
+
+          timeWaterIndex?.forEach(item => {
+            if (item.startRecTime) indexMap.water[item.startRecTime] = item.useWaterCost;
+          });
+
+          days.map((item, index) => {
+            options.series[0].data.push(indexMap.water[item] !== undefined
+              ? this.decimalFormat(indexMap.water[item])
+              : 0)
+            options.series[1].data.push(indexMap.elec[item] !== undefined
+              ? this.decimalFormat(indexMap.elec[item])
+              : 0)
+          })
         }
-        timeElecIndex.map((item, index) => {
-          indexMap.elec[item.startRecTime] = item.useElecCost
-        })
-        timeWaterIndex.map((item, index) => {
-          indexMap.water[item.startRecTime] = item.useWaterCost
-        })
-        days.map((item, index) => {
-          options.series[0].data.push(indexMap.water[item] ? this.decimalFormat(indexMap.water[item]) : 0)
-          options.series[1].data.push(indexMap.elec[item] ? this.decimalFormat(indexMap.elec[item]) : 0)
-        })
+
         options.xAxis[0].axisLabel.formatter = function (value) {
           // 按空格分割字符串并换行显示
           return value.split(' ').join('\n');
         }
         this.dtCost = options
+      } catch (error) {
+        console.error('获取能耗趋势数据失败:', error);
+        // 出错时显示空数据
+        this.dtCost = copyObj(dtCostConst);
       }
     },
     async sumWaterElecMeter(date) {
-      const {data: elecMeter} = await qryElecMeterByDate(date)
-      const {data: waterMeter} = await qryWaterMeterByDate(date)
-      const copy = copyObj(sumCostConst)
-      copy.series[0].data = [
-        {
-          name: '水费',
-          value: this.decimalFormat(waterMeter.useCost),
-          itemStyle: {
-            normal: {
-              color: '#1396DB'
-            }
-          }
-        },
-        {
-          name: '电费',
-          value: this.decimalFormat(elecMeter.useCost),
-          itemStyle: {
-            normal: {
-              color: '#F4EA29'
-            }
+      try {
+        // 调用电费接口，并处理无数据的情况
+        const elecRes = await qryElecMeterByDate(date);
+        const elecMeter = handleApiResponse(elecRes, { quantity: 0, useCost: 0 });
+
+        // 调用水费接口，并处理无数据的情况
+        const waterRes = await qryWaterMeterByDate(date);
+        const waterMeter = handleApiResponse(waterRes, { quantity: 0, useCost: 0 });
+
+        // 更新图表数据
+        const copy = copyObj(sumCostConst);
+        copy.series[0].data = [
+          {
+            name: '水费',
+            value: this.decimalFormat(waterMeter.useCost),
+            itemStyle: { normal: { color: '#1396DB' } }
+          },
+          {
+            name: '电费',
+            value: this.decimalFormat(elecMeter.useCost),
+            itemStyle: { normal: { color: '#F4EA29' } }
           }
-        }
-      ]
-      this.sumCost = copy
-      this.waterMeter = waterMeter
-      this.elecMeter = elecMeter
+        ];
+        this.sumCost = copy;
+        this.waterMeter = waterMeter;
+        this.elecMeter = elecMeter;
+      } catch (error) {
+        console.error('获取能耗汇总数据失败:', error);
+        // 出错时重置为默认值
+        this.sumCost = copyObj(sumCostConst);
+        this.waterMeter = { quantity: 0, useCost: 0 };
+        this.elecMeter = { quantity: 0, useCost: 0 };
+      }
     },
   },
 };