esacpe/dy_web_new_gd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
esacpe
2024-07-20 14:28:44 +08:00
parent cb03a85a57
commit cfd88cdcc9
5 changed files with 212 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
src/views/largeScreen/home/layout/bottomBtn.vue
View File

@ -5,63 +5,76 @@
<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 style="width: 250px;padding-left: 20px;box-sizing: border-box;" v-if="item.title == '巡防区'">
<el-radio-group v-model="radioValue" @change="chooseTag">
<el-radio v-for="it in D_BZ_BMYWLX" :label="it.label" :value="it" :key="it.value" />
</el-radio-group>
</div>
</div>
</div>
</li>
</ul>
</div>
</template>
</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";
import { qcckGet } from "@/api/qcckApi.js";
import { ref, defineEmits, onMounted, getCurrentInstance, watch, reactive } 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 { D_BZ_BMYWLX } = proxy.$dict("D_BZ_BMYWLX");
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 radioValue = ref('')
const footBtnImg = ref([
{
hastc: true,
hastc: false,
isChecked: false,
iconActive: require('@/assets/my/icon-gazy-active.png'),
icon: require("@/assets/my/icon-gazy.png"),
title: "公安资源",
title: "公安局",
type: 'vertical'
},
{
hastc: false,
isChecked: false,
iconActive: require('@/assets/my/icon-jq-active.png'),
icon: require("@/assets/my/icon-jq.png"),
title: "派出所",
type: 'vertical'
},
{
hastc: false,
isChecked: false,
iconActive: require('@/assets/my/icon-shzy-active.png'),
icon: require("@/assets/my/icon-shzy.png"),
title: "警务站",
type: 'vertical'
},
{
hastc: true,
isChecked: false,
iconActive: require('@/assets/my/icon-sb-active.png'),
icon: require("@/assets/my/icon-sb.png"),
title: "巡防区",
type: 'vertical'
},
{
hastc: false,
isChecked: false,
iconActive: require('@/assets/my/icon-kfd-active.png'),
icon: require("@/assets/my/icon-kfd.png"),
title: "快反点",
type: 'vertical'
},
{
hastc: false,
isChecked: false,
iconActive: require('@/assets/my/icon-zdfk-active.png'),
icon: require("@/assets/my/icon-zdfk.png"),
title: "重点防控点",
type: 'vertical'
},
{
@ -73,49 +86,9 @@ const footBtnImg = ref([
}
]);
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) {
@ -128,15 +101,34 @@ function openTExt(id) {
// 判断是否选择按钮
function chooseIcon(item) {
item.isChecked = !item.isChecked;
switch (item.title) {
case "清除":
clearAll()
case '公安局':
if (item.isChecked) showGazyMarker('公安局');
else emitter.emit("deletePointArea", "gaj"); //清除公安局
break;
case "设备位置":
item.isChecked = !item.isChecked;
emitter.emit("deletePointArea", "sbwz_car");
emitter.emit("deletePointArea", "sbwz_sb");
if (item.isChecked) showSbList()
case '派出所':
if (item.isChecked) showGazyMarker('派出所');
else emitter.emit("deletePointArea", "pcs"); //清除派出所
break;
case '警务站':
if (item.isChecked) showGazyMarker('警务站');
else emitter.emit("deletePointArea", "jwz"); //清除警务站
break;
case '重点防控点':
if (item.isChecked) showGazyMarker('重点防控点');
else emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
break;
case '快反点':
if (item.isChecked) {
showGazyMarker('快反点');
} else {
emitter.emit("deletePointArea", "kfd");//清除快反点
emitter.emit("deletePointArea", "kfdArea");
}
break;
case '清除':
clearAll()
break;
}
}
@ -144,86 +136,24 @@ function chooseIcon(item) {
//一键清除
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 })
radioValue.value = ''
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 })
// 选择巡防区域
function chooseTag(val) {
footBtnImg.value[3].isChecked = true;
emitter.emit("deletePointArea", "xfq");
emitter.emit("deleteText");
item.inChecek = !item.inChecek;
if (item.inChecek) {
showGazyMarker('巡防区', item.dm)
} else {
showGazyMarker('巡防区')
}
let obj = D_BZ_BMYWLX.value.find(item => {
return item.label == val
})
if(obj) showGazyMarker('巡防区', obj.dm)
}
// 显示公安资源信息
@ -270,7 +200,8 @@ function showGazyMarker(val, dm) {
let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
if (dm) data.bz = dm
getGazyPointList(data).then((res) => {
if (res) {
console.log(res);
if ( res && res.records.length > 0) {
let color = { stops: [], property: 'FID', }
let linecolor = { stops: [] }
let arrs = res.records.map((item, idx) => {
@ -293,8 +224,6 @@ 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; });
@ -311,13 +240,6 @@ function handleArr(obj) {
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>
@ -370,7 +292,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
padding-left: 20px;
color: #00BFFF;
color: #00bfff;
}
::v-deep .el-radio {
@ -385,7 +307,6 @@ onUnmounted(() => {
::v-deep .el-radio-group {
width: 100%;
// padding-left:20px;
}
::v-deep .el-input__inner {
@ -406,17 +327,17 @@ onUnmounted(() => {
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
color: #01E9ED;
color: #01e9ed;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #01E9ED;
border-color: #01E9ED;
background-color: #01e9ed;
border-color: #01e9ed;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #01E9ED;
border-color: #01E9ED;
background-color: #01e9ed;
border-color: #01e9ed;
}
::v-deep .el-date-editor .el-range-separator {