Merge branch 'main' of http://61.139.16.27:26684/zy_oyj/sgxt_web
This commit is contained in:
@ -286,6 +286,25 @@ export const publicRoutes = [
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: "/portraitWarning",
|
||||
// name: "portraitWarning",
|
||||
// component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index"),
|
||||
// meta: {
|
||||
// title: "人像预警",
|
||||
// icon: "article"
|
||||
// }
|
||||
// },
|
||||
|
||||
// {
|
||||
// path: "/vehicleWarning",
|
||||
// name: "vehicleWarning",
|
||||
// component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index"),
|
||||
// meta: {
|
||||
// title: "车辆预警",
|
||||
// icon: "article"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: "/fouColorWarning",
|
||||
name: "fouColorWarning",
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">警情{{ title }} </span>
|
||||
<div>
|
||||
<!-- <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button> -->
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage :formList="formData" v-model="listQuery" ref="elform">
|
||||
<template #yjTp>
|
||||
<template v-if="!listQuery.yjTp || listQuery.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="80" height="100" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 80px; height:120px" :src="listQuery.yjTp" :preview-src-list="[listQuery.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="80" height="100" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { tbYjxxGetInfo } from "@/api/yj.js";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, watch ,onMounted,onUnmounted} from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
onMounted(() => {
|
||||
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx------------");
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
console.log('--------------------------------------');
|
||||
|
||||
})
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const formData = ref([])
|
||||
watch(() => props.dict, (res) => {
|
||||
if (res) {
|
||||
formData.value = [
|
||||
{ label: "预警图片", prop: "yjTp", type: "slot" },
|
||||
{ label: "预警标题", prop: "yjBt", type: "input" },
|
||||
{ label: "预警人姓名", prop: "yjRyxm", type: "input" },
|
||||
{ label: "年龄", prop: "nl", type: "input" },
|
||||
{ label: "性别", prop: "xb", type: "input" },
|
||||
{ label: "预警级别", prop: "yjJb", type: "select", options: props.dict.D_BZ_YJJB },
|
||||
{ label: "相似度", prop: "xsd", type: "input" },
|
||||
{ label: "预警时间", prop: "yjSj", type: "input" },
|
||||
{ label: "预警地点", prop: "yjDz", type: "input" },
|
||||
{ label: "预警次数", prop: "yjCs", type: "input" },
|
||||
{ label: "处置状态", prop: "czzt", type: "select", options: props.dict.D_GSXT_YJXX_CZZT },
|
||||
{ label: "布控手机号", prop: "yjRysjh", type: "input" },
|
||||
{ label: "布控车牌号", prop: "yjClcph", type: "input" },
|
||||
{ label: "布控身份证", prop: "yjRysfzh", type: "input" },
|
||||
{ label: "预警标签", prop: "yjbqmc", type: "input" },
|
||||
{ label: "管辖部门", prop: "ssbm", type: "input" },
|
||||
{ label: "管辖县局", prop: "ssxgaj", type: "input" },
|
||||
{ label: "管辖市局", prop: "sssgaj", type: "input" },
|
||||
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
|
||||
{ label: "预警内容", prop: "yjNr", type: "textarea", width: "100%" },
|
||||
]
|
||||
}
|
||||
|
||||
}, { deep: true, immediate: true })
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("详情");
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
tbYjxxGetInfo(row.id).then(res => {
|
||||
listQuery.value = {
|
||||
...res,
|
||||
nl: IdCard(res.yjRysfzh, 3) || "",
|
||||
xb: IdCard(res.yjRysfzh, 2) || "",
|
||||
xsd: res.xsd + '%'
|
||||
}
|
||||
})
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
loading.value = false;
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {}
|
||||
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep {
|
||||
.el-form-item__content {
|
||||
align-items: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">组合标签管理{{ title }} </span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage
|
||||
v-model="listQuery"
|
||||
:formList="formData"
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
>
|
||||
<!-- 身份标签细类 -->
|
||||
<template #sfbqIdList>
|
||||
<el-button @click="openDialog('01')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.sfbqIdList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLx"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LX"
|
||||
/>
|
||||
</template>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLb"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LB"
|
||||
/>
|
||||
</template>
|
||||
<template #bqYs="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqYs"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_SSYJ"
|
||||
/>
|
||||
</template>
|
||||
<template #bqDj="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.bqDj"
|
||||
:options="props.dic.D_GS_BQ_DJ"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDictItem(row.id, '身份标签细类')"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 行为标签细类 -->
|
||||
<template #xwbqIdList>
|
||||
<el-button @click="openDialog('02')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.xwbqIdList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLx"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LX"
|
||||
/>
|
||||
</template>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLb"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LB"
|
||||
/>
|
||||
</template>
|
||||
<template #bqYs="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqYs"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_SSYJ"
|
||||
/>
|
||||
</template>
|
||||
<template #bqDj="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.bqDj"
|
||||
:options="props.dic.D_GS_BQ_DJ"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDictItem(row.id, '行为标签细类')"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 列表弹窗 -->
|
||||
<DialogList
|
||||
:Single="false"
|
||||
:roleIds="roleIds"
|
||||
v-if="chooseShow"
|
||||
:dic="props.dic"
|
||||
@chooseDate="chooseDate"
|
||||
:titleValue="chooseTitle"
|
||||
v-model="chooseShow"
|
||||
:bqLx="chooseType"
|
||||
bqDl="02"
|
||||
></DialogList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import DialogList from "@/views/backOfficeSystem/fourColorManage/components/dialogList.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
defineProps,
|
||||
reactive,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const roleIds = ref([]); //角色id
|
||||
const chooseType = ref("01"); //选择弹窗类型
|
||||
const chooseShow = ref(false); //选择弹窗
|
||||
const chooseTitle = ref(""); //选择弹窗
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const formData = reactive([
|
||||
{ label: "组合标签名称", prop: "bqMc", type: "input" },
|
||||
{ label: "组合标签代码", prop: "bqDm", type: "input" },
|
||||
{
|
||||
label: "标签等级",
|
||||
prop: "bqDj",
|
||||
type: "select",
|
||||
options: props.dic.D_GS_BQ_DJ
|
||||
},
|
||||
{
|
||||
label: "标签颜色",
|
||||
prop: "bqYs",
|
||||
type: "select",
|
||||
options: props.dic.D_GS_SSYJ
|
||||
},
|
||||
{ label: "组合标签分值", prop: "bqFz", type: "input" },
|
||||
{ label: "组合标签说明", prop: "bqSm", type: "input" },
|
||||
{ label: "身份标签细类", prop: "sfbqIdList", type: "slot", width: "100%" },
|
||||
{ label: "行为标签细类", prop: "xwbqIdList", type: "slot", width: "100%" }
|
||||
]);
|
||||
const rules = reactive({
|
||||
bqMc: [{ required: true, message: "请输入组合标签名称", trigger: "blur" }],
|
||||
bqDm: [{ required: true, message: "请输入组合标签代码", trigger: "blur" }],
|
||||
zhbqjf: [{ required: true, message: "请输入组合标签积分", trigger: "blur" }],
|
||||
sfbqIdList: [
|
||||
{ required: true, message: "请选择身份标签细类", trigger: "change" }
|
||||
],
|
||||
xwbqIdList: [
|
||||
{ required: true, message: "请选择行为标签细类", trigger: "change" }
|
||||
]
|
||||
});
|
||||
|
||||
const tableDate = reactive({
|
||||
sfbqIdList: [], //表格数据
|
||||
xwbqIdList: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
tableHeight: 225,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 90, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
|
||||
{ label: "标签代码", prop: "bqDm" },
|
||||
{ label: "标签大类名称", prop: "bqDlMc" },
|
||||
{ label: "标签类型", prop: "bqLx", showSolt: true },
|
||||
{ label: "标签类别", prop: "bqLb", showSolt: true },
|
||||
{ label: "标签颜色", prop: "bqYs", showSolt: true },
|
||||
{ label: "标签等级", prop: "bqDj", showSolt: true }
|
||||
]
|
||||
});
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (row) getDataById(row.id);
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (id) => {
|
||||
qcckGet({}, "/mosty-gsxt/tbGsxtBqzh/selectVoById/" + id).then((res) => {
|
||||
listQuery.value = res;
|
||||
tableDate.sfbqIdList = res.sfbqList;
|
||||
listQuery.value.sfbqIdList = res.sfbqList.map((item) => item.id);
|
||||
tableDate.xwbqIdList = res.xwbqList;
|
||||
listQuery.value.xwbqIdList = res.xwbqList.map((item) => item.id);
|
||||
tableDate.keyCount++;
|
||||
});
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
let url =
|
||||
title.value == "新增"
|
||||
? "/mosty-gsxt/tbGsxtBqzh/save"
|
||||
: "/mosty-gsxt/tbGsxtBqzh/update";
|
||||
let params = { ...data };
|
||||
loading.value = true;
|
||||
qcckPost(params, url)
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("updateDate");
|
||||
loading.value = false;
|
||||
close();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (type) => {
|
||||
chooseShow.value = true;
|
||||
chooseType.value = type;
|
||||
chooseTitle.value = type == "01" ? "选择身份标签细类" : "选择行为标签细类";
|
||||
roleIds.value =
|
||||
type == "01"
|
||||
? tableDate.sfbqIdList.map((item) => item.id)
|
||||
: tableDate.xwbqIdList.map((item) => item.id);
|
||||
};
|
||||
// 选择数据
|
||||
const chooseDate = (data) => {
|
||||
if (chooseType.value == "01") {
|
||||
tableDate.sfbqIdList = data;
|
||||
listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
|
||||
} else {
|
||||
tableDate.xwbqIdList = data;
|
||||
listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id, type) => {
|
||||
switch (type) {
|
||||
case "身份标签细类":
|
||||
tableDate.sfbqIdList = tableDate.sfbqIdList.filter(
|
||||
(item) => item.id !== id
|
||||
);
|
||||
listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
|
||||
break;
|
||||
case "行为标签细类":
|
||||
tableDate.xwbqIdList = tableDate.xwbqIdList.filter(
|
||||
(item) => item.id !== id
|
||||
);
|
||||
listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
tableDate.sfbqIdList = [];
|
||||
tableDate.xwbqIdList = [];
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
height: 225px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
:expand="true" >
|
||||
<template #expand="{ props }">
|
||||
<div class="expand-content" style="max-width: 100%">
|
||||
<Items :data="props" :dict="dict" />
|
||||
</div>
|
||||
</template>
|
||||
<template #yjTp="{ row }">
|
||||
<template v-if="!row.yjTp || row.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #nl="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 3) }}
|
||||
</template>
|
||||
<template #xb="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 2) }}
|
||||
</template>
|
||||
<template #xsd="{ row }">
|
||||
{{ row.xsd }}%
|
||||
</template>
|
||||
<template #czzt="{ row }">
|
||||
<DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
|
||||
</template>
|
||||
<template #yjJb="{ row }">
|
||||
<DictTag v-model:value="row.yjJb" :options="props.dict.D_BZ_YJJB" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
|
||||
<el-link type="primary" @click="showDetail(row)">转合成</el-link>
|
||||
<!-- <el-link type="danger" @click="delDictItem(row.id)">转会商</el-link> -->
|
||||
<el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01'">签收</el-link>
|
||||
<el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02'">反馈</el-link>
|
||||
<el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link>
|
||||
<el-link type="primary" @click="openAddFrom(row)">详情</el-link>
|
||||
</template>
|
||||
<!-- <el-button type="success" @click="showFeedback(item, '签收')" v-if="item.czzt == '01'">签收</el-button>
|
||||
<el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
|
||||
<el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button> -->
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight+100" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<HolographicArchive v-model="assessShow" :dataList="dataList" />
|
||||
<FkDialog @change="getList" />
|
||||
<Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
|
||||
<SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
|
||||
:tacitly="tacitly" />
|
||||
</Information>
|
||||
<!-- <AddFrom ref="addFrom" /> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Items from '../item/items.vue'
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { tbYjxxGetPageList } from '@/api/yj.js'
|
||||
import HolographicArchive from '@/views/home/components/holographicArchive.vue'
|
||||
import Information from "@/views/home/model/information.vue";
|
||||
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
|
||||
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { holographicProfileJump } from "@/utils/tools.js"
|
||||
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 666
|
||||
}, search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: true
|
||||
},
|
||||
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 300, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
|
||||
{ label: "处置状态", prop: "czzt", showSolt: true },
|
||||
{ label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "yjRyxm" },
|
||||
{ label: "年龄", prop: "nl", showSolt: true,width: 80 },
|
||||
{ label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
|
||||
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
|
||||
// { label: "预警级别", prop: "yjJb", showSolt: true },
|
||||
// { label: "相似度", prop: "xsd", showSolt: true },
|
||||
{ label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// tabHeightFn();
|
||||
getList()
|
||||
});
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
const ORDIMG = 'https://89.40.7.122:38496/image'
|
||||
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = {
|
||||
...val,
|
||||
pageCurrent: pageData.pageConfiger.pageCurrent,
|
||||
pageSize: pageData.pageConfiger.pageSize
|
||||
}
|
||||
tbYjxxGetPageList(promes).then((res) => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
yjTp: item.yjlx == '01' ? item.yjTpreplace(ORDIMG, IMGYM) : item.yjTp
|
||||
}
|
||||
}) || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
}
|
||||
// 全息档案
|
||||
const assessShow = ref(false)
|
||||
const dataList = ref()
|
||||
const pushAssess = (val) => {
|
||||
return holographicProfileJump(val?.yjRysfzh) // 全息档案跳转
|
||||
// assessShow.value = true;
|
||||
// dataList.value = val;
|
||||
}
|
||||
// 处理签收
|
||||
const handleQsFk = (val, type) => {
|
||||
switch (type) {
|
||||
case '签收':
|
||||
proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
|
||||
qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
|
||||
val.czzt = '02'
|
||||
getList()
|
||||
proxy.$message({ type: "success", message: "签收成功" });
|
||||
});
|
||||
})
|
||||
break;
|
||||
case '反馈':
|
||||
case '查看反馈':
|
||||
emitter.emit("openFkDialog", { id: val.id, type });
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
// 发送指令
|
||||
const showDialog = ref(false)
|
||||
const itemData = ref()
|
||||
const showDetail = (item) => {
|
||||
showDialog.value = true;
|
||||
itemData.value = item
|
||||
}
|
||||
const handleClose = () => {
|
||||
showDialog.value = false;
|
||||
}
|
||||
const semdFqzlRef = ref()
|
||||
const tacitly = {
|
||||
title: 'yjbt',
|
||||
instructionContent: 'yjnr'
|
||||
}
|
||||
const submit = () => {
|
||||
semdFqzlRef.value.getsendFqzl()
|
||||
}
|
||||
const closeFszl = () => {
|
||||
semdFqzlRef.value.close()
|
||||
}
|
||||
const addFrom = ref()
|
||||
const openAddFrom = (row) => {
|
||||
emitter.emit('openAddFrom', row)
|
||||
}
|
||||
// 根据预警级别设置行样式
|
||||
const getRowClassName = (row) => {
|
||||
if (!row.row.yjJb) return '';
|
||||
const level = String(row.row.yjJb);
|
||||
if (level === '01' || level.includes('红') || level.includes('高')) return 'warning-level-01';
|
||||
if (level === '02' || level.includes('橙') || level.includes('中')) return 'warning-level-02';
|
||||
if (level === '03' || level.includes('黄') || level.includes('低')) return 'warning-level-03';
|
||||
if (level === '04' || level.includes('蓝')) return 'warning-level-04';
|
||||
return '';
|
||||
};
|
||||
|
||||
// // 表格高度计算
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = window.innerHeight - 430;
|
||||
// window.onresize = function () {
|
||||
// tabHeightFn();
|
||||
// };
|
||||
// };
|
||||
defineExpose({
|
||||
getList
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
/* 预警级别行样式 */
|
||||
.warning-level-01 {
|
||||
background-color: rgba(255, 2, 2, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-01:hover {
|
||||
background-color: rgba(255, 2, 2, 0.15) !important;
|
||||
}
|
||||
.warning-level-02 {
|
||||
background-color: rgba(255, 140, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-02:hover {
|
||||
background-color: rgba(255, 140, 0, 0.15) !important;
|
||||
}
|
||||
.warning-level-03 {
|
||||
background-color: rgba(255, 210, 8, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-03:hover {
|
||||
background-color: rgba(255, 210, 8, 0.15) !important;
|
||||
}
|
||||
.warning-level-04 {
|
||||
background-color: rgba(0, 0, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-04:hover {
|
||||
background-color: rgba(0, 0, 255, 0.15) !important;
|
||||
}
|
||||
/* 确保行样式应用到所有单元格 */
|
||||
.warning-level-01 td,
|
||||
.warning-level-02 td,
|
||||
.warning-level-03 td,
|
||||
.warning-level-04 td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
|
||||
<PageTitle title="人像预警">
|
||||
<el-button type="success" @click="openSearch">
|
||||
<Search style="width: 1em; height: 1em; margin-right: 8px" />
|
||||
<span style="vertical-align: middle" v-if="!search">搜索</span>
|
||||
<span style="vertical-align: middle" v-else>关闭搜索</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox" class="searchBox" v-if="search">
|
||||
<el-form :model="listQuery" label-width="auto" :inline="true" ref="searchArr">
|
||||
<!-- <el-form-item label="布控类型" prop="yjlx">
|
||||
<el-select v-model="listQuery.yjlx" placeholder="请选择预警类型">
|
||||
<el-option v-for="item in D_BZ_YJLX" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="布控人员" prop="yjRyxm ">
|
||||
<el-select clearable v-model="listQuery.yjRyxm" filterable remote reserve-keyword placeholder="请输入布控人员"
|
||||
:remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
||||
<el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间筛选">
|
||||
<el-date-picker v-model="listQuery.time" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||
<el-button @click="resetForm(searchArr)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
|
||||
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
|
||||
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
|
||||
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="showDc" title="导出预警" width="80%" align-center>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="500"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #yjTp="{ row }">
|
||||
<template v-if="!row.yjTp || row.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]" show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #nl="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 3) }}
|
||||
</template>
|
||||
<template #yjLylx="{ row }">
|
||||
<DictTag v-model:value="row.yjLylx" :options="D_BZ_YJLYXT" />
|
||||
</template>
|
||||
<template #xb="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 2) }}
|
||||
</template>
|
||||
<template #czzt="{ row }">
|
||||
<DictTag v-model:value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
|
||||
</template>
|
||||
<template #yjJb="{ row }">
|
||||
<DictTag v-model:value="row.yjJb" :options="D_BZ_YJJB" />
|
||||
</template>
|
||||
<template #xsd="{ row }">
|
||||
{{ row.xsd }}%
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
</MyTable>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showDc = false">关闭</el-button>
|
||||
<el-button type="primary" @click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<AddFromz ref="addFromRefs" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
// import Search from "@/components/aboutTable/Search.vue";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { tbGsxtZdrySelectList } from "@/api/zdr.js"
|
||||
import { tbYjxxQueryYjxx } from "@/api/yj.js";
|
||||
import LocalWarning from "./components/localWarning.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
import AddFromz from './components/addFrom.vue';
|
||||
import FileSaver from "file-saver";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as XLSX from "xlsx";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
|
||||
const searchBox = ref(); //搜索框
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近一周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近一月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近三月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false
|
||||
},
|
||||
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true },
|
||||
{ label: "处置状态", prop: "czzt", showSolt: true },
|
||||
{ label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "yjRyxm" },
|
||||
{ label: "年龄", prop: "nl", showSolt: true },
|
||||
{ label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "xb", showSolt: true },
|
||||
{ label: "预警级别", prop: "yjJb", showSolt: true },
|
||||
{ label: "相似度", prop: "xsd", showSolt: true },
|
||||
{ label: "预警地点", prop: "yjDz", showOverflowTooltip: true },
|
||||
{ label: "预警次数", prop: "yjCs", showOverflowTooltip: true },
|
||||
{ label: "布控手机号", prop: "yjRysjh", showOverflowTooltip: true },
|
||||
{ label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
|
||||
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
const showDc = ref(false)
|
||||
const activeName = ref('local')
|
||||
const addFromRefs = ref(null)
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
emitter.on('openAddFrom', (val) => {
|
||||
console.log(addFromRefs.value);
|
||||
if (addFromRefs.value) {
|
||||
addFromRefs.value.init('add', val)
|
||||
}
|
||||
// addFromRefs.value.init('add', val)
|
||||
})
|
||||
});
|
||||
const listQuery = ref({
|
||||
yjlx: '1', // 1.人员预警
|
||||
})
|
||||
const opentions = ref([])
|
||||
const localWarningRef = ref(null);
|
||||
// 搜索
|
||||
|
||||
const onSearch = () => {
|
||||
const promes = {
|
||||
yjRyxm: listQuery.value.yjRyxm,
|
||||
yjlx: listQuery.value.yjlx,
|
||||
startTime: listQuery.value.time ? listQuery.value.time[0] : '',
|
||||
endTime: listQuery.value.time ? listQuery.value.time[1] : '',
|
||||
}
|
||||
localWarningRef.value.getList(promes)
|
||||
}
|
||||
const loading = ref(false)
|
||||
const remoteMethod = (query) => {
|
||||
if (query) {
|
||||
loading.value = true
|
||||
tbGsxtZdrySelectList({ ryXm: query }).then(res => {
|
||||
opentions.value = res
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
opentions.value = []
|
||||
}
|
||||
}
|
||||
const searchArr = ref()
|
||||
const resetForm = (formEl) => {
|
||||
listQuery.value = {}
|
||||
localWarningRef.value.getList()
|
||||
}
|
||||
// // 表格高度计算
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
// window.onresize = function () {
|
||||
// tabHeightFn();
|
||||
// };
|
||||
// };
|
||||
// 搜索栏
|
||||
const search = ref(false)
|
||||
const openSearch = () => {
|
||||
search.value = !search.value
|
||||
nextTick(() => {
|
||||
tabHeightFn()
|
||||
})
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
if (search.value) {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
} else {
|
||||
pageData.tableHeight = window.innerHeight - 250;
|
||||
}
|
||||
window.onresize = function() {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
// 导出
|
||||
|
||||
const exportExcel = () => {
|
||||
const promes = {
|
||||
yjRyxm: listQuery.value.yjRyxm,
|
||||
yjlx: listQuery.value.yjlx,
|
||||
startTime: listQuery.value.time ? listQuery.value.time[0] : '',
|
||||
endTime: listQuery.value.time ? listQuery.value.time[1] : '',
|
||||
}
|
||||
tbYjxxQueryYjxx(promes).then(res => {
|
||||
pageData.tableData = res
|
||||
showDc.value = true
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 处理Excel导出
|
||||
const handleExport = () => {
|
||||
// 创建一个临时表格用于导出
|
||||
const tempTable = document.createElement('table');
|
||||
|
||||
// 创建表头
|
||||
const thead = document.createElement('thead');
|
||||
const headerRow = document.createElement('tr');
|
||||
|
||||
// 添加序号列
|
||||
const indexTh = document.createElement('th');
|
||||
indexTh.textContent = '序号';
|
||||
headerRow.appendChild(indexTh);
|
||||
|
||||
// 添加其他列头
|
||||
pageData.tableColumn.forEach(column => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = column.label;
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
|
||||
thead.appendChild(headerRow);
|
||||
tempTable.appendChild(thead);
|
||||
|
||||
// 创建表体
|
||||
const tbody = document.createElement('tbody');
|
||||
|
||||
// 处理表格数据
|
||||
pageData.tableData.forEach((row, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
// 添加序号
|
||||
const indexTd = document.createElement('td');
|
||||
indexTd.textContent = index + 1;
|
||||
tr.appendChild(indexTd);
|
||||
// 添加其他单元格数据
|
||||
pageData.tableColumn.forEach(column => {
|
||||
const td = document.createElement('td');
|
||||
// 处理自定义插槽的情况
|
||||
if (column.showSolt) {
|
||||
if (column.prop === 'yjTp') {
|
||||
// 照片字段只显示文字描述
|
||||
td.textContent = '有照片';
|
||||
} else if (column.prop === 'nl') {
|
||||
// 年龄字段
|
||||
td.textContent = IdCard(row.yjRysfzh, 3);
|
||||
} else if (column.prop === 'xb') {
|
||||
// 性别字段
|
||||
td.textContent = IdCard(row.yjRysfzh, 2);
|
||||
} else if (column.prop === 'xsd') {
|
||||
// 相似度字段
|
||||
td.textContent = '90%';
|
||||
} else {
|
||||
// 其他字段
|
||||
td.textContent = row[column.prop] || '';
|
||||
}
|
||||
} else {
|
||||
// 普通字段
|
||||
td.textContent = row[column.prop] || '';
|
||||
}
|
||||
|
||||
tr.appendChild(td);
|
||||
});
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
tempTable.appendChild(tbody);
|
||||
|
||||
// 执行Excel导出
|
||||
let xlsxParam = { raw: true };
|
||||
let wb = XLSX.utils.table_to_book(tempTable, xlsxParam);
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array"
|
||||
});
|
||||
|
||||
// 保存文件
|
||||
try {
|
||||
const exportTime = new Date().toLocaleString('zh-CN').replace(/\//g, '-').replace(/:/g, '-');
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`预警数据导出_${exportTime}.xlsx`
|
||||
);
|
||||
showDc.value = false;
|
||||
} catch (e) {
|
||||
console.error('导出Excel失败:', e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table--fit {
|
||||
height: calc(100% - 50px) !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="warning-item">
|
||||
<!-- 第一行：图片、姓名、年龄、性别 -->
|
||||
<div class="first-row">
|
||||
<div class="avatar-container">
|
||||
<template v-if="!data.yjTp || data.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="60" height="70" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 60px; height:70px" :src="data.yjTp" :preview-src-list="[data.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="60" height="70" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-items name">姓名：<span>{{ data.yjRyxm }}</span></div>
|
||||
<div class="info-items gender">性别：<span> {{ IdCard(data.yjRysfzh, 3) }}</span></div>
|
||||
<div class="info-items age">年龄：<span> {{ IdCard(data.yjRysfzh, 2) }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：其他所有字段 -->
|
||||
<div class="second-row">
|
||||
<div class="info-item title">预警标题：<span>{{ data.yjBt }}</span></div>
|
||||
<div class="info-item level">
|
||||
预警级别：
|
||||
<DictTag :color="bqYs(data.yjJb)" :tag="false" v-model:value="data.yjJb" :options="props.dict.D_BZ_YJJB" />
|
||||
<!-- <span :class="getLevelClass(data.yjJb)">{{ data.yjJb || data.yjLx }}</span> -->
|
||||
</div>
|
||||
<div class="info-item similarity">相似度：<span>{{ data.xsd }}%</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item time">预警时间：<span>{{ data.yjSj }}</span></div>
|
||||
<div class="info-item location">预警地点：<span>{{ data.yjDz }}</span></div>
|
||||
<div class="info-item count">预警次数：<span>{{ data.yjCs }}次</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item status">
|
||||
处置状态： <DictTag v-model:value="data.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
|
||||
|
||||
</div>
|
||||
<div class="info-item phone">布控手机：<span>{{ data.yjRysjh }}</span></div>
|
||||
<div class="info-item car">布控车牌号：<span>{{ data.yjClcph }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item idcard">布控身份证：<span>{{ data.yjRysfzh }}</span></div>
|
||||
<div class="info-item tag">预警标签：<span>{{ data.yjbqmc }}</span></div>
|
||||
<div class="info-item department">管辖部门：<span>{{ data.ssbm }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item county">管辖县局：<span>{{ data.ssxgaj }}</span></div>
|
||||
<div class="info-item city">管辖市局：<span>{{ data.sssgaj }}</span></div>
|
||||
<div class="info-item officer">接警员：<span>{{ data.jjyxm }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item content full-width">预警内容：<span>{{ data.yjNr }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { bqYs } from '@/utils/tools'
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warning-item {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info-items {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
.info-item {
|
||||
flex: 0 0 calc(33.33% - 20px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊字段样式
|
||||
.name span {
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 预警级别颜色
|
||||
.level-high span {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-medium span {
|
||||
color: #e6a23c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-low span {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 处置状态颜色
|
||||
.status-completed span {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-processing span {
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-pending span {
|
||||
color: #e6a23c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 全宽字段
|
||||
.full-width {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
|
||||
// 内容字段特殊样式
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
margin-top: 5px;
|
||||
padding: 8px 12px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">警情{{ title }} </span>
|
||||
<div>
|
||||
<!-- <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button> -->
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage :formList="formData" v-model="listQuery" ref="elform">
|
||||
<template #yjTp>
|
||||
<template v-if="!listQuery.yjTp || listQuery.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="80" height="100" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 80px; height:120px" :src="listQuery.yjTp" :preview-src-list="[listQuery.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="80" height="100" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { tbYjxxGetInfo } from "@/api/yj.js";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, watch ,onMounted,onUnmounted} from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
onMounted(() => {
|
||||
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx------------");
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
console.log('--------------------------------------');
|
||||
|
||||
})
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const formData = ref([])
|
||||
watch(() => props.dict, (res) => {
|
||||
if (res) {
|
||||
formData.value = [
|
||||
{ label: "预警图片", prop: "yjTp", type: "slot" },
|
||||
{ label: "预警标题", prop: "yjBt", type: "input" },
|
||||
{ label: "预警人姓名", prop: "yjRyxm", type: "input" },
|
||||
{ label: "年龄", prop: "nl", type: "input" },
|
||||
{ label: "性别", prop: "xb", type: "input" },
|
||||
{ label: "预警级别", prop: "yjJb", type: "select", options: props.dict.D_BZ_YJJB },
|
||||
{ label: "相似度", prop: "xsd", type: "input" },
|
||||
{ label: "预警时间", prop: "yjSj", type: "input" },
|
||||
{ label: "预警地点", prop: "yjDz", type: "input" },
|
||||
{ label: "预警次数", prop: "yjCs", type: "input" },
|
||||
{ label: "处置状态", prop: "czzt", type: "select", options: props.dict.D_GSXT_YJXX_CZZT },
|
||||
{ label: "布控手机号", prop: "yjRysjh", type: "input" },
|
||||
{ label: "布控车牌号", prop: "yjClcph", type: "input" },
|
||||
{ label: "布控身份证", prop: "yjRysfzh", type: "input" },
|
||||
{ label: "预警标签", prop: "yjbqmc", type: "input" },
|
||||
{ label: "管辖部门", prop: "ssbm", type: "input" },
|
||||
{ label: "管辖县局", prop: "ssxgaj", type: "input" },
|
||||
{ label: "管辖市局", prop: "sssgaj", type: "input" },
|
||||
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
|
||||
{ label: "预警内容", prop: "yjNr", type: "textarea", width: "100%" },
|
||||
]
|
||||
}
|
||||
|
||||
}, { deep: true, immediate: true })
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("详情");
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
tbYjxxGetInfo(row.id).then(res => {
|
||||
listQuery.value = {
|
||||
...res,
|
||||
nl: IdCard(res.yjRysfzh, 3) || "",
|
||||
xb: IdCard(res.yjRysfzh, 2) || "",
|
||||
xsd: res.xsd + '%'
|
||||
}
|
||||
})
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
loading.value = false;
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {}
|
||||
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep {
|
||||
.el-form-item__content {
|
||||
align-items: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">组合标签管理{{ title }} </span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage
|
||||
v-model="listQuery"
|
||||
:formList="formData"
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
>
|
||||
<!-- 身份标签细类 -->
|
||||
<template #sfbqIdList>
|
||||
<el-button @click="openDialog('01')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.sfbqIdList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLx"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LX"
|
||||
/>
|
||||
</template>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLb"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LB"
|
||||
/>
|
||||
</template>
|
||||
<template #bqYs="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqYs"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_SSYJ"
|
||||
/>
|
||||
</template>
|
||||
<template #bqDj="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.bqDj"
|
||||
:options="props.dic.D_GS_BQ_DJ"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDictItem(row.id, '身份标签细类')"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 行为标签细类 -->
|
||||
<template #xwbqIdList>
|
||||
<el-button @click="openDialog('02')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.xwbqIdList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLx"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LX"
|
||||
/>
|
||||
</template>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqLb"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_BQ_LB"
|
||||
/>
|
||||
</template>
|
||||
<template #bqYs="{ row }">
|
||||
<DictTag
|
||||
:value="row.bqYs"
|
||||
:tag="false"
|
||||
:options="props.dic.D_GS_SSYJ"
|
||||
/>
|
||||
</template>
|
||||
<template #bqDj="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.bqDj"
|
||||
:options="props.dic.D_GS_BQ_DJ"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDictItem(row.id, '行为标签细类')"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 列表弹窗 -->
|
||||
<DialogList
|
||||
:Single="false"
|
||||
:roleIds="roleIds"
|
||||
v-if="chooseShow"
|
||||
:dic="props.dic"
|
||||
@chooseDate="chooseDate"
|
||||
:titleValue="chooseTitle"
|
||||
v-model="chooseShow"
|
||||
:bqLx="chooseType"
|
||||
bqDl="02"
|
||||
></DialogList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import DialogList from "@/views/backOfficeSystem/fourColorManage/components/dialogList.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
defineProps,
|
||||
reactive,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const roleIds = ref([]); //角色id
|
||||
const chooseType = ref("01"); //选择弹窗类型
|
||||
const chooseShow = ref(false); //选择弹窗
|
||||
const chooseTitle = ref(""); //选择弹窗
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const formData = reactive([
|
||||
{ label: "组合标签名称", prop: "bqMc", type: "input" },
|
||||
{ label: "组合标签代码", prop: "bqDm", type: "input" },
|
||||
{
|
||||
label: "标签等级",
|
||||
prop: "bqDj",
|
||||
type: "select",
|
||||
options: props.dic.D_GS_BQ_DJ
|
||||
},
|
||||
{
|
||||
label: "标签颜色",
|
||||
prop: "bqYs",
|
||||
type: "select",
|
||||
options: props.dic.D_GS_SSYJ
|
||||
},
|
||||
{ label: "组合标签分值", prop: "bqFz", type: "input" },
|
||||
{ label: "组合标签说明", prop: "bqSm", type: "input" },
|
||||
{ label: "身份标签细类", prop: "sfbqIdList", type: "slot", width: "100%" },
|
||||
{ label: "行为标签细类", prop: "xwbqIdList", type: "slot", width: "100%" }
|
||||
]);
|
||||
const rules = reactive({
|
||||
bqMc: [{ required: true, message: "请输入组合标签名称", trigger: "blur" }],
|
||||
bqDm: [{ required: true, message: "请输入组合标签代码", trigger: "blur" }],
|
||||
zhbqjf: [{ required: true, message: "请输入组合标签积分", trigger: "blur" }],
|
||||
sfbqIdList: [
|
||||
{ required: true, message: "请选择身份标签细类", trigger: "change" }
|
||||
],
|
||||
xwbqIdList: [
|
||||
{ required: true, message: "请选择行为标签细类", trigger: "change" }
|
||||
]
|
||||
});
|
||||
|
||||
const tableDate = reactive({
|
||||
sfbqIdList: [], //表格数据
|
||||
xwbqIdList: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
tableHeight: 225,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 90, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
|
||||
{ label: "标签代码", prop: "bqDm" },
|
||||
{ label: "标签大类名称", prop: "bqDlMc" },
|
||||
{ label: "标签类型", prop: "bqLx", showSolt: true },
|
||||
{ label: "标签类别", prop: "bqLb", showSolt: true },
|
||||
{ label: "标签颜色", prop: "bqYs", showSolt: true },
|
||||
{ label: "标签等级", prop: "bqDj", showSolt: true }
|
||||
]
|
||||
});
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (row) getDataById(row.id);
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (id) => {
|
||||
qcckGet({}, "/mosty-gsxt/tbGsxtBqzh/selectVoById/" + id).then((res) => {
|
||||
listQuery.value = res;
|
||||
tableDate.sfbqIdList = res.sfbqList;
|
||||
listQuery.value.sfbqIdList = res.sfbqList.map((item) => item.id);
|
||||
tableDate.xwbqIdList = res.xwbqList;
|
||||
listQuery.value.xwbqIdList = res.xwbqList.map((item) => item.id);
|
||||
tableDate.keyCount++;
|
||||
});
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
let url =
|
||||
title.value == "新增"
|
||||
? "/mosty-gsxt/tbGsxtBqzh/save"
|
||||
: "/mosty-gsxt/tbGsxtBqzh/update";
|
||||
let params = { ...data };
|
||||
loading.value = true;
|
||||
qcckPost(params, url)
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("updateDate");
|
||||
loading.value = false;
|
||||
close();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (type) => {
|
||||
chooseShow.value = true;
|
||||
chooseType.value = type;
|
||||
chooseTitle.value = type == "01" ? "选择身份标签细类" : "选择行为标签细类";
|
||||
roleIds.value =
|
||||
type == "01"
|
||||
? tableDate.sfbqIdList.map((item) => item.id)
|
||||
: tableDate.xwbqIdList.map((item) => item.id);
|
||||
};
|
||||
// 选择数据
|
||||
const chooseDate = (data) => {
|
||||
if (chooseType.value == "01") {
|
||||
tableDate.sfbqIdList = data;
|
||||
listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
|
||||
} else {
|
||||
tableDate.xwbqIdList = data;
|
||||
listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id, type) => {
|
||||
switch (type) {
|
||||
case "身份标签细类":
|
||||
tableDate.sfbqIdList = tableDate.sfbqIdList.filter(
|
||||
(item) => item.id !== id
|
||||
);
|
||||
listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
|
||||
break;
|
||||
case "行为标签细类":
|
||||
tableDate.xwbqIdList = tableDate.xwbqIdList.filter(
|
||||
(item) => item.id !== id
|
||||
);
|
||||
listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
tableDate.sfbqIdList = [];
|
||||
tableDate.xwbqIdList = [];
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
height: 225px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
:expand="true" >
|
||||
<template #expand="{ props }">
|
||||
<div class="expand-content" style="max-width: 100%">
|
||||
<Items :data="props" :dict="dict" />
|
||||
</div>
|
||||
</template>
|
||||
<template #yjTp="{ row }">
|
||||
<template v-if="!row.yjTp || row.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #nl="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 3) }}
|
||||
</template>
|
||||
<template #xb="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 2) }}
|
||||
</template>
|
||||
<template #xsd="{ row }">
|
||||
{{ row.xsd }}%
|
||||
</template>
|
||||
<template #czzt="{ row }">
|
||||
<DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
|
||||
</template>
|
||||
<template #yjJb="{ row }">
|
||||
<DictTag v-model:value="row.yjJb" :options="props.dict.D_BZ_YJJB" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
|
||||
<el-link type="primary" @click="showDetail(row)">转合成</el-link>
|
||||
<!-- <el-link type="danger" @click="delDictItem(row.id)">转会商</el-link> -->
|
||||
<el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01'">签收</el-link>
|
||||
<el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02'">反馈</el-link>
|
||||
<el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link>
|
||||
<el-link type="primary" @click="openAddFrom(row)">详情</el-link>
|
||||
</template>
|
||||
<!-- <el-button type="success" @click="showFeedback(item, '签收')" v-if="item.czzt == '01'">签收</el-button>
|
||||
<el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
|
||||
<el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button> -->
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight+100" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<HolographicArchive v-model="assessShow" :dataList="dataList" />
|
||||
<FkDialog @change="getList" />
|
||||
<Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
|
||||
<SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
|
||||
:tacitly="tacitly" />
|
||||
</Information>
|
||||
<!-- <AddFrom ref="addFrom" /> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Items from '../item/items.vue'
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { tbYjxxGetPageList } from '@/api/yj.js'
|
||||
import HolographicArchive from '@/views/home/components/holographicArchive.vue'
|
||||
import Information from "@/views/home/model/information.vue";
|
||||
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
|
||||
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { holographicProfileJump } from "@/utils/tools.js"
|
||||
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 666
|
||||
}, search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: true
|
||||
},
|
||||
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 300, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
|
||||
{ label: "处置状态", prop: "czzt", showSolt: true },
|
||||
{ label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "yjRyxm" },
|
||||
{ label: "年龄", prop: "nl", showSolt: true,width: 80 },
|
||||
{ label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
|
||||
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
|
||||
// { label: "预警级别", prop: "yjJb", showSolt: true },
|
||||
// { label: "相似度", prop: "xsd", showSolt: true },
|
||||
{ label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// tabHeightFn();
|
||||
getList()
|
||||
});
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
const ORDIMG = 'https://89.40.7.122:38496/image'
|
||||
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = {
|
||||
...val,
|
||||
pageCurrent: pageData.pageConfiger.pageCurrent,
|
||||
pageSize: pageData.pageConfiger.pageSize
|
||||
}
|
||||
tbYjxxGetPageList(promes).then((res) => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
yjTp: item.yjlx == '01' ? item.yjTpreplace(ORDIMG, IMGYM) : item.yjTp
|
||||
}
|
||||
}) || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
}
|
||||
// 全息档案
|
||||
const assessShow = ref(false)
|
||||
const dataList = ref()
|
||||
const pushAssess = (val) => {
|
||||
return holographicProfileJump(val?.yjRysfzh) // 全息档案跳转
|
||||
// assessShow.value = true;
|
||||
// dataList.value = val;
|
||||
}
|
||||
// 处理签收
|
||||
const handleQsFk = (val, type) => {
|
||||
switch (type) {
|
||||
case '签收':
|
||||
proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
|
||||
qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
|
||||
val.czzt = '02'
|
||||
getList()
|
||||
proxy.$message({ type: "success", message: "签收成功" });
|
||||
});
|
||||
})
|
||||
break;
|
||||
case '反馈':
|
||||
case '查看反馈':
|
||||
emitter.emit("openFkDialog", { id: val.id, type });
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
// 发送指令
|
||||
const showDialog = ref(false)
|
||||
const itemData = ref()
|
||||
const showDetail = (item) => {
|
||||
showDialog.value = true;
|
||||
itemData.value = item
|
||||
}
|
||||
const handleClose = () => {
|
||||
showDialog.value = false;
|
||||
}
|
||||
const semdFqzlRef = ref()
|
||||
const tacitly = {
|
||||
title: 'yjbt',
|
||||
instructionContent: 'yjnr'
|
||||
}
|
||||
const submit = () => {
|
||||
semdFqzlRef.value.getsendFqzl()
|
||||
}
|
||||
const closeFszl = () => {
|
||||
semdFqzlRef.value.close()
|
||||
}
|
||||
const addFrom = ref()
|
||||
const openAddFrom = (row) => {
|
||||
emitter.emit('openAddFrom', row)
|
||||
}
|
||||
// 根据预警级别设置行样式
|
||||
const getRowClassName = (row) => {
|
||||
if (!row.row.yjJb) return '';
|
||||
const level = String(row.row.yjJb);
|
||||
if (level === '01' || level.includes('红') || level.includes('高')) return 'warning-level-01';
|
||||
if (level === '02' || level.includes('橙') || level.includes('中')) return 'warning-level-02';
|
||||
if (level === '03' || level.includes('黄') || level.includes('低')) return 'warning-level-03';
|
||||
if (level === '04' || level.includes('蓝')) return 'warning-level-04';
|
||||
return '';
|
||||
};
|
||||
|
||||
// // 表格高度计算
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = window.innerHeight - 430;
|
||||
// window.onresize = function () {
|
||||
// tabHeightFn();
|
||||
// };
|
||||
// };
|
||||
defineExpose({
|
||||
getList
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
/* 预警级别行样式 */
|
||||
.warning-level-01 {
|
||||
background-color: rgba(255, 2, 2, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-01:hover {
|
||||
background-color: rgba(255, 2, 2, 0.15) !important;
|
||||
}
|
||||
.warning-level-02 {
|
||||
background-color: rgba(255, 140, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-02:hover {
|
||||
background-color: rgba(255, 140, 0, 0.15) !important;
|
||||
}
|
||||
.warning-level-03 {
|
||||
background-color: rgba(255, 210, 8, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-03:hover {
|
||||
background-color: rgba(255, 210, 8, 0.15) !important;
|
||||
}
|
||||
.warning-level-04 {
|
||||
background-color: rgba(0, 0, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.warning-level-04:hover {
|
||||
background-color: rgba(0, 0, 255, 0.15) !important;
|
||||
}
|
||||
/* 确保行样式应用到所有单元格 */
|
||||
.warning-level-01 td,
|
||||
.warning-level-02 td,
|
||||
.warning-level-03 td,
|
||||
.warning-level-04 td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
|
||||
<PageTitle title="车辆预警">
|
||||
<el-button type="success" @click="openSearch">
|
||||
<Search style="width: 1em; height: 1em; margin-right: 8px" />
|
||||
<span style="vertical-align: middle" v-if="!search">搜索</span>
|
||||
<span style="vertical-align: middle" v-else>关闭搜索</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox" class="searchBox" v-if="search">
|
||||
<el-form :model="listQuery" label-width="auto" :inline="true" ref="searchArr">
|
||||
<!-- <el-form-item label="布控类型" prop="yjlx">
|
||||
<el-select v-model="listQuery.yjlx" placeholder="请选择预警类型">
|
||||
<el-option v-for="item in D_BZ_YJLX" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="布控人员" prop="yjRyxm ">
|
||||
<el-select clearable v-model="listQuery.yjRyxm" filterable remote reserve-keyword placeholder="请输入布控人员"
|
||||
:remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
||||
<el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间筛选">
|
||||
<el-date-picker v-model="listQuery.time" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||
<el-button @click="resetForm(searchArr)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
|
||||
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
|
||||
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
|
||||
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="showDc" title="导出预警" width="80%" align-center>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="500"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #yjTp="{ row }">
|
||||
<template v-if="!row.yjTp || row.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]" show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #nl="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 3) }}
|
||||
</template>
|
||||
<template #yjLylx="{ row }">
|
||||
<DictTag v-model:value="row.yjLylx" :options="D_BZ_YJLYXT" />
|
||||
</template>
|
||||
<template #xb="{ row }">
|
||||
{{ IdCard(row.yjRysfzh, 2) }}
|
||||
</template>
|
||||
<template #czzt="{ row }">
|
||||
<DictTag v-model:value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
|
||||
</template>
|
||||
<template #yjJb="{ row }">
|
||||
<DictTag v-model:value="row.yjJb" :options="D_BZ_YJJB" />
|
||||
</template>
|
||||
<template #xsd="{ row }">
|
||||
{{ row.xsd }}%
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
</MyTable>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showDc = false">关闭</el-button>
|
||||
<el-button type="primary" @click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<AddFromz ref="addFromRefs" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
// import Search from "@/components/aboutTable/Search.vue";
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { tbGsxtZdrySelectList } from "@/api/zdr.js"
|
||||
import { tbYjxxQueryYjxx } from "@/api/yj.js";
|
||||
import LocalWarning from "./components/localWarning.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
import AddFromz from './components/addFrom.vue';
|
||||
import FileSaver from "file-saver";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as XLSX from "xlsx";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
|
||||
const searchBox = ref(); //搜索框
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近一周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近一月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近三月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false
|
||||
},
|
||||
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true },
|
||||
{ label: "处置状态", prop: "czzt", showSolt: true },
|
||||
{ label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "yjRyxm" },
|
||||
{ label: "年龄", prop: "nl", showSolt: true },
|
||||
{ label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "xb", showSolt: true },
|
||||
{ label: "预警级别", prop: "yjJb", showSolt: true },
|
||||
{ label: "相似度", prop: "xsd", showSolt: true },
|
||||
{ label: "预警地点", prop: "yjDz", showOverflowTooltip: true },
|
||||
{ label: "预警次数", prop: "yjCs", showOverflowTooltip: true },
|
||||
{ label: "布控手机号", prop: "yjRysjh", showOverflowTooltip: true },
|
||||
{ label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
|
||||
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
const showDc = ref(false)
|
||||
const activeName = ref('local')
|
||||
const addFromRefs = ref(null)
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
emitter.on('openAddFrom', (val) => {
|
||||
console.log(addFromRefs.value);
|
||||
if (addFromRefs.value) {
|
||||
addFromRefs.value.init('add', val)
|
||||
}
|
||||
// addFromRefs.value.init('add', val)
|
||||
})
|
||||
});
|
||||
const listQuery = ref({
|
||||
yjlx: '2', // 2.车辆预警
|
||||
})
|
||||
const opentions = ref([])
|
||||
const localWarningRef = ref(null);
|
||||
// 搜索
|
||||
|
||||
const onSearch = () => {
|
||||
const promes = {
|
||||
yjRyxm: listQuery.value.yjRyxm,
|
||||
yjlx: listQuery.value.yjlx,
|
||||
startTime: listQuery.value.time ? listQuery.value.time[0] : '',
|
||||
endTime: listQuery.value.time ? listQuery.value.time[1] : '',
|
||||
}
|
||||
localWarningRef.value.getList(promes)
|
||||
}
|
||||
const loading = ref(false)
|
||||
const remoteMethod = (query) => {
|
||||
if (query) {
|
||||
loading.value = true
|
||||
tbGsxtZdrySelectList({ ryXm: query }).then(res => {
|
||||
opentions.value = res
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
opentions.value = []
|
||||
}
|
||||
}
|
||||
const searchArr = ref()
|
||||
const resetForm = (formEl) => {
|
||||
listQuery.value = {}
|
||||
localWarningRef.value.getList()
|
||||
}
|
||||
// // 表格高度计算
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
// window.onresize = function () {
|
||||
// tabHeightFn();
|
||||
// };
|
||||
// };
|
||||
// 搜索栏
|
||||
const search = ref(false)
|
||||
const openSearch = () => {
|
||||
search.value = !search.value
|
||||
nextTick(() => {
|
||||
tabHeightFn()
|
||||
})
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
if (search.value) {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
} else {
|
||||
pageData.tableHeight = window.innerHeight - 250;
|
||||
}
|
||||
window.onresize = function() {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
// 导出
|
||||
|
||||
const exportExcel = () => {
|
||||
const promes = {
|
||||
yjRyxm: listQuery.value.yjRyxm,
|
||||
yjlx: listQuery.value.yjlx,
|
||||
startTime: listQuery.value.time ? listQuery.value.time[0] : '',
|
||||
endTime: listQuery.value.time ? listQuery.value.time[1] : '',
|
||||
}
|
||||
tbYjxxQueryYjxx(promes).then(res => {
|
||||
pageData.tableData = res
|
||||
showDc.value = true
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 处理Excel导出
|
||||
const handleExport = () => {
|
||||
// 创建一个临时表格用于导出
|
||||
const tempTable = document.createElement('table');
|
||||
|
||||
// 创建表头
|
||||
const thead = document.createElement('thead');
|
||||
const headerRow = document.createElement('tr');
|
||||
|
||||
// 添加序号列
|
||||
const indexTh = document.createElement('th');
|
||||
indexTh.textContent = '序号';
|
||||
headerRow.appendChild(indexTh);
|
||||
|
||||
// 添加其他列头
|
||||
pageData.tableColumn.forEach(column => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = column.label;
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
|
||||
thead.appendChild(headerRow);
|
||||
tempTable.appendChild(thead);
|
||||
|
||||
// 创建表体
|
||||
const tbody = document.createElement('tbody');
|
||||
|
||||
// 处理表格数据
|
||||
pageData.tableData.forEach((row, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
// 添加序号
|
||||
const indexTd = document.createElement('td');
|
||||
indexTd.textContent = index + 1;
|
||||
tr.appendChild(indexTd);
|
||||
// 添加其他单元格数据
|
||||
pageData.tableColumn.forEach(column => {
|
||||
const td = document.createElement('td');
|
||||
// 处理自定义插槽的情况
|
||||
if (column.showSolt) {
|
||||
if (column.prop === 'yjTp') {
|
||||
// 照片字段只显示文字描述
|
||||
td.textContent = '有照片';
|
||||
} else if (column.prop === 'nl') {
|
||||
// 年龄字段
|
||||
td.textContent = IdCard(row.yjRysfzh, 3);
|
||||
} else if (column.prop === 'xb') {
|
||||
// 性别字段
|
||||
td.textContent = IdCard(row.yjRysfzh, 2);
|
||||
} else if (column.prop === 'xsd') {
|
||||
// 相似度字段
|
||||
td.textContent = '90%';
|
||||
} else {
|
||||
// 其他字段
|
||||
td.textContent = row[column.prop] || '';
|
||||
}
|
||||
} else {
|
||||
// 普通字段
|
||||
td.textContent = row[column.prop] || '';
|
||||
}
|
||||
|
||||
tr.appendChild(td);
|
||||
});
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
tempTable.appendChild(tbody);
|
||||
|
||||
// 执行Excel导出
|
||||
let xlsxParam = { raw: true };
|
||||
let wb = XLSX.utils.table_to_book(tempTable, xlsxParam);
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array"
|
||||
});
|
||||
|
||||
// 保存文件
|
||||
try {
|
||||
const exportTime = new Date().toLocaleString('zh-CN').replace(/\//g, '-').replace(/:/g, '-');
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`预警数据导出_${exportTime}.xlsx`
|
||||
);
|
||||
showDc.value = false;
|
||||
} catch (e) {
|
||||
console.error('导出Excel失败:', e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table--fit {
|
||||
height: calc(100% - 50px) !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="warning-item">
|
||||
<!-- 第一行：图片、姓名、年龄、性别 -->
|
||||
<div class="first-row">
|
||||
<div class="avatar-container">
|
||||
<template v-if="!data.yjTp || data.yjTp.includes('baidu')">
|
||||
<img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="60" height="70" v-else />
|
||||
</template>
|
||||
<el-image v-else style="width: 60px; height:70px" :src="data.yjTp" :preview-src-list="[data.yjTp]"
|
||||
show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
|
||||
<img src="@/assets/images/default_male.png" width="60" height="70" v-else />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-items name">姓名：<span>{{ data.yjRyxm }}</span></div>
|
||||
<div class="info-items gender">性别：<span> {{ IdCard(data.yjRysfzh, 3) }}</span></div>
|
||||
<div class="info-items age">年龄：<span> {{ IdCard(data.yjRysfzh, 2) }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：其他所有字段 -->
|
||||
<div class="second-row">
|
||||
<div class="info-item title">预警标题：<span>{{ data.yjBt }}</span></div>
|
||||
<div class="info-item level">
|
||||
预警级别：
|
||||
<DictTag :color="bqYs(data.yjJb)" :tag="false" v-model:value="data.yjJb" :options="props.dict.D_BZ_YJJB" />
|
||||
<!-- <span :class="getLevelClass(data.yjJb)">{{ data.yjJb || data.yjLx }}</span> -->
|
||||
</div>
|
||||
<div class="info-item similarity">相似度：<span>{{ data.xsd }}%</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item time">预警时间：<span>{{ data.yjSj }}</span></div>
|
||||
<div class="info-item location">预警地点：<span>{{ data.yjDz }}</span></div>
|
||||
<div class="info-item count">预警次数：<span>{{ data.yjCs }}次</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item status">
|
||||
处置状态： <DictTag v-model:value="data.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
|
||||
|
||||
</div>
|
||||
<div class="info-item phone">布控手机：<span>{{ data.yjRysjh }}</span></div>
|
||||
<div class="info-item car">布控车牌号：<span>{{ data.yjClcph }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item idcard">布控身份证：<span>{{ data.yjRysfzh }}</span></div>
|
||||
<div class="info-item tag">预警标签：<span>{{ data.yjbqmc }}</span></div>
|
||||
<div class="info-item department">管辖部门：<span>{{ data.ssbm }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item county">管辖县局：<span>{{ data.ssxgaj }}</span></div>
|
||||
<div class="info-item city">管辖市局：<span>{{ data.sssgaj }}</span></div>
|
||||
<div class="info-item officer">接警员：<span>{{ data.jjyxm }}</span></div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="info-item content full-width">预警内容：<span>{{ data.yjNr }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { bqYs } from '@/utils/tools'
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warning-item {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info-items {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
.info-item {
|
||||
flex: 0 0 calc(33.33% - 20px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊字段样式
|
||||
.name span {
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 预警级别颜色
|
||||
.level-high span {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-medium span {
|
||||
color: #e6a23c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-low span {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 处置状态颜色
|
||||
.status-completed span {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-processing span {
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-pending span {
|
||||
color: #e6a23c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 全宽字段
|
||||
.full-width {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
|
||||
// 内容字段特殊样式
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
margin-top: 5px;
|
||||
padding: 8px 12px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user