282 lines
7.0 KiB
Vue
282 lines
7.0 KiB
Vue
<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";
|
|
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>
|