354 lines
10 KiB
Vue
354 lines
10 KiB
Vue
<template>
|
|
<!--下发指令 -->
|
|
<SizeDialog @handleIdentity="close" :show="showAddEvent" :butList="['提交']" :showContent="true" :showbut="false"
|
|
title="下发指令">
|
|
<div class="form_box">
|
|
<el-form label-width="100px" :model="formInfo" :inline="true" label-position="top" :rules="rules" ref="elform">
|
|
<el-form-item label="指令标题" style="width: 100%" prop="zlbt">
|
|
<el-input v-model="formInfo.zlbt" placeholder="请输入指令标题" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="指令类型" style="width: 100%" prop="zllx">
|
|
<el-select style="width: 100%" v-model="formInfo.zllx" placeholder="请选择指令类型">
|
|
<el-option v-for="dict in D_BZ_RGZLLX" :key="dict.value + 'zllx'" :label="dict.label"
|
|
:value="dict.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="指令等级" style="width: 100%" prop="zldj">
|
|
<el-select style="width: 100%" v-model="formInfo.zldj" placeholder="请选择指令等级">
|
|
<el-option v-for="dict in D_BZ_TYJB" :key="dict.value + 'zldj'" :label="dict.label"
|
|
:value="dict.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="指令接收对象" style="width: 100%" prop="zljsdx">
|
|
<el-select @change="checkJsdx" style="width: 100%" v-model="formInfo.zljsdx" placeholder="请选择指令接收对象">
|
|
<el-option v-for="dict in D_BZ_ZLJSDX" :key="dict.value + 'zljsdx'" :label="dict.label"
|
|
:value="dict.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="事件坐标" style="width: 100%" prop="jwd">
|
|
<el-input v-model="formInfo.jwd" placeholder="请选择坐标" clearable style="width: 80%" />
|
|
<el-button type="info" @click="selectLocation">选点</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="指令内容" style="width: 100%" prop="zlnr">
|
|
<el-input v-model="formInfo.zlnr" placeholder="请输入指令内容" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="附件上传" style="width: 100%" prop="fjmc">
|
|
<el-input v-model="formInfo.fjmc" placeholder="请选择上传文件" style="width: 80%" />
|
|
<el-upload :limit="1" action="/mosty-api/mosty-base/minio/image/upload/id" :on-change="upImgFile"
|
|
:on-success="upImg" :show-file-list="false">
|
|
<el-button type="primary" style="padding: 0 14px">上传</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<div class="mapQx">
|
|
<span>地图圈选 - 圈选人员</span>
|
|
<el-button type="primary" style="padding: 0 14px" @click="selectLoop">空间查询</el-button>
|
|
</div>
|
|
<div class="tagbox" placeholder="请选择人员">
|
|
<el-tag :key="tag" v-for="tag in qxList" closable :disabled-transitions="false" @close="handClose(tag)">
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
</el-form>
|
|
<div style="text-align: right">
|
|
<el-button type="primary" @click="submit">发送</el-button>
|
|
</div>
|
|
</div>
|
|
</SizeDialog>
|
|
<MjLoad v-model="visible" @choosedUsers="hanlderChooseMj" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { dateFormat } from "@/utils/auth.js";
|
|
import { ElMessage } from "element-plus";
|
|
import SizeDialog from "./minDialog.vue";
|
|
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import { reactive, ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
|
import { getXfbbList, addZl } from "@/api/situationPresentation/zlXf.js";
|
|
import { getSelectDeckList } from "@/api/dpApi/home.js";
|
|
import { getAddressApi } from "@/utils/tools.js";
|
|
const { proxy } = getCurrentInstance();
|
|
const { D_BZ_ZLLX, D_BZ_RGZLLX, D_BZ_ZLJSDX, D_BZ_TYJB } = proxy.$dict(
|
|
"D_BZ_ZLLX",
|
|
"D_BZ_RGZLLX",
|
|
"D_BZ_ZLJSDX",
|
|
"D_BZ_TYJB"
|
|
);
|
|
const visible = ref(false);
|
|
//巡组搜索参数
|
|
const xzQuery = reactive({
|
|
xfzt: "0,1,2",
|
|
pageCurrent: 1,
|
|
pageSize: 20,
|
|
jzMc: "",
|
|
xfzt: "0,1,2"
|
|
});
|
|
//巡组数据
|
|
const xzList = ref([]);
|
|
const qxList = ref([]);
|
|
const inputValue = ref("");
|
|
//巡组加载状态
|
|
const selectLoading = ref(false);
|
|
const showAddEvent = ref(false);
|
|
const formInfo = ref({
|
|
zxrDtoList: [],
|
|
zlfsdd: "",
|
|
zlbt: "抓捕疑似在逃人员",
|
|
zllx: "05",
|
|
zldj: "10",
|
|
zljsdx: "03",
|
|
zlnr: "抓捕疑似在逃人员"
|
|
});
|
|
const xzTotal = ref(0);
|
|
const elform = ref(null);
|
|
const rules = reactive({
|
|
zlbt: [{ required: true, message: "请填写指令标题" }],
|
|
zllx: [{ required: true, message: "请选择指令类型" }],
|
|
zlly: [{ required: true, message: "请选择指令来源" }],
|
|
zldj: [{ required: true, message: "请选择指令等级" }],
|
|
zljsdx: [{ required: true, message: "请选择指令接收对象" }],
|
|
jwd: [{ required: true, message: "请选择点位" }]
|
|
});
|
|
const fjmc = ref("");
|
|
onMounted(() => {
|
|
emitter.on("showZlxf", (res) => {
|
|
showAddEvent.value = true;
|
|
});
|
|
emitter.on("closeAllDialog", (res) => {
|
|
showAddEvent.value = false;
|
|
});
|
|
getXz();
|
|
// 圈选撒点
|
|
emitter.on("coordString", (res) => {
|
|
if (res.type == 'point') {
|
|
formInfo.value.jwd = res.coord[0] + "," + res.coord[1];
|
|
formInfo.value.jd = res.coord[0];
|
|
formInfo.value.wd = res.coord[1];
|
|
let data = { jd: res.coord[0], wd: res.coord[1] };
|
|
let img = require("@/assets/point/jq.png");
|
|
emitter.emit("deletePointArea", "jq");
|
|
emitter.emit("addPointArea", { coords: [data], icon: img, flag: "jq" });
|
|
}
|
|
if (res.type == 'circle') {
|
|
let data = {
|
|
pageCurrent: 1,
|
|
pageSize: 20,
|
|
radius: parseInt(res.data.radius) * 1000,
|
|
jd: res.data.centerPoint[0],
|
|
wd: res.data.centerPoint[1]
|
|
};
|
|
formInfo.value.jwd = res.data.centerPoint[0] + "," + res.data.centerPoint[1];
|
|
formInfo.value.jd = res.data.centerPoint[0];
|
|
formInfo.value.wd = res.data.centerPoint[1];
|
|
circleData(data);
|
|
}
|
|
});
|
|
});
|
|
onUnmounted(() => {
|
|
emitter.off("getcoord");
|
|
});
|
|
function handClose(tag) {
|
|
qxList.value.splice(qxList.value.indexOf(tag), 1);
|
|
}
|
|
function remoteMethod(query) {
|
|
if (query) {
|
|
xzQuery.jzMc = query;
|
|
xzQuery.pageCurrent = 1;
|
|
getXz();
|
|
}
|
|
}
|
|
//选择民警
|
|
function hanlderChooseMj(arr) {
|
|
const jzryList = arr.map((item) => {
|
|
return {
|
|
jsrid: item.ryid,
|
|
jsrmc: item.xm,
|
|
jsrsfzh: item.sfzh,
|
|
jsrlxdh: item.lxdh,
|
|
jsrlx: item.fl,
|
|
xm: item.xm
|
|
};
|
|
});
|
|
formInfo.value.zxrDtoList = jzryList;
|
|
}
|
|
function getXz() {
|
|
getSelectDeckList(xzQuery).then((res) => {
|
|
xzTotal.value = res.total;
|
|
xzList.value = res.records;
|
|
});
|
|
}
|
|
function checkJsdx() {
|
|
formInfo.value.zxrDtoList = [];
|
|
}
|
|
|
|
//懒加载
|
|
function selectLoad() {
|
|
if (xzTotal.value > xzList.value.length) {
|
|
xzQuery.pageCurrent++;
|
|
getXfbbList(xzQuery).then((res) => {
|
|
xzTotal.value = res.total;
|
|
xzList.value.push(...res.records);
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
//关闭弹窗
|
|
function close() {
|
|
showAddEvent.value = false;
|
|
qxList.value = [];
|
|
formInfo.value = { zxrDtoList: [] };
|
|
emitter.emit("removePlot", "PIO");
|
|
emitter.emit("deletePointArea", "jq");
|
|
emitter.emit("deletePointArea", "jqMap");
|
|
emitter.emit("deletePointArea", "yjMap");
|
|
emitter.emit("deletePointArea", "sp");
|
|
emitter.emit("deletePointArea", "kk");
|
|
emitter.emit("deletePointArea", "centerpoint");
|
|
emitter.emit("removePlot", 'quanXuan'); //移除绘制工具
|
|
}
|
|
function submit() {
|
|
elform.value.validate((valid) => {
|
|
if (!valid) return false;
|
|
const data = { ...formInfo.value, zllx: '06' };
|
|
data.zxrDtoList = formInfo.value.zxrDtoList.map((item) => {
|
|
return {
|
|
zxrXzid: item.id,
|
|
zxrLx: "03",
|
|
zxrXzmc: item.jzMc
|
|
};
|
|
});
|
|
addZl(data).then(() => {
|
|
close();
|
|
proxy.$message({ type: "success", message: "指令下发成功" });
|
|
});
|
|
});
|
|
}
|
|
//选择点位
|
|
function selectLocation() {
|
|
emitter.emit("removePlot", "PIO");
|
|
emitter.emit("drawShape", { flag: "PIO", type: 'point' });
|
|
}
|
|
|
|
function upImgFile(row) {
|
|
fjmc.value = row.name;
|
|
}
|
|
function upImg(row) {
|
|
formInfo.value.fjId = row.data;
|
|
formInfo.value.fjmc = fjmc.value;
|
|
}
|
|
function handleClose(tag) {
|
|
formInfo.value.zxrDtoList.splice(formInfo.value.zxrDtoList.indexOf(tag), 1);
|
|
}
|
|
//地图圈选
|
|
function selectLoop() {
|
|
emitter.emit("deletePointArea", "jqMap");
|
|
emitter.emit("deletePointArea", "yjMap");
|
|
emitter.emit("deletePointArea", "sp");
|
|
emitter.emit("deletePointArea", "kk");
|
|
emitter.emit("deletePointArea", "jq");
|
|
qxList.value = []
|
|
formInfo.value.zxrDtoList = []
|
|
|
|
emitter.emit("deletePointArea", "centerpoint");
|
|
emitter.emit("drawShape", { flag: "quanXuan", type: 'circle', isclear: true });
|
|
}
|
|
//获取圈选数据
|
|
function circleData(data) {
|
|
getSelectDeckList(data).then((res) => {
|
|
if (res.records.length > 0) {
|
|
qxList.value = res.records.map((item, index) => {
|
|
return item.jzMc ? item.jzMc : item.fzrXm + "巡组";
|
|
});
|
|
formInfo.value.zxrDtoList = res.records.map((item, index) => {
|
|
return item;
|
|
});
|
|
} else {
|
|
ElMessage({ message: "暂无巡组信息", type: "warning" });
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
|
|
.form_box {
|
|
padding: 10px;
|
|
max-height: 84vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
::v-deep .el-form-item__content {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.ipt {
|
|
min-height: 32px;
|
|
border: 1px solid #fff;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.el-tag {
|
|
margin-right: 12px;
|
|
background: #434449;
|
|
}
|
|
}
|
|
|
|
.tagbox {
|
|
min-height: 32px;
|
|
border: 1px solid #409eff;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
padding: 4px 12px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 4px;
|
|
max-height: 100px;
|
|
overflow: hidden;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ipt:hover {
|
|
border-color: rgb(62, 127, 247);
|
|
}
|
|
|
|
.ts::after {
|
|
content: "请选择指令接收对象";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 12px;
|
|
line-height: 32px;
|
|
bottom: 0;
|
|
color: rgb(177, 177, 177);
|
|
}
|
|
|
|
.mapQx {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
::v-deep .el-tag--default.is-closable {
|
|
margin-bottom: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
::v-deep .el-form--inline.el-form--label-top {
|
|
max-height: 78vh;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|