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 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>图层设计</title>
</head>
<body>
<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>
<div id="app"></div>
<!-- built files will be auto injected -->
......
src/store/modules/layer.js
View file @ 4b118e61
......@@ -2,7 +2,7 @@ import defaultStyle from '../../config/default'
const state = {
layersData:[],
layerStyle:{},
setLayerStyle:{},
afterLayerStyle:{},
addLayerData:[]
}
const mutations = {
......@@ -13,7 +13,7 @@ const mutations = {
state.layerStyle = 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){
state.addLayerData = data
......@@ -35,12 +35,12 @@ const actions = {
}
const getters = {
showStyleLayer:state => {
return state.setLayerStyle
return state.afterLayerStyle
},
getStyleUrl: state => {
styleUrl: state => {
const layers = []
const urlStyle = {}
const afterStyle = state.setLayerStyle
const afterStyle = state.afterLayerStyle
Object.keys(afterStyle).forEach(layerId => {
const _layerProp = state.layersData.find(item => item.id === layerId)
const _afterStyle = afterStyle[layerId]
......@@ -61,7 +61,7 @@ const getters = {
_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]
}
if (_urlStyleItem[styleType]) {
......@@ -71,9 +71,9 @@ const getters = {
_urlStyleItem[styleType] = iconCfg
delete _urlStyleItem.PointSymbolizer
}
if (styleType === 'Filter') {
_urlStyleItem[styleType] = _afterStyleItem[styleType]
}
}
if (styleType === 'Filter') {
_urlStyleItem[styleType] = _afterStyleItem[styleType]
}
})
if (Object.keys(_urlStyleItem).length > 0) {
......
src/views/Main.vue
View file @ 4b118e61
......@@ -4,7 +4,7 @@
@mouseup="stopMove">
<div class="left" :style="{width: leftWidth}">
<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 class="width-slider"
@mousedown="startMove"
......@@ -39,7 +39,7 @@ export default {
}
},
computed: {
...mapGetters('layer', ['getStyleUrl'])
...mapGetters('layer', ['styleUrl'])
},
components:{
AddControls,
......
src/views/addcontrols.vue
View file @ 4b118e61
......@@ -20,7 +20,8 @@
handle=".handle">
<transition-group>
<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>
</transition-group>
</draggable>
......@@ -33,35 +34,26 @@
<script>
import draggable from 'vuedraggable'
import layerSetting from '@/components/layerSetting/LayerSetting'
import axios from 'axios';
import { mapActions } from 'vuex';
import axios from 'axios'
import { mapActions, mapState } from 'vuex'
export default {
data() {
return {
styleVisible: false,
provincevisible: false,
regionvisible:false,
province:[],
region:[],
indeterminate: true,
checkAll: true,
plainOptions:[],
layerData:[],
layerProp:[],
drawerTitle:{},
endStyleLayer:{},
allLayer: true
}
return {
checkAll: true,
layerProp:[],
layerStyles: {}
}
},
components:{
layerSetting,
draggable
layerSetting,
draggable
},
mounted() {
this.getData()
this.$bus.$on('updateStyle', this.onChange)
},
computed: {
...mapState('layer', ['afterLayerStyle']),
checkedList () {
return this.layerProp.filter(item => item.isShow)
},
......@@ -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: {
...mapActions('layer', ['getlayerdata','getlayerstyle','setlayerstyle','addlayerdata']),
submit(){
console.log(this.endStyleLayer,'this.endStyleLayer')
let _self= this
let type
switch (this.endStyleLayer.type) {
case 'marker':
type = 'MarkersSymbolizer'
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);
...mapActions('layer', ['getlayerdata', 'setlayerstyle']),
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
})
},
handleLayerMoved (e) {
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);
})
},
handleLayerMoved (e) {
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
})
}
},
}
</script>
......
vue.config.js
View file @ 4b118e61
module.exports = {
publicPath: './',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
css: {
loaderOptions: {
less: {
javascriptEnabled: true // 解决ant-design-vue编译报错问题
}
publicPath: './',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
css: {
loaderOptions: {
less: {
javascriptEnabled: true // 解决ant-design-vue编译报错问题
}
}
},
assetsDir: 'static',
devServer: {
hot: true,
port: 5500,
overlay: {
warnings: true,
errors: false
},
assetsDir: 'static',
devServer: {
hot: true,
port: 5500,
overlay: {
warnings: true,
errors: false
},
proxy: {
'/api/messis': {
target: 'http://10.40.16.44:5003',
// target:'http://192.168.1.142:5000',
changeOrigin: true,
pathRewrite: {
'^/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