优化逻辑

YANGDL

2021-01-05 8356b1850885fe03a6bd388500a447dd5c42692c

优化逻辑

 .env

New file
@@ -0,0 +1,9 @@
# .env
NODE_ENV=development
#vue项目 属性名必须以VUE_APP_开头，比如VUE_APP_XXX
VUE_APP_MOCK=true
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply
VUE_APP_CLIENT_SECRET=no_apply

 .env.production

New file
@@ -0,0 +1,8 @@
# .env
NODE_ENV=production
VUE_APP_MOCK=false
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_BASE_URL=/api
VUE_APP_API_TOKEN_URL=https://oauth.siam.sinopec.com/
VUE_APP_CLIENT_ID=no_apply
VUE_APP_CLIENT_SECRET=no_apply

 .env.test

New file
@@ -0,0 +1,8 @@
# .env
NODE_ENV=test
VUE_APP_MOCK=false
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply
VUE_APP_CLIENT_SECRET=no_apply

 aliases.config.js

@@ -1,26 +1,26 @@
const path = require('path')

function resolveSrc(_path) {
  return path.join(__dirname, _path)
}

const aliases = {
  '@src': 'src',
  '@router': 'src/router',
  '@views': 'src/views',
  '@components': 'src/components',
  '@assets': 'src/assets',
  '@utils': 'src/utils',
  '@styles': 'src/styles'
}

module.exports = {
  webpack: {},
  jest: {}
}

for (const alias in aliases) {
  module.exports.webpack[alias] = resolveSrc(aliases[alias])
  module.exports.jest['^' + alias + '/(.*)$'] =
    '<rootDir>/' + aliases[alias] + '/$1'
}
// const path = require('path')
//
// function resolveSrc(_path) {
//   return path.join(__dirname, _path)
// }
//
// const aliases = {
//   '@src': 'src',
//   '@router': 'src/router',
//   '@views': 'src/views',
//   '@components': 'src/components',
//   '@assets': 'src/assets',
//   '@utils': 'src/utils',
//   '@styles': 'src/styles'
// }
//
// module.exports = {
//   webpack: {},
//   jest: {}
// }
//
// for (const alias in aliases) {
//   module.exports.webpack[alias] = resolveSrc(aliases[alias])
//   module.exports.jest['^' + alias + '/(.*)$'] =
//     '<rootDir>/' + aliases[alias] + '/$1'
// }

 src/components/LayerController/LayerController.vue

@@ -1,21 +1,21 @@
<template>
  <div class="floatPanel">
  <div class="float-panel">
    <!-- <i class="horn horn-tl"></i> -->
    <!-- <i class="horn horn-tr"></i> -->
    <i class="horn horn-br"></i>
    <i class="horn horn-bl"></i>

    <div class="head titleBorder">
      <div class="titleTextBorder">
        <div class="titleIcon"></div>
        <div class="titleText">业务看板</div>
        <div class="titleButton" :class="{switchHeadUp:true, switchHeadDown: !panelSwitch.main}" @click="switchPanel">
    <div class="head title-border">
      <div class="title-text-border">
        <div class="title-icon"></div>
        <div class="title-text">业务看板</div>
        <div class="title-button" :class="{'switch-head-up':true, 'switch-head-down': !panelSwitch.main}" @click="switchPanel">
          <!-- <i class="el-icon-arrow-down"></i> -->
        </div>
      </div>
    </div>
    <div class="bodyBox" id="panelContent">
      <div id="panelInnerContent" style="height: auto; overflow: hidden;">
    <div class="body-box" id="panelContent">
      <div id="panelInnerContent" :style="{ height:height }">
        <slot></slot>
      </div>
    </div>
@@ -24,10 +24,10 @@

<script>
import api from './LayerControllerAPI'
import { mapState, mapMutations } from 'vuex'
// import { mapState, mapMutations } from 'vuex'
import '@assets/css/map/magic.min.css'
import presets from './layerControllerPresets'
import $ from 'jquery'
// import $ from 'jquery'

import iconSetting from '@/assets/images/map-pages/icon/setting.png'

@@ -41,15 +41,22 @@
    }
  },
  computed: {
    ...mapState({
      map: state => state.map,
      L: state => state.L,
      layerHelper: state => state.layerHelper,
      layerControllerVisible: state => state.layerControllerVisible
    })
    map(){
      return this.$store.state.map.map
    },
    L(){
      return this.$store.state.map.L
    },
    layerHelper(){
      return this.$store.state.map.layerHelper
    },
    layerControllerVisible(){
      return this.$store.state.map.layerControllerVisible
    }
  },
  data() {
    return {
      height:'200px',
      icons:{
        setting:iconSetting
      },
@@ -65,8 +72,7 @@
     })
  },
  methods: {
    ...mapMutations(['updateLayerControllerVisible']),
    async init() {
    init() {
      this.initPreset()
    },
    initPreset() {
@@ -76,19 +82,16 @@
        if (prmPreset === 'undefined') {
          console.log('该图层控制面板的预设没有找到，请检查预设名称是否正确！')
        } else {
          this.updateLayerControllerVisible(this.layerControllerVisible)
          this.$store.commit('updateLayerControllerVisible', this.layerControllerVisible);
        }
      }
    },
    switchPanel() {
      this.panelSwitch.main = !this.panelSwitch.main
      if (this.panelSwitch.main) {
        $('#panelInnerContent').animate({ height: '500px' }, 'fast', 'swing', () => {
          $('#panelInnerContent').css('height', 'auto')
          $('#panelContent').css('height', 'auto')
        })
        this.height = '200px'
      } else {
        $('#panelInnerContent').animate({ height: '0px' }, 'fast', 'swing')
        this.height = '0px'
      }
    },
  }
@@ -97,7 +100,7 @@

<style lang="less">

.floatPanel{
.float-panel{
  position: absolute;
  left: 10px;
  bottom: 10px;
@@ -108,7 +111,11 @@
  div{
    color:#90c8e0;
  }
  .titleBorder{
  #panelInnerContent{
    overflow: hidden;
    transition: all 0.5s linear;
  }
  .title-border{
    width: 100%;
    height: 28px;
    background: #10488c;
@@ -116,7 +123,7 @@
    clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    position: relative;
  }
  .titleBorder:before {
  .title-border:before {
    content: "";
    display: block;
    position: absolute;
@@ -126,7 +133,7 @@
    left: 0;
    background-color: #38c8ef;
  }
  .titleBorder:after {
  .title-border:after {
    content: "";
    display: block;
    position: absolute;
@@ -138,14 +145,14 @@
    -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
    clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
  }
  .titleTextBorder {
  .title-text-border {
    width: 100%;
    height: 28px;
    background: #091331;
    -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
    clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
  }
  .titleIcon{
  .title-icon{
    float: left;
    width: 22px;
    height: 22px;
@@ -153,7 +160,7 @@
    margin-left: 2px;
    background-image: url(/assets/images/map-pages/icon/setting.png);
  }
  .titleText{
  .title-text{
    float: left;
    width: 150px;
    color: #00d0f9;
@@ -165,7 +172,7 @@
    filter: brightness(100%);
    text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
  }
  .titleline{
  .title-line{
    display: inline-block;
    width: 120px;
    height: 1px;
@@ -175,7 +182,7 @@
    line-height: 5px;
    vertical-align: middle;
  }
  .titlepoint{
  .title-point{
    display: inline-block;
    width: 5px;
    height: 5px;
@@ -184,7 +191,7 @@
    line-height: 5px;
    vertical-align: middle;
  }
  .titleButton{
  .title-button{
    float: right;
    width: 28px;
    height: 28px;
@@ -195,14 +202,14 @@
    }
  }

  .bodyBox{
  .body-box{
    background-color: rgba(44,62,80, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    height: auto;
  }

  .switchHeadUp{
  .switch-head-up{
    width: 22px;
    height: 16px;
    float: right;
@@ -214,7 +221,7 @@
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }
  .switchHeadDown{
  .switch-head-down{
    transform: rotateX(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,14 +1,20 @@
<template>
  <div class="inner-panel">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name"/>
      <input type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>
      <el-checkbox style="position: absolute;" name="basemap" v-model="selectedBasemap"   :value="item.code" label="item.code" @change="changeBasemap">标注</el-checkbox>
<!--      <el-popover-->
<!--          placement="top-start"-->
<!--          trigger="hover"-->
<!--          content="item.name">-->
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name" @click="changeBasemap"/>
<!--      </el-popover>-->
<!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcBaseMap",
  components: {},
@@ -19,17 +25,13 @@
    };
  },
  computed: {
    ...mapState({
      basemapHelper: (state) => {
        return state.basemapHelper;
      },
    }),
    basemapHelper() {
      return this.$store.state.map.basemapHelper
    }
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods: {
    ...mapMutations([]),
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
@@ -37,14 +39,8 @@
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
  }

};
</script>

@@ -55,6 +51,7 @@
  align-items: center;
}
.basemap-layer-item {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 10px;

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -27,7 +27,6 @@
</template>

<script>
    import {mapState, mapMutations} from "vuex";
    import WmsHelper from "../../helpers/WmsHelper";


@@ -44,20 +43,17 @@
            };
        },
        computed: {
            ...mapState({
                serviceLayerHelper: (state) => {
                    return state.serviceLayerHelper
                },
                mapConfig: (state) => {
                    return state.mapConfig
                }
            }),
          serviceLayerHelper(){
              return this.$store.state.map.serviceLayerHelper
          },
          mapConfig(){
            return this.$store.state.map.mapConfig
          }
        },
        mounted() {
            // console.log('03步骤：', this.helper)
        },
        methods: {
            ...mapMutations(['setSelectedServiceLayer', 'toggleServiceLayerFilter']),
            swAllLayers(item) {
                // eslint-disable-next-line no-debugger
                item.checked = !item.checked

 src/components/panel/MonitorPanel.vue

@@ -190,8 +190,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            },
            currentCorp: async function(val) {
                let params = {
@@ -207,8 +208,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            }
        },
        methods: {
@@ -230,8 +232,9 @@
                    current: page
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            },
            handleLocation(item) {
                window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
@@ -276,8 +279,9 @@
                    current: this.current
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.pager.records
                this.total = datas.data.pager.total
              console.log(datas)
                // this.list = datas.data.pager.records
                // this.total = datas.data.pager.total
            },
            async handleInit() {
                // this.list = wayBillData.data
@@ -295,8 +299,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            },
            async handleSetOrgCodeStrings() {
                let orgCodes = await this.handleGetOrgCode()
@@ -316,8 +321,11 @@
                return datas
            },
            async handleGetDatas(params) {
                let datas = await mapApi.getTransOrderlist(params)
                return datas
              // eslint-disable-next-line no-debugger
              // debugger
                // let datas = await mapApi.getTransOrderlist(params)
                // return datas
              return params
            },
            showHZ() {
                this.wayBillVisible = true
@@ -345,67 +353,50 @@
            position: absolute;
            right: 10px;
            top: 10px;

            .el-card__body {
                padding: 7px;
            }

            .el-form-item__content {
                color: rgb(52, 224, 255);
            }

            .el-picker-panel {
                background-color: #061e51 !important;
            }

            .el-input__inner {
                border-radius: 0 !important;
                background-color: #061e51 !important;
                border: solid 1px #0e639e !important;
            }

            .el-form-item__label {
                color: rgb(52, 224, 255);
            }

            .el-input__inner::placeholder {
                color: #9a9494;
            }

            /* 谷歌 */

            .el-input__inner::-webkit-input-placeholder {
                color: #9a9494;
            }

            /* 火狐 */

            .el-input__inner:-moz-placeholder {
                color: #9a9494;
            }

            /*ie*/

            .el-input__inner:-ms-input-placeholder {
                color: #9a9494;
            }

            .warning {
                color: #dcc805;
            }

            #plateNumber_n a {
                color: rgb(52, 224, 255);
            }

            .offline {
                color: #9a9494;
            }

            .customInput {
                width: 118px;
            }

            .btn-ok{
                float:right;
                margin-right:10px;
@@ -422,33 +413,27 @@
                color: white;
                border: 1px solid white;
            }

            .component-fade-enter-active, .component-fade-leave-active {
                transition: opacity .5s ease;
            }

            .component-fade-enter, .component-fade-leave-to
                /* .component-fade-leave-active for below version 2.1.8 */ {
                opacity: 0;
            }

            .B-TMD-table-icons ul li {
                float: left;
                margin: 10px;
                list-style: none;
            }

            .B-TMD-table-list {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .B-TMD-table-list-title {
                width: 100%;
                height: 50px;
            }

            .B-TMD-table-list-head {
                width: 160px;
                float: left;
@@ -457,7 +442,6 @@
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .B-TMD-table-list-title-y-adress {
                width: 16px;
                height: 22px;
@@ -465,7 +449,6 @@
                background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 -90px;
                cursor: pointer;
            }

            .B-TMD-table-list-title-y-car {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -45px 0;
                width: 38px;
@@ -473,7 +456,6 @@
                display: block;
                margin-top: 2px !important;
            }

            .B-TMD-table-list-title-y-car-offline {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -90px 0;
                width: 38px;
@@ -481,7 +463,6 @@
                display: block;
                margin-top: 2px !important;
            }

            .B-TMD-table-list-title-y-car-warning {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 0;
                width: 38px;
@@ -489,7 +470,6 @@
                display: block;
                margin-top: 2px !important;
            }

            .btn-stretch {
                width: 20px;
                height: 28px;
@@ -497,16 +477,13 @@
                margin-left: 10px;
                margin-top: 3px;
                cursor: pointer;

                transform: rotateY(180deg);
                transform-origin: 50% 50%;
                transition: transform 1s linear;
            }

            .btn-stretch-active {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -440px 0;
            }

            .panel-tab {
                position: absolute;
                left: 0;
@@ -517,7 +494,6 @@
                background-color: #030D2E;
                background: url('/assets/images/map-page/icon/caidan.png') no-repeat;
            }

            .B-TMT-tab-div {
                width: 29px;
                height: 29px;
@@ -529,7 +505,6 @@
                    // background: url("");
                }
            }

            .B-TMT-tab-waybill {
                width: 29px !important;
                height: 29px !important;
@@ -537,7 +512,6 @@
                margin-left: 0 !important;
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -320px 0;
            }

            .B-TMT-tab-route {
                width: 20px;
                height: 19px;
@@ -545,7 +519,6 @@
                margin-top: 6px;
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -169px 0;
            }

            .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
                width: 29px !important;
                height: 29px !important;
@@ -553,7 +526,6 @@
                margin-left: -1px !important;
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -361px 0 !important;
            }

            .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
                width: 32px !important;
                height: 29px !important;
@@ -561,15 +533,12 @@
                margin-left: -1px !important;
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -197px 0 !important;
            }

            .panel-tab ul {
                list-style: none;
            }

            .panel-tab ul li {
                height: 30px;
            }

            .right-control {
                width: 290px;
                height: 573px;
@@ -579,17 +548,14 @@
                z-index: 999;
                background: url('/assets/images/map-pages/icon/bgc.png') no-repeat;
            }

            .panel_searchTotal {
                font-size: 12px;
                float: right;
            }

            .panel_header {
                // background-color: #030D2E;
                padding: 7px 15px 3px 20px;
            }

            .panel_title {
                font-size: 12px;
                margin: 0px;
@@ -597,50 +563,40 @@
                color: #78c4ff;
                font-weight: bold;
            }

            .el-message-box__content {
                background-color: transparent;
            }

            .search-form .el-form-item {
                margin: 0px;
            }

            .search-form .el-icon-search {
                display: grid;
                line-height: 30px;
                font-size: 18px;
            }

            .search-panel {
                border: #07325B;
                background-color: #07325B !important;
                margin-top: 0px;

                .el-input__inner {
                    border-radius: 0px !important;
                    background-color: #061e51 !important;
                }
            }

            input::-webkit-input-placeholder {
                color: #569ee1;
            }

            input::-moz-input-placeholder {
                color: #569ee1;
            }

            input::-ms-input-placeholder {
                color: #569ee1;
            }

            input[type=text]:focus {
                outline: 1px solid #17e4f6;
                // box-shadow:  1px 0px 3px 0px #17e4f6;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            }

            .search-result {
                margin: 5px 0px 0px 0px;
                padding: 0px;
@@ -650,11 +606,9 @@
                background-color: transparent !important;
                margin-bottom: -8px !important;
            }

            .offline {
                color: #64778B;
            }

            .B-TMD-table-list {
                margin-top: 10px;
                text-align: left;
@@ -665,7 +619,6 @@
                line-height: 25px;
                background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
            }

            .B-TMD-inp-button {
                width: 46px;
                height: 52px;
@@ -675,14 +628,12 @@
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
                cursor: pointer;
            }

            .footer-page {
                position: absolute;
                background-color: transparent !important;
                bottom: 10px !important;
                margin-left: 0px;
                border: none;

                .warnPagination {
                    .btn-quicknext, .btn-quickprev {
                        color: #e4e8f1 !important;
@@ -729,7 +680,6 @@
                    }
                }
            }

            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;

 src/store/app.js

File was deleted

 src/store/index.js

@@ -1,60 +1,18 @@
/* eslint-disable no-debugger */
import Vue from 'vue'
import Vuex from 'vuex'
import app from './app'
import mapConfig from '../conf/MapConfig'

import map from './modules/map'
// import app from './modules/app'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentCorp: null,
    currentCorpType: null,
    L: null,
    map: null, // 实例化的map
    basemapHelper: {}, // 影像地图图层控制器实现助手程序
    serviceLayerHelper: {}, // 服务图层控制器实现助手程序
    vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
    layerControllerVisible: { // 图层控制面板的显示状态››
      layerController: true, // 爸爸栏目：是否显示图层控制面板
    },

    showServiceLayerFilter: false, // Service图层过滤器
    selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
    serviceLayerFilters: {}, // 服务图层控制过滤配置

    mapConfig : mapConfig
  },
  mutations: {
    setMapObj(state, mObject) {
      state.L = mObject.L
      state.map = mObject.map
    },
    setBasemapHelper(state, layerHelper) {
      state.basemapHelper = layerHelper
    },
    setServiceLayerHelper(state, layerHelper) {
      state.serviceLayerHelper = layerHelper
    },
    setVectorLayerHelper(state, layerHelper) {
      state.vectoryLayerHelper = layerHelper
    },
    updateLayerControllerVisible(state, preset) {
      state.layerControllerVisible = preset
    },
    setSelectedServiceLayer(state, selectedServiceLayer){
      state.selectedServiceLayer = selectedServiceLayer
    },
    toggleServiceLayerFilter(state){
      state.showServiceLayerFilter = !state.showServiceLayerFilter
    }
  },
  actions: {
    //
  },
  getters: {
  },
  modules: {
    app
    // app,
    map
  }
})
})

 src/store/modules/app.js

New file
@@ -0,0 +1,29 @@
export default {

    state: {

        //属性

        demoValue:{}

    },

    getters: {

        getDemoValue: state => state.demoValue

    },

    mutations: {

        //set方法

        setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

    }

}

 src/store/modules/map.js

New file
@@ -0,0 +1,50 @@
import mapConfig from '../../conf/MapConfig'

const state = {
    currentCorp: null,
    currentCorpType: null,
    L: null,
    map: null, // 实例化的map
    basemapHelper: {}, // 影像地图图层控制器实现助手程序
    serviceLayerHelper: {}, // 服务图层控制器实现助手程序
    vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
    layerControllerVisible: { // 图层控制面板的显示状态››
        layerController: true, // 爸爸栏目：是否显示图层控制面板
    },
    showServiceLayerFilter: false, // Service图层过滤器
    selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
    serviceLayerFilters: {}, // 服务图层控制过滤配置
    mapConfig: mapConfig
}
const mutations = {
    setMapObj(state, mObject) {
        state.L = mObject.L
        state.map = mObject.map
    },
    setBasemapHelper(state, layerHelper) {
        state.basemapHelper = layerHelper
    },
    setServiceLayerHelper(state, layerHelper) {
        state.serviceLayerHelper = layerHelper
    },
    setVectorLayerHelper(state, layerHelper) {
        state.vectoryLayerHelper = layerHelper
    },
    updateLayerControllerVisible(state, preset) {
        state.layerControllerVisible = preset
    },
    setSelectedServiceLayer(state, selectedServiceLayer) {
        state.selectedServiceLayer = selectedServiceLayer
    },
    toggleServiceLayerFilter(state) {
        state.showServiceLayerFilter = !state.showServiceLayerFilter
    }
}
const actions = {

}
export default {
    state,
    mutations,
    actions
}

 src/views/MapTemplate.vue

@@ -20,7 +20,7 @@
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'
// import { mapMutations, mapState } from 'vuex'

export default {
  name: 'MapTemplate',
@@ -33,10 +33,12 @@
    }
  },
  computed:{
    ...mapState({
      showServiceLayerFilter: state => state.showServiceLayerFilter,
      mapConfig: state => state.mapConfig
    })
    showServiceLayerFilter(){
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig(){
      return this.$store.state.map.mapConfig
    }
  },
  beforeMount(){
      this.$nextTick(() => {
@@ -44,12 +46,12 @@
      })
  },
  methods:{
      ...mapMutations({
        setMapObj: 'setMapObj',
        setBasemapHelper: 'setBasemapHelper',
        setServiceLayerHelper: 'setServiceLayerHelper',
        setVectorLayerHelper: 'setVectorLayerHelper'
      }),
    saveMapStatus(){
      this.$store.commit('setMapObj', this.mapObj);
      this.$store.commit('setBasemapHelper', this.basemapHelper);
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper);
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper);
    },
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
@@ -63,10 +65,12 @@
        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers(this.mapConfig)

        this.setMapObj(this.mapObj)
        this.setBasemapHelper(this.basemapHelper)
        this.setServiceLayerHelper(this.serviceLayerHelper)
        this.setVectorLayerHelper(this.vectorLayerHelper)

        this.saveMapStatus()
        // this.setMapObj(this.mapObj)
        // this.setBasemapHelper(this.basemapHelper)
        // this.setServiceLayerHelper(this.serviceLayerHelper)
        // this.setVectorLayerHelper(this.vectorLayerHelper)
      }
  }
}