用户统计大屏

huaxin-admin/src/main/java/com/zehong/web/controller/screenstatistic/TScreenStatisticController.java

@@ -3,7 +3,11 @@ package com.zehong.web.controller.screenstatistic;
 import com.zehong.common.core.domain.AjaxResult;
 import com.zehong.system.service.TScreenStatisticService;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
 import java.util.HashMap;
 import java.util.Map;
 
@@ -79,4 +83,13 @@ public class TScreenStatisticController {
     public AjaxResult totalNumStatisticByType(){
         return AjaxResult.success(screenStatisticService.totalNumStatisticByType());
     }
+
+
+    /**
+     * 新大屏用户统计
+     */
+    @GetMapping("/userStatistic")
+    public AjaxResult userStatistic(){
+        return AjaxResult.success(screenStatisticService.userStatistic());
+    }
 }

huaxin-system/src/main/java/com/zehong/system/mapper/TScreenStatisticMapper.java

@@ -58,4 +58,11 @@ public interface TScreenStatisticMapper {
      */
     List<Map<String,Object>> stationStatisticByType();
 
+    /**
+     * 用户统计
+     * @param type 用户类型
+     * @return
+     */
+    List<Map<String,Object>> userStatistic(int type);
+
 }

huaxin-system/src/main/java/com/zehong/system/service/TScreenStatisticService.java

@@ -46,4 +46,10 @@ public interface TScreenStatisticService {
      * @return
      */
     Map<String,List<Map<String,Object>>> totalNumStatisticByType();
+
+
+    /**
+     * 新大屏用户统计
+     */
+    Map<String,List> userStatistic();
 }

huaxin-system/src/main/java/com/zehong/system/service/impl/TScreenStatisticServiceImpl.java

@@ -123,5 +123,21 @@ public class TScreenStatisticServiceImpl implements TScreenStatisticService{
         return result;
     }
 
+    /**
+     * 新大屏用户统计
+     */
+    @Override
+    public Map<String,List> userStatistic(){
+        Map<String,List> result = new HashMap<>();
+        //居民用户统计
+        List<Map<String,Object>> userStatistic = screenStatisticMapper.userStatistic(1);
+        result.put("categories", userStatistic.stream().map(item -> item.get("areaName")).collect(Collectors.toList()));
+        result.put("residential", userStatistic.stream().map(item -> item.get("num")).collect(Collectors.toList()));
+        //工商用户统计
+        List<Map<String,Object>> bussinessStatistic = screenStatisticMapper.userStatistic(2);
+        result.put("commercial", bussinessStatistic.stream().map(item -> item.get("num")).collect(Collectors.toList()));
+        return result;
+    }
+
 
 }

huaxin-system/src/main/resources/mapper/system/TScreenStatisticMapper.xml

@@ -131,4 +131,22 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         ORDER BY station.site_station_type DESC ;
     </select>
 
+    <!-- 用户统计 -->
+    <select id="userStatistic" parameterType="int" resultType="Map">
+        SELECT
+          count(us.id) as num,
+          area.area_name as areaName
+        FROM
+          t_area area
+        <if test="type == 1">
+            LEFT JOIN t_user us ON area.id = us.street
+        </if>
+        <if test="type == 2">
+            LEFT JOIN t_business us ON area.id = us.street
+        </if>
+        WHERE area.parent_id = 8
+        GROUP BY area.id
+        ORDER BY area.id
+    </select>
+
 </mapper>
\ No newline at end of file

huaxin-web/src/api/screenstatistic/statistic.js

@@ -58,3 +58,12 @@ export function totalNumStatisticByType(query) {
   })
 }
 
+//新大屏用户统计
+export function userStatistic(query) {
+  return request({
+    url: '/screen/statistic/userStatistic',
+    method: 'get',
+    params: query
+  })
+}
+

huaxin-web/src/views/bigWindow/Ind/components/Left.vue

@@ -100,7 +100,9 @@ export default {
           if(pipeLengthInfo){
             pipeLengthInfo.forEach(item =>{
               let info = this.itemArr[item.type-1];
+              if (info){
                 info.num = item.totalLength;
+              }
             })
           }
           //设备

huaxin-web/src/views/bigWindow/Ind/components/Right.vue

@@ -18,13 +18,13 @@
           <img class="shu" src="@/assets/bigwindowImg/indImg/shu.png" alt="" />
         </div>
         <div class="b2">
-          <div class="b2t1">发生泄露报警</div>
+          <div class="b2t1">{{ eventInfo.title }}</div>
           <div class="b2t2">
             <div class="dz">地址：</div>
-            <div>河北省石家庄市平山西柏坡经济开发区经开路1号</div>
+            <div>{{ eventInfo.address }}</div>
           </div>
         </div>
-        <div class="b3">
+        <div class="b3" @click="toEvent">
           <img class="img1" src="@/assets/bigwindowImg/indImg/rimgb.png" alt="" />
           <div>点击定位</div>
         </div>
@@ -32,7 +32,7 @@
     </div>
 
     <div class="t2">
-      <Title text="事件定位" />
+      <Title text="用户统计" />
       <div class="chars-box">
         <UserTypeBarChartVue />
       </div>
@@ -53,7 +53,7 @@ import Title from "@/views/bigWindow/PubCom/title.vue";
 import d from "@/assets/bigwindowImg/index/rt.png";
 import UserTypeBarChartVue from "./UserTypeBarChart.vue";
 import Table from "@/views/bigWindow/Ind/components/DeviceScrollTable.vue"
-
+import { listResponse } from "@/api/emergency/response";
 
 export default {
   name: "",
@@ -66,9 +66,30 @@ export default {
   data() {
     return {
       d,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 1
+      },
+      eventInfo: {}
     };
   },
-  methods: {},
+  created(){
+    this.getList();
+  },
+  methods: {
+    getList(){
+      listResponse(this.queryParams).then(res => {
+        if(res.code == 200 && res.rows){
+          //this.eventList = res.rows;
+          this.eventInfo = res.rows[0];
+          console.log(">>>>>>>>>>",this.eventInfo)
+        }
+      });
+    },
+    toEvent(){
+      this.$router.push("/urgent/emergency")
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -143,6 +164,7 @@ export default {
     color: #fff;
     padding-top: 25px;
     text-align: center;
+    cursor: pointer;
   }
 }
 .t2 {

huaxin-web/src/views/bigWindow/Ind/components/UserTypeBarChart.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script>
+import { userStatistic } from "@/api/screenstatistic/statistic";
 export default {
   name: "UserTypeBarChart",
-  props: {
+  /*props: {
     categories: {
       type: Array,
       default() {
@@ -18,20 +19,24 @@ export default {
         return [26, 34, 18, 22, 24, 28, 10];
       },
     },
-    industrial: {
+    commercial: {
       type: Array,
       default() {
         return [18, 24, 8, 18, 20, 26, 22];
       },
     },
-  },
+  },*/
   data() {
     return {
       chart: null,
+      categories: [],
+      residential: [],
+      commercial: []
     };
   },
   mounted() {
     this.initChart();
+    this.getUserStatistic();
     window.addEventListener("resize", this.handleResize);
   },
   beforeDestroy() {
@@ -41,18 +46,29 @@ export default {
       this.chart = null;
     }
   },
-  watch: {
+/*  watch: {
     categories() {
       this.updateChart();
     },
     residential() {
       this.updateChart();
     },
-    industrial() {
+    commercial() {
       this.updateChart();
     },
-  },
+  },*/
   methods: {
+    getUserStatistic(){
+      userStatistic().then(res =>{
+        if(res.code == 200){
+            this.categories = res.data.categories;
+            this.residential = res.residential;
+            this.commercial = res.data.commercial;
+            console.log(">>>>>>>>>", res.data);
+            this.updateChart();
+        }
+      })
+    },
     initChart() {
       if (!this.$refs.chart) {
         return;
@@ -69,6 +85,19 @@ export default {
       if (!this.chart) {
         return;
       }
+      // 修复5: 检查数据是否有效
+      if (!this.categories.length || !this.residential.length || !this.commercial.length) {
+        console.warn("数据不完整，图表无法显示");
+        return;
+      }
+
+      // 修复6: 确保数据长度一致
+      const maxLength = Math.max(this.categories.length, this.residential.length, this.commercial.length);
+      if (this.categories.length !== maxLength ||
+        this.residential.length !== maxLength ||
+        this.commercial.length !== maxLength) {
+        console.warn("数据长度不一致，可能显示异常");
+      }
       this.chart.setOption({
         grid: {
           left: 8,
@@ -90,9 +119,11 @@ export default {
         xAxis: {
           type: "category",
           data: this.categories,
+          boundaryGap: true,
           axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
           axisTick: { show: false },
           axisLabel: {
+            interval: 0,
             color: "#ffffff",
             fontSize: 11,
           },
@@ -120,7 +151,7 @@ export default {
           {
             name: "工商业用户",
             type: "bar",
-            data: this.industrial,
+            data: this.commercial,
             barWidth: 10,
             itemStyle: {
               borderRadius: [2, 2, 0, 0],