Files
ba_web/src/views/backOfficeSystem/service/watchmanFiling/index.vue

1386 lines
41 KiB
Vue
Raw Normal View History

2025-09-22 09:01:41 +08:00
<template>
<div>
<div class="titleBox">
<div class="title">巡防报备</div>
<div class="btnBox">
<el-button type="primary" @click="add">
<el-icon style="vertical-align: middle">
<CirclePlus />
</el-icon>
<span style="vertical-align: middle">手动报备</span>
</el-button>
<el-button :disabled="ids.length == 0" typeof="danger" @click="batchDelete">
<el-icon style="vertical-align: middle">
<Delete />
</el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
</div>
</div>
<div class="searchBox" ref="searchBox">
<el-form :model="listQuery" :inline="true">
<el-form-item label="巡防部门">
<MOSTY.Department width="180px" clearable filterable v-model="listQuery.ssbmdm" />
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="listQuery.fzrXm" placeholder="请输入负责人姓名"></el-input>
</el-form-item>
<el-form-item label="巡防日期范围">
<el-date-picker v-model="Qzrq" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" @change="upQzrq" format="YYYY-MM-DD" value-format="YYYY-M-D HH:mm:ss" />
</el-form-item>
<el-form-item label="巡防报备范围">
<el-date-picker v-model="xfbbRange" type="datetimerange" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" @change="upxfbb" format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item>
<el-button @click="handleFilter"> 查询 </el-button>
<el-button @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
<div class="cntBox-bb">
<div class="tabBox">
<el-table :data="tableData" border @selection-change="handleSelectionChange" row-key="id" style="width: 100%"
:key="keyCount" :height="tableHeight" v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)"
element-loading-text="数据加载中。。">
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" show-overflow-tooltip align="center" width="60px" label="序号" />
<el-table-column prop="ssbm" show-overflow-tooltip align="center" label="巡防部门" />
<el-table-column prop="xfrq" show-overflow-tooltip align="center" label="巡防日期">
<template #default="{ row }">
<div> {{ row.xfrq ? row.xfrq.substring(0, 10) : row.xfrq }} </div>
</template>
</el-table-column>
<el-table-column prop="kssj" show-overflow-tooltip align="center" label="计划开始时间" v-if="!isShowMap" />
<el-table-column prop="jssj" show-overflow-tooltip align="center" label="计划结束时间" v-if="!isShowMap" />
<el-table-column prop="bbkssj" show-overflow-tooltip align="center" label="报备开始时间" />
<el-table-column prop="bbjssj" show-overflow-tooltip align="center" label="报备结束时间" />
<el-table-column prop="fzrXm" show-overflow-tooltip align="center" label="负责人" v-if="!isShowMap" />
<el-table-column prop="jlList" show-overflow-tooltip align="center" label="民警" v-if="!isShowMap">
<template #default="{ row }">
<el-tag class="mx-1" v-for="item in row.jlList" v-show="item.jllx == '01'" :key="item.id">{{ item.jlxm
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="jlList" show-overflow-tooltip align="center" label="辅警" v-if="!isShowMap">
<template #default="{ row }">
<el-tag class="mx-1" v-for="item in row.jlList" v-show="item.jllx == '02'" :key="item.id">{{ item.jlxm
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="wzlx" show-overflow-tooltip align="center" label="武装类型" v-if="!isShowMap">
<template #default="{ row }">
<dict-tag :options="D_BZ_WZLX" :value="row.wzlx" :tag="false"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="xfsc" show-overflow-tooltip align="center" label="巡逻时长">
<template #default="{ row }">
<span v-if="row.xfsc">{{ (row.xfsc / 3600).toFixed(2) + "/h" }}</span>
</template>
</el-table-column>
<el-table-column prop="xflc" show-overflow-tooltip align="center" label="巡逻里程">
<template #default="{ row }">
<span v-if="row.xflc">{{ (row.xflc / 1000).toFixed(2) + "/KM" }}</span>
</template>
</el-table-column>
<el-table-column prop="bblx" show-overflow-tooltip align="center" label="报备类型" v-if="!isShowMap">
<template #default="{ row }">
<dict-tag :options="D_BZ_BBFS" :value="row.bblx" :tag="false"></dict-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="right" fixed="right" :width="isShowMap ? '200px' : '320px'">
<template #default="{ row }">
<el-button @click="handleBPH(row)" size="small" style="margin-bottom:4px;"
v-if="!isShowMap && !row.bphbbid">上报扁平化</el-button>
<el-button @click="deleteBPH(row)" type="danger" size="small" style="margin-bottom:4px;"
v-if="!isShowMap && row.bphbbid">删除扁平化</el-button>
<el-button @click="lookGj(row, 'gjhf')" size="small" style="margin-bottom:4px;">轨迹回放</el-button>
<el-button @click="lookGj(row, 'clgj')" size="small" style="margin-bottom:4px;">车辆轨迹</el-button>
<el-button @click="infDate(row)" size="small" v-if="!isShowMap" style="margin-bottom:4px;">详情</el-button>
<el-button v-if="row.bbzt != 1 && row.bbzt != 0 && !isShowMap" @click="update(row)" size="small"
style="margin-bottom:4px;">修改</el-button>
<el-button v-if="row.bbzt != 0 && row.bbzt != 1 && !isShowMap" size="small" @click="baoBei(row, '0')"
style="margin-bottom:4px;">报备</el-button>
<el-button v-if="row.bbzt == 0 && !isShowMap" size="small" @click="baoBei(row, '1')"
style="margin-bottom:4px;">结束报备</el-button>
<el-button type="danger" size="small" @click="delDictItem(row)" v-if="!isShowMap"
style="margin-bottom:4px;">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
<div class="mapbox" v-if="isShowMap" :style="{ height: tableHeight + 50 + 'px' }">
<!-- 轨迹回放 -->
<MapDialog v-model:modelValue="isShowMap" :lxtype="typeGj" :data="gJDate" />
</div>
</div>
<div v-if="dialogFormVisible" class="dialog">
<div class="head_box">
<span class="title">{{ title }}</span>
<div>
<el-button v-if="isDetail" type="primary" size="small" @click="submit" :loading="btnLoading">{{ infoLoad ?
"开始报备"
: "结束报备" }}</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
<el-form-item label="巡防部门" prop="ssbmdm" style="width: 100%;">
<MOSTY.Department style="width: 100%" :placeholder="form.ssbm" clearable filterable v-model="form.ssbmdm" />
</el-form-item>
<el-form-item label="巡防日期" prop="xfrq">
<el-date-picker :disabled="ischooseTime" style="width: 100%" v-model="form.xfrq" placeholder="请选择"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item prop="xffwlx" label="巡防范围类型">
<el-radio-group v-model="form.xffwlx" @change="rad(form.xffwlx)">
<el-radio label="1">巡防区</el-radio>
<el-radio label="2">快反点</el-radio>
<el-radio label="3">检查站</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="巡防区" v-if="form.xffwlx == '1'">
<el-select @change="fxChange" v-model="form.xf" clearable multiple placeholder="请选择巡防区">
<el-option v-for="item in xfList.xfqList" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="快反点" v-if="form.xffwlx == '2'">
<el-select @change="fxChange" v-model="form.xffwid" clearable placeholder="请选择快反点">
<el-option v-for="item in xfList.kfdList" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="检查站" v-if="form.xffwlx == '3'">
<el-select @change="fxChange" v-model="form.xffwid" clearable placeholder="请选择检查站">
<el-option v-for="item in xfList.jczList" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item style="width: 100%" label="班次选择" prop="qwbcId">
<el-radio-group @change="setQwbc" v-model="form.qwbcId">
<el-radio style="margin: 8px" v-for="item in qwbaDataList" :key="item.id" :label="item.id">
<div class="tags" :style="{ borderColor: item.bcys }">
<span>{{ setHm(item.kssj) }}-{{ setHm(item.jssj) }}</span>
<span>{{ item.bcmc }}</span>
</div>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="kssj" label="开始时间">
<el-time-picker style="width: 100%" v-model="form.kssj" placeholder="请选择" format="HH:mm:ss"
value-format="HH:mm:ss" @change="setJgts" />
</el-form-item>
<el-form-item prop="jssj" label="结束时间">
<el-time-picker style="width: 100%" v-model="form.jssj" placeholder="请选择" format="HH:mm:ss"
value-format="HH:mm:ss" @change="setJgts" />
</el-form-item>
<el-form-item label="选择警组" prop="jzId">
<el-select v-model="form.jzId" filterable style="width: 100%" placeholder="请选择警组" @change="setJz">
<el-option v-for="item in jzData" :key="item.id" :label="item.jzMc" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="负责人" prop="fzrXm">
<el-input readonly @click="chooseUserVisible = true" v-model="form.fzrXm" placeholder="请选择负责人" clearable
style="width: 100%" />
</el-form-item>
<el-form-item label="身份证" prop="fzrSfzh">
<el-input style="width: 100%" v-model="form.fzrSfzh" placeholder="请填写负责人身份证号"></el-input>
</el-form-item>
<el-form-item label="负责人电话" prop="fzrLxdh">
<el-input style="width: 100%" v-model="form.fzrLxdh" placeholder="请填写负责人电话"></el-input>
</el-form-item>
<el-form-item style="width: 100%" label="民警" prop="">
<div :class="mjData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="mjVisible = true">
<el-tag v-for="tag in mjData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleClose(tag)">
{{ tag.jlxm }}
</el-tag>
</div>
</el-form-item>
<el-form-item style="width: 100%" label="辅警" prop="">
<div :class="fjData.length === 0 ? 'ipt fj' : 'ipt'" @click.stop="fjVisible = true">
<el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleClosefj(tag)">
{{ tag.jlxm }}
</el-tag>
</div>
</el-form-item>
<el-form-item style="width: 100%" label="智能装备" prop="">
<div :class="znzbData.length === 0 ? 'ipt znzb' : 'ipt'" @click.stop="znzbVisible = true">
<el-tag v-for="tag in znzbData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleCloseZb(tag)">
{{ tag.sbmc }}
</el-tag>
</div>
</el-form-item>
<el-form-item style="width: 100%" label="常用装备" prop="">
<div :class="jyqxData.length === 0 ? 'ipt jyqx' : 'ipt'" @click.stop="jyqxVisible = true">
<el-tag v-for="tag in jyqxData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleCloseQx(tag)">
{{ tag.qxmc }}
</el-tag>
</div>
</el-form-item>
<el-form-item style="width: 100%" label="巡防车辆" prop="">
<div :class="jyclData.length === 0 ? 'ipt cl' : 'ipt'" @click.stop="jyclVisible = true">
<el-tag v-for="tag in jyclData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleCloseCl(tag)">
{{ tag.jdchphm }}
</el-tag>
</div>
</el-form-item>
<el-form-item v-for="item in jyqxData" :key="item.qxid" :label="item.qxmc">
<el-input-number style="width: 100%" v-model="item.qxsl" class="mx-4" :min="0" />
</el-form-item>
<div style="width: 100%"></div>
<el-form-item label="巡逻方式" prop="xlfs">
<el-radio-group v-model="form.xlfs" class="ml-4">
<el-radio v-for="(item, index) in D_BZ_XLFS" :label="item.value" :key="index">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="武装类型" prop="wzlx">
<el-radio-group v-model="form.wzlx" class="ml-4">
<el-radio v-for="(item, index) in D_BZ_WZLX" :label="item.value" :key="index">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="着装类型" prop="zzlx">
<el-radio-group v-model="form.zzlx" class="ml-4">
<el-radio v-for="(item, index) in D_BZ_ZZLX" :key="index" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" style="width: 100%">
<el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
</el-form-item>
</el-form>
</div>
<ChooseUser v-model="chooseUserVisible" @choosedUsers="hanlderChoose" />
<MjLoad v-model="mjVisible" @choosedUsers="hanlderChooseMj" />
<FjLoad v-model="fjVisible" @choosedUsers="hanlderChooseFj" />
<JyqxLoad v-model="jyqxVisible" @choosedUsers="hanlderChooseJyqx" />
<JyclLoad v-model="jyclVisible" @choosedUsers="hanlderChooseJycl" />
<ZnzbLoad v-model="znzbVisible" @choosedUsers="hanlderChooseZnzb" />
</div>
</template>
<script setup>
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import ChooseUser from "@/components/MyComponents/ChooseUser";
import MapDialog from './mapDialog.vue'
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
import { getQwbc } from "@/api/service/shift.js";
import * as MOSTY from "@/components/MyComponents/index";
import { selectDeptPage } from "@/api/user-manage";
import { getqwdj } from "@/api/service/grade.js";
import { getXfbb, addXfbb, deleteXfbb, getXfbbInfo, updateXfbb, xfbb, getMybbTodayNew, getMyXfpbToday } from "@/api/service/watchmanFiling.js";
import { getJzList } from "@/api/basicsmanage/servicejz.js";
import { getKfd } from "@/api/basicsmanage/quick-rebate.js";
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_ZZLX, D_BZ_WZLX, D_BZ_XLFS, D_BZ_BBFS } = proxy.$dict("D_BZ_ZZLX", "D_BZ_WZLX", "D_BZ_XLFS", "D_BZ_BBFS");
const gJDate = ref({})
const D_BZ_DJQW = ref([]);
const qwbaDataList = ref([]); //勤务班次数据
const searchBox = ref(null); // 搜索盒子
const Qzrq = ref([]);
const xfbbRange = ref([]);
const typeGj = ref('') //轨迹回放类型
const jzData = ref([]); //警组列表数据
const tableHeight = ref(); // 表格高度
const loadingTable = ref(true);
const chackAdd = ref(false);
const qwbcD = ref([]); //勤务班次单选数据
const cascader = ref(null);
const ids = ref([]); //批量删除的ID
const tableData = ref([]); //表格数据
const depList = ref([]); //部门数据
const infoLoad = ref(false);
const btnLoading = ref(false); //按钮截流
const keyCount = ref(0); //tabel组件刷新值
const chooseUserVisible = ref(false);
const title = ref("新增巡防报备");
const elform = ref(null);
const total = ref(0);
const mjVisible = ref(false); //民警弹窗
const mjData = ref([]);
const fjVisible = ref(false); //辅警弹窗
const fjData = ref([]);
const jyqxVisible = ref(false); //常用装备弹窗
const jyqxData = ref([]);
const jyclVisible = ref(false); //警用车辆弹窗
const jyclData = ref([]);
const znzbVisible = ref(false); //智能装备弹窗
const znzbData = ref([]);
const dialogFormVisible = ref(false); //弹窗
const isShowMap = ref(false) //展示地图
//搜索数据
const listQuery = ref({
pageCurrent: 1,
pageSize: 20
});
//表单数据
const form = ref({});
//级联选择器配置
const props = {
expandTrigger: "children",
children: "childDeptList",
label: "orgName",
value: "id",
checkStrictly: true,
emitPath: false
};
watch(() => isShowMap.value, (val) => {
emitter.emit('closeMeun')
})
function upQzrq(val) {
listQuery.value.ksXfrq = val ? val[0] : '';
listQuery.value.jsXfrq = val ? val[1] : '';
}
function upxfbb(val) {
listQuery.value.bbkssj = val ? val[0] : '';
listQuery.value.bbjssj = val ? val[1] : '';
}
//表单验证
const rules = reactive({
ssbmdm: [
{
required: true,
message: "请选择部门",
trigger: "change"
}
],
xfrq: [
{
required: true,
message: "请选择巡防日期",
trigger: "change"
}
],
xffwlx: [
{
required: true,
message: "请选择巡防范围类型",
trigger: "change"
}
],
qwbcId: [
{
required: true,
message: "请选择巡防排班",
trigger: "change"
}
],
jssj: [
{
required: true,
message: "请选择结束时间",
trigger: "change"
}
],
kssj: [
{
required: true,
message: "请选择开始时间",
trigger: "change"
}
],
jzId: [
{
required: true,
message: "请选择警组",
trigger: "change"
}
],
fzrXm: [
{
required: true,
message: "请选择负责人",
trigger: "change"
}
]
});
//选择用户
const hanlderChoose = (users) => {
const user = users[0];
form.value.fzrXm = user.userName;
form.value.fzrSfzh = user.idEntityCard;
form.value.fzrLxdh = user.mobile;
form.value.fzrId = user.id;
};
const nowYear = ref(new Date().getFullYear());
const nowmonth = ref(new Date().getMonth() + 1);
const nowDay = ref(new Date().getDate());
const nowtime = ref("");
const xfList = reactive({
xfqList: [],
kfdList: [],
jczList: []
});
const xffwList = ref([]); //用户选中的巡防类型数
// 获取当天的报备信息或排班信息 没有报备信息则查询排班
const ischooseTime = ref(false);
//选中的巡防区
function fxChange(val) {
xffwList.value = [];
if (form.value.xffwlx == "1") {
val.forEach((item) => {
xfList.xfqList.forEach((el) => {
if (item == el.value)
xffwList.value.push({
fwMc: el.label,
glbid: el.value,
id: el.value,
qwlx: "1",
xffwlx: form.value.xffwlx
});
});
});
} else if (form.value.xffwlx == "2") {
val.forEach((item) => {
xfList.kfdList.forEach((el) => {
if (item == el.value)
xffwList.value.push({
fwMc: el.label,
glbid: el.value,
id: el.value,
qwlx: "1",
xffwlx: form.value.xffwlx
});
});
});
} else if (form.value.xffwlx == "3") {
val.forEach((item) => {
xfList.jczList.forEach((el) => {
if (item == el.value)
xffwList.value.push({
fwMc: el.label,
glbid: el.value,
id: el.value,
qwlx: "1",
xffwlx: form.value.xffwlx
});
});
});
}
}
//选择巡防区
function rad(item, index) {
form.value.xf = null;
form.value.xffwList = [];
switch (item.value) {
case "1":
form.value.xf = [];
break;
case "2":
form.value.xf = "";
break;
case "3":
form.value.zqList.xf = "";
break;
}
}
function getTodayInfo() {
getMybbTodayNew().then((res) => {
if (res === null) {
getMyXfpbToday().then((respb) => {
if (respb !== null) {
let time_month = nowmonth.value; //现在的月份
let time_day = nowDay.value; //现在的天数
if (nowmonth.value < 10) {
time_month = 0 + "" + nowmonth.value;
}
if (nowDay.value < 10) {
time_day = 0 + "" + nowDay.value;
}
nowtime.value = nowYear.value + "-" + time_month + "-" + time_day;
infoLoad.value = true;
form.value = respb;
mjData.value = !form.value.pbmj ? [] : JSON.parse(form.value.pbmj);
fjData.value = !form.value.pbfj ? [] : JSON.parse(form.value.pbfj);
jyclData.value = !form.value.pbcl ? [] : JSON.parse(form.value.pbcl);
znzbData.value = !form.value.txzb ? [] : JSON.parse(form.value.txzb);
jyqxData.value = !form.value.jyqx ? [] : JSON.parse(form.value.jyqx);
form.value.xfrq = nowtime.value;
ischooseTime.value = true;
form.value.xffwlx = respb.xffwlx;
try {
form.value.xf = respb.xffwid.split(",");
} catch (error) {
form.value.xf = respb.xffwid;
}
fxChange(form.value.xf);
}
});
} else {
infoLoad.value = false;
form.value = res;
mjData.value = !form.value.pbmj ? [] : JSON.parse(form.value.pbmj);
fjData.value = !form.value.pbfj ? [] : JSON.parse(form.value.pbfj);
jyclData.value = !form.value.pbcl ? [] : JSON.parse(form.value.pbcl);
znzbData.value = !form.value.txzb ? [] : JSON.parse(form.value.txzb);
jyqxData.value = !form.value.jyqx ? [] : JSON.parse(form.value.jyqx);
ischooseTime.value = false;
form.value.xffwlx = res.xffwlx;
try {
form.value.xf = res.xffwid.split(",");
} catch (error) {
form.value.xf = res.xffwid;
}
fxChange(form.value.xf);
}
});
}
//巡防范围配置
const propsXffw = {
lazy: true,
lazyLoad(node, resolve) {
const { level, value } = node;
let nodes = [];
if (value == "1") {
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
nodes = res.records.map((item) => {
return { value: item.id, label: item.xfqMc, leaf: level >= 1 };
});
resolve(nodes);
});
} else if (value == "2") {
getKfd({ pageNum: 1, pageSize: 100, dwlxs: "01" }).then((res) => {
nodes = res.records.map((item) => {
return { value: item.kfdId, label: item.kfdMc, leaf: level >= 1 };
});
resolve(nodes);
});
} else if (value == "3") {
getKfd({ pageNum: 1, pageSize: 100, dwlxs: "02" }).then((res) => {
nodes = res.records.map((item) => {
return { value: item.kfdId, label: item.kfdMc, leaf: level >= 1 };
});
resolve(nodes);
});
}
}
};
//获取勤务等级
function getQwDj() {
let params = { fbzt: "1", pageCurrent: 1, pageSize: 1000 };
getqwdj(params).then((res) => {
D_BZ_DJQW.value = res.records.map((item) => {
let data = "一级勤务";
if (item.qwdj == "01") {
data = "一级勤务";
} else if (item.qwdj == "02") {
data = "二级勤务";
} else if (item.qwdj == "03") {
data = "三级勤务";
} else {
data = "日常勤务";
}
return { value: item.qwdj, label: data };
});
});
}
// 时分秒截取
function setHm(item) {
return item.split(":")[0] + ":" + item.split(":")[1];
}
//搜索
function handleFilter() {
listQuery.value.pageNum = 1
getListData();
}
//巡防力量弹框相关
function handleClose(tag) {
mjData.value.splice(mjData.value.indexOf(tag), 1);
}
//选择民警
function hanlderChooseMj(arr) {
const jzryList = arr.map((item) => {
return {
jlId: item.id,
jllx: item.fl,
jlxm: item.xm,
sfzh: item.sfzh,
lxdh: item.lxdh,
xbdm: item.xbdm,
xl: item.lx ? item.lx : "04"
};
});
mjData.value = jzryList;
}
function handleClosefj(tag) {
fjData.value.splice(fjData.value.indexOf(tag), 1);
}
function getQwbcData() {
let params = {
pageCurrent: 1,
pageSize: 1000,
bclx: "02"
};
getQwbc(params).then((res) => {
qwbaDataList.value = res.records.map((item) => {
return {
bcys: item.bcys,
kssj: item.kssj,
jssj: item.jssj,
id: item.id,
zqsc: item.zqsc,
bcmc: item.bcmc
};
});
});
}
function setQwbc() {
qwbaDataList.value.forEach((v) => {
if (v.id == form.value.qwbcId) {
form.value.kssj = v.kssj;
form.value.jssj = v.jssj;
form.value.qwbcId = v.id;
form.value.zqsc = v.zqsc;
qwbcD.value = [v];
}
});
}
//选择辅警
function hanlderChooseFj(arr) {
const jzryList = arr.map((item) => {
return {
jlId: item.id,
jllx: item.fl,
jlxm: item.xm,
sfzh: item.sfzh,
lxdh: item.lxdh,
xbdm: item.xbdm,
xl: item.lx
};
});
fjData.value = jzryList;
}
function handleCloseCl(tag) {
jyclData.value.splice(jyclData.value.indexOf(tag), 1);
}
//选择警用车辆
function hanlderChooseJycl(arr) {
const clList = arr.map((item) => {
return {
clId: item.cid,
jdchphm: item.cph,
jdchpzldm: item.cplx,
gpsId: item.gpsId
};
});
jyclData.value = clList;
}
function handleCloseZb(tag) {
znzbData.value.splice(znzbData.value.indexOf(tag), 1);
}
//选择智能装备
function hanlderChooseZnzb(arr) {
const txzbList = arr.map((item) => {
return {
txzblx: item.scode,
zbId: item.id,
sbmc: item.sbmc,
hh: item.sbbh,
sbbh: item.sbbh,
sfrh: item.sfrh,
sfzy: item.sfzy,
sfxt: item.sfxt
};
});
znzbData.value = txzbList;
}
function handleCloseQx(tag) {
jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
}
//切换警组
function setJz() {
jzData.value.forEach((v) => {
if (form.value.jzId == v.id) {
form.value.fzrXm = v.ddMjxm;
form.value.fzrId = v.ddMjid;
form.value.jzMc = v.jzMc;
form.value.fzrSfzh = v.ddMjsfzh;
form.value.fzrLxdh = v.ddDh;
jyqxData.value = v.jyqxList.map((item) => {
return {
qxid: item.qxId,
qxlx: item.scode,
qxsl: item.qxsl,
qxmc: item.qxmc
};
});
jyclData.value = v.clList.map((item) => {
return {
clId: item.clId,
jdchphm: item.jdchphm,
jdchpzldm: item.jdchpzldm,
gpsId: item.gpsId
};
});
fjData.value = [];
mjData.value = [];
v.jzryList.forEach((item) => {
if (item.jllx == "01") {
mjData.value.push({
jlId: item.ryId,
jllx: item.jllx,
jlxm: item.jlxm,
sfzh: item.sfzh,
lxdh: item.lxdh,
xbdm: item.xbdm
});
} else {
fjData.value.push({
jlId: item.ryid,
jllx: item.jllx,
jlxm: item.jlxm,
sfzh: item.sfzh,
lxdh: item.lxdh,
xbdm: item.xbdm
});
}
});
znzbData.value = v.txzbList.map((item) => {
return {
txzblx: item.txzblx,
zbId: item.zbId,
sbmc: item.sbmc,
hh: item.hh,
sbbh: item.sbbh,
sfrh: item.sfrh,
sfzy: item.sfzy,
sfxt: item.sfxt
};
});
}
});
}
function setJgts() {
if (form.value.kssj && form.value.jssj) {
let start =
form.value.kssj.split(":")[0] * 3600 +
form.value.kssj.split(":")[1] * 60 +
orm.value.kssj.split(":")[2] * 1;
let end =
form.value.jssj.split(":")[0] * 3600 +
form.value.jssj.split(":")[1] * 60 +
orm.value.jssj.split(":")[2] * 1;
if (start <= end) {
form.value.jgts = 1;
} else {
form.value.jgts = 0;
}
}
}
//选择常用装备
function hanlderChooseJyqx(arr) {
const jyqxList = arr.map((item) => {
return { qxid: item.id, qxlx: item.scode, qxsl: 1, qxmc: item.qxMc };
});
jyqxData.value = jyqxList;
}
// 获取警组列表
function getJzData() {
let params = {
pageCurrent: 1,
pageSize: 1000
};
getJzList(params).then((res) => {
jzData.value = res.records;
});
}
//重置
function reset() {
Qzrq.value = [];
xfbbRange.value = [];
listQuery.value = {
pageCurrent: 1,
pageSize: 20
};
getListData();
}
//新增表单重置
function resetForm() {
form.value = {
xlfs: "1",
wzlx: "1",
zzlx: "1",
xffwlx: "1",
xf: ""
};
}
//新增
function add() {
getTodayInfo();
isDetail.value = true;
infoLoad.value = true;
chackAdd.value = true;
jyclData.value = [];
mjData.value = [];
fjData.value = [];
jyqxData.value = [];
znzbData.value = [];
resetForm();
title.value = "新增巡防报备";
dialogFormVisible.value = true;
}
// 轨迹回放
function lookGj(row, type) {
console.log(row.clList, type);
if (type == 'clgj' && row.clList && row.clList.length == 0) {
isShowMap.value = false;
return proxy.$message({ type: "info", message: '该数据没有报备车辆' });
} else {
nextTick(() => {
isShowMap.value = true;
typeGj.value = type
gJDate.value = row;
})
}
}
//详情
const isDetail = ref(true);
function infDate(row) {
isDetail.value = false;
infoLoad.value = false;
chackAdd.value = false;
jyclData.value = [];
mjData.value = [];
fjData.value = [];
jyqxData.value = [];
znzbData.value = [];
getXfbbInfo(row.id).then((res) => {
form.value = JSON.parse(JSON.stringify(res));
console.log(form.value);
if (res.xffwlx && res.xffwid) {
form.value.xffwlx = res.xffwlx;
try {
form.value.xf = res.xffwid.split(",");
} catch (error) {
form.value.xf = res.xffwid;
}
}
res.clList.forEach((v) => {
jyclData.value.push(v);
});
res.jyqxList.forEach((v) => {
jyqxData.value.push(v);
});
res.jlList.forEach((v) => {
if (v.jllx == "01") {
mjData.value.push(v);
} else {
fjData.value.push(v);
}
});
res.znzbList.forEach((v) => {
znzbData.value.push(v);
});
title.value = "巡防报备详情";
dialogFormVisible.value = true;
});
}
//修改
function update(row) {
isDetail.value = true;
infoLoad.value = true;
chackAdd.value = false;
jyclData.value = [];
mjData.value = [];
fjData.value = [];
jyqxData.value = [];
znzbData.value = [];
getXfbbInfo(row.id).then((res) => {
form.value = JSON.parse(JSON.stringify(res));
if (res.xffwlx && res.xffwid) {
form.value.xffwlx = [res.xffwlx, res.xffwid];
}
res.clList.forEach((v) => {
jyclData.value.push(v);
});
res.jyqxList.forEach((v) => {
jyqxData.value.push(v);
});
res.jlList.forEach((v) => {
if (v.jllx == "01") {
mjData.value.push(v);
} else {
fjData.value.push(v);
}
});
res.znzbList.forEach((v) => {
znzbData.value.push(v);
});
title.value = "巡防报备修改";
dialogFormVisible.value = true;
});
}
// 获取当天日期
function nowDateFn() {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();
if ((month + "").length == 1) {
month = "0" + month;
}
if ((date + "").length == 1) {
date = "0" + date;
}
return year + "-" + month + "-" + date;
}
//报备
function baoBei(row, zt) {
let text = "报备";
if (zt == 1) {
text = "结束报备";
const bbjssj = "";
} else {
text = "开始报备";
}
proxy
.$confirm(`是否${text}`)
.then(() => {
xfbb({ id: row.id, bbzt: zt }).then(() => {
proxy.$message({
type: "success",
message: `${text}成功`
});
getListData();
});
})
.catch(() => {
proxy.$message.info("已取消操作");
});
}
// 确定是否上报
function handleBPH(row) {
proxy.$confirm("确定是否上报?", "警告", { type: "warning" }).then(() => {
qcckPost({}, '/mosty-jmxf/tbQwXfbb/sbBph?bbid=' + row.id).then(() => {
proxy.$message({ type: "success", message: "上报成功" });
getListData();
});
}).catch(() => {
proxy.$message.info("已取消");
});
}
// 确定是否删除上报
function deleteBPH(row) {
proxy.$confirm("确定是否删除上报?", "警告", { type: "warning" }).then(() => {
loadingTable.value = true;
qcckPost({}, '/mosty-jmxf/tbQwXfbb/dlBph?bbid=' + row.id).then(() => {
proxy.$message({ type: "success", message: "删除成功" });
getListData();
}).catch(() => {
loadingTable.value = true;
});
}).catch(() => {
proxy.$message.info("已取消");
});
}
//删除
function delDictItem(row) {
proxy
.$confirm("确定删除报备数据?", "警告", { type: "warning" })
.then(() => {
deleteXfbb([row.id]).then(() => {
proxy.$message({
type: "success",
message: "删除成功"
});
getListData();
});
})
.catch(() => {
proxy.$message.info("已取消");
});
}
//批量数据
const handleSelectionChange = (val) => {
ids.value = [];
if (val) {
val.forEach((item) => {
ids.value.push(item.id);
});
}
};
function batchDelete() {
proxy
.$confirm("确定批量删除报备数据?", "警告", { type: "warning" })
.then(() => {
deleteXfbb(ids.value).then(() => {
proxy.$message({
type: "success",
message: "删除成功"
});
getListData();
});
})
.catch(() => {
proxy.$message.info("已取消");
});
}
//获取列表数据
function getListData() {
loadingTable.value = true;
getXfbb(listQuery.value)
.then((res) => {
tableData.value = res.records;
total.value = res.total;
loadingTable.value = false;
})
.catch(() => {
loadingTable.value = false;
});
}
//关闭弹窗
function close() {
dialogFormVisible.value = false;
}
//提交
function submit() {
if (infoLoad.value) {
elform.value.validate((valid) => {
if (valid) {
let params = JSON.parse(JSON.stringify(form.value));
params.xfbmdm = params.ssbmdm;
params.jlList = [...fjData.value, ...mjData.value];
params.znzbList = znzbData.value;
params.jyqxList = jyqxData.value;
params.clList = jyclData.value;
if (form.value.xffwlx) {
params.xffwList = xffwList.value;
}
btnLoading.value = true;
D_BZ_DJQW.value.forEach((v) => {
if (v.value == params.qwdjId) {
params.qwdj = v.label;
}
});
if (chackAdd.value) {
addXfbb(params).then((res) => {
btnLoading.value = false;
xfbb({ id: res, bbzt: 0 }).then(() => {
proxy.$message({ type: "success", message: `新增成功` });
dialogFormVisible.value = false;
getListData();
});
}).catch(() => {
btnLoading.value = false;
});
} else {
updateXfbb(params).then(() => {
btnLoading.value = false;
proxy.$message({
type: "success",
message: "修改成功"
});
dialogFormVisible.value = false;
getListData();
}).catch(() => {
btnLoading.value = false;
});;
}
}
});
} else {
// 结束报备
xfbb({ id: form.value.id, bbzt: 1 }).then(() => {
proxy.$message({
type: "success",
message: `结束报备成功`
});
dialogFormVisible.value = false;
getListData();
});
}
}
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.pageSize = currentSize;
getListData();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.pageCurrent = currentPage;
getListData();
};
// 表格高度计算
const tabHeightFn = () => {
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
onMounted(() => {
getQwbcData();
getJzData();
selectDeptPage({}).then((res) => {
depList.value = res.records;
});
getListData();
proxy.mittBus.on("mittFn", (data) => {
keyCount.value = data;
});
tabHeightFn();
window.onresize = function () {
tabHeightFn();
};
//查询出所有巡防数据
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
xfList.xfqList = res.records.map((item) => {
return { value: item.id, label: item.xfqMc };
});
});
getKfd({ pageNum: 1, pageSize: 100, dwlxs: "01" }).then((res) => {
xfList.kfdList = res.records.map((item) => {
return { value: item.kfdId, label: item.kfdMc };
});
});
getKfd({ pageNum: 1, pageSize: 100, dwlxs: "02" }).then((res) => {
xfList.jczList = res.records.map((item) => {
return { value: item.kfdId, label: item.kfdMc };
});
});
});
onUnmounted(() => {
proxy.mittBus.off("mittFn");
});
watch(
() => jyclData.value,
(val) => {
if (val != null && val.length > 0) {
form.value.xlfs = "0";
} else {
form.value.xlfs = "1";
}
},
{ deep: true }
);
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.min {
position: relative;
}
.min::after {
position: absolute;
top: 0;
right: 12px;
bottom: 0;
content: "分钟";
}
.tongji {
line-height: 28px;
color: #81c3ed;
>span {
font-size: 24px;
}
}
.echarts {
height: 160px;
color: #81c3ed;
display: flex;
justify-content: space-between;
.item {
width: 23%;
}
}
.chooce-bc {
width: 100%;
min-height: 120px;
box-sizing: border-box;
display: flex;
.chooce-bc-top {
padding: 12px;
flex: 1;
border: 1px solid #03438b;
.bc-title {
width: 100%;
height: 30px;
font-size: 14px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.colose {
cursor: pointer;
}
}
}
.choose-bc-bottom {
padding: 12px;
flex: 1;
border: 1px solid #03438b;
.bc-title {
width: 100%;
height: 30px;
font-size: 14px;
color: #fff;
}
}
.chooce-bc-btn-box {
height: 120px;
overflow: hidden;
overflow-y: auto;
.chooce-bc-btn-item {
float: left;
cursor: pointer;
margin-right: 7px;
margin-bottom: 4px;
line-height: 12px;
text-align: center;
font-size: 12px;
padding: 4px;
background: orange;
border-radius: 10px;
.item {
line-height: 14px;
}
}
}
}
.from_label {
width: 100%;
line-height: 2.5em;
text-indent: -68px;
font-size: 16px;
}
.ipt {
border: 1px solid rgb(7, 85, 188);
width: 100%;
line-height: 32px;
min-height: 32px;
border-radius: 4px;
position: relative;
background: #001238;
}
.mj::after {
content: "请选择民警";
position: absolute;
top: 0;
left: 12px;
color: #c0c4cc;
}
.fj::after {
content: "请选择辅警";
position: absolute;
top: 0;
left: 12px;
color: #c0c4cc;
}
.cl::after {
content: "请选择车辆";
position: absolute;
top: 0;
left: 12px;
color: #c0c4cc;
}
.znzb::after {
content: "请选择智能装备";
position: absolute;
top: 0;
left: 12px;
color: #c0c4cc;
}
.jyqx::after {
content: "请选择常用装备";
position: absolute;
top: 0;
left: 12px;
color: #c0c4cc;
}
.tags {
padding: 4px 12px;
border-radius: 4px;
color: #fff;
border: 2px solid;
display: flex;
flex-direction: column-reverse;
align-content: center;
align-items: center;
>span {
line-height: 1em;
font-size: 12px;
}
}
.cntBox-bb {
display: flex;
height: 100%;
.tabBox {
flex: 1;
height: 100%;
}
.mapbox {
width: 1000px;
padding: 0 10px;
box-sizing: border-box;
}
}
::v-deep .el-form--inline .el-form-item {
margin-right: 8px;
}
::v-deep .el-date-editor--datetimerange.el-input__inner {
width: 356px;
}
</style>