地图修改

longyvfengyun

2023-03-10 28a6eb8e7da7f56219b7344efa4d2a8779e014d8

地图修改

 src/assets/js/const/index.js

@@ -20,6 +20,7 @@
import const_fbo4830 from "./const_fbo4830";
import const_fbo4815 from "./const_fbo4815";
import const_kgdy from "./const_kgdy";
import const_user from "./const_user";
export {
    const_9100,
    const_61850,
@@ -42,5 +43,6 @@
    const_ld_nine,
    const_fbo4830,
    const_fbo4815,
    const_kgdy
};
    const_kgdy,
    const_user
};

 src/components/mapMarkList.vue

New file
@@ -0,0 +1,72 @@
<template>
  <div class="mark-list-container">
    <div class="mark-list">
      <div class="mark-item">
        <span>浮充</span>
        <div class="mark-color float"></div>
      </div>
      <div class="mark-item">
        <span>放电</span>
        <div class="mark-color discharge"></div>
      </div>
      <div class="mark-item">
        <span>充电</span>
        <div class="mark-color charge"></div>
      </div>
      <div class="mark-item">
        <span>停电放电</span>
        <div class="mark-color power-cut"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mapMarkList",
  data() {
    return {};
  }
}
</script>

<style scoped>
.mark-list-container {
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.mark-list {
  display: inline-block;
  background-color: #041C42;
  padding: 16px 32px;
  border-radius: 12px;
}
.mark-item {
  text-align: right;
  margin-top: 4px;
  margin-bottom: 4px;
}
.mark-item span {
  font-size: 16px;
}
.mark-item .mark-color {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: grey;
  margin-left: 8px;
}
.mark-item .mark-color.float {
  background-color: #0081FE;
}
.mark-item .mark-color.discharge {
  background-color: #FE696A;
}
.mark-item .mark-color.charge {
  background-color: #65F53E;
}
.mark-item .mark-color.power-cut {
  background-color: #7668F9;
}
</style>

 src/components/myCharts/BaseChart.vue

@@ -5,6 +5,7 @@
    @dblclick="fullScreen">
    <div class="e-chart-container">
      <div class="e-chart" ref="chart"></div>
      <slot name="tools"></slot>
    </div>
    <div class="export-chart-wrapper">
      <div class="export-chart" ref="exportChart"></div>

 src/store/modules/user.js

@@ -3,96 +3,108 @@
import getItemByKey from "@/assets/js/tools/getItemByKey";

export default {
    namespaced: true,
    state() {
        let permits = sessionStorage.getItem('permits');
        let autoLogin = Number(sessionStorage.getItem('autoLogin'));
        let pageName = sessionStorage.getItem('pageName');
        let realTabsConfig = sessionStorage.getItem('realTabsConfig');
        let noSpeak = sessionStorage.getItem('noSpeak');
  namespaced: true,
  state() {
    let permits = sessionStorage.getItem('permits');
    let autoLogin = Number(sessionStorage.getItem('autoLogin'));
    let pageName = sessionStorage.getItem('pageName');
    let realTabsConfig = sessionStorage.getItem('realTabsConfig');
    let noSpeak = sessionStorage.getItem('noSpeak');
    let uRole = sessionStorage.getItem('uRole');
    return {
      permits: permits ? JSON.parse(permits) : [],
      autoLogin: autoLogin ? autoLogin : 0,
      pageName: pageName ? pageName : "m1c0",
      realTabsConfig: realTabsConfig ? JSON.parse(realTabsConfig) : [],
      noSpeak: noSpeak,
      uRole,
    };
  },
  getters: {
    pageName(state) {
      let reg = /^m[0-9]+c[0-9]+$/;
      if (reg.test(state.pageName)) {
        let temp = state.pageName.replace("m", "").split("c");
        return {
            permits: permits ? JSON.parse(permits) : [],
            autoLogin: autoLogin ? autoLogin : 0,
            pageName: pageName ? pageName : "m1c0",
            realTabsConfig: realTabsConfig ? JSON.parse(realTabsConfig) : [],
            noSpeak: noSpeak,
            m: temp[0],
            c: temp[1],
        };
      } else {
        return {
            m: 1,
            c: 0,
        };
      }
    },
    getters: {
        pageName(state) {
            let reg = /^m[0-9]+c[0-9]+$/;
            if (reg.test(state.pageName)) {
                let temp = state.pageName.replace("m", "").split("c");
                return {
                    m: temp[0],
                    c: temp[1],
                };
            } else {
                return {
                    m: 1,
                    c: 0,
                };
            }
        },
        realTabsConfig(state) {
            let realTabsConfig = state.realTabsConfig;
            let realTime = const_page.realTime;
            let result = {};
            realTime.map(item => {
                let config = getItemByKey(item.key, realTabsConfig);
                let show = config != 0 ? config.show : 1;
                result[item.key] = (show == 1) ? true : false;
            });
            return result;
        },
        noSpeak(state) {
          return state.noSpeak;
        }
    realTabsConfig(state) {
      let realTabsConfig = state.realTabsConfig;
      let realTime = const_page.realTime;
      let result = {};
      realTime.map(item => {
        let config = getItemByKey(item.key, realTabsConfig);
        let show = config != 0 ? config.show : 1;
        result[item.key] = (show == 1) ? true : false;
      });
      return result;
    },
    mutations: {
        setPermits(state, data) {
            state.permits = Array.isArray(data) ? data : [];
            sessionStorage.setItem('permits', JSON.stringify(data));
        },
        init(state) {
            state.permits = [];
        },
        changeAutoLogin(state, autoLogin) {
            state.autoLogin = autoLogin;
            sessionStorage.setItem('autoLogin', autoLogin);
        },
        changePage(state, pageName) {
            state.pageName = pageName;
            sessionStorage.setItem('pageName', pageName);
        },
        changeRealTabsConfig(state, data) {
            state.realTabsConfig = Array.isArray(data) ? data : [];
            sessionStorage.setItem('realTabsConfig', JSON.stringify(data));
        },
        changeNoSpeak(state, noSpeak) {
          state.noSpeak = noSpeak;
          sessionStorage.setItem('noSpeak', noSpeak);
        }
    noSpeak(state) {
      return state.noSpeak;
    },
    actions: {
        getPermits(context) {
            getPermits().then(res => {
                context.commit('setPermits', res.data.data);
            }).catch(error => {
                console.log(error);
            });
        },
        changeAutoLogin(context, autoLogin) {
            context.commit('changeAutoLogin', autoLogin);
        },
        changePage(context, pageName) {
            context.commit('changePage', pageName);
        },
        changeRealTabsConfig(context, data) {
            context.commit('changeRealTabsConfig', data);
        },
        changeNoSpeak(context, noSpeak) {
          context.commit('changeNoSpeak', noSpeak);
        }
    uRole(state) {
      return state.uRole;
    }
  },
  mutations: {
    setPermits(state, data) {
      state.permits = Array.isArray(data) ? data : [];
      sessionStorage.setItem('permits', JSON.stringify(data));
    },
    init(state) {
      state.permits = [];
    },
    changeAutoLogin(state, autoLogin) {
      state.autoLogin = autoLogin;
      sessionStorage.setItem('autoLogin', autoLogin);
    },
    changePage(state, pageName) {
      state.pageName = pageName;
      sessionStorage.setItem('pageName', pageName);
    },
    changeRealTabsConfig(state, data) {
      state.realTabsConfig = Array.isArray(data) ? data : [];
      sessionStorage.setItem('realTabsConfig', JSON.stringify(data));
    },
    changeNoSpeak(state, noSpeak) {
      state.noSpeak = noSpeak;
      sessionStorage.setItem('noSpeak', noSpeak);
    },
    changeURole(state, uRole) {
      state.uRole = uRole;
      sessionStorage.setItem('uRole', uRole);
    },
  },
  actions: {
    getPermits(context) {
      getPermits().then(res => {
          context.commit('setPermits', res.data.data);
      }).catch(error => {
          console.log(error);
      });
    },
    changeAutoLogin(context, autoLogin) {
      context.commit('changeAutoLogin', autoLogin);
    },
    changePage(context, pageName) {
      context.commit('changePage', pageName);
    },
    changeRealTabsConfig(context, data) {
      context.commit('changeRealTabsConfig', data);
    },
    changeNoSpeak(context, noSpeak) {
      context.commit('changeNoSpeak', noSpeak);
    },
    changeURole(context, uRole) {
      context.commit('changeURole', uRole);
    }
  },
};

 src/views/home/home-admin.vue

@@ -140,7 +140,11 @@
            </card-box>
          </div>
          <div class="map">
            <card-box title="站点地图"></card-box>
            <card-box title="站点地图">
              <map-chart>
                  <map-mark-list slot="tools"></map-mark-list>
              </map-chart>
            </card-box>
          </div>
        </div>
      </div>
@@ -152,7 +156,8 @@
import card from './components/card';
import info from './components/info-admin';
import cardBox from '@/components/bigScreenPage/big_screen_card';

import MapChart from "@/components/myCharts/MapChart.vue";
import MapMarkList from "@/components/mapMarkList.vue";
export default {
  name: '',

@@ -170,9 +175,11 @@
    }
  },
  components: {
    MapMarkList,
    card,
    info,
    cardBox
    cardBox,
    MapChart
  },
  methods: {
    toggleView() {
@@ -182,7 +189,7 @@
  },

  mounted() {
    

  }

}
@@ -361,4 +368,4 @@
    }
  }
}
</style>
</style>

 src/views/home/home-manage.vue

@@ -22,8 +22,9 @@
    DefaultHome
  },
  data() {
    let userPower = sessionStorage.getItem("userPower");
    return {
      uRole: 10,
      uRole: userPower,
    }
  }
}

 src/views/home/home-monitor.vue

@@ -397,7 +397,11 @@
            </div>
          </div>
          <div class="map">
            <card-box title="站点地图"></card-box>
            <card-box title="站点地图">
              <map-chart>
                <map-mark-list slot="tools"></map-mark-list>
              </map-chart>
            </card-box>
          </div>
        </div>
      </div>
@@ -409,6 +413,8 @@
import card from './components/card';
import info from './components/info';
import cardBox from '@/components/bigScreenPage/big_screen_card';
import MapChart from "@/components/myCharts/MapChart.vue";
import MapMarkList from "@/components/mapMarkList.vue";

export default {
  name: '',
@@ -420,6 +426,8 @@
    }
  },
  components: {
    MapMarkList,
    MapChart,
    card,
    info,
    cardBox
@@ -669,4 +677,4 @@
    overflow-y: auto;
  }
}
</style>
</style>

 src/views/home/home-ops.vue

@@ -185,7 +185,11 @@
            </div>
          </div>
          <div class="map">
            <card-box title="站点地图"></card-box>
            <card-box title="站点地图">
              <map-chart>
                <map-mark-list slot="tools"></map-mark-list>
              </map-chart>
            </card-box>
          </div>
        </div>
      </div>
@@ -197,6 +201,8 @@
import card from './components/card';
import info from './components/info';
import cardBox from '@/components/bigScreenPage/big_screen_card';
import MapChart from "@/components/myCharts/MapChart.vue";
import MapMarkList from "@/components/mapMarkList.vue";

export default {
  name: '',
@@ -215,6 +221,8 @@
    }
  },
  components: {
    MapMarkList,
    MapChart,
    card,
    info,
    cardBox
@@ -341,7 +349,7 @@

        .row {
          display: flex;
          

          .col {
            flex: 1;
            display: flex;
@@ -426,4 +434,4 @@
      margin-left: 10px;
    }
  }
}</style>
}</style>

 src/views/userMager/addEdit.vue

@@ -283,24 +283,7 @@
      dialog: false,
      udepartmentList: [],
      ujobGroupList: [],
      uroleList: [
        {
          label: "领导层",
          value: 10
        },
        {
          label: "管理员",
          value: 0,
        },
        {
          label: "维护组长",
          value: 1,
        },
        {
          label: "维护组员",
          value: 2,
        },
      ],
      uroleList: const_user.roleList,
      type: const_user.type,
      formData: {
        uid: this.opt.uid || 0,