更新大屏

src/views/backOfficeSystem/HumanIntelligence/RlStatisticalAnalysis/index.vue

@@ -130,7 +130,7 @@ const init = () => {
     })
   });
 
-  // 获取处置状态统计
+  // 获取处置状态统计 
   qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
     let arr = res || [];
     obj.czztList = arr.map(v=>{

src/views/home/echarts/pieEcharts.vue

@@ -9,11 +9,11 @@ import { ref, watch ,defineProps,nextTick } from "vue";
 const props = defineProps({
   echartsId:{
     type:String,
-    default:'lineId'
+    default:'barId'
   },
   color:{
     type:String,
-    default:'lineId'
+    default:'#0072ff'
   },
   data:{
     type:Array,
@@ -72,7 +72,7 @@ const initChart = (data) => {
     },
     series: [
       {
-        name: "情报反馈统计",
+        name: "",
         type: "pie",
         radius: ["40%", "75%"],
         center: ["30%", "50%"],

src/views/home/model/qbfkCount.vue

@@ -3,152 +3,34 @@
     <span class="title">情报反馈统计</span>
   </div> 
   <div class="comom-cnt">
-    <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
+    <pieEcharts echartsId='qbfk' :data="countData"></pieEcharts>
+    <!-- <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div> -->
   </div>
 </template>
 
 <script setup>
+import pieEcharts from "@/views/home/echarts/pieEcharts.vue";
+import { qcckPost } from "@/api/qcckApi.js";
 import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
+const countData = ref([
-import 'echarts-gl';
+  { label:'实反馈',value:0,color:['#FF6B9A','#FF4B7A']},
-
+  { label:'超时反馈',value:0,color:['#FFAA33','#FF8A00']},
-const initChart = () => {
+  { label:'处置下发',value:0,color:['#FFE699','#FFD666']},
-  const chartDom = document.getElementById('qbfk');
+  { label:'未反馈',value:0,color:['#66B5FF','#3AA1FF']},
-  const myChart = echarts.init(chartDom);
+])
-  
-  const option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b}: {c} ({d}%)',
-      backgroundColor: 'rgba(0,0,0,0.7)',
-      borderColor: '#0C2E5A',
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    legend: {
-      top: 'middle',
-      right: '5%',
-      orient: 'vertical',
-      itemGap: 20,
-      textStyle: {
-        color: '#fff',
-        fontSize: 14
-      },
-      itemWidth: 15,
-      itemHeight: 15,
-      icon: 'roundRect',
-      formatter: function(name) {
-        const data = option.series[0].data;
-        const target = data.find(item => item.name === name);
-        if (target) {
-          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
-        }
-        return name;
-      }
-    },
-    series: [
-      {
-        name: '情报反馈统计',
-        type: 'pie',
-        radius: ['40%', '75%'],
-        center: ['30%', '50%'],
-        startAngle: 90,
-        zlevel: 10,
-        itemStyle: {
-          borderRadius: 10,
-          borderWidth: 2,
-          borderColor: '#0C2E5A'
-        },
-        selectedMode: 'single',
-        selectedOffset: 30,
-        animation: true,
-        animationType: 'scale',
-        animationEasing: 'elasticOut',
-        animationDelay: function (idx) {
-          return Math.random() * 200;
-        },
-        label: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-        itemStyle: {
-          borderWidth: 2,
-          borderColor: '#0C2E5A',
-          opacity: 0.8,
-          shadowBlur: 20,
-          shadowColor: 'rgba(0,0,0,0.5)'
-        },
-        data: [
-          { 
-            value: 18, 
-            name: '实反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FF6B9A' },
-                { offset: 1, color: '#FF4B7A' }
-              ])
-            } 
-          },
-          { 
-            value: 13, 
-            name: '超时反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FFAA33' },
-                { offset: 1, color: '#FF8A00' }
-              ])
-            } 
-          },
-          { 
-            value: 17, 
-            name: '处置下发', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FFE699' },
-                { offset: 1, color: '#FFD666' }
-              ])
-            } 
-          },
-          { 
-            value: 2, 
-            name: '未反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#66B5FF' },
-                { offset: 1, color: '#3AA1FF' }
-              ])
-            } 
-          }
-        ],
-        zlevel: 10,
-        emphasis: {
-          scale: true,
-          scaleSize: 10,
-          itemStyle: {
-            shadowBlur: 30,
-            shadowColor: 'rgba(0,0,0,0.6)'
-          }
-        }
-      }
-    ],
-    
-  };
-
-  option && myChart.setOption(option);
-
-  // 监听窗口大小变化
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-};
 
 onMounted(() => {
-  initChart();
+  getCount();
 });
+
+const getCount = () =>{
+  // 获取处置状态统计 
+  qcckPost({cjLx:0}, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
+    console.log(res,'=====');
+    
+  });
+}
+
 </script>
 
 <style lang="scss" scoped>

src/views/home/model/qblyType.vue

@@ -14,8 +14,8 @@ import { onMounted, reactive } from "vue";
 const list = reactive({
   xDate: ['110警情','人力情报','系统采集','民警处置单'],
   list:[
-    { name: "总数", value: [40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+    { name: "总数", value: [0,0,0,0,] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
-    { name: "已处置", value: [10,40,50,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+    { name: "已处置", value: [0,0,0,0],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
   ],
 })
 onMounted(() => {
@@ -24,8 +24,9 @@ onMounted(() => {
 
 const getCount = () =>{
   qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForLylx').then(res=>{
-    console.log(res,'=====');
+    list.xDate = res ? res.cz.map(v=> v.zdmc):[];
-    
+    list.list[0].value = res ? res.zs.map(v=>v.count):[];
+    list.list[1].value = res ? res.cz.map(v=>v.count):[];
   })
 }
 

src/views/home/model/qbsbCount.vue

@@ -8,18 +8,31 @@
 </template>
 
 <script setup>
-import { values } from "lodash";
+import { qcckPost } from "@/api/qcckApi.js";
 import LineEcharts from "../echarts/moreLineEcharts.vue";
-import { reactive, ref } from 'vue';
+import { reactive, onMounted } from 'vue';
 
 const dataList = reactive({
   xData:['巴宜区','工布江达县','米林县','墨脱县','波密县','察隅县','朗县'],
   color:['#0386FB','#00FFFF'],
   list:[
-    {label:'总数',val:[30,20,10,60,50,60,35]},
+    {label:'总数',val:[0,0,0,0,0,0,0]},
-    {label:'已处置',val:[40,30,20,50,30,44,50]},
+    {label:'已处置',val:[0,0,0,0,0,0,0]},
   ]
 });
+onMounted(() => {
+  getCount()
+});
+
+const getCount = () =>{
+  qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForQx').then(res=>{
+    dataList.xDate = res ? res.ycz.map(v=> v.org_name):[];
+    dataList.list[0].val = res ? res.zs.map(v=>v.count):[];
+    dataList.list[1].val = res ? res.ycz.map(v=>v.count):[];
+  })
+}
+
+
 </script>
 
 

src/views/home/model/yszs.vue

@@ -11,13 +11,28 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { qcckPost } from "@/api/qcckApi.js";
+import { ref, onMounted } from "vue";
 const contentItem = ref([
-  { label: "线索总数", value: "892" ,icon:require('@/assets/images/top-1.png')},
+  { type:"xs", label: "线索总数", value: "0" ,icon:require('@/assets/images/top-1.png')},
-  { label: "已处置线索总数", value: "892",icon:require('@/assets/images/top-2.png') },
+  { type:"xscz", label: "已处置线索总数", value: "0",icon:require('@/assets/images/top-2.png') },
-  { label: "重点人总数", value: "892",icon:require('@/assets/images/top-3.png') },
+  { type:"zdry", label: "重点人总数", value: "0",icon:require('@/assets/images/top-3.png') },
-  { label: "重点群体总数", value: "892" ,icon:require('@/assets/images/top-4.png')},
+  { type:"zdqt", label: "重点群体总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
 ]);
+
+onMounted(() => {
+  getCount()
+});
+
+const getCount = () =>{
+  qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForZs').then(res=>{
+    for(let key in res){
+      let index = contentItem.value.findIndex(v=>key == v.type)
+      if(index != -1) contentItem.value[index].value = res[key];
+    }
+  })
+}
+
 </script>
 
 <style lang="scss" scoped>