运营区
This commit is contained in:
磷叶
parent
b4f9096d49
commit
46f1403d05
|
|
@ -41,13 +41,13 @@ export const AreaStatus = {
|
|||
}
|
||||
|
||||
// 子区域状态
|
||||
export const SubAreaStatus = {
|
||||
export const AreaSubStatus = {
|
||||
NORMAL: "0", // 正常
|
||||
DISABLED: "1", // 禁用
|
||||
}
|
||||
|
||||
// 子区域类型
|
||||
export const SubAreaType = {
|
||||
export const AreaSubType = {
|
||||
PARKING: "1", // 停车区
|
||||
NO_PARKING: "2", // 禁停区
|
||||
NO_RIDE: "3", // 禁行区
|
||||
|
|
|
|||
|
|
@ -250,6 +250,10 @@ export default {
|
|||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
// 不修改边界
|
||||
this.form.boundaryStr = null;
|
||||
this.form.longitude = null;
|
||||
this.form.latitude = null;
|
||||
updateArea(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.back();
|
||||
|
|
|
|||
|
|
@ -106,7 +106,12 @@
|
|||
<dict-tag :options="dict.type.area_status" :value="d.row[column.key]"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'subArea'">
|
||||
<el-link type="primary" :underline="false" @click="handleSubArea(d.row.id)">编辑</el-link>
|
||||
<el-button type="text" size="mini" @click="handleSubArea(d.row.id)">
|
||||
停车区({{d.row.parkingAreaCount | dv}})
|
||||
禁停区({{d.row.noParkingAreaCount | dv}})
|
||||
禁行区({{d.row.noRideAreaCount | dv}})
|
||||
点击管理
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
|
|
@ -168,7 +173,7 @@ export default {
|
|||
{key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'contact', visible: true, label: '联系人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'phone', visible: true, label: '联系电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'subArea', visible: true, label: '子区域', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'subArea', visible: true, label: '下属区域', minWidth: "200", sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'createName', visible: true, label: '创建人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- 地图工具栏 -->
|
||||
<div class="map-tools">
|
||||
<el-button-group>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit" :disabled="isEditing">新增区域</el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" :disabled="isEditing">新增区域</el-button>
|
||||
<el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit" :disabled="isEditing">修改运营区</el-button>
|
||||
<el-button size="mini" icon="el-icon-full-screen" @click="setFitView">全局查看</el-button>
|
||||
<el-button size="mini" icon="el-icon-picture" @click="toggleMapStyle">切换样式</el-button>
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
<template slot="title">
|
||||
<div>{{ editSubArea != null ? '编辑' : '新增' }}提示：</div>
|
||||
<div>1. 左键点击添加边界点</div>
|
||||
<div>2. 右键点击空白位置完成绘制</div>
|
||||
<div>3. 右键点击顶点可删除该点</div>
|
||||
<div>2. 点击顶点可删除该点</div>
|
||||
<div>3. 双击完成绘制</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<div class="tool-buttons">
|
||||
|
|
@ -34,26 +34,26 @@
|
|||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { SubAreaType, SubAreaStatus } from "@/utils/enums";
|
||||
import { AreaSubType, AreaSubStatus } from "@/utils/enums";
|
||||
import { debounce } from "@/utils/index";
|
||||
import globalConfig from "@/utils/config/globalConfig";
|
||||
// 区域样式配置
|
||||
const AREA_STYLES = {
|
||||
[SubAreaType.PARKING]: {
|
||||
[AreaSubType.PARKING]: {
|
||||
strokeColor: '#1890ff',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#1890ff',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'solid'
|
||||
},
|
||||
[SubAreaType.NO_PARKING]: {
|
||||
[AreaSubType.NO_PARKING]: {
|
||||
strokeColor: '#ff4d4f',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#ff4d4f',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'solid'
|
||||
},
|
||||
[SubAreaType.NO_RIDE]: {
|
||||
[AreaSubType.NO_RIDE]: {
|
||||
strokeColor: '#faad14',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#faad14',
|
||||
|
|
@ -76,22 +76,22 @@ const HIGHLIGHT_STYLES = {
|
|||
|
||||
// 图标配置
|
||||
const MARKER_ICONS = {
|
||||
[SubAreaType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
|
||||
[SubAreaType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
|
||||
[SubAreaType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
|
||||
[AreaSubType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
|
||||
[AreaSubType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
|
||||
[AreaSubType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
|
||||
};
|
||||
|
||||
// 标签样式配置
|
||||
const LABEL_STYLES = {
|
||||
[SubAreaType.PARKING]: {
|
||||
[AreaSubType.PARKING]: {
|
||||
backgroundColor: '#1890ff',
|
||||
color: '#fff'
|
||||
},
|
||||
[SubAreaType.NO_PARKING]: {
|
||||
[AreaSubType.NO_PARKING]: {
|
||||
backgroundColor: '#ff4d4f',
|
||||
color: '#fff'
|
||||
},
|
||||
[SubAreaType.NO_RIDE]: {
|
||||
[AreaSubType.NO_RIDE]: {
|
||||
backgroundColor: '#faad14',
|
||||
color: '#fff'
|
||||
}
|
||||
|
|
@ -139,14 +139,14 @@ export default {
|
|||
// 监听区域数据变化
|
||||
area: {
|
||||
handler: debounce(function() {
|
||||
this.renderAreaBoundary();
|
||||
this.renderAll();
|
||||
}, 300),
|
||||
deep: true
|
||||
},
|
||||
// 监听子区域列表变化
|
||||
areaSubList: {
|
||||
handler: debounce(function() {
|
||||
this.renderSubAreas();
|
||||
this.renderAll();
|
||||
}, 300),
|
||||
deep: true
|
||||
},
|
||||
|
|
@ -230,11 +230,9 @@ export default {
|
|||
}
|
||||
},
|
||||
handlePolygonAdd({target}) {
|
||||
console.log("handlePolygonAdd", target);
|
||||
this.editingPolygon = target;
|
||||
},
|
||||
handlePolygonEnd({target}) {
|
||||
console.log("handlePolygonEnd", target);
|
||||
this.editingPolygon = target;
|
||||
},
|
||||
// 渲染所有内容
|
||||
|
|
@ -290,13 +288,15 @@ export default {
|
|||
|
||||
// 渲染子区域
|
||||
renderSubAreas() {
|
||||
if (!this.map || !this.areaSubList.length) return;
|
||||
|
||||
this.clearSubAreas();
|
||||
|
||||
if (!this.map || !this.areaSubList.length) {
|
||||
return;
|
||||
}
|
||||
this.areaSubList.forEach(subArea => {
|
||||
if (subArea.status === SubAreaStatus.DISABLED) return;
|
||||
|
||||
if (subArea.status === AreaSubStatus.DISABLED) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 渲染边界
|
||||
if (subArea.boundaryStr) {
|
||||
|
|
@ -403,18 +403,15 @@ export default {
|
|||
this.currentInfoWindow.close();
|
||||
}
|
||||
|
||||
const position = [subArea.longitude, subArea.latitude];
|
||||
const position = this.getPosition(subArea);
|
||||
|
||||
if (position == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 聚焦效果
|
||||
if (focus) {
|
||||
const polygon = this.overlays.polygons.get(subArea.id);
|
||||
if (polygon) {
|
||||
const bounds = polygon.getBounds();
|
||||
const padding = [150, 300, 150, 300];
|
||||
this.map.setBounds(bounds, false, padding);
|
||||
} else {
|
||||
this.map.setZoomAndCenter(15, position, false, 300);
|
||||
}
|
||||
this.focusArea(subArea);
|
||||
} else {
|
||||
this.map.setCenter(position);
|
||||
}
|
||||
|
|
@ -459,6 +456,36 @@ export default {
|
|||
this.currentInfoWindow.open(this.map, position);
|
||||
},
|
||||
|
||||
// 聚焦子区域
|
||||
focusArea(subArea) {
|
||||
if (subArea == null) {
|
||||
return;
|
||||
}
|
||||
let position = this.getPosition(subArea);
|
||||
if (position == null) {
|
||||
return;
|
||||
}
|
||||
const polygon = this.overlays.polygons.get(subArea.id);
|
||||
if (polygon) {
|
||||
const bounds = polygon.getBounds();
|
||||
const padding = [150, 300, 150, 300];
|
||||
this.map.setBounds(bounds, false, padding);
|
||||
} else {
|
||||
this.map.setZoomAndCenter(15, position, false, 300);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取子区域中心点
|
||||
getPosition(subArea) {
|
||||
if (subArea == null) {
|
||||
return null;
|
||||
}
|
||||
if (subArea.longitude == null || subArea.latitude == null) {
|
||||
return null;
|
||||
}
|
||||
return [subArea.longitude, subArea.latitude];
|
||||
},
|
||||
|
||||
// 处理信息窗体操作
|
||||
handleInfoAction(action, subArea) {
|
||||
console.log("action", action);
|
||||
|
|
@ -467,10 +494,10 @@ export default {
|
|||
this.$emit('edit', subArea);
|
||||
break;
|
||||
case 'boundary':
|
||||
this.startBoundaryEdit(subArea);
|
||||
this.startBoundaryEdit(subArea, true);
|
||||
break;
|
||||
case 'delete':
|
||||
this.$emit('delete', subArea.id);
|
||||
this.$emit('delete', subArea);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -510,10 +537,16 @@ export default {
|
|||
},
|
||||
|
||||
// 开始边界编辑
|
||||
startBoundaryEdit(subArea) {
|
||||
startBoundaryEdit(subArea, focus = false) {
|
||||
|
||||
this.clearEditor();
|
||||
|
||||
this.editSubArea = subArea;
|
||||
|
||||
if (focus) {
|
||||
this.focusArea(subArea);
|
||||
}
|
||||
|
||||
if (subArea && subArea.boundaryStr) {
|
||||
console.log("subArea", subArea);
|
||||
try {
|
||||
|
|
@ -549,41 +582,42 @@ export default {
|
|||
this.$message.error('计算中心点失败');
|
||||
return;
|
||||
}
|
||||
console.log(boundary);
|
||||
|
||||
if (this.isEditingArea) {
|
||||
// 更新运营区边界
|
||||
this.$emit('update-area-boundary', {
|
||||
boundary: JSON.stringify(boundary),
|
||||
longitude: center[0],
|
||||
latitude: center[1]
|
||||
});
|
||||
} else if (this.editSubArea == null) {
|
||||
// 新增子区域
|
||||
this.$emit('add-boundary', {
|
||||
area: this.area,
|
||||
boundary: JSON.stringify(boundary),
|
||||
longitude: center[0],
|
||||
latitude: center[1]
|
||||
});
|
||||
} else {
|
||||
// 更新子区域边界
|
||||
this.$emit('update-boundary', {
|
||||
area: this.editSubArea,
|
||||
boundary: JSON.stringify(boundary),
|
||||
longitude: center[0],
|
||||
latitude: center[1]
|
||||
});
|
||||
if (this.editSubArea == null) {
|
||||
// 新增子区域
|
||||
this.$emit('add-boundary', {
|
||||
boundary: JSON.stringify(boundary),
|
||||
longitude: center[0],
|
||||
latitude: center[1]
|
||||
});
|
||||
} else {
|
||||
// 更新子区域边界
|
||||
this.$emit('update-boundary', {
|
||||
areaSub: this.editSubArea,
|
||||
boundary: JSON.stringify(boundary),
|
||||
longitude: center[0],
|
||||
latitude: center[1]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.cancelEdit();
|
||||
|
||||
},
|
||||
|
||||
// 取消编辑
|
||||
cancelEdit() {
|
||||
console.log("cancelEdit");
|
||||
|
||||
// 重置编辑状态
|
||||
this.isEditing = false;
|
||||
this.editSubArea = null;
|
||||
this.isEditingArea = false;
|
||||
|
||||
// 移除地图事件监听
|
||||
|
|
@ -596,7 +630,7 @@ export default {
|
|||
|
||||
// 工具方法
|
||||
setFitView() {
|
||||
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
||||
this.map.setFitView();
|
||||
},
|
||||
|
||||
// 切换地图样式
|
||||
|
|
@ -632,17 +666,6 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
clearSubAreas() {
|
||||
['polygons', 'markers', 'labels'].forEach(type => {
|
||||
this.overlays[type].forEach((overlay, key) => {
|
||||
if (key !== 'area') {
|
||||
this.map.remove(overlay);
|
||||
this.overlays[type].delete(key);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 更新区域样式
|
||||
updateAreaStyle(areaId) {
|
||||
const polygon = this.overlays.polygons.get(areaId);
|
||||
|
|
@ -681,6 +704,8 @@ export default {
|
|||
|
||||
this.clearEditor();
|
||||
|
||||
this.setFitView();
|
||||
|
||||
if (this.area.boundaryStr) {
|
||||
try {
|
||||
const boundary = JSON.parse(this.area.boundaryStr);
|
||||
|
|
@ -699,29 +724,15 @@ export default {
|
|||
console.error('加载运营区边界数据失败:', error);
|
||||
this.$message.error('加载运营区边界数据失败');
|
||||
}
|
||||
} else {
|
||||
// 创建一个新的运营区多边形
|
||||
this.editingPolygon = new this.AMap.Polygon({
|
||||
path: [],
|
||||
strokeColor: '#2b8cbe',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#ccebc5',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'dashed',
|
||||
strokeDasharray: [5, 5]
|
||||
});
|
||||
|
||||
this.map.add(this.editingPolygon);
|
||||
this.polygonEditor.addAdsorbPolygons(this.editingPolygon)
|
||||
}
|
||||
}
|
||||
|
||||
this.polygonEditor.open();
|
||||
this.isEditingArea = true;
|
||||
this.startEditArea();
|
||||
},
|
||||
// 开始绘制（不管是那种边界）
|
||||
startEditArea() {
|
||||
this.isEditing = true;
|
||||
this.isEditingArea = true;
|
||||
|
||||
// 关闭当前信息窗口
|
||||
if (this.currentInfoWindow) {
|
||||
|
|
|
|||
166
src/views/bst/areaSub/components/AreaSubEditDialog.vue
Normal file
166
src/views/bst/areaSub/components/AreaSubEditDialog.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
|
||||
<el-row>
|
||||
<form-col :span="span" label="区域名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入区域名称" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type" placeholder="请选择类型">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.area_sub_type"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</form-col>
|
||||
<form-col :span="span" label="还车误差" prop="error">
|
||||
<el-input v-model="form.error" placeholder="请输入还车误差">
|
||||
<template slot="append">米</template>
|
||||
</el-input>
|
||||
</form-col>
|
||||
<form-col :span="span" label="照片" prop="picture">
|
||||
<image-upload v-model="form.picture"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.area_sub_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</form-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
|
||||
import FormCol from "@/components/FormCol/index.vue";
|
||||
import { AreaSubStatus, AreaSubType } from '@/utils/enums';
|
||||
|
||||
export default {
|
||||
name: 'AreaSubEditDialog',
|
||||
components: { FormCol },
|
||||
dicts: ['area_sub_type', 'area_sub_status'],
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
id: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
areaId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
initData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
span: 24,
|
||||
title: '',
|
||||
form: {},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOpen() {
|
||||
if (this.id == null) {
|
||||
this.reset();
|
||||
this.title = "添加子区域";
|
||||
} else {
|
||||
this.getDetail();
|
||||
this.title = "修改子区域";
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
type: AreaSubType.PARKING,
|
||||
areaId: this.areaId,
|
||||
boundary: null,
|
||||
boundaryStr: null,
|
||||
error: null,
|
||||
longitude: null,
|
||||
latitude: null,
|
||||
createTime: null,
|
||||
picture: null,
|
||||
remark: null,
|
||||
status: AreaSubStatus.NORMAL,
|
||||
...this.initData
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form && this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
getDetail() {
|
||||
getAreaSub(this.id).then(response => {
|
||||
this.form = response.data;
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
const promise = this.form.id != null ? updateAreaSub(this.form) : addAreaSub(this.form);
|
||||
promise.then(response => {
|
||||
this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功");
|
||||
this.dialogVisible = false;
|
||||
this.$emit('success');
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.dialogVisible = false;
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
@click="handleAdd"
|
||||
v-has-permi="['bst:areaSub:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
|
|
@ -116,6 +116,13 @@
|
|||
@click="handleUpdate(scope.row)"
|
||||
v-has-permi="['bst:areaSub:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEditBoundary(scope.row)"
|
||||
v-has-permi="['bst:areaSub:edit']"
|
||||
>边界</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -128,63 +135,39 @@
|
|||
</el-table>
|
||||
</div>
|
||||
<div class="map-container" v-if="area.id != null">
|
||||
<area-map :area="area" :area-sub-list="areaSubList"/>
|
||||
<area-map
|
||||
v-loading="loading"
|
||||
ref="map"
|
||||
:area="area"
|
||||
:area-sub-list="areaSubList"
|
||||
@edit="handleUpdate"
|
||||
@delete="handleDelete"
|
||||
@add-boundary="handleAddBoundary"
|
||||
@update-boundary="handleUpdateBoundary"
|
||||
@update-area-boundary="handleUpdateAreaBoundary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加或修改子区域对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
|
||||
<el-row>
|
||||
<form-col :span="span" label="区域名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入区域名称" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type" placeholder="请选择类型">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.area_sub_type"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</form-col>
|
||||
<form-col :span="span" label="还车误差" prop="error">
|
||||
<el-input v-model="form.error" placeholder="请输入还车误差">
|
||||
<template slot="append">米</template>
|
||||
</el-input>
|
||||
</form-col>
|
||||
<form-col :span="span" label="照片" prop="picture">
|
||||
<image-upload v-model="form.picture"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.area_sub_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</form-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 子区域编辑对话框 -->
|
||||
<area-sub-edit-dialog
|
||||
:visible.sync="open"
|
||||
:id="editId"
|
||||
:area-id="queryParams.areaId"
|
||||
:init-data="editInitData"
|
||||
@success="handleEditSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listByAreaId, getAreaSub, delAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
|
||||
import { listByAreaId, delAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
|
||||
import { $showColumns } from '@/utils/mixins';
|
||||
import FormCol from "@/components/FormCol/index.vue";
|
||||
import { getArea } from '@/api/bst/area';
|
||||
import { SubAreaStatus, SubAreaType } from '@/utils/enums';
|
||||
import { getArea, updateArea } from '@/api/bst/area';
|
||||
import { AreaSubStatus, AreaSubType } from '@/utils/enums';
|
||||
import AreaMap from '@/views/bst/areaSub/components/AreaMap.vue';
|
||||
import AreaSubEditDialog from '@/views/bst/areaSub/components/AreaSubEditDialog.vue';
|
||||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
|
|
@ -196,11 +179,11 @@ export default {
|
|||
name: "AreaSub",
|
||||
mixins: [$showColumns],
|
||||
dicts: ['area_sub_type', 'area_sub_status'],
|
||||
components: {FormCol, AreaMap},
|
||||
components: {FormCol, AreaMap, AreaSubEditDialog},
|
||||
data() {
|
||||
return {
|
||||
SubAreaStatus,
|
||||
SubAreaType,
|
||||
AreaSubStatus,
|
||||
AreaSubType,
|
||||
span: 24,
|
||||
listSpan: 10,
|
||||
// 字段列表
|
||||
|
|
@ -235,6 +218,10 @@ export default {
|
|||
// 是否显示弹出层
|
||||
open: false,
|
||||
defaultSort,
|
||||
// 编辑ID
|
||||
editId: null,
|
||||
// 编辑初始数据
|
||||
editInitData: {},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -251,8 +238,11 @@ export default {
|
|||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
name: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
|
|
@ -268,6 +258,44 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 处理更新子区域边界
|
||||
handleUpdateBoundary({areaSub, boundary, longitude, latitude}) {
|
||||
console.log(areaSub, boundary, longitude, latitude);
|
||||
if (areaSub.id == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateAreaSub({
|
||||
id: areaSub.id,
|
||||
boundaryStr: boundary,
|
||||
longitude: longitude,
|
||||
latitude: latitude
|
||||
}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.$modal.msgSuccess("更新成功");
|
||||
this.getList();
|
||||
this.$refs.map.cancelEdit();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 处理更新运营区边界
|
||||
handleUpdateAreaBoundary({area, boundary, longitude, latitude}) {
|
||||
if (area.id == null) {
|
||||
return;
|
||||
}
|
||||
updateArea({
|
||||
id: area.id,
|
||||
boundaryStr: boundary,
|
||||
longitude: longitude,
|
||||
latitude: latitude
|
||||
}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.$modal.msgSuccess("更新成功");
|
||||
this.getArea();
|
||||
this.$refs.map.cancelEdit();
|
||||
}
|
||||
})
|
||||
},
|
||||
getArea() {
|
||||
this.loadingArea = true;
|
||||
getArea(this.queryParams.areaId).then(response => {
|
||||
|
|
@ -295,30 +323,6 @@ export default {
|
|||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
type: SubAreaType.PARKING,
|
||||
areaId: this.queryParams.areaId,
|
||||
boundary: null,
|
||||
boundaryStr: null,
|
||||
error: null,
|
||||
longitude: null,
|
||||
latitude: null,
|
||||
createTime: null,
|
||||
picture: null,
|
||||
remark: null,
|
||||
status: SubAreaStatus.NORMAL
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
|
|
@ -335,42 +339,39 @@ export default {
|
|||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
handleAddBoundary({boundary, longitude, latitude}) {
|
||||
this.editId = null;
|
||||
this.editInitData = {
|
||||
boundaryStr: boundary,
|
||||
longitude: longitude,
|
||||
latitude: latitude
|
||||
};
|
||||
this.open = true;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(initData) {
|
||||
this.editId = null;
|
||||
this.editInitData = initData || {};
|
||||
this.open = true;
|
||||
this.title = "添加子区域";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getAreaSub(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改子区域";
|
||||
this.editId = row.id || this.ids;
|
||||
this.editInitData = {};
|
||||
this.open = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.map.focusArea(row);
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateAreaSub(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addAreaSub(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
handleEditSuccess() {
|
||||
this.getList();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.map.cancelEdit();
|
||||
});
|
||||
},
|
||||
handleEditBoundary(row) {
|
||||
this.$refs.map.startBoundaryEdit(row, true);
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user