Skip to content

M
missis-demo
Commit 4b118e61 authored by 张泽丹's avatar 张泽丹 💻
Browse files
Options

优化

parent cd2dc6b8
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 133 deletions
public/index.html
View file @ 4b118e61
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>图层设计</title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but 图层设计 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
......
src/store/modules/layer.js
View file @ 4b118e61
...@@ -2,7 +2,7 @@ import defaultStyle from '../../config/default' ...@@ -2,7 +2,7 @@ import defaultStyle from '../../config/default'
const state = { const state = {
layersData:[], layersData:[],
layerStyle:{}, layerStyle:{},
setLayerStyle:{}, afterLayerStyle:{},
addLayerData:[] addLayerData:[]
} }
const mutations = { const mutations = {
...@@ -13,7 +13,7 @@ const mutations = { ...@@ -13,7 +13,7 @@ const mutations = {
state.layerStyle = data state.layerStyle = data
}, },
SET_LAYER_STYLE(state,data){ SET_LAYER_STYLE(state,data){
state.setLayerStyle = JSON.parse(JSON.stringify(data)) state.afterLayerStyle = JSON.parse(JSON.stringify(data))
}, },
ADD_LAYER_DATA(state,data){ ADD_LAYER_DATA(state,data){
state.addLayerData = data state.addLayerData = data
...@@ -35,12 +35,12 @@ const actions = { ...@@ -35,12 +35,12 @@ const actions = {
} }
const getters = { const getters = {
showStyleLayer:state => { showStyleLayer:state => {
return state.setLayerStyle return state.afterLayerStyle
}, },
getStyleUrl: state => { styleUrl: state => {
const layers = [] const layers = []
const urlStyle = {} const urlStyle = {}
const afterStyle = state.setLayerStyle const afterStyle = state.afterLayerStyle
Object.keys(afterStyle).forEach(layerId => { Object.keys(afterStyle).forEach(layerId => {
const _layerProp = state.layersData.find(item => item.id === layerId) const _layerProp = state.layersData.find(item => item.id === layerId)
const _afterStyle = afterStyle[layerId] const _afterStyle = afterStyle[layerId]
...@@ -61,7 +61,7 @@ const getters = { ...@@ -61,7 +61,7 @@ const getters = {
_urlStyleItem[styleType][key] = `${_afterStyleCfg[key]}` _urlStyleItem[styleType][key] = `${_afterStyleCfg[key]}`
} }
}) })
if (Object.keys(_urlStyleItem[styleType]).length === 0) { if (styleType !== 'icon_config' && Object.keys(_urlStyleItem[styleType]).length === 0) {
delete _urlStyleItem[styleType] delete _urlStyleItem[styleType]
} }
if (_urlStyleItem[styleType]) { if (_urlStyleItem[styleType]) {
...@@ -71,9 +71,9 @@ const getters = { ...@@ -71,9 +71,9 @@ const getters = {
_urlStyleItem[styleType] = iconCfg _urlStyleItem[styleType] = iconCfg
delete _urlStyleItem.PointSymbolizer delete _urlStyleItem.PointSymbolizer
} }
if (styleType === 'Filter') { }
_urlStyleItem[styleType] = _afterStyleItem[styleType] if (styleType === 'Filter') {
} _urlStyleItem[styleType] = _afterStyleItem[styleType]
} }
}) })
if (Object.keys(_urlStyleItem).length > 0) { if (Object.keys(_urlStyleItem).length > 0) {
......
src/views/Main.vue
View file @ 4b118e61
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@mouseup="stopMove"> @mouseup="stopMove">
<div class="left" :style="{width: leftWidth}"> <div class="left" :style="{width: leftWidth}">
<add-controls v-show="curShow === 'style'"></add-controls> <add-controls v-show="curShow === 'style'"></add-controls>
<code-mirror v-show="curShow === 'code'" class="code-mirror" ref='codeMirror' :url="getStyleUrl"></code-mirror> <code-mirror v-show="curShow === 'code'" class="code-mirror" ref='codeMirror' :url="styleUrl"></code-mirror>
</div> </div>
<div class="width-slider" <div class="width-slider"
@mousedown="startMove" @mousedown="startMove"
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters('layer', ['getStyleUrl']) ...mapGetters('layer', ['styleUrl'])
}, },
components:{ components:{
AddControls, AddControls,
......
src/views/addcontrols.vue
View file @ 4b118e61
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
handle=".handle"> handle=".handle">
<transition-group> <transition-group>
<div class="layer-item" v-for="layer in layerProp" :key="layer.id"> <div class="layer-item" v-for="layer in layerProp" :key="layer.id">
<layer-setting :ref="layer.id" :layer="layer" @change="onChange"></layer-setting> <layer-setting :ref="layer.id" :layer="layer" @change="onChange"
:layerStyle="afterLayerStyle[layer.id]"></layer-setting>
</div> </div>
</transition-group> </transition-group>
</draggable> </draggable>
...@@ -33,35 +34,26 @@ ...@@ -33,35 +34,26 @@
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import layerSetting from '@/components/layerSetting/LayerSetting' import layerSetting from '@/components/layerSetting/LayerSetting'
import axios from 'axios'; import axios from 'axios'
import { mapActions } from 'vuex'; import { mapActions, mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
styleVisible: false, checkAll: true,
provincevisible: false, layerProp:[],
regionvisible:false, layerStyles: {}
province:[], }
region:[],
indeterminate: true,
checkAll: true,
plainOptions:[],
layerData:[],
layerProp:[],
drawerTitle:{},
endStyleLayer:{},
allLayer: true
}
}, },
components:{ components:{
layerSetting, layerSetting,
draggable draggable
}, },
mounted() { mounted() {
this.getData() this.getData()
this.$bus.$on('updateStyle', this.onChange) this.$bus.$on('updateStyle', this.onChange)
}, },
computed: { computed: {
...mapState('layer', ['afterLayerStyle']),
checkedList () { checkedList () {
return this.layerProp.filter(item => item.isShow) return this.layerProp.filter(item => item.isShow)
}, },
...@@ -86,89 +78,44 @@ export default { ...@@ -86,89 +78,44 @@ export default {
} }
} }
}, },
watch:{
checkedList(val){
let len = this.checkedList.length
let len2 = this.layerData.length
let newarr = []
for(let i = 0;i<len;i++){
for(let a = 0;a<len2;a++){
if(this.checkedList[i] === this.layerData[a].title){
newarr.push(this.layerData[a].id)
}
}
}
this.addlayerdata(newarr)
}
},
methods: { methods: {
...mapActions('layer', ['getlayerdata','getlayerstyle','setlayerstyle','addlayerdata']), ...mapActions('layer', ['getlayerdata', 'setlayerstyle']),
submit(){ getData(){
console.log(this.endStyleLayer,'this.endStyleLayer') axios.get('/api/messis/server/china/info').then((res => {
let _self= this // axios.get('/api/test.json').then((res => {
let type this.layerProp = res.data.layer.map(item => {
switch (this.endStyleLayer.type) { item.isShow = true
case 'marker': item.isEditing = false
type = 'MarkersSymbolizer' return item
break;
case 'line':
type = 'LineSymbolizer'
break;
case 'Polygon':
type = 'PolygonSymbolizer'
break;
case 'text':
type = 'TextSymbolizer'
break;
default:
break;
}
let a = JSON.parse(JSON.stringify(this.endStyleLayer).replace(/val/g,type))
delete a.type
let obj = {
[this.drawerTitle.id]:[a]
}
this.setlayerstyle(obj)
this.styleVisible = false
},
getData(){
axios.get('/api/messis/server/china/info').then((res => {
// axios.get('/api/test.json').then((res => {
this.layerProp = res.data.layer.map(item => {
item.isShow = true
item.isEditing = false
return item
})
this.plainOptions = this.layerProp.map(item => ({label: item.title, value: item.id}))
this.layerData = res.data.layer
this.getlayerdata(this.layerProp)
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
})
}))
},
onChange() {
this.checkAll = this.checkedList.length === this.layerProp.length
this.setlayerstyle(this.checkedStyleList)
},
onCheckAllChange(checked) {
this.checkAll = checked
this.layerProp.forEach(item => item.isShow = checked)
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
}) })
}, this.getlayerdata(this.layerProp)
handleLayerMoved (e) {
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.onChange() this.onChange()
}, 100); }, 100);
}) })
} }))
},
onChange() {
this.checkAll = this.checkedList.length === this.layerProp.length
this.setlayerstyle(this.checkedStyleList)
},
onCheckAllChange(checked) {
this.checkAll = checked
this.layerProp.forEach(item => item.isShow = checked)
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
})
},
handleLayerMoved (e) {
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
})
}
}, },
} }
</script> </script>
......
vue.config.js
View file @ 4b118e61
module.exports = { module.exports = {
publicPath: './', publicPath: './',
lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false, productionSourceMap: false,
css: { css: {
loaderOptions: { loaderOptions: {
less: { less: {
javascriptEnabled: true // 解决ant-design-vue编译报错问题 javascriptEnabled: true // 解决ant-design-vue编译报错问题
}
} }
}
},
assetsDir: 'static',
devServer: {
hot: true,
port: 5500,
overlay: {
warnings: true,
errors: false
}, },
assetsDir: 'static', proxy: {
devServer: { '/api/messis': {
hot: true, target: 'http://10.40.16.44:5003',
port: 5500, // target:'http://192.168.1.142:5000',
overlay: { changeOrigin: true,
warnings: true, pathRewrite: {
errors: false '^/api/messis': ''
},
proxy: {
'/api/messis': {
target: 'http://10.40.16.44:5003',
// target:'http://192.168.1.142:5000',
changeOrigin: true,
pathRewrite: {
'^/api/messis': ''
}
} }
} }
} }
} }
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment