车船情况

src/module/databoard/components/map/map-point-mark.vue

@@ -63,15 +63,6 @@ export default {
           },
 
         },
-        title: {
-          top: 20,
-          text: '',
-          subtext: '',
-          x: 'center',
-          textStyle: {
-            color: '#ccc'
-          }
-        },
         visualMap: {
           min: 0,
           max: 2000,
@@ -102,7 +93,7 @@ export default {
         },
         geo: {
           map: 'china',
-          layoutCenter: ['50%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
+          layoutCenter: ['60%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
           layoutSize: 100,
           zoom: 6.5,
           label: {

src/module/databoard/databoard/safe-quality.vue

@@ -27,9 +27,18 @@
       </div>
       <!--中-->
       <div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
-
         <display-board  style="height: 76%">
-
+          <div style="display: flex;justify-content: space-evenly;">
+            <simple-card   @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
+              <title-content-mark style="color: #5eeef4;" title="车辆" :content="truckCount" mark="辆"
+                                  isCenter isBold/>
+            </simple-card>
+            <simple-card  @click.native="changeDevireMap('shipDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
+              <title-content-mark style="color: #5eeef4;" title="船舶" :content="shipCount" mark="艘"
+                                  isCenter isBold/>
+            </simple-card>
+          </div>
+          <map-point-mark style="width: calc(43vw); height: calc(50vh);" :derviceDis="derviceDis"></map-point-mark>
         </display-board>
         <div style="display: flex; justify-content: space-between; height: 23%; padding-top: 2rem;" >
           <showcase style="width: 16%;" title="当日订单量">
@@ -138,6 +147,12 @@ import * as echarts from "echarts";
 import SimpleCard from "../components/card/simple-card.vue";
 import TitleContentMark from "../components/layout/title-content-mark.vue";
 import Showcase from "../components/container/showcase.vue";
+import mapPointMark from "../components/map/map-point-mark.vue"
+import {
+  getTruckShipConditionData
+} from "../../api/apiList"
+
+
 export default {
   name: "SafeQuality",
   components: {
@@ -145,7 +160,8 @@ export default {
     SimpleCard,
     TitleContentMark,
     Showcase,
-    WinnersList
+    WinnersList,
+    mapPointMark
   },
   data() {
       return {
@@ -418,12 +434,19 @@ export default {
             data: [19,11,33]
           }]
         },
+        truckCount: "0",
+        shipCount: "0",
+        truckDis: [],
+        shipDis: [],
+        derviceDis: [],
+        crurrDevireMapTyep: ""
       }
   },
   methods: {
 
     refreshData() {
         this.getPeopleInfos();
+        this.getTruckShipCondition();
     },
     getPeopleInfos(){
 
@@ -437,7 +460,42 @@ export default {
       // let chart=echarts.init(barDom);
       // chart.setOption(this.peopleInfoOption);
 
+    },
+    getTruckShipCondition() {
+      getTruckShipConditionData().then(res => {
+        let data = res.data
+        let truckCount = 0;
+        let shipCount = 0;
+        for (let device of data.device_type_sum) {
+          if (device.device_type == '3' || device.device_type == '1') {
+            truckCount = truckCount + parseInt(device.count)
+          }
+          if (device.device_type == '4') {
+            shipCount = shipCount + parseInt(device.count)
+          }
+        }
+        this.truckCount = truckCount + "";
+        this.shipCount = shipCount + "";
+        this.shipDis = data.ship_by_province_sum;
+        this.truckDis = data.truck_by_province_sum;
+        if(this.crurrDevireMapTyep == "") {
+          this.changeDevireMap('truckDis');
         }
+      })
+    },
+    changeDevireMap(dimension) {
+      this.crurrDevireMapTyep = dimension;
+      switch (dimension) {
+        case 'truckDis':
+          this.derviceDis = this.truckDis;
+          break;
+        case 'shipDis':
+          this.derviceDis = this.shipDis;
+          break;
+        default:
+          return;
+      }
+    },
   },
   mounted() {
     setTimeout(() => {
@@ -476,4 +534,13 @@ export default {
 </script>
 
 <style scoped>
+.selectedBtn {
+  color: #1234a1 !important;
+  background-color: #005dd6 !important;
+}
+
+.unSelectedBtn {
+  color: #00c8d6;
+  background-color: #1234a1;
+}
 </style>