更新

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/components/czztCount.vue

@@ -14,18 +14,33 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref , defineProps, nextTick , watch} from 'vue'
 import * as echarts from 'echarts'
-import 'echarts-gl' // Ensure GL is available if needed, though we use custom series for better labels
+import 'echarts-gl' 
-
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    }
+})
 const echartsRef = ref(null)
 const chartData = ref([
-    { name: '未签收', value: 18 },
+    { name: '未签收', value: 0 },
-    { name: '已签收', value: 18 },
+    { name: '已签收', value: 0 },
-    { name: '已反馈', value: 18 }
+    { name: '已反馈', value: 0 }
 ])
-const colors = ['#FF4D4F', '#1890FF', '#00E6B8'] // Red, Blue, Cyan/Teal
+const colors = ['#FF4D4F', '#1890FF', '#00E6B8'] 
 let myChart = null
+
+watch(() => props.data, (newVal) => {
+    nextTick(() => {
+        if (newVal.length > 0) {
+            chartData.value = newVal;
+            initChart()
+        }
+    })
+},{immediate:true})
+
 onMounted(() => {
     initChart()
     window.addEventListener('resize', resizeChart)

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/components/headLayout.vue

@@ -32,8 +32,10 @@ const timeList = ref([
   { label: "季", num: 2 },
   { label: "年", num: 3 }
 ]);
-const radioTime = ref('')
+const radioTime = ref(0)
-const formSearch = ref({})
+const formSearch = ref({
+  dateRange: [timeValidate(null,'ymd'),timeValidate(null,'ymd')],
+})
 
 // 单选
 const changeRadio = (val) =>{
@@ -68,8 +70,10 @@ const handleSubmit = () => {
 }
 // 重置
 const resetForm = () => {
-  radioTime.value = '';
+  radioTime.value = 0;
-  formSearch.value = {}
+  formSearch.value = {
+    dateRange: [timeValidate(null,'ymd'),timeValidate(null,'ymd')],
+  }
   emit('change', formSearch.value)
 }
 

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/yjCount.vue

@@ -10,22 +10,26 @@
                 </div>
                 <div class="center">
                     <div class="label">{{ item.label }}</div>
-                    <div class="value">{{ item.value }}</div>
+                    <div class="value">{{ item.dysl }}</div>
                 </div>
                 <div class="divider"></div>
                 <div class="right">
                     <div class="stat-row">
                         <span class="stat-label">环比</span>
-                        <span class="stat-val up">
+                        <span class="stat-val" :class="item.hb < 0 ? 'down' : 'up'">
-                            {{ item.hbsl }}
+                            {{ item.sysl }}
-                            <img class="ml4" src="@/assets/images/icon-up.png" alt="">
+                            <img class="ml4" src="@/assets/images/icon-up.png" alt="" v-if="item.hb > 0">
+                            <img class="ml4" src="@/assets/images/icon-down.png" alt="" v-if="item.hb < 0">
+                            <span v-if="item.hb == 0" style="color:red;" class="ml4 mb4">--</span>
                         </span>
                     </div>
                     <div class="stat-row">
                         <span class="stat-label">同比</span>
-                        <span class="stat-val down">
+                        <span class="stat-val" :class="item.tb < 0 ? 'down' : 'up'">
-                            {{ item.tbsl }} 
+                            {{ item.snsl }} 
-                            <img class="ml4" src="@/assets/images/icon-down.png" alt="">
+                            <img class="ml4" src="@/assets/images/icon-up.png" alt="" v-if="item.tb > 0">
+                            <img class="ml4" src="@/assets/images/icon-down.png" alt="" v-if="item.tb < 0">
+                            <span v-if="item.hb == 0" style="color:red;" class="ml4 mb4">--</span>
                         </span>
                     </div>
                 </div>
@@ -36,12 +40,11 @@
                 <div class="common-title">
                     <div class="title">各部门预警数量统计</div>
                     <div class="btn-group">
-                        <div class="btn" :class="{ active: activeTab === '县局' }" @click="activeTab = '县局'">县局</div>
+                        <div class="btn"  @click="handle_gbm" v-if="activeTab">返回</div>
-                        <div class="btn" :class="{ active: activeTab === '派出所' }" @click="activeTab = '派出所'">派出所</div>
                     </div>
                 </div>
-                <div class="echratsBox">
+                <div class="echratsBox" v-loading="loading">
-                    <DbarEcharts echartsId="bar3DChart" :key="ketcount" :data="obj.cnList" />
+                    <DbarEcharts echartsId="bar3DChart" :key="ketcount" :data="obj.cnList" @click="handleClick" />
                 </div>
             </li>
             <li class="cnt-item">
@@ -62,13 +65,14 @@
                 <div class="common-title">
                     <div class="title">处置状态统计</div>
                 </div>
-                 <div class="echratsBox"><CzztCount /></div>
+                 <div class="echratsBox"><CzztCount :data="obj.czztList" /></div>
             </li>
         </ul>
     </div>
 </template>
 
 <script setup>
+import { getItem } from "@/utils/storage";
 import { qcckGet } from '@/api/qcckApi'
 import HeadLayout from './components/headLayout.vue'
 import BqyjslCount from './components/bqyjslCount.vue'
@@ -76,50 +80,38 @@ import CzztCount from './components/czztCount.vue'
 import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
 import LineEcharts from "@/views/home/echarts/lineEcharts.vue";
 import { onMounted, reactive, ref } from "vue";
-import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
 const searchRef = ref() //筛选组件实例
 const boxHeight = ref() //盒子高度
 const formSearch = ref({}) //查询条件
-const activeTab = ref('县局')
+const activeTab = ref(false)
+const loading = ref(false)
 const ketcount = ref(0)
 const countList = ref([
-    { zddm:'01',label: '红色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-red.png') },
+    { zddm:'01',label: '红色预警', hb:0,tb:0, dysl: '0', sysl: '0', snsl: '0', icon: require('@/assets/images/icon-red.png') },
-    { zddm:'02',label: '橙色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-orange.png') },
+    { zddm:'02',label: '橙色预警', hb:0,tb:0, dysl: '0', sysl: '0', snsl: '0', icon: require('@/assets/images/icon-orange.png') },
-    { zddm:'03',label: '黄色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-yellow.png') },
+    { zddm:'03',label: '黄色预警', hb:0,tb:0, dysl: '0', sysl: '0', snsl: '0', icon: require('@/assets/images/icon-yellow.png') },
-    { zddm:'04',label: '蓝色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-blue.png') },
+    { zddm:'04',label: '蓝色预警', hb:0,tb:0, dysl: '0', sysl: '0', snsl: '0', icon: require('@/assets/images/icon-blue.png') },
 ])
 const obj = reactive({
-    bqyjslList: [
+    bqyjslList: [], //各类标签预警数量统计 { label: '涉毒人员', value: 0 },
-        { label: '涉毒人员', value: 100 },
+    sevenList: [], //7类重点人员预警统计 { label:'涉恐',value:0 },
-        { label: '前科人员', value: 80 },
+
-        { label: '肇事肇祸', value: 70 },
+    // 2开头是市、3开头是县、4开头派出所级 { label:'工布江达县',value:0 },
-        { label: '涉稳人员', value: 60 },
-        { label: '涉稳人员', value: 50 },
-    ],//各类标签预警数量统计
-    sevenList: [
-        { label:'涉恐',value:30 },
-        { label:'涉暴',value:20 },
-        { label:'涉恐暴',value:10 },
-        { label:'涉睡',value:30 },
-        { label:'涉睡暴',value:20 },
-        { label:'涉睡恐',value:10 },
-        { label:'涉睡恐暴',value:5 },
-    ],//7类重点人员预警统计
     cnList: {
-        list: [
+        list: [],
-            { label:'工布江达县',value:50 },
-            { label:'米林市',value:40 },
-            { label:'墨脱县',value:10 },
-            { label:'波密县',value:50 },
-            { label:'察隅县',value:40 },
-            { label:'郎县',value:10 },
-            { label:'雅安分局',value:40 },
-        ],
         topColor:'#17c8c3',
         colors: ["#28EEBF","#0DBAC5"],
-    }
+    },
-})
 
+    //处置状态统计
+    czztList: [
+        { name: '未签收', value: 0 },
+        { name: '已签收', value: 0 },
+        { name: '已反馈', value: 0 }
+    ]
+})
+// 2开头是市、3开头是县、4开头派出所级
+const userInfo = getItem("deptId")[0];
 onMounted(()=>{
     tabHeightFn();
     init()
@@ -130,30 +122,101 @@ const handleChange = (val) => {
   formSearch.value = {...val }
   formSearch.value.startTime = val.dateRange ? val.dateRange[0] : ''
   formSearch.value.endTime = val.dateRange ? val.dateRange[1] : ''
+  delete formSearch.value.dateRange;
   init()
 }
 
+// 初始化
 const init = () =>{
-    handle_yjfl()
+    handle_yjfl();
+    handle_gbm();
+    handle_yjbq();
+    handle_seven();
+    handle_czzt();
 }
 
 // 预警分类统计 同比、环比
 const handle_yjfl = async () =>{
     let params = {...formSearch.value}
-    delete params.dateRange;
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjfltj');
-    // let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjfltj');
+    let list = res || [];
-    // let list = res || [];
+    countList.value = countList.value.map(item => {
-    // countList.value = countList.value.map(item => {
+        let obj = list.find(i => i.zddm === item.zddm);
-    //     let obj = list.find(i => i.zddm === item.zddm)
+        obj.hb = Number(obj.hb.substring(0, obj.hb.length - 1));
-    //     if(obj){
+        obj.tb = Number(obj.tb.substring(0, obj.tb.length - 1));
-    //         item.value = obj.value || '0'
+        return obj ? {...item,obj} : item
-    //         item.hb = obj.hbsl || '0'
+    })
-    //         item.tb = obj.tbsl || '0'
-    //     }
-    //     return item
-    // })
 }
 
+
+// 部门点击事件
+const handleClick = async (val) =>{
+    // 当前部门是派出所 bb
+    if(userInfo?.deptLevel?.startsWith('4')) return;
+    let info = obj.cnList.list.find(i => i.label === val);
+    let params = {...formSearch.value }
+    params.ssbmdm = info.ssbmdm;
+    loading.value = true;
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjbmtj');
+    activeTab.value = true;
+    loading.value = false;
+    obj.cnList.list = (res || []).map(v=>{
+        return {
+            label: v.ssbmmc,
+            value: Number(v.sl),
+            ssbmdm:v.ssbmdm
+        }
+    })
+}
+
+
+
+// 各部门预警数量统计
+const handle_gbm = async () =>{
+    activeTab.value = false;
+    let params = {...formSearch.value}
+    params.ssbmdm = userInfo?.deptCode;
+    loading.value = true;
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjbmtj');
+    loading.value = false;
+    obj.cnList.list = (res || []).map(v=>{
+        return {
+            label: v.ssbmmc,
+            value: Number(v.sl),
+            ssbmdm:v.ssbmdm
+        }
+    })
+}
+// 预警标签统计
+const handle_yjbq = async () =>{
+    let params = {...formSearch.value}
+    params.ssbmdm = userInfo?.deptCode;
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjbqtj');
+    obj.bqyjslList = (res || []).map(item => ({
+        label: item.yjbq,
+        value: Number(item.count),
+    }));
+}
+// 7类重点人员预警统计
+const handle_seven = async () =>{
+    let params = {...formSearch.value}
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/qlzdrtj');
+    obj.sevenList = (res || []).map(item => ({
+        label: item.zdmc,
+        value: Number(item.sl),
+    }));
+}
+// 处置状态统计
+const handle_czzt = async () =>{
+    let params = {...formSearch.value}
+    let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjczzttj');
+    obj.czztList = (res || []).map(item => ({
+        name: item.zdmc,
+        value: Number(item.sl),
+    }));
+}
+
+
 // 表格高度计算
 const tabHeightFn = () => {
   boxHeight.value = window.innerHeight - searchRef.value.offsetHeight - 300;

src/views/home/echarts/3DbarEcharts.vue

@@ -3,7 +3,7 @@
 </template>
 <script setup>
 import * as echarts from "echarts";
-import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+import { onMounted, ref, defineEmits, defineProps, onUnmounted, watch, nextTick } from "vue";
 const props = defineProps({
   echartsId: {
     type: String,
@@ -14,6 +14,7 @@ const props = defineProps({
     default: () => { }
   }
 });
+const emit = defineEmits(['click']);
 
 // 保存echarts实例
 const myChart = ref(null);
@@ -136,8 +137,10 @@ function chartFn() {
       },
       axisTick: {
         show: true
-      }, axisLabel: {
+      }, 
-            interval: 0 // 控制标签的显示间隔，0 表示全部显示，可以根据需要调整为其他值，例如 1 表示每隔一个显示一个标签。
+      axisLabel: {
+        interval: 1, // 控制标签的显示间隔，0 表示全部显示，可以根据需要调整为其他值，例如 1 表示每隔一个显示一个标签。
+        color: '#666666'
       }
     },
     yAxis: {
@@ -208,6 +211,9 @@ function chartFn() {
   };
 
   option && myChart.value.setOption(option);
+  myChart.value.on('click', function (param) {  
+    emit('click', param.name);
+  });
 }
 
 // 监听数据变化