222 lines
7.2 KiB
Vue
222 lines
7.2 KiB
Vue
<template>
|
|
<el-dialog top="120px" width="1200px" custom-class="zdlx_dialog" v-model="props.isShow" destroy-on-close
|
|
:show-close="false" :close-on-click-modal="false">
|
|
<template #title>
|
|
<div class="my-header">
|
|
<div class="left">
|
|
<span>制定路线</span>
|
|
</div>
|
|
<el-icon color="#23c3f3" @click="closeDialog">
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
<div class="contant-dialog">
|
|
<el-steps style="max-width: 600px" :active="stepActive" finish-status="success">
|
|
<el-step title="步骤1" />
|
|
<el-step title="步骤2" />
|
|
<el-step title="步骤3" />
|
|
</el-steps>
|
|
<div v-if="stepActive == 0">
|
|
<el-input v-model="listQuery.zb" placeholder="请选择巡逻路线">
|
|
<template #append><el-button type="primary" @click="chackLat('line', 'zdlx')">开始绘制</el-button></template>
|
|
</el-input>
|
|
<div class="mapBox relative mb10">
|
|
<GdMap v-if="mapShow" mapid="mapSmall"></GdMap>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="stepActive == 1">
|
|
<el-button type="primary" style="margin-bottom: 10px;" @click="addEditPoint('add')">新增</el-button>
|
|
<div>
|
|
<MyTable :tableData="listQuery.bxds" :tableColumn="pageData.tableColumn"
|
|
:tableHeight="pageData.tableHeight" :key="pageData.keyCount"
|
|
:tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
<template #ewm="{ row }">
|
|
<el-image :src="`${baseUrl}${row.ewm}`" preview-teleported>
|
|
</el-image>
|
|
</template>
|
|
<template #bxdLx="{ row }">
|
|
<DictTag :value="row.bxdLx" :tag="false" :options="D_BZ_BXDLX" />
|
|
</template>
|
|
<template #controls="{ row }">
|
|
<el-link type="primary" @click="addEditPoint('edit', row)">编辑</el-link>
|
|
<el-link type="danger" @click="deleteRow(row)">删除</el-link>
|
|
</template>
|
|
</MyTable>
|
|
</div>
|
|
</div>
|
|
<XfrwDialog v-else-if="stepActive == 2" @close="closeDialog" @saveFn="getXfrwInfo" />
|
|
<div style="text-align:center;margin-top: 10px;" v-if="stepActive == 0 || stepActive == 1">
|
|
<el-button @click="closeDialog">取消 </el-button>
|
|
<el-button @click="saveFn"> 下一步 </el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<AddPoints ref="addPoint" @changeDxd="changeDxd" :dic="{ D_BZ_BXDLX }" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
import { ref, defineProps, defineEmits, reactive, onMounted, getCurrentInstance, nextTick, onUnmounted } from 'vue'
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
import AddPoints from "./addPoints.vue";
|
|
import XfrwDialog from "./xfrwDialog.vue";
|
|
import emitter from "@/utils/eventBus.js";
|
|
const { proxy } = getCurrentInstance();
|
|
const { D_BZ_BXDLX } = proxy.$dict("D_BZ_BXDLX");
|
|
const emits = defineEmits(["update:modelValue", 'closeDialog']);
|
|
const props = defineProps({
|
|
isShow: Boolean
|
|
})
|
|
const addPoint = ref();
|
|
const stepActive = ref(0)
|
|
const listQuery = ref({
|
|
bxds: []
|
|
})
|
|
const pageData = reactive({
|
|
keyCount: 0,
|
|
tableConfiger: {
|
|
rowHieght: 61,
|
|
showSelectType: "null",
|
|
},
|
|
tableHeight: 400,
|
|
controlsWidth: 200,
|
|
tableColumn: [
|
|
{ label: "巡逻点位名称", prop: "bxdMc" },
|
|
{ label: "经度", prop: "jd" },
|
|
{ label: "纬度", prop: "wd" },
|
|
{ label: "二维码", prop: "ewm", showSolt: true },
|
|
{ label: "巡逻点位类型", prop: "bxdLx", showSolt: true },
|
|
]
|
|
});
|
|
const mapShow = ref(false)
|
|
// 關閉
|
|
function closeDialog(params) {
|
|
emits('update:modelValue', false)
|
|
emits('closeDialog', false)
|
|
}
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
mapShow.value = true
|
|
}, 100);
|
|
emitter.on("coordString", (res => {
|
|
console.log(res, 'res');
|
|
if (res?.flag == 'zdlx') listQuery.value.zb = res.coord;
|
|
}))
|
|
})
|
|
// 详情
|
|
const addEditPoint = (type, row) => {
|
|
if (!listQuery.value.zb) return proxy.$message.warning("请先选择巡逻路线");
|
|
nextTick(() => {
|
|
addPoint.value.init(type, row, listQuery.value.zb);
|
|
});
|
|
};
|
|
// 删除
|
|
const deleteRow = (row) => {
|
|
listQuery.value.bxds.splice(row, 1);
|
|
emitter.emit("deletePointArea", 'lxdw');
|
|
emitter.emit("removePlot", 'lxdw');
|
|
};
|
|
// 选择经纬度
|
|
const chooseJwd = (row) => {
|
|
changeItem.value = row;
|
|
emitter.emit("deletePointArea", 'bxd' + row.id);
|
|
emitter.emit("removePlot", 'point' + row.id);
|
|
emitter.emit("drawShape", { type: 'point', flag: 'point' + row.id });
|
|
};
|
|
// 选择巡逻路线
|
|
const chackLat = (type, flag) => {
|
|
emitter.emit("removeAll");
|
|
emitter.emit("removePlot", flag);
|
|
listQuery.value.zb = [];
|
|
emitter.emit("drawShape", { type, flag, isclear: true })
|
|
}
|
|
// 保存
|
|
const saveFn = () => {
|
|
switch (stepActive.value) {
|
|
case 0:
|
|
if (!listQuery.value.zb) proxy.$message.warning("请先规划路线");
|
|
else stepActive.value++
|
|
break
|
|
case 1:
|
|
if (!listQuery.value.bxds || listQuery.value.bxds.length == 0) proxy.$message.warning("请先新增巡逻点位");
|
|
else stepActive.value++
|
|
break
|
|
}
|
|
}
|
|
// 提交数据
|
|
const getXfrwInfo=(val)=>{
|
|
let params={...val,...listQuery.value}
|
|
qcckPost(params,"/mosty-jmxf/jbldBxx/addBxxBxd").then(res=>{
|
|
proxy.$message.success("新增成功");
|
|
closeDialog()
|
|
})
|
|
}
|
|
// 新增或者编辑比巡店
|
|
const changeDxd = (val) => {
|
|
if (val.type == 'add') {
|
|
listQuery.value.bxds.push(val.data);
|
|
} else {
|
|
let index = listQuery.value.bxds.findIndex(item => item.id == val.data.id);
|
|
listQuery.value.bxds.splice(index, 1, val.data);
|
|
}
|
|
listQuery.bxdsl = listQuery.value.bxds.length;
|
|
pageData.keyCount++;
|
|
};
|
|
onUnmounted(() => {
|
|
emitter.off("coordString");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
|
|
.my-header {
|
|
background: url("~@/assets/images/add-title.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
align-items: center;
|
|
padding: 0 10px 0 20px;
|
|
box-sizing: border-box;
|
|
font-size: 30px;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: "HANYILINGXINTIJIAN";
|
|
}
|
|
}
|
|
}
|
|
|
|
.contant-dialog {
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.el-form {
|
|
max-height: 60vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
::v-deep.el-input__inner {
|
|
color: #000;
|
|
}
|
|
|
|
.mapBox {
|
|
width: 100%;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.zdlx_dialog {
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style> |