地图功能提交

whyczyk

2021-07-30 736188d35aa5a1782e1fc4e0a7ceb318e1448a54

地图功能提交

 package-lock.json

@@ -1703,6 +1703,16 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1729,6 +1739,53 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1743,6 +1800,16 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1760,6 +1827,18 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.3.3",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.3.tgz",
          "integrity": "sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -10594,87 +10673,6 @@
          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
          "dev": true
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.3.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.3.tgz",
      "integrity": "sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },

 src/assets/img/home.png

 src/assets/js/api.js

@@ -23,4 +23,44 @@
        url: "BattInfAction!serchAllStationName",
        data: "json=" + JSON.stringify(params)
    })
}

/**
 * 查询已添加到地图的机房
 * 参数:json={"adata":{"alm_cleared_type":0,"alm_id":1},"bplan":{"discharge_reason":3}}
 */
export const searchMap = () => {
    return axios({
        method: "post",
        url: "BattMap_informationAction!searchUserManageStation",
        data: "json=" + JSON.stringify({
            adata: {
                alm_cleared_type: 0,
                alm_id: 1,
            },
            bplan: {
                discharge_reason: 3,
            }
        })
    })
}

export const searchMapHomeState = () => {
    return axios({
        method: "post",
        url: 'BattMap_informationAction!findStationState',
        data: null
    });
}

/**
 * 首页地图json数据配置  查询关联地图
 * 参数： json={"id":id}
 */
export const getAllMapOutlineAction = (data) => {
    return axios({
        method: "post",
        url: "MapOutlineAction!getAll",
        data: 'json=' + JSON.stringify(data),
    });
}

 src/components/chart/chinaMap.vue

@@ -6,26 +6,6 @@

<script>
    import * as echarts from 'echarts';
    // 正常的图标
    import HomeNormalImage from '@/assets/img/home-normal.png';
    let homeNormalImage = new Image();
    homeNormalImage.src = HomeNormalImage;
    // 充电的图标
    import HomeChargeImage from '@/assets/img/home-charge.png';
    let homeChargeImage = new Image();
    homeChargeImage.src = HomeChargeImage;
    // 告警图标
    import HomeWarnImage from '@/assets/img/home-warn.png';
    let homeWarnImage = new Image();
    homeWarnImage.src = HomeWarnImage;
    // 放电图标
    import HomeDischargeImage from '@/assets/img/home-discharge.png';
    let homeDischargeImage = new Image();
    homeDischargeImage.src = HomeDischargeImage;

    let addHomeData = [];
    let abnormalArr = []; //异常数组
    let tempData = []; //站点数组
    export default {
        name: "chinaMap",
        chart: "",
@@ -129,102 +109,9 @@
                            }
                        }
                    },
                    series: sendData
                    series: sendData.series
                };
                this.setOption(option);
            },

            // 
            initCityChart() {
                searchMap().then((res) => {
                    let rs = JSON.parse(res.data.result);
                    let list = this.mergeMapInfos(rs);
                    if (list != undefined && list.length > 0) {
                        list.map((item, index) => {
                            item.name = item.StationName;
                            item.value = [];
                            item.value.push(item.longitude);
                            item.value.push(item.latitude);
                            tempData.push(item)
                        })
                        this.searchChartHomeState();

                        let mapDotList = list.map(data => {
                            return {
                                lng: data.longitude,
                                lat: data.latitude,
                                title: data.StationName,
                                data: data,
                                name: data.StationName,
                                geometry: {
                                    type: 'Point',
                                    coordinates: [data.longitude, data.latitude]
                                }
                            }
                        });
                        addHomeData = mapDotList;
                    } else {
                        this.initChart([], []);
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            searchChartHomeState() {
                this.$axios({
                    method: "post",
                    url: 'BattMap_informationAction!findStationState',
                    data: null
                }).then((res) => {
                    let rsState = JSON.parse(res.data.result);
                    let arr = [];
                    abnormalArr = [];
                    if (rsState.code === 1) {
                        let data = rsState.data;
                        data.map((item, i) => {
                            let infos = tempData.filter((jtem) => {
                                return jtem.StationId == item.StationId
                            })

                            if (infos.length > 0) {
                                let info = JSON.parse(JSON.stringify(infos[0]));
                                switch (item.num) {
                                    case 1: // 落后
                                        info.img = HomeDischargeImage;
                                        info.color = '#ff6a6a';
                                        abnormalArr.push(info);
                                        break;
                                    case 2: // 告警
                                        info.img = HomeWarnImage;
                                        info.color = '#d4ac6e';
                                        abnormalArr.push(info);
                                        break;
                                    case 3:
                                        info.img = HomeChargeImage;
                                        info.color = '#4ba1fa';
                                        abnormalArr.push(info);
                                        break;
                                    default:
                                        info.img = HomeNormalImage;
                                        break;
                                }
                                arr.push(info)
                            }
                        })
                        let arrId = [];
                        for (let item of arr) {
                            if (arrId.indexOf(item['StationId']) == -1) {
                                arrId.push(item['StationId']);
                                chartData.push(item);
                            }
                        }
                        debugger
                        this.initChart(chartData, abnormalArr);

                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            resize() {
                setTimeout(() => {

 src/pages/index.vue

@@ -4,7 +4,7 @@
    <van-tabs v-model="active" color="#41c5f6" :swipeable="true" background="#ffffff">
      <van-tab title="轮廓图">
        <div class="chartCon">
          <china-map ref="chinaMap" id="chinaMap" name="zhongguo"></china-map>
          <china-map ref="cityChart" id="cityChart" name="zhongguo"></china-map>
        </div>
      </van-tab>
      <van-tab title="站点列表">
@@ -15,8 +15,54 @@
</template>

<script>
  import * as ECharts from 'echarts';
  import ChinaMap from '@/components/chart/chinaMap.vue'
  import siteList from '@/components/site/siteList.vue'
  import {
    searchMap,
    searchMapHomeState,
    getAllMapOutlineAction,
  } from '@/assets/js/api'
  import HomeNormal from '@/assets/img/home.png'
  let mapHomeImage = new Image();
  mapHomeImage.src = HomeNormal;
  // 正常的图标
  import HomeNormalImage from '@/assets/img/home-normal.png';
  let homeNormalImage = new Image();
  homeNormalImage.src = HomeNormalImage;
  // 充电的图标
  import HomeChargeImage from '@/assets/img/home-charge.png';
  let homeChargeImage = new Image();
  homeChargeImage.src = HomeChargeImage;
  // 告警图标
  import HomeWarnImage from '@/assets/img/home-warn.png';
  let homeWarnImage = new Image();
  homeWarnImage.src = HomeWarnImage;
  // 放电图标
  import HomeDischargeImage from '@/assets/img/home-discharge.png';
  let homeDischargeImage = new Image();
  homeDischargeImage.src = HomeDischargeImage;
  const behindOverlay = {
    animate: "",
    img: ""
  };
  const warnOverlay = {
    animate: "",
    img: ""
  };
  const timeoutOverlay = {
    animate: "",
    img: ""
  };
  const normalOverlay = {
    animate: "",
    img: ""
  };
  let addHomeData = [];
  let chartData = []; //chart数据
  let abnormalArr = []; //异常数组
  let tempData = []; //站点数组
  let chart, chartLng, chartLat;
  export default {
    components: {
      ChinaMap,
@@ -28,11 +74,223 @@
      }
    },
    mounted() {
      // 初始化页面
      this.getAllMapOutlineAction();
    },
    methods: {
      getAllMapOutlineAction() { //查询激活轮廓图
        getAllMapOutlineAction().then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            let data = rs.data;
            data.map((item, index) => {
              if (item.status == 1) {
                this.mapName = item.name;
              }
            })
          }
      this.$nextTick(() => {
        this.$refs.chinaMap.setData({})
        this.$refs.chinaMap.searchChartHomeState();
            this.initCityChart();
          });
        }).catch((err) => {
          console.log(err);
        });
      },
      initCityChart() {
        searchMap().then((res) => {
          let rs = JSON.parse(res.data.result);
          let list = this.mergeMapInfos(rs);
          if (list != undefined && list.length > 0) {
            list.map((item, index) => {
              item.name = item.StationName;
              item.value = [];
              item.value.push(item.longitude);
              item.value.push(item.latitude);
              tempData.push(item)
            })
            this.searchChartHomeState();

            let mapDotList = list.map(data => {
              return {
                lng: data.longitude,
                lat: data.latitude,
                title: data.StationName,
                data: data,
                name: data.StationName,
                geometry: {
                  type: 'Point',
                  coordinates: [data.longitude, data.latitude]
                }
              }
            });
            addHomeData = mapDotList;
          } else {
            this.initChart([], []);
          }
        }).catch((err) => {
          console.log(err)
      })
    },
      searchChartHomeState() {
        searchMapHomeState().then((res) => {
          let rsState = JSON.parse(res.data.result);
          let arr = [];
          abnormalArr = [];
          if (rsState.code === 1) {
            let data = rsState.data;
            data.map((item, i) => {
              let infos = tempData.filter((jtem) => {
                return jtem.StationId == item.StationId
              })

              if (infos.length > 0) {
                let info = JSON.parse(JSON.stringify(infos[0]));
                switch (item.num) {
                  case 1: // 落后
                    info.img = HomeDischargeImage;
                    info.color = '#ff6a6a';
                    abnormalArr.push(info);
                    break;
                  case 2: // 告警
                    info.img = HomeWarnImage;
                    info.color = '#d4ac6e';
                    abnormalArr.push(info);
                    break;
                  case 3:
                    info.img = HomeChargeImage;
                    info.color = '#4ba1fa';
                    abnormalArr.push(info);
                    break;
                  default:
                    info.img = HomeNormalImage;
                    break;
                }
                arr.push(info)
              }
            })
            let arrId = [];
            for (let item of arr) {
              if (arrId.indexOf(item['StationId']) == -1) {
                arrId.push(item['StationId']);
                chartData.push(item);
              }
            }
            this.initChart(chartData, abnormalArr);

          }
        }).catch((err) => {
          console.log(err)
        })
      },
      initChart(chartData, abnormalArr) { //初始化chart图
        let option = {};
        if (abnormalArr.length > 0) {
          option = {
            series: [{ //图片
              name: '图片',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: function (value, params) {
                return 'image://' + params.data.img
              },
              symbolSize: [26, 26],
              label: {
                normal: {
                  show: false,
                }
              },
              data: chartData,
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              zlevel: 2
            }, { //波纹点
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              zlevel: 1,
              rippleEffect: {
                period: 4,
                scale: 4,
                brushType: 'fill'
              },
              hoverAnimation: false,
              label: {
                normal: {
                  show: false
                },
              },
              itemStyle: {
                normal: {
                  color: function (value, params) {
                    return value.data.color
                  },
                  shadowBlur: 8,
                  shadowColor: function (value, params) {
                    return value.data.color
                  },
                }
              },
              symbolSize: [15, 15],
              data: abnormalArr
            }]
          };
        } else {
          option = {
            series: [{ //图片
              name: '图片',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: function (value, params) {
                return 'image://' + params.data.img
              },
              symbolSize: [26, 26],
              label: {
                normal: {
                  show: false,
                }
              },
              data: chartData,
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              zlevel: 2
            }]
          };
        }
        console.log(option)
        this.$refs.cityChart.setData(option);
      },
      mergeMapInfos(list) {
        var mergeData = [];
        // 遍历list
        for (var i = 0; i < list.length; i++) {
          var _list = list[i];
          var isIn = this.checkMapInfoIsIn(_list, mergeData);
          if (isIn == -1) {
            mergeData.push(_list);
          }
        }
        // 返回合并值
        return mergeData;
      },
      checkMapInfoIsIn(mapInfo, mergeData) {
        var rs = -1;
        // 遍历mergeData
        for (var i = 0; i < mergeData.length; i++) {
          var _mergeData = mergeData[i];
          // 经纬度相同
          if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
            rs = i;
          }
        }
        return rs;
      },
    }
  }
</script>