'保安项目提交'
This commit is contained in:
esacpe
971
src/views/homeMy/index.vue
Normal file
971
src/views/homeMy/index.vue
Normal file
@ -0,0 +1,971 @@
|
||||
<!--
|
||||
* @Author: ZR
|
||||
* @Date: 2023-11-06 09:43:52
|
||||
* @LastEditTime: 2024-10-09 10:29:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
-->
|
||||
<template>
|
||||
<div class="bigScrenn">
|
||||
<!-- 头部 -->
|
||||
<GdMap :isShow="true" />
|
||||
|
||||
<Head></Head>
|
||||
<div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '442px' }"
|
||||
@click="showClassL = !showClassL"></div>
|
||||
<div class="asideBox transition" :style="{ left: showClassL ? '-446px' : '0px' }">
|
||||
<!-- 工作情况 -->
|
||||
<div class="boder-small back-color">
|
||||
<WorkCondition />
|
||||
</div>
|
||||
<!-- 街面巡组 -->
|
||||
<div class="boder-small">
|
||||
<StreetGroup />
|
||||
</div>
|
||||
<div class="boder-small">
|
||||
<Spxl />
|
||||
<!-- <div class="common-title flex">
|
||||
<div>视频巡逻</div>
|
||||
<div class="flex">
|
||||
<el-select v-model="spTwoValue" class="mr6" placeholder="Select">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="spTwoValue" placeholder="Select">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<VideoPatrols></VideoPatrols>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="search_box">
|
||||
<el-input v-model="keywords" style="max-width: 600px" placeholder="请输入关键词">
|
||||
<template #append>
|
||||
<el-button @click="searchFn" type="primary" style="background-color: #409eff;border: none;color: #fff;">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '442px' }"
|
||||
@click="showClassR = !showClassR"></div>
|
||||
<div class="asideBox transition" :style="{ right: showClassR ? '-446px' : '0px' }">
|
||||
<div class="lineOption">
|
||||
<div class="option" @click="openZdXl('ck')">
|
||||
<div>巡逻</div>
|
||||
<div>路线</div>
|
||||
</div>
|
||||
<div class="option" @click="openZdXl('zd')">
|
||||
<div>制定</div>
|
||||
<div>路线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boder-middle">
|
||||
<StreetCondition />
|
||||
</div>
|
||||
<div class="boder-small">
|
||||
<div class="common-title flex">
|
||||
无人机巡逻
|
||||
<el-select v-model="spTwoValue" placeholder="Select">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<DronePatrols></DronePatrols>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
|
||||
<CountModel />
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<BottomBtn />
|
||||
<!-- 指令时间按钮 -->
|
||||
<div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
|
||||
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisibleZdrw"
|
||||
:append-to-body="false">
|
||||
<template #reference>
|
||||
<div @click="clickAddZdrw" class="imgBox">
|
||||
<span>指导巡逻</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="depBox">
|
||||
关键字：
|
||||
<div style="margin-left: 14px; width: 80%">
|
||||
<el-input v-model="listQueryZd.keyWord" placeholder="请输入关键字"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="depBox">
|
||||
是否巡逻：
|
||||
<div style="width: 80%">
|
||||
<el-select v-model="listQueryZd.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
|
||||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||||
}}</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="depBox">
|
||||
所属部门：
|
||||
<MOSTY.Department clearable width="80%" v-model="listQueryZd.ssbmdm" />
|
||||
</div>
|
||||
<el-radio-group v-model="selectTime_Zd" @change="changeYcTime">
|
||||
<el-radio label="今日" />
|
||||
<el-radio label="昨日" />
|
||||
<el-radio label="本周" />
|
||||
<el-radio label="本月" />
|
||||
<el-radio label="近30日" />
|
||||
<el-radio label="本季度" />
|
||||
<el-radio label="近半年" />
|
||||
<el-radio label="近一年" />
|
||||
<el-radio label="自定义" />
|
||||
</el-radio-group>
|
||||
<div>
|
||||
<el-date-picker v-model="zdTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
|
||||
:readonly="zdTime == '自定义' ? false : true" />
|
||||
</div>
|
||||
<CheckBox :data="zldwList" @changeData="changeDataZldrw" />
|
||||
<div class="footerBtns">
|
||||
<el-button @click="handleZd">上图</el-button>
|
||||
<el-button @click="calcelZd('cancel')">取消</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisible" :append-to-body="false">
|
||||
<template #reference>
|
||||
<div @click="clickAddEvent" class="imgBox">
|
||||
<span>重点巡逻</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="depBox">
|
||||
关键字：
|
||||
<div style="margin-left: 14px; width: 80%">
|
||||
<el-input v-model="listQuery.keyWord" placeholder="请输入关键字"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="depBox">
|
||||
是否巡逻：
|
||||
<div style="width: 80%">
|
||||
<el-select v-model="listQuery.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
|
||||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||||
}}</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="depBox">
|
||||
所属部门：
|
||||
<MOSTY.Department clearable width="80%" v-model="listQuery.ssbmdm" />
|
||||
</div>
|
||||
<el-radio-group v-model="selectTime_yc" @change="changeYcTime">
|
||||
<el-radio label="今日" />
|
||||
<el-radio label="昨日" />
|
||||
<el-radio label="本周" />
|
||||
<el-radio label="本月" />
|
||||
<el-radio label="近30日" />
|
||||
<el-radio label="本季度" />
|
||||
<el-radio label="近半年" />
|
||||
<el-radio label="近一年" />
|
||||
<el-radio label="自定义" />
|
||||
</el-radio-group>
|
||||
<div>
|
||||
<el-date-picker v-model="fzycTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
|
||||
:readonly="selectTime_yc == '自定义' ? false : true" />
|
||||
</div>
|
||||
<CheckBox :data="timeList" @changeData="changeDataBC" />
|
||||
<div class="footerBtns">
|
||||
<el-button @click="handleFzyc">上图</el-button>
|
||||
<el-button @click="calcelFzyc('cancel')">取消</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover :width="226" trigger="click" placement="left" v-model:visible="showVisibleWarning"
|
||||
:append-to-body="false">
|
||||
<template #reference>
|
||||
<div @click="showVisibleWarning = !showVisibleWarning" class="imgBox">
|
||||
<span>下发指令</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="footerBtns">
|
||||
<el-button @click="clickXfzl">公安资源</el-button>
|
||||
<el-button @click="clickQfqz">群防群治人员</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 左边弹窗 -->
|
||||
<LeftDialog :isPosition="showClassL" />
|
||||
<!-- 中间边弹窗 -->
|
||||
<CenterDialog />
|
||||
<!-- 右边弹窗 -->
|
||||
<RightDialog :isPosition="showClassR" />
|
||||
<!-- 警组弹框弹框 -->
|
||||
<PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
|
||||
<!-- 下发指令 -->
|
||||
<XiafaZl />
|
||||
<!-- 群防群治 -->
|
||||
<QFQZ />
|
||||
<!-- 下发指令详情 -->
|
||||
<ZlxfList />
|
||||
<!-- 犯罪预测 -->
|
||||
<FzycDialog v-if="show.fzyc" :data="fzycInfo" />
|
||||
<!-- 选房区警情 -->
|
||||
<XfqJq />
|
||||
<!-- 意见收集 -->
|
||||
<YjsjDialog :isShow="show.yisj" v-if="show.yisj" @closeDialog="show.yisj = false" />
|
||||
// 指定路线
|
||||
<ZdlxDialog :isShow="show.zdlx" v-if="show.zdlx" @closeDialog="show.zdlx = false" />
|
||||
</div>
|
||||
<teleport to="#app" v-if="visibleDialog">
|
||||
<WarningCenter v-model="show.yjzx" v-if="show.yjzx" @closeDialog="visibleDialog = false" />
|
||||
<XssbInfo v-model="show.xssb" v-if="show.xssb" @closeDialog="visibleDialog = false" />
|
||||
<BbtsInfo v-model="show.bbts" v-if="show.bbts" @closeDialog="visibleDialog = false" />
|
||||
<PiliceCaseCount v-model="show.jqtj" v-if="show.jqtj" @closeDialog="visibleDialog = false" />
|
||||
<DwryCount v-model="show.dwryts" v-if="show.dwryts" @closeDialog="visibleDialog = false" />
|
||||
</teleport>
|
||||
<!-- @refresh="getList" -->
|
||||
<XfrwDialog ref="xfDiloag"></XfrwDialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
import { qcckGet, qcckPost } from '@/api/qcckApi'
|
||||
import { ElNotification } from "element-plus";
|
||||
import WarningCenter from "./modelDialog/warningCenter.vue";
|
||||
import YjsjDialog from "./modelDialog/yjsjDialog.vue";
|
||||
import ZdlxDialog from "./modelDialog/zdlxDialog.vue";
|
||||
import XssbInfo from "./modelDialog/xssbInfo.vue";
|
||||
import BbtsInfo from "./modelDialog/bbtsInfo.vue";
|
||||
import PiliceCaseCount from "./modelDialog/piliceCaseCount.vue";
|
||||
import DwryCount from "./modelDialog/dwryCount.vue";
|
||||
import { queryListfzyc, queryListZdrw, tbYsSxtList, getSelectVigilant } from "@/api/dpApi/home.js";
|
||||
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from "./layout/head.vue";
|
||||
import CheckBox from "@/components/checkBox/index";
|
||||
import XiafaZl from "./components/dialog/xiafaZl.vue";
|
||||
import QFQZ from "./components/dialog/qfqz.vue";
|
||||
import ZlxfList from "./components/dialog/zlxfList.vue";
|
||||
import XfqJq from "./components/xfqJq/index.vue";
|
||||
import WorkCondition from "./layout/workCondition.vue";
|
||||
import Spxl from "./layout/spxl.vue";
|
||||
import StreetGroup from "./layout/streetGroup.vue";
|
||||
import StreetCondition from "./layout/streetCondition.vue";
|
||||
import CountModel from "./layout/statisticsModel.vue";
|
||||
import LeftDialog from "./components/leftDialog.vue";
|
||||
import CenterDialog from "./components/centerDialog.vue";
|
||||
import RightDialog from "./components/rightDialog.vue";
|
||||
import BottomBtn from "./layout/bottomBtn.vue";
|
||||
import PoliceGroupInfo from "./layout/streetInfo.vue";
|
||||
import FzycDialog from "./layout/fzycDialog.vue";
|
||||
import { tbQwXfAddBxx } from '@/api/lz/backstage'
|
||||
// import { queryListZdrw } from '@/api/dpApi/home'
|
||||
import XfrwDialog from '@/views/backOfficeSystem/AlarmLinkage/PatrolLine/components/xfrwDialog.vue'
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
onUnmounted,
|
||||
watch,
|
||||
getCurrentInstance,
|
||||
reactive
|
||||
} from "vue";
|
||||
const visibleDialog = ref(false);
|
||||
const keywords = ref("")
|
||||
const show = reactive({
|
||||
yjzx: false,
|
||||
jqtj: false,
|
||||
bbts: false, //群访信息
|
||||
xssb: false, //线索上报
|
||||
dwryts: false, //单位人员统计
|
||||
yisj: false, //意见收集
|
||||
fzyc: false, //犯罪预测
|
||||
zdlx: false, //制定路线
|
||||
jzgroup: false //展示警组弹窗
|
||||
});
|
||||
|
||||
const showVisibleZdrw = ref(false);
|
||||
const showVisibleWarning = ref(false);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF, D_BZ_SD } = proxy.$dict("D_BZ_SF", "D_BZ_SD");
|
||||
const showVisible = ref(false);
|
||||
const selectTime_yc = ref("今日"); //犯罪预测时间类型
|
||||
const selectTime_Zd = ref("今日"); //犯罪预测时间类型
|
||||
const listQuery = ref({});
|
||||
const listQueryZd = ref({});
|
||||
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||||
const zdTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||||
const circleList = ref([]);
|
||||
const showClassL = ref(false); //左列折叠
|
||||
const showClassR = ref(false); //右列折叠
|
||||
const jzxqList = ref({}); //警组列表详情
|
||||
const fzycInfo = ref({}); //犯罪预测
|
||||
const spvalue = ref("Option1");
|
||||
const spTwoValue = ref("Option1");
|
||||
const options = ref([
|
||||
{
|
||||
value: "Option1",
|
||||
label: "Option1"
|
||||
},
|
||||
{
|
||||
value: "Option2",
|
||||
label: "Option2"
|
||||
},
|
||||
{
|
||||
value: "Option3",
|
||||
label: "Option3"
|
||||
},
|
||||
{
|
||||
value: "Option4",
|
||||
label: "Option4"
|
||||
},
|
||||
{
|
||||
value: "Option5",
|
||||
label: "Option5"
|
||||
}
|
||||
]);
|
||||
const timeList = ref({
|
||||
list: [
|
||||
"09:00-13:00",
|
||||
"13:00-17:00",
|
||||
"17:00-21:00",
|
||||
"21:00-01:00",
|
||||
"01:00-09:00"
|
||||
],
|
||||
hasChoose: []
|
||||
});
|
||||
const condition = ref()
|
||||
const zldwList = reactive({
|
||||
list: [],
|
||||
hasChoose: []
|
||||
});
|
||||
const isShowCount = ref(false); //是否展示统计
|
||||
watch(
|
||||
() => showClassR.value,
|
||||
(val) => {
|
||||
emitter.emit("followUp", !val);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => D_BZ_SD,
|
||||
(val) => {
|
||||
zldwList.list = val.value.map((v) => {
|
||||
return v.label;
|
||||
});
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
window.openTk = openTk;
|
||||
getListData();
|
||||
// 融合通迅
|
||||
let idEntityCard = window.localStorage.getItem("idEntityCard");
|
||||
let sfrh = window.localStorage.getItem("SFRH");
|
||||
if (sfrh == 1 && idEntityCard) {
|
||||
try {
|
||||
SPPUC.init(
|
||||
idEntityCard,
|
||||
"",
|
||||
function () { },
|
||||
function (device_id, type, [lng, lat, speed]) { }
|
||||
);
|
||||
} catch { }
|
||||
}
|
||||
// 展示犯罪预测
|
||||
emitter.on("showFzycInfo", (res) => {
|
||||
show.fzyc = res.type ? true : false;
|
||||
fzycInfo.value = res.info;
|
||||
});
|
||||
|
||||
// 展示警组
|
||||
emitter.on("showJzInfo", (res) => {
|
||||
show.jzgroup = res ? true : false;
|
||||
if (res) {
|
||||
res.txzb =
|
||||
typeof res.txzb == "string"
|
||||
? JSON.parse(res.txzb)
|
||||
: res.txzb
|
||||
? res.txzb
|
||||
: [];
|
||||
res.pbmj =
|
||||
typeof res.pbmj == "string"
|
||||
? JSON.parse(res.pbmj)
|
||||
: res.pbmj
|
||||
? res.pbmj
|
||||
: [];
|
||||
res.pbfj =
|
||||
typeof res.pbfj == "string"
|
||||
? JSON.parse(res.pbfj)
|
||||
: res.pbfj
|
||||
? res.pbfj
|
||||
: [];
|
||||
res.jyqx =
|
||||
typeof res.jyqx == "string"
|
||||
? JSON.parse(res.jyqx)
|
||||
: res.jyqx
|
||||
? res.jyqx
|
||||
: [];
|
||||
res.pbcl =
|
||||
typeof res.pbcl == "string"
|
||||
? JSON.parse(res.pbcl)
|
||||
: res.pbcl
|
||||
? res.pbcl
|
||||
: [];
|
||||
jzxqList.value = res;
|
||||
jzxqList.value.openJyqx = [];
|
||||
jzxqList.value.openTxzb = [];
|
||||
}
|
||||
if (!show.jzgroup) {
|
||||
emitter.emit("deleteText"); //清除巡防区文字
|
||||
emitter.emit("deletePointArea", "xfq"); //清除巡防区
|
||||
}
|
||||
});
|
||||
//获取条件
|
||||
emitter.on("conditions", (val) => {
|
||||
condition.value = val
|
||||
});
|
||||
emitter.on("showWarning", (val) => {
|
||||
visibleDialog.value = true;
|
||||
switch (val) {
|
||||
case "YJZX": //预警中心
|
||||
show.yjzx = true;
|
||||
break;
|
||||
case "JQTJ": //警情统计
|
||||
show.jqtj = true;
|
||||
break;
|
||||
case "QFXS": //群防线索
|
||||
show.xssb = true;
|
||||
break;
|
||||
case "BBTS": //报备提示
|
||||
show.bbts = true;
|
||||
break;
|
||||
case "DWRYTJ": //单位人员统计
|
||||
show.dwryts = true;
|
||||
break;
|
||||
case "YJSJ": //意见收集
|
||||
show.yisj = true;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 线索上报 推送播放
|
||||
emitter.on("socketXSSB", (val) => {
|
||||
val.tp = val.tp ? val.tp.split(",") : [];
|
||||
let html = `
|
||||
<div class="newCard">
|
||||
<div class="title two_text_detail">${val.nr}</div>
|
||||
<div class="text">
|
||||
上报人：<span class="info">${val.xm}（ ${val.lxdh} ）</span></span>
|
||||
</div>
|
||||
<div class="text">
|
||||
线索上报类型：<span class="info">${val.lxmc}</span></span>
|
||||
</div>
|
||||
<div class="text">图片：`;
|
||||
val.tp.forEach((it) => {
|
||||
html += `<img style="width:60px; height:60px; margin-left:2px;" src="/mosty-base/minio/image/download/${it}" />`;
|
||||
});
|
||||
html += ` </div></div>`;
|
||||
ElNotification({
|
||||
type: "warning",
|
||||
title: "线索上报",
|
||||
showClose: true,
|
||||
dangerouslyUseHTMLString: true,
|
||||
position: "bottom-right",
|
||||
message: html
|
||||
}); //消息推送
|
||||
});
|
||||
});
|
||||
|
||||
const openTk = (id) => {
|
||||
let obj = circleList.value.find((item) => {
|
||||
return item.id == id;
|
||||
});
|
||||
if (obj) emitter.emit("showAj", [obj]);
|
||||
};
|
||||
// 搜索
|
||||
const searchFn = () => {
|
||||
emitter.emit("deletePointArea", "search_bxd");
|
||||
emitter.emit("removeAll", "search_bxx");
|
||||
qcckGet({ keyword: keywords.value }, "/mosty-jmxf/jbldBxx/getBxxByKeyWord").then(res => {
|
||||
let lis = res || []
|
||||
let coords = []
|
||||
let bxd = []
|
||||
lis.forEach(v => {
|
||||
let obj = { coords: [v.zb], text: v.bxxMc }
|
||||
let zbd= v.bxds?v.bxds.map(item => {
|
||||
return {
|
||||
jd: item.jd,
|
||||
wd: item.wd,
|
||||
bxdMc:item.bxdMc,
|
||||
icon: item.sfdk == '0' || item.sfdk==null ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
|
||||
}
|
||||
}):[]
|
||||
bxd = [...bxd, ...zbd]
|
||||
coords.push(obj)
|
||||
})
|
||||
emitter.emit("echoLine", { coords, width: 4, flag: "search_bxx", type: 'dash', isclear: true, color: '#ff0000' });
|
||||
handlePoint(bxd, "", "search_bxd", 0.6, '#FF0000');
|
||||
})
|
||||
}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
// , zdjqtjlx: "03", czzt: "0,1"
|
||||
let data = { pageSize: 1000, pageNum: 1 };
|
||||
getSelectVigilant(data).then((res) => {
|
||||
circleList.value = res.records;
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
const el = res.records[i];
|
||||
emitter.emit("SsCircle", el);
|
||||
let { jd, wd } = el;
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd, wd }],
|
||||
icon: require("@/assets/point/sos.png"),
|
||||
flag: "sosPoint"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击下发指令
|
||||
function clickXfzl() {
|
||||
emitter.emit("removePlot", "quanXuan");
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("closeAllDialog");
|
||||
emitter.emit("showZlxf");
|
||||
}
|
||||
//点击群防群治
|
||||
function clickQfqz() {
|
||||
emitter.emit("removePlot", "quanXuan");
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("closeAllDialog");
|
||||
emitter.emit("showQfqz");
|
||||
}
|
||||
//点击犯罪预测
|
||||
function clickAddEvent() {
|
||||
showVisible.value = !showVisible.value;
|
||||
if (!showVisible.value) calcelFzyc("");
|
||||
}
|
||||
|
||||
//点击指导任务
|
||||
function clickAddZdrw() {
|
||||
showVisibleZdrw.value = !showVisibleZdrw.value;
|
||||
if (!showVisibleZdrw.value) calcelZd("");
|
||||
}
|
||||
|
||||
// 犯罪预测时间选择
|
||||
function changeYcTime(val) {
|
||||
let time = [];
|
||||
switch (val) {
|
||||
case "今日":
|
||||
time = [getRecentDay(0), getRecentDay(0)];
|
||||
break;
|
||||
case "昨日":
|
||||
time = [getRecentDay(-1), getRecentDay(-1)];
|
||||
break;
|
||||
case "本周":
|
||||
time = getThistWeekDare("week");
|
||||
break;
|
||||
case "本月":
|
||||
time = getThistWeekDare("month");
|
||||
break;
|
||||
case "近30日":
|
||||
time = [getRecentDay(-30), getRecentDay(0)];
|
||||
break;
|
||||
case "本季度":
|
||||
time = getThistWeekDare("quarter");
|
||||
break;
|
||||
case "近半年":
|
||||
time = [getRecentDay(-181), getRecentDay(0)];
|
||||
break;
|
||||
case "近一年":
|
||||
time = [getRecentDay(-365), getRecentDay(0)];
|
||||
break;
|
||||
}
|
||||
fzycTime.value = time;
|
||||
}
|
||||
|
||||
// 取消犯罪预测
|
||||
function calcelFzyc(val) {
|
||||
fzycTime.value = [getRecentDay(0), getRecentDay(0)];
|
||||
listQuery.value = { ssbmdm: "" };
|
||||
selectTime_yc.value = "今日";
|
||||
showVisible.value = false;
|
||||
timeList.value.hasChoose = [];
|
||||
}
|
||||
// 取消犯罪预测
|
||||
function calcelZd(val) {
|
||||
zdTime.value = [getRecentDay(0), getRecentDay(0)];
|
||||
listQueryZd.value = { ssbmdm: "" };
|
||||
selectTime_Zd.value = "今日";
|
||||
showVisibleZdrw.value = false;
|
||||
zldwList.hasChoose = [];
|
||||
}
|
||||
// 选择班次
|
||||
function changeDataBC(val) {
|
||||
timeList.value.hasChoose = val;
|
||||
}
|
||||
|
||||
// 选择指导任务
|
||||
function changeDataZldrw(val) {
|
||||
zldwList.hasChoose = val;
|
||||
}
|
||||
|
||||
// 指导巡逻
|
||||
function handleZd() {
|
||||
emitter.emit("deletePointArea", "zdxl_zdrw");
|
||||
let list = D_BZ_SD.value.filter((v) => {
|
||||
if (zldwList.hasChoose.includes(v.label)) return v;
|
||||
});
|
||||
|
||||
let params = {
|
||||
...listQueryZd.value,
|
||||
sdList: list.map((v) => {
|
||||
return v.value;
|
||||
}),
|
||||
kssj: zdTime.value[0],
|
||||
jssj: zdTime.value[1]
|
||||
};
|
||||
queryListZdrw(params).then((res) => {
|
||||
if (res.length == 0) return false;
|
||||
let cc = [];
|
||||
let list = res.map((el, index) => {
|
||||
let centerPoint = [el.zxX, el.zxY];
|
||||
if (index == 0) cc = centerPoint;
|
||||
let position = [
|
||||
[Number(el.x1), Number(el.y1)],
|
||||
[Number(el.x2), Number(el.y2)]
|
||||
];
|
||||
let text = el.dz + " " + el.xfsd;
|
||||
let obj = {
|
||||
position: position,
|
||||
text,
|
||||
id: el.id,
|
||||
userData: el,
|
||||
sfxl: el.sfxl
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
let arr1 = list.filter((v) => {
|
||||
return v.sfxl == 1;
|
||||
});
|
||||
let arr2 = list.filter((v) => {
|
||||
return v.sfxl != 1;
|
||||
});
|
||||
let params1 = {
|
||||
fontColor: "#b51209",
|
||||
coords: arr2,
|
||||
type: "rectangle",
|
||||
flag: "zdxl_zdrw",
|
||||
color: "rgba(255,255,0,0.5)",
|
||||
linecolor: "#f51616"
|
||||
};
|
||||
let params2 = {
|
||||
fontColor: "#b51209",
|
||||
coords: arr1,
|
||||
type: "rectangle",
|
||||
flag: "zdxl_zdrw",
|
||||
color: "rgba(255,255,0,0.5)",
|
||||
linecolor: "#1C97FF"
|
||||
};
|
||||
emitter.emit("echoPlane", params1);
|
||||
emitter.emit("echoPlane", params2);
|
||||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||||
});
|
||||
}
|
||||
|
||||
// 犯罪预测
|
||||
function handleFzyc() {
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc");
|
||||
let list = timeList.value.hasChoose.map((item) => {
|
||||
return item.slice(0, 2) + item.slice(5, 8);
|
||||
});
|
||||
let params = {
|
||||
...listQuery.value,
|
||||
bcList: list,
|
||||
kssj: fzycTime.value[0],
|
||||
jssj: fzycTime.value[1]
|
||||
};
|
||||
queryListfzyc(params).then((res) => {
|
||||
if (res.length == 0) return false;
|
||||
let cc = [];
|
||||
let list = res.map((el, index) => {
|
||||
let centerPoint = [el.zxX, el.zxY];
|
||||
if (index == 0) cc = centerPoint;
|
||||
let position = [
|
||||
[Number(el.x1), Number(el.y1)],
|
||||
[Number(el.x2), Number(el.y2)]
|
||||
];
|
||||
let text = el.realDate + " " + el.bc;
|
||||
let obj = {
|
||||
position: position,
|
||||
text,
|
||||
id: el.id,
|
||||
userData: el,
|
||||
sfxl: el.sfxl
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
let arr1 = list.filter((v) => {
|
||||
return v.sfxl == 1;
|
||||
});
|
||||
let arr2 = list.filter((v) => {
|
||||
return v.sfxl != 1;
|
||||
});
|
||||
let params1 = {
|
||||
fontColor: "#12fdb8",
|
||||
coords: arr2,
|
||||
type: "rectangle",
|
||||
flag: "zdxl_fzyc",
|
||||
color: "rgba(2,20,51,0.5)",
|
||||
linecolor: "#f51616"
|
||||
};
|
||||
let params2 = {
|
||||
fontColor: "#12fdb8",
|
||||
coords: arr1,
|
||||
type: "rectangle",
|
||||
flag: "zdxl_fzyc",
|
||||
color: "rgba(2,20,51,0.5)",
|
||||
linecolor: "#1C97FF"
|
||||
};
|
||||
emitter.emit("echoPlane", params1);
|
||||
emitter.emit("echoPlane", params2);
|
||||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||||
});
|
||||
}
|
||||
const xfDiloag = ref(false)
|
||||
//打开定制路线
|
||||
const openZdXl = (val) => {
|
||||
if (val == 'zd') {
|
||||
show.zdlx = true;
|
||||
} else {
|
||||
emitter.emit("openZdXl", { show: true, type: 'ck' });
|
||||
}
|
||||
};
|
||||
// 处理撒点
|
||||
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 });
|
||||
}
|
||||
onUnmounted(() => {
|
||||
emitter.off("showWarning");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
// 中间统计数据
|
||||
.statisModel {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Rank {
|
||||
left: 500px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
color: #010f30;
|
||||
font-size: 20px;
|
||||
top: 100px;
|
||||
left: 390px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.showCount {
|
||||
width: 1100px;
|
||||
height: 90px;
|
||||
transition: height 1s;
|
||||
-webkit-transition: height 1s;
|
||||
}
|
||||
|
||||
.heddenCount {
|
||||
width: 1100px;
|
||||
height: 0px;
|
||||
transition: height 1s;
|
||||
-webkit-transition: height 1s;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.lineOption {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
bottom: 100px;
|
||||
left: -100px;
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('~@/assets/images/quan.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
margin-bottom: 10px;
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
margin: auto 0;
|
||||
color: #0f6cd4;
|
||||
|
||||
div {
|
||||
width: 99%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.depBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #00bfff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
color: #fff;
|
||||
|
||||
::v-deep .el-radio {
|
||||
width: 74px;
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.footerBtns {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 1px solid #224ab5;
|
||||
// color: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor .el-range-input {
|
||||
background: transparent;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-popper.is-light {
|
||||
background: #00314e;
|
||||
border: 1px solid #00314e;
|
||||
}
|
||||
|
||||
::v-deep .el-popper.is-light .el-popper__arrow::before {
|
||||
background: #00314e;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
padding: 0 10px 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comom-cnt {
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input__inner {
|
||||
// width: 100px;
|
||||
height: 30px;
|
||||
// background: #061628;
|
||||
// background: url("~@/assets/images/streetBi/xzk.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
// border: 1px solid #0072ff;
|
||||
border-radius: 2px;
|
||||
// color: #fff !important;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 448px;
|
||||
z-index: 99;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #606266 !important;
|
||||
width: 20vw;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-notification {
|
||||
background: #052955;
|
||||
border: 1px solid #ff0526;
|
||||
box-shadow: inset 0 0 10px #ff0526;
|
||||
}
|
||||
|
||||
.el-notification__content,
|
||||
.el-notification__title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.newCard {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
background: #052955;
|
||||
}
|
||||
|
||||
.newCard .text {
|
||||
font-size: 12px;
|
||||
color: #6585af;
|
||||
}
|
||||
|
||||
.newCard .text span {
|
||||
color: #0093ed;
|
||||
}
|
||||
|
||||
.newCard .picture {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.newCard .picture .pictureLeft {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.el-notification.right {
|
||||
right: 410px;
|
||||
}
|
||||
|
||||
.el-notification .el-notification--warning {
|
||||
color: #ff0526;
|
||||
}
|
||||
|
||||
.el-notification .el-notification__closeBtn {
|
||||
color: #fff;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user