Commit 444d3932 authored by Your Name's avatar Your Name

电子weilan添加

parent 763bcd8e
...@@ -197,6 +197,14 @@ export function getDCList (parameter) { ...@@ -197,6 +197,14 @@ export function getDCList (parameter) {
params: {guid:parameter} params: {guid:parameter}
}) })
} }
// 获取门店电子围栏详情
export function saveElecfence (parameter) {
return axios({
url: 'branch/city-distribution-settings/city-distribution-setting-save',
method: 'post',
data: parameter
})
}
// 删除门店电子围栏 // 删除门店电子围栏
export function deleteElecfence(id) { export function deleteElecfence(id) {
console.log(id) console.log(id)
......
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
dataIndex: 'TITLE', dataIndex: 'TITLE',
// fixed: 'left', // fixed: 'left',
// width: 200, // width: 200,
width: '20%', width: '25%',
scopedSlots: { customRender: 'TITLE' }, scopedSlots: { customRender: 'TITLE' },
customRender: (value, row, index) => { customRender: (value, row, index) => {
var ret = [] var ret = []
...@@ -225,7 +225,7 @@ export default { ...@@ -225,7 +225,7 @@ export default {
}, },
{ {
title: '菜单状态', title: '菜单状态',
width: '8%', width: '6%',
dataIndex: 'STATUS', dataIndex: 'STATUS',
customRender: (state, row, index) => { customRender: (state, row, index) => {
return <div>{state === 0 ? <a-tag color="red">禁用</a-tag> : <a-tag color="cyan">启用</a-tag>}</div> return <div>{state === 0 ? <a-tag color="red">禁用</a-tag> : <a-tag color="cyan">启用</a-tag>}</div>
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
}, },
{ {
title: '是否为菜单', title: '是否为菜单',
width: '6%', width: '5%',
dataIndex: 'IS_MENU', dataIndex: 'IS_MENU',
customRender: text => { customRender: text => {
if (Number(text) == 0) { if (Number(text) == 0) {
...@@ -246,7 +246,7 @@ export default { ...@@ -246,7 +246,7 @@ export default {
}, },
{ {
title: '是否顶部菜单', title: '是否顶部菜单',
width: '6%', width: '5%',
dataIndex: 'IS_TOP_MENU', dataIndex: 'IS_TOP_MENU',
customRender: text => { customRender: text => {
if (Number(text) == 0) { if (Number(text) == 0) {
...@@ -258,7 +258,7 @@ export default { ...@@ -258,7 +258,7 @@ export default {
}, },
{ {
title: '是否默认显示', title: '是否默认显示',
width: '6%', width: '5%',
dataIndex: 'IS_DEFAULT_SHOW', dataIndex: 'IS_DEFAULT_SHOW',
customRender: text => { customRender: text => {
if (Number(text) == 0) { if (Number(text) == 0) {
......
...@@ -6,9 +6,15 @@ ...@@ -6,9 +6,15 @@
<template> <template>
<div class="amap-page-container"> <div class="amap-page-container">
<a-form :form="o2oForm"> <a-form :form="o2oForm">
<div class="amap-mainbar" v-show="false">
<a-form-item>
<a-input type="hidden" v-decorator="['GUID']" />
<!-- <span v-model="dataInfo.ADDRESS"></span> -->
</a-form-item>
</div>
<div class="amap-mainbar"> <div class="amap-mainbar">
<a-form-item label="门店地址" :labelCol="labelCol" :wrapperCol="wrapperCol" > <a-form-item label="门店地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-model='dataInfo.ADDRESS'/> <a-input v-model="dataInfo.ADDRESS" />
<!-- <span v-model="dataInfo.ADDRESS"></span> --> <!-- <span v-model="dataInfo.ADDRESS"></span> -->
</a-form-item> </a-form-item>
</div> </div>
...@@ -17,7 +23,9 @@ ...@@ -17,7 +23,9 @@
:label-col="formItemLayout.labelCol" :label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol" :wrapper-col="formItemLayout.wrapperCol"
> >
<a-checkbox v-decorator="['STATUS',{valuePropName:'checked',normalize:checkBox}]">是否开启O2O电子围栏</a-checkbox> <a-checkbox v-decorator="['STATUS', { valuePropName: 'checked', normalize: checkBox }]"
>是否开启O2O电子围栏</a-checkbox
>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
...@@ -25,154 +33,164 @@ ...@@ -25,154 +33,164 @@
:label-col="formItemLayout.labelCol" :label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol" :wrapper-col="formItemLayout.wrapperCol"
> >
<div class="actions"> <div class="actions">
<a-button type="primary">全景图</a-button> <a-button type="primary">全景图</a-button>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="配送区域设置" label="配送区域设置"
:label-col="formItemLayout.labelCol" :label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol" :wrapper-col="formItemLayout.wrapperCol"
> >
<a-radio-group
<a-radio-group @change="gomodeChange" v-decorator="['REGION_TYPE',{initialValue:'1',normalize:checkRadio}]"> @change="gomodeChange"
<a-radio value='1'>不同区域不同配送费</a-radio> v-decorator="['REGION_TYPE', { initialValue: '1', normalize: checkRadio }]"
<a-radio value='2'>不同距离不同配送费</a-radio> >
<a-radio value="1">不同区域不同配送费</a-radio>
<a-radio value="2">不同距离不同配送费</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<div class="tip"> <div class="tip">
<a-form-item label="" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
<a-form-item <div class="adddivson" @click="addO2oRegions">
label="" <button>添加配送区域</button>
:label-col="formItemLayout.labelCol" </div>
:wrapper-col="formItemLayout.wrapperCol"
>
<div class="adddivson" @click="addO2oRegions">
<button>添加配送区域</button>
</div>
<div class="add-distance"> <div class="add-distance">
<div class="region-distance" v-show="o2oRegionType==2"> <div class="region-distance" v-show="o2oRegionType == 2">
<div class="region-line"> <div class="region-line">
<div class="region-distance-txt">配送费:</div> <div class="region-distance-list">
<div class="region-distance-list"> <div class="region-input">
<div class="region-input"> <a-form-item label="配送费">
<input type="text" />
</a-form-item>
</div>
</div> </div>
<div class="regintxt">公里内</div> <div class="region-distance-list">
<div class="region-input"> <div class="region-input">
<input type="text" /> <a-form-item>
<a-input type="text" v-decorator="['REGION_DISTR_DISTANCE', { initialValue: '0' }]" />
</a-form-item>
</div>
<div class="regintxt">公里内</div>
<div class="region-input">
<a-form-item>
<a-input type="text" v-decorator="['REGION_DISTR_PRICE', { initialValue: '0' }]" />
</a-form-item>
</div>
<div class="regintxt"></div>
</div> </div>
<div class="regintxt"></div> <div class="region-distance-list">
</div> <div class="regintxt">增加</div>
<div class="region-distance-list"> <div class="region-input">
<div class="regintxt">增加</div> <a-form-item>
<div class="region-input"> <a-input type="text" v-decorator="['INCREASE_DISTANCE', { initialValue: '0' }]" />
<input type="text" /> </a-form-item>
</div>
<div class="regintxt">公里</div>
</div> </div>
<div class="regintxt">公里</div> <div class="region-distance-list">
</div> <div class="regintxt">配送费增加</div>
<div class="region-distance-list"> <div class="region-input">
<div class="regintxt">配送费增加</div> <a-form-item>
<div class="region-input"> <a-input type="text" v-decorator="['INCREASE_PRICE', { initialValue: '0' }]" />
<input type="text" /> </a-form-item>
</div>
<div class="regintxt"></div>
</div> </div>
<div class="regintxt"></div>
</div> </div>
<div class="tips">注:因考虑实际送货路况,配送费计算按车行距离,非地图直线距离.</div>
</div> </div>
<div class="tips">注:因考虑实际送货路况,配送费计算按车行距离,非地图直线距离.</div>
</div>
<div class="region-con-xq"> <div class="region-con-xq">
<div class="region-distance-xq" :class=[{active:region.is_checked}] @click="regionChecked(region,index)" v-bind:key="region.SORT" v-for="(region,index) in o2oRegions"> <div
<div class="region-distance-txt-xq"> class="region-distance-xq"
<div> :class="[{ active: region.is_checked }]"
<div @click="regionChecked(region, index)"
class="region-icon-01" :style="region.colorstyle" v-bind:key="region.SORT"
></div>配送区域{{ region.SORT }}: v-for="(region, index) in o2oRegions"
>
<div class="region-distance-txt-xq">
<div>
<div class="region-icon-01" :style="region.colorstyle"></div>
配送区域{{ region.SORT }}:
</div>
<div class="region-xq-del" @click.stop="deleteO2oRegions(index)">删除</div>
</div> </div>
<div class="region-xq-del" @click.stop="deleteO2oRegions(index)">删除</div> <div class="region-distance-li-xq">
</div> <!-- <div class="regintxt-xq">起送价:</div>
<div class="region-distance-li-xq">
<!-- <div class="regintxt-xq">起送价:</div>
<div class="region-input-xq"> <div class="region-input-xq">
<input type="text" /> <input type="text" />
</div> --> </div> -->
<!-- <div class="regintxt-xq"></div> --> <!-- <div class="regintxt-xq"></div> -->
</div>
</div> <div class="region-mode" v-if="o2oRegionType == 1">
<div class="region-mode" v-if="o2oRegionType==1"> <a-form-item
<a-form-item marginBottom="0px"
marginBottom="0px" label="配送费"
label="配送费" :labelCol="labelCol"
:labelCol="labelCol" :wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
> >
<a-input v-model='region.DELIVERY_PRICE' name="DELIVERY_PRICE[]"/> <a-input v-model="region.DELIVERY_PRICE" name="DELIVERY_PRICE[]" />
</a-form-item> </a-form-item>
<!-- <div class="regintxt-xq">配送费:</div> <!-- <div class="regintxt-xq">配送费:</div>
<div class="region-input-xq"> <div class="region-input-xq">
<input type="text" /> <input type="text" />
</div> --> </div> -->
<!-- <div class="regintxt-xq"></div> --> <!-- <div class="regintxt-xq"></div> -->
</div>
<div class="region-mode">
<a-form-item
label="起送价"
:labelCol="labelCol" :wrapperCol="wrapperCol"
>
<a-input v-model='region.INITIAL_PRICE' name="DELIVERY_PRICE[]"/>
</a-form-item>
<a-form-item
label="划分方式"
:labelCol="labelCol" :wrapperCol="wrapperCol"
>
<a-radio-group @change="goEditChange($event,region)" v-model="region.DIVIDE_TYPE">
<a-radio value="1">半径</a-radio>
<a-radio value="2">自定义</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="配送区域:"
:labelCol="labelCol" :wrapperCol="wrapperCol"
v-if="region.DIVIDE_TYPE==1" >
<div class="ps-region-input">
<input type="text" v-model="region.REGION_R" />
</div> </div>
<div class="hz-kilometre">米内</div> <div class="region-mode">
</a-form-item> <a-form-item label="起送价" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-model="region.INITIAL_PRICE" name="DELIVERY_PRICE[]" />
</a-form-item>
<a-form-item label="配送区域:" <a-form-item label="划分方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
:labelCol="labelCol" :wrapperCol="wrapperCol" <a-radio-group @change="goEditChange($event, region)" v-model="region.DIVIDE_TYPE">
v-else-if="region.DIVIDE_TYPE==2" > <a-radio value="1">半径</a-radio>
<div class="hz-kilometre"><span></span>区域内</div> <a-radio value="2">自定义</a-radio>
</a-form-item> </a-radio-group>
<!-- <div class="region-listblock-arrow" style="border:1px red solid;"></div> --> </a-form-item>
</div>
<div class="region-listblock-arrow"></div> <a-form-item
label="配送区域:"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
v-if="region.DIVIDE_TYPE == 1"
>
<div class="ps-region-input">
<input type="text" v-model="region.REGION_R" />
</div>
<div class="hz-kilometre">米内</div>
</a-form-item>
</div> <a-form-item
label="配送区域:"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
v-else-if="region.DIVIDE_TYPE == 2"
>
<div class="hz-kilometre"><span></span>区域内</div>
</a-form-item>
<!-- <div class="region-listblock-arrow" style="border:1px red solid;"></div> -->
</div>
<div class="region-listblock-arrow"></div>
</div>
</div> </div>
<!-- <!--
<div class="adddivson" @click="addO2oRegions"> <div class="adddivson" @click="addO2oRegions">
<button>添加配送区域</button> <button>添加配送区域</button>
</div> --> </div> -->
</div> </div>
</a-form-item> </a-form-item>
</div>
</div>
<div class="mapMain"> <div class="mapMain">
<el-amap <el-amap
ref="map" ref="map"
:plugin="mapsetting.plugin" :plugin="mapsetting.plugin"
:vid="mapsetting.vid" :vid="mapsetting.vid"
:amap-manager="mapsetting.amapManager" :amap-manager="mapsetting.amapManager"
:center="mapsetting.center" :center="mapsetting.center"
...@@ -180,43 +198,40 @@ ...@@ -180,43 +198,40 @@
:events="mapsetting.events" :events="mapsetting.events"
class="amap-demo" class="amap-demo"
> >
<div v-bind:key="region.SORT" v-for="(region,index) in o2oRegions"> <div v-bind:key="region.SORT" v-for="(region, index) in o2oRegions">
<el-amap-circle <el-amap-circle
v-if="region.DIVIDE_TYPE==1" v-if="region.DIVIDE_TYPE == 1"
:center="region.center" :center="region.center"
:editable="region.editable" :editable="region.editable"
:visible="region.visible" :visible="region.visible"
:strokeColor="region.strokeColor" :strokeColor="region.strokeColor"
:strokeWeight="region.strokeWeight" :strokeWeight="region.strokeWeight"
:fillColor="region.fillColor" :fillColor="region.fillColor"
:fillOpacity="region.fillOpacity" :fillOpacity="region.fillOpacity"
:radius="region.REGION_R" :radius="region.REGION_R"
:events="region.events" :events="region.events"
></el-amap-circle> ></el-amap-circle>
<el-amap-polygon <el-amap-polygon
v-if="region.DIVIDE_TYPE==2" v-if="region.DIVIDE_TYPE == 2"
:vid="index" :vid="index"
:ref="`polygon_${index}`" :ref="`polygon_${region.SORT}`"
:path="region.REGION_RANGE" :path="region.REGION_RANGE"
:editable="region.editable" :editable="region.editable"
:visible="region.visible" :visible="region.visible"
:strokeColor="region.strokeColor" :strokeColor="region.strokeColor"
:strokeWeight="region.strokeWeight" :strokeWeight="region.strokeWeight"
:fillColor="region.fillColor" :fillColor="region.fillColor"
:fillOpacity="region.fillOpacity" :fillOpacity="region.fillOpacity"
:draggable="region.draggable" :draggable="region.draggable"
:events="region.events" :events="region.events"
></el-amap-polygon> ></el-amap-polygon>
</div> </div>
</el-amap> </el-amap>
</div> </div>
<a-form-item <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
:wrapperCol="{ span: 24 }" <a-button @click="submitForm('O2O')" htmlType="submit" type="primary">提交</a-button>
style="text-align: center" <a-button @click="goBack" style="margin-left: 8px">返回</a-button>
> </a-form-item>
<a-button htmlType="submit" type="primary">提交</a-button>
<a-button @click="goBack" style="margin-left: 8px">返回</a-button>
</a-form-item>
</a-form> </a-form>
<!-- <div>{{O}}{{P}}{{lat}}{{lng}}</div> --> <!-- <div>{{O}}{{P}}{{lat}}{{lng}}</div> -->
</div> </div>
...@@ -231,7 +246,7 @@ ...@@ -231,7 +246,7 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import VueAMap from 'vue-amap' import VueAMap from 'vue-amap'
import { getElecfenceDetails } from '@/api/store' import { getElecfenceDetails, saveElecfence } from '@/api/store'
import { parseString } from 'loader-utils' import { parseString } from 'loader-utils'
Vue.use(VueAMap) Vue.use(VueAMap)
...@@ -244,38 +259,34 @@ export default { ...@@ -244,38 +259,34 @@ export default {
name: 'Gaode', name: 'Gaode',
data: function() { data: function() {
return { return {
defaultColors:[ defaultColors: [
['255,152,68','#ff9844'], ['255,152,68', '#ff9844'],
['81,255,68','#51ff44'], ['81,255,68', '#51ff44'],
['51,136,255','#3388ff'], ['51,136,255', '#3388ff'],
['255,68,68','#ff4444'] ['255,68,68', '#ff4444']
], ],
sort:0,//正在操作的区域编号 sort: 0, //正在操作的区域编号
dataInfo:[], dataInfo: [],
o2oRegionType:'1', o2oRegionType: '1',
o2oRegions:[], o2oRegions: [],
mapsetting:{ mapsetting: {
vid:'O2oMap', vid: 'O2oMap',
zoom: 13, zoom: 13,
center: [121.59996, 31.197646], center: [121.59996, 31.197646],
amapManager:amapManager, amapManager: amapManager,
plugin: [ plugin: [
{ {
pName: 'ToolBar', pName: 'ToolBar',
events: { events: {
init(instance) { init(instance) {
console.log(instance); console.log(instance)
} }
} }
} }
], ],
events: { events: {}
}
}, },
labelCol: { span: 7 }, labelCol: { span: 7 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
o2oForm: this.$form.createForm(this), o2oForm: this.$form.createForm(this),
...@@ -283,7 +294,7 @@ export default { ...@@ -283,7 +294,7 @@ export default {
value: 1, value: 1,
// workFlowStatus:1, // workFlowStatus:1,
// polygonsObj:[], // polygonsObj:[],
visible: false, visible: false
// editable: false, // editable: false,
// amapManager: amapManager, // amapManager: amapManager,
// ruler:false, // ruler:false,
...@@ -363,168 +374,254 @@ export default { ...@@ -363,168 +374,254 @@ export default {
// } // }
// }, // },
mounted(){ mounted() {
this.loadinfo(); this.loadinfo()
}, },
methods: { methods: {
//添加区域 //添加区域
addO2oRegions(){ addO2oRegions() {
let sort = 0; let sort = 0
//把其他区域设置为不可编辑状态、其他区域不选中 //把其他区域设置为不可编辑状态、其他区域不选中
for(let i in this.o2oRegions){ for (let i in this.o2oRegions) {
this.o2oRegions[i]['editable']=false; this.o2oRegions[i]['editable'] = false
this.o2oRegions[i]['is_checked']=false; this.o2oRegions[i]['is_checked'] = false
if(this.o2oRegions[i]['SORT']>=sort){ if (this.o2oRegions[i]['SORT'] >= sort) {
sort = this.o2oRegions[i]['SORT'] sort = this.o2oRegions[i]['SORT']
} }
} }
sort++; sort++
if(this.defaultColors.length==0){ if (this.defaultColors.length == 0) {
console.log("不能添加更多了") console.log('不能添加更多了')
return false; return false
} }
let center = this.mapsetting.center; let center = this.mapsetting.center
console.log(sort) console.log(sort)
let color = this.defaultColors.pop(); let color = this.defaultColors.pop()
let colorstyle = { let colorstyle = {
'borderColor':'rgba('+color[0]+')', borderColor: 'rgba(' + color[0] + ')',
'backgroundColor':'rgba('+color[0]+',0.4)', backgroundColor: 'rgba(' + color[0] + ',0.4)'
} }
let range_num = "0.01";//距离圆心变化数 let range_num = '0.01' //距离圆心变化数
let o2oRegion = { let o2oRegion = {
'is_checked':true,//是否选中 is_checked: true, //是否选中
'color':color,//颜色 color: color, //颜色
'colorstyle':colorstyle,//显示的颜色数组 colorstyle: colorstyle, //显示的颜色数组
'SORT':sort,//序号 SORT: sort, //序号
'COLORS':color[1],//区域颜色 COLORS: color[1], //区域颜色
'DIVIDE_TYPE':'1',//默认圆 DIVIDE_TYPE: '1', //默认圆
'REGION_R':'1000',//默认圆1公里半径 REGION_R: '1000', //默认圆1公里半径
'REGION_RANGE':'',//自定义数组 REGION_RANGE: '', //自定义数组
'INITIAL_PRICE':'0',//起送价 INITIAL_PRICE: '0', //起送价
'DELIVERY_PRICE':'0',//配送价 DELIVERY_PRICE: '0', //配送价
'editable':true,//编辑状态 editable: true, //编辑状态
'visible':true,//是否显示 visible: true, //是否显示
'center':center,//圆心位置 center: center, //圆心位置
'strokeColor':color[1],//线条颜色 strokeColor: color[1], //线条颜色
'strokeWeight':'1',//轮廓线宽度 strokeWeight: '1', //轮廓线宽度
'fillColor':color[1],//填充颜色 fillColor: color[1], //填充颜色
'fillOpacity':'0.3', fillOpacity: '0.3',
'draggable':true,//多边形是否可移动 draggable: true, //多边形是否可移动
'REGION_RANGE':[ REGION_RANGE: [
[parseFloat(center[0])-parseFloat(range_num),parseFloat(center[1])+parseFloat(range_num)], [parseFloat(center[0]) - parseFloat(range_num), parseFloat(center[1]) + parseFloat(range_num)],
[parseFloat(center[0])+parseFloat(range_num),parseFloat(center[1])+parseFloat(range_num)], [parseFloat(center[0]) + parseFloat(range_num), parseFloat(center[1]) + parseFloat(range_num)],
[parseFloat(center[0])+parseFloat(range_num),parseFloat(center[1])-parseFloat(range_num)], [parseFloat(center[0]) + parseFloat(range_num), parseFloat(center[1]) - parseFloat(range_num)],
[parseFloat(center[0])-parseFloat(range_num),parseFloat(center[1])-parseFloat(range_num)], [parseFloat(center[0]) - parseFloat(range_num), parseFloat(center[1]) - parseFloat(range_num)],
[parseFloat(center[0])-parseFloat(range_num),parseFloat(center[1])+parseFloat(range_num)] [parseFloat(center[0]) - parseFloat(range_num), parseFloat(center[1]) + parseFloat(range_num)]
], ],
events : { events: {
adjust: (e) => { adjust: e => {
if(e.target.CLASS_NAME=='AMap.Circle'){ if (e.target.CLASS_NAME == 'AMap.Circle') {
this.o2oRegions[this.sort].REGION_R=e.radius; this.o2oRegions[this.sort].REGION_R = e.radius
}
},
change:(e)=>{
console.log(e)
},
end:(e)=>{
console.log(e)
} }
},
change: e => {
console.log(e)
},
end: e => {
console.log(e)
}
} }
}; }
// this.o2oRegions[sort]=o2oRegion; // this.o2oRegions[sort]=o2oRegion;
// Vue.set(this.o2oRegions,sort,o2oRegion); // Vue.set(this.o2oRegions,sort,o2oRegion);
this.o2oRegions.push(o2oRegion); this.o2oRegions.push(o2oRegion)
this.sort = this.o2oRegions.length-1 this.sort = this.o2oRegions.length - 1 //这个代表正在选中的那条数据
}, },
goBack(){ goBack() {
this.$router.push({ path: "/storedc/Electronicfence" }) this.$router.push({ path: '/storedc/Electronicfence' })
}, },
deleteO2oRegions(index){ deleteO2oRegions(index) {
//还回去点颜色
this.defaultColors.push(this.o2oRegions[index]['color']) this.defaultColors.push(this.o2oRegions[index]['color'])
this.o2oRegions.splice(index,1); this.o2oRegions.splice(index, 1)
}, },
//切换选中区域 //切换选中区域
regionChecked(region,index){ regionChecked(region, index) {
//把其他区域设置为不可编辑状态、其他区域不选中 //把其他区域设置为不可编辑状态、其他区域不选中
for(let i in this.o2oRegions){ for (let i in this.o2oRegions) {
this.o2oRegions[i]['editable']=false; this.o2oRegions[i]['editable'] = false
this.o2oRegions[i]['is_checked']=false; this.o2oRegions[i]['is_checked'] = false
} }
region.editable=true; region.editable = true
region.is_checked=true; region.is_checked = true
this.sort = index; this.sort = index
}, },
// 获取信息 submitForm(type) {
loadinfo(){ if (type == 'O2O') {
console.log(this.$route.query) const {
var guid=this.$route.query.GUID; o2oForm: { validateFields }
getElecfenceDetails(guid).then(res => { } = this
this.$nextTick(() => validateFields({ force: true }, (err, values) => {
{ if (!err) {
this.dataInfo = res; let region = []
this.mapsetting.center = [res.LAT,res.LNG];//设置地图中心点 for (let i in this.o2oRegions) {
this.o2oFormInfo={ // let polygon_sort = 'polygon_'+this.o2oRegions[i]['SORT'];
// 'SETTING_TYPE':res['020']['SETTING_TYPE'], // console.log(this.$refs['polygon_'+this.o2oRegions[i]['SORT']][0].$$getPath());
// 'BRANCH_GUID':res['020']['BRANCH_GUID'], let region_path = '1'
// 'GUID':res['020']['GUID'], if (this.o2oRegions[i]['DIVIDE_TYPE'] == '2') {
'REGION_TYPE':'1', //多边形
// 'REGION_TYPE':res['020']['REGION_TYPE'], region_path = JSON.stringify(this.$refs['polygon_' + this.o2oRegions[i]['SORT']][0].$$getPath())
// 'REGION_DISTR_DISTANCE':res['020']['REGION_DISTR_DISTANCE'], }
// 'REGION_DISTR_PRICE':res['020']['REGION_DISTR_PRICE'], let region_child = {
// 'INCREASE_DISTANCE':res['020']['INCREASE_DISTANCE'], SORT: this.o2oRegions[i]['SORT'],
// 'INCREASE_PRICE':res['020']['INCREASE_PRICE'], COLORS: this.o2oRegions[i]['COLORS'],
// 'STATUS':'0', DIVIDE_TYPE: this.o2oRegions[i]['DIVIDE_TYPE'],
// 'REGION':res['020']['REGION'], REGION_R: this.o2oRegions[i]['REGION_R'],
}; REGION_RANGE: region_path, //todo
// this.b2cBranchinfo={ INITIAL_PRICE: this.o2oRegions[i]['INITIAL_PRICE'],
// 'ADDRESS':res.ADDRESS, DELIVERY_PRICE: this.o2oRegions[i]['DELIVERY_PRICE']
// 'NAME':res.NAME, }
// 'GUID':res.GUID, region.push(region_child)
// 'LAT':res.LAT, }
// 'LNG':res.LNG, console.log(this.o2oRegions)
// 'DATA':res.B2C, let otherData = {
// }; SETTING_TYPE: '2',
// this.o2oRegions = [ BRANCH_GUID: this.dataInfo.GUID,
// { REGION: region
// 'DIVIDE_TYPE':'1', }
// 'REGION_R':'12', const data = Object.assign({ ...values }, otherData)
// 'INITIAL_PRICE':'12', data.STATUS = data.STATUS ? '1' : '0'
// 'DELIVERY_PRICE':'22', saveElecfence(data)
// }, this.$router.push({ path: '/storedc/Electronicfence' })//todo 跳转到列表页
// { }
// 'DIVIDE_TYPE':'2',
// 'REGION_RANGE':[
// [121.60596, 31.203646],
// [121.60596, 31.191646],
// [121.59396, 31.191646],
// [121.59396, 31.203646],
// [121.60596, 31.203646]
// ],
// 'INITIAL_PRICE':'10',
// 'DELIVERY_PRICE':'8',
// }
// ]
this.o2oForm.setFieldsValue(this.o2oFormInfo)
// this.b2cForm.setFieldsValue(this.b2cBranchinfo)
console.log( this.o2oBranchinfo)
})
}).catch(err => {
console.log(err)
}) })
}, } else if (type == 'B2C') {
checkRadio(value){ }
return value.toString();
}, },
checkBox(value){ // 获取信息
if(Number(value)==1){ loadinfo() {
return true console.log(this.$route.query)
}else{ var guid = this.$route.query.GUID
return false getElecfenceDetails(guid)
.then(res => {
this.$nextTick(() => {
this.dataInfo = res
this.mapsetting.center = [res.LAT, res.LNG] //设置地图中心点
this.o2oRegionType = res['O2O'] ? res['O2O']['REGION_TYPE'] : '1' //标记O2O的选则状态
if (res['O2O'] && res['O2O']['REGION']) {
//如果之前画过O2O区域
for (let i in res['O2O']['REGION']) {
let color = []
for (let j in this.defaultColors) {
//处理颜色问题
if (this.defaultColors[j][1] == res['O2O']['REGION'][i]['COLORS']) {
color = this.defaultColors[j]
this.defaultColors.splice(j, 1)
break
}
}
let region_child = {
is_checked: false,
color: color, //颜色
colorstyle: {
borderColor: 'rgba(' + color[0] + ')',
backgroundColor: 'rgba(' + color[0] + ',0.4)'
}, //显示的颜色数组
editable: false, //编辑状态
visible: true, //是否显示
center: this.mapsetting.center, //圆心位置
strokeColor: color[1], //线条颜色
strokeWeight: '1', //轮廓线宽度
fillColor: color[1], //填充颜色
fillOpacity: '0.3',
draggable: true, //多边形是否可移动
SORT: res['O2O']['REGION'][i]['SORT'],
COLORS: color[1], //区域颜色
DIVIDE_TYPE: res['O2O']['REGION'][i]['DIVIDE_TYPE'],
REGION_R: res['O2O']['REGION'][i]['REGION_R'],
REGION_RANGE: JSON.parse(res['O2O']['REGION'][i]['REGION_RANGE']),
INITIAL_PRICE: res['O2O']['REGION'][i]['INITIAL_PRICE'],
DELIVERY_PRICE: res['O2O']['REGION'][i]['DELIVERY_PRICE']
} }
this.o2oRegions.push(region_child)
}
console.log(this.o2oRegions)
this.o2oRegions[0]['editable'] = true //有值的情况下编辑第一个选中的
this.o2oRegions[0]['is_checked'] = true
this.sort = 0 //这个代表正在选中的那条数据 基本是index
}
let o2oFormInfo = {
// 'SETTING_TYPE':res['O2O']?res['O2O']['SETTING_TYPE']:'2',
// 'BRANCH_GUID':res['O2O']['BRANCH_GUID'],
GUID: res['O2O'] ? res['O2O']['GUID'] : undefined,
// 'REGION_TYPE':'1',
REGION_TYPE: res['O2O'] ? res['O2O']['REGION_TYPE'] : '1',
REGION_DISTR_DISTANCE: res['O2O'] ? res['O2O']['REGION_DISTR_DISTANCE'] : '0',
REGION_DISTR_PRICE: res['O2O'] ? res['O2O']['REGION_DISTR_PRICE'] : '0',
INCREASE_DISTANCE: res['O2O'] ? res['O2O']['INCREASE_DISTANCE'] : '0',
INCREASE_PRICE: res['O2O'] ? res['O2O']['INCREASE_PRICE'] : '0',
STATUS: res['O2O'] ? res['O2O']['STATUS'] : '0'
// 'STATUS':'0',
// 'REGION':res['O2O']['REGION'],
}
// this.b2cBranchinfo={
// 'ADDRESS':res.ADDRESS,
// 'NAME':res.NAME,
// 'GUID':res.GUID,
// 'LAT':res.LAT,
// 'LNG':res.LNG,
// 'DATA':res.B2C,
// };
// this.o2oRegions = [
// {
// 'DIVIDE_TYPE':'1',
// 'REGION_R':'12',
// 'INITIAL_PRICE':'12',
// 'DELIVERY_PRICE':'22',
// },
// {
// 'DIVIDE_TYPE':'2',
// 'REGION_RANGE':[
// [121.60596, 31.203646],
// [121.60596, 31.191646],
// [121.59396, 31.191646],
// [121.59396, 31.203646],
// [121.60596, 31.203646]
// ],
// 'INITIAL_PRICE':'10',
// 'DELIVERY_PRICE':'8',
// }
// ]
this.o2oForm.setFieldsValue(o2oFormInfo)
// this.b2cForm.setFieldsValue(this.b2cBranchinfo)
console.log(o2oFormInfo)
})
})
.catch(err => {
console.log(err)
})
},
checkRadio(value) {
return value.toString()
},
checkBox(value) {
if (Number(value) == 1) {
return true
} else {
return false
}
}, },
onChange(e) { onChange(e) {
console.log(`checked = ${e.target.checked}`) console.log(`checked = ${e.target.checked}`)
...@@ -535,17 +632,19 @@ mounted(){ ...@@ -535,17 +632,19 @@ mounted(){
// gaode map instance // gaode map instance
console.log(amapManager._map) console.log(amapManager._map)
}, },
gomodeChange(e){ gomodeChange(e) {
this.o2oRegionType = e.target.value this.o2oRegionType = e.target.value
}, },
goEditChange(e,region) {//改变自定义或者圆时的设置问题 goEditChange(e, region) {
//改变自定义或者圆时的设置问题
let value = e.target.value let value = e.target.value
if (value == '1') {//圆 if (value == '1') {
region.DIVIDE_TYPE='1'; //圆
}else if(value == '2'){//自定义 region.DIVIDE_TYPE = '1'
region.DIVIDE_TYPE='2'; } else if (value == '2') {
}else{ //自定义
region.DIVIDE_TYPE = '2'
} else {
} }
// console.log(region.REGION_RANGE) // console.log(region.REGION_RANGE)
// return region; // return region;
...@@ -577,7 +676,7 @@ mounted(){ ...@@ -577,7 +676,7 @@ mounted(){
} }
} }
</script> </script>
<style scoped> <style scoped>
.amap-demo { .amap-demo {
height: 600px; height: 600px;
...@@ -623,9 +722,9 @@ mounted(){ ...@@ -623,9 +722,9 @@ mounted(){
padding: 10px; padding: 10px;
/* border: 1px #ddd solid; */ /* border: 1px #ddd solid; */
} }
.region-line{ .region-line {
display:flex; display: flex;
align-items:center; align-items: center;
} }
.region-distance-list { .region-distance-list {
...@@ -649,7 +748,7 @@ mounted(){ ...@@ -649,7 +748,7 @@ mounted(){
.regintxt { .regintxt {
display: table-cell; display: table-cell;
font-size: 14px; font-size: 14px;
padding: 0px 5px; padding: 5px 5px;
} }
.tips { .tips {
/* max-width: 183px; */ /* max-width: 183px; */
...@@ -659,13 +758,13 @@ mounted(){ ...@@ -659,13 +758,13 @@ mounted(){
margin-bottom: 5px; margin-bottom: 5px;
} }
.region-distance-xq { .region-distance-xq {
max-width: 260px; max-width: 260px;
background: #fff; background: #fff;
padding: 0px 10px; padding: 0px 10px;
margin: 10px 10px 0px 0px; margin: 10px 10px 0px 0px;
border: 1px #ddd solid; border: 1px #ddd solid;
} }
.region-con-xq{ .region-con-xq {
display: flex; display: flex;
align-items: center; align-items: center;
} }
...@@ -729,32 +828,33 @@ mounted(){ ...@@ -729,32 +828,33 @@ mounted(){
position: relative; position: relative;
border-color: #38f; border-color: #38f;
} }
.region-distance-xq.active .region-listblock-arrow{ .region-distance-xq.active .region-listblock-arrow {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
border-color: transparent #155bd4 #155bd4 transparent; border-color: transparent #155bd4 #155bd4 transparent;
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
} }
.region-distance-xq.active .region-listblock-arrow::before{ .region-distance-xq.active .region-listblock-arrow::before {
width: 5px; width: 5px;
left: -3px; left: -3px;
bottom: -8px; bottom: -8px;
transform: rotate(35deg); transform: rotate(35deg);
} }
.region-distance-xq.active .region-listblock-arrow::after{ .region-distance-xq.active .region-listblock-arrow::after {
width: 12px; width: 12px;
left: -1px; left: -1px;
bottom: -5px; bottom: -5px;
transform: rotate(130deg); transform: rotate(130deg);
} }
.region-distance-xq.active .region-listblock-arrow:after, .region-distance-xq.active .region-listblock-arrow:before { .region-distance-xq.active .region-listblock-arrow:after,
position: absolute; .region-distance-xq.active .region-listblock-arrow:before {
display: block; position: absolute;
content: ""; display: block;
height: 2px; content: '';
background: #fff; height: 2px;
background: #fff;
} }
.ps-region { .ps-region {
max-width: 400px; max-width: 400px;
...@@ -787,25 +887,24 @@ mounted(){ ...@@ -787,25 +887,24 @@ mounted(){
padding-left: 10px; padding-left: 10px;
display: table-cell; display: table-cell;
} }
.hz-kilometre span::before{ .hz-kilometre span::before {
display: inline-block; display: inline-block;
content: ""; content: '';
width: 22px; width: 22px;
height: 22px; height: 22px;
margin-top: -4px; margin-top: -4px;
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
background: url("../../../assets/polygon.png"); background: url('../../../assets/polygon.png');
background-size: 100%; background-size: 100%;
background-position: 50%; background-position: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* .add-distance{ /* .add-distance{
width: 300px; width: 300px;
} */ } */
/* /deep/.ant-input{ /* /deep/.ant-input{
border: none; border: none;
} */ } */
</style> </style>
\ 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