1
This commit is contained in:
esacpe
445
src/views/largeScreen/home/layout/bottomBtn.vue
Normal file
445
src/views/largeScreen/home/layout/bottomBtn.vue
Normal file
@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<div class="footBox">
|
||||
<ul class="btnsBox">
|
||||
<li class="btnsItem" v-for="(item, index) in footBtnImg" :key="index" @click="chooseIcon(item)">
|
||||
<img :src="item.isChecked ? item.iconActive : item.icon" :title="item.title" style="max-width:66px" />
|
||||
<div class="resourceBox" v-if="item.hastc">
|
||||
<div class="contant" :class="item.type == 'across' ? 'contantAcross' : ''">
|
||||
<!-- 公安资源 -->
|
||||
<div style="width: 274px;" v-if="item.title == '公安资源'">
|
||||
<div class="name">公安资源</div>
|
||||
<CheckBox ref="refGazy" :data="resource.checkGazy" @changeData="changeDataGazy"></CheckBox>
|
||||
<div class="popover" v-show="isShowPopover">
|
||||
<el-tag effect="dark" v-for="it in D_BZ_BMYWLX" :type="it.inChecek ? 'pramary' : 'info'"
|
||||
@click="chooseTag(it)" :key="it.value">
|
||||
{{ it.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CheckBox from "@/components/checkBox/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { dateFormat } from "@/utils/auth.js";
|
||||
import { getRecentDay } from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, defineEmits, onMounted, getCurrentInstance, onUnmounted, watch } from "vue";
|
||||
import { getGazyPointList, } from "@/api/dpApi/home.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BMYWLX, JQLB_DP } = proxy.$dict("D_BZ_BMYWLX", "JQLB_DP");
|
||||
const emit = defineEmits(["myClick"]);
|
||||
const isShowPopover = ref(false)
|
||||
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||||
const jqLx = ref({
|
||||
list: [],
|
||||
hasChoose: [],
|
||||
})
|
||||
const isShowKeyBox = ref(false)
|
||||
const gzymc = ref('')
|
||||
const keyList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
watch(() => JQLB_DP, val => {
|
||||
jqLx.value.list = val.value.map(item => { return item.label })
|
||||
let arr = ['打架斗殴', '侵财(两抢一盗)']
|
||||
jqLx.value.list = jqLx.value.list.concat(arr)
|
||||
}, { deep: true })
|
||||
watch(() => gzymc.value, val => {
|
||||
if (val == '') isShowKeyBox.value = false
|
||||
}, { deep: true })
|
||||
|
||||
const footBtnImg = ref([
|
||||
{
|
||||
hastc: true,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-gazy-active.png'),
|
||||
icon: require("@/assets/my/icon-gazy.png"),
|
||||
title: "公安资源",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: false,
|
||||
iconActive: require("@/assets/my/icon-clearn.png"),
|
||||
icon: require("@/assets/my/icon-clearn.png"),
|
||||
title: "清除",
|
||||
type: 'vertical'
|
||||
}
|
||||
]);
|
||||
|
||||
let resource = ref({
|
||||
checkGazy: {
|
||||
list: ["公安局", "派出所", "警务站", '巡防区', '快反点', '重点防控点'],
|
||||
hasChoose: []
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const selectTime = ref("今日"); //选择的时间类型
|
||||
const tcType = ref([]); //警情图层类型
|
||||
const sjzyTime = ref([
|
||||
dateFormat(new Date(), "YY-MM-DD"),
|
||||
dateFormat(new Date(), "YY-MM-DD")
|
||||
]);
|
||||
const selectTimeYj = ref("今日"); //选择的时间类型
|
||||
const tcYjType = ref([]); //预警图层类型
|
||||
const fzycFlag = ref(false);
|
||||
const sjzyTimeYj = ref([
|
||||
dateFormat(new Date(), "YY-MM-DD"),
|
||||
dateFormat(new Date(), "YY-MM-DD")
|
||||
]);
|
||||
const isSd = ref(true); //是否随动
|
||||
const selectCircleDistance = ref("");
|
||||
|
||||
const isSelected = ref(false);
|
||||
onMounted(() => {
|
||||
emitter.emit("getCoordinatePoint", "PIO");
|
||||
window.openTExt = openTExt;
|
||||
isSelected.value = false;
|
||||
emitter.on("followUp", (res) => { isSd.value = res; });
|
||||
});
|
||||
|
||||
|
||||
const cancelJl = ref([])
|
||||
const cancelJl1 = ref([])
|
||||
|
||||
// 获取范围中心的
|
||||
function getCenterPoint(dm, text, id) {
|
||||
qcckPost(dm, '/mosty-base/other/getZxd').then(res => {
|
||||
let points = [res.x, res.y]
|
||||
emitter.emit("addTEXT", { points, text, id });
|
||||
})
|
||||
}
|
||||
|
||||
// 高亮巡防区域
|
||||
function openTExt(id) {
|
||||
qcckGet({}, '/mosty-jcgl/tbJcglXfqy/selectById?id=' + id).then(res => {
|
||||
if (!res) return false
|
||||
let ddat = { arr: res.pgis, flag: 'xfqJS', color: '#b9332e', opacity: 0.6, isclear: true }
|
||||
handleArr(ddat)
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否选择按钮
|
||||
function chooseIcon(item) {
|
||||
switch (item.title) {
|
||||
case "清除":
|
||||
clearAll()
|
||||
break;
|
||||
case "设备位置":
|
||||
item.isChecked = !item.isChecked;
|
||||
emitter.emit("deletePointArea", "sbwz_car");
|
||||
emitter.emit("deletePointArea", "sbwz_sb");
|
||||
if (item.isChecked) showSbList()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//一键清除
|
||||
function clearAll() {
|
||||
calesrnSP()
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc");
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("bd_closeOverlay", true);
|
||||
emitter.emit("closeAllDialog");
|
||||
emitter.emit("deletePointArea", "xfqJS"); //清除巡防区高亮
|
||||
emitter.emit("removePlot", 'quan'); //移除绘制工具
|
||||
emitter.emit("clearThermodynamicChart", 'yjMap'); //清除热力图
|
||||
emitter.emit("clearThermodynamicChart", 'jqMap'); //清除热力图
|
||||
emitter.emit("clearmakerSqure");
|
||||
emitter.emit("drawLineAnimation", 'route');
|
||||
emitter.emit("deletePointArea", 'yuan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("removeEara", 'quan');
|
||||
emitter.emit("deletePointArea", "sbwz_car");
|
||||
emitter.emit("deletePointArea", "sbwz_sb");
|
||||
emitter.emit("deletePointArea", "ohterline");
|
||||
emitter.emit("deletePointArea", "gapTextTitle");
|
||||
emitter.emit("deletePointArea", "gapline");
|
||||
selectTime.value = "今日";
|
||||
selectTimeYj.value = "今日";
|
||||
gzymc.value = ''
|
||||
sjzyTime.value = [getRecentDay(0), getRecentDay(0)];
|
||||
sjzyTimeYj.value = [getRecentDay(0), getRecentDay(0)];
|
||||
tcType.value = [];
|
||||
tcYjType.value = [];
|
||||
isShowPopover.value = false
|
||||
resource.value.checkGazy.hasChoose = [];
|
||||
cancelJl1.value = []
|
||||
cancelJl.value = []
|
||||
jqLx.value.hasChoose = [];
|
||||
keyList.value = [];
|
||||
gzymc.value = '';
|
||||
selectCircleDistance.value = ''
|
||||
D_BZ_BMYWLX.value.forEach(v => { v.inChecek = false })
|
||||
footBtnImg.value.forEach(v => { v.isChecked = false })
|
||||
isShoePolice([])
|
||||
}
|
||||
|
||||
function calesrnSP() {
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
emitter.emit("deletePointArea", "kk");
|
||||
emitter.emit("deletePointArea", "jqMap");
|
||||
emitter.emit("deletePointArea", "yjMap");
|
||||
}
|
||||
|
||||
// 选择公安资源
|
||||
function changeDataGazy(val) {
|
||||
footBtnImg.value[2].isChecked = val.length > 0 ? true : false //公安资源是否选中
|
||||
let arr = JSON.parse(JSON.stringify(resource.value.checkGazy.hasChoose))
|
||||
val.forEach(item => { if (!arr.includes(item)) showGazyMarker(item) })
|
||||
resource.value.checkGazy.hasChoose = val //缓存选中的值
|
||||
isShowPopover.value = val.includes('巡防区') ? true : false //巡访区的选项弹窗（目前是单选）
|
||||
if (!val.includes('公安局')) emitter.emit("deletePointArea", "gaj"); //清除公安局
|
||||
if (!val.includes('派出所')) emitter.emit("deletePointArea", "pcs"); //清除派出所
|
||||
if (!val.includes('警务站')) emitter.emit("deletePointArea", "jwz"); //清除警务站
|
||||
if (!val.includes('重点防控点')) emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
|
||||
if (!val.includes('巡防区')) {
|
||||
emitter.emit("deletePointArea", "xfq"); //清除巡防区
|
||||
emitter.emit("deletePointArea", "ohterline");
|
||||
emitter.emit("deletePointArea", "gapline");
|
||||
emitter.emit("deletePointArea", "gapTextTitle");
|
||||
}
|
||||
if (!val.includes('快反点')) {
|
||||
emitter.emit("deletePointArea", "kfd");//清除快反点
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function chooseTag(item) {
|
||||
D_BZ_BMYWLX.value.forEach(v => { if (v.label != item.label) v.inChecek = false })
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deleteText");
|
||||
item.inChecek = !item.inChecek;
|
||||
if (item.inChecek) {
|
||||
showGazyMarker('巡防区', item.dm)
|
||||
} else {
|
||||
showGazyMarker('巡防区')
|
||||
}
|
||||
}
|
||||
|
||||
// 显示公安资源信息
|
||||
function showGazyMarker(val, dm) {
|
||||
if (val == "公安局") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001003" };
|
||||
getGazyPointList(data).then((res) => {
|
||||
let arr = res.records ? res.records : [];
|
||||
let icon = require("@/assets/point/gaj.png");
|
||||
handlePoint(arr, icon, "gaj");
|
||||
});
|
||||
} else if (val == "派出所") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001004" };
|
||||
getGazyPointList(data).then((res) => {
|
||||
let arr = res.records ? res.records : [];
|
||||
let icon = require("@/assets/point/pcs.png");
|
||||
handlePoint(arr, icon, "pcs");
|
||||
});
|
||||
} else if (val == "警务站") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001007" };
|
||||
getGazyPointList(data).then((res) => {
|
||||
let arr = res.records ? res.records : [];
|
||||
let icon = require("@/assets/point/jwz.png");
|
||||
emitter.emit("showPoint", { coords: arr, icon, flag: 'jwz' });
|
||||
});
|
||||
} else if (val == "快反点") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001008" };
|
||||
getGazyPointList(data).then((res) => {
|
||||
if (res) {
|
||||
let icon = require("@/assets/point/f.png")
|
||||
emitter.emit("showPoint", { coords: res.records, icon, flag: 'kfd' });
|
||||
} else {
|
||||
ElMessage({ message: "暂无快反点数据", type: "warning" });
|
||||
}
|
||||
});
|
||||
} else if (val == "重点防控点") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001011" };
|
||||
getGazyPointList(data).then((res) => {
|
||||
let arr = res.records ? res.records : [];
|
||||
let icon = require("@/assets/point/kfd.png");
|
||||
handlePoint(arr, icon, "zdfkd");
|
||||
});
|
||||
} else if (val == "巡防区") {
|
||||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
|
||||
if (dm) data.bz = dm
|
||||
getGazyPointList(data).then((res) => {
|
||||
if (res) {
|
||||
let color = { stops: [], property: 'FID', }
|
||||
let linecolor = { stops: [] }
|
||||
let arrs = res.records.map((item, idx) => {
|
||||
let ys = changeColor(item.color, 0.4)
|
||||
linecolor.stops.push(ys.replace(0.4, 1))
|
||||
color.stops.push([idx + 1, ys])
|
||||
let obj = { position: [item.dtm], FID: idx + 1, text: item.gajgmc, id: item.id }
|
||||
if (item.dtm) return obj;
|
||||
})
|
||||
let params = { coords: arrs, type: 'polygon', flag: 'xfq', color }
|
||||
emitter.emit("echoPlane", params);
|
||||
} else {
|
||||
ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 颜色转换成rgba格式
|
||||
function changeColor(hex, opacity) {
|
||||
return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 处理撒点
|
||||
function handlePoint(arr, icon, flag, scale) {
|
||||
let list = arr.filter((item) => { return item.jd && item.wd; });
|
||||
if (list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: flag, scale });
|
||||
}
|
||||
// 处理1-3-5数据
|
||||
function handleArr(obj) {
|
||||
let brr = [];
|
||||
let crr = [];
|
||||
obj.arr.forEach((val1) => { brr.push(...val1); });
|
||||
let str = brr.toString();
|
||||
crr.push(str);
|
||||
let params = { coords: crr, flag: obj.flag, color: obj.color, opacity: obj.opacity, isclear: obj.isclear || false }
|
||||
emitter.emit("polygonFigure", params);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("followUp");
|
||||
emitter.off("getCoord");
|
||||
emitter.off("getcentercoord");
|
||||
emitter.off("coordString");
|
||||
emitter.off("showGazy");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.search_gzy_box {
|
||||
position: relative;
|
||||
|
||||
.search_key_outBox {
|
||||
width: 100%;
|
||||
bottom: 52px;
|
||||
position: absolute;
|
||||
|
||||
.search_key {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #041f6e;
|
||||
border-radius: 4px;
|
||||
max-height: 60vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.key_item {
|
||||
line-height: 30px;
|
||||
border-bottom: 1px solid #565656;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.key_item:hover {
|
||||
background: #0d4a62;
|
||||
color: #12d2b0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_key_outBox::after {
|
||||
// position:absolute;
|
||||
// content:'';
|
||||
// width:0;
|
||||
// height:0;
|
||||
// bottom:-20px;
|
||||
// left:50%;
|
||||
// transform: tanslateX(-50%);
|
||||
// border:10px solid;
|
||||
// border-color:#041f6e transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.depBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
color: #00BFFF;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
width: 100%;
|
||||
// padding-left:20px;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 1px solid #224ab5;
|
||||
color: #fff;
|
||||
margin: 10px 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor .el-range-input {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #01E9ED;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #01E9ED;
|
||||
border-color: #01E9ED;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #01E9ED;
|
||||
border-color: #01E9ED;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.jqTimeBox {
|
||||
::v-deep .el-date-range-picker {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-time-panel {
|
||||
left: -52px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user