机房列表

whycwx

2021-07-30 b9adfa8f6e54151b8f87dfade7866d2e60ce743e

机房列表

 src/assets/img/home-charge.png

 src/assets/img/home-discharge.png

 src/assets/img/home-normal.png

 src/assets/img/home-warn.png

 src/components/chart/chinaMap.vue

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

<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: "",
@@ -114,6 +133,99 @@
                };
                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(() => {
                    this.$options.chart.resize();

 src/main.js

@@ -1,5 +1,5 @@
import Vue from 'vue'

import axios from './assets/js/axios'
import {
  Toast,
  Notify,
@@ -51,6 +51,7 @@
Vue.prototype.$notify = Notify;
Vue.prototype.$dialog = Dialog;
Vue.prototype.$toast = Toast;
Vue.prototype.$axios = axios;

new Vue({
  router,

 src/pages/index.vue

@@ -30,6 +30,7 @@
    mounted() {
      this.$nextTick(() => {
        this.$refs.chinaMap.setData({})
        this.$refs.chinaMap.searchChartHomeState();
      })
    },
  }