'保安项目提交'
This commit is contained in:
esacpe
222
src/views/homeMy/modelDialog/zdlxDialog.vue
Normal file
222
src/views/homeMy/modelDialog/zdlxDialog.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user