From 6ff3f78b758f0386c17ed5b3627524e373562119 Mon Sep 17 00:00:00 2001
From: Esacpe <1113279529@qq.com>
Date: Mon, 14 Jul 2025 21:05:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/WarningCount.vue               |  72 +++++-----
 .../warningControl/components/yjItem.vue      |  49 ++++---
 .../warningControl/index.vue                  | 136 ++++++++++--------
 3 files changed, 136 insertions(+), 121 deletions(-)

diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
index 8861f31..8475b63 100644
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
@@ -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>
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
index 7bf2807..11c9ac7 100644
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
@@ -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: ""
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
index a7dae39..5aa19d9 100644
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
@@ -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>