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

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

@ -1,52 +1,55 @@
<template> <template>
<div class="personCard relative flex mb10 pointer"> <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> <el-button color="#0072ff" size="small" class="btn_qs f14 tc absolute">签收</el-button>
<div class="avatarBox relative"> <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> <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> </div>
<span class="smallbtn">全息档案</span> <span class="smallbtn">全息档案</span>
</div> </div>
<div class="infoBox"> <div class="infoBox">
<div class="items"> <div class="items">
<div class="infoItem flex nowrap mb10">{{ props.item.name }} <span class="bqbox ml6">{{ props.item.yjbq }}</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">{{ props.item.gender }}</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.gender }}</span></div> <div class="infoItem ellipsis">身份证号：<span class="value">{{ props.item.yjRysfzh }}</span></div>
<div class="infoItem ellipsis">身份证号：<span class="value">{{ props.item.idCard }}</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.csrq }}</span></div> <div class="infoItem ellipsis">相似度：<span class="value">{{ props.item.xsd * 100 }}%</span></div>
<div class="infoItem ellipsis">民族：<span class="value">{{ props.item.mz }}</span></div>
</div> </div>
<div class="items"> <div class="items">
<div class="infoItem ellipsis">户籍地区划：<span class="value">{{ props.item.hjdqh }}</span></div> <div class="infoItem ellipsis">预警标题:<span class="value">{{ props.item.yjBt }}</span></div>
<div class="infoItem ellipsis">户籍地派出所：<span class="value">{{ props.item.sspcs }}</span></div> <div class="infoItem ellipsis">预警内容：<span class="value">{{ props.item.yjNr }}</span></div>
<div class="infoItem ellipsis">户籍地详址：<span class="value">{{ props.item.address }}</span></div> <div class="infoItem ellipsis">预警地址：<span class="value">{{ props.item.yjDz }}</span></div>
<div class="infoItem ellipsis">现住地区划：<span class="value">{{ props.item.xzdqh }}</span></div> <div class="infoItem ellipsis">预警时间：<span class="value">{{ props.item.yjSj }}</span></div>
<div class="infoItem ellipsis">现住地派出所：<span class="value">{{ props.item.xzdpcs }}</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.xzdxz }}</span></div> <div class="infoItem ellipsis">预警级别：<span class="value">{{ props.item.yjJb }}</span></div>
</div> </div>
<div class="items"> <div class="items">
<div class="infoItem ellipsis">管辖单位：<span class="value">{{ props.item.gxdw }}</span></div> <div class="infoItem ellipsis">签收人：<span class="value">{{ props.item.qsrxm }}</span></div>
<div class="infoItem ellipsis">人员类别：<span class="value">{{ props.item.rylb }}</span></div> <div class="infoItem ellipsis">签收时间：<span class="value">{{ props.item.qssj }}</span></div>
<div class="infoItem ellipsis">人员级别：<span class="value">{{ props.item.ryjb }}</span></div> <div class="infoItem ellipsis">反馈时间：<span class="value">{{ props.item.fksj }}</span></div>
<div class="infoItem ellipsis">列控原因：<span class="value">{{ props.item.lkyy }}</span></div> <div class="infoItem ellipsis">反馈内容：<span class="value">{{ props.item.qsFk }}</span></div>
<div class="infoItem ellipsis">布控状态：<span class="value">{{ props.item.bkzt }}</span></div> <div class="infoItem ellipsis">反馈人：<span class="value">{{ props.item.fkrxm }}</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> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import pro from "@/assets/images/icon100.png"; import { IdCard } from '@/utils/validate.js'
import { defineProps } from "vue"; import { defineProps } from "vue";
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
dic: {
type: Object,
default: () => ({})
},
type: { type: {
type: String, type: String,
default: "" default: ""

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

@ -23,9 +23,9 @@
<template #append><el-icon><Search /></el-icon></template> <template #append><el-icon><Search /></el-icon></template>
</el-input> </el-input>
</div> </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"> <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> </li>
</ul> </ul>
</div> </div>
@ -40,7 +40,7 @@
</div> </div>
<!-- 第二部分 --> <!-- 第二部分 -->
<div class="model-commom mt10"> <div class="model-commom mt10">
<div class="hed flex align-center">人员类型统计</div> <div class="hed flex align-center">布控区域统计</div>
<div class="comm-cnt"> <div class="comm-cnt">
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts> <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
</div> </div>
@ -56,27 +56,29 @@
<div class="model-commom mt10"> <div class="model-commom mt10">
<div class="hed flex align-center">预警等级统计</div> <div class="hed flex align-center">预警等级统计</div>
<div class="comm-cnt"> <div class="comm-cnt">
<WarningCount></WarningCount> <WarningCount ref="yjjbRef"></WarningCount>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index"; 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 YjItem from "./components/yjItem.vue";
import WarningCount from "./components/WarningCount.vue"; import WarningCount from "./components/WarningCount.vue";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.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"; import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const { D_BZ_YJCZZT } = proxy.$dict('D_BZ_YJCZZT')
const router = useRouter() const router = useRouter()
const listQuery = ref({}); const listQuery = ref({});
const keyword = ref(''); const keyword = ref('');
const yjjbRef = ref()
const search = reactive({ const search = reactive({
xd: [ xd: [
{ label: "吸毒", value: "10" }, { label: "吸毒", value: "10" },
@ -95,14 +97,12 @@ const search = reactive({
{ label: "酒馆", value: "20" } { label: "酒馆", value: "20" }
] ]
}); });
const loading = ref(false)
const list = reactive({ const list = reactive({
// 感知源
GzyDate: { GzyDate: {
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'], xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
list: [ 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' },
],
}, },
RylxDate: { RylxDate: {
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'], 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' }, { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
], ],
}, },
}) })
const personList = ref([ const personList = ref([]);
{ const pageNum = ref(1)
name: "张三", const total = ref(0)
idCard: "330102199001011234", onMounted(()=>{
gender: "男", getList()
sspcs: "xxx上城区派出所", init()
address: "xxxx上城区", })
yjjb: "10",
yjbq: "吸贩毒", // 触底加载
age: 20, const loadList = () =>{
yy: "2023-01-01 12:00:00" if( personList.value.length == total.value) return;
}, pageNum.value++;
{ getList()
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 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 = () => { const seeMoreFn = () => {
router.push('/ControlApproval') router.push('/ControlApproval')
} }
@ -256,10 +263,13 @@ const seeMoreFn = () => {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding-left: 10px; padding-left: 10px;
background: linear-gradient(90deg, background: linear-gradient(90deg, #124cb3 0%, rgba(18, 76, 179, 0.23) 77%, rgba(18, 76, 179, 0) 100%);
#124cb3 0%,
rgba(18, 76, 179, 0.23) 77%,
rgba(18, 76, 179, 0) 100%);
} }
} }
</style> </style>
<style>
.el-loading-mask{
background: rgba(0,0,0,0.5);
}
</style>