From 9da510fb5c15ce246881244c08a371f9fc9f7579 Mon Sep 17 00:00:00 2001
From: jn517618 <jn517618@163.com>
Date: Tue, 9 Jan 2024 17:05:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |    2 +-
 src/api/energySources/energySources.js        |   18 +
 .../energySourcesProvince.js                  |   68 +
 src/views/energySources/component/all.vue     |    2 +-
 src/views/energySources/component/dosage.vue  |   69 +-
 .../component/equipmentAnalyze.vue            |   88 +-
 .../component/equipmentStatus.vue             |  410 ++-
 src/views/energySources/component/header.vue  |   20 +-
 src/views/energySources/component/load.vue    |  255 +-
 src/views/energySources/index.vue             |    4 +-
 .../component/emissionAll.vue                 |   33 +-
 .../component/header.vue                      |   24 +-
 .../component/intensity.vue                   |   44 +-
 .../energySourcesProvince/component/maps.vue  |   61 +-
 .../component/measure.vue                     |   48 +-
 .../component/pathMap.vue                     |  285 +-
 .../component/ringPercent.vue                 |   44 +-
 .../component/tendency.vue                    |   44 +-
 .../component/togetherPercent.vue             |   27 +-
 src/views/energySourcesProvince/index.vue     |   15 +-
 .../energySourcesProvince/json/mapStyle.js    | 2338 +++++++++++++++++
 vue.config.js                                 |    9 +
 22 files changed, 3521 insertions(+), 387 deletions(-)
 create mode 100644 src/api/energySourcesProvince/energySourcesProvince.js
 create mode 100644 src/views/energySourcesProvince/json/mapStyle.js

diff --git a/public/index.html b/public/index.html
index ed75b7a..9b61628 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,7 @@
   <script src="static/jssdk@3.6.211/jssdk/BimfaceSDKLoader@latest-release.js"
     type="text/javascript" charset="utf-8"></script>
     
-    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=7sBQjQEAEO5Cu4v9Fhclgs4ah3kgBuXA"></script>
+    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=7sBQjQEAEO5Cu4v9Fhclgs4ah3kgBuXA"></script>
   <!-- </script> -->
   <!-- <link rel="icon" href="<%= BASE_URL %>favicon.png"> -->
   <title>嘉禾县铸锻造工业互联网平台</title>
diff --git a/src/api/energySources/energySources.js b/src/api/energySources/energySources.js
index 9313666..483958b 100644
--- a/src/api/energySources/energySources.js
+++ b/src/api/energySources/energySources.js
@@ -53,3 +53,21 @@ export const getInstrumentActLoad = (query) => {
     params: query,
   });
 };
+
+// 设备日均负载
+export const getInstrumentDaylyLoad = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getInstrumentDaylyLoad",
+    method: "get",
+    params: query,
+  });
+};
+
+// 设备运行状态
+export const getInstrumentRunStatus = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getInstrumentRunStatus",
+    method: "get",
+    params: query,
+  });
+};
\ No newline at end of file
diff --git a/src/api/energySourcesProvince/energySourcesProvince.js b/src/api/energySourcesProvince/energySourcesProvince.js
new file mode 100644
index 0000000..f535ab9
--- /dev/null
+++ b/src/api/energySourcesProvince/energySourcesProvince.js
@@ -0,0 +1,68 @@
+import request from "@/router/axios";
+
+// 查询近半年光伏发电折合碳排放趋势
+export const getFindTrendList = (query) => {
+  return request({
+    url: "/api/blade-lims/carbonEmission/findTrendList",
+    method: "get",
+    params: query,
+  });
+};
+
+// 查询近半年月单位产值碳排放强度
+export const getFindIntensityList = (query) => {
+  return request({
+    url: "/api/blade-lims/carbonIntensity/findIntensityList",
+    method: "get",
+    params: query,
+  });
+};
+
+// 查询碳排放计划
+export const getTotalCarbonEmissions = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getTotalCarbonEmissions",
+    method: "get",
+    params: query,
+  });
+};
+
+// 
+export const getWeather = () => {
+  return request({
+    url: "/weather/v1",
+    method: "get",
+    params: {
+      district_id: 431024,
+      data_type: 'all',
+      ak: '7sBQjQEAEO5Cu4v9Fhclgs4ah3kgBuXA'
+    },
+  });
+};
+
+// 碳排放月总量同比
+export const getSixMonthCarbonYoy = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getSixMonthCarbonYoy",
+    method: "get",
+    params: query,
+  });
+};
+
+// 碳排放月总量环比
+export const getSixMonthCarbonQoq = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getSixMonthCarbonQoq",
+    method: "get",
+    params: query,
+  });
+};
+
+// 近6个月用电趋势
+export const getSixMonthElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getSixMonthElectricity",
+    method: "get",
+    params: query,
+  });
+};
\ No newline at end of file
diff --git a/src/views/energySources/component/all.vue b/src/views/energySources/component/all.vue
index 07899c9..1b52652 100644
--- a/src/views/energySources/component/all.vue
+++ b/src/views/energySources/component/all.vue
@@ -213,7 +213,7 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: "#616d87",
+              color: "#263764",
               type: "soild",
             },
           },
diff --git a/src/views/energySources/component/dosage.vue b/src/views/energySources/component/dosage.vue
index 2290d7a..ab4b581 100644
--- a/src/views/energySources/component/dosage.vue
+++ b/src/views/energySources/component/dosage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="box dosage">
-    <tit :title="'用量分析'" style="width:56%">
+    <tit :title="'用量分析'">
       <div class="tit-r">
         <span style="color: #0096FF;">监测明细</span>
         &nbsp;&nbsp;&nbsp;
@@ -19,24 +19,24 @@
         <el-table-column prop="name" label="部门/车间" show-overflow-tooltip>
           <template slot-scope="scope">
             <span style="color: #fff">{{ scope.row.name }}</span>
-
+            <span class="rank" v-if="scope.$index <= 2" :style="rankStyle(scope.$index)">TOP.{{ scope.$index + 1 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="address" label="总用电量">
+        <el-table-column prop="sum" label="总用电量">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#11F150' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
             <span style="color: #11F150">{{ scope.row.sum ? scope.row.sum : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="address" label="尖时段">
+        <el-table-column prop="jian" label="尖时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
             <span style="color: #FB5E2D">{{ scope.row.jian ? scope.row.jian : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="date" label="峰时段">
+        <el-table-column prop="feng" label="峰时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#FBB02D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address
@@ -44,14 +44,14 @@
             <span style="color: #FBB02D">{{ scope.row.feng ? scope.row.feng : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="address" label="平时段">
+        <el-table-column prop="ping" label="平时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
             <span style="color: #00A2FF">{{ scope.row.ping ? scope.row.ping : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="address" label="谷时段">
+        <el-table-column prop="gu" label="谷时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
@@ -59,7 +59,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="content-tit">部门用量分布</div>
+      <!-- <div class="content-tit">部门用量分布</div>
       <div class="legends">
         <div class="legends-item">
           <div class="legends-item-k" style="background-color: #7E5BFF;"></div>
@@ -77,8 +77,8 @@
           <div class="legends-item-k" style="background-color: #16F2A7;"></div>
           部门4
         </div>
-      </div>
-      <div id="mainDosage"></div>
+      </div> -->
+      <!-- <div id="mainDosage"></div> -->
     </div>
   </div>
 </template>
@@ -86,11 +86,11 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import {getPeriodElectricity} from "@/api/energySources/energySources"
+import { getPeriodElectricity } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      selectDay:'',
+      selectDay: '',
       tableData: []
     };
   },
@@ -104,17 +104,26 @@ export default {
       this.echartsInit()
     })
   },
-  computed:{
+  computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
   methods: {
-    getPeriodData(){
-      getPeriodElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDay}).then(res =>{
-        console.log('period =====>',res)
+    rankStyle(i) {
+      if (i === 0) {
+        return "background: #E73F3F"
+      } else if (i === 1) {
+        return "background: #F68E29"
+      } else {
+        return "background: #1AD0A3"
+      }
+    },
+    getPeriodData() {
+      getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay }).then(res => {
+        console.log('period =====>', res)
         this.tableData = res.data.data
       })
     },
-    changeDate(){
+    changeDate() {
       this.getPeriodData()
     },
     echartsInit() {
@@ -246,7 +255,8 @@ export default {
   background-color: transparent !important;
   border: 0 !important;
 }
-.dosage /deep/ .el-table td span{
+
+.dosage /deep/ .el-table td span {
   font-size: 0.14rem !important;
 }
 
@@ -265,9 +275,11 @@ export default {
   border-color: rgba($color: #fff, $alpha: 0.2) !important;
   height: 0.24rem !important;
 }
-.dosage /deep/ .el-input__icon{
-  line-height: 0.24rem !important; 
+
+.dosage /deep/ .el-input__icon {
+  line-height: 0.24rem !important;
 }
+
 .box {
   width: 11.18rem;
   height: 3.36rem;
@@ -310,8 +322,10 @@ export default {
       width: 2.3rem;
       display: flex;
       justify-content: space-between;
-      .legends-item{
+
+      .legends-item {
         position: relative;
+
         .legends-item-k {
           position: absolute;
           top: 0.06rem;
@@ -328,5 +342,14 @@ export default {
     height: 2.8rem;
     top: -0.24rem;
   }
-}
-</style>
+
+  .rank {
+    font-size: 0.14rem;
+    font-family: Acumin Variable Concept;
+    font-weight: normal;
+    color: #FFFFFF;
+    padding: 0.04rem 0.06rem;
+    border-radius: 0.08rem;
+    margin-left: 0.04rem;
+  }
+}</style>
diff --git a/src/views/energySources/component/equipmentAnalyze.vue b/src/views/energySources/component/equipmentAnalyze.vue
index 172e419..5df3561 100644
--- a/src/views/energySources/component/equipmentAnalyze.vue
+++ b/src/views/energySources/component/equipmentAnalyze.vue
@@ -2,7 +2,8 @@
   <div class="equipmentAnalyze box">
     <tit :title="'设备日均负载分析'">
       <div class="tit-r">选择月份：
-        <el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月" style="width: 1.2rem;">
+        <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
+          style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
         </el-date-picker>
       </div>
     </tit>
@@ -10,38 +11,38 @@
       :row-class-name="tableRowClassName">
       <el-table-column prop="name" label="设备名称">
         <template slot-scope="scope">
-          <span style="color: #fff">{{ scope.row.name }}%</span>
+          <span style="color: #fff">{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="address" label="空载">
+      <el-table-column prop="kongzai" label="空载">
         <template slot-scope="scope">
-          <span :style="{ color: scope.row.address > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
-            scope.row.address }}%</span>
+          <span :style="{ color: scope.row.kongzai > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
+            scope.row.kongzai }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="address" label="轻载">
+      <el-table-column prop="qingzai" label="轻载">
         <template slot-scope="scope">
-          <span :style="{ color: scope.row.address > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
-            scope.row.address }}%</span>
+          <span :style="{ color: scope.row.qingzai > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
+            scope.row.qingzai }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="date" label="正常">
+      <el-table-column prop="zhengchang" label="正常">
         <template slot-scope="scope">
-          <span :style="{ color: scope.row.address > 0 ? '#fff' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
-            scope.row.address
+          <span :style="{ color: scope.row.zhengchang > 0 ? '#fff' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
+            scope.row.zhengchang
           }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="address" label="过载">
+      <el-table-column prop="guozai" label="过载">
         <template slot-scope="scope">
-          <span :style="{ color: scope.row.address > 0 ? '#FBA62D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
-            scope.row.address }}%</span>
+          <span :style="{ color: scope.row.guozai > 0 ? '#FBA62D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
+            scope.row.guozai }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="address" label="重载">
+      <el-table-column prop="zhongzai" label="重载">
         <template slot-scope="scope">
-          <span :style="{ color: scope.row.address > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
-            scope.row.address }}%</span>
+          <span :style="{ color: scope.row.zhongzai > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
+            scope.row.zhongzai }}%</span>
         </template>
       </el-table-column>
     </el-table>
@@ -50,48 +51,39 @@
 
 <script>
 import tit from "./tit.vue";
+
+import { mapGetters } from "vuex";
+import {getInstrumentDaylyLoad} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      value2: "",
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: 0,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: 29,
-      }]
+      selectDay: "",
+      tableData: []
     };
   },
   components: {
     tit
   },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
+  },
   created() {
-
+    this.selectDay = this.$moment().format('YYYY-MM-DD')
+    this.getTotalData()
   },
   methods: {
+    changeDate(){
+      this.getTotalData()
+    },
+    getTotalData(){
+      getInstrumentDaylyLoad({manufacturerBrand:this.userInfo.dept_name,today:this.selectDay}).then(res =>{
+        this.tableData = res.data.data;
+        // this.yearNum = data.currentYear.toString().split('')
+        // this.monthNum = data.currentMonth.toString().split('')
+        // this.yesterdayNum = data.yesterday.toString().split('')
+        // this.todayNum = data.today.toString().split('')
+      })
+    },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
 
diff --git a/src/views/energySources/component/equipmentStatus.vue b/src/views/energySources/component/equipmentStatus.vue
index 3fe47d7..0175a06 100644
--- a/src/views/energySources/component/equipmentStatus.vue
+++ b/src/views/energySources/component/equipmentStatus.vue
@@ -9,6 +9,9 @@
 
 <script>
 import tit from "./tit.vue";
+
+import { mapGetters } from "vuex";
+import { getInstrumentRunStatus } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
@@ -19,15 +22,349 @@ export default {
   },
   created() {
     this.$nextTick(() => {
+      // this.getData()
       this.echartsInit()
     })
 
   },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+  },
   mounted() {
 
   },
   methods: {
+    getData() {
+      getInstrumentRunStatus({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
+        // this.tableData = res.data.data;
+        console.log(res.data.data)
+        // this.yearNum = data.currentYear.toString().split('')
+        // this.monthNum = data.currentMonth.toString().split('')
+        // this.yesterdayNum = data.yesterday.toString().split('')
+        // this.todayNum = data.today.toString().split('')
+      })
+    },
+    getLongestSubArray(obj) {
+      let longest = []; // 存放最长子数组的变量
+
+      for (let key in obj) {
+        if (Array.isArray(obj[key])) {
+          if (obj[key].length > longest.length) {
+            longest = obj[key];
+          }
+        }
+      }
+
+      return longest;
+    },
     echartsInit() {
+      let arr = [
+        {
+          "name": "浇筑风机",			//设备名称
+          "list": [
+            {
+              "time": "8:00",	//时间
+              "runStatus": "1"	//运行状态 1：运行 2：关机
+            },
+            {
+              "time": "10:41",
+              "runStatus": "2"
+            },
+            {
+              "time": "11:42",
+              "runStatus": "1"
+            },
+            {
+              "time": "11:52",
+              "runStatus": "1"
+            },
+            {
+              "time": "12:02",
+              "runStatus": "1"
+            },
+            {
+              "time": "12:46",
+              "runStatus": "1"
+            }
+          ]
+        },
+        {
+          "name": "炉台风机",
+          "list": [
+            {
+              "time": "8:00",	//时间
+              "runStatus": "1"	//运行状态 1：运行 2：关机
+            },
+            {
+              "time": "13:41",
+              "runStatus": "1"
+            },
+            {
+              "time": "13:42",
+              "runStatus": "1"
+            },
+            {
+              "time": "13:52",
+              "runStatus": "1"
+            },
+            {
+              "time": "14:02",
+              "runStatus": "2"
+            },
+            {
+              "time": "14:46",
+              "runStatus": "1"
+            }
+          ]
+        },
+        // {
+        //   "name": "车间总成",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "立床1",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "立床2",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "烘干箱",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "打磨风机",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "离心车间排风机",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "空压机3",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "空压机2",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // },
+        // {
+        //   "name": "空压机1",
+        //   "list": [
+        //     {
+        //       "time": "11:40",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:41",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:42",
+        //       "runStatus": "1"
+        //     },
+        //     {
+        //       "time": "11:46",
+        //       "runStatus": "1"
+        //     }
+        //   ]
+        // }
+      ]
+      let day8 = this.$moment().startOf('day').add(8, 'hours').valueOf();
+      let day20 = this.$moment().startOf('day').add(20, 'hours').valueOf();
+
+      let yAxisData = arr.map(r => r.name)
+      let source = arr.map(r => r.list)
+      let seriesArr = []
+
+      for (let i = 0; i < source[0].length; i++) {
+        let arr = []
+        source.forEach(e => {
+          arr.push(e[i])
+        })
+        seriesArr = [...seriesArr, arr]
+      }
+      let seriesData = []
+      seriesArr.forEach((e, idx) => {
+        let sdata = e.map(m => {
+          let y = this.$moment().format('yyyy-MM-DD')
+          let s = `${y} ${m.time}`
+          return {
+            value: this.$moment(`${y} ${m.time}`).valueOf(),
+            itemStyle: {
+              normal: {
+                color: m.runStatus == 2 ? "#0084FF" : '#44516d',
+              },
+            },
+            runStatus: m.runStatus
+          };
+        })
+        seriesData.push({
+          type: 'bar',
+          stack: 'Total',
+          barWidth: "14",
+          showBackground: false,
+          data: sdata,
+          // z: seriesArr.length - idx
+        })
+      })
+      let seriesDataF = seriesData[seriesData.length - 1].data
+      for (let k in seriesDataF) {
+        if (seriesDataF[k].runStatus == 1) {
+          seriesDataF[k].itemStyle.normal.color = '#0084FF'
+        }
+      }
+      console.log(seriesData)
+      // return {
+      // type: 'bar',
+      // stack: 'Total',
+      // barWidth: "14",
+      // showBackground: false,
+      // itemStyle: {
+      //   normal: {
+      //     color: "#44516d",
+      //   },
+      // },
+      // data: [1704675600000, '-'],
+      // z: 5
+      //     }
       const chartDom = document.getElementById('mainEquipmentStatus');
       const myChart = this.$echarts.init(chartDom);
       const option = {
@@ -47,62 +384,77 @@ export default {
         // },
         grid: {
           left: '0',
-          right: 30,
+          right: 0,
           top: '20',
           containLabel: true
         },
         xAxis: {
-          type: 'value',
-          axisLine: {
-            show: true
+          type: 'time',
+          min: day8,
+          max: day20,
+
+          axisLabel: {
+            formatter: (e) => {
+              return this.$moment(e).format('H');
+            },
+            // rotate: 30
           },
           splitLine: {
             show: false
-          }
+          },
+          axisTick: {
+            show: true,
+
+            inside: true,
+            lineStyle: {
+              color: "#9fabc1",
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#9fabc1",
+            },
+          },
         },
         yAxis: {
 
           type: 'category',
           splitLine: { show: false },
-          data: ['变压器1', '变压器2', '变压器3', '变压器4', '变压器5', '变压器6'],
-        },
-        series: [
-          {
-            name: 'Placeholder',
-            type: 'bar',
-            stack: 'Total',
-            itemStyle: {
-              borderColor: 'transparent',
-              color: 'transparent'
+          data: yAxisData,
+          axisTick: {
+            show: false,
+            inside: true,
+            lineStyle: {
+              color: "#9fabc1",
             },
-            emphasis: {
-              itemStyle: {
-                borderColor: 'transparent',
-                color: 'transparent'
-              }
+          },
+
+          axisLine: {
+            lineStyle: {
+              color: "#9fabc1",
             },
-            data: [0, 1700, 1400, 1200, 300, 0]
           },
+        },
+        series: [
           {
-            name: 'Life Cost',
             type: 'bar',
             stack: 'Total',
             barWidth: "14",
             showBackground: true,
-            label: {
-              show: false,
-              position: 'inside'
-            },
             itemStyle: {
               normal: {
-                color: "#0084FF",
+                color: "#44516d",
               },
             },
-            data: [2900, 1200, 300, 200, 900, 300]
-          }
+            z: -1,
+            data: ['-', '-'],
+          },
+          ...seriesData
         ]
 
       }
+      console.log(option.series)
       myChart.setOption(option);
     }
   }
diff --git a/src/views/energySources/component/header.vue b/src/views/energySources/component/header.vue
index 196e783..ef38ca0 100644
--- a/src/views/energySources/component/header.vue
+++ b/src/views/energySources/component/header.vue
@@ -17,25 +17,35 @@
 
     </div>
     <div class="htitle">
-      福顺机械实业公司能耗监测系统
+      {{ userInfo.dept_name }}实业公司能耗监测系统
     </div>
   </div>
 </template>
 
 <script>
 
+import { mapGetters } from "vuex";
 export default {
   data() {
     return {
-      time:''
+      time: '',
+      timeFun: null
     };
   },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
+  },
   created() {
-    setInterval(() =>{
+    this.timeFun = setInterval(() => {
       this.time = this.$moment().format('HH:mm:ss')
-    },1000)
+    }, 1000)
+    this.timeFun()
+  },
+  methods: {
+  },
+  beforeDestroyed() { 
+    clearInterval(this.timeFun)
   },
-  methods: {}
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/energySources/component/load.vue b/src/views/energySources/component/load.vue
index c1cb874..5cd9e01 100644
--- a/src/views/energySources/component/load.vue
+++ b/src/views/energySources/component/load.vue
@@ -11,10 +11,12 @@
     </tit>
     <div class="echartClass">
       <el-radio-group v-model="radio" class="radio">
-        <el-radio :label="3">日分析</el-radio>
-        <el-radio :label="6">周分析</el-radio>
+        <el-radio :label="0">日分析</el-radio>
+        <el-radio :label="1">周分析</el-radio>
       </el-radio-group>
-      <div id="mainLoad"></div>
+      <div id="mainLoadDay" v-if="!radio"></div>
+      <div id="mainLoadWeek" v-if="radio"></div>
+
     </div>
   </div>
 </template>
@@ -22,12 +24,12 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import {getDayElectricity,getWeekElectricity} from "@/api/energySources/energySources"
+import { getDayElectricity, getWeekElectricity } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      radio: 3,
-      selectDate:'',
+      radio: 0,
+      selectDate: '',
     };
   },
   components: {
@@ -36,29 +38,103 @@ export default {
   created() {
     this.selectDate = this.$moment().format('YYYY-MM-DD')
     this.$nextTick(() => {
-      this.getDayData()
-      this.getWeekData()
-      this.echartsInit()
+      if (this.radio) {
+
+        this.getWeekData()
+      } else {
+
+        this.getDayData()
+      }
+
     })
   },
-  computed:{
+  computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
+  watch: {
+    radio(v) {
+      this.$nextTick(() => {
+        if (v) {
+          this.getWeekData()
+        } else {
+          this.getDayData()
+        }
+      })
+    }
+  },
   methods: {
     // 获取日分析
-    getDayData(){
-      getDayElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
-        console.log('res ======>',res)
+    getDayData() {
+      getDayElectricity({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDate }).then(res => {
+        console.log('res ======>', res)
+        let data = res.data.data
+        let xAxisArr = Array.from({ length: 24 }, (_, index) => index + 1);
+        let seriesJson = {
+          jian: [],
+          feng: [],
+          ping: [],
+          gu: [],
+        }
+        // 尖 19-22 峰8-11 15-19 平7-8 11-15 22-23 谷 23-24 0-7 这是后端区分尖峰平谷的时间段
+        xAxisArr.map(r => {
+
+          if (data[r]) {
+            if ([20, 21, 22].includes(r)) {
+              seriesJson.jian.push(data[r])
+            } else {
+              seriesJson.jian.push(0)
+            }
+            if ([9, 10, 11, 16, 17, 18, 19].includes(r)) {
+              seriesJson.feng.push(data[r])
+            } else {
+              seriesJson.feng.push(0)
+            }
+            if ([8, 12, 13, 14, 15, 23].includes(r)) {
+              seriesJson.ping.push(data[r])
+            } else {
+              seriesJson.ping.push(0)
+            }
+            if ([1, 2, 3, 4, 5, 6, 7, 24].includes(r)) {
+              seriesJson.gu.push(data[r])
+            } else {
+              seriesJson.gu.push(0)
+            }
+          } else {
+            seriesJson.jian.push(0)
+            seriesJson.feng.push(0)
+            seriesJson.ping.push(0)
+            seriesJson.gu.push(0)
+          }
+
+        })
+        this.echartsInitDay(xAxisArr, seriesJson)
       })
+
     },
-    // 获取月分析
-    getWeekData(){
-      getWeekElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
-        console.log('res1 ====>',res)
+    // 获取周分析
+    getWeekData() {
+      getWeekElectricity({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDate }).then(res => {
+        console.log('res1 ====>', res)
+
+        let data = res.data.data
+        let xAxisArr = Object.keys(data)
+        let seriesJson = {
+          jian: [],
+          feng: [],
+          ping: [],
+          gu: [],
+        }
+        for (let k in data) {
+          seriesJson.jian.push(data[k].jian)
+          seriesJson.feng.push(data[k].feng)
+          seriesJson.ping.push(data[k].ping)
+          seriesJson.gu.push(data[k].gu)
+        }
+        this.echartsInitWeek(xAxisArr, seriesJson)
       })
     },
-    echartsInit() {
-      const chartDom = document.getElementById('mainLoad');
+    echartsInitDay(xAxisArr, seriesJson) {
+      const chartDom = document.getElementById('mainLoadDay');
       const myChart = this.$echarts.init(chartDom);
       const option = {
         // tooltip: {
@@ -92,6 +168,7 @@ export default {
           axisLine: {
             show: true
           },
+          
           splitLine: {
             show: true,
             lineStyle: {
@@ -101,7 +178,124 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1'],
+          data: xAxisArr,
+
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+            inside: true,
+            lineStyle: {
+              color: "#9fabc1",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#9fabc1",
+            },
+          },
+        },
+
+        series: [
+          {
+            name: '尖时段',
+            type: 'bar',
+            stack: 'total',
+            itemStyle: {
+              color: '#A45BFF'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: seriesJson.jian
+          },
+          {
+            name: '峰时段',
+            type: 'bar',
+            stack: 'total',
+            itemStyle: {
+              color: '#665EFF'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: seriesJson.feng
+          },
+          {
+            name: '平时段',
+            type: 'bar',
+            stack: 'total',
+            itemStyle: {
+              color: '#0078FF'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: seriesJson.ping
+          },
+          {
+            name: '谷时段',
+            type: 'bar',
+            stack: 'total',
+            itemStyle: {
+              color: '#10EFBD'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: seriesJson.gu
+          },
+        ]
+
+      }
+      myChart.setOption(option);
+    },
+    echartsInitWeek(xAxisArr, seriesJson) {
+      const chartDom = document.getElementById('mainLoadWeek');
+      const myChart = this.$echarts.init(chartDom);
+      const option = {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   },
+        //   formatter: function (params) {
+        //     var tar = params[1];
+        //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+        //   }
+        // },
+        grid: {
+          left: '0',
+          top: '40',
+          right: 0,
+          containLabel: true
+        },
+        legend: {
+          selectedMode: false,
+          right: 0,
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#263764",
+            },
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisArr,
 
           splitLine: {
             show: false,
@@ -119,7 +313,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [320, 0, 301, 334, 390, 330, 320]
+            data: seriesJson.jian
           },
           {
             name: '峰时段',
@@ -131,7 +325,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: seriesJson.feng
           },
           {
             name: '平时段',
@@ -143,7 +337,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [220, 182, 191, 234, 290, 330, 310]
+            data: seriesJson.ping
           },
           {
             name: '谷时段',
@@ -155,7 +349,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [150, 212, 201, 154, 190, 330, 410]
+            data: seriesJson.gu
           },
         ]
 
@@ -173,8 +367,9 @@ export default {
   border-color: rgba($color: #fff, $alpha: 0.2) !important;
   height: 0.24rem !important;
 }
-.load /deep/ .el-input__icon{
-  line-height: 0.24rem !important; 
+
+.load /deep/ .el-input__icon {
+  line-height: 0.24rem !important;
 }
 
 
@@ -217,13 +412,19 @@ export default {
   .echartClass {
     width: 100%;
     position: relative;
+
     .radio {
       position: absolute;
       top: 6px;
       left: 0;
       z-index: 999;
     }
-    #mainLoad{
+
+    #mainLoadDay {
+      height: 3.3rem;
+    }
+
+    #mainLoadWeek {
       height: 3.3rem;
     }
   }
diff --git a/src/views/energySources/index.vue b/src/views/energySources/index.vue
index d761932..f532958 100644
--- a/src/views/energySources/index.vue
+++ b/src/views/energySources/index.vue
@@ -8,9 +8,9 @@
         <dosage />
       </div>
       <div class="box-two">
-        <equipmentLoad />
+      <equipmentLoad />
         <equipmentStatus />
-        <equipmentAnalyze />
+          <equipmentAnalyze />
       </div>
       
 
diff --git a/src/views/energySourcesProvince/component/emissionAll.vue b/src/views/energySourcesProvince/component/emissionAll.vue
index cdc37e8..0677850 100644
--- a/src/views/energySourcesProvince/component/emissionAll.vue
+++ b/src/views/energySourcesProvince/component/emissionAll.vue
@@ -17,7 +17,7 @@
       碳排放计划量
     </div>
     <div class="font2">
-      12022
+      {{ jnjhl }}
       <span>t</span>
     </div>
     <div id="mainEmissionAll"></div>
@@ -26,10 +26,13 @@
 
 <script>
 import tit from "./tit.vue";
+
+import { getTotalCarbonEmissions } from "@/api/energySourcesProvince/energySourcesProvince"
 export default {
   data() {
     return {
-      num: 0
+      num: 0,
+      jnjhl: 0
     };
   },
   components: {
@@ -37,17 +40,20 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getData()
     })
-    let nums = 1223.45;
-    this.num = nums.toString().split('')
-
-  },
-  mounted() {
-
   },
   methods: {
-    echartsInit() {
+    getData() {
+      getTotalCarbonEmissions().then(res => {
+        const { ypfzb, jnzl, jnjhl } = res.data.data
+        this.jnjhl = jnjhl
+        this.num = jnzl.toString().split('')
+        this.echartsInit(ypfzb)//已排发占比
+      })
+    },
+    echartsInit(source) {
+      console.log(source)
       const chartDom = document.getElementById('mainEmissionAll');
       const myChart = this.$echarts.init(chartDom);
       const color = this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -188,14 +194,14 @@ export default {
               lineHeight: 40,
               borderRadius: 8,
               offsetCenter: [0, '-15%'],
-              fontSize: 24,
+              fontSize: 20,
               fontWeight: 'bolder',
               formatter: '{value} %',
               color: '#fff'
             },
             data: [
               {
-                value: 50
+                value: source
               }
             ]
           },
@@ -286,11 +292,12 @@ export default {
   }
 
   .font2 {
-    font-size: 0.4rem;
+    font-size: 0.36rem;
     font-family: Acumin Variable Concept;
     font-weight: bold;
     color: #FFFFFF;
     margin-top: 0.06rem;
+
     span {
       line-height: 10px;
       font-size: 0.2rem;
diff --git a/src/views/energySourcesProvince/component/header.vue b/src/views/energySourcesProvince/component/header.vue
index a9e8818..6110ea1 100644
--- a/src/views/energySourcesProvince/component/header.vue
+++ b/src/views/energySourcesProvince/component/header.vue
@@ -3,7 +3,7 @@
 
     <div class="box">
       <div>
-        {{ $moment().format('HH:mm:ss') }}
+        {{ time }}
       </div>
       <div>
         {{ $moment().format('yyyy/MM/DD') }}
@@ -24,15 +24,35 @@
 
 <script>
 
+import { getWeather } from "@/api/energySourcesProvince/energySourcesProvince"
+import { mapGetters } from "vuex";
+
 export default {
   data() {
     return {
+      time: '',
+      timesFun: null
     };
   },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+  },
   created() {
 
+    console.log('1111111111111')
+    console.log(this.axios, '1111111111111')
+    getWeather().then(res => {
+    })
+    this.timesFun = setInterval(() => {
+      this.time = this.$moment().format('HH:mm:ss')
+    }, 1000)
+    this.timesFun()
+  },
+  methods: {
+  },
+  beforeDestroyed() {
+    clearInterval(this.timesFun)
   },
-  methods: {}
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/energySourcesProvince/component/intensity.vue b/src/views/energySourcesProvince/component/intensity.vue
index 2169f55..a94a2f0 100644
--- a/src/views/energySourcesProvince/component/intensity.vue
+++ b/src/views/energySourcesProvince/component/intensity.vue
@@ -9,6 +9,9 @@
 
 <script>
 import tit from "./tit.vue";
+
+import { getFindIntensityList } from "@/api/energySourcesProvince/energySourcesProvince"
+
 export default {
   data() {
     return {
@@ -19,7 +22,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getData()
     })
 
   },
@@ -27,7 +30,22 @@ export default {
 
   },
   methods: {
-    echartsInit() {
+    getData() {
+      getFindIntensityList({ currentMonth: this.$moment().format('yyyy-MM')}).then(res => {
+        const datas = res.data.data
+        let monthData = datas.map(r => r.currentMonth)
+        monthData.sort()
+        let xAxisData = monthData.map(r => this.$moment(r).format('M') + '月')
+        let seriesData = datas.map(r => r.intensity)
+        seriesData[0] = {
+          value: seriesData[0], label: {
+            offset: [12, 0]
+          }
+        }
+        this.echartsInit(xAxisData, seriesData)
+      })
+    },
+    echartsInit(xAxisData, seriesData) {
       const chartDom = document.getElementById('mainIntensity');
       const myChart = this.$echarts.init(chartDom);
       const option = {
@@ -72,21 +90,7 @@ export default {
           {
             type: "category",
             boundaryGap: false,
-            data: [
-              // "0",
-              "1月",
-              "2月",
-              "3月",
-              "4月",
-              "5月",
-              "6月",
-              // "7月",
-              // "8月",
-              // "9月",
-              // "10月",
-              // "11月",
-              // "12月",
-            ],
+            data: xAxisData,
             axisLabel: {
               //y轴文字的配置
               textStyle: {
@@ -175,11 +179,7 @@ export default {
                 global: false, //  缺省为  false
               },
             },
-            data: [{
-              value: 18, label: {
-                offset: [12, 0]
-              }
-            }, 20, 15, 3022, 2225, 10, 15, 16, 18, 30, 20, 25, 30],
+            data: seriesData,
             // markPoint: {
             //   symbolSize: 40,
             //   itemStyle: {
diff --git a/src/views/energySourcesProvince/component/maps.vue b/src/views/energySourcesProvince/component/maps.vue
index 52b3635..a193279 100644
--- a/src/views/energySourcesProvince/component/maps.vue
+++ b/src/views/energySourcesProvince/component/maps.vue
@@ -8,9 +8,9 @@
           <img src="../../../../public/img/energySourcesProvince/maps2.png" v-else>
         </div>
         <div class="num-bottom">
-          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">14.34</span>
-          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">kg/万元</span>
-          <span>15.54</span>
+          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.thisYear }}</span>
+          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.unit }}</span>
+          <span>{{ item.lastYear }}</span>
           <span>上年度</span>
         </div>
       </div>
@@ -28,6 +28,8 @@
 
 <script>
 
+
+import { getTotalCarbonEmissions } from "@/api/energySourcesProvince/energySourcesProvince"
 import PathMap from "./pathMap";
 export default {
   data() {
@@ -36,15 +38,18 @@ export default {
       numArr: [
         {
           name: '碳排放计划量',
-          status: 1
+          status: 1,
+          unit: 'kg/万元'
         },
         {
           name: '碳排放总量',
-          status: 1
+          status: 1,
+          unit: 't'
         },
         {
           name: '碳减排总量',
-          status: 0
+          status: 0,
+          unit: 't'
         }
       ],
     };
@@ -53,8 +58,9 @@ export default {
     PathMap
   },
   created() {
+    this.getData()
+
 
-    this.refresh = false;
     // this.$nextTick(() => {
     //   this.echartsInit()
 
@@ -62,13 +68,6 @@ export default {
     // })
 
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.echartsInit()
-
-      this.refresh = true
-    })
-  },
   methods: {
     handler({ BMap, map }) {
       // console.log(BMap, map)
@@ -76,9 +75,21 @@ export default {
       // this.center.lat = 39.915
       // this.zoom = 15
     },
-    echartsInit() {
-
-
+    getData() {
+      getTotalCarbonEmissions().then(res => {
+        const { jnzl, qnzl, jnjhl, qnjhl, qnjpzl, jnjpzl } = res.data.data
+        this.numArr[0].thisYear = jnjhl
+        this.numArr[0].lastYear = qnjhl
+        jnjhl > qnjhl ? this.numArr[0].status = 0 : this.numArr[0].status = 1
+
+        this.numArr[1].thisYear = jnzl
+        this.numArr[1].lastYear = qnzl
+        jnzl > qnjhl ? this.numArr[1].status = 0 : this.numArr[1].status = 1
+
+        this.numArr[2].thisYear = jnjpzl
+        this.numArr[2].lastYear = qnjpzl
+        jnjpzl > qnjpzl ? this.numArr[2].status = 0 : this.numArr[2].status = 1
+      })
     },
     draw({ el, BMap, map }) {
       console.log(el)
@@ -129,7 +140,7 @@ export default {
       &>.num-bottom {
         width: 96%;
         height: 0.4rem;
-        line-height: 0.4rem;
+        // line-height: 0.4rem;
         overflow: hidden;
         margin-top: 0.1rem;
 
@@ -137,7 +148,7 @@ export default {
           font-size: 0.3rem;
           font-family: Acumin Variable Concept;
           font-weight: bold;
-          vertical-align: top;
+          vertical-align: -webkit-baseline-middle;
         }
 
         &>span:nth-child(2) {
@@ -178,12 +189,12 @@ export default {
 
     .model {
       position: absolute;
-      left: -2px;
-      bottom: 0;
-      width: 902px;
-      height: 54px;
-      border-top: 2px solid #044de5;
-      z-index: 6;
+      left: -0.03rem;
+      bottom: -0.12rem;
+      width: 9.02rem;
+      height: 0.66rem;
+      border-top: 0.02rem solid #044de5;
+      z-index: 20;
       background: #143074;
     }
   }
diff --git a/src/views/energySourcesProvince/component/measure.vue b/src/views/energySourcesProvince/component/measure.vue
index d6bca25..8220d41 100644
--- a/src/views/energySourcesProvince/component/measure.vue
+++ b/src/views/energySourcesProvince/component/measure.vue
@@ -5,7 +5,7 @@
     </tit>
     <div class="font-box">
       <div class="font1">碳减排总量</div>
-      <div class="font2">1114.59
+      <div class="font2">{{ jnjpzl }}
         <span>t</span>
       </div>
     </div>
@@ -13,21 +13,21 @@
       <div>
         <div>光伏发电</div>
         <div style="color: #63EEFF;">
-          599.59
+          {{ gffd }}
           <span>t</span>
         </div>
       </div>
       <div>
         <div>工艺优化</div>
         <div style="color: #6380FF;">
-          599.59
+          {{ gyyh }}
           <span>t</span>
         </div>
       </div>
       <div>
         <div>设备更换</div>
         <div style="color: #1AD0A3;">
-          599.59
+          {{ sbgh }}
           <span>t</span>
         </div>
       </div>
@@ -37,10 +37,19 @@
 </template>
 
 <script>
+
+import { getTotalCarbonEmissions } from "@/api/energySourcesProvince/energySourcesProvince"
 import tit from "./tit.vue";
 export default {
   data() {
     return {
+      jnjpzl: 0,
+      gffd: 0,
+      gffdzb: 0,
+      gyyh: 0,
+      gyyhzb: 0,
+      sbgh: 0,
+      sbghzb: 0,
     };
   },
   components: {
@@ -48,7 +57,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getData()
     })
 
   },
@@ -56,7 +65,20 @@ export default {
 
   },
   methods: {
-    echartsInit() {
+    getData() {
+      getTotalCarbonEmissions().then(res => {
+        const { jnjpzl, gffd, gffdzb, gyyh, gyyhzb, sbgh, sbghzb } = res.data.data
+        this.jnjpzl = jnjpzl
+        this.gffd = gffd //光伏发电
+        this.gffdzb = gffdzb //光伏发电占比
+        this.gyyh = gyyh //工艺优化
+        this.gyyhzb = gyyhzb //工艺优化占比
+        this.sbgh = sbgh //设备更换
+        this.sbghzb = sbghzb //设备更换占比
+        this.echartsInit(this.gffdzb, this.gyyhzb, this.sbghzb)
+      })
+    },
+    echartsInit(gffdzb, gyyhzb, sbghzb) {
       const chartDom = document.getElementById('mainMeasure');
       const myChart = this.$echarts.init(chartDom);
       const option = {
@@ -68,7 +90,7 @@ export default {
         grid: {
           top: "0",
           left: "0",
-          right: "10",
+          right: 0,
           bottom: "0",
           containLabel: true,
         },
@@ -118,24 +140,24 @@ export default {
             radius: ['40%', '50%'],
             label: {
               formatter: '{c}%',
-              fontSize: 16,
+              fontSize: 12,
               color: '#fff'
             },
             data: [
               {
-                value: 10, name: '设备更换',
+                value: sbghzb, name: '设备更换',
                 itemStyle: {
                   color: '#1AD0A3'
                 }
               },
               {
-                value: 70, name: '工艺优化',
+                value: gyyhzb, name: '工艺优化',
                 itemStyle: {
                   color: '#6380FF'
                 }
               },
               {
-                value: 20, name: '光伏发电',
+                value: gffdzb, name: '光伏发电',
                 itemStyle: {
                   color: '#63EEFF'
                 }
@@ -191,7 +213,7 @@ export default {
     }
 
     .font2 {
-      font-size: 0.4rem;
+      font-size: 0.36rem;
       font-family: Acumin Variable Concept;
       font-weight: bold;
       color: #FFFFFF;
@@ -254,7 +276,7 @@ export default {
     position: absolute;
     top: 0.68rem;
     right: 0.12rem;
-    width: 60%;
+    width: 280px;
     height: 2.4rem;
   }
 }
diff --git a/src/views/energySourcesProvince/component/pathMap.vue b/src/views/energySourcesProvince/component/pathMap.vue
index 865c21f..997b20d 100644
--- a/src/views/energySourcesProvince/component/pathMap.vue
+++ b/src/views/energySourcesProvince/component/pathMap.vue
@@ -34,7 +34,7 @@
 // console.log(Highmaps)
 
 // Highmaps(Highcharts);
-
+import { styleJson } from "../json/mapStyle.js"
 import { dateFormat } from "@/util/date";
 export const appKey = '69800851-4554-4EEC-8D12-E4211B952798';//轮子appkey
 export const key = '266843ed-5d4f-472c-beec-e5e50a114d47';
@@ -51,10 +51,11 @@ export default {
       // carList: carList,//车辆设备
       markList: [
         { lng: 112.37268, lat: 25.63787, name: "福顺机械实业公司" },
-        { lng: 112.37268, lat: 25.63787, name: "巨人机床实业公司" },
-        { lng: 112.37268, lat: 25.63787, name: "郴州雄建实业公司" },
+        { lng: 112.375261, lat: 25.63742, name: "巨人机床实业公司" },
+        { lng: 112.365047, lat: 25.630574, name: "郴州雄建实业公司" },
         { lng: 112.36587, lat: 25.63132, name: "众合实业公司" },
-        { lng: 112.37268, lat: 25.63787, name: "雄达实业公司" },
+        { lng: 112.372727, lat: 25.635608, name: "雄达实业公司" },
+        { lng: 112.373909, lat: 25.634179, name: "峰达实业公司" },
         { lng: 112.37275, lat: 25.63676, name: "伟铸机械实业公司" },
       ],//标注点记录
       polyline: null,//昨日轨迹
@@ -90,7 +91,7 @@ export default {
   methods: {
     //回到原中心点
     backMap() {
-      var point = new BMap.Point(118.880278, 35.649947);
+      var point = new BMapGL.Point(118.880278, 35.649947);
       this.infoShow = false;
       this.baiduMap.centerAndZoom(point, 12);
       if (this.polyline) {
@@ -100,17 +101,19 @@ export default {
       // this.baiduMap.closeInfoWindow();
     },
     initMap() {
-      var point = new BMap.Point(112.37558, 25.59342);
+      var point = new BMapGL.Point(112.37558, 25.59342);
       if (this.baiduMap) {
         this.baiduMap.centerAndZoom(point, 12);
       }
       else {
-        this.baiduMap = new BMap.Map('container');
+        this.baiduMap = new BMapGL.Map('container');
         this.baiduMap.centerAndZoom(point, 12);
         this.baiduMap.enableScrollWheelZoom(true);
         // var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
-        // this.baiduMap.addControl(new BMap.NavigationControl(opts));
-        this.baiduMap.setMapStyle({ style: 'midnight' });
+        // this.baiduMap.addControl(new BMapGL.NavigationControl(opts));
+        // this.baiduMap.setMapStyleV2({ style: 'midnight' });
+
+        var bdary = new BMapGL.Boundary();
         // this.baiduMap.setMapStyleV2({
         //   styleJson: styleJson
         // })
@@ -118,123 +121,149 @@ export default {
         // this.view = new mapvgl.View({
         //   map: this.baiduMap
         // });
-        var bdary = new BMap.Boundary();
-        bdary.get("郴州市嘉禾县", rs => {
-          var count = rs.boundaries.length;
+
+        // bdary.get("郴州市嘉禾县", rs => {
+        //   var count = rs.boundaries.length;
+        //   for (var i = 0; i < count; i++) {
+        //     var xyArr = rs.boundaries[i].split(';');
+        //     var ptArr = [];
+        //     for (var j = 0; j < xyArr.length; j++) {
+        //       var tmp = xyArr[j].split(',');
+        //       var pt = new BMapGL.Point(tmp[0], tmp[1]);
+        //       ptArr.push(pt);
+        //     }
+        //     // var mapmask = new BMapGL.MapMask(ptArr, {
+        //     //   isBuildingMask: true,
+        //     //   isPoiMask: true,
+        //     //   isMapMask: true,
+        //     //   showRegion: 'inside',
+        //     //   topFillColor: '#5679ea',
+        //     //   topFillOpacity: 0.5,
+        //     //   sideFillColor: '#5679ea',
+        //     //   sideFillOpacity: 0.9
+        //     // });
+        //     // this.baiduMap.addOverlay(mapmask);
+        //     var border = new BMapGL.Polyline(ptArr, {
+        //       strokeColor: '#0e94eb',
+        //       strokeWeight: 3,
+        //       strokeOpacity: 1
+        //     });
+        //     this.baiduMap.addOverlay(border);
+        //     // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
+        //     // this.baiduMap.addOverlay(ply);  //添加覆盖物
+        //   }
+        // })
+        this.baiduMap.centerAndZoom(point, 10);
+        this.baiduMap.setTilt(50);
+        this.baiduMap.enableScrollWheelZoom();
+        bdary.get('郴州市嘉禾县', (rs) => {
+          var count = rs.boundaries.length; //行政区域的点有多少个
+          var pointArray = [];
           for (var i = 0; i < count; i++) {
-            var xyArr = rs.boundaries[i].split(';');
-            var ptArr = [];
-            for (var j = 0; j < xyArr.length; j++) {
-              var tmp = xyArr[j].split(',');
-              var pt = new BMap.Point(tmp[0], tmp[1]);
-              ptArr.push(pt);
+            var path = [];
+            var str = rs.boundaries[i].replace(' ', '');
+            var points = str.split(';');
+            for (var j = 0; j < points.length; j++) {
+              var lng = points[j].split(',')[0];
+              var lat = points[j].split(',')[1];
+              path.push(new BMapGL.Point(lng, lat));
             }
-            // var mapmask = new BMap.MapMask(ptArr, {
-            //   isBuildingMask: true,
-            //   isPoiMask: true,
-            //   isMapMask: true,
-            //   showRegion: 'inside',
-            //   topFillColor: '#5679ea',
-            //   topFillOpacity: 0.5,
-            //   sideFillColor: '#5679ea',
-            //   sideFillOpacity: 0.9
-            // });
-            // this.baiduMap.addOverlay(mapmask);
-            var border = new BMap.Polyline(ptArr, {
-              strokeColor: '#0e94eb',
-              strokeWeight: 3,
-              strokeOpacity: 1
+            var prism = new BMapGL.Prism(path, 5000, {
+              topFillColor: '#5679ea',
+              topFillOpacity: 0.5,
+              sideFillColor: '#5679ea',
+              sideFillOpacity: 0.9
+
             });
-            this.baiduMap.addOverlay(border);
-            // var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
-            // this.baiduMap.addOverlay(ply);  //添加覆盖物
+            this.baiduMap.addOverlay(prism);
           }
         })
+
+       
+      
+        this.baiduMap.setMapStyleV2({ styleJson: styleJson });
         this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
         this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
-        let lng = '112.37268';
-        let lat = '25.63787';
-        let pt = new BMap.Point(lng, lat);
-        // {
-        //   icon: myIcon
-        // }
-        var marker = new BMap.Marker(pt)
-
-        this.baiduMap.addOverlay(marker);
-        var opts = {
-          width: 10,     // 信息窗口宽度
-          height: 10,     // 信息窗口高度
-          title: "", // 信息窗口标题
-          message: ""
-        };
-
-        var sContent = `
+        this.markList.map(r => {
+          let lng = r.lng;
+          let lat = r.lat;
+          let pt = new BMapGL.Point(lng, lat);
+
+          // {
+          //   icon: myIcon
+          // }
+          var marker = new BMapGL.Marker(pt)
+
+          this.baiduMap.addOverlay(marker);
+
+          var sContent = `
         <div class="mapslabel">
           <div class="mapslabel-t">
             <div class="mapslabel-t-img"></div>
-            复制
+            ${r.name}
           </div>
           <div class="mapslabel-b">
             <div>
               <div>用电量</div>
               <div class="mapslabel-b-font">111</div>
-              <span style="margin-top:10px;display: inline-block;float: left;">kw·h</span>
+              <span style="margin-top:0.08rem;display: inline-block;float: left;">kw·h</span>
             </div>
             <div>
               <div>碳排放量</div>
               <div class="mapslabel-b-font">1111</div>
-              <span style="margin-top:10px;display: inline-block;float: left;">t</span>
+              <span style="margin-top:0.08rem;display: inline-block;float: left;">t</span>
             </div>
           </div>
         </div>
         `;
-        // 将标注添加到地图
-        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象 
-        marker.addEventListener("click", function () {
-          console.log(1)
-          this.openInfoWindow(infoWindow, point); //开启信息窗口
-        });
-        var style_map = [{
-          // 地图背景
-          "featureType": "land",
-          "elementType": "all",
-          "stylers": {
-            "color": "#0b2555",
-            "lightness": -1
-          }
-        }, {
-          // 水路背景
-          "featureType": "water",
-          "elementType": "all",
-          "stylers": {
-            "color": "#0b2555",
-            "lightness": -1
-          }
-        }, {
-          //绿地背景
-          "featureType": "green",
-          "elementType": "all",
-          "stylers": {
-            "color": "#0b2555",
-            "lightness": -1
-          }
-        }, {
-          //教育地区
-          "featureType": "education",
-          "elementType": "all",
-          "stylers": {
-            "color": "#0b2555",
-            "lightness": -1
-          }
-        }]
+          // 将标注添加到地图
+          var infoWindow = new BMapGL.InfoWindow(sContent);  // 创建信息窗口对象 
+          marker.addEventListener("click", function () {
+            this.openInfoWindow(infoWindow, point); //开启信息窗口
+          });
+        })
+
+        // var style_map = [{
+        //   // 地图背景
+        //   "featureType": "land",
+        //   "elementType": "all",
+        //   "stylers": {
+        //     "color": "#0b2555",
+        //     "lightness": -1
+        //   }
+        // }, {
+        //   // 水路背景
+        //   "featureType": "water",
+        //   "elementType": "all",
+        //   "stylers": {
+        //     "color": "#0b2555",
+        //     "lightness": -1
+        //   }
+        // }, {
+        //   //绿地背景
+        //   "featureType": "green",
+        //   "elementType": "all",
+        //   "stylers": {
+        //     "color": "#0b2555",
+        //     "lightness": -1
+        //   }
+        // }, {
+        //   //教育地区
+        //   "featureType": "education",
+        //   "elementType": "all",
+        //   "stylers": {
+        //     "color": "#0b2555",
+        //     "lightness": -1
+        //   }
+        // }]
         //将样式加载地图中
         // this.baiduMap.setMapStyleV2({ styleJson: eval("style_map") });
 
 
         // let n = '112.37525'
         // let a = '25.63730'
-        // let p = new BMap.Point(n, a);
-        // var markers = new BMap.Marker(p)
+        // let p = new BMapGL.Point(n, a);
+        // var markers = new BMapGL.Marker(p)
         // this.baiduMap.addOverlay(markers);
         // markers.addEventListener("click", function () {
         //   console.log(1)
@@ -244,12 +273,7 @@ export default {
       }
 
     },
-    // 将标注添加到地图
-    addMarker() {
-      let arr = [
 
-      ]
-    },
     // handleEvent() {
     //   console.log('addEventListener');
     //   this.carList.map((item, index) => {
@@ -283,13 +307,13 @@ export default {
     //   // let carInfo = res1.Data;
     //   lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
     //     // 创建小车图标
-    //     // var myIcon = new BMap.Icon(require("@/assets/images/car.png"), new BMap.Size(25, 25));
+    //     // var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
     //     lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
     //       // 创建Marker标注，使用小车图标
     //       let lng = res.Data.BaiduLng;
     //       let lat = res.Data.BaiduLat;
-    //       let pt = new BMap.Point(lng, lat);
-    //       var marker = new BMap.Marker(pt, {
+    //       let pt = new BMapGL.Point(lng, lat);
+    //       var marker = new BMapGL.Marker(pt, {
     //         icon: myIcon
     //       });
     //       // 将标注添加到地图
@@ -315,7 +339,7 @@ export default {
     //       //                   <div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
     //       //                   <div style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <div style="display: inline-block;width:0.88rem;border-radius: 100px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.16rem;font-weight:bold;padding:0.04rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
     //       //               </div>`;
-    //       // let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
+    //       // let infoWindow = new BMapGL.InfoWindow(sContent, { width: 367, height: 220 });
     //       // // marker添加点击事件
     //       // infoWindow.addEventListener('open', () => {
     //       //   document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -342,7 +366,7 @@ export default {
     // },
     //信息窗口
     // openWindow(sContent, pt, DeviceNumber) {
-    //   let infoWindow = new BMap.InfoWindow(sContent);
+    //   let infoWindow = new BMapGL.InfoWindow(sContent);
     //   // marker添加点击事件
     //   infoWindow.addEventListener('open', () => {
     //     document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
@@ -354,7 +378,7 @@ export default {
     //   lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
     //     let lng = res.Data.BaiduLng;
     //     let lat = res.Data.BaiduLat;
-    //     let pt = new BMap.Point(lng, lat);
+    //     let pt = new BMapGL.Point(lng, lat);
     //     this.infoShow = false;
     //     this.baiduMap.centerAndZoom(pt, 18);
     //   })
@@ -388,28 +412,28 @@ export default {
     //     }
     //     let point = [];
     //     res.Data.Locations.map(item => {
-    //       point.push(new BMap.Point(item.Lng, item.Lat));
+    //       point.push(new BMapGL.Point(item.Lng, item.Lat));
     //     });
     //     if (this.polyline) {
     //       this.baiduMap.removeOverlay(this.polyline);
     //       this.polyline = null;
     //     }
-    //     this.polyline = new BMap.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
+    //     this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
     //     this.baiduMap.addOverlay(this.polyline);
     //     //终点标注maker
     //     if (this.endPointMarker) {
     //       this.baiduMap.removeOverlay(this.endPointMarker);
     //       this.endPointMarker = null;
     //     }
-    //     // var myIcon = new BMap.Icon(require("@/assets/images/end_point_icon.png"), new BMap.Size(37, 44));
-    //     // this.endPointMarker = new BMap.Marker(point[point.length-1], {
+    //     // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
+    //     // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
     //     //     icon: myIcon
     //     // });
     //     // console.log('最后一个坐标',point[point.length-1])
     //     // this.baiduMap.addOverlay(this.endPointMarker);
     //     this.baiduMap.centerAndZoom(point[0], 15);
     //     this.baiduMap.closeInfoWindow();
-    //     // this.polyline = new BMap.Polyline(point, {
+    //     // this.polyline = new BMapGL.Polyline(point, {
     //     //   strokeColor: '#F5533D',
     //     //   strokeWeight: 5,
     //     //   strokeOpacity: 1,
@@ -443,29 +467,32 @@ export default {
   background: transparent !important;
 }
 
-.BMap_pop {
+.BMap_bubble_pop {
   width: 2.5rem !important;
   height: 1.26rem !important;
   background: url(../../../../public/img/energySourcesProvince/map3.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  margin: 160px 0 0 138px;
+  margin: 1.78rem 0 0 1.24rem;
   box-sizing: border-box;
+  border: 0 !important;
+  background-color: transparent !important;
+  border-radius: 0.1rem;
 }
 
 
 .mapslabel {
   width: 2.5rem !important;
   height: 1.26rem !important;
-  padding-left: 20px;
-  margin-top: -4px;
+  padding-left: 0.26rem;
+  margin-top: 0.1rem;
 }
 
 .mapslabel-t {
   width: 2rem;
   height: 0.32rem;
   line-height: 0.32rem;
-  margin-bottom: 14px;
+  margin-bottom: 0.14rem;
   font-size: 0.18rem;
   font-family: Microsoft YaHei;
   font-weight: bold;
@@ -496,13 +523,13 @@ export default {
 .mapslabel-b .mapslabel-b-font {
   font-size: 0.24rem;
   font-family: Acumin Variable Concept;
-  margin-top: 0.06rem;
+  margin-top: 0.04rem;
   float: left;
 }
 
 
 
-.BMap_pop .BMap_center {
+.BMap_bubble_pop .BMap_center {
   /* width: 281px !important;
     height: 100px !important;
     z-index: 99 !important; */
@@ -511,35 +538,35 @@ export default {
   display: none !important;
 }
 
-.BMap_pop>img {
+.BMap_bubble_pop>img {
   display: none;
 }
 
-.BMap_pop>div:nth-child(1) {
+.BMap_bubble_pop>div:nth-child(1) {
   display: none !important;
 }
 
-.BMap_pop>div:nth-child(2) {
+/* .BMap_bubble_pop>div:nth-child(2) {
   display: none !important;
-}
+} */
 
-.BMap_pop>div:nth-child(3) {
+.BMap_bubble_pop>div:nth-child(3) {
   display: none !important;
 }
 
-.BMap_pop>div:nth-child(5) {
+.BMap_bubble_pop>div:nth-child(5) {
   display: none !important;
 }
 
-.BMap_pop>div:nth-child(6) {
+.BMap_bubble_pop>div:nth-child(6) {
   display: none !important;
 }
 
-.BMap_pop>div:nth-child(7) {
+.BMap_bubble_pop>div:nth-child(7) {
   display: none !important;
 }
 
-.BMap_pop>div:nth-child(8) {
+.BMap_bubble_pop>div:nth-child(8) {
   display: none !important;
 }
 
diff --git a/src/views/energySourcesProvince/component/ringPercent.vue b/src/views/energySourcesProvince/component/ringPercent.vue
index f23370f..9248495 100644
--- a/src/views/energySourcesProvince/component/ringPercent.vue
+++ b/src/views/energySourcesProvince/component/ringPercent.vue
@@ -9,6 +9,7 @@
 
 <script>
 import tit from "./tit.vue";
+import { getSixMonthCarbonQoq } from "@/api/energySourcesProvince/energySourcesProvince"
 export default {
   data() {
     return {
@@ -19,7 +20,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getData()
     })
 
   },
@@ -27,7 +28,35 @@ export default {
 
   },
   methods: {
-    echartsInit() {
+    getData() {
+      getSixMonthCarbonQoq().then(res => {
+        const data = res.data.data
+        const sortedKeys = Object.keys(data).sort()
+        // let monthData = data.map(r => Object.keys(r)[0])
+        // console.log(monthData, 'monthData')
+        
+        let json = {}
+        
+        sortedKeys.forEach(e => {
+          json[e] = data[e]
+        })
+        // let yAxisData = sortedKeys.map(r => this.$moment(r).format('M') + '月')
+        // ,
+        //       let arr = []
+        //       for(let k in json){
+        //         arr.push({
+        //           {
+        //         value: 12, label: { position: 'right' },
+        //         itemStyle: {
+        //           color: "#63D5FF"
+        //         }
+        //       }
+        //         })
+        //       }
+        this.echartsInit(yAxisData)
+      })
+    },
+    echartsInit(yAxisData) {
       const chartDom = document.getElementById('mainRingPercent');
       const myChart = this.$echarts.init(chartDom);
       const option = {
@@ -66,14 +95,7 @@ export default {
           axisLabel: { show: false },
           axisTick: { show: false },
           splitLine: { show: false },
-          data: [
-            "1月",
-            "2月",
-            "3月",
-            "4月",
-            "5月",
-            "6月",
-          ]
+          data: yAxisData
         },
         series: [
           {
@@ -143,7 +165,7 @@ export default {
   position: absolute;
   bottom: 0.24rem;
   left: 4.94rem;
-  z-index: 9;
+  z-index: 29;
 
   .tit-r {
     font-size: 0.14rem;
diff --git a/src/views/energySourcesProvince/component/tendency.vue b/src/views/energySourcesProvince/component/tendency.vue
index ce95523..eee63d1 100644
--- a/src/views/energySourcesProvince/component/tendency.vue
+++ b/src/views/energySourcesProvince/component/tendency.vue
@@ -9,6 +9,8 @@
 
 <script>
 import tit from "./tit.vue";
+
+import { getFindTrendList } from "@/api/energySourcesProvince/energySourcesProvince"
 export default {
   data() {
     return {
@@ -19,7 +21,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getData()
     })
 
   },
@@ -27,7 +29,22 @@ export default {
 
   },
   methods: {
-    echartsInit() {
+    getData() {
+      getFindTrendList({ currentMonth: this.$moment().format('yyyy-MM') }).then(res => {
+        const datas = res.data.data
+        let monthData = datas.map(r => r.currentMonth)
+        monthData.sort()
+        let xAxisData = monthData.map(r => this.$moment(r).format('M') + '月')
+        let seriesData = datas.map(r => r.emissions)
+        seriesData[0] = {
+          value: seriesData[0], label: {
+            offset: [12, 0]
+          }
+        }
+        this.echartsInit(xAxisData, seriesData)
+      })
+    },
+    echartsInit(xAxisData, seriesData) {
       const chartDom = document.getElementById('mainTendency');
       const myChart = this.$echarts.init(chartDom);
       const option = {
@@ -72,21 +89,7 @@ export default {
           {
             type: "category",
             boundaryGap: false,
-            data: [
-              // "0",
-              "1月",
-              "2月",
-              "3月",
-              "4月",
-              "5月",
-              "6月",
-              // "7月",
-              // "8月",
-              // "9月",
-              // "10月",
-              // "11月",
-              // "12月",
-            ],
+            data: xAxisData,
             axisLabel: {
               //y轴文字的配置
               textStyle: {
@@ -175,11 +178,7 @@ export default {
                 global: false, //  缺省为  false
               },
             },
-            data: [{
-              value: 18, label: {
-                offset: [12, 0]
-              }
-            }, 20, 15, 3022, 2225, 10, 15, 16, 18, 30, 20, 25, 30],
+            data: seriesData,
             // markPoint: {
             //   symbolSize: 40,
             //   itemStyle: {
@@ -212,6 +211,7 @@ export default {
   right: 0.24rem;
 
   z-index: 9;
+
   .tit-r {
     font-size: 0.14rem;
     color: rgba($color: #fff, $alpha: 0.4);
diff --git a/src/views/energySourcesProvince/component/togetherPercent.vue b/src/views/energySourcesProvince/component/togetherPercent.vue
index 811165f..a3b7e4a 100644
--- a/src/views/energySourcesProvince/component/togetherPercent.vue
+++ b/src/views/energySourcesProvince/component/togetherPercent.vue
@@ -9,6 +9,7 @@
 
 <script>
 import tit from "./tit.vue";
+import { getSixMonthCarbonYoy } from "@/api/energySourcesProvince/energySourcesProvince"
 export default {
   data() {
     return {
@@ -19,7 +20,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      this.echartsInit()
+      // this.getData()
     })
 
   },
@@ -27,6 +28,16 @@ export default {
 
   },
   methods: {
+    getData() {
+      getSixMonthCarbonYoy().then(res => {
+        const data = res.data.data
+        console.log(data)
+        let monthData = data.map(r => Object.keys(r)[0])
+        console.log(monthData, 'monthData')
+        monthData.sort()
+        let xAxisData = monthData.map(r => this.$moment(r).format('M') + '月')
+      })
+    },
     echartsInit() {
       const chartDom = document.getElementById('mainTogetherPercent');
       const myChart = this.$echarts.init(chartDom);
@@ -107,6 +118,18 @@ export default {
               // "11月",
               // "12月",
             ],
+            axisTick: {
+              show: true,
+              inside: true,
+              lineStyle: {
+                color: "#9fabc1",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#9fabc1",
+              },
+            },
           },
         ],
         yAxis: [
@@ -222,7 +245,7 @@ export default {
   position: absolute;
   bottom: 0.24rem;
   right: 4.94rem;
-  z-index: 9;
+  z-index: 29;
 
   .tit-r {
     font-size: 0.14rem;
diff --git a/src/views/energySourcesProvince/index.vue b/src/views/energySourcesProvince/index.vue
index 3bf4058..5f88e33 100644
--- a/src/views/energySourcesProvince/index.vue
+++ b/src/views/energySourcesProvince/index.vue
@@ -19,15 +19,6 @@
 </template>
 
 <script>
-// import MonitorTitle from "./components/MonitorTitle.vue";
-import {
-  defaultLocation11,
-  defaultLocation1,
-  floorList11,
-  floorList12,
-  floorList1,
-} from "@/const/monitoring/monitoring.js";
-import { detail } from "@/api/system/param.js";
 import Header from "./component/header.vue";
 import emissionAll from "./component/emissionAll.vue";
 import measure from "./component/measure.vue";
@@ -38,8 +29,8 @@ import ringPercent from "./component/ringPercent.vue";
 import togetherPercent from "./component/togetherPercent.vue";
 import intensity from "./component/intensity.vue";
 import maps from "./component/maps.vue";
-import { getEntrustDay, getDataAcquisition } from "@/api/monitoring/monitoring";
 import { setRemPc } from "@/util/util";
+
 export default {
   data() {
     return {
@@ -62,7 +53,7 @@ export default {
       setRemPc();
       window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法
     })
-
+    this.getData()
   },
   destroyed() {
     document.getElementsByTagName('html')[0].style.fontSize = 'unset';
@@ -76,7 +67,7 @@ export default {
     },
   },
   methods: {
-
+  
   },
 };
 </script>
diff --git a/src/views/energySourcesProvince/json/mapStyle.js b/src/views/energySourcesProvince/json/mapStyle.js
new file mode 100644
index 0000000..a197c58
--- /dev/null
+++ b/src/views/energySourcesProvince/json/mapStyle.js
@@ -0,0 +1,2338 @@
+export const styleJson = [{
+  "featureType": "background",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "land",
+  "elementType": "geometry",
+  "stylers": {
+      "color": "#061945ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "building",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#f2e4c6ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "building",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#e3d2adff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "water",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "water",
+  "elementType": "geometry",
+  "stylers": {
+      "color": "#0077b6ff",
+      "visibility": "off"
+  }
+}, {
+  "featureType": "country",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "city",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "continent",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "village",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "town",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "district",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "districtlabel",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "districtlabel",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "poilabel",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#ffffffff",
+      "visibility": "on",
+      "weight": 10
+  }
+}, {
+  "featureType": "poilabel",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#bf895fff",
+      "visibility": "on",
+      "weight": 0,
+      "opacity": "00"
+  }
+}, {
+  "featureType": "poilabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "scenicspotslabel",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#0077b6ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "scenicspotslabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "transportationlabel",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#0077b6ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "transportationlabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "airportlabel",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "airportlabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "green",
+  "elementType": "geometry",
+  "stylers": {
+      "color": "#061945ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "district",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "city",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "country",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "continent",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "town",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "village",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "town",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "city",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "railway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "highwaysign",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "nationalwaysign",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "nationalwaysign",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "provincialwaysign",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "provincialwaysign",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "tertiarywaysign",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "tertiarywaysign",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subwaylabel",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subwaylabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "weight": 1.5,
+      "visibility": "on"
+  }
+}, {
+  "featureType": "highway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "scenicspotslabel",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "subway",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#fdefd3ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "shopping",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "manmade",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on",
+      "color": "#242f3eff"
+  }
+}, {
+  "featureType": "manmade",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "highwaysign",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "water",
+  "elementType": "labels.text.stroke",
+  "stylers": {
+      "color": "#274754ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "labels.text",
+  "stylers": {
+      "fontsize": 28
+  }
+}, {
+  "featureType": "highway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "highway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "highway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "geometry.fill",
+  "stylers": {
+      "color": "#e9c46aff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "local",
+  "elementType": "geometry.stroke",
+  "stylers": {
+      "color": "#cba142ff",
+      "visibility": "on",
+      "weight": 1.5
+  }
+}, {
+  "featureType": "nationalway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "nationalway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "nationalway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "nationalway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "provincialway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "8"
+  }
+}, {
+  "featureType": "provincialway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "9"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "8"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "9"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "8"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "8,10",
+      "level": "9"
+  }
+}, {
+  "featureType": "cityhighway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "cityhighway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "cityhighway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "cityhighway",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "6"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "7"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "8"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "6,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "arterial",
+  "stylers": {
+      "curZoomRegionId": "0",
+      "curZoomRegion": "9,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "9,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "9,9",
+      "level": "9"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "provincialway",
+  "elementType": "labels.text.fill",
+  "stylers": {
+      "color": "#264653ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "scenicspots",
+  "elementType": "geometry",
+  "stylers": {
+      "color": "#588157ff",
+      "visibility": "on"
+  }
+}, {
+  "featureType": "OCEAN",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "WATEROTHER",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "road",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "nationalway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "tertiaryway",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "fourlevelway",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "local",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "arterial",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "cityhighway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "scenicspotsway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "universityway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "vacationway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "highrailway",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subway",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subway",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "roadarrow",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "footbridge",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "crosswalk",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "underpass",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "parkingspace",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "laneline",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "trafficlight",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLCX",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLDX",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLSX",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLZSYX",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLZXYS",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLSS",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLDS",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLDD",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDLLBUS",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDTEXTBUS",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "HDTEXTBUS",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "poilabel",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "districtlabel",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "districtlabel",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "parkinglot",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "playground",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "estate",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "entertainment",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "scenicspots",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "medical",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "medical",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "on"
+  }
+}, {
+  "featureType": "education",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "education",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "subwaystation",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "LANDABROAD",
+  "elementType": "geometry",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "LANDDOMESTIC",
+  "elementType": "geometry",
+  "stylers": {
+      "color": "#061945ff"
+  }
+}]
+ // var styleJson = [{
+        //   "featureType": "land",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "color": "#061945"
+        //   }
+        // }, {
+        //   "featureType": "manmade",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "color": "#242f3eff"
+        //   }
+        // }, {
+        //   "featureType": "water",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "color": "#17263cff"
+        //   }
+        // },
+
+        // {
+        //   "featureType": "road",
+        //   "elementType": "all",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // },
+        // // {
+        // //   "featureType": "road",
+        // //   "elementType": "geometry.stroke",
+        // //   "stylers": {
+        // //     "visibility": "off"
+        // //   }
+        // // },
+        // {
+        //   "featureType": "districtlabel",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "districtlabel",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#17263cff",
+        //     "weight": 3
+        //   }
+        // }, {
+        //   "featureType": "poilabel",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "poilabel",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#17263cff",
+        //     "weight": 3
+        //   }
+        // }, 
+        // {
+        //   "featureType": "subway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "railway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "poilabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "subwaylabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "subwaylabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "tertiarywaysign",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "tertiarywaysign",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "provincialwaysign",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "provincialwaysign",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "nationalwaysign",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "nationalwaysign",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "highwaysign",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "highwaysign",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     // "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "green",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     // "color": "#263b3eff"
+        //   }
+        // }, {
+        //   "featureType": "nationalwaysign",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d0021bff"
+        //   }
+        // }, {
+        //   "featureType": "nationalwaysign",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#ffffffff"
+        //   }
+        // }, {
+        //   "featureType": "city",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "on"
+        //   }
+        // }, {
+        //   "featureType": "city",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "city",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "city",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#17263cff"
+        //   }
+        // }, {
+        //   "featureType": "water",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "water",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#242f3eff"
+        //   }
+        // }, {
+        //   "featureType": "local",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#38414eff"
+        //   }
+        // }, {
+        //   "featureType": "local",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#ffffff00"
+        //   }
+        // }, {
+        //   "featureType": "fourlevelway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#38414eff"
+        //   }
+        // }, {
+        //   "featureType": "fourlevelway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#ffffff00"
+        //   }
+        // }, {
+        //   "featureType": "tertiaryway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#38414eff"
+        //   }
+        // }, {
+        //   "featureType": "tertiaryway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#ffffff00"
+        //   }
+        // }, {
+        //   "featureType": "tertiaryway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "fourlevelway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#9e7d60ff"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#554631ff"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#9e7d60ff"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#554631ff"
+        //   }
+        // }, {
+        //   "featureType": "tertiaryway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "fourlevelway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#9e7d60ff"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#554631ff"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#9e7d60ff"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#554631ff"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "geometry.fill",
+        //   "stylers": {
+        //     "color": "#9e7d60ff"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#554631fa"
+        //   }
+        // }, {
+        //   "featureType": "medicallabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "medicallabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "entertainmentlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "entertainmentlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "estatelabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "estatelabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "businesstowerlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "businesstowerlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "companylabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "companylabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "governmentlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "governmentlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "restaurantlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "restaurantlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "hotellabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "hotellabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "shoppinglabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "shoppinglabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "lifeservicelabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "lifeservicelabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "carservicelabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "carservicelabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "financelabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "financelabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "otherlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "otherlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "airportlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "on"
+        //   }
+        // }, {
+        //   "featureType": "airportlabel",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "airportlabel",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#17263cff"
+        //   }
+        // }, {
+        //   "featureType": "airportlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "nationalway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "highway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "8,9",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "6"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "7"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "8"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "6,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "stylers": {
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "10"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "9"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off",
+        //     "curZoomRegionId": "0",
+        //     "curZoomRegion": "9,10",
+        //     "level": "10"
+        //   }
+        // },
+        // {
+        //   "featureType": "building",
+        //   "elementType": "geometry.topfill",
+        //   "stylers": {
+        //     "color": "#2a3341ff"
+        //   }
+        // }, {
+        //   "featureType": "building",
+        //   "elementType": "geometry.sidefill",
+        //   "stylers": {
+        //     "color": "#313b4cff"
+        //   }
+        // }, {
+        //   "featureType": "building",
+        //   "elementType": "geometry.stroke",
+        //   "stylers": {
+        //     "color": "#1a212eff"
+        //   }
+        // },
+        // // {
+        // //   "featureType": "road",
+        // //   "elementType": "labels.text.fill",
+        // //   "stylers": {
+        // //     "color": "#759879ff"
+        // //   }
+        // // }, {
+        // //   "featureType": "road",
+        // //   "elementType": "labels.text.stroke",
+        // //   "stylers": {
+        // //     "color": "#1a2e1cff"
+        // //   }
+        // // }, 
+        // {
+        //   "featureType": "provincialway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#759879ff"
+        //   }
+        // }, {
+        //   "featureType": "provincialway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "cityhighway",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "arterial",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#1a2e1cff"
+        //   }
+        // }, {
+        //   "featureType": "local",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "manmade",
+        //   "elementType": "labels.text.fill",
+        //   "stylers": {
+        //     "color": "#d69563ff"
+        //   }
+        // }, {
+        //   "featureType": "manmade",
+        //   "elementType": "labels.text.stroke",
+        //   "stylers": {
+        //     "color": "#17263cff"
+        //   }
+        // }, {
+        //   "featureType": "subwaystation",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "transportationlabel",
+        //   "elementType": "labels.icon",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "transportationlabel",
+        //   "elementType": "labels",
+        //   "stylers": {
+        //     "visibility": "off"
+        //   }
+        // }, {
+        //   "featureType": "estate",
+        //   "elementType": "geometry",
+        //   "stylers": {
+        //     "color": "#2a3341ff"
+        //   }
+        // }];
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 32e2982..ecfbe50 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -48,6 +48,15 @@ module.exports = {
           "^/xumumodel": "/xumumodel",
         },
       },
+      '/weather': {
+        target: 'https://api.map.baidu.com',
+        changeOrigin: true,
+        ws: true,
+        secure: false,
+        pathRewrite: {
+          "^/weather": "/",
+        },
+      },
     },
   },
 };