소스 검색

工程现场及公务用车 中间地图 调整

zhanghao 5 달 전
부모
커밋
43cd37698b
2개의 변경된 파일19개의 추가작업 그리고 16개의 파일을 삭제
  1. 2 2
      src/views/screen/map/map.vue
  2. 17 14
      src/views/screen/map/mapTwo.vue

+ 2 - 2
src/views/screen/map/map.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="width: 580px">
-    <div ref="charts" style="width: 100%;height: 900px;margin-top: -120px"></div>
+  <div style="width: 680px">
+    <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
     <img
       id="mapBackground"
       src="@/assets/images/main/map_bg.jpg"

+ 17 - 14
src/views/screen/map/mapTwo.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="width: 580px">
-    <div ref="charts" style="width: 100%;height: 900px;margin-top: -120px"></div>
+  <div style="width: 680px">
+    <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
     <img
         id="mapBackground"
         src="@/assets/images/main/map_bg.jpg"
@@ -35,6 +35,7 @@ let imgElement
 export default {
   data() {
     return {
+      appOrg: "10001",
       showBack: false,
       dataSource: {
         大同市: 大同市,
@@ -76,17 +77,17 @@ export default {
         { name: "吕梁市", appOrg: "1J001" }
       ];
       const points = [
-        { name: "太原市", coordinate: [112.3493, 37.7570], x: "399", y: "2" },
-        { name: "大同市", coordinate: [113.3002, 40.0768], x: "399", y: "2" },
-        { name: "阳泉市", coordinate: [113.6805, 37.7863], x: "399", y: "2" },
-        { name: "长治市", coordinate: [113.1163, 36.1954], x: "399", y: "2" },
-        { name: "晋城市", coordinate: [113.1513, 35.5907], x: "399", y: "2" },
-        { name: "朔州市", coordinate: [112.4329, 39.5312], x: "399", y: "2" },
-        { name: "晋中市", coordinate: [113.2527, 37.3870], x: "399", y: "2" },
-        { name: "临汾市", coordinate: [111.5186, 35.8582], x: "399", y: "2" },
-        { name: "忻州市", coordinate: [112.7341, 38.6167], x: "399", y: "2" },
-        { name: "运城市", coordinate: [110.9069, 34.9264], x: "399", y: "2" },
-        { name: "吕梁市", coordinate: [111.1443, 37.4183], x: "399", y: "2" }
+        { 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 = {
@@ -169,10 +170,11 @@ export default {
               padding: [6, 7], // 文字内边距(可选)
               borderRadius: 2, // 文字框圆角(可选)
             },
-            data: points.map(({ name, coordinate, x, y }) => ({
+            data: points.map(({ name, coordinate, appOrg, x, y }) => ({
               name, // 点名称
               value: coordinate, // 经纬度坐标
               label: { formatter: `${x}` }, // 显示 `x` 数据(可换成 y)
+              appOrg,
               x, // 额外数据(在建项目数)
               y, // 额外数据(施工项目数)
             })),
@@ -188,6 +190,7 @@ export default {
           // 点击的是地图区域
           console.log("Clicked map area: ", params.name);
         } else if (params.componentType === "series") {
+          this.appOrg = params.data.appOrg
           // 点击的是自定义图标(scatter)
           console.log("Clicked scatter point: ", params.name, params.data.appOrg);
           // 销毁当前图表实例