修改部分页面，增加大数据地图引入

README.md

@@ -1,24 +1,34 @@
-# fire-mh
+# 闵行大屏项目
 
-## Project setup
+## node-module插件模块引入
 ```
 npm install
 ```
 
-### Compiles and hot-reloads for development
+### 运行
 ```
 npm run serve
 ```
 
-### Compiles and minifies for production
+### 打包
 ```
 npm run build
 ```
 
-### Lints and fixes files
+### 不同环境打包，对应根目录.env-文件配置
+development开发环境
 ```
-npm run lint
+npm run build:dev
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+prod发布环境
+```
+npm run build:prod
+```
+test测试环境
+```
+npm run build:test
+```
+### 修改高德和大数据地图切换
+See 1、修改html页面引入路径
+2、修改vue.config.js中configureWebpack全局变量配置
+3、修改每个mixins中map路径为大数据/高德对应引入文件.

package-lock.json

@@ -2641,6 +2641,11 @@
                 "resolve": "^1.12.0"
             }
         },
+        "babel-helper-vue-jsx-merge-props": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+            "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+        },
         "babel-loader": {
             "version": "8.2.2",
             "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -2692,6 +2697,27 @@
                 "@babel/helper-define-polyfill-provider": "^0.2.2"
             }
         },
+        "babel-runtime": {
+            "version": "6.26.0",
+            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+            "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+            "requires": {
+                "core-js": "^2.4.0",
+                "regenerator-runtime": "^0.11.0"
+            },
+            "dependencies": {
+                "core-js": {
+                    "version": "2.6.12",
+                    "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+                    "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+                },
+                "regenerator-runtime": {
+                    "version": "0.11.1",
+                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+                    "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+                }
+            }
+        },
         "balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4372,8 +4398,7 @@
         "deepmerge": {
             "version": "1.5.2",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-            "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-            "dev": true
+            "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
         },
         "default-gateway": {
             "version": "5.0.5",
@@ -4850,6 +4875,28 @@
             "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
             "dev": true
         },
+        "el-table-infinite-scroll": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/el-table-infinite-scroll/-/el-table-infinite-scroll-1.0.10.tgz",
+            "integrity": "sha512-O7gcfcF9wOec/weeygMlJKQ8626jF5hIY6zABYKYqY96yxXZRrvPqEZW65Vb+C0D5d+8B8EgU9ax7mlA4K1x4A==",
+            "requires": {
+                "core-js": "^2.6.5",
+                "element-ui": "^2.12.0",
+                "vue": "^2.6.10"
+            },
+            "dependencies": {
+                "core-js": {
+                    "version": "2.6.12",
+                    "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+                    "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+                },
+                "vue": {
+                    "version": "2.6.14",
+                    "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+                    "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+                }
+            }
+        },
         "electron-to-chromium": {
             "version": "1.3.754",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.754.tgz",
@@ -4871,6 +4918,29 @@
                 "resize-observer-polyfill": "^1.5.1"
             }
         },
+        "element-ui": {
+            "version": "2.15.5",
+            "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.5.tgz",
+            "integrity": "sha512-B/YCdz2aRY2WnFXzbTRTHPKZHBD/2KV6u88EBnkaARC/Lyxnap+7vpvrcW5UNTyVwjItS5Fj1eQyRy6236lbXg==",
+            "requires": {
+                "async-validator": "~1.8.1",
+                "babel-helper-vue-jsx-merge-props": "^2.0.0",
+                "deepmerge": "^1.2.0",
+                "normalize-wheel": "^1.0.1",
+                "resize-observer-polyfill": "^1.5.0",
+                "throttle-debounce": "^1.0.1"
+            },
+            "dependencies": {
+                "async-validator": {
+                    "version": "1.8.5",
+                    "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+                    "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+                    "requires": {
+                        "babel-runtime": "6.x"
+                    }
+                }
+            }
+        },
         "elliptic": {
             "version": "6.5.4",
             "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -11643,6 +11713,11 @@
                 "neo-async": "^2.6.0"
             }
         },
+        "throttle-debounce": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+            "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+        },
         "through": {
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -6,7 +6,7 @@
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
-        "build:pre": "vue-cli-service build --mode dev",
+        "build:dev": "vue-cli-service build --mode dev",
         "build:prod": "vue-cli-service build --mode prod",
         "build:test": "vue-cli-service build --mode test"
     },
@@ -17,6 +17,7 @@
         "echarts-gl": "^2.0.4",
         "echarts-liquidfill": "^3.0.0",
         "echarts-wordcloud": "^2.0.0",
+        "el-table-infinite-scroll": "^1.0.10",
         "element-plus": "^1.0.2-beta.54",
         "vue": "^3.0.11",
         "vue-amap": "^0.5.10",
@@ -40,4 +41,4 @@
         "terser-webpack-plugin": "^5.1.3",
         "vue-cli-plugin-element-plus": "0.0.13"
     }
-}
+}

proxy-dev.js

@@ -3,13 +3,13 @@
 module.exports = {
     table: {
         '/': {
-            target: 'http://172.16.120.155:8083',
+            target: 'http://172.16.120.104:8083',
             ws: true, // 代理websockets
             changeOrigin: true,
             pathRewrite: { '': '/' } // '^/api' 是一个正则表达式，作用：将 /api 提换成为 /
         },
     },
     // 本地配置ip访问（手机可通过IP访问），需要修改成本地Ip地址
-    localhost: '172.16.1.200',
+    localhost: '172.16.120.200',
     port: '3000',
 }

public/index.html

@@ -9,9 +9,11 @@
     <title>
         <%= htmlWebpackPlugin.options.title %>
     </title>
+    <!-- 高德地图 -->
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
     <script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script>
-    <!-- <script src="@a/js/flexible.js"></script> -->
+    <!-- 大数据地图 -->
+    <!-- <script src="http://gis.dcp.shmh.gov.cn/mh_map/js/index_v1.0.js"></script> -->
 </head>
 
 <body>

src/App.vue

@@ -36,6 +36,9 @@ export default {
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
+  
+  // min-width: 23.75rem;
+  // min-height: 10rem;
 }
 </style>
 <style scoped  lang='scss'>

src/assets/js/flexible.js

@@ -20,7 +20,6 @@
 
     setRemUnit();
     let time = true
-        // reset rem unit on page resize
     window.addEventListener("resize", function() {
         if (!time) {
             return

src/assets/scss/common.scss

@@ -69,7 +69,7 @@ body {
         color: #FFF;
         .el-popper__arrow::before {
             border-color: #019FB7;
-            border-width: 5px;
+            border-width: .0625rem;
             background: transparent;
         }
     }

src/components/bar/index.vue

@@ -12,7 +12,7 @@ export default {
     return {};
   },
   mounted() {
-    this.getData();
+    // this.getData();
   },
   watch: {
     dataMap(val) {
@@ -22,11 +22,6 @@ export default {
   methods: {
     getData() {
       let dataMap = this.dataMap;
-      dataMap = [
-        [100, 110, 80, 130, 90, 150, 130, 170, 180, 170, 200, 210, 120, 100],
-        [200, 100, 220, 130, 240, 250, 260, 250, 280, 270, 300, 310, 220, 200],
-        [220, 302, 231, 234, 190, 230, 220, 302, 231, 134, 190, 230, 120, 220],
-      ];
       let echartsMap = echarts.init(this.$refs.echartD);
       echartsMap.setOption({
         color: ["#14E1EA","#14E1EA", "#EF6B3D","#EF6B3D", "#FADF2B", "#FADF2B"],
@@ -103,13 +98,13 @@ export default {
               focus: "series",
             },
             barWidth: "50%",
-            data: dataMap[0],
+            data: (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
           },
           {
             name: "救助月平均值",
             type: "line",
             stack: "totalLine",
-            data: dataMap[0].map((val) => val + 40),
+            data:(dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.avg)) || [],
           },
           {
             name: "火灾",
@@ -119,13 +114,13 @@ export default {
               focus: "series",
             },
             barWidth: "50%",
-            data: dataMap[1],
+            data: (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) || [],
           },
           {
             name: "火灾月平均值",
             type: "line",
             stack: "totalLine",
-            data: dataMap[1].map((val) => val + 40),
+            data: (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
           },
           {
             name: "抢险救援",
@@ -135,13 +130,13 @@ export default {
               focus: "series",
             },
             barWidth: "50%",
-            data: dataMap[2],
+            data: (dataMap["抢险救援"] && dataMap["抢险救援"].map((val) => val.number)) || [],
           },
           {
             name: "救援月平均值",
             type: "line",
             stack: "totalLine",
-            data: dataMap[2].map((val) => val + 40),
+            data: (dataMap["抢险救援"] && dataMap["抢险救援"].map((val) => val.avg)) || [],
           },
         ],
       });

src/components/line-smooth/index.vue

@@ -19,25 +19,11 @@ export default {
     },
   },
   mounted() {
-    this.getData();
+    // this.getData();
   },
   methods: {
     getData() {
       let dataMap = this.dataMap;
-      dataMap = [
-        [
-          100, 110, 80, 130, 90, 150, 130, 170, 180, 170, 200, 210, 120, 100,
-          110, 80, 130, 90, 150, 130, 170, 180, 170, 200, 210, 120,
-        ],
-        [
-          200, 100, 220, 130, 240, 250, 260, 250, 280, 270, 300, 310, 220, 200,
-          100, 220, 130, 240, 250, 260, 250, 280, 270, 300, 310, 220,
-        ],
-        [
-          220, 302, 231, 234, 190, 230, 220, 302, 231, 134, 190, 230, 120, 220,
-          302, 231, 234, 190, 230, 220, 302, 231, 134, 190, 230, 120,
-        ],
-      ];
       let echartsMap = echarts.init(this.$refs.echartD);
       echartsMap.setOption({
         color: [
@@ -155,7 +141,8 @@ export default {
                 },
               ]),
             },
-            data: dataMap[0],
+            data:
+              (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
           },
           {
             name: "救助月平均值",
@@ -176,7 +163,10 @@ export default {
                 },
               ]),
             },
-            data: dataMap[0].map((val) => val - 40),
+            data:
+              (dataMap["社会救助"] &&
+                dataMap["社会救助"].map((val) => val.avg)) ||
+              [],
           },
           {
             name: "火灾",
@@ -197,7 +187,9 @@ export default {
                 },
               ]),
             },
-            data: dataMap[1],
+            data:
+              (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) ||
+              [],
           },
           {
             name: "火灾月平均值",
@@ -218,7 +210,8 @@ export default {
                 },
               ]),
             },
-            data: dataMap[1].map((val) => val - 40),
+            data:
+              (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
           },
           {
             name: "抢险救援",
@@ -239,7 +232,10 @@ export default {
                 },
               ]),
             },
-            data: dataMap[2],
+            data:
+              (dataMap["抢险救援"] &&
+                dataMap["抢险救援"].map((val) => val.number)) ||
+              [],
           },
           {
             name: "救援月平均值",
@@ -260,7 +256,10 @@ export default {
                 },
               ]),
             },
-            data: dataMap[2].map((val) => val - 40),
+            data:
+              (dataMap["抢险救援"] &&
+                dataMap["抢险救援"].map((val) => val.avg)) ||
+              [],
           },
         ],
       });

src/components/lxb-bar/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    color: { type: String, default: () => 'rgb(0,254,160)'},
+    borderRadius: { type: Array, default: () => [0, 0, 0, 0]},
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    // this.getData();
+  },
+  methods: {
+    getData(val = this.dataMap) {
+      echarts.init(this.$refs.echartD).setOption({
+        grid: {
+          top: 20,
+          left: 30,
+          right: 30,
+          bottom: 20,
+        },
+        xAxis: {
+          name: "日",
+          nameGap: 10,
+          nameTextStyle: {
+            color: "#FFFFFF",
+            align: "left",
+            fontWeight: "bold",
+            fontSize: 14,
+          },
+          type: "category",
+          data: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+          ],
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#FFF",
+          },
+          confine: true,
+          backgroundColor: "rgba(11, 12, 72, 0.8)",
+          borderColor: "rgba(11, 12, 72, 0.4)",
+          position: "bottom",
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+          splitLine: {
+            // show: false,
+            lineStyle: {
+              color: "rgba(255,255,255,.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name:'当前',
+            type: "bar",
+            barWidth: 15,
+            itemStyle: {
+              color: this.color,
+              borderRadius: this.borderRadius,
+            },
+            data: val,
+          },
+        ],
+      });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/lxb-line/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    color: { type: String, default: () => 'rgb(0,254,160)'},
+    borderRadius: { type: Array, default: () => [0, 0, 0, 0]},
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    // this.getData();
+  },
+  methods: {
+    getData(val = this.dataMap) {
+      echarts.init(this.$refs.echartD).setOption({
+        color:['rgba(255,241,0,1)'],
+        grid: {
+          top: 20,
+          left: 30,
+          right: 30,
+          bottom: 20,
+        },
+        xAxis: {
+          name: "日",
+          nameGap: 10,
+          nameTextStyle: {
+            color: "#FFFFFF",
+            align: "left",
+            fontWeight: "bold",
+            fontSize: 14,
+          },
+          boundaryGap: false,
+          type: "category",
+          data: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+          ],
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#FFF",
+          },
+          confine: true,
+          backgroundColor: "rgba(11, 12, 72, 0.8)",
+          borderColor: "rgba(11, 12, 72, 0.4)",
+          position: "bottom",
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "rgba(255,255,255,.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name:'当前',
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(255,241,0,1)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(255,241,0,0.1)",
+                },
+              ]),
+            },
+            data: val,
+          },
+        ],
+      });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/mixins/map-data.js

@@ -0,0 +1,300 @@
+// import JMap from 'JMap'
+// import JMapQuery from 'JMapQuery'
+export default {
+    data() {
+        return {
+            map: null,
+            mapPolList: [],
+            colorList: [
+                ['#99e', "#F33"],
+                ['#ee6', "#c38"],
+                ['#c38', "#F33"],
+                ['#6E7', '#F33'],
+                ['#6A7', "#F33"],
+                ['#EF7', "#F33"],
+                ['#AF7', "#F33"],
+                ['#BAC', "#F33"],
+                ['#BEF', "#F33"],
+                ['#BBB', "#F33"],
+                ['#EFA', "#F33"],
+                ['#FE6', "#F33"],
+                ['#7F6', "#F33"],
+                ['#7dc', "#F33"],
+            ],
+            colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100],
+            oldPopup: null
+        }
+    },
+    computed: {
+        mapWidth: function() {
+            //这里的this指向的是当前的vue实例
+            return this.$refs.mapF.$el.offsetWidth / 2 + 'px'
+        },
+        mapHeight: function() {
+            //这里的this指向的是当前的vue实例
+            return this.$refs.mapF.$el.offsetHeight / 2 - 40 + 'px'
+        }
+    },
+    mounted() {
+        window.vue = this;
+        window.jMap = null;
+        window.jmapQuery = null;
+    },
+    methods: {
+        async initMap() {
+            window.vue = this;
+            window.jMap = null;
+            window.jmapQuery = null;
+            window.jMap = new JMap();
+            var map_params = {
+                camera: {
+                    x: 121.4175597,
+                    y: 31.1192480,
+                    radius: 18000.0,
+                    offset: { heading: -4, pitch: -70, range: 0 }
+                },
+                map_complete_callback: () => {
+                    window.jmapQuery = new JMapQuery(window.jMap);
+                    // ToDo...
+                },
+                map_left_click_callback: (obj, type, movement) => {
+
+                },
+                map_right_click_callback: (obj) => {
+
+                },
+            };
+            let res = await this.$axios.get("/atlas/encrypt")
+                // 加载地图
+            window.jMap.createMap("mapF", res.data, window.location.origin, map_params, {});
+            // 地图样式
+            window.jMap.switchBaseLayer('light')
+                // 增加街镇边界
+            let options = {
+                click: (val) => {
+                    console.log(val)
+                },
+                isZoom: false,
+                style: {
+                    outline: true,
+                    outlineColor: 'red',
+                    // material:'rgb(0,0,0)',
+                    // perPostionHeight: false,
+                    height: 5,
+                    width: 5,
+                    label: {
+                        show: true,
+                        text: '',
+                        font: '16px Helvetica',
+                        fillColor: 'blue',
+                        pixelOffset: [0, -20],
+                        backgroundColor: 'rgb(0,0,0)',
+                        showBackground: false
+                    }
+                },
+                // where:"name != '江川路街道'"
+            }
+            window.jMap.addLayer('mh_dyn_district', [1], options)
+                // 街镇标题
+            var qp = new JMapQueryParam({
+                queryMapService: 'mh_dyn_district',
+                queryMapLayers: [1],
+                outFields: ['code', 'name', 'center_x', 'center_y'],
+                callBack: (res) => {
+                    res.features.forEach(async val => {
+                        await window.jMap.FlagInfo.show({
+                            id: val.attributes.code,
+                            position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
+                            element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})"><div class='biaozhu'>${val.attributes.name}   ${val.attributes.code}</div></div>`
+                        }, { isZoom: false, offset: [0, 0] })
+                    });
+                }
+            })
+            new JMapQuery(window.jMap).execQuery(qp)
+        },
+        clickFlag(val) {
+            console.log(val)
+        },
+        randomColor() {
+            var color = "#";
+            //for循环中，如果后面仅有一条语句，{}可省略不写
+            //随机生成6位0-15之间的数字，再用toString(16)将数字转成16进制
+            for (var i = 0; i < 6; i++) color += parseInt(Math.random() * 16).toString(16);
+            return color;
+        },
+        deleteMarker(lnglats) {
+            this.map.remove(lnglats);
+        },
+        // 创建标点和点击事件
+        addMarker(lnglats, type) {
+            let icon = ''
+            let target = lnglats.map((val, ind) => {
+                if (type === 'water') {
+                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+                }
+                let marker = {
+                    id: ind + 1,
+                    attributes: val.waterAdministrative,
+                    attrbutes: val,
+                    position: { x: val.gisX, y: val.gisY, z: 0 },
+                    // image: { url: icon,width:29.5,height:48.5 },
+                };
+                return marker
+            })
+            console.log(target)
+            window.jMap.Locate.pointLocate(target, {
+                isZoom: false,
+                scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
+                click: (val) => {
+                    this.elementInfo(val, type)
+                }
+            })
+        },
+        // 无经纬度创建标点和点击事件
+        addMarkerAddress(lnglats) {
+            let target = lnglats.map((val, ind) => {
+                if (!val.addressId) {
+                    let addressInfo = window.jMap.queryMphInfo(val.address)[val.address][0]
+                    return {
+                        ...val,
+                        addressId: addressInfo.address_id, // 地址id
+                        province: addressInfo.province, // 市
+                        district: addressInfo.district, // 区
+                        sub_district: addressInfo.sub_district, // 街镇
+                        streetname: addressInfo.streetname, // 路
+                        address: addressInfo.address, // 户
+                        committee: addressInfo.committee, // 居委会
+                    }
+                }
+            })
+            target = target.reduce((item, next) => {
+                !item.some(val => val.addressId === next.addressId) && item.push(next)
+                return item
+            }, []);
+            console.log(target)
+            console.log(Math.floor(target.length / 100))
+            for (let item = 0; item < Math.floor(target.length / 100); item++) {
+                console.log(item)
+                console.log(target.slice(item * 100, (item + 1) * 100).map(val => val.addressId).join())
+                setTimeout(() => {
+                    window.jMap.locateMph(
+                        target.slice(item * 100, (item + 1) * 100).map(val => val.addressId).join(), {
+                            isZoom: false,
+                            scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
+                            click: (value) => {
+                                this.elementInfo(value, 'fire')
+                            }
+                        }
+                    )
+                }, 0)
+            }
+        },
+        leftBtnClick() {
+            this.leftBtn = !this.leftBtn;
+        },
+        rightBtnClick() {
+            this.rightBtn = !this.rightBtn
+        },
+        elementInfo(value, type) {
+            let element = ''
+            if (type === 'water') {
+                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
+                            <div class="tableTooltip mapTab">
+                            <div class="tableTitle">
+                                <div>${value.attrbutes.type}</div>
+                            </div>
+                            <el-row class="tableContent">
+                                <div class="max">水源位置：${value.attrbutes.address}</div>
+                                <div>电话：${value.attrbutes.phone}</div>
+                                <div class="max">支队名称：${value.attrbutes.detachmentName}</div>
+                                <div>管辖机构：${value.attrbutes.jurisdictionalAgency}</div>
+                                <div>水源类型：${value.attrbutes.type}</div>
+                                <div>取水形式：${value.attrbutes.getWaterType}</div>
+                                <div>水源性质：${value.attrbutes.waterAdministrative}</div>
+                                <div>状态：${value.attrbutes.status == 1 ?'可用':'不可用'}</div>
+                                <div>供水单位：${value.attrbutes.waterUnit}</div>
+                            </el-row>
+                            </div>
+                        </div>`
+            } else if (type === 'fire') {
+                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
+                            <div class="tableTooltip mapTab">
+                                <div class="tableTitle">
+                                    <div>${'单位及执法情况'}</div>
+                                </div>
+                                <el-row class="tableContent">
+                                    <div>单位地址：${'XX路135弄'}</div>
+                                    <div>法人：${'张三'}</div>
+                                    <div>管理人：${'李四'}</div>
+                                    <div>历史检查次数：<a>${'6次'}</a></div>
+                                    <div class="divTitle">行政许可记录</div>
+                                    <div>审核时间：${'2021-06-26'}</div>
+                                    <div>验收时间：${'2021-06-26'}</div>
+                                    <div>安检时间：${'2021-06-26'}</div>
+                                    <div>历史隐患数：${'2处'}</div>
+                                    <div class="divTitle">历史处罚情况</div>
+                                    <div>历史火灾数：${'2'}</div>
+                                    <div>单位自主管理情况：<a>点击查看</a></div>
+                                </el-row>
+                            </div>
+                        </div>`
+            }
+            this.addMarkerInfo(element, value)
+            console.log(element)
+        },
+        // 标点点击弹窗
+        addMarkerInfo(element, value, isBtn = false) {
+            console.log(element, value)
+                // window.jMap.Popup && window.jMap.Popup.hide([this.oldPopup && this.oldPopup.id]);
+            if (this.oldPopup && value.id === this.oldPopup.id) {
+                window.jMap.Popup.hide();
+                return this.oldPopup = null
+            }
+            // console.log(value)
+            window.jMap.Popup.show({
+                id: value.id,
+                // position: value.wgs84position, //使用自定义窗体
+                position: { x: Number(value.wgs84position.x), y: Number(value.wgs84position.y), z: Number(value.wgs84position.z) }, //使用自定义窗体
+                element: element,
+            }, { isZoom: false, offset: [0, -40] });
+            if (!isBtn) {
+                window.jMap.goTo({
+                    x: Number(value.wgs84position.x),
+                    y: Number(value.wgs84position.y),
+                    radius: 1000
+                }, {
+                    duration: 3,
+                    offset: {
+                        heading: -4,
+                        pitch: -70,
+                        range: 0
+                    }
+                })
+                window.jMap.Buffer.generate({
+                    geometry: [{ position: [{ x: Number(value.wgs84position.x), y: Number(value.wgs84position.y) }], type: 'point' }],
+                    distance: 1000
+                }, {
+                    callBack: (el) => {
+                        console.log(el)
+                        for (const i in el) {
+                            var target = {
+                                id: i,
+                                position: CoordUtil.arrayToJson(el[i].rings[0])
+                            }
+                        }
+                        window.jMap.Locate.regionLocate(target, {
+                            style: {
+                                color: 'rgba(235, 98, 98, .1)',
+                                transparency: .3
+                            }
+                        })
+                    },
+                })
+            }
+            this.oldPopup = value
+        },
+        removePopup(e) {
+            console.log(e)
+        },
+    }
+}

src/components/mixins/map.js → src/components/mixins/map-gaode.js

@@ -29,6 +29,34 @@ export default {
 
     },
     methods: {
+        // 添加标点
+        addMarkerInfo(position, value) {
+            // this.map.getIsOpen();
+            this.map.clearInfoWindow();
+            var infoWindow = new AMap.InfoWindow({
+                isCustom: true, //使用自定义窗体
+                closeWhenClickMap: true,
+                content: `
+                    <div class="tableTooltip mapTab">
+                      <div class="tableTitle">
+                        <div>${value.type}</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <div class="max">水源位置：${value.address}</div>
+                        <div>电话：${value.phone}</div>
+                        <div class="max">支队名称：${value.detachmentName}</div>
+                        <div>管辖机构：${value.jurisdictionalAgency}</div>
+                        <div>水源类型：${value.type}</div>
+                        <div>取水形式：${value.getWaterType}</div>
+                        <div>水源性质：${value.waterAdministrative}</div>
+                        <div>状态：${value.status == 1 ?'可用':'不可用'}</div>
+                        <div>供水单位：${value.waterUnit}</div>
+                      </el-row>
+                    </div>`,
+                offset: new AMap.Pixel(16, -30)
+            });
+            infoWindow.open(this.map, position);
+        },
         async initMap() {
             this.map = await new AMap.Map('mapF', {
                 mapStyle: 'amap://styles/706effbde9cf9c72e136dfad8b9f6891', //设置地图的显示样式

src/main.js

@@ -21,20 +21,6 @@ app.config.globalProperties.$axios = http;
 // 对后端接口 进行全局注册
 app.config.globalProperties.$api = api;
 
-// import AMapLoader from "@amap/amap-jsapi-loader";
-
-// // 高德地图2.0 进行全局注册
-// app.config.globalProperties.$map = (plugins) => {
-//     return AMapLoader.load({
-//         key: "8e266e1ac2ad2383c7773ff504ac248f", // 申请好的Web端开发者Key，首次调用 load 时必填
-//         plugins: plugins //插件列表
-//     })
-// };
-
-// import AMap from 'vue-amap'
-// // import 'babel-polyfill'
-// window.AMap = AMap
-
 // 类型转换
 app.config.globalProperties.$qs = querystring;
 

src/views/Home.vue

@@ -287,7 +287,7 @@ export default {
     // 投诉举报情况 Top
     async getReportComplaint() {
       let res = await this.$axios.get(this.$api.siaeall.reportComplaint);
-      if (res)
+      if (res.data)
         this.reportComplaintList = res.data.map((val) => {
           return {
             name: val.type,
@@ -578,13 +578,13 @@ $centerCirWidth: 330px;
         position: absolute;
         left: 0;
         right: 0;
-        bottom: 85px;
+        bottom: 1.0625rem;
         margin: 0px auto;
         width: 9.5rem;
         z-index: 9;
       }
       .centerBot {
-        height: 150px;
+        height: 1.875rem;
         position: absolute;
         bottom: 0;
         width: 100%;
@@ -599,7 +599,7 @@ $centerCirWidth: 330px;
 .photo_box {
   width: 0.875rem;
   position: absolute;
-  left: -20px;
+  left: -0.25rem;
   right: 0;
   bottom: 0;
   top: 0;

src/views/comprehensive-disposal.vue

@@ -24,9 +24,9 @@
           <el-row class="leftBotContent">
             <el-row class="selectBar">
                <el-row>
-                <el-button size="mini" @click="searchTime('one')" :class="{ btnClick: timeArea === 'one' }">近一年</el-button>
-                <el-button size="mini" @click="searchTime('three')" :class="{ btnClick: timeArea === 'three' }">近三年</el-button>
-                <el-button size="mini" @click="searchTime('five')" :class="{ btnClick: timeArea === 'five' }">近五年</el-button>
+                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
+                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
+                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
               </el-row>
             </el-row>
             <el-row class="fireBar">
@@ -176,7 +176,7 @@ import barChart from "@c/bar";
 import lineSmooth from "@c/line-smooth";
 import gauge from "@c/gauge";
 import linstener from "@c/mixins/linstener";
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 
 
 export default {
@@ -301,7 +301,7 @@ export default {
       monthList:[],
       houseList:[],
       proptionList:[],
-      timeArea: 'one',
+      timeArea: 1,
     };
   },
   mixins: [linstener,map],
@@ -342,16 +342,25 @@ export default {
           this.$qs.stringify({
             current: 1,
             size: 100,
-            startTime: "2020-03-03 00:00:00",
-            endTime: "2020-03-03 23:59:59",
+            startTime: this.$store.state.timeList[0] || "",
+            endTime: this.$store.state.timeList[1] || "",
           })
       );
       if (res) this.tableData = res.data;
     },
-    // 警情时段分布
+    // 警情时段分布 
     async getHouse() {
-      let res = await this.$axios.get(this.$api.house.alertStatisticsByHouse);
-      if (res) this.houseList = res.data;
+      let res = await this.$axios.get(this.$api.house.alertStatisticsByHouse +
+          "?" +
+          this.$qs.stringify({
+            fireType: this.barForm.fireType,
+            startTime: this.$store.state.timeList[0] || "",
+            endTime: this.$store.state.timeList[1] || "",
+          }));
+      if (res){ 
+        this.houseList = res.data
+        this.$refs.lineSmooth.getData()
+      }
     },
     // 警情处置情况
     async getProption() {
@@ -360,11 +369,22 @@ export default {
     },
     // 历史警情趋势图
     async getMonth() {
-      let res = await this.$axios.get(this.$api.house.alertStatisticsByMonth);
-      if (res) this.monthList = res.data;
+      let res = await this.$axios.get(
+        this.$api.house.alertStatisticsByMonth +
+          "?" +
+          this.$qs.stringify({
+            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+          })
+      );
+      if (res) {
+        this.monthList = res.data;
+        this.$refs.barChart.getData();
+      }
     },
     searchTime(val){
       this.timeArea = val
+      this.getMonth()
     }
   },
 };

src/views/enforcement-dynamic.vue

@@ -163,7 +163,7 @@
 <script>
 import wordCloud from "@c/wordCloud";
 import linstener from "@c/mixins/linstener";
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 import category from "@c/category";
 import liquidFill from "@c/liquid-fill";
 export default {
@@ -299,7 +299,7 @@ export default {
           padding: 0.125rem 0.1rem;
           box-sizing: border-box;
           margin-bottom: 0.125rem;
-          border-radius: 10px;
+          border-radius: .125rem;
           & > .el-col {
             display: flex;
             justify-content: center;

src/views/fire-data-analysis.vue

@@ -82,12 +82,27 @@
         <div class="rightContent">
           <el-col class="rightTop">
             <h4>详细火灾情况</h4>
-            <se-table
+            <el-table
               ref="seTable"
-              :dataMap="tableData"
-              :headerData="headerData"
               :key="windowWidth"
-            ></se-table>
+              :data="tableData"
+              class="transparentTableRow"
+              height="100%"
+              :row-style="{ height: '.425rem' }"
+              cell-style="height:.425rem;box-sizing: border-box;"
+              style="width: 100%; margin: 0 auto"
+              :cell-class-name="tableRowClassName"
+            >
+              <el-table-column
+                show-overflow-tooltip
+                min-width="20"
+                v-for="item in headerData"
+                :key="item.prop"
+                :prop="item.prop"
+                align="center"
+                :label="item.name"
+              ></el-table-column>
+            </el-table>
           </el-col>
           <el-col class="rightBot">
             <h4>火灾情况分析</h4>
@@ -103,12 +118,11 @@
 import linstener from "@c/mixins/linstener";
 import categoryLine from "@c/category-line";
 import firePie from "@c/fire-pie";
-import seTable from "@c/se-table";
 import scatter from "@c/scatter";
 import AMap from 'AMap'
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 export default {
-  components: { categoryLine, firePie, seTable, scatter },
+  components: { categoryLine, firePie, scatter },
   mixins: [linstener,map],
   data() {
     return {
@@ -257,6 +271,11 @@ export default {
     this.initMap()
   },
   methods: {
+    tableRowClassName({row, column}) {
+      if (column.property === 'deathToll' && row.deathToll > 0) {
+        return "death";
+      }
+    },
     // 添加标点
     addMarkerInfo(position, content, value) {
         // this.map.getIsOpen();

src/views/fire-signs.vue

@@ -123,7 +123,7 @@ import categoryLine from "@c/category-line";
 import category from "@c/category";
 import seTable from "@c/se-table";
 import AMap from 'AMap'
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 import radarChart from "@c/radar";
 import wordCloud from "@c/wordCloud";
 export default {
@@ -339,8 +339,8 @@ export default {
     & > .el-col {
       flex: none;
       width: 100%;
-      height: calc(37.5% - 10px);
-      margin-top: 10px;
+      height: calc(37.5% - .125rem);
+      margin-top: .125rem;
       background: url('~@a/img/home/box-bg.png') no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -412,7 +412,7 @@ export default {
               }
               .el-progress{
                 flex: 1;
-                height: 25px;
+                height: .3125rem;
               }
             }
           }

src/views/foot.vue

@@ -27,45 +27,57 @@
         placement="top"
         trigger="click"
         class="bluePopover"
-        :offset="30"
+        :offset="10"
+        @after-enter="lxbShowPopover"
       >
         <template #reference>
-          <el-row class="blueHelp"></el-row>
+          <el-row class="blueHelp" ref="blueHelp"></el-row>
         </template>
-        <el-row class="dialogTitle">蓝小帮</el-row>
+        <div class="closeLxb" @click="$refs.blueHelp.$el.click();"></div>
+        <el-row class="dialogTitle">蓝小帮数据统计</el-row>
         <el-row class="dialogBox">
-          <el-col :span="5" @click="goBlueHelp(0)">
-            <img src="~@a/img/icon/blue1.png" alt="">
-            <span>项目申报记录</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(1)">
-            <img src="~@a/img/icon/blue2.png" alt="">
-            <span>用户反馈记录</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(2)">
-            <img src="~@a/img/icon/blue3.png" alt="">
-            <span>法规目录表</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(4)">
-            <img src="~@a/img/icon/blue4.png" alt="">
-            <span>普法宣传记录</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(6)">
-            <img src="~@a/img/icon/blue5.png" alt="">
-            <span>题目表</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(7)">
-            <img src="~@a/img/icon/blue6.png" alt="">
-            <span>关键字表</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(5)">
-            <img src="~@a/img/icon/blue7.png" alt="">
-            <span>用户信息表</span>
-          </el-col>
-          <el-col :span="5" @click="goBlueHelp(9)">
-            <img src="~@a/img/icon/blue8.png" alt="">
-            <span>留言记录表</span>
-          </el-col>
+          <div class="titleLxb"><span></span>开业检查（家）</div>
+          <el-row class="kyjc">
+            <el-col>
+              <div>
+                <span>{{lxbKyjc.count}}</span>
+                <span>总数</span>
+              </div>
+            </el-col>
+            <el-col>
+              <div>
+                <span>{{lxbKyjc.qualified}}</span>
+                <span>合格</span>
+              </div>
+            </el-col>
+            <el-col>
+              <div>
+                <span>{{lxbKyjc.noQualified}}</span>
+                <span>不合格</span>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="titleLxb">
+            <span></span>搜索次数统计
+            <div class="titleLxbR">累计总数：<span>{{lxbBarTotle}}</span>次</div>
+          </div>
+          <el-row class="lxbLineBox">
+            <lxb-bar
+              ref="lxbBar"
+              color="rgba(51,206,250,1)"
+              :dataMap="lxbBarList"
+            ></lxb-bar>
+          </el-row>
+          <div class="titleLxb">
+            <span></span>用户留言统计
+            <div class="titleLxbR">累计总数：<span>{{lxbLineTotle}}</span>次</div>
+          </div>
+          <el-row class="lxbLineBox">
+            <lxb-line
+              ref="lxbLine"
+              :dataMap="lxbLineList"
+            ></lxb-line>
+          </el-row>
         </el-row>
       </el-popover>
     </el-row>
@@ -73,7 +85,10 @@
 </template>
 
 <script>
+import lxbBar from "@c/lxb-bar";
+import lxbLine from "@c/lxb-line";
 export default {
+  components: { lxbBar, lxbLine },
   data() {
     return {
       btnList: [
@@ -86,7 +101,16 @@ export default {
         { name: "警情综合处置", router: "/comprehensive-disposal" },
         { name: "大型安保预案", router: "/security-plan" },
       ],
-      dialogVisible:false,
+      dialogVisible: false,
+      lxbLineList:[],
+      lxbBarList:[],
+      lxbBarTotle:0,
+      lxbLineTotle:0,
+      lxbKyjc:{
+        count:0,
+        qualified:0,
+        noQualified:0,
+      },
     };
   },
   watch: {
@@ -109,12 +133,33 @@ export default {
         });
       }
     },
-    handleClose(done){
-      done()
+    handleClose(done) {
+      done();
+    },
+    goBlueHelp(val) {
+      window.open(`http://120.55.70.156/bulehelp/?type=${val}`);
+    },
+    async lxbShowPopover() {
+      let res = await this.$axios.all([
+        this.$axios.get("/bule/robotQuestionMessage/ico"),//搜索问题图表
+        this.$axios.get("/bule/robotQuestionMessage/count"),//搜索问题汇总
+        this.$axios.get("/bule/robotQuestionMessageRecord/ico"),//用户留言图表
+        this.$axios.get("/bule/robotQuestionMessageRecord/count"),//用户留言汇总
+        this.$axios.get("/alFsdAll/csCount"),//开业检查汇总
+      ]);
+      if (res[0]){
+        this.lxbBarList = res[0].data
+        this.$refs.lxbBar.getData();
+      }
+      if (res[1]) this.lxbBarTotle = res[1].data
+      if (res[2]){
+        this.lxbLineList = res[2].data
+        this.$refs.lxbLine.getData();
+      }
+      if (res[3]) this.lxbLineTotle = res[3].data
+      if (res[4]) this.lxbKyjc = res[4].data
+      console.log(this.lxbBarList,this.lxbBarTotle,this.lxbLineList,this.lxbLineTotle,this.lxbKyjc)
     },
-    goBlueHelp(val){
-      window.open(`http://120.55.70.156/bulehelp/?type=${val}`)
-    }
   },
 };
 </script>
@@ -168,42 +213,101 @@ export default {
     transform: rotate(3deg);
     // padding-left: 90px;
   }
-  .blueHelp{
+  .blueHelp {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
-    width: .8rem;
-    height: .8rem;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 }
-.dialogTitle{
-  line-height: 30px;
+.dialogTitle {
+  line-height: .375rem;
   border-bottom: 1px solid #019fb7;
-  color: #56D1ED;
+  color: #56d1ed;
+}
+.bluePopover {
+  background: rgba(1, 159, 183, 0.2);
+  position: relative;
 }
-  .dialogBox{
-    width: 5.5rem;
-    height: auto;
+.closeLxb {
+  position: absolute;
+  right: .125rem;
+  top: .25rem;
+  width: .275rem;
+  height: .275rem;
+  z-index: 9;
+  background: url("../assets/img/home/close.png");
+  background-size: 100% 100%;
+}
+.dialogBox {
+  width: 5.5rem;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  .titleLxb {
+    height: 0.25rem;
+    width: 100%;
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
-    .el-col{
-      height: 1.25rem;
-      width: 1.25rem;
-      // margin: .125rem;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      font-size: .1875rem;
-      line-height: .375rem;
+    color: #02feff;
+    padding: 0.25rem 0;
+    box-sizing: content-box;
+    display: block;
+    & > span {
+      width: 0.0375rem;
+      height: 0.25rem;
+      background: #02feff;
+      float: left;
+      margin-right: 0.125rem;
+    }
+    .titleLxbR {
+      float: right;
+      color: #FFF;
       span{
-        margin-top: 10px;
+        color: rgba(254,0,0,1);
+      }
+    }
+  }
+  .kyjc {
+    height: 1.125rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .el-col {
+      width: 32%;
+      height: 100%;
+      flex: none;
+      background: url("../assets/img/home/boxbg.png");
+      background-size: 100% 100%;
+      > div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        box-shadow: inset 0 0 0.25rem 1px #30cfff;
+        border-top-left-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+        span {
+          &:first-child {
+            font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+            font-size: 0.35rem;
+            color: rgba(252, 187, 11, 1);
+          }
+        }
       }
     }
   }
+  .lxbLineBox {
+    width: 100%;
+    height: 1.5rem;
+  }
+}
 </style>

src/views/head.vue

@@ -148,6 +148,7 @@ export default {
         "changTimeList",
         val.map((val) => val.Format("yyyy-MM-dd hh:mm:ss"))
       );
+      this.timeArea = ''
     },
   },
 };

src/views/rescue-station.vue

@@ -204,7 +204,7 @@
 
 <script>
 import linstener from "@c/mixins/linstener";
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 import seTable from "@c/se-table";
 export default {
   data() {
@@ -514,7 +514,7 @@ export default {
   .leftBox {
     box-sizing: border-box;
     & > .el-col {
-      height: calc(50% - 5px);
+      height: calc(50% - .0625rem);
       background: url(~@a/img/enforce/bg1.png) no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -660,8 +660,8 @@ export default {
         height: 60%;
       }
       .rightBot{
-        margin-top: 10px;
-        height: calc(40% - 10px);
+        margin-top: .125rem;
+        height: calc(40% - .125rem);
         padding-top: 0.35rem;
       }
       .tableExpendTitle {

src/views/security-plan.vue

@@ -1,22 +1,597 @@
 <template>
-  <el-row></el-row>
+  <el-row class="contentBox">
+    <transition name="el-fade-in-linear">
+      <el-col class="leftBox" v-show="leftBtn">
+        <el-col>
+          <h4>大型安保预案</h4>
+          <div class="leftTopBox">
+            <div>
+              <span>大型安保名称：</span>
+              <span>某某活动安保</span>
+              <a href="javascript:;">查看预案</a>
+            </div>
+            <div>
+              <span>时间：</span>
+              <span>2021-05-28 09:00:00 ~ 2021-05-28 09:00:00</span>
+            </div>
+            <div>
+              <span>阶段：</span>
+              <span>XXXXXXXXXXXXXXXXXXXXX</span>
+            </div>
+            <div>
+              <span>保卫目标：</span>
+              <span>XXXXXXXXXXXXXXXXXXXXX</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col>
+          <h4>社会面火灾防控</h4>
+          <div class="leftCenterBox">
+            <div class="echartsLsit">
+              <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" color="rgba(191,66,22,1)" :size="36" :with="10"></gauge>
+              <gauge ref="gauge2" :dataMap="0.2" :dataNumber="20" color="rgba(20,225,234,1)" :size="36" :with="10"></gauge>
+              <gauge ref="gauge3" :dataMap="0.2" :dataNumber="20" color="rgba(248,237,65,1)" :size="36" :with="10"></gauge>
+              <gauge ref="gauge4" :dataMap="0.2" :dataNumber="20" color="rgba(117,255,99,1)" :size="36" :with="10"></gauge>
+            </div>
+            <div class="echatsGaugeTitle">
+              <el-col>检查家次(家)</el-col>
+              <el-col>发现隐患(起)</el-col>
+              <el-col>整改隐患(起)</el-col>
+              <el-col>单位类型数(种)</el-col>
+            </div>
+          </div>
+        </el-col>
+        <el-col>
+          <h4>重点区域人流情况</h4>
+          <div class="leftBotBox">
+            <div>
+              <img src="../assets/img/home/qiye.png" alt="">
+              <span>某某大型商场</span>
+              <span><b>8</b>人/次</span>
+              <div>低密度</div>
+            </div>
+            <div>
+              <img src="../assets/img/home/qiye.png" alt="">
+              <span>某某大型商场</span>
+              <span><b>30</b>人/次</span>
+              <div>超高密度</div>
+            </div>
+          </div>
+        </el-col>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col
+        class="centerBox"
+        :style="{
+          'max-width':
+            leftBtn && rightBtn
+              ? '8rem'
+              : !leftBtn && !rightBtn
+              ? '100%'
+              : leftBtn || rightBtn
+              ? '16rem'
+              : '8rem',
+        }"
+      >
+        <el-row class="leftBtn btnW" @click="leftBtnClick()">
+          <i
+            :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
+          ></i>
+        </el-row>
+        <el-row class="centerContent" id="mapF"></el-row>
+        <el-row class="rightBtn btnW" @click="rightBtnClick()">
+          <i
+            :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
+          ></i>
+        </el-row>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="rightBox" v-show="rightBtn">
+        <div class="btnList">
+          <div :class="{'isChack':isChack===1}" @click="isChack=1">进博会安保</div>
+          <div :class="{'isChack':isChack===2}" @click="isChack=2">某某演唱会安保</div>
+          <div :class="{'isChack':isChack===3}" @click="isChack=3">某某车站安保</div>
+        </div>
+        <el-col>
+          <h4>接警处置情况</h4>
+          <div class="rightTopBox">
+            <div>
+              <span><b>100</b>起<br><p>火灾</p></span>
+            </div>
+            <div>
+              <span><b>90</b>起<br><p>社会救助</p></span>
+            </div>
+            <div>
+              <span><b>60</b>起<br><p>抢险救援</p></span>
+            </div>
+          </div>
+        </el-col>
+        <el-col class="rightCenterBox">
+          <h4>接处警详情</h4>
+            <el-table
+              :data="tableData"
+              class="transparentTableRow"
+              height="100%"
+              row-style="height:.425rem;"
+              cell-style="height:.425rem;box-sizing: border-box;"
+              style="width: 100%; margin: 0 auto"
+            >
+              <el-table-column
+                v-for="item in headerData"
+                show-overflow-tooltip
+                :key="item.prop"
+                :prop="item.prop"
+                align="center"
+                min-width="20"
+                :label="item.name"
+              >
+              <template #default="scope">
+                  {{ item.prop === 'type' ? '' : (item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop])}}
+              </template>
+              </el-table-column>
+            </el-table>
+        </el-col>
+        <el-col class="zqzbll">
+          <h4>执勤战备力量部署</h4>
+          <div class="zqzbllBpx">
+            <div class="ryBox">
+              <div class="ryBoxTitle titleBoxZq">人员</div>
+              <div class="ryBoxContent contentBoxZq">
+                <div>作战指挥长 - 闵行中队：张三</div>
+                <div>作战指挥长 - 闵行中队：张三</div>
+                <div>作战指挥长 - 闵行中队：张三</div>
+                <div>作战指挥长 - 闵行中队：张三</div>
+                <div>作战指挥长 - 闵行中队：张三</div>
+                <div>作战指挥长 - 闵行中队：张三</div>
+              </div>
+            </div>
+            <div class="clBox">
+              <div class="clBoxTitle titleBoxZq">消防车辆</div>
+              <div class="clBoxContent contentBoxZq">
+                <div>化学消防车 - 1</div>
+                <div>化学消防车 - 1</div>
+                <div>化学消防车 - 1</div>
+                <div>化学消防车 - 1</div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-col>
+    </transition>
+  </el-row>
 </template>
 
 <script>
+import linstener from "@c/mixins/linstener";
+import map from "@c/mixins/map-gaode";
+import gauge from "@c/gauge";
 export default {
-  methods:{
-    getdata(){
-      
+  mixins: [linstener, map],
+  components: {gauge},
+  data(){
+    return{
+      isChack:1,
+      tableData: [
+        {
+          type: "火灾",
+          policeTime: "23:00:00",
+          alertLevel: "二级",
+          address: "闵行区",
+          car: "2辆",
+          policeCause: "电器火灾",
+          department: "吴泾支队",
+          status: "1",
+          callingUp: "1号",
+          equipName: "一七",
+          carNumber: "沪X5477应急",
+          carStatus: "出动",
+          disposeTime: "1:00：00",
+          correspondent: "张三",
+          commander: "李四",
+          firemen: "王五",
+          driver: "赵六",
+        },
+        {
+          type: "火灾",
+          policeTime: "23:00:00",
+          alertLevel: "二级",
+          address: "闵行区",
+          car: "2辆",
+          policeCause: "电器火灾",
+          department: "吴泾支队",
+          status: "1",
+          callingUp: "1号",
+          equipName: "一七",
+          carNumber: "沪X5477应急",
+          carStatus: "出动",
+          disposeTime: "1:00：00",
+          correspondent: "张三",
+          commander: "李四",
+          firemen: "王五",
+          driver: "赵六",
+        },
+        {
+          type: "火灾",
+          policeTime: "23:00:00",
+          alertLevel: "二级",
+          address: "闵行区",
+          car: "2辆",
+          policeCause: "电器火灾",
+          department: "吴泾支队",
+          status: "1",
+          callingUp: "1号",
+          equipName: "一七",
+          carNumber: "沪X5477应急",
+          carStatus: "出动",
+          disposeTime: "1:00：00",
+          correspondent: "张三",
+          commander: "李四",
+          firemen: "王五",
+          driver: "赵六",
+        },
+        {
+          type: "火灾",
+          policeTime: "23:00:00",
+          alertLevel: "二级",
+          address: "闵行区",
+          car: "2辆",
+          policeCause: "电器火灾",
+          department: "吴泾支队",
+          status: "1",
+          callingUp: "1号",
+          equipName: "一七",
+          carNumber: "沪X5477应急",
+          carStatus: "出动",
+          disposeTime: "1:00：00",
+          correspondent: "张三",
+          commander: "李四",
+          firemen: "王五",
+          driver: "赵六",
+        },
+        {
+          type: "火灾",
+          policeTime: "23:00:00",
+          alertLevel: "二级",
+          address: "闵行区",
+          car: "2辆",
+          policeCause: "电器火灾",
+          department: "吴泾支队",
+          status: "1",
+          callingUp: "1号",
+          equipName: "一七",
+          carNumber: "沪X5477应急",
+          carStatus: "出动",
+          disposeTime: "1:00：00",
+          correspondent: "张三",
+          commander: "李四",
+          firemen: "王五",
+          driver: "赵六",
+        },
+      ],
+      headerData: [
+        { prop: "policeTime", name: "立案时间" },
+        { prop: "alertLevel", name: "警情等级" },
+        { prop: "address", name: "案发地址" },
+        { prop: "car", name: "调动车辆" },
+        { prop: "type", name: "类型" },
+        { prop: "policeCause", name: "原因" },
+        { prop: "department", name: "所属中队" },
+        { prop: "status", name: "状况" },
+      ],
     }
-  }
+  },
+  mounted() {
+    window.addEventListener("resize", () => this.resizeTimeActions([this.$refs.gauge1,this.$refs.gauge2,this.$refs.gauge3,this.$refs.gauge4,]), true);
+    this.initMap();
+  },
+  methods: {
+    getdata() {},
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.el-row {
-  width: 100%;
-  height: 100%;
-  background: url(~@a/img/test/bg4.png) no-repeat;
-  background-size: 100% 100%;
+.contentBox {
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    height: 100%;
+    max-width: 8rem;
+  }
+  .leftBox {
+    display: flex;
+    flex-direction: column;
+    & > .el-col {
+      margin-top: .125rem;
+      background: url("~@a/img/home/box-bg.png") no-repeat;
+      background-size: 100% 100%;
+      flex: 1;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    & > .el-col:first-child {
+      margin-bottom: 0;
+    }
+    .leftTopBox{
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: .5rem .25rem .375rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      &>div{
+        padding-left: .375rem;
+        font-size: .2rem;
+        font-weight: 400;
+        text-align: left;
+        color: #ffffff;
+        &>span:first-child{
+          text-align: right;
+          width: 1.5rem;
+          display: inline-block;
+        }
+        a{
+          color: rgba(0,255,252,1);
+          margin-left: .375rem;
+        }
+      }
+    }
+    .leftCenterBox{
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: .25rem .25rem .125rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .echartsLsit{
+        // flex: 1;
+        height: 1.5rem;
+        display: flex;
+        width: 100%;
+      }
+      .echatsGaugeTitle{
+        width: 100%;
+        height: .25rem;
+        text-align: center;
+        display: flex;
+        &>div{
+          flex: 1;
+          font-size: .2rem;
+        }
+      }
+    }
+    .leftBotBox{
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: .5rem .25rem .375rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      &>div{
+        background: url('~@a/img/home/shidianbg.png');
+        background-size: 100% 100%;
+        width: 5.9375rem;
+        height: 1.0625rem;
+        display: flex;
+        align-items: center;
+        font-size: .225rem;
+        font-weight: 400;
+        color: #ffffff;
+        img{
+          width: .9375rem;
+          height: .6625rem;
+          margin-right: .125rem;
+        }
+        span:nth-child(2){
+          margin-right: .75rem;
+        }
+        span:nth-child(3){
+          width: 1.375rem;
+          b{
+            font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+            color: rgba(251,207,52,1);
+            font-size: .375rem;
+          }
+        }
+        div:nth-child(4){
+          width: 1.125rem;
+          height: .4rem;
+          border-radius: .2rem;
+          background: #51c08d;
+          line-height: .4rem;
+          text-align: center;
+          font-size: .2rem;
+        }
+      }
+      &>div:first-child{
+        margin-bottom: .25rem;
+      }
+    }
+  }
+  .btnList {
+    position: fixed;
+    top: 0.75rem;
+    right: 2rem;
+    width: 4.125rem;
+    height: .3125rem;
+    display: flex;
+    justify-content: center;
+    div {
+      cursor: pointer;
+      width: 33%;
+      height: 100%;
+      line-height: .3125rem;
+      text-align: center;
+      font-size: .15rem;
+      color: #FFF;
+      background: transparent;
+      box-shadow: inset 0 0 .0625rem 0 rgba(14,205,241,1);
+    }
+    & div:nth-child(1){
+      border-radius: .0625rem 0 0 .0625rem;
+    }
+    & div:nth-child(3){
+      border-radius: 0 .0625rem .0625rem 0;
+    }
+    .isChack{
+      color: #fff951;
+      box-shadow: inset 0 0 .0625rem 0 rgba(252,207,42,1);
+    }
+  }
+  .rightBox {
+    height: 100%;
+    width: 100%;
+    display: block;
+    position: relative;
+    & > .el-col {
+      margin-top: .125rem;
+      width: 100%;
+      background: url("~@a/img/home/box-bg.png") no-repeat;
+      background-size: 100% 100%;
+      flex: none;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    & > .el-col:nth-child(2) {
+      height: 220px;
+    }
+    & > .el-col:nth-child(3) {
+      flex: 1;
+      height: 30%;
+    }
+    & > .el-col:nth-child(4) {
+      height: calc(70% - 3rem);
+    }
+    .rightTopBox{
+      width: 100%;
+      padding: .5rem .625rem .375rem;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      &>div{
+        width: 1.75rem;
+        height: 1.625rem;
+        position: relative;
+        span{
+          position: absolute;
+          bottom: -0.3125rem;
+          right: 0;
+          left: 0;
+          margin: auto;
+          font-size: .2rem;
+          text-align: center;
+          b{
+            margin-right: .0625rem;
+            font-size: .4rem;
+            font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+            line-height: .5rem;
+          }
+          p{
+            color: #FFF;
+          }
+        }
+      }
+      &>div:nth-child(1){
+        background: url('../assets/img/home/zu.png');
+        background-size: 100% 100%;
+        span{
+          color: rgba(255,89,38,1);
+        }
+      }
+      &>div:nth-child(2){
+        background: url('../assets/img/home/zu1.png');
+        background-size: 100% 100%;
+        span{
+          color: rgba(124,248,253,1);
+        }
+      }
+      &>div:nth-child(3){
+        background: url('../assets/img/home/zu2.png');
+        background-size: 100% 100%;
+        span{
+          color: rgba(254,220,64,1);
+        }
+      }
+    }
+    .rightCenterBox{
+      padding: .4375rem .3125rem .1875rem;
+      box-sizing: border-box;
+    }
+    .zqzbll {
+      padding: .625rem .375rem .25rem;
+      .zqzbllBpx{
+        width: 100%;
+        height: 100%;
+        .titleBoxZq{
+            height: .475rem;
+            width: 100%;
+            color: rgba(0,255,255,1);
+            text-indent: .125rem;
+            font-size: .225rem;
+            line-height: .475rem;
+            font-weight: bold;
+            text-align: left;
+            background: rgba(0,250,251,0.10);
+        }
+        .contentBoxZq{
+          width: 100%;
+          height: calc(100% - .475rem);
+          scrollbar-width: none;
+          /* firefox */
+          -ms-overflow-style: none;
+          /* IE 10+ */
+          overflow-x: hidden;
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+              display: none;
+              /* Chrome Safari */
+          }
+          div{
+            width: 50%;
+            display: inline-block;
+            text-indent: .0625rem;
+            line-height: .4rem;
+            font-size: .2rem;
+            box-sizing: border-box;
+            border-bottom: 1px solid rgba(250,250,250,.3);
+          }
+        }
+        .ryBox{
+          width: 100%;
+          height: 60%;
+        }
+        .clBox{
+          width: 100%;
+          height: 40%;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/self-management.vue

@@ -127,7 +127,7 @@ import linstener from "@c/mixins/linstener";
 import categoryEnterprise from "@c/category-enterprise";
 import seTable from "@c/se-table";
 import gauge from "@c/gauge";
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 import radarChart from "@c/radar";
 export default {
   components: { categoryEnterprise, seTable, radarChart, gauge},
@@ -218,8 +218,8 @@ export default {
     & > .el-col {
       flex: none;
       width: 100%;
-      height: calc((70% - 20px)/2);
-      margin-top: 10px;
+      height: calc((70% - .25rem)/2);
+      margin-top: .125rem;
       background: url('~@a/img/home/box-bg.png') no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -316,7 +316,7 @@ export default {
       width: 100%;
       height: 100%;
       & > .el-col {
-        height: calc((60% - 20px)/2);
+        height: calc((60% - .25rem)/2);
         background: url('~@a/img/home/box-bg.png') no-repeat;
         background-size: 100% 100%;
         position: relative;

src/views/water-sources.vue

@@ -48,7 +48,7 @@
         <el-row class="leftBtn btnW" @click="leftBtnClick()">
           <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
         </el-row>
-        <el-row class="centerContent" id="mapF"></el-row>
+        <el-row class="centerContent" id="mapF" ref="mapF"></el-row>
         <el-row class="rightBtn btnW" @click="rightBtnClick()">
           <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
         </el-row>
@@ -172,12 +172,18 @@
 
 <script>
 import linstener from "@c/mixins/linstener";
-import map from "@c/mixins/map";
+import map from "@c/mixins/map-gaode";
 import waterGauge from "@c/water-gauge";
 import gauge from "@c/gauge";
 import seTable from "@c/se-table";
 import funnel from "@c/funnel";
-import AMap from 'AMap'
+
+// TODO 高德地图
+// import AMap from 'AMap'
+import {
+  getMonthStartDate,
+  getMonthEndDate,
+} from "../assets/js/dataFormate";
 export default {
   mixins: [linstener,map],
   components: { waterGauge, funnel, gauge,seTable },
@@ -233,8 +239,10 @@ export default {
       let res = await this.$axios.get(this.$api.water[this.timeArea === 'day' ? 'unitBeOnDuty' : 'unitBeOnDutyList'] +
           "?" +
           this.$qs.stringify({
-            startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
-            endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
+            // startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
+            // endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
+            startTime: this.timeArea === 'day' ? new Date().Format("yyyy-MM-dd") + ' 00:00:00' :getMonthStartDate(),
+            endTime:  this.timeArea === 'day' ? new Date().Format("yyyy-MM-dd") + ' 23:59:59' :getMonthEndDate(),
           })
       );
       if (res && this.timeArea === 'day') this.unitBeOnDutyList = res.data;
@@ -282,34 +290,6 @@ export default {
          this.addMarker(res.data.records,'water')
       }
     },
-    // 添加标点
-    addMarkerInfo(position, value) {
-        // this.map.getIsOpen();
-        this.map.clearInfoWindow();
-        var infoWindow = new AMap.InfoWindow({
-            isCustom: true, //使用自定义窗体
-            closeWhenClickMap: true,
-            content: `
-                <div class="tableTooltip mapTab">
-                  <div class="tableTitle">
-                    <div>${value.type}</div>
-                  </div>
-                  <el-row class="tableContent">
-                    <div class="max">水源位置：${value.address}</div>
-                    <div>电话：${value.phone}</div>
-                    <div class="max">支队名称：${value.detachmentName}</div>
-                    <div>管辖机构：${value.jurisdictionalAgency}</div>
-                    <div>水源类型：${value.type}</div>
-                    <div>取水形式：${value.getWaterType}</div>
-                    <div>水源性质：${value.waterAdministrative}</div>
-                    <div>状态：${value.status == 1 ?'可用':'不可用'}</div>
-                    <div>供水单位：${value.waterUnit}</div>
-                  </el-row>
-                </div>`,
-            offset: new AMap.Pixel(16, -30)
-        });
-        infoWindow.open(this.map, position);
-    },
     // 消防水源信息
     async getFireWaterStatistics() {
       let res = await this.$axios.get(

vue.config.js

@@ -44,6 +44,11 @@ module.exports = {
         })
         Object.assign(config, {
             externals: {
+                // 大数据地图
+                // 'JMap': 'JMap',
+                // 'JMapQuery': 'JMapQuery',
+
+                // 高德地图
                 'AMap': 'AMap',
                 'AMapUI': 'AMapUI'
             }