'保安项目提交'
This commit is contained in:
esacpe
282
src/views/homeMy/components/dialog/routePlanning.vue
Normal file
282
src/views/homeMy/components/dialog/routePlanning.vue
Normal file
@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class="bigBox" ref="bigBox">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="close" @click="closeDialog">
|
||||
<el-icon :size="22">
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="search" style="color: aliceblue;" ref="searchBox">
|
||||
<el-form ref="formRef" :model="listQuery"><el-form-item label=" 线路名称">
|
||||
<el-input v-model="listQuery.xlmc" placeholder="请输入线路名称" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="datalist">
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #rwsj="{ row }">
|
||||
{{ row.rwkssj }}--{{ row.rwjssj }}
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="drawAline( row)">查看线路</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<!-- <Pages @changeNo="handleSizeChange" @changeSize="handleCurrentChange" :tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, watch, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
|
||||
import { handleSelectListDp } from "@/api/dpApi/home.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { tbQwXfAselectById } from '@/api/lz/backstage'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
});
|
||||
const list = reactive({
|
||||
tableData: [],
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "线路名称", prop: "xlmc" },
|
||||
{ label: "民警", prop: "mjxm" },
|
||||
{ label: "辅警", prop: "fjxm" },
|
||||
{ label: "保安", prop: "baxm" },
|
||||
{ label: "巡逻日期", prop: "rwsj",showSolt:true,width:"300px" },
|
||||
]
|
||||
});
|
||||
const title = ref("巡逻路线");
|
||||
const showBut = ref("")
|
||||
const listQuery = ref({});
|
||||
const loading = ref(false)
|
||||
function _ggetSelectDeckList(staus, qwlx) {
|
||||
loading.value = true;
|
||||
let data = { ...listQuery.value, ...pageData.pageConfiger };
|
||||
handleSelectListDp(data).then((res) => {
|
||||
loading.value = false;
|
||||
pageData.tableData = res ? res : [];
|
||||
pageData.total = res.total
|
||||
//是否展示点位
|
||||
}).catch(() => { loading.value = false; });
|
||||
}
|
||||
watch(() => props.data, (val) => {
|
||||
showBut.value = val.type
|
||||
_ggetSelectDeckList()
|
||||
}, { deep: true, immediate: true })
|
||||
onMounted(() => {
|
||||
_ggetSelectDeckList()
|
||||
tabHeightFn()
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showJLWindow");
|
||||
});
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
pageData.pageConfige.pageCurrent = currentPage;
|
||||
_ggetSelectDeckList();
|
||||
};
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
pageData.pageConfiger.pageSize = currentSize;
|
||||
_ggetSelectDeckList();
|
||||
};
|
||||
// 关闭弹窗
|
||||
function closeDialog() {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
emitter.emit("removeEara", 'point');
|
||||
emitter.emit("openZdXl", { show: false });
|
||||
list.tableData = [];
|
||||
}
|
||||
// 搜索
|
||||
function handleFilter() {
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
_ggetSelectDeckList();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
ssbmdm: "", jzMc: ""
|
||||
}
|
||||
handleFilter()
|
||||
}
|
||||
const drawAline = (val) => {
|
||||
emitter.emit("deletePointArea", "bxd");
|
||||
emitter.emit("removeAll", "bxx");
|
||||
emitter.emit("openZdXl", { show: false });
|
||||
console.log(val);
|
||||
let bxd = []
|
||||
let coords = [{ coords: [val.bxx.zb], text: val.bxx.bxxMc }]
|
||||
let zbd = val.bxx.bxds.map(item => {
|
||||
return {
|
||||
jd: item.jd,
|
||||
wd: item.wd,
|
||||
bxdMc:item.bxdMc,
|
||||
icon: item.sfdk == '0' ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
|
||||
}
|
||||
})
|
||||
bxd = [...bxd, ...zbd]
|
||||
emitter.emit("echoLine", { coords, width: 4, flag: "bxx", type: 'dash', isclear: true, color: '#ff0000' });
|
||||
handlePoint(bxd, "", "bxd", 0.6, '#FF0000');
|
||||
};
|
||||
// 处理撒点
|
||||
function handlePoint(arr, icon, flag, scale, fontColor) {
|
||||
let list = arr.filter((item) => {
|
||||
item.identification = flag;
|
||||
return item.jd && item.wd;
|
||||
});
|
||||
if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
|
||||
}
|
||||
const bigBox = ref() // 表格高度计算
|
||||
const searchBox = ref()
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = bigBox.value.offsetHeight - searchBox.value.offsetHeight - 320;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.bigBox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
background: #052342;
|
||||
padding: 0 20px;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.datalist {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.serchBtn {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-table {
|
||||
background: #052342;
|
||||
--el-table-border-color: #25343f;
|
||||
color: #ffffff;
|
||||
--el-table-row-hover-bg-color: #063257 !important;
|
||||
// --el-table-row-hover-bg-color: #737373;
|
||||
}
|
||||
|
||||
::v-deep .el-table__inner-wrapper {
|
||||
background: #052342;
|
||||
}
|
||||
|
||||
::v-deep .el-table__inner-wrapper:hover {
|
||||
background: #052342 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #052342 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
|
||||
background: #005fbf37;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
background: #052342;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell {
|
||||
background: #052342;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user