feat: 添加菜单【人像预警】，车辆预警
This commit is contained in:
@ -286,6 +286,25 @@ export const publicRoutes = [
|
|||||||
icon: "article"
|
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",
|
path: "/fouColorWarning",
|
||||||
name: "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,370 @@
|
|||||||
|
<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' }">
|
||||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"
|
||||||
|
style="position: relative;z-index: 1;">
|
||||||
|
<el-tab-pane label="本地预警" name="local">
|
||||||
|
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
|
||||||
|
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 200)"
|
||||||
|
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search"/>
|
||||||
|
<!-- pageData.tableHeight-125 -->
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="区厅预警" name="district">区厅预警</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</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_BZ_YJLX, D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_BZ_YJLX", "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({})
|
||||||
|
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,370 @@
|
|||||||
|
<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' }">
|
||||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"
|
||||||
|
style="position: relative;z-index: 1;">
|
||||||
|
<el-tab-pane label="本地预警" name="local">
|
||||||
|
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
|
||||||
|
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 200)"
|
||||||
|
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search"/>
|
||||||
|
<!-- pageData.tableHeight-125 -->
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="区厅预警" name="district">区厅预警</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</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_BZ_YJLX, D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_BZ_YJLX", "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({})
|
||||||
|
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