From bb63e626e2222227cceb9b7a7e2ed4b632af3aa4 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期二, 05 一月 2021 11:41:23 +0800 Subject: [PATCH] 顶部表单 --- src/components/panel/MonitorPanel.vue | 29 ++- src/store/index.js | 52 ------ src/components/LayerController/modules/LcBaseMap.vue | 33 ++-- src/views/MapTemplate.vue | 33 ++-- .env | 9 + .env.test | 8 + src/components/LayerController/LayerController.vue | 81 ++++++----- src/components/LayerController/modules/LcServiceLayer.vue | 16 - src/store/modules/map.js | 50 +++++++ /dev/null | 16 -- .env.production | 8 + src/store/modules/app.js | 29 ++++ aliases.config.js | 52 +++--- 13 files changed, 236 insertions(+), 180 deletions(-) diff --git a/.env b/.env new file mode 100644 index 0000000..7b05847 --- /dev/null +++ b/.env @@ -0,0 +1,9 @@ +# .env +NODE_ENV=development +#vue椤圭洰 灞炴�у悕蹇呴』浠UE_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 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..eccd272 --- /dev/null +++ b/.env.production @@ -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 diff --git a/.env.test b/.env.test new file mode 100644 index 0000000..dc697e7 --- /dev/null +++ b/.env.test @@ -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 diff --git a/aliases.config.js b/aliases.config.js index a01418b..41e0168 100644 --- a/aliases.config.js +++ b/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' +// } diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index 61e0339..5481419 100644 --- a/src/components/LayerController/LayerController.vue +++ b/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; diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue index 9fca7f7..81d9b56 100644 --- a/src/components/LayerController/modules/LcBaseMap.vue +++ b/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; diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 9b9a706..621be78 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/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 diff --git a/src/components/panel/MonitorPanel.vue b/src/components/panel/MonitorPanel.vue index ba90e5b..9eef24a 100644 --- a/src/components/panel/MonitorPanel.vue +++ b/src/components/panel/MonitorPanel.vue @@ -236,8 +236,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 = { @@ -253,8 +254,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: { @@ -284,8 +286,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) @@ -330,8 +333,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 @@ -349,8 +353,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() @@ -370,7 +375,9 @@ return datas }, async handleGetDatas(params) { - let datas = await mapApi.getTransOrderlist(params) + // let datas = await mapApi.getTransOrderlist(params) + + let datas = params return datas }, showHZ() { diff --git a/src/store/app.js b/src/store/app.js deleted file mode 100644 index ac63037..0000000 --- a/src/store/app.js +++ /dev/null @@ -1,16 +0,0 @@ -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) - -export default new Vuex.Store({ - namespace: true, - state: { - }, - mutations: { - }, - actions: { - }, - getters: { - } -}) \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 5628136..1b3e167 100644 --- a/src/store/index.js +++ b/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: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE - 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 } -}) \ No newline at end of file +}) diff --git a/src/store/modules/app.js b/src/store/modules/app.js new file mode 100644 index 0000000..9fe8eb7 --- /dev/null +++ b/src/store/modules/app.js @@ -0,0 +1,29 @@ +export default { + + state: { + + //灞炴�� + + demoValue:{} + + }, + + getters: { + + getDemoValue: state => state.demoValue + + }, + + mutations: { + + //set鏂规硶 + + setDemoValue(state,demoValue){ + + state.demoValue = demoValue + + } + + } + +} diff --git a/src/store/modules/map.js b/src/store/modules/map.js new file mode 100644 index 0000000..d1e6379 --- /dev/null +++ b/src/store/modules/map.js @@ -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: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE + 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 +} diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 08869b5..c945854 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -21,7 +21,6 @@ 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 TopEnterprisePanel from "@components/panel/TopEnterprisePanel"; export default { @@ -35,10 +34,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(() => { @@ -46,12 +47,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) @@ -65,10 +66,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) } } } -- Gitblit v1.8.0