公务用车 地图界面调整

src/api/screen/service.js

@@ -951,3 +951,11 @@ export function getOperationManageLastHalf() {
     method: 'get'
   })
 }
+
+// 所有地市各自的公务车总数
+export function getSelfCarNum() {
+  return request({
+    url: '/large/car/selfCarNum',
+    method: 'get'
+  })
+}

src/views/screen/map/mapTwo.vue

@@ -33,6 +33,9 @@ import 运城市 from '@/views/screen/map/运城市.json'
 import 晋城市 from '@/views/screen/map/晋城市.json'
 let imgElement
 export default {
+  props: {
+    mapData: Array
+  },
   data() {
     return {
       appOrg: "10001",
@@ -49,19 +52,38 @@ export default {
         长治市: 长治市,
         运城市: 运城市,
         晋城市: 晋城市,
-      }
+      },
+      points:[
+        { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "399", y: "2" },
+        { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "399", y: "2" },
+        { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "399", y: "2" },
+        { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "399", y: "2" },
+        { name: "晋城市", coordinate: [113.1513, 35.5907], appOrg: "1E001", x: "399", y: "2" },
+        { name: "朔州市", coordinate: [112.4329, 39.5312], appOrg: "1F001", x: "399", y: "2" },
+        { name: "晋中市", coordinate: [113.2527, 37.3870], appOrg: "1K001", x: "399", y: "2" },
+        { name: "临汾市", coordinate: [111.5186, 35.8582], appOrg: "1L001", x: "399", y: "2" },
+        { name: "忻州市", coordinate: [112.7341, 38.6167], appOrg: "1H001", x: "399", y: "2" },
+        { name: "运城市", coordinate: [110.9069, 34.9264], appOrg: "1M001", x: "399", y: "2" },
+        { name: "吕梁市", coordinate: [111.1443, 37.4183], appOrg: "1J001", x: "399", y: "2" }
+      ]
     }
   },
   created () {},
-  mounted() {
-    this.$nextTick(() => {
-      imgElement = document.getElementById("mapBackground");
-      setTimeout(() => {
-        this.initCharts();
-      }, 500);
-    });
-  },
+  mounted() {},
   methods: {
+    start(){
+      this.$nextTick(() => {
+        let i = 0
+        for (let it of this.points){
+          it.x = this.mapData[i]
+          i++
+        }
+        imgElement = document.getElementById("mapBackground");
+        setTimeout(() => {
+          this.initCharts();
+        }, 500);
+      });
+    },
     initCharts() {
       const area = [
         { name: "太原市", appOrg: "1A003" },
@@ -76,19 +98,6 @@ export default {
         { name: "运城市", appOrg: "1M001" },
         { name: "吕梁市", appOrg: "1J001" }
       ];
-      const points = [
-        { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "399", y: "2" },
-        { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "399", y: "2" },
-        { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "399", y: "2" },
-        { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "399", y: "2" },
-        { name: "晋城市", coordinate: [113.1513, 35.5907], appOrg: "1E001", x: "399", y: "2" },
-        { name: "朔州市", coordinate: [112.4329, 39.5312], appOrg: "1F001", x: "399", y: "2" },
-        { name: "晋中市", coordinate: [113.2527, 37.3870], appOrg: "1K001", x: "399", y: "2" },
-        { name: "临汾市", coordinate: [111.5186, 35.8582], appOrg: "1L001", x: "399", y: "2" },
-        { name: "忻州市", coordinate: [112.7341, 38.6167], appOrg: "1H001", x: "399", y: "2" },
-        { name: "运城市", coordinate: [110.9069, 34.9264], appOrg: "1M001", x: "399", y: "2" },
-        { name: "吕梁市", coordinate: [111.1443, 37.4183], appOrg: "1J001", x: "399", y: "2" }
-      ];
       const charts = echarts.init(this.$refs["charts"]);
       const option = {
         // 设置背景颜色，"transparent" 表示透明背景
@@ -170,7 +179,7 @@ export default {
               padding: [6, 7], // 文字内边距（可选）
               borderRadius: 2, // 文字框圆角（可选）
             },
-            data: points.map(({ name, coordinate, appOrg, x, y }) => ({
+            data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
               name, // 点名称
               value: coordinate, // 经纬度坐标
               label: { formatter: `${x}` }, // 显示 `x` 数据（可换成 y）

src/views/screen/official/main.vue

@@ -39,7 +39,7 @@
     </div>
     <div class="middle">
       <img src="@/assets/zhang/publicCar/officialCar.png" width="50" style="position: absolute;top: 125px;left: 20px;cursor: pointer">
-      <MapTwo @transmit="transmit"></MapTwo>
+      <MapTwo @transmit="transmit" :mapData="mapData" ref="map"></MapTwo>
 <!--      <img
         v-if="showLocal"
         class="build"
@@ -196,7 +196,13 @@ import CarCost from '@/views/screen/official/carCost.vue'
 import CarHealth from '@/views/screen/official/carHealth.vue'
 import CarStockDialog from "@/views/screen/logistics/car/carStockDialog.vue";
 import MapTwo from '@/views/screen/map/mapTwo.vue'
-import { getMonitor, getOperationManageLastHalf, getOperationManageTopHalf, getResource } from '@/api/screen/service'
+import {
+  getMonitor,
+  getOperationManageLastHalf,
+  getOperationManageTopHalf,
+  getResource,
+  getSelfCarNum
+} from '@/api/screen/service'
 
 
 export default {
@@ -224,6 +230,7 @@ export default {
   // },
   data() {
     return {
+      mapData:[],
       flag: 0,
       carActivationNum:[],
       carUseNum:[],
@@ -254,6 +261,7 @@ export default {
     this.resource();
     this.monitor();
     this.operationManage();
+    this.getMapData()
   },
   destroyed() {},
   beforeDestroy() {},
@@ -266,6 +274,15 @@ export default {
       this.operationManageTopHalf();
     },
 
+    getMapData(){
+      getSelfCarNum().then(res => {
+        if (Number(res.code) === 200) {
+          this.mapData = res.data
+          this.$refs.map.start()
+        }
+      })
+    },
+
     resource(){
       getResource(this.appOrg).then(res => {
           if (Number(res.code) === 200) {