zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Esacpe
2025-07-14 21:05:39 +08:00
parent b288168070
commit 6ff3f78b75
3 changed files with 136 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
View File

@ -5,51 +5,53 @@
<script setup>
import { choseRbgb } from '@/utils/tools'
import * as echarts from "echarts";
import { onMounted, toRefs, ref, reactive } from "vue";
import { defineExpose, onMounted, ref } from "vue";
let vehicleChart = null
const echart = ref()
//挂载
onMounted(() => {
initCharts()
window.addEventListener('resize', handleResize)
});
const initCharts = () => {
const initCharts = (data) => {
vehicleChart = echarts.init(echart.value)
const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
const colors =['#ff1818', '#0066ff', '#ff9900', '#00cc66']
const countData = [
{
value: 2056,
name: '待办',
colorType: 'blue',
color: ['#00f0ff', '#00a0cc'],
color1: [choseRbgb('#00f0ff', 0.3), choseRbgb('#00a0cc', 0.3)]
value: 0,
name: '红色预警',
colorType: 'red',
color: ['#ff1818', '#ff6c6c'],
color1: [choseRbgb('#ff1818', 0.3), choseRbgb('#ff6c6c', 0.3)]
},
{
value: 4356,
name: '已办',
colorType: 'lightBlue',
color: ['#0066ff', '#0044cc'],
color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
},
{
value: 3018,
name: '未处理',
value: 0,
name: '橙色预警',
colorType: 'orange',
color: ['#ff9900', '#cc7a00'],
color1: [choseRbgb('#ff9900', 0.3), choseRbgb('#cc7a00', 0.3)]
},
{
value: 1998,
name: '忽略',
colorType: 'green',
color: ['#00cc66', '#009944'],
color1: [choseRbgb('#00cc66', 0.3), choseRbgb('#009944', 0.3)]
}
]
value: 0,
name: '黄色预警',
colorType: 'yellow',
color: ['#ece403', '#f6f064'],
color1: [choseRbgb('#ece403', 0.3), choseRbgb('#f6f064', 0.3)]
},
{
value: 0,
name: '蓝色预警',
colorType: 'blue',
color: ['#0066ff', '#0044cc'],
color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
},
];
data.forEach(item => {
if(item.yj_jb == '10') countData[0].value = item.count;
if(item.yj_jb == '20') countData[1].value = item.count;
if(item.yj_jb == '30') countData[2].value = item.count;
if(item.yj_jb == '40') countData[3].value = item.count;
});
vehicleChart.setOption(createChartOption(countData, colors))
}
const createChartOption = (data, colors) => {
let total = data.reduce((sum, item) => sum + item.value, 0)
return {
@ -69,18 +71,18 @@ const createChartOption = (data, colors) => {
percentage: {
padding: [0, 0, 0, 10]
},
blue: {
red: {
color: colors[0]
},
lightBlue: {
color: colors[1]
},
orange: {
color: colors[2]
},
green: {
yellow: {
color: colors[3]
}
},
blue: {
color: colors[1]
},
}
},
formatter: (name) => {
@ -139,11 +141,11 @@ const createChartOption = (data, colors) => {
}
}
const handleResize = () => {
vehicleChart?.resize()
}
defineExpose({initCharts})
</script>
<style lang='scss' scoped>

49
src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
View File

@ -1,52 +1,55 @@
<template>
<div class="personCard relative flex mb10 pointer">
<div class="cxbq f14 lh50 tc absolute">已完成</div>
<div class="cxbq f14 lh50 tc absolute" v-if="props.item.czzt == '03'">已完成</div>
<el-button color="#0072ff" size="small" class="btn_qs f14 tc absolute">签收</el-button>
<div class="avatarBox relative">
<div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">处置</div>
<div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
<DictTag :tag="false" :value="props.item.czzt" :options="props.dic._GS_ZDR_CZZT" />
</div>
<div>
<el-image :preview-teleported="true" style="width: 80px; height: 110px" :src="pro" :preview-src-list="[pro]"/>
<el-image :preview-teleported="true" style="width: 80px; height: 110px" :src="props.item.yjTp" :preview-src-list="[props.item.yjTp]"/>
</div>
<span class="smallbtn">全息档案</span>
</div>
<div class="infoBox">
<div class="items">
<div class="infoItem flex nowrap mb10">{{ props.item.name }} <span class="bqbox ml6">{{ props.item.yjbq }}</span></div>
<div class="infoItem ellipsis">性别：<span class="value">{{ props.item.gender }}</span></div>
<div class="infoItem ellipsis">籍贯：<span class="value">{{ props.item.gender }}</span></div>
<div class="infoItem ellipsis">身份证号：<span class="value">{{ props.item.idCard }}</span></div>
<div class="infoItem ellipsis">出生日期：<span class="value">{{ props.item.csrq }}</span></div>
<div class="infoItem ellipsis">民族：<span class="value">{{ props.item.mz }}</span></div>
<div class="infoItem flex nowrap mb10">{{ props.item.yjRyxm }} <span class="bqbox ml6">{{ props.item.yjbq }}</span></div>
<div class="infoItem ellipsis">性别：<span class="value">{{ IdCard(props.item.yjRysfzh , 2 )}}</span></div>
<div class="infoItem ellipsis">身份证号：<span class="value">{{ props.item.yjRysfzh }}</span></div>
<div class="infoItem ellipsis">出生日期：<span class="value">{{ IdCard(props.item.yjRysfzh , 1 )}}</span></div>
<div class="infoItem ellipsis">相似度：<span class="value">{{ props.item.xsd * 100 }}%</span></div>
</div>
<div class="items">
<div class="infoItem ellipsis">户籍地区划：<span class="value">{{ props.item.hjdqh }}</span></div>
<div class="infoItem ellipsis">户籍地派出所：<span class="value">{{ props.item.sspcs }}</span></div>
<div class="infoItem ellipsis">户籍地详址：<span class="value">{{ props.item.address }}</span></div>
<div class="infoItem ellipsis">现住地区划：<span class="value">{{ props.item.xzdqh }}</span></div>
<div class="infoItem ellipsis">现住地派出所：<span class="value">{{ props.item.xzdpcs }}</span></div>
<div class="infoItem ellipsis">现住地详址：<span class="value">{{ props.item.xzdxz }}</span></div>
<div class="infoItem ellipsis">预警标题:<span class="value">{{ props.item.yjBt }}</span></div>
<div class="infoItem ellipsis">预警内容：<span class="value">{{ props.item.yjNr }}</span></div>
<div class="infoItem ellipsis">预警地址：<span class="value">{{ props.item.yjDz }}</span></div>
<div class="infoItem ellipsis">预警时间：<span class="value">{{ props.item.yjSj }}</span></div>
<div class="infoItem ellipsis">预警次数：<span class="value"><span class="num">{{ props.item.yjCs }}</span> 次</span></div>
<div class="infoItem ellipsis">预警级别：<span class="value">{{ props.item.yjJb }}</span></div>
</div>
<div class="items">
<div class="infoItem ellipsis">管辖单位：<span class="value">{{ props.item.gxdw }}</span></div>
<div class="infoItem ellipsis">人员类别：<span class="value">{{ props.item.rylb }}</span></div>
<div class="infoItem ellipsis">人员级别：<span class="value">{{ props.item.ryjb }}</span></div>
<div class="infoItem ellipsis">列控原因：<span class="value">{{ props.item.lkyy }}</span></div>
<div class="infoItem ellipsis">布控状态：<span class="value">{{ props.item.bkzt }}</span></div>
<div class="infoItem ellipsis">预警等级：<span class="value">{{ props.item.yjdj }}</span></div>
<div class="infoItem ellipsis">预警次数：<span class="value"><span class="num">{{ props.item.yjcs }}</span> 次</span></div>
<div class="infoItem ellipsis">签收人：<span class="value">{{ props.item.qsrxm }}</span></div>
<div class="infoItem ellipsis">签收时间：<span class="value">{{ props.item.qssj }}</span></div>
<div class="infoItem ellipsis">反馈时间：<span class="value">{{ props.item.fksj }}</span></div>
<div class="infoItem ellipsis">反馈内容：<span class="value">{{ props.item.qsFk }}</span></div>
<div class="infoItem ellipsis">反馈人：<span class="value">{{ props.item.fkrxm }}</span></div>
</div>
</div>
</div>
</template>
<script setup>
import pro from "@/assets/images/icon100.png";
import { IdCard } from '@/utils/validate.js'
import { defineProps } from "vue";
const props = defineProps({
item: {
type: Object,
default: () => ({})
},
dic: {
type: Object,
default: () => ({})
},
type: {
type: String,
default: ""

136
src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
View File

@ -23,9 +23,9 @@
<template #append><el-icon><Search /></el-icon></template>
</el-input>
</div>
<ul class="listContent noScollLine mt10">
<ul class="listContent noScollLine mt10" v-infinite-scroll="loadList" style="overflow: auto" v-loading="loading">
<li v-for="(item, index) in personList" :key="index">
<YjItem :item="item" type="yj"></YjItem>
<YjItem :item="item" type="yj" :dic="{D_BZ_YJCZZT}"></YjItem>
</li>
</ul>
</div>
@ -40,7 +40,7 @@
</div>
<!-- 第二部分 -->
<div class="model-commom mt10">
<div class="hed flex align-center">人员类型统计</div>
<div class="hed flex align-center">布控区域统计</div>
<div class="comm-cnt">
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
</div>
@ -56,27 +56,29 @@
<div class="model-commom mt10">
<div class="hed flex align-center">预警等级统计</div>
<div class="comm-cnt">
<WarningCount></WarningCount>
<WarningCount ref="yjjbRef"></WarningCount>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { qcckPost,qcckGet } from "@/api/qcckApi.js";
import GdMap from "@/components/GdMap/index.vue";
import YjItem from "./components/yjItem.vue";
import WarningCount from "./components/WarningCount.vue";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { reactive, ref } from "vue";
import { onMounted, reactive, ref,getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const { D_BZ_YJCZZT } = proxy.$dict('D_BZ_YJCZZT')
const router = useRouter()
const listQuery = ref({});
const keyword = ref('');
const yjjbRef = ref()
const search = reactive({
xd: [
{ label: "吸毒", value: "10" },
@ -95,14 +97,12 @@ const search = reactive({
{ label: "酒馆", value: "20" }
]
});
const loading = ref(false)
const list = reactive({
// 感知源
GzyDate: {
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
list: [
{ name: "总数", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
{ name: "已处置", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
],
list: [],
},
RylxDate: {
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
@ -118,53 +118,60 @@ const list = reactive({
{ name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
],
},
})
const personList = ref([
{
name: "张三",
idCard: "330102199001011234",
gender: "男",
sspcs: "xxx上城区派出所",
address: "xxxx上城区",
yjjb: "10",
yjbq: "吸贩毒",
age: 20,
yy: "2023-01-01 12:00:00"
},
{
name: "张三",
idCard: "330102199001011234",
gender: "男",
sspcs: "xxx上城区派出所",
address: "xxxx上城区",
yjjb: "40",
age: 20,
yjbq: "吸贩毒",
yy: "2023-01-01 12:00:00"
},
{
name: "张三",
idCard: "330102199001011234",
gender: "男",
age: 20,
sspcs: "xxx上城区派出所",
address: "xxxx上城区",
yjjb: "20",
yjbq: "吸贩毒",
yy: "2023-01-01 12:00:00"
},
{
name: "张三",
idCard: "330102199001011234",
gender: "男",
age: 20,
sspcs: "xxx上城区派出所",
address: "xxxx上城区",
yjjb: "30",
yjbq: "吸贩毒",
yy: "2023-01-01 12:00:00"
}
]);
const personList = ref([]);
const pageNum = ref(1)
const total = ref(0)
onMounted(()=>{
getList()
init()
})
// 触底加载
const loadList = () =>{
if( personList.value.length == total.value) return;
pageNum.value++;
getList()
}
const getList = () =>{
let params = { pageSize:10, pageNum:pageNum.value };
loading.value = true;
qcckPost({params},'/mosty-jmxf/tbYjxx/getPageList').then(res=>{
loading.value = false;
let arr = res.records || [];
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
total.value = res.total;
}).catch(()=>{
loading.value = false;
})
}
const init = () =>{
// 布控区域统计
qcckGet({},'/mosty-jmxf/tbYjxx/getYjxxTjYjlx').then(res=>{
console.log(res,'====布控区域统计');
})
// 感知元统计
qcckGet({},'/mosty-jmxf/tbYjxx/getGzyTj').then(res=>{
list.GzyDate.xDate = res.map(item=>item.yj_gzymc);
list.GzyDate.list = [
{ name: "",
value: res.map(item=>item.num),
color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
hatColor: '#087df9'
}
]
})
// 预警级别
qcckGet({},'/mosty-jmxf/tbYjxx/getYjxxTj').then(res=>{
yjjbRef.value.initCharts(res)
})
}
const seeMoreFn = () => {
router.push('/ControlApproval')
}
@ -256,10 +263,13 @@ const seeMoreFn = () => {
height: 40px;
line-height: 40px;
padding-left: 10px;
background: linear-gradient(90deg,
#124cb3 0%,
rgba(18, 76, 179, 0.23) 77%,
rgba(18, 76, 179, 0) 100%);
background: linear-gradient(90deg, #124cb3 0%, rgba(18, 76, 179, 0.23) 77%, rgba(18, 76, 179, 0) 100%);
}
}
</style>
<style>
.el-loading-mask{
background: rgba(0,0,0,0.5);
}
</style>