修改样式

public/index.html

@@ -26,6 +26,7 @@
     type="text/javascript" charset="utf-8"></script>
     
     <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=7sBQjQEAEO5Cu4v9Fhclgs4ah3kgBuXA"></script>
+    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/AreaRestriction/src/AreaRestriction.min.js"></script>
   <!-- </script> -->
   <!-- <link rel="icon" href="<%= BASE_URL %>favicon.png"> -->
   <title>嘉禾县铸锻造工业互联网平台</title>

src/views/energySources/component/dosage.vue

@@ -290,7 +290,7 @@ export default {
 
 
 .dosage /deep/ .el-table td span {
-  font-size: 0.16rem;
+  font-size: 0.18rem;
   font-family: Acumin-Pro-Condensed-Regular-2;
 }
 

src/views/energySources/component/equipmentAnalyze.vue

@@ -119,7 +119,7 @@ export default {
 }
 
 .equipmentAnalyze /deep/ .el-table td span {
-  font-size: 0.16rem;
+  font-size: 0.18rem;
   font-family: Acumin-Pro-Condensed-Regular-2;
 }
 

src/views/energySources/component/equipmentLoad.vue

@@ -6,6 +6,9 @@
     <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
       :row-class-name="tableRowClassName">
       <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span style="font-size: 0.14rem !important;">{{ scope.row.name }}</span>
+        </template>
       </el-table-column>
       <el-table-column prop="loadRate" label="负载率">
         <template slot-scope="scope">
@@ -88,7 +91,9 @@ export default {
 }
 
 .equipmentLoad /deep/ .el-table td span {
-  font-size: 0.16rem !important;
+  font-size: 0.18rem !important;
+  
+  font-family: Acumin-Pro-Condensed-Regular-2;
 }
 
 .equipmentLoad /deep/ .el-table::before {
@@ -105,6 +110,12 @@ export default {
   background: rgba($color: #0de5ff, $alpha: 0.1) !important;
   font-family: Acumin-Pro-Condensed-Regular-2;
 }
+.equipmentLoad /deep/ .trEven td div{
+  font-size: 0.18rem !important;
+}
+.equipmentLoad /deep/ .trOdd td div{
+  font-size: 0.18rem !important;
+}
 
 .equipmentLoad /deep/.colorFB5E2D td {
   color: #FB5E2D !important;

src/views/energySourcesProvince/component/maps.vue

@@ -8,10 +8,15 @@
           <img src="../../../../public/img/energySourcesProvince/maps2.png" v-else>
         </div>
         <div class="num-bottom">
-          <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 class="num-bottom-div">
+            <span class="num-bottom-span1" :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.thisYear }}</span>
+            <span class="num-bottom-span2" :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.unit }}</span>
+          </div>
+          <div class="num-bottom-div" style="text-align: right;">
+
+            <span class="num-bottom-span3">{{ item.lastYear }}</span>
+            <span class="num-bottom-span4">上年度</span>
+          </div>
         </div>
       </div>
     </div>
@@ -120,7 +125,7 @@ export default {
       height: 1.12rem;
       background: url("../../../../public/img/energySourcesProvince/maps.png");
       background-size: 100% 100%;
-      padding: 0.24rem 0 0 0.24rem;
+      padding: 0.24rem 0.12rem 0 0.24rem;
       box-sizing: border-box;
 
       &>.num-top {
@@ -143,22 +148,26 @@ export default {
         // line-height: 0.4rem;
         overflow: hidden;
         margin-top: 0.1rem;
-
-        &>span:nth-child(1) {
+        display: flex;
+        justify-content: space-between;
+        .num-bottom-div {
+          width: 50%;
+        }
+        .num-bottom-span1 {
           font-size: 0.3rem;
           font-family: Acumin-Pro-Condensed-Black-2;
           font-weight: bold;
           vertical-align: -webkit-baseline-middle;
         }
 
-        &>span:nth-child(2) {
+        .num-bottom-span2 {
           font-size: 0.16rem;
           font-family: Acumin-Pro-Condensed-Black-2;
           font-weight: bold;
           margin-left: 0.04rem;
         }
 
-        &>span:nth-child(3) {
+        .num-bottom-span3 {
           font-size: 0.16rem;
           font-family: Acumin-Pro-Condensed-Black-2;
           font-weight: bold;
@@ -166,7 +175,7 @@ export default {
           margin-left: 0.1rem;
         }
 
-        &>span:nth-child(4) {
+        .num-bottom-span4 {
           font-size: 0.14rem;
           font-family: Acumin-Pro-Condensed-Black-2;
           font-weight: bold;

src/views/energySourcesProvince/component/pathMap.vue

@@ -147,13 +147,58 @@ export default {
         // this.baiduMap.setMaxZoom(12)
         // this.baiduMap.disableDragging();  
 
-        
+        // var bound = new BMapGL.Bounds(new BMapGL.Point(112.360565,25.638301), new BMapGL.Point(112.376986,25.627551));
+        // this.baiduMap.addOverlay(new BMapGL.Polygon([
+        //   new BMapGL.Point(bound.sw.lng, bound.sw.lat),
+        //   new BMapGL.Point(bound.sw.lng, bound.ne.lat),
+        //   new BMapGL.Point(bound.ne.lng, bound.ne.lat),
+        //   new BMapGL.Point(bound.ne.lng, bound.sw.lat)
+        // ], {
+        //   // strokeOpacity: 0,
+        //   // fillOpacity: 0
+        // }))
+
+        try {
+          BMapGLLib.AreaRestriction.setBounds(this.baiduMap, bound);
+        } catch (e) {
+          console.log(e)
+        }
+
+        // bdary.get('郴州市嘉禾县',  (rs) =>  {
+        //     // 绘制行政区
+        //     for (var i = 0; i < rs.boundaries.length; i++) {
+        //         var path = [];
+        //         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: '#4ca7a2',
+        //             strokeWeight: 3,
+        //             strokeOpacity: 1
+        //         });
+        //         this.baiduMap.addOverlay(border);
+        //     }
+        // });
 
         // var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
         // this.baiduMap.addControl(new BMapGL.NavigationControl(opts));
         // this.baiduMap.setMapStyleV2({ style: 'midnight' });
 
-        var bdary = new BMapGL.Boundary();
         // this.baiduMap.setMapStyleV2({
         //   styleJson: styleJson
         // })
@@ -193,9 +238,10 @@ export default {
         //     // this.baiduMap.addOverlay(ply);  //添加覆盖物
         //   }
         // })
-        this.baiduMap.centerAndZoom(point, 10);
-        this.baiduMap.setTilt(50);
-        this.baiduMap.enableScrollWheelZoom();
+
+        this.baiduMap.setTilt(40);
+
+        var bdary = new BMapGL.Boundary();
         bdary.get('郴州市嘉禾县', (rs) => {
           var count = rs.boundaries.length; //行政区域的点有多少个
           var pointArray = [];
@@ -219,7 +265,7 @@ export default {
             this.baiduMap.addOverlay(prism);
           }
         })
-        this.baiduMap.enableScrollWheelZoom();
+
 
         this.baiduMap.setMapStyleV2({ styleJson: styleJson });
         this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);

src/views/energySourcesProvince/component/statistics.vue

@@ -125,7 +125,7 @@ export default {
 }
 
 .statistics /deep/ .el-table td span{
-  font-size: 0.16rem;
+  font-size: 0.18rem;
   font-family: Acumin-Pro-Condensed-Regular-2;
 }
 .statistics /deep/ .el-table::before {