对接折线图后端接口

src/api/carbon/apiCarbonCar.js

@@ -5,6 +5,16 @@ const getCoreData = (timeRange) => {
     return Request.post('/vehicle/getVehicleCoreIndicators', timeRange)
 }
 
+const getVehicleInfo = (timeRange) => {
+    return Request.post('/vehicle/getVehicleInfo', timeRange)
+}
+
+const getVehicleInfoOrder = (timeRange) => {
+    return Request.post('/vehicle/getVehicleInfoOrder', timeRange)
+}
+
 export default {
     getCoreData,
+    getVehicleInfo,
+    getVehicleInfoOrder,
 }

src/api/carbon/apiCarbonOverview.js

@@ -5,6 +5,16 @@ const getCoreData = (timeRange) => {
     return Request.post('/carbon/getCarbonCoreIndicators', timeRange)
 }
 
+const getCarbonInfo = (timeRange) => {
+    return Request.post('/carbon/getCarbonInfo', timeRange)
+}
+
+const getCarbonQuotaComposition = (timeRange) => {
+    return Request.post('/carbon/getCarbonQuotaComposition', timeRange)
+}
+
 export default {
     getCoreData,
+    getCarbonInfo,
+    getCarbonQuotaComposition,
 }

src/api/carbon/apiCarbonPrint.js

@@ -2,9 +2,19 @@ import Request from "@/utils/request";
 
 // 核心指标
 const getCoreData = (timeRange) => {
-    return Request.post('/vehicle/getVehicleCoreIndicators', timeRange)
+    return Request.post('/print/getPrintCoreIndicators', timeRange)
+}
+
+const getPrintInfo = (timeRange) => {
+    return Request.post('/print/getPrintInfo', timeRange)
+}
+
+const getPrintInfoOrder = (timeRange) => {
+    return Request.post('/print/getPrintInfoOrder', timeRange)
 }
 
 export default {
     getCoreData,
+    getPrintInfo,
+    getPrintInfoOrder,
 }

src/api/carbon/apiCarbonPv.js

@@ -5,6 +5,16 @@ const getCoreData = (timeRange) => {
     return Request.post('/photovoltaic/getPhotovoltaicCoreIndicators', timeRange)
 }
 
+const getPhotovoltaicInfo = (timeRange) => {
+    return Request.post('/photovoltaic/getPhotovoltaicInfo', timeRange)
+}
+
+const getPhotovoltaicInfoOrder = (timeRange) => {
+    return Request.post('/photovoltaic/getPhotovoltaicInfoOrder', timeRange)
+}
+
 export default {
     getCoreData,
+    getPhotovoltaicInfo,
+    getPhotovoltaicInfoOrder,
 }

src/api/dashboard/apiDashboard.js

@@ -1,63 +1,101 @@
 import Request from "@/utils/request";
-
+// 获取楼层概览
+const getFloorOverview = (param) => {
+    return Request.get('/dashboard/getBuildingSituation', param)
+}
 // 获取空间概览
-const getSpaceOverview = (datetime) => {
-    return Request.get('/dashboard/getBuildingSituation', {
-        datetime: datetime
-    })
+const getSpaceOverview = (param) => {
+    return Request.get('/dashboard/getSpaceOverview', param)
+}
+// 获取碳配额概览
+const getCarbonOverview = (param) => {
+    return Request.get('/dashboard/getCarbonQuota', param)
+}
+// 获取光伏发电概览
+const getPvPowerOverview = (param) => {
+    return Request.get('/dashboard/getPhotovoltaicPower', param)
+}
+// 获取光伏发电概览
+const getPvProfitOverview = (param) => {
+    return Request.get('/dashboard/getPhotovoltaicProfit', param)
 }
 
 // 获取人员核心指标
-const getPersonCoreData = (timeRange) => {
-    return Request.get('/personnel/getPersonnelInfoCount', timeRange)
+const getPersonCoreData = (param) => {
+    return Request.get('/personnel/getPersonnelInfoCount', param)
 }
 // 获取人员统计信息
-const getPersonEnterSummary = (timeRange) => {
-    return Request.get('/personnel/getPersonnelInfoList', timeRange)
+const getPersonEnterSummary = (param) => {
+    return Request.get('/personnel/getPersonnelInfoList', param)
 }
 
 // 获取餐厅核心指标
-const getRestCoreData = (timeRange) => {
-    return Request.get('/dining_room/getRestaurantConsumption', timeRange)
+const getRestCoreData = (param) => {
+    return Request.get('/dining_room/getRestaurantConsumption', param)
 }
 
-const getRestTrendData = (timeRange) => {
-    return Request.get('/dining_room/getRestaurantConsumptionChart', timeRange)
+const getRestTrendData = (param) => {
+    return Request.get('/dining_room/getRestaurantConsumptionChart', param)
 }
 
 // 商超
-const getSuperMarketCoreData = (timeRange) => {
-    return Request.get('/dashboard_supermarket/getSupermarketCoreIndicators', timeRange)
+const getSuperMarketCoreData = (param) => {
+    return Request.get('/dashboard_supermarket/getSupermarketCoreIndicators', param)
+}
+const getSuperMarketTrendData = (param) => {
+    return Request.get('/dashboard_supermarket/getSupermarketInfoList', param)
 }
 
 // 用电
-const getElectricityCoreData = (timeRange) => {
-    return Request.get('/electricity/getElectricityCoreIndicators', timeRange)
+const getElectricityCoreData = (param) => {
+    return Request.get('/electricity/getElectricityCoreIndicators', param)
+}
+const getElectricityTrendData = (param) => {
+    return Request.get('/electricity/getElectricityInfoList', param)
 }
 
 // 用水
-const getWaterCoreData = (timeRange) => {
-    return Request.get('/water/getWaterCoreIndicators', timeRange)
+const getWaterCoreData = (param) => {
+    return Request.get('/water/getWaterCoreIndicators', param)
+}
+const getWaterTrendData = (param) => {
+    return Request.get('/water/getWaterInfoList', param)
 }
 
 // 用热
-const getHotCoreData = (timeRange) => {
-    return Request.get('/use_heat/getUseHeatCoreIndicators', timeRange)
+const getHotCoreData = (param) => {
+    return Request.get('/use_heat/getUseHeatCoreIndicators', param)
+}
+const getHotTrendData = (param) => {
+    return Request.get('/use_heat/getUseHeatInfoList', param)
 }
 
 // 用冷
-const getColdCoreData = (timeRange) => {
-    return Request.get('/use_cold/getUseColdCoreIndicators', timeRange)
+const getColdCoreData = (param) => {
+    return Request.get('/use_cold/getUseColdCoreIndicators', param)
+}
+const getColdTrendData = (param) => {
+    return Request.get('/use_cold/getUseColdInfoList', param)
 }
 
 // 资产
-const getMoneyCoreData = (timeRange) => {
-    return Request.get('/asset/getAssetCoreIndicators', timeRange)
+const getMoneyCoreData = (param) => {
+    return Request.get('/asset/getAssetCoreIndicators', param)
+}
+const getMoneyLifeData = (param) => {
+    return Request.get('/asset/getAssetLife', param)
+}
+const getMoneyDistributionData = (param) => {
+    return Request.get('/asset/getInvestmentDistribution', param)
 }
 
 
 export default {
+    getFloorOverview,
     getSpaceOverview,
+    getCarbonOverview,
+    getPvPowerOverview,
+    getPvProfitOverview,
 
     getPersonCoreData,
     getPersonEnterSummary,
@@ -66,16 +104,23 @@ export default {
     getRestTrendData,
 
     getSuperMarketCoreData,
+    getSuperMarketTrendData,
 
     getElectricityCoreData,
+    getElectricityTrendData,
 
     getWaterCoreData,
+    getWaterTrendData,
 
     getHotCoreData,
+    getHotTrendData,
 
     getColdCoreData,
+    getColdTrendData,
 
     getMoneyCoreData,
+    getMoneyLifeData,
+    getMoneyDistributionData,
 
 
 }

src/api/life/apiLifeHealthyHome.js

@@ -5,6 +5,11 @@ const getCoreData = (timeRange) => {
     return Request.post('/healthhome/getCoreIndicators', timeRange)
 }
 
+const getHutAnalysis = (timeRange) => {
+    return Request.post('/healthhome/getHutAnalysis', timeRange)
+}
+
 export default {
     getCoreData,
+    getHutAnalysis,
 }

src/api/life/apiLifePark.js

@@ -5,6 +5,11 @@ const getCoreData = (param) => {
     return Request.post('/parking/getCoreIndicators', param)
 }
 
+const getTrafficflowSituation = (param) => {
+    return Request.post('/parking/getTrafficflowSituation', param)
+}
+
 export default {
     getCoreData,
+    getTrafficflowSituation,
 }

src/api/life/apiLifeRestaurant.js

@@ -5,6 +5,16 @@ const getCoreData = (timeRange) => {
     return Request.post('/restaurant/getCoreIndicators', timeRange)
 }
 
+const getMealAnalysis = (param) => {
+    return Request.post('/restaurant/getMealAnalysis', param)
+}
+
+const getConsumptionAnalysis = (param) => {
+    return Request.post('/restaurant/getConsumptionAnalysis', param)
+}
+
 export default {
     getCoreData,
+    getMealAnalysis,
+    getConsumptionAnalysis,
 }

src/api/life/apiLifeSupermarket.js

@@ -5,6 +5,11 @@ const getCoreData = (timeRange) => {
     return Request.post('/life_supermarket/getCoreIndicators', timeRange)
 }
 
+const getQuotientAnalysiss = (timeRange) => {
+    return Request.post('/life_supermarket/getQuotientAnalysiss', timeRange)
+}
+
 export default {
     getCoreData,
+    getQuotientAnalysiss,
 }

src/api/operation/apiOperationAnalysis.js

@@ -5,25 +5,61 @@ const getCoreData = (param) => {
     let type = param.energy?param.energy:'all';
     if ('electric'==type) {
         // 用电
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalysePowerCoreIndicators', param)
     } else if ('water'==type) {
         // 用水
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalyseWaterCoreIndicators', param)
     } else if ('hot'==type) {
         // 用热
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalyseHotCoreIndicators', param)
     } else if ('cold'==type) {
         // 用冷
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalyseColdCoreIndicators', param)
     } else if ('pv'==type) {
         // 光伏
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalyseCpvCoreIndicators', param)
     } else {
         // 全部
-        return Request.post('/space/getSpaceCoreIndicators', param)
+        return Request.post('/analyse/getAnalyseCoreIndicators', param)
     }
 }
 
+const getEnergyTrendsTotal = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsTotal', timeRange)
+}
+
+const getEnergyTrendsAnalysePower = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalysePower', timeRange)
+}
+
+const getEnergyTrendsAnalyseWater = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalyseWater', timeRange)
+}
+
+const getEnergyTrendsAnalyseHot = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalyseHot', timeRange)
+}
+
+const getEnergyTrendsAnalyseCold = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalyseCold', timeRange)
+}
+
+const getEnergyTrendsAnalyseCpv = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalyseCpv', timeRange)
+}
+
+const getEnergyTrendsAnalyseCpvInfo = (timeRange) => {
+    return Request.post('/analyse/getEnergyTrendsAnalyseCpvInfo', timeRange)
+}
+
+
 export default {
     getCoreData,
+    getEnergyTrendsTotal,
+    getEnergyTrendsAnalysePower,
+    getEnergyTrendsAnalyseWater,
+    getEnergyTrendsAnalyseHot,
+    getEnergyTrendsAnalyseCold,
+    getEnergyTrendsAnalyseCpv,
+    getEnergyTrendsAnalyseCpvInfo,
 }

src/api/operation/apiOperationSpace.js

@@ -5,6 +5,11 @@ const getCoreData = (timeRange) => {
     return Request.post('/space/getSpaceCoreIndicators', timeRange)
 }
 
+const getSpaceInfo = (timeRange) => {
+    return Request.post('/space/getSpaceInfo', timeRange)
+}
+
 export default {
     getCoreData,
+    getSpaceInfo,
 }

src/api/security/apiSecurityAlarmMgr.js

@@ -5,6 +5,21 @@ const getCoreData = (timeRange) => {
     return Request.post('/security_linkage/getLinkageCoreIndicators', timeRange)
 }
 
+const getAlarmTrend = (timeRange) => {
+    return Request.post('/security_linkage/getAlarmTrend', timeRange)
+}
+
+const getEquipmentOnline = (timeRange) => {
+    return Request.post('/security_linkage/getEquipmentOnline', timeRange)
+}
+
+const getAlarmClassification = (timeRange) => {
+    return Request.post('/security_linkage/getAlarmClassification', timeRange)
+}
+
 export default {
     getCoreData,
+    getAlarmTrend,
+    getEquipmentOnline,
+    getAlarmClassification,
 }

src/api/security/apiSecurityPerson.js

@@ -5,6 +5,17 @@ const getCoreData = (timeRange) => {
     return Request.post('/security_person/getSecurityCoreIndicators', timeRange)
 }
 
+const getPopulationPerson = (timeRange) => {
+    return Request.post('/security_person/getPopulationPerson', timeRange)
+}
+
+const getPassengerFlow = (timeRange) => {
+    return Request.post('/security_person/getPassengerFlow', timeRange)
+}
+
 export default {
     getCoreData,
+    getPopulationPerson,
+    getPassengerFlow,
+
 }

src/api/work/apiWorkBus.js

@@ -2,9 +2,19 @@ import Request from "@/utils/request";
 
 // 核心指标
 const getCoreData = (timeRange) => {
-    return Request.post('/meeting/getMeetingCoreIndicators', timeRange)
+    return Request.post('/bus/getBusCoreIndicators', timeRange)
+}
+
+const getBusInfo = (timeRange) => {
+    return Request.post('/bus/getBusInfo', timeRange)
+}
+
+const getBusCostTrend = (timeRange) => {
+    return Request.post('/bus/getBusCostTrend', timeRange)
 }
 
 export default {
     getCoreData,
+    getBusInfo,
+    getBusCostTrend,
 }

src/api/work/apiWorkMeeting.js

@@ -5,6 +5,11 @@ const getCoreData = (timeRange) => {
     return Request.post('/meeting/getMeetingCoreIndicators', timeRange)
 }
 
+const getMeetingCostTrend = (timeRange) => {
+    return Request.post('/meeting/getMeetingCostTrend', timeRange)
+}
+
 export default {
     getCoreData,
+    getMeetingCostTrend,
 }

src/api/work/apiWorkPrint.js

@@ -5,6 +5,15 @@ const getCoreData = (param) => {
     return Request.post('/print/getPrintingCoreIndicators', param)
 }
 
+const getConferenceRoomInfo = (param) => {
+    return Request.post('/print/getConferenceRoomInfo', param)
+}
+
+const getPrintingCostTrend = (param) => {
+    return Request.post('/print/getPrintingCostTrend', param)
+}
 export default {
     getCoreData,
+    getConferenceRoomInfo,
+    getPrintingCostTrend,
 }

src/components/business/analysis/all/businessEnergyChart.vue

@@ -1,4 +1,6 @@
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
@@ -16,13 +18,13 @@ export default {
         grid: {
           left: '1%', //默认10%
           right: '1%', //默认10%
-          bottom: '15%', //默认60
+          bottom: '10%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -74,7 +76,7 @@ export default {
         series: [
           {
             name: '用电(kwh)',
-            data: [80, 105, 155, 222, 66, 123, 124, 209, 61, 89, 156, 98],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
@@ -93,7 +95,7 @@ export default {
           },
           {
             name: '用水(m³)',
-            data: [160, 205, 111, 131, 63, 177, 106, 99, 181, 151, 170, 76],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:1,
@@ -112,7 +114,7 @@ export default {
           },
           {
             name: '用热(kwh)',
-            data: [191, 88, 68, 70, 160, 247, 85, 187, 121, 149, 228, 151],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
@@ -131,7 +133,7 @@ export default {
           },
           {
             name: '用冷(kwh)',
-            data: [109, 199, 74, 190, 81, 216, 182, 161, 120, 199, 150, 245],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
@@ -150,7 +152,7 @@ export default {
           },
           {
             name: '光伏(kwh)',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
@@ -175,27 +177,23 @@ export default {
     height: Number,
     data: Object,
   },
-  watch: {
-    data: {
-      handler: function (val) {
-        //this.option.xAxis.data = val.x;
-        //this.option.series[0].data = val.ownEmployees;
-        //this.option.series[1].data = val.outsourcingStaff;
-        this.chart.setOption(this.option);
-      },
-      deep: true
-    }
-  },
   mounted() {
     this.$nextTick(()=>{
-      this.initChart()
+      this.init()
     })
   },
   methods: {
-    initChart() {
+    init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
       chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsTotal({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['power','water','hot','cold','cpv'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/all/businessEnergyDetail.vue

@@ -1,14 +1,31 @@
 <script>
 import {requireImg} from "@/utils/requireImg";
 import BusinessEnergyDistributeChart from "@/components/business/analysis/all/businessEnergyDistributeChart.vue";
+import BusinessEnergySummaryTbl from "@/components/business/analysis/common/businessEnergySummaryTbl.vue";
 
 export default {
   components: {
-    BusinessEnergyDistributeChart
+    BusinessEnergyDistributeChart,
+    BusinessEnergySummaryTbl
   },
   methods: {requireImg},
   data() {
-    return {}
+    return {
+      tableData: [
+        {
+          icon: 'business/energy/energy.png',
+          title: '月度同比节能',
+          num: 36,
+          unit: '元/人'
+        },{
+          icon: 'business/energy/energy.png',
+          title: '年度同比节能',
+          num: 36,
+          unit: '元/人'
+        }
+
+      ]
+    }
   }
 }
 </script>
@@ -16,25 +33,8 @@ export default {
 <template>
   <div class="businessEnergyDetail">
     <div>
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/energy.png')"></a-avatar>
-          </span>
-        </span>
-        月度同比节能
-        <span class="businessEnergyDetail-num">36</span>
-        元/人
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/energy.png')"></a-avatar>
-          </span>
-        </span>
-        年度同比节能
-        <span class="businessEnergyDetail-num">36</span>
-        元/人
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="120" :unit-width="60"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
@@ -60,7 +60,7 @@ export default {
     background-color: #f7fbff;
   }
   .businessEnergyDetail-chart {
-    margin-top: 50px;
+    margin-top: 30px;
   }
 }
 </style>

src/components/business/analysis/analysis.vue

@@ -44,6 +44,7 @@ export default {
         energy: '0',
         timeRange: this.$util.dateUtil.getNearlyMonthRange()
       },
+      oriCoreData: [],
       coreData: [
         {
           title: '总用量(kwh)',
@@ -83,15 +84,18 @@ export default {
       this.handleTypeChange(val)
     }
   },
+  created() {
+    this.oriCoreData = JSON.parse(JSON.stringify(this.coreData));
+  },
   mounted() {
     this.init()
   },
   methods: {
     init() {
-
+      this.getCoreData()
     },
     handleTypeChange(type) {
-      this.coreData = this.$options.data().coreData;
+      this.coreData = JSON.parse(JSON.stringify(this.oriCoreData));
       if ('electric'==type) {
         // 用电
         this.coreData[0].title = '总用电量(kwh)'
@@ -121,6 +125,7 @@ export default {
         this.coreData[0].title = '总用量(kwh)'
         this.coreData[1].title = '总用量m³)'
       }
+      this.getCoreData();
     },
     reset() {
 
@@ -157,28 +162,37 @@ export default {
     <div class="analysis-energy-body">
       <a-row :gutter="[12,12]">
         <a-col :span="18">
-          <Card title="能源趋势">
-            <div class="analysis-energy-body-left">
-              <BusinessElectricChart :height="495" v-if="queryData.energy=='electric'"></BusinessElectricChart>
-              <BusinessWaterChart :height="495" v-if="queryData.energy=='water'"></BusinessWaterChart>
-              <BusinessHotChart :height="495" v-if="queryData.energy=='hot'"></BusinessHotChart>
-              <BusinessColdChart :height="495" v-if="queryData.energy=='cold'"></BusinessColdChart>
-              <BusinessPvChart :height="495" v-if="queryData.energy=='pv'"></BusinessPvChart>
-              <BusinessEnergyChart :height="495" v-if="queryData.energy=='0'"></BusinessEnergyChart>
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="能源趋势">
+              <div class="analysis-energy-body-left">
+                <BusinessElectricChart :height="450" v-if="queryData.energy=='electric'" ></BusinessElectricChart>
+                <BusinessWaterChart :height="450" v-if="queryData.energy=='water'"></BusinessWaterChart>
+                <div style="margin-top: 15px">
+                  <BusinessHotChart :height="470" v-if="queryData.energy=='hot'"></BusinessHotChart>
+                  <BusinessColdChart :height="470" v-if="queryData.energy=='cold'"></BusinessColdChart>
+                  <BusinessPvChart :height="470" v-if="queryData.energy=='pv'"></BusinessPvChart>
+                  <BusinessEnergyChart :height="470" v-if="queryData.energy=='0'"></BusinessEnergyChart>
+                </div>
+              </div>
+            </Card>
+          </div>
+
         </a-col>
         <a-col :span="6">
-          <Card title="能源分析">
-            <div class="analysis-energy-body-right">
-              <BusinessElectricDetail v-if="queryData.energy=='electric'"/>
-              <BusinessWaterDetail v-if="queryData.energy=='water'"/>
-              <BusinessHotDetail v-if="queryData.energy=='hot'"/>
-              <BusinessColdDetail v-if="queryData.energy=='cold'"/>
-              <BusinessPvDetail v-if="queryData.energy=='pv'"/>
-              <BusinessEnergyDetail v-if="queryData.energy=='0'"/>
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="能源分析">
+              <div class="analysis-energy-body-right ">
+                <BusinessElectricDetail v-if="queryData.energy=='electric'"/>
+                <BusinessWaterDetail v-if="queryData.energy=='water'"/>
+                <div style="margin-top: 15px">
+                  <BusinessHotDetail v-if="queryData.energy=='hot'"/>
+                  <BusinessColdDetail v-if="queryData.energy=='cold'"/>
+                  <BusinessPvDetail v-if="queryData.energy=='pv'"/>
+                  <BusinessEnergyDetail v-if="queryData.energy=='0'"/>
+                </div>
+              </div>
+            </Card></div>
+
         </a-col>
       </a-row>
     </div>
@@ -191,5 +205,13 @@ export default {
 <style lang="less" scoped>
 .analysis-energy-body {
   margin-top: 12px;
+  .analysis-energy-body-left {
+    height: 480px;
+    overflow: hidden;
+  }
+  .analysis-energy-body-right {
+    height: 480px;
+    overflow: hidden;
+  }
 }
 </style>

src/components/business/analysis/cold/BusinessColdChart.vue

@@ -5,21 +5,12 @@
 </template>
 
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
         color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
         legend: {
           data: [
@@ -37,7 +28,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -76,7 +67,7 @@ export default {
         series: [
           {
             name: '制冷量',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -89,7 +80,7 @@ export default {
           },
           {
             name: '能耗比',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'line',
             yAxisIndex: 1,
             backgroundStyle: {
@@ -97,8 +88,29 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalyseCold({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['energyConsumption','refrigerationCapacity'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/cold/BusinessColdDetail.vue

@@ -2,15 +2,37 @@
 import {requireImg} from "@/utils/requireImg";
 
 export default {
-  components: {
-  },
+  components: {},
   methods: {
     requireImg,
 
   },
   data() {
     return {
+      tableData: [
+        {
+          icon: 'business/energy/cold.png',
+          title: '总用冷量',
+          num: 36,
+          unit: 'kwh'
+        },{
+          icon: 'business/energy/cold.png',
+          title: '人均成本',
+          num: 36,
+          unit: '元/人/年'
+        },{
+          icon: 'business/energy/cold.png',
+          title: '进水温度',
+          num: 36,
+          unit: '摄氏度'
+        },{
+          icon: 'business/energy/cold.png',
+          title: '出水温度',
+          num: 36,
+          unit: '摄氏度'
+        }
 
+      ]
     }
   },
   mounted() {
@@ -44,49 +66,12 @@ export default {
         </a-row>
       </div>
 
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/cold.png')"></a-avatar>
-          </span>
-        </span>
-        总用冷量
-        <span class="businessEnergyDetail-num">36</span>
-        m3
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/cold.png')"></a-avatar>
-          </span>
-        </span>
-        人均成本
-        <span class="businessEnergyDetail-num">36</span>
-        元/人/年
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/cold.png')"></a-avatar>
-          </span>
-        </span>
-        进水温度
-        <span class="businessEnergyDetail-num">36</span>
-        摄氏度
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/cold.png')"></a-avatar>
-          </span>
-        </span>
-        出水温度
-        <span class="businessEnergyDetail-num">36</span>
-        摄氏度
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="80"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
-        <img :src="requireImg('business/energy/cold-show.png')" style="width: 80%;margin-left: 10%" >
+        <img :src="requireImg('business/energy/cold-show.png')" :height="140" style="width: 90%;margin-left: 5%">
       </div>
     </div>
   </div>
@@ -96,27 +81,30 @@ export default {
 .businessEnergyDetail {
   width: 100%;
   height: 100%;
+
   .businessEnergyDetail-top {
     background-color: #f7fbff;
     width: 85%;
     margin: 0 auto 8px;
     height: 100px;
   }
+
   .businessEnergyDetail-icon {
     display: inline-block;
     margin-right: 6px;
     vertical-align: middle;
   }
+
   .businessEnergyDetail-num {
     display: inline-block;
     padding: 0 20px;
     color: #4D4D4D;
     background-color: #f7fbff;
   }
+
   .businessEnergyDetail-chart {
     width: 100%;
-    margin: 50px auto 12px;
-    padding-bottom: 15px;
+    margin: 15px auto 0;
   }
 }
 </style>

src/components/business/analysis/common/businessEnergySummaryTbl.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="businessEnergySummaryTbl">
+    <a-table tableLayout="auto" v-show="data && data.length>0"
+        :rowKey=" (record, index) => index"
+        :columns="columns"
+        :bordered="false"
+        :show-header="false"
+        :data-source="data"
+        :pagination="false"
+    >
+      <template #icon="text, record">
+        <a-avatar :src="requireImg(record.icon)" :size="25"></a-avatar>
+      </template>
+      <template #titleText="text, record">
+        <span class="businessEnergySummaryTbl-title" >{{ text }}:</span>
+      </template>
+      <template #num="text, record">
+        <span class="businessEnergySummaryTbl-num">{{ text }}</span>
+      </template>
+      <template #unit="text, record">
+        <span class="businessEnergySummaryTbl-unit">{{ text }}</span>
+      </template>
+
+    </a-table>
+  </div>
+</template>
+
+<script>
+import {requireImg} from "@/utils/requireImg";
+
+export default {
+  methods: {requireImg},
+  props: {
+    titleWidth: Number,
+    unitWidth: Number,
+    data: Array
+  },
+  watch: {
+    titleWidth: val => {
+      this.columns[1].width= val;
+      this.$forceUpdate()
+    },
+    unitWidth: val => {
+      this.columns[3].width= val;
+      this.$forceUpdate()
+    }
+  },
+  mounted() {
+    this.columns[1].width= this.titleWidth
+    this.columns[3].width= this.unitWidth
+    this.$forceUpdate()
+  },
+  data() {
+    return {
+      columns: [
+        {
+          dataIndex: 'icon',
+          key: 'icon',
+          scopedSlots: { customRender: 'icon' },
+          width: 35
+        },
+        {
+          dataIndex: 'title',
+          key: 'title',
+          scopedSlots: { customRender: 'titleText' },
+        },
+        {
+          dataIndex: 'num',
+          key: 'num',
+          scopedSlots: { customRender: 'num' },
+        },
+        {
+          dataIndex: 'unit',
+          key: 'unit',
+          scopedSlots: { customRender: 'unit' },
+          align: 'right'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.businessEnergySummaryTbl {
+  padding: 0 12px;
+  .businessEnergySummaryTbl-title {
+    font-size: 16px;
+    color: #B2B2B2;
+    letter-spacing: 1px
+  }
+  .businessEnergySummaryTbl-num {
+    display: inline-block;
+    font-size: 20px;
+    color: #4D4D4D;
+    letter-spacing: 1px;
+    background-color: #f7fbff;
+    width: 100%;
+    text-align: center;
+  }
+  .businessEnergySummaryTbl-unit {
+    font-size: 16px;
+    color: #B2B2B2;
+    letter-spacing: 1px
+  }
+}
+/deep/ .ant-table-tbody > tr > td {
+  border-bottom: none !important;
+}
+/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  background: none;
+}
+
+</style>
+
+<style lang="less">
+.businessEnergySummaryTbl {
+  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
+    padding: 8px 0 !important;
+  }
+}
+</style>

src/components/business/analysis/electric/BusinessElectricChart.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
@@ -26,27 +28,8 @@ export default {
         all: false,
         F15: false,
         F20: false,
-      }
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-    this.handleTagSelect('all')
-  },
-  methods: {
-    handleTagSelect(item) {
-      for (const key in this.tagCheck) {
-        this.tagCheck[key] = false;
-      }
-      this.currCheck = item;
-      this.tagCheck[item] = true;
-    },
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      },
+      option: {
         color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
         legend: {
           data: [
@@ -66,7 +49,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -98,7 +81,7 @@ export default {
         series: [
           {
             name: '尖',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -111,7 +94,7 @@ export default {
           },
           {
             name: '峰',
-            data: [62, 60, 56, 59, 54, 75, 94, 66, 79, 84, 91, 53],
+            data: [],
             type: 'bar',
             stack: 'A',
             itemStyle: {
@@ -123,7 +106,7 @@ export default {
           },
           {
             name: '平',
-            data: [62, 60, 56, 59, 54, 75, 94, 66, 79, 84, 91, 53],
+            data: [],
             type: 'bar',
             stack: 'A',
             itemStyle: {
@@ -134,7 +117,7 @@ export default {
             }
           },{
             name: '谷',
-            data: [62, 60, 56, 59, 54, 75, 94, 66, 79, 84, 91, 53],
+            data: [],
             type: 'bar',
             stack: 'A',
             itemStyle: {
@@ -145,8 +128,35 @@ export default {
             }
           }
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+    this.handleTagSelect('all')
+  },
+  methods: {
+    handleTagSelect(item) {
+      for (const key in this.tagCheck) {
+        this.tagCheck[key] = false;
+      }
+      this.currCheck = item;
+      this.tagCheck[item] = true;
+    },
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalysePower({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['tip','seal','flat','valley'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/electric/BusinessElectricDetail.vue

@@ -25,7 +25,21 @@ export default {
         all: false,
         F15: false,
         F20: false,
-      }
+      },
+      tableData: [
+        {
+          icon: 'business/energy/electric.png',
+          title: '总用电量',
+          num: 36,
+          unit: '元/人'
+        },{
+          icon: 'business/energy/electric.png',
+          title: '环比节约',
+          num: 36,
+          unit: '元/人'
+        }
+
+      ]
     }
   },
   mounted() {
@@ -50,29 +64,12 @@ export default {
         </a-checkable-tag>
       </div>
 
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/electric.png')"></a-avatar>
-          </span>
-        </span>
-        总用电量
-        <span class="businessEnergyDetail-num">36</span>
-        元/人
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/electric.png')"></a-avatar>
-          </span>
-        </span>
-        环比节约
-        <span class="businessEnergyDetail-num">36</span>
-        元/人
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="60"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
-        <BusinessElectricDistributeChart :height="350"></BusinessElectricDistributeChart>
+        <BusinessElectricDistributeChart :height="300"></BusinessElectricDistributeChart>
       </div>
     </div>
   </div>

src/components/business/analysis/electric/BusinessElectricDistributeChart.vue

@@ -20,7 +20,7 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: '5%',
+          bottom: '40',
           left: '10%',
           right: '10%',
           icon: 'circle'
@@ -30,7 +30,7 @@ export default {
             name: '用电量',
             type: 'pie',
             radius: ['40%', '70%'],
-            center: ['50%','40%'],
+            center: ['50%','35%'],
             data: [
               { value: 1048, name: '信息机房' },
               { value: 735, name: '空调' },

src/components/business/analysis/hot/BusinessHotChart.vue

@@ -5,21 +5,12 @@
 </template>
 
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
         color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
         legend: {
           data: [
@@ -36,7 +27,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -68,7 +59,7 @@ export default {
         series: [
           {
             name: '用热量',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -80,8 +71,27 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalyseHot({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['heatConsumption'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/hot/BusinessHotDetail.vue

@@ -12,7 +12,20 @@ export default {
   },
   data() {
     return {
+      tableData: [
+        {
+          icon: 'business/energy/hot.png',
+          title: '总用热量',
+          num: 36,
+          unit: '元/人'
+        },{
+          icon: 'business/energy/hot.png',
+          title: '人均成本',
+          num: 36,
+          unit: '元/人/年'
+        }
 
+      ]
     }
   },
   mounted() {
@@ -23,29 +36,12 @@ export default {
 <template>
   <div class="businessEnergyDetail">
     <div>
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/hot.png')"></a-avatar>
-          </span>
-        </span>
-        总用热量
-        <span class="businessEnergyDetail-num">36</span>
-        m3
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/hot.png')"></a-avatar>
-          </span>
-        </span>
-        人均成本
-        <span class="businessEnergyDetail-num">36</span>
-        元/人/年
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="80"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
-        <BusinessHotDistributeChart :height="350"></BusinessHotDistributeChart>
+        <BusinessHotDistributeChart :height="300"></BusinessHotDistributeChart>
       </div>
     </div>
   </div>

src/components/business/analysis/hot/BusinessHotDistributeChart.vue

@@ -20,7 +20,7 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: '5%',
+          bottom: '40',
           left: '10%',
           right: '10%',
           icon: 'circle'
@@ -30,7 +30,7 @@ export default {
             name: '用热量',
             type: 'pie',
             radius: ['40%', '70%'],
-            center: ['50%','40%'],
+            center: ['50%','35%'],
             data: [
               { value: 1048, name: '办公区域' },
               { value: 735, name: '餐厅' },

src/components/business/analysis/pv/BusinessPvChart.vue

@@ -5,21 +5,12 @@
 </template>
 
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
         color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
         legend: {
           data: [
@@ -37,7 +28,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -76,7 +67,7 @@ export default {
         series: [
           {
             name: '发电量',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -89,7 +80,7 @@ export default {
           },
           {
             name: '能耗比',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'line',
             yAxisIndex: 1,
             backgroundStyle: {
@@ -97,8 +88,27 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalyseCpv({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['outputPower','powerGeneration'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/pv/BusinessPvDetail.vue

@@ -12,7 +12,25 @@ export default {
   },
   data() {
     return {
+      tableData: [
+        {
+          icon: 'business/energy/pv.png',
+          title: '总发电量',
+          num: 36,
+          unit: 'kwh'
+        },{
+          icon: 'business/energy/pv.png',
+          title: '发电时间',
+          num: 36,
+          unit: 'h'
+        },{
+          icon: 'business/energy/pv.png',
+          title: '总收益',
+          num: 36,
+          unit: '元'
+        }
 
+      ]
     }
   },
   mounted() {
@@ -46,35 +64,8 @@ export default {
         </a-row>
       </div>
 
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/pv.png')"></a-avatar>
-          </span>
-        </span>
-        总发电量
-        <span class="businessEnergyDetail-num">36</span>
-        kwh
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/pv.png')"></a-avatar>
-          </span>
-        </span>
-        发电时间
-        <span class="businessEnergyDetail-num">36</span>
-        h
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/pv.png')"></a-avatar>
-          </span>
-        </span>
-        总收益
-        <span class="businessEnergyDetail-num">36</span>
-        元
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="60"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
@@ -107,7 +98,7 @@ export default {
   }
   .businessEnergyDetail-chart {
     width: 100%;
-    margin: 50px auto;
+    margin: 30px auto 12px;
     padding: 0 15px;
   }
 }

src/components/business/analysis/pv/BusinessPvMoneyChart.vue

@@ -1,4 +1,6 @@
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
@@ -19,7 +21,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -71,7 +73,7 @@ export default {
         series: [
           {
             name: '政府补贴',
-            data: [80, 105, 155, 222, 66, 123, 124, 209, 61, 89, 156, 98],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
@@ -90,7 +92,7 @@ export default {
           },
           {
             name: '节约金额',
-            data: [160, 205, 111, 131, 63, 177, 106, 99, 181, 151, 170, 76],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:1,
@@ -115,27 +117,23 @@ export default {
     height: Number,
     data: Object,
   },
-  watch: {
-    data: {
-      handler: function (val) {
-        //this.option.xAxis.data = val.x;
-        //this.option.series[0].data = val.ownEmployees;
-        //this.option.series[1].data = val.outsourcingStaff;
-        this.chart.setOption(this.option);
-      },
-      deep: true
-    }
-  },
   mounted() {
     this.$nextTick(()=>{
-      this.initChart()
+      this.init()
     })
   },
   methods: {
-    initChart() {
+    init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
       chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalyseCpvInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['governmentSubsidies','save'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/water/BusinessWaterChart.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";
+
 export default {
   data() {
     return {
@@ -26,27 +28,8 @@ export default {
         all: false,
         F15: false,
         F20: false,
-      }
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-    this.handleTagSelect('all')
-  },
-  methods: {
-    handleTagSelect(item) {
-      for (const key in this.tagCheck) {
-        this.tagCheck[key] = false;
-      }
-      this.currCheck = item;
-      this.tagCheck[item] = true;
-    },
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      },
+      option: {
         color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
         legend: {
           data: [
@@ -64,7 +47,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -96,7 +79,7 @@ export default {
         series: [
           {
             name: '自来水',
-            data: [161, 201, 236, 56, 215, 105, 152, 61, 188, 226, 208, 156],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -109,7 +92,7 @@ export default {
           },
           {
             name: '中水',
-            data: [62, 60, 56, 59, 54, 75, 94, 66, 79, 84, 91, 53],
+            data: [],
             type: 'bar',
             stack: 'A',
             itemStyle: {
@@ -120,8 +103,35 @@ export default {
             }
           }
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+    this.handleTagSelect('all')
+  },
+  methods: {
+    handleTagSelect(item) {
+      for (const key in this.tagCheck) {
+        this.tagCheck[key] = false;
+      }
+      this.currCheck = item;
+      this.tagCheck[item] = true;
+    },
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationAnalysis.getEnergyTrendsAnalyseWater({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['tapWater','recycledWater'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/analysis/water/BusinessWaterDetail.vue

@@ -24,7 +24,21 @@ export default {
         all: false,
         F15: false,
         F20: false,
-      }
+      },
+      tableData: [
+        {
+          icon: 'business/energy/water.png',
+          title: '总用水量',
+          num: 36,
+          unit: 'm³'
+        },{
+          icon: 'business/energy/water.png',
+          title: '人均成本',
+          num: 36,
+          unit: '元/人/年'
+        }
+
+      ]
     }
   },
   mounted() {
@@ -49,29 +63,12 @@ export default {
         </a-checkable-tag>
       </div>
 
-      <div style="font-size: 16px;color: #B2B2B2;height: 40px;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/water.png')"></a-avatar>
-          </span>
-        </span>
-        总用水量
-        <span class="businessEnergyDetail-num">36</span>
-        m3
-      </div>
-      <div style="font-size: 16px;color: #B2B2B2;margin: 6px auto;text-align: center">
-        <span class="businessEnergyDetail-icon">
-          <span class="anticon">
-            <a-avatar class="function-avatar" shape="square" :size="25" :src="requireImg('business/energy/water.png')"></a-avatar>
-          </span>
-        </span>
-        人均成本
-        <span class="businessEnergyDetail-num">36</span>
-        元/人/年
+      <div>
+        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="80"/>
       </div>
 
       <div class="businessEnergyDetail-chart">
-        <BusinessWaterDistributeChart :height="350"></BusinessWaterDistributeChart>
+        <BusinessWaterDistributeChart :height="300"></BusinessWaterDistributeChart>
       </div>
     </div>
   </div>

src/components/business/analysis/water/BusinessWaterDistributeChart.vue

@@ -20,9 +20,8 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: '5%',
-          left: '10%',
-          right: '10%',
+          bottom: '40',
+          x:'center',
           icon: 'circle'
         },
         series: [
@@ -30,7 +29,7 @@ export default {
             name: '用水量',
             type: 'pie',
             radius: ['40%', '70%'],
-            center: ['50%','40%'],
+            center: ['50%','35%'],
             data: [
               { value: 1048, name: '自来水' },
               { value: 735, name: '中水' },

src/components/business/asset/asset.vue

@@ -11,7 +11,7 @@
     <div style="margin-top: 15px">
       <a-row>
         <a-col :span="18">
-          <div class="left">
+          <div class="left ioc-card-content">
             <card :title="'资产分析'">
               <div class="dashboardPortrait-select">
                 <a-checkable-tag v-model="tagCheck.invest" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('invest')">
@@ -30,14 +30,14 @@
           </div>
         </a-col>
         <a-col :span="6">
-          <div class="right">
+          <div class="right ioc-card-content">
             <card :title="'资产占比排名'">
               <div style="padding: 0 12px">
                 <AssetRankChart :height="250" />
               </div>
             </card>
           </div>
-          <div class="right" :style="{ marginTop: '10px' }">
+          <div class="right ioc-card-content" :style="{ marginTop: '10px' }">
             <card :title="'报废与维修'">
               <AssetMoneyRepairChart :height="220" />
             </card>

src/components/business/space/charts/spaceCostChart.vue

@@ -1,23 +1,10 @@
 <script>
+import apiOperationSpace from "@/api/operation/apiOperationSpace";
+
 export default {
   data() {
     return {
-      show: false,
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart();
-    })
-    let app = this;
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '办公室',
@@ -33,7 +20,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -77,7 +64,7 @@ export default {
         series: [
           {
             name: '办公室',
-            data: [302, 395, 227, 375, 349, 396, 304, 226, 207, 383, 287, 243],
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -101,7 +88,7 @@ export default {
           },
           {
             name: '休闲区',
-            data: [108, 104, 117, 152, 157, 121, 138, 146, 106, 143, 132, 177],
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -124,8 +111,29 @@ export default {
             },
           }
         ]
-      };
-      chart.setOption(defaultOption);
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init();
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiOperationSpace.getSpaceInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['administrativeArea','leisureArea'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/business/space/space.vue

@@ -8,7 +8,7 @@
     </div>
     <a-row style="margin-top: 12px">
       <a-col :span="18">
-        <div class="left ">
+        <div class="left ioc-card-content">
           <card :title="'空间分析'">
             <div style="padding: 8px">
               <img :src="requireImg('business/联通img.png')" width="100%">
@@ -17,7 +17,7 @@
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="right ">
+        <div class="right ioc-card-content">
           <card :title="'空间成本'">
             <div style="height: 40px">
               <span style="font-size: 16px; font-weight: 400; color: #B2B2B2; margin-left: 25%">人均空间成本</span>

src/components/common/coreData.vue

@@ -84,13 +84,13 @@ export default {
 
             </div>
             <div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
-              <span :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}">
+              <span :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#3CC2AC':''}">
                 {{ Math.abs(ele.historyNum) }}%
               </span>
             </div>
             <span class="anticon"
                   v-if="!ele.hideTrendDesc"
-                  :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}"
+                  :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#3CC2AC':''}"
                   style="vertical-align: middle;font-size: 12px">
               <a-icon type="caret-up" v-if="ele.historyNum > 0" />
               <a-icon type="caret-down" v-if="ele.historyNum < 0" />
@@ -109,7 +109,7 @@ export default {
   .coreData-item {
     display: inline-block;
     vertical-align: top;
-    height: 120px;
+    height: 110px;
     margin: 10px;
     background-color: #f7fbff;
     padding: 8px 8px 8px 1.5%;
@@ -118,7 +118,7 @@ export default {
       margin-top: 4%;
       width: 75%;
       color: #4D4D4D;
-      font-size: 15px;
+      font-size: 14px;
       max-height: 60px;
       overflow: hidden;
       font-family: PingFangSC-Bold,serif;
@@ -128,26 +128,29 @@ export default {
     }
     .coreData-item-title {
       line-height: 30px;
+      font-size: 12px;
       color: #B2B2B2;
     }
     .coreData-item-num {
       display: inline-block;
-      font-size: 22px;
+      font-size: 20px;
       color: #4D4D4D;
-      padding-top: 4%;
+      padding-top: 2.5%;
       font-family: PingFangSC-Bold,serif;
       height: 46%;
     }
     .coreData-item-unit {
       display: inline-block;
-      font-size: 22px;
+      font-size: 20px;
     }
     .coreData-item-historyDesc {
       display: inline-block;
+      font-size: 12px;
       color: #B2B2B2;
     }
     .coreData-item-historyNum {
       margin-left: 5px;
+      font-size: 12px;
       display: inline-block;
     }
   }

src/components/common/query.vue

@@ -14,7 +14,7 @@
         </a-select>
       </a-form-item>
       <a-form-item label="楼层：" class="formItem" v-if="visible.floor">
-        <a-select default-value="0" style="width: 200px" v-model="formData.floor">
+        <a-select default-value="0" style="width: 120px" v-model="formData.floor">
           <a-select-option value="0"> 全部 </a-select-option>
           <a-select-option v-for="item in floorData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
         </a-select>
@@ -28,6 +28,7 @@
       <a-form-item label="时间范围：" class="formItem" v-if="visible.time">
         <timeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></timeRange>
       </a-form-item>
+      <slot name="extraItem"></slot>
       <a-form-item class="formItem" style="float: right;margin-right: 3%">
         <a-space size="middle">
           <a-button type="primary" size="small" style="width: 70px;background-color: #B3B3B3;border: none;" @click="reset">重置</a-button>

src/components/dashboard/more/carbonOverviewChart.vue

@@ -1,22 +1,12 @@
 <script>
 import Card from "@/components/common/card.vue";
+import apiDashboard from "@/api/dashboard/apiDashboard";
 export default {
   data() {
     return {
-      height: 200
-    }
-  },
-  components: {
-    Card
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
-        color: ['#6DA6F5','#A29DF8'],
+      height: 200,
+      options: {
+        color: ['#33bbff','#1479c0'],
         legend: {
           data: [
             '碳配额',
@@ -33,7 +23,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['上分', '广分', '郑分', '规划', '总部']
+          data: []
         },
         yAxis: [
           {
@@ -64,16 +54,17 @@ export default {
         series: [
           {
             name: '碳配额',
-            data: [80, 280, 120, 200, 30],
+            data: [],
             type: 'bar',
             stack: 'A',
+            barWidth: '40%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             }
           },
           {
             name: '已消耗',
-            data: [120, 300, 240, 250, 50],
+            data: [],
             type: 'bar',
             stack: 'A',
             backgroundStyle: {
@@ -81,8 +72,27 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      this.chart = chart;
+      chart.setOption(this.options);
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getCarbonOverview({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['carbonQuota','consumed'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.options, data);
+      })
     }
   }
 }

src/components/dashboard/more/floorOverview.vue

@@ -1,13 +1,30 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
 import Card from "@/components/common/card.vue";
 export default {
   data() {
     return {
-
+      builtArea: 0,
+      layersInt: 0,
+      constructionPeriod: 0,
+      serviceLife: 0
     }
   },
   components: {
     Card
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      apiDashboard.getFloorOverview({}).then(res=>{
+        this.builtArea = res.builtArea
+        this.layersInt = res.layersInt
+        this.constructionPeriod = res.constructionPeriod
+        this.serviceLife = res.serviceLife
+      })
+    }
   }
 }
 </script>
@@ -21,16 +38,16 @@ export default {
       <div style="padding: 15px">
         <a-row :gutter="[12,20]">
           <a-col :span="12">
-            <a-statistic class="overflowItem" title="建筑面积 (m²)" :value="112893" />
+            <a-statistic class="overflowItem" title="建筑面积 (m²)" :value="builtArea" />
           </a-col>
           <a-col :span="12">
-            <a-statistic class="overflowItem" title="建筑层数" :value="21" />
+            <a-statistic class="overflowItem" title="建筑层数" :value="layersInt" />
           </a-col>
           <a-col :span="12">
-            <a-statistic class="overflowItem" title="已使用年限" :value="60" />
+            <a-statistic class="overflowItem" title="已使用年限" :value="serviceLife" />
           </a-col>
           <a-col :span="12">
-            <a-statistic class="overflowItem" title="建筑年限" :value="80" />
+            <a-statistic class="overflowItem" title="建筑年限" :value="constructionPeriod" />
           </a-col>
         </a-row>
       </div>

src/components/dashboard/more/pv/pvPowerProfitChart.vue

@@ -1,20 +1,11 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
-    return {}
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let option = {
+    return {
+      dataIndexes: ['saving', 'amountSubsidy'],
+      option: {
         color: ['#80D4FF', '#FFDF80'],
         tooltip: {
           trigger: 'item'
@@ -30,8 +21,8 @@ export default {
             type: 'pie',
             center: ['50%','40%'],
             data: [
-              { value: 1048, name: '补贴金额' },
-              { value: 735, name: '节约金额' },
+              { value: 0, name: '补贴金额' },
+              { value: 0, name: '节约金额' },
             ],
             emphasis: {
               itemStyle: {
@@ -42,8 +33,30 @@ export default {
             }
           }
         ]
-      };
-      chart.setOption(option)
+      }
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+      this.getData();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+    },
+    getData() {
+      apiDashboard.getPvProfitOverview({}).then(res=>{
+        this.option.series[0].data[0].value = res.saving;
+        this.option.series[0].data[1].value = res.amountSubsidy;
+        this.chart.setOption(this.option);
+      })
     }
   }
 }

src/components/dashboard/more/pv/pvPowerSummaryChart.vue

@@ -1,24 +1,11 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      setTimeout(()=>{
-        this.initChart()
-      },50)
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      dataIndexes: ['realTime'],
+      option: {
         legend: {
           data: [
             '发电量',
@@ -33,7 +20,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['0:00-4:00', '4:00-8:00', '8:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00']
+          data: []
         },
         yAxis: [
           {
@@ -78,7 +65,7 @@ export default {
         series: [
           {
             name: '发电量',
-            data: [169, 165, 229, 152, 158, 172],
+            data: [],
             type: 'line',
             smooth: true,
             areaStyle: {
@@ -102,10 +89,30 @@ export default {
             }
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
     }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+      this.getData()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+    },
+    getData() {
+      apiDashboard.getPvPowerOverview({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, this.dataIndexes);
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
+    },
   }
 }
 </script>

src/components/dashboard/portrait/cold/coldTrendChart.vue

@@ -1,22 +1,10 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '用冷量',
@@ -32,7 +20,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -84,18 +72,18 @@ export default {
         series: [
           {
             name: '用冷量',
-            data: [35, 71, 51, 32, 28, 66, 42, 42, 87, 34, 88, 45],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
             smooth: true,
             showSymbol:false,
             lineStyle: {
-              color: "#62CC97",
+              color: "#3CC2AC",
               width: 1,
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#3CC2AC'
             },
             emphasis: {
               scale:1.5
@@ -103,27 +91,47 @@ export default {
           },
           {
             name: '温度',
-            data: [23, 23, 17, 19, 20, 24, 23, 22, 22, 18, 25, 16],
+            data: [],
             type: 'line',
             stack: 'b',
             smooth: true,
             showSymbol:false,
             yAxisIndex:1,
+            itemStyle: {
+              color: '#F4955F'
+            },
             lineStyle: {
-              color: "#FDB456",
+              color: "#F4955F",
               width: 1,
             },
-            itemStyle: {
-              color: '#FDB456'
-            },
             emphasis: {
               scale:1.5
             },
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getColdTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['coolingCapacity', 'temperature'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/electricity/electricityUseChart.vue

@@ -1,22 +1,10 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '用电量',
@@ -31,7 +19,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -76,7 +64,7 @@ export default {
         series: [
           {
             name: '用电量',
-            data: [132, 107, 121, 152, 110, 192, 110, 167, 160, 141, 113, 137],
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -84,27 +72,47 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#B0E5CB' // 0% 处的颜色
+                color: '#7EE5D4' // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
             lineStyle: {
-              color: "#62CC97",
+              color: "#3CC2AC",
               width: 1,
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#3CC2AC'
             },
             emphasis: {
               scale:1.5
             }
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiDashboard.getElectricityTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['powerConsumption'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/hot/hotTrendChart.vue

@@ -1,22 +1,10 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '用热量',
@@ -32,7 +20,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -84,18 +72,18 @@ export default {
         series: [
           {
             name: '用热量',
-            data: [38, 36, 86, 64, 87, 77, 50, 56, 51, 88, 55, 80],
+            data: [],
             type: 'line',
             stack: 'a',
             yAxisIndex:0,
             smooth: true,
             showSymbol:false,
             lineStyle: {
-              color: "#62CC97",
+              color: "#3CC2AC",
               width: 1,
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#3CC2AC'
             },
             emphasis: {
               scale:1.5
@@ -103,17 +91,17 @@ export default {
           },
           {
             name: '温度',
-            data: [31, 24, 22, 25, 24, 24, 25, 22, 21, 22, 26, 32],
+            data: [],
             type: 'line',
             stack: 'b',
             yAxisIndex:1,
             smooth: true,
             showSymbol:false,
             itemStyle: {
-              color: '#FDB456'
+              color: '#F4955F'
             },
             lineStyle: {
-              color: "#FDB456",
+              color: "#F4955F",
               width: 1,
             },
             emphasis: {
@@ -121,9 +109,29 @@ export default {
             },
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      }
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getHotTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['heatConsumption','temperature'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/money/investDistributeChart.vue

@@ -5,22 +5,13 @@
 </template>
 
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
-        color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
+      option: {
+        color: ['#3AA7E6','#9790F8','#4ACFB8','#F4955F','#F8797E'],
         legend: {
           data: [
             '投资1',
@@ -40,13 +31,12 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1季度', '2季度', '3季度', '4季度']
+          data: []
         },
         yAxis: [
           {
             name: '额度(万元)',
             type: 'value',
-            max: 1200,
             nameTextStyle: {
               padding: [10, 0, 10, -20]
             },
@@ -54,8 +44,8 @@ export default {
           {
             type: 'value',
             name: '回报率(%)',
-            min:0,
-            max:100,
+            min: 0,
+            max: 100,
             nameTextStyle: {
               padding: [10, 20, 10, 0]
             },
@@ -82,7 +72,7 @@ export default {
         series: [
           {
             name: '投资1',
-            data: [380, 280, 350, 200],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -92,7 +82,7 @@ export default {
           },
           {
             name: '投资2',
-            data: [80, 60, 70, 50],
+            data: [],
             type: 'bar',
             stack: 'A',
             backgroundStyle: {
@@ -101,7 +91,7 @@ export default {
           },
           {
             name: '投资3',
-            data: [130, 150, 110, 140],
+            data: [],
             type: 'bar',
             stack: 'A',
             backgroundStyle: {
@@ -110,7 +100,7 @@ export default {
           },
           {
             name: '投资4',
-            data: [75, 66, 99, 85],
+            data: [],
             type: 'bar',
             stack: 'A',
             backgroundStyle: {
@@ -119,13 +109,32 @@ export default {
           },
           {
             name: '投资回报率',
-            data: [45, 55, 62, 69],
+            data: [],
             yAxisIndex:1,
             type: 'line',
           }
         ]
-      };
-      chart.setOption(options);
+      }
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      this.chart = chart
+      chart.setOption(this.option);
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getMoneyDistributionData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['investment1','investment2','investment3','investment4','rateReturn'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/money/investYearChart.vue

@@ -3,22 +3,13 @@
 </template>
 
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
-        color: ['#80B2FF','#FFDF80'],
+      option: {
+        color: ['#3AA7E6','#F8797E'],
         legend: {
           data: [
             '已使用时间',
@@ -35,7 +26,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['资产1', '资产2', '资产3', '资产4', '资产5', '资产6']
+          data: []
         },
         yAxis: [
           {
@@ -48,8 +39,6 @@ export default {
           {
             type: 'value',
             name: '标准年限',
-            min:0,
-            max:100,
             nameTextStyle: {
               padding: [10, 20, 10, 0]
             },
@@ -76,7 +65,7 @@ export default {
         series: [
           {
             name: '已使用时间',
-            data: [20, 25, 33, 45, 70, 75],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '30%',
@@ -86,13 +75,33 @@ export default {
           },
           {
             name: '标准年限',
-            data: [2, 3, 6, 7, 8, 9],
+            data: [],
+            stack: 'B',
             yAxisIndex:1,
             type: 'line',
           }
         ]
-      };
-      chart.setOption(options);
+      }
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      this.chart = chart;
+      chart.setOption(this.option);
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getMoneyLifeData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['serviceLife','standardLife'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/person/personTrendChart.vue

@@ -1,10 +1,17 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
+    let colors = {
+      ownEmployees: ['#178FE6', '#8BCFFF'],
+      outsourcingStaff: ['#3CC2AC', '#7EE6D4'],
+      visitors: ['#EE8242', '#FFB78D']
+    };
     return {
       chart: null,
       show: false,
-      defaultOption: {
+      option: {
         legend: {
           data: [
             '自有员工',
@@ -21,7 +28,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: this.data.x
+          data: []
         },
         yAxis: [
           {
@@ -32,19 +39,7 @@ export default {
             },
           },
         ],
-        dataZoom: [
-          {
-            type: 'slider',
-            start: 0,
-            end: 100,
-            height: 12,
-          },
-          {
-            type: 'inside',
-            start: 0,
-            end: 100,
-          }
-        ],
+        dataZoom: this.$constant.ECHARTS_DATAZOOM,
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -65,8 +60,8 @@ export default {
         },
         series: [
           {
-            name: '自有员工',
-            data: this.data.ownEmployees,
+            name: '访客人员',
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -74,23 +69,26 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#A6C9FF' // 0% 处的颜色
+                color: colors.visitors[1] // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
             lineStyle: {
-              color: "#5A9BFE",
+              color: colors.visitors[0],
               width: 1,
             },
+            itemStyle: {
+              color: colors.visitors[0]
+            },
             emphasis: {
               scale: 1.5
-            }
+            },
           },
           {
             name: '外协员工',
-            data: this.data.outsourcingStaff,
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -98,23 +96,26 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#B0E5CB' // 0% 处的颜色
+                color: colors.outsourcingStaff[1] // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
             lineStyle: {
-              color: "#62CC97",
+              color: colors.outsourcingStaff[0],
               width: 1,
             },
+            itemStyle: {
+              color: colors.outsourcingStaff[0]
+            },
             emphasis: {
               scale: 1.5
             },
           },
           {
-            name: '访客人员',
-            data: this.data.visitors,
+            name: '自有员工',
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -122,20 +123,24 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#FFD7AC' // 0% 处的颜色
+                color: colors.ownEmployees[1] // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
             lineStyle: {
-              color: "#FDB456",
+              color: colors.ownEmployees[0],
               width: 1,
             },
+            itemStyle: {
+              color: colors.ownEmployees[0]
+            },
             emphasis: {
               scale: 1.5
-            },
-          }
+            }
+          },
+
         ]
       },
     }
@@ -149,28 +154,24 @@ export default {
       this.initChart();
     })
   },
-  watch: {
-    data: {
-      handler: function (val) {
-        this.defaultOption.xAxis.data = val.x;
-        this.defaultOption.series[0].data = val.ownEmployees;
-        this.defaultOption.series[1].data = val.outsourcingStaff;
-        this.defaultOption.series[2].data = val.visitors;
-        this.chart.setOption(this.defaultOption);
-      },
-      deep: true
-    }
-  },
   methods: {
     initChart() {
-      this.chart = this.$echarts.init(this.$refs.myChart);
-      console.log(this.data)
-      this.chart.setOption(this.defaultOption);
-      let app = this;
-      setTimeout(function () {
-        app.chart.resize();
-      }, 1000)
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      for (let i = 0; i < 5; i++) {
+        setTimeout(function () {
+          chart.resize()
+        },500*i)
+      }
+      this.getData()
     },
+    getData() {
+      apiDashboard.getPersonEnterSummary({}).then(res => {
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['visitors','outsourcingStaff','ownEmployees'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
+    }
   }
 }
 </script>

src/components/dashboard/portrait/personPortrait.vue

@@ -42,12 +42,6 @@ export default {
           content: ''
         },
       ],
-      trendData: {
-        x: [],
-        ownEmployees: [],
-        outsourcingStaff: [],
-        visitors: []
-      }
     }
   },
   props: {
@@ -63,7 +57,6 @@ export default {
   methods: {
     init() {
       this.getCoreData();
-      this.getTrendData();
     },
     getCoreData() {
       api.getPersonCoreData(this.$util.dateUtil.getNearlyMonthRange()).then(res=>{
@@ -78,26 +71,6 @@ export default {
         this.coreData[4].content = res.worthAttention
       })
     },
-    getTrendData() {
-      api.getPersonEnterSummary(this.$util.dateUtil.getNearlyMonthRange()).then(res=>{
-        let x = [];
-        let ownEmployees = [];
-        let outsourcingStaff = [];
-        let visitors = [];
-        res.forEach(item=>{
-          x.push(item.startDate)
-          ownEmployees.push(item.ownEmployees)
-          outsourcingStaff.push(item.outsourcingStaff)
-          visitors.push(item.visitors)
-        });
-        this.trendData = {
-          x: x,
-          ownEmployees: ownEmployees,
-          outsourcingStaff: outsourcingStaff,
-          visitors: visitors,
-        }
-      })
-    }
   }
 }
 </script>
@@ -108,7 +81,7 @@ export default {
       <CoreData :data-list="coreData"></CoreData>
     </div>
     <div style="padding: 15px;">
-      <PersonTrendChart :data="trendData" :height="chartHeight"></PersonTrendChart>
+      <PersonTrendChart :height="chartHeight"></PersonTrendChart>
     </div>
   </div>
 </template>

src/components/dashboard/portrait/restaurant/restaurantTrendChart.vue

@@ -1,4 +1,6 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
@@ -6,38 +8,7 @@ export default {
       xBgColor: [],
       moneyData: [],
       orderData: [],
-    }
-  },
-  props: {
-    height: Number,
-    data: Array,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initData()
-      this.initChart()
-    })
-  },
-  methods: {
-    initData() {
-      if (!this.data) {
-        return;
-      }
-      for (let i = 0; i < this.data.length; i++) {
-        let obj = this.data[i];
-        this.xData.push(obj.label);
-        this.moneyData.push(obj.money);
-        this.orderData.push(obj.order);
-        if (obj.money>=200) {
-          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
-        } else {
-          this.xBgColor.push('transparent')
-        }
-      }
-    },
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '餐厅消费金额',
@@ -53,7 +24,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: [],
           splitArea: {
             show: true,
             areaStyle: {
@@ -73,7 +44,7 @@ export default {
             name: '订单(单)',
             type: 'value',
             nameTextStyle: {
-              padding: [10, 20, 10, 0]
+              padding: [10, 0, 10, 10]
             },
           },
         ],
@@ -111,7 +82,7 @@ export default {
         series: [
           {
             name: '餐厅消费金额',
-            data: [274, 128, 213, 273, 114, 183, 245, 166, 187, 128, 137, 275],
+            data: [],
             type: 'bar',
             yAxisIndex:0,
             barWidth: '20%',
@@ -124,7 +95,7 @@ export default {
           },
           {
             name: '餐厅消费订单',
-            data: [98, 71, 77, 57, 61, 75, 88, 87, 61, 54, 83, 91],
+            data: [],
             type: 'line',
             itemStyle: {
               color: '#62CC97',
@@ -150,9 +121,47 @@ export default {
             },
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+    data: Array,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initData()
+      this.initChart()
+    })
+  },
+  methods: {
+    initData() {
+      if (!this.data) {
+        return;
+      }
+      for (let i = 0; i < this.data.length; i++) {
+        let obj = this.data[i];
+        this.xData.push(obj.label);
+        this.moneyData.push(obj.money);
+        this.orderData.push(obj.order);
+        if (obj.money>=200) {
+          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
+        } else {
+          this.xBgColor.push('transparent')
+        }
+      }
+    },
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option);
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getRestTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['consumptionAmount','consumptionOrder'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/supermarket/supermarketTrendChart.vue

@@ -1,43 +1,18 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
+    let colors = {
+      consumptionAmount: ['#399EE6'],
+      consumptionOrder: ['#3CC2AC', '#7EE6D4']
+    }
     return {
       xData: [],
       xBgColor: [],
       moneyData: [],
       orderData: [],
-    }
-  },
-  props: {
-    height: Number,
-    data: Array,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initData()
-      this.initChart()
-    })
-  },
-  methods: {
-    initData() {
-      if (!this.data) {
-        return;
-      }
-      for (let i = 0; i < this.data.length; i++) {
-        let obj = this.data[i];
-        this.xData.push(obj.label);
-        this.moneyData.push(obj.money);
-        this.orderData.push(obj.order);
-        if (obj.money>=200) {
-          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
-        } else {
-          this.xBgColor.push('transparent')
-        }
-      }
-    },
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '商超消费金额',
@@ -53,7 +28,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: [],
           splitArea: {
             show: true,
             areaStyle: {
@@ -73,7 +48,7 @@ export default {
             name: '订单(单)',
             type: 'value',
             nameTextStyle: {
-              padding: [10, 20, 10, 0]
+              padding: [10, 0, 10, 10]
             },
           },
         ],
@@ -111,7 +86,7 @@ export default {
         series: [
           {
             name: '商超消费金额',
-            data: [274, 128, 213, 273, 114, 183, 245, 166, 187, 128, 137, 275],
+            data: [],
             type: 'bar',
             yAxisIndex:0,
             barWidth: 20,
@@ -119,40 +94,78 @@ export default {
               color: 'rgb(253, 232, 229, 0.5)'
             },
             itemStyle: {
-              color: '#80b2ff'
+              color: colors.consumptionAmount[0]
             }
           },
           {
             name: '商超消费订单',
-            data: [98, 71, 77, 57, 61, 75, 88, 87, 61, 54, 83, 91],
+            data: [],
             type: 'line',
-            itemStyle: {
-              color: '#62CC97',
-            },
             yAxisIndex:1,
             smooth: true,
             showSymbol:false,
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#B0E5CB' // 0% 处的颜色
+                color: colors.consumptionOrder[1], // 0% 处的颜色
               },{
                 offset: 0.8,
                 color: 'rgb(255,255,255,0.1)'
               }], false),
             },
             lineStyle: {
-              color: "#62CC97",
+              color: colors.consumptionOrder[0],
               width: 1,
             },
+            itemStyle: {
+              color: colors.consumptionOrder[0],
+            },
             emphasis: {
               scale:1.5
             },
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+    data: Array,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initData()
+      this.initChart()
+    })
+  },
+  methods: {
+    initData() {
+      if (!this.data) {
+        return;
+      }
+      for (let i = 0; i < this.data.length; i++) {
+        let obj = this.data[i];
+        this.xData.push(obj.label);
+        this.moneyData.push(obj.money);
+        this.orderData.push(obj.order);
+        if (obj.money>=200) {
+          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
+        } else {
+          this.xBgColor.push('transparent')
+        }
+      }
+    },
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option);
+      this.getData()
+    },
+    getData() {
+      apiDashboard.getSuperMarketTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['consumptionAmount','consumptionOrder'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/dashboard/portrait/water/waterUseChart.vue

@@ -1,22 +1,10 @@
 <script>
+import apiDashboard from "@/api/dashboard/apiDashboard";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '用水量',
@@ -31,7 +19,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -76,7 +64,7 @@ export default {
         series: [
           {
             name: '用水量',
-            data: [167, 156, 176, 156, 173, 127, 101, 165, 121, 193, 172, 149],
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -84,27 +72,47 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#B0E5CB' // 0% 处的颜色
+                color: '#7EE5D4' // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
             lineStyle: {
-              color: "#62CC97",
+              color: "#3CC2AC",
               width: 1,
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#3CC2AC'
             },
             emphasis: {
               scale:1.5
             }
           },
         ]
-      };
-      //Object.assign(defaultOption, this.option)
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option);
+      this.getData();
+    },
+    getData() {
+      apiDashboard.getWaterTrendData({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['water'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/doubleCarbon/PV/charts/carbonPvEmissionChart.vue

@@ -1,22 +1,11 @@
 <script>
+import apiCarbonPrint from "@/api/carbon/apiCarbonPrint";
+import apiCarbonPv from "@/api/carbon/apiCarbonPv";
+
 export default {
   data() {
     return {
-      show: false,
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart();
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '中迅',
@@ -36,7 +25,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -81,7 +70,7 @@ export default {
         series: [
           {
             name: '中迅',
-            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -99,7 +88,7 @@ export default {
           },
           {
             name: '北京规划院',
-            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -116,7 +105,7 @@ export default {
           },
           {
             name: '郑分',
-            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -133,7 +122,7 @@ export default {
           },
           {
             name: '广分',
-            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -150,7 +139,7 @@ export default {
           },
           {
             name: '上分',
-            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -167,7 +156,7 @@ export default {
           },
           {
             name: '成分',
-            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -183,8 +172,29 @@ export default {
             },
           }
         ]
-      };
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonPv.getPhotovoltaicInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['zhongxun','guihuayuanBJ','zhengfen','guangfen','shangfen','chengfen'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/doubleCarbon/PV/charts/carbonPvQuotaChart.vue

@@ -1,27 +1,15 @@
 <script>
 import Card from "@/components/common/card.vue";
+import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";
+import apiCarbonPv from "@/api/carbon/apiCarbonPv";
 export default {
   data() {
-    return {}
-  },
-  props: {
-    height: Number
-  },
-  components: {
-    Card
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+    return {
+      option: {
         color: ['#6DA6F5','#A29DF8'],
         legend: {
           data: [
-            '碳配额',
-            '已消耗',
+            '光伏减排',
           ]
         },
         grid: {
@@ -39,7 +27,7 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          data: [],
           axisTick: {
             show: false
           },
@@ -67,8 +55,8 @@ export default {
         },
         series: [
           {
-            name: '碳配额',
-            data: [80, 280, 120, 200, 30],
+            name: '光伏减排',
+            data: [],
             type: 'bar',
             barWidth: '30%',
             backgroundStyle: {
@@ -76,8 +64,41 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonPv.getPhotovoltaicInfoOrder({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['Photovoltaic'])
+        this.option.yAxis.data = data.label;
+        let arr = [];
+        for (const key in data) {
+          if (key == 'label'){
+            continue;
+          }
+          arr.push(data[key])
+        }
+        for (let i = 0; i < this.option.series.length; i++) {
+          this.option.series[i].data = arr[i]
+        }
+        this.chart.setOption(this.option)
+      })
     }
   }
 }

src/components/doubleCarbon/PV/doubleCarbonPv.vue

@@ -78,7 +78,7 @@ export default {
     },
     getCoreData() {
       let timeRange = this.$util.dateUtil.getNearlyMonthRange()
-      apiCarbonPv.getCoreData(timeRange).then(res=>{
+      apiCarbonPv.getCoreData(timeRange).then(res => {
         this.coreData[0].num = res.list[0].value
         this.coreData[0].historyNum = res.list[0].compare
         this.coreData[1].num = res.list[1].value
@@ -117,18 +117,23 @@ export default {
     <div style="margin-top: 12px">
       <a-row :gutter="[12,12]">
         <a-col :span="18">
-          <Card title="碳排放分析">
-            <div class="doubleCarbon-pv-analyse">
-              <CarbonPvEmissionChart :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="光伏减排分析">
+              <div class="doubleCarbon-pv-analyse">
+                <CarbonPvEmissionChart :height="450"/>
+              </div>
+            </Card>
+          </div>
         </a-col>
         <a-col :span="6">
-          <Card title="碳配额构成">
-            <div class="doubleCarbon-pv-quota">
-              <CarbonPvQuotaChart :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="光伏减排排名">
+              <div class="doubleCarbon-pv-quota">
+                <CarbonPvQuotaChart :height="450"/>
+              </div>
+            </Card>
+          </div>
+
         </a-col>
       </a-row>
     </div>
@@ -145,13 +150,16 @@ export default {
   .doubleCarbon-pv-analyse {
     padding: 12px;
   }
+
   .doubleCarbon-pv-quota {
     padding: 12px;
   }
+
   .doubleCarbon-pv-news {
     padding: 0 12px;
     height: 300px;
   }
+
   .doubleCarbon-pv-percent {
     padding: 0 12px;
     height: 300px;

src/components/doubleCarbon/car/charts/carbonCarEmissionChart.vue

@@ -1,22 +1,10 @@
 <script>
+import apiCarbonCar from "@/api/carbon/apiCarbonCar";
+
 export default {
   data() {
     return {
-      show: false,
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart();
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '中迅',
@@ -36,7 +24,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -81,7 +69,7 @@ export default {
         series: [
           {
             name: '中迅',
-            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -99,7 +87,7 @@ export default {
           },
           {
             name: '北京规划院',
-            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -116,7 +104,7 @@ export default {
           },
           {
             name: '郑分',
-            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -133,7 +121,7 @@ export default {
           },
           {
             name: '广分',
-            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -150,7 +138,7 @@ export default {
           },
           {
             name: '上分',
-            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -167,7 +155,7 @@ export default {
           },
           {
             name: '成分',
-            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -183,8 +171,29 @@ export default {
             },
           }
         ]
-      };
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonCar.getVehicleInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['zhongxun','guihuayuanBJ','zhengfen','guangfen','shangfen','chengfen'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/doubleCarbon/car/charts/carbonCarQuotaChart.vue

@@ -1,27 +1,14 @@
 <script>
 import Card from "@/components/common/card.vue";
+import apiCarbonCar from "@/api/carbon/apiCarbonCar";
 export default {
   data() {
-    return {}
-  },
-  props: {
-    height: Number
-  },
-  components: {
-    Card
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+    return {
+      option: {
         color: ['#6DA6F5','#A29DF8'],
         legend: {
           data: [
-            '碳配额',
-            '已消耗',
+            '车辆排放',
           ]
         },
         grid: {
@@ -39,7 +26,7 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          data: [],
           axisTick: {
             show: false
           },
@@ -67,8 +54,8 @@ export default {
         },
         series: [
           {
-            name: '碳配额',
-            data: [80, 280, 120, 200, 30],
+            name: '车辆排放',
+            data: [],
             type: 'bar',
             barWidth: '30%',
             backgroundStyle: {
@@ -76,8 +63,41 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonCar.getVehicleInfoOrder({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['Vehicle'])
+        this.option.yAxis.data = data.label;
+        let arr = [];
+        for (const key in data) {
+          if (key == 'label'){
+            continue;
+          }
+          arr.push(data[key])
+        }
+        for (let i = 0; i < this.option.series.length; i++) {
+          this.option.series[i].data = arr[i]
+        }
+        this.chart.setOption(this.option)
+      })
     }
   }
 }

src/components/doubleCarbon/car/doubleCarbonCar.vue

@@ -77,7 +77,7 @@ export default {
       console.log(data)
     },
     getCoreData() {
-      apiCarbonCar.getCoreData(this.queryData).then(res=>{
+      apiCarbonCar.getCoreData(this.queryData).then(res => {
         this.coreData[0].num = res.list[0].value
         this.coreData[0].historyNum = res.list[0].compare
         this.coreData[1].num = res.list[1].value
@@ -116,18 +116,24 @@ export default {
     <div style="margin-top: 12px">
       <a-row :gutter="[12,12]">
         <a-col :span="18">
-          <Card title="碳排放分析">
-            <div class="doubleCarbon-car-analyse">
-              <CarbonCarEmissionChart :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="车辆排放分析">
+              <div class="doubleCarbon-car-analyse">
+                <CarbonCarEmissionChart :height="450"/>
+              </div>
+            </Card>
+          </div>
+
         </a-col>
         <a-col :span="6">
-          <Card title="碳配额构成">
-            <div class="doubleCarbon-car-quota">
-              <CarbonCarQuotaChart :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="车辆排放排名">
+              <div class="doubleCarbon-car-quota">
+                <CarbonCarQuotaChart :height="450"/>
+              </div>
+            </Card>
+          </div>
+
         </a-col>
       </a-row>
     </div>
@@ -144,13 +150,16 @@ export default {
   .doubleCarbon-car-analyse {
     padding: 12px;
   }
+
   .doubleCarbon-car-quota {
     padding: 12px;
   }
+
   .doubleCarbon-car-news {
     padding: 0 12px;
     height: 300px;
   }
+
   .doubleCarbon-car-percent {
     padding: 0 12px;
     height: 300px;

src/components/doubleCarbon/overview/charts/carbonEmissionChart.vue

@@ -1,22 +1,12 @@
 <script>
+import apiCarbonCar from "@/api/carbon/apiCarbonCar";
+import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";
+
 export default {
   data() {
     return {
       show: false,
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart();
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '中迅',
@@ -36,7 +26,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -81,7 +71,7 @@ export default {
         series: [
           {
             name: '中迅',
-            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -99,7 +89,7 @@ export default {
           },
           {
             name: '北京规划院',
-            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -116,7 +106,7 @@ export default {
           },
           {
             name: '郑分',
-            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -133,7 +123,7 @@ export default {
           },
           {
             name: '广分',
-            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -150,7 +140,7 @@ export default {
           },
           {
             name: '上分',
-            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -167,7 +157,7 @@ export default {
           },
           {
             name: '成分',
-            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -183,8 +173,29 @@ export default {
             },
           }
         ]
-      };
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init();
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonOverview.getCarbonInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['zhongxun','guihuayuanBJ','zhengfen','guangfen','shangfen','chengfen'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/doubleCarbon/overview/charts/carbonQuotaChart.vue

@@ -1,27 +1,15 @@
 <script>
 import Card from "@/components/common/card.vue";
+import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";
 export default {
   data() {
-    return {}
-  },
-  props: {
-    height: Number
-  },
-  components: {
-    Card
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+    return {
+      option: {
         color: ['#6DA6F5','#A29DF8'],
         legend: {
           data: [
-            '碳配额',
-            '已消耗',
+            '碳配额存量',
+            '碳配额消耗',
           ]
         },
         grid: {
@@ -39,7 +27,7 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          data: [],
           axisTick: {
             show: false
           },
@@ -67,8 +55,17 @@ export default {
         },
         series: [
           {
-            name: '碳配额',
-            data: [80, 280, 120, 200, 30],
+            name: '碳配额存量',
+            data: [],
+            type: 'bar',
+            barWidth: '30%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '碳配额消耗',
+            data: [],
             type: 'bar',
             barWidth: '30%',
             backgroundStyle: {
@@ -76,8 +73,41 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonOverview.getCarbonQuotaComposition({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['stock','consume'])
+        this.option.yAxis.data = data.label;
+        let arr = [];
+        for (const key in data) {
+          if (key == 'label'){
+            continue;
+          }
+          arr.push(data[key])
+        }
+        for (let i = 0; i < this.option.series.length; i++) {
+          this.option.series[i].data = arr[i]
+        }
+        this.chart.setOption(this.option)
+      })
     }
   }
 }

src/components/doubleCarbon/overview/doubleCarbonOverview.vue

@@ -128,35 +128,45 @@ export default {
     <div style="margin-top: 12px">
       <a-row :gutter="[12,12]">
         <a-col :span="18">
-          <Card title="碳排放分析">
-            <div class="doubleCarbon-overview-analyse">
-              <CarbonEmissionCharts :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="碳排放分析">
+              <div class="doubleCarbon-overview-analyse">
+                <CarbonEmissionCharts :height="450" />
+              </div>
+            </Card>
+          </div>
         </a-col>
         <a-col :span="6">
-          <Card title="碳配额构成">
-            <div class="doubleCarbon-overview-quota">
-              <CarbonQuotaChart :height="450" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="碳配额构成">
+              <div class="doubleCarbon-overview-quota">
+                <CarbonQuotaChart :height="450" />
+              </div>
+            </Card>
+          </div>
+
         </a-col>
         <a-col :span="18">
-          <Card title="双碳新闻">
-            <div style="width: 97%;margin: 0 auto">
-              <a-divider style="margin: 0;padding: 0"></a-divider>
-            </div>
-            <div class="doubleCarbon-overview-news">
-              <DoubleCarbonNews :data="newsData" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="双碳新闻">
+              <div style="width: 97%;margin: 0 auto">
+                <a-divider style="margin: 0;padding: 0"></a-divider>
+              </div>
+              <div class="doubleCarbon-overview-news">
+                <DoubleCarbonNews :data="newsData" />
+              </div>
+            </Card>
+          </div>
         </a-col>
         <a-col :span="6">
-          <Card title="碳排放占比">
-            <div class="doubleCarbon-overview-percent">
-              <CarbonOverviewPercent :height="300" />
-            </div>
-          </Card>
+          <div class="ioc-card-content">
+            <Card title="碳排放占比">
+              <div class="doubleCarbon-overview-percent">
+                <CarbonOverviewPercent :height="300" />
+              </div>
+            </Card>
+          </div>
+
         </a-col>
       </a-row>
     </div>

src/components/doubleCarbon/print/charts/carbonPrintEmissionChart.vue

@@ -1,22 +1,11 @@
 <script>
+import apiCarbonCar from "@/api/carbon/apiCarbonCar";
+import apiCarbonPrint from "@/api/carbon/apiCarbonPrint";
+
 export default {
   data() {
     return {
-      show: false,
-    }
-  },
-  props: {
-    height: Number,
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.initChart();
-    })
-  },
-  methods: {
-    initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
-      let defaultOption = {
+      option: {
         legend: {
           data: [
             '中迅',
@@ -36,7 +25,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -81,7 +70,7 @@ export default {
         series: [
           {
             name: '中迅',
-            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -99,7 +88,7 @@ export default {
           },
           {
             name: '北京规划院',
-            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -116,7 +105,7 @@ export default {
           },
           {
             name: '郑分',
-            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -133,7 +122,7 @@ export default {
           },
           {
             name: '广分',
-            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -150,7 +139,7 @@ export default {
           },
           {
             name: '上分',
-            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -167,7 +156,7 @@ export default {
           },
           {
             name: '成分',
-            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            data: [],
             type: 'line',
             smooth: true,
             showSymbol:false,
@@ -183,8 +172,29 @@ export default {
             },
           }
         ]
-      };
-      chart.setOption(defaultOption)
+      },
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonPrint.getPrintInfo({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['zhongxun','guihuayuanBJ','zhengfen','guangfen','shangfen','chengfen'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/doubleCarbon/print/charts/carbonPrintQuotaChart.vue

@@ -1,27 +1,15 @@
 <script>
-import Card from "@/components/common/card.vue";
+import apiCarbonCar from "@/api/carbon/apiCarbonCar";
+import apiCarbonPrint from "@/api/carbon/apiCarbonPrint";
+
 export default {
   data() {
-    return {}
-  },
-  props: {
-    height: Number
-  },
-  components: {
-    Card
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+    return {
+      option: {
         color: ['#6DA6F5','#A29DF8'],
         legend: {
           data: [
-            '碳配额',
-            '已消耗',
+            '文印排放',
           ]
         },
         grid: {
@@ -39,7 +27,7 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          data: [],
           axisTick: {
             show: false
           },
@@ -67,8 +55,8 @@ export default {
         },
         series: [
           {
-            name: '碳配额',
-            data: [80, 280, 120, 200, 30],
+            name: '文印排放',
+            data: [],
             type: 'bar',
             barWidth: '30%',
             backgroundStyle: {
@@ -76,8 +64,40 @@ export default {
             }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  components: {
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiCarbonPrint.getPrintInfoOrder({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['Print'])
+        this.option.yAxis.data = data.label;
+        let arr = [];
+        for (const key in data) {
+          if (key == 'label'){
+            continue;
+          }
+          arr.push(data[key])
+        }
+        for (let i = 0; i < this.option.series.length; i++) {
+          this.option.series[i].data = arr[i]
+        }
+        this.chart.setOption(this.option)
+      })
     }
   }
 }

src/components/doubleCarbon/print/doubleCarbonPrint.vue

@@ -116,18 +116,20 @@ export default {
     <div style="margin-top: 12px">
       <a-row :gutter="[12,12]">
         <a-col :span="18">
-          <Card title="碳排放分析">
+          <div class="ioc-card-content"><Card title="文印排放分析">
             <div class="doubleCarbon-print-analyse">
               <CarbonPrintEmissionChart :height="450" />
             </div>
-          </Card>
+          </Card></div>
+
         </a-col>
         <a-col :span="6">
-          <Card title="碳配额构成">
+          <div class="ioc-card-content"><Card title="文印排放排名">
             <div class="doubleCarbon-print-quota">
               <CarbonPrintQuotaChart :height="450" />
             </div>
-          </Card>
+          </Card></div>
+
         </a-col>
       </a-row>
     </div>

src/components/home/HomeAside.vue

@@ -99,7 +99,7 @@ export default {
       </a-menu-item-group>
       <a-menu-item v-for="item in menuList" :key="item.router" @click="handleClickMenuItem(item)" >
         <span class="anticon" :style="{verticalAlign: iconVerticalAlign}">
-          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg('function/'+item.icon)"></a-avatar>
         </span>
         <span >
             {{ item.name }}

src/components/home/HomeLeft.vue

@@ -24,7 +24,10 @@
           </div>
         </template>
 
-        <a-menu-item>
+        <a-menu-item @click="handleClickMenuItem('/dashboard')">
+          <span class="anticon" style="vertical-align: middle">
+            <a-avatar :size="20" :src="requireImg('function/智能看板.png')" />
+          </span>
           智能看板
         </a-menu-item>
       </a-menu-item-group>
@@ -40,6 +43,7 @@
 
 <script>
 import NavigationPage from "@/components/home/NavigationPage.vue";
+import {requireImg} from "@/utils/requireImg";
 export default {
   data() {
     return {
@@ -53,11 +57,16 @@ export default {
     NavigationPage
   },
   methods: {
+    requireImg,
     toRoute(item, parent) {
       this.$store.menuStore().currMenu = parent;
       this.$router.push({path: item.router});
       this.close();
     },
+    handleClickMenuItem(path) {
+      this.$router.push({path: path});
+      this.close()
+    },
     showNav() {
       this.navVisible = true;
     },

src/components/home/NavigationPage.vue

@@ -2,12 +2,23 @@
   <div class="left-dashboard">
     <template v-for="menu in menuList">
       <div class="menu" v-if="menu.name!=='智能看板'" :key="menu.name">
-        <div class="menu-title">{{menu.name}}</div>
+        <div class="menu-title">
+          <span class="anticon" style="vertical-align: middle;margin-right: 5px">
+            <a-avatar shape="square" :size="22" :src="requireImg('function/color/'+menu.icon)"/></span>
+          {{menu.name}}
+        </div>
         <ul class="menu-content" >
-          <li class="menu-content-item" v-for="item in menu.children" :key="item.name" @click="toRoute(item, menu)" >{{ item.name }}</li>
+          <li class="menu-content-item" v-for="item in menu.children" :key="item.name" @click="toRoute(item, menu)" >
+            <span class="anticon" style="vertical-align: middle;margin: 1px 2px">
+              <a-avatar shape="square" :size="20" :src="requireImg('functionColor/small/'+item.icon)"/></span>
+            {{ item.name }}
+          </li>
         </ul>
       </div>
     </template>
+    <div style="width: 90%;margin: 0 auto">
+      <a-divider ></a-divider>
+    </div>
     <div class="menu sso">
       <div class="menu-title">单点登录</div>
       <div class="menu-content sso-item" v-for="item in ssoList" :key="item.name" >
@@ -20,6 +31,7 @@
 <script>
 import menuList from "@/data/json/menuList.json"
 import ssoList from "@/data/json/ssoList.json"
+import {requireImg} from "@/utils/requireImg";
 export default {
   data() {
     return {
@@ -35,6 +47,7 @@ export default {
   mounted() {
   },
   methods: {
+    requireImg
   }
 
 }
@@ -48,24 +61,24 @@ export default {
     vertical-align: top;
     width: 150px;
     height: 200px;
-    margin: 30px;
+    margin: 30px 2% 30px 6%;
     .menu-title {
       margin-left: 20px;
       margin-top: 10px;
       font-size: 20px;
       letter-spacing: 3px;
-      font-weight: 600;
-      color: #101010;
+      color: #4D4D4D;
     }
     .menu-content {
       list-style: none;
       font-size: 16px;
-      margin: 10px 0 0 30px;
+      margin: 12px 0 0 30px;
       padding: 0;
       .menu-content-item {
+        margin-bottom: 6px;
         line-height: 30px;
         letter-spacing: 1px;
-        color: #101010;
+        color: #999999;
         cursor: pointer;
       }
     }

src/components/life/healthyHome/components/lifeHealthyHomeChart.vue

@@ -5,21 +5,13 @@
 </template>
 
 <script>
+import apiLifeHealthyHome from "@/api/life/apiLifeHealthyHome";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
+        color: ['#3AA7E6','#F4955F'],
         legend: {
           data: [
             '进舱人数',
@@ -36,7 +28,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+          data: []
         },
         yAxis: [
           {
@@ -85,31 +77,44 @@ export default {
         series: [
           {
             name: '进舱人数',
-            data: [233, 209, 296, 148, 233, 395, 329],
+            data: [],
             type: 'bar',
             barWidth: '15%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#6FA8FE'
-            }
           },
           {
             name: '体检人数',
-            data: [131, 136, 118, 121, 173, 188, 159],
+            data: [],
             type: 'bar',
             barWidth: '15%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#FFDF80'
-            }
           },
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiLifeHealthyHome.getHutAnalysis({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['warehousing','physicalExamination'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/life/healthyHome/components/lifeHealthyHomeMonitor.vue

@@ -34,7 +34,7 @@ export default {
 .iot-healthy-home-monitor-item {
   display: inline-block;
   width: 100%;
-  height: 110px;
+  height: 100px;
   background-color: #f7fbff;
   .iot-healthy-home-monitor-item-icon {
     display: inline-block;

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -93,7 +93,8 @@ export default {
      <a-row>
        <a-col>
          <div class="lifeHealthyHome-query">
-           <Query></Query>
+           <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
+                  :search="search"></Query>
          </div>
        </a-col>
        <a-col>
@@ -108,7 +109,7 @@ export default {
     <a-row >
       <a-col :span="18">
         <div class="lifeHealthyHome-left">
-          <div class="lifeHealthyHome-detail">
+          <div class="lifeHealthyHome-detail ioc-card-content">
             <Card title="小屋分析">
               <LifeHealthyHomeChart :height="450"></LifeHealthyHomeChart>
             </Card>
@@ -117,9 +118,9 @@ export default {
       </a-col>
       <a-col :span="6">
         <div class="lifeHealthyHome-right">
-          <div class="lifeHealthyHome-top">
+          <div class="lifeHealthyHome-top ioc-card-content">
             <Card title="环境监测">
-              <a-row :gutter="[12,18]" style="padding: 12px 6%">
+              <a-row :gutter="[12,18]" style="padding: 12px">
                 <a-col style="color: #B3B3B3">
                   <div style="width: 50%;display: inline-block;text-align: center">
                     <span style="background-color: #73e6ac;display: inline-block;width: 14px;height: 14px;"></span>

src/components/life/parking/components/lifeParkConsumeChart.vue

@@ -21,7 +21,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       let option = {
-        color: ['#6FA8FE','#FFDF80','#FFB680','#62CC97','#66F2FF'],
+        color: ['#3AA7E6', '#4ACFB8','#F4955F','#9790f8','#f8797e'],
         tooltip: {
           trigger: 'item'
         },

src/components/life/parking/components/lifeParkTrendChart.vue

@@ -1,26 +1,16 @@
 <template>
-  <div class="myChart" ref="lifeParkTrendChart" :style="{height: height+'px'}">
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
 
   </div>
 </template>
 
 <script>
+import apiLifePark from "@/api/life/apiLifePark";
+
 export default {
   data() {
     return {
-
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.lifeParkTrendChart)
-      let option = {
+      option: {
         legend: {
           data: [
             '进入车辆数',
@@ -36,7 +26,7 @@ export default {
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          data: []
         },
         yAxis: [
           {
@@ -80,8 +70,8 @@ export default {
         ],
         series: [
           {
-            name: '进入车辆数',
-            data: [43, 57, 51, 42, 56, 19, 32, 18, 41, 20, 20, 37],
+            name: '离开车辆数',
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -89,26 +79,26 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#B0E5CB' // 0% 处的颜色
+                color: '#FFD7AC' // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
+            itemStyle: {
+              color: '#FDB456'
+            },
             lineStyle: {
-              color: "#62CC97",
+              color: "#FDB456",
               width: 1,
             },
-            itemStyle: {
-              color: '#62CC97'
-            },
             emphasis: {
               scale:1.5
             },
           },
           {
-            name: '离开车辆数',
-            data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
+            name: '进入车辆数',
+            data: [],
             type: 'line',
             stack: 'x',
             smooth: true,
@@ -116,26 +106,46 @@ export default {
             areaStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#FFD7AC' // 0% 处的颜色
+                color: '#B0E5CB' // 0% 处的颜色
               }, {
                 offset: 0.8,
                 color: '#ffffff' // 100% 处的颜色
               }], false),
             },
-            itemStyle: {
-              color: '#FDB456'
-            },
             lineStyle: {
-              color: "#FDB456",
+              color: "#62CC97",
               width: 1,
             },
+            itemStyle: {
+              color: '#62CC97'
+            },
             emphasis: {
               scale:1.5
             },
-          }
+          },
+
         ]
-      };
-      chart.setOption(option);
+      }
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiLifePark.getTrafficflowSituation({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['leave','getInto',])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/life/parking/components/lifeParkUnNormalChart.vue

@@ -21,7 +21,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       let option = {
-        color: ['#6FA8FE','#FFDF80','#FFB680','#62CC97','#66F2FF'],
+        color: ['#3AA7E6', '#4ACFB8','#F4955F','#9790f8','#f8797e'],
         tooltip: {
           trigger: 'item'
         },

src/components/life/parking/lifeParking.vue

@@ -79,7 +79,7 @@ export default {
       console.log(data)
     },
     getCoreData() {
-      apiLifePark.getCoreData(this.queryData).then(res=>{
+      apiLifePark.getCoreData(this.queryData).then(res => {
         this.coreData[0].num = res.list[0].value
         this.coreData[0].historyNum = res.list[0].compare
         this.coreData[1].num = res.list[1].value
@@ -97,59 +97,65 @@ export default {
 
 <template>
   <div class="lifeParking">
-   <div class="page-query-core">
-     <a-row>
-       <a-col>
-         <div class="lifeParking-query">
-           <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset" :search="search"></Query>
-         </div>
-       </a-col>
-       <a-col>
-         <div class="lifeParking-core">
-           <Card title="核心指标">
-             <CoreData :data-list="coreData"></CoreData>
-           </Card>
-         </div>
-       </a-col>
-     </a-row>
-   </div>
-    <a-row >
-      <a-col :span="18">
-        <div class="lifeParking-left">
-          <div class="lifeParking-trend">
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div class="lifeParking-query">
+            <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
+                   :search="search"></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div class="lifeParking-core">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]" >
+        <a-col :span="18">
+          <div class="lifeParking-trend ioc-card-content">
             <Card title="车流态势">
-              <LifeParkTrendChart :height="360"></LifeParkTrendChart>
+              <LifeParkTrendChart :height="350"></LifeParkTrendChart>
+            </Card>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="lifeParking-top ioc-card-content">
+            <Card title="空置车位">
+              <LifeParkingTopChart></LifeParkingTopChart>
             </Card>
           </div>
-          <div class="lifeParking-unNormal">
+        </a-col>
+        <a-col :span="9">
+          <div class="lifeParking-unNormal  ioc-card-content">
             <Card title="违停情况">
               <LifeParkUnNormalChart :height="390"></LifeParkUnNormalChart>
             </Card>
           </div>
-          <div class="lifeParking-consume">
+        </a-col>
+        <a-col :span="9">
+          <div class="lifeParking-consume  ioc-card-content">
             <Card title="占用车位数量">
               <LifeParkConsumeChart :height="390"></LifeParkConsumeChart>
             </Card>
           </div>
-        </div>
-      </a-col>
-      <a-col :span="6">
-        <div class="lifeParking-right">
-          <div class="lifeParking-top">
-            <Card title="空置车位">
-              <LifeParkingTopChart></LifeParkingTopChart>
-            </Card>
-          </div>
-          <div class="lifeParking-detail">
+        </a-col>
+        <a-col :span="6">
+          <div class="lifeParking-detail ioc-card-content">
             <Card title="车位详情">
               <LifeParkDetailTable></LifeParkDetailTable>
             </Card>
           </div>
-        </div>
-      </a-col>
+        </a-col>
+
 
+      </a-row>
+    </div>
 
-    </a-row>
 
   </div>
 </template>
@@ -161,51 +167,38 @@ export default {
   padding-bottom: 12px;
   display: inline-block;
   vertical-align: top;
+
   .lifeParking-query {
     width: 100%;
   }
+
   .lifeParking-core {
     width: 100%;
   }
-  .lifeParking-left {
-    margin-right: 12px;
-    > div {
-      margin-top: 12px;
-      border-radius: 4px;
-      overflow: hidden;
-    }
-    .lifeParking-trend {
-      background-color: #ffffff;
-      height: 390px;
-    }
-    .lifeParking-unNormal {
-      height: 390px;
-      display: inline-block;
-      vertical-align: top;
-      padding-right: 6px;
-      width: 50%;
-    }
-    .lifeParking-consume {
-      height: 390px;
-      display: inline-block;
-      vertical-align: top;
-      padding: 0 3px;
-      width: 50%;
-    }
+
+  .lifeParking-trend {
+    background-color: #ffffff;
+    height: 390px;
+    overflow: hidden;
   }
-  .lifeParking-right {
-    > div {
-      background-color: #ffffff;
-      margin-top: 12px;
-      border-radius: 4px;
-      overflow: hidden;
-    }
-    .lifeParking-top {
-      height: 390px;
-    }
-    .lifeParking-detail {
-      height: 390px;
-    }
+
+  .lifeParking-unNormal {
+    height: 390px;
+    overflow: hidden;
   }
+
+  .lifeParking-consume {
+    height: 390px;
+    overflow: hidden;
+  }
+
+  .lifeParking-top {
+    height: 390px;
+  }
+
+  .lifeParking-detail {
+    height: 390px;
+  }
+
 }
 </style>

src/components/life/restaurant/components/LifeRestPayChart.vue

@@ -19,7 +19,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       let option = {
-        color: ['#6FA8FE', '#66F2FF', '#FFB680', '#62CC97'],
+        color: ['#3AA7E6', '#4ACFB8','#F4955F','#9790f8'],
         tooltip: {
           trigger: 'item'
         },

src/components/life/restaurant/components/LifeRestProfitChart.vue

@@ -19,7 +19,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       let option = {
-        color: ['#80D4FF', '#A6A6FF','#FFDF80'],
+        color: ['#3AA7E6', '#4ACFB8','#F4955F'],
         tooltip: {
           trigger: 'item'
         },

src/components/life/restaurant/components/lifeRestConsumeChart.vue

@@ -5,23 +5,12 @@
 </template>
 
 <script>
+import apiLifeRestaurant from "@/api/life/apiLifeRestaurant";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.init()
-    })
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
         legend: {
           data: [
             '早餐人数',
@@ -111,7 +100,7 @@ export default {
         series: [
           {
             name: '早餐人数',
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '25%',
@@ -120,12 +109,12 @@ export default {
               color: 'rgba(180, 180, 180, 0.2)'
             },
             itemStyle: {
-              color: '#80D4FF'
+              color: '#3AA7E6'
             }
           },
           {
             name: '午餐人数',
-            data: [78, 154, 111, 70, 66, 88, 100],
+            data: [],
             type: 'bar',
             stack: 'A',
             yAxisIndex:1,
@@ -133,12 +122,12 @@ export default {
               color: 'rgba(180, 180, 180, 0.2)'
             },
             itemStyle: {
-              color: '#A6A6FF'
+              color: '#4ACFB8'
             }
           },
           {
             name: '晚餐人数',
-            data: [78, 154, 111, 70, 66, 88, 100],
+            data: [],
             type: 'bar',
             stack: 'A',
             yAxisIndex:1,
@@ -146,36 +135,57 @@ export default {
               color: 'rgba(180, 180, 180, 0.2)'
             },
             itemStyle: {
-              color: '#FFDF80'
+              color: '#F4955F'
             }
           },
           {
             name: '早餐单价',
-            data: [30, 17, 21, 32, 13, 18, 32],
+            data: [],
             type: 'line',
             itemStyle: {
-              color: '#72D0FF'
+              color: '#3AA7E6'
             }
           },
           {
             name: '午餐单价',
-            data: [22, 34, 25, 18, 35, 47, 54],
+            data: [],
             type: 'line',
             itemStyle: {
-              color: '#8080FF'
+              color: '#4ACFB8'
             }
           },
           {
             name: '晚餐单价',
-            data: [22, 14, 19, 32, 18, 33, 25],
+            data: [],
             type: 'line',
             itemStyle: {
-              color: '#FDB456'
+              color: '#F4955F'
             }
           }
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiLifeRestaurant.getConsumptionAnalysis({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['breakfast','lunch','dinner','breakfastPrice','lunchPrice','dinnerPrice'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/life/restaurant/components/lifeRestEatChart.vue

@@ -5,23 +5,12 @@
 </template>
 
 <script>
+import apiLifeRestaurant from "@/api/life/apiLifeRestaurant";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.init()
-    })
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option: {
         legend: {
           data: [
             '客流人数',
@@ -39,7 +28,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: []
         },
         yAxis: [
           {
@@ -109,7 +98,7 @@ export default {
         series: [
           {
             name: '客流人数',
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: [],
             type: 'bar',
             stack: 'A',
             yAxisIndex: 1,
@@ -118,12 +107,12 @@ export default {
               color: 'rgba(180, 180, 180, 0.2)'
             },
             itemStyle: {
-              color: '#6FA8FE'
+              color: '#3AA7E6'
             }
           },
           {
             name: '就餐人数',
-            data: [78, 154, 111, 70, 66, 88, 100],
+            data: [],
             type: 'bar',
             stack: 'A',
             yAxisIndex: 1,
@@ -131,12 +120,12 @@ export default {
               color: 'rgba(180, 180, 180, 0.2)'
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#4ACFB8'
             }
           },
           {
             name: '就餐人数占比',
-            data: [50, 55, 60, 18, 35, 47, 80],
+            data: [],
             yAxisIndex: 0,
             type: 'line',
             yAxis: 0,
@@ -145,8 +134,29 @@ export default {
             }
           }
         ]
-      };
-      chart.setOption(options);
+      },
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiLifeRestaurant.getMealAnalysis({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['passengerFlow','eat','proportion'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/life/restaurant/lifeRestaurant.vue

@@ -65,6 +65,12 @@ export default {
     LifeRestProfitChart,
     LifeRestPayChart,
   },
+  created() {
+    let app = this;
+    window.onresize = () => {
+      app.$forceUpdate();
+    }
+  },
   mounted() {
     this.init();
   },
@@ -90,7 +96,7 @@ export default {
         this.coreData[3].historyNum = res.list[3].compare
         this.coreData[4].content = res.worthAttention
       })
-    }
+    },
   }
 }
 </script>
@@ -116,22 +122,22 @@ export default {
     <a-row>
       <a-col :span="18">
         <div class="lifeRestaurant-left">
-          <div class="lifeRestaurant-eat">
+          <div class="lifeRestaurant-eat ioc-card-content">
             <Card title="用餐分析">
               <LifeRestEatChart :height="320"></LifeRestEatChart>
             </Card>
           </div>
-          <div class="lifeRestaurant-consume">
+          <div class="lifeRestaurant-consume ioc-card-content">
             <Card title="消费分析">
               <LifeRestConsumeChart :height="320"></LifeRestConsumeChart>
             </Card>
           </div>
-          <div class="lifeRestaurant-profit">
+          <div class="lifeRestaurant-profit ">
             <Card title="盈利分析">
               <LifeRestProfitChart :height="300"></LifeRestProfitChart>
             </Card>
           </div>
-          <div class="lifeRestaurant-pay">
+          <div class="lifeRestaurant-pay ">
             <Card title="支付分析">
               <LifeRestPayChart :height="300"></LifeRestPayChart>
             </Card>
@@ -140,12 +146,12 @@ export default {
       </a-col>
       <a-col :span="6">
         <div class="lifeRestaurant-right">
-          <div class="lifeRestaurant-top">
+          <div class="lifeRestaurant-top ioc-card-content">
             <Card title="受欢迎菜品" style="height: 350px ">
               <LifeRestTopMenu ></LifeRestTopMenu>
             </Card>
           </div>
-          <div class="lifeRestaurant-cookbook">
+          <div class="lifeRestaurant-cookbook ioc-card-content">
             <Card title="每日菜谱" style="height: 700px">
               <LifeRestDailyMenu ></LifeRestDailyMenu>
             </Card>

src/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue

@@ -5,21 +5,13 @@
 </template>
 
 <script>
+import apiLifeSupermarket from "@/api/life/apiLifeSupermarket";
+
 export default {
   data() {
     return {
-    }
-  },
-  props: {
-    height: Number
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let chart = this.$echarts.init(this.$refs.myChart);
-      let options = {
+      option:  {
+        color: ['#3AA7E6','#9790F8','#4ACFB8','#F4955F','#F76161'],
         legend: {
           data: [
             '上午消费总额',
@@ -39,7 +31,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+          data: []
         },
         yAxis: [
           {
@@ -127,7 +119,7 @@ export default {
         series: [
           {
             name: '上午消费总额',
-            data: [233, 209, 296, 148, 233, 395, 329],
+            data: [],
             type: 'bar',
             stack: 'A',
             barWidth: '15%',
@@ -135,26 +127,20 @@ export default {
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#A5A5FF'
-            }
           },
           {
             name: '下午消费总额',
-            data: [206, 247, 251, 108, 392, 339, 220],
+            data: [],
             type: 'bar',
             stack: 'A',
             yAxisIndex: 1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#81D5FF'
-            }
           },
           {
             name: '上午订单',
-            data: [42, 48, 30, 35, 63, 60, 64],
+            data: [],
             type: 'bar',
             stack: 'B',
             barWidth: '15%',
@@ -162,35 +148,45 @@ export default {
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#79F1E8'
-            }
           },
           {
             name: '下午订单',
-            data: [42, 48, 30, 35, 63, 60, 64],
+            data: [],
             type: 'bar',
             stack: 'B',
             yAxisIndex: 2,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             },
-            itemStyle: {
-              color: '#FFDD7E'
-            }
           },
           {
             name: '平均单价',
-            data: [31, 36, 18, 21, 73, 12, 59],
+            data: [],
             yAxisIndex:0,
             type: 'line',
-            itemStyle: {
-              color: '#FFB059'
-            }
           }
         ]
-      };
-      chart.setOption(options);
+      }
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      this.chart = chart;
+      chart.setOption(this.option)
+      this.getData()
+    },
+    getData() {
+      apiLifeSupermarket.getQuotientAnalysiss({}).then(res=>{
+        let data = this.$util.dataUtil.covertDataToEcharts(res, ['morningTotal','afternoonTotal','morningOrder','afternoonOrder','averageOrder'])
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
+      })
     }
   }
 }

src/components/life/supermarket/lifeSupermarket.vue

@@ -113,7 +113,7 @@ export default {
     <a-row >
       <a-col :span="18">
         <div class="lifeSupermarket-left">
-          <div class="lifeSupermarket-detail">
+          <div class="lifeSupermarket-detail ioc-card-content">
             <Card title="商超分析">
               <LifeSupermarketAnalysisChart :height="450"></LifeSupermarketAnalysisChart>
             </Card>
@@ -122,7 +122,7 @@ export default {
       </a-col>
       <a-col :span="6">
         <div class="lifeSupermarket-right">
-          <div class="lifeSupermarket-top">
+          <div class="lifeSupermarket-top ioc-card-content">
             <Card title="商品排行">
               <LifeSupermarketTopTable style="padding: 0 8px;"></LifeSupermarketTopTable>
             </Card>

src/components/scene/meeting/config/meetingRoomItem.vue

@@ -1,37 +1,38 @@
 <template>
   <div class="meetingRoomItem">
-    <div>
-      <div style="width: 70%;display: inline-block">
+    <a-row>
+      <a-col :span="24">
         <div class="meetingRoomItem-title">
           {{ obj.name }}
           <span style="font-size: 15px">{{ '[' + obj.timeRange[0] + '-' + obj.timeRange[1] + ']' }}</span>
         </div>
-
+      </a-col>
+      <a-col :span="16">
         <div class="meetingRoomItem-devices">
           <div class="meetingRoomItem-device" v-for="device in obj.devices" :key="device.id">
 
           </div>
         </div>
-
-      </div>
-      <div style="width: 30%;display: inline-block;vertical-align: top">
-        <div class="meetingRoomItem-state">
-          <span v-if="obj.status==1">会议中</span>
-          <span v-if="obj.status==2">闲置中</span>
-          <span v-if="obj.status==3">已预订</span>
+      </a-col>
+      <a-col :span="8">
+        <div style="">
+          <div class="meetingRoomItem-state">
+            <span v-if="obj.status==1">会议中</span>
+            <span v-if="obj.status==2">闲置中</span>
+            <span v-if="obj.status==3">已预订</span>
+          </div>
+          <div class="meetingRoomItem-num">
+            {{ obj.time }}
+          </div>
         </div>
-        <div class="meetingRoomItem-num">
-          {{ obj.time }}
+      </a-col>
+      <a-col >
+        <div class="meetingRoomItem-opr">
+          <a-button class="meetingRoomItem-opr-btn" @click="viewDetails">查看信息</a-button>
+          <a-button class="meetingRoomItem-opr-btn" @click="configMeeting">配置策略</a-button>
         </div>
-      </div>
-
-
-      <div class="meetingRoomItem-opr">
-        <a-button class="meetingRoomItem-opr-btn" @click="viewDetails">查看信息</a-button>
-        <a-button class="meetingRoomItem-opr-btn" @click="configMeeting">配置策略</a-button>
-      </div>
-
-    </div>
+      </a-col>
+    </a-row>
 
     <a-modal v-if="detailVisible" v-model="detailVisible" title="会议室详情" :width="1000" style="height: 650px;overflow-y: auto"
              :footer="null"
@@ -82,59 +83,54 @@ export default {
 .meetingRoomItem {
   width: 100%;
   height: 150px;
-  padding: 8px 12px 8px 0;
+  padding: 8px 12px 8px 15px;
   border-radius: 8px;
-  border: 1px solid #edf8fd;
-  border-left: 6px solid #006de4;
-  box-shadow: 2px 2px #edf8fd;
+  background-color: #f7fbff;
 
   .meetingRoomItem-title {
-    color: #6b9bea;
-    font-size: 18px;
-    padding-left: 8px;
+    color: #4D4D4D;
+    font-size: 16px;
+    padding-left: 3px;
+    height: 20%;
   }
 
   .meetingRoomItem-state {
-    margin-top: 8px;
-    color: #006de4;
-    width: 90%;
+    margin-top: 5%;
+    color: #3CC2AC;
     text-align: center;
   }
 
   .meetingRoomItem-num {
-    color: #006de4;
-    width: 90%;
+    color: #3CC2AC;
     text-align: center;
-    font-size: 70px;
-    font-family: numberMH, serif;
+    font-size: 30px;
   }
 
   .meetingRoomItem-devices {
-    margin-top: 8px;
-    width: 75%;
-    padding-left: 8px;
-
+    margin-top: 5%;
+    height: 40%;
     .meetingRoomItem-device {
       display: inline-block;
-      width: 30px;
-      height: 30px;
-      background-color: #cce2fa;
-      margin: 1px;
+      width: 20px;
+      height: 20px;
+      background: rgba(60,194,172,0.5);
+      margin: 5px 3px;
+      border-radius: 3px;
     }
   }
 
   .meetingRoomItem-opr {
-    position: absolute;
-    bottom: 0;
-    display: block;
     width: 100%;
+    height: 40%;
+    text-align: center;
 
     .meetingRoomItem-opr-btn {
-      height: 20px;
-      width: 45%;
-      display: inline-block;
-      margin: 0;
-      padding: 0;
+      width: 47%;
+      height: 30px;
+      background: #3CC2AC;
+      border-radius: 4px;
+      color: #ffffff;
+      font-size: 12px;
     }
   }
 }