优化两个页面

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

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:20:39
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-03-16 13:23:56
+ * @LastEditTime: 2026-03-31 17:29:45
  * @FilePath: /test-ranqi/src/views/Index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -46,7 +46,7 @@
               : `scale(${1.63 * scaleX},${1.63 * scaleX})`,
         }"
       >
-        <Rotate  @imgClick="$emit('imgClick', $event)"/>
+        <Rotate @centerClick="$emit('centerClick')"  @imgClick="$emit('imgClick', $event)"/>
       </div>
     </div>
   </div>
@@ -83,7 +83,11 @@ export default {
     // this.scaleX = window.innerWidth / 2880;
     this.scaleX = window.innerWidth / 1920;
   },
-  methods: {},
+  methods: {
+    centerClick(){
+      
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>

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

@@ -101,7 +101,7 @@ export default {
   },
   computed: {
     scrollDuration() {
-      const rowsCount = this.rows.length || 1;
+      const rowsCount = this.cycleList.length || 1;  
       return Math.max(6, rowsCount * this.speed * 0.1);
     },
     rootStyle() {

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

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:31:30
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-01-15 14:51:18
+ * @LastEditTime: 2026-04-08 10:00:21
  * @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -10,8 +10,11 @@
   <div class="right">
     <img class="imgr" :src="d" alt="" />
     <div class="t1">
-      <Title text="事件定位" />
-      <div class="t1box">
+      <Title text="工业用户统计" />
+      <div class="chars-box">
+        <UserTypeBarChartGy />
+      </div>
+      <!-- <div class="t1box">
         <div class="b1">
           <img class="img1" src="@/assets/bigwindowImg/indImg/rimga.png" alt="" />
           <div>事件概况</div>
@@ -28,11 +31,11 @@
           <img class="img1" src="@/assets/bigwindowImg/indImg/rimgb.png" alt="" />
           <div>点击定位</div>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <div class="t2">
-      <Title text="用户统计" />
+      <Title text="居民用户统计" />
       <div class="chars-box">
         <UserTypeBarChartVue />
       </div>
@@ -41,7 +44,7 @@
     <div class="t3">
       <Title text="设备生命周期" />
       <div class="tab-box">
-        <Table/>
+        <Table />
       </div>
     </div>
   </div>
@@ -52,7 +55,8 @@ 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 UserTypeBarChartGy from "./UserTypeBarChartGy.vue";
+import Table from "@/views/bigWindow/Ind/components/DeviceScrollTable.vue";
 import { listResponse } from "@/api/emergency/response";
 
 export default {
@@ -60,8 +64,8 @@ export default {
   components: {
     Title,
     UserTypeBarChartVue,
-    Table
-
+    UserTypeBarChartGy,
+    Table,
   },
   data() {
     return {
@@ -69,29 +73,29 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 1,
-        responseStatus: 0
+        responseStatus: 0,
       },
       eventInfo: {
         title: "暂无事件",
-        address: "无"
-      }
+        address: "无",
+      },
     };
   },
-  created(){
+  created() {
     this.getList();
   },
   methods: {
-    getList(){
-      listResponse(this.queryParams).then(res => {
-        if(res.code == 200 && res.rows){
+    getList() {
+      listResponse(this.queryParams).then((res) => {
+        if (res.code == 200 && res.rows) {
           //this.eventList = res.rows;
           this.eventInfo = res.rows[0];
         }
       });
     },
-    toEvent(){
-      this.$router.push("/urgent/emergency")
-    }
+    toEvent() {
+      this.$router.push("/urgent/emergency");
+    },
   },
 };
 </script>
@@ -118,7 +122,7 @@ export default {
 }
 .t1box {
   width: 100%;
-  height: 120px;
+  // height: 120px;
   background: url("~@/assets/bigwindowImg/indImg/t1boxbg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -170,23 +174,27 @@ export default {
     cursor: pointer;
   }
 }
-.t2 {
+.t2,
+.t1 {
   margin-bottom: 20px;
+  box-sizing: border-box;
+
   .chars-box {
     margin-top: 20px;
+    box-sizing: border-box;
   }
 }
 .t3 {
   display: flex;
-  flex-direction:column;
+  flex-direction: column;
   height: 210px;
 
-  .tab-box{
-    margin-top:20px;
-    flex:1;
+
+  .tab-box {
+    margin-top: 20px;
+    flex: 1;
     // background: red;
     overflow: hidden;
   }
-
 }
 </style>

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

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-16 11:10:26
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-03-16 13:24:26
+ * @LastEditTime: 2026-04-07 09:38:56
  * @FilePath: /test-ranqi/src/views/Rotate.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,7 +11,7 @@
     <div
       @mouseenter="imgScale = 1.2"
       @mouseleave="imgScale = 1"
-      @dblclick="dbclick"
+      @click="centerClick"
       class="imgcenter-shadow"
     ></div>
     <img
@@ -23,15 +23,15 @@
     <div class="out-box">
       <div
         v-for="item in imgArr"
-        :key="item.num"
+        :key="item.src"
         @mouseenter="mouseenter"
         @mouseleave="mouseleave"
         class="a"
         :style="{
-          background: `url(${item.src}) no-repeat`,
+          background: `url(${item.img}) no-repeat`,
           backgroundSsize: '100% 100%;',
         }"
-        @click="$emit('imgClick', item.num)"
+        @click="$emit('imgClick', item.src)"
       ></div>
       <!-- <div class="a"></div> -->
       <!-- 地图 -->
@@ -47,13 +47,14 @@
 <script>
 // url(${item.src}) no-repeat
 import center from "@/assets/bigwindowImg/rotate/center.png";
-import a from "@/assets/bigwindowImg/rotate/a.png";
-import b from "@/assets/bigwindowImg/rotate/b.png";
-import c from "@/assets/bigwindowImg/rotate/c.png";
-import d from "@/assets/bigwindowImg/rotate/d.png";
-import e from "@/assets/bigwindowImg/rotate/e.png";
-import f from "@/assets/bigwindowImg/rotate/f.png";
-import g from "@/assets/bigwindowImg/rotate/g.png";
+import ajxc from "@/assets/bigwindowImg/rotate/ajxc.png";
+import yhgl from "@/assets/bigwindowImg/rotate/yhgl.png";
+import kqdw from "@/assets/bigwindowImg/rotate/kqdw.png";
+import tjfx from "@/assets/bigwindowImg/rotate/tjfx.png";
+import aqgl from "@/assets/bigwindowImg/rotate/aqgl.png";
+import sbsmzq from "@/assets/bigwindowImg/rotate/sbsmzq.png";
+import yjgl from "@/assets/bigwindowImg/rotate/yjgl.png";
+import yxjc from "@/assets/bigwindowImg/rotate/yxjc.png";
 
 export default {
   name: "",
@@ -65,21 +66,24 @@ export default {
       imgScale: 1,
       clickTimer: null,
       imgArr: [
-        { src: a, num: 1 },
-        { src: b, num: 2 },
-        { src: c, num: 3 },
-        { src: d, num: 4 },
-        { src: e, num: 5 },
-        { src: f, num: 6 },
-        { src: g, num: 7 },
+        { img: ajxc, src: "/checktask/jmchacktask" },
+        { img: yhgl, src: "/danger/danger" },
+        { img: kqdw, src: "/gasinfo/in" },
+        { img: tjfx, src: "/inspectStatistics/residentstatistics" },
+        { img: aqgl, src: "/safe/meeting" },
+        { img: sbsmzq, src: "/cycle/cycle" },
+        { img: yjgl, src: "/urgent/contacts" },
+        { img: yxjc, src: "/reportinfo/gasdata" },
       ],
       center,
     };
   },
   mounted() {
+    clearInterval(this.timer);
     this.rotate();
   },
   beforeDestroy() {
+    console.log("离开")
     clearInterval(this.timer);
   },
   methods: {
@@ -110,8 +114,8 @@ export default {
       }, 10);
     },
 
-    dbclick() {
-      console.log("双击");
+    centerClick() {
+      this.$emit("centerClick");
     },
     mouseenter() {
       clearInterval(this.timer);
@@ -181,7 +185,7 @@ export default {
     height: 70px;
     width: 50px;
     z-index: 99900;
-    background: url("~@/assets/bigwindowImg/rotate/a.png") no-repeat;
+    background: url("~@/assets/bigwindowImg/rotate/ajxc.png") no-repeat;
     background-size: 100% 100% !important;
     cursor: pointer;
     // transition: all 0.1s linear;

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

@@ -138,16 +138,16 @@ export default {
               color: "#2fd6ff",
             },
           },
-          {
-            name: "工商业用户",
-            type: "bar",
-            data: this.commercial,
-            barWidth: 10,
-            itemStyle: {
-              borderRadius: [2, 2, 0, 0],
-              color: "#42ff9d",
-            },
-          },
+          // {
+          //   name: "工商业用户",
+          //   type: "bar",
+          //   data: this.commercial,
+          //   barWidth: 10,
+          //   itemStyle: {
+          //     borderRadius: [2, 2, 0, 0],
+          //     color: "#42ff9d",
+          //   },
+          // },
         ],
       });
     },
@@ -158,6 +158,7 @@ export default {
 <style lang="scss" scoped>
 .user-type-bar-chart {
   width: 100%;
-  height: 200px;
+  height: 190px;
+
 }
 </style>

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

+<template>
+  <div ref="chart" class="user-type-bar-chart"></div>
+</template>
+
+<script>
+import { userStatistic } from "@/api/screenstatistic/statistic";
+export default {
+  name: "UserTypeBarChart",
+  /*props: {
+    categories: {
+      type: Array,
+      default() {
+        return ["白芨屯", "七树庄", "王浒圳", "新罕电", "小张各庄", "欢喜庄", "李朝庄"];
+      },
+    },
+    residential: {
+      type: Array,
+      default() {
+        return [26, 34, 18, 22, 24, 28, 10];
+      },
+    },
+    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() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+/*  watch: {
+    categories() {
+      this.updateChart();
+    },
+    residential() {
+      this.updateChart();
+    },
+    commercial() {
+      this.updateChart();
+    },
+  },*/
+  methods: {
+    getUserStatistic(){
+      userStatistic().then(res =>{
+        if(res.code == 200){
+            this.categories = res.data.categories || [];
+            this.residential = Array.isArray(res.data.residential)
+              ? res.data.residential
+              : (res.data.residential || []).map(Number);
+            this.commercial =  Array.isArray(res.data.commercial)
+              ? res.data.commercial
+              : (res.data.commercial || []).map(Number);
+            this.updateChart();
+        }
+      })
+    },
+    initChart() {
+      if (!this.$refs.chart) {
+        return;
+      }
+      this.chart = this.$echarts.init(this.$refs.chart);
+      this.updateChart();
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    updateChart() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.setOption({
+        grid: {
+          left: 8,
+          right: 8,
+          top: 30,
+          bottom: 0,
+          containLabel: true,
+        },
+        legend: {
+          top: 0,
+          right: 10,
+          itemWidth: 16,
+          itemHeight: 8,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 12,
+          },
+        },
+        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,
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: false },
+          splitLine: {
+            lineStyle: { color: "rgba(255,255,255,0.2)" },
+          },
+        },
+        series: [
+          // {
+          //   name: "居民用户",
+          //   type: "bar",
+          //   data: this.residential,
+          //   barWidth: 10,
+          //   itemStyle: {
+          //     borderRadius: [2, 2, 0, 0],
+          //     color: "#2fd6ff",
+          //   },
+          // },
+          {
+            name: "工商业用户",
+            type: "bar",
+            data: this.commercial,
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              color: "#42ff9d",
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-type-bar-chart {
+  width: 100%;
+  height: 190px;
+}
+</style>

huaxin-web/src/views/bigWindow/Ind3/Ind.vue

@@ -2,18 +2,18 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:20:39
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-03-16 13:33:21
+ * @LastEditTime: 2026-04-07 10:25:15
  * @FilePath: /test-ranqi/src/views/Index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="ind3">
     <div id="gao-map-index"></div>
-    <Left />
-    <Right />
+    <!-- <Left /> -->
+    <!-- <Right /> -->
     <div  @click="$emit('imgClick', 'index')" class="backindex">返回首页概览</div>
 
-    <Bottom />
+    <Bottom @change="change"/>
   </div>
 </template>
 
@@ -60,6 +60,10 @@ export default {
         this
       );
     },
+    change(arr1,arr2){
+      console.log(arr1,arr2)
+
+    }
   },
 };
 </script>

huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2026-01-12 14:23:40
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-01-15 14:38:19
+ * @LastEditTime: 2026-04-07 10:24:39
  * @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,7 +11,7 @@
     <div class="l" v-if="left != 0" @click="left += 152"></div>
     <div
       class="r"
-      v-if="left != -(itemArr.length - 3) * 152"
+      v-if="left != -([...itemArr1,...itemArr2].length - 3) * 152"
       @click="left -= 152"
     ></div>
 
@@ -19,13 +19,30 @@
       <div class="container-scroll" :style="{ left: left + 'px' }">
         <div
           class="item"
-          :class="{ active: active == item }"
-          v-for="item in itemArr"
-          :key="item"
-          @click="active = item"
+          :class="{ active: activeArr1.indexOf(item.val) >= 0 }"
+          v-for="item in itemArr1"
+          :key="item.val"
+          @click="activeChange1(item.val)"
         >
-          <div class="text">{{ item }}</div>
-          <div class="ac" :class="{ active: active == item }"></div>
+          <div class="text">{{ item.name }}</div>
+          <div
+            class="ac"
+            :class="{ active: activeArr1.indexOf(item.val) >= 0 }"
+          ></div>
+        </div>
+
+        <div
+          class="item"
+          :class="{ active: activeArr2.indexOf(item.val) >= 0 }"
+          v-for="item in itemArr2"
+          :key="item.val"
+          @click="activeChange2(item.val)"
+        >
+          <div class="text">{{ item.name }}</div>
+          <div
+            class="ac"
+            :class="{ active: activeArr2.indexOf(item.val) >= 0 }"
+          ></div>
         </div>
       </div>
     </div>
@@ -39,11 +56,42 @@ export default {
     return {
       left: 0,
       changeW: 152,
-      itemArr: ["1", "2", "3", "4", "5", "6"],
-      active: "",
+      itemArr1: [
+        { name: "高压", val: 0 },
+        { name: "次高压", val: 1 },
+        { name: "中压", val: 2 },
+      ],
+      itemArr2: [
+        { name: "调压箱", val: 3 },
+        { name: "阀门井", val: 4 },
+        { name: "场站", val: 5 },
+        { name: "工业户", val: 6 },
+      ],
+      activeArr1: [0, 1, 2],
+      activeArr2: [],
     };
   },
-  methods: {},
+  methods: {
+    activeChange1(val) {
+      const ind = this.activeArr1.indexOf(val);
+      if (ind >= 0) {
+        this.activeArr1.splice(ind, 1);
+      } else {
+        this.activeArr1.push(val);
+      }
+      this.$emit("change", this.activeArr1, this.activeArr2);
+    },
+
+    activeChange2(val) {
+      const ind = this.activeArr2.indexOf(val);
+      if (ind >= 0) {
+        this.activeArr2.splice(ind, 1);
+      } else {
+        this.activeArr2.push(val);
+      }
+      this.$emit("change", this.activeArr1, this.activeArr2);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -56,7 +104,8 @@ export default {
   height: 50px;
   // display: flex;
   // justify-content: space-between;
-  background: url("~@/assets/bigwindowImg/ind3Img/bigBg.png") no-repeat center center;
+  background: url("~@/assets/bigwindowImg/ind3Img/bigBg.png") no-repeat center
+    center;
   display: flex;
   align-items: center;
   .l,
@@ -74,13 +123,15 @@ export default {
     left: 88px;
     width: 20px;
     height: 14px;
-    background: url("~@/assets/bigwindowImg/ind3Img/l.png") no-repeat center center;
+    background: url("~@/assets/bigwindowImg/ind3Img/l.png") no-repeat center
+      center;
   }
   .r {
     right: 88px;
     width: 20px;
     height: 14px;
-    background: url("~@/assets/bigwindowImg/ind3Img/r.png") no-repeat center center;
+    background: url("~@/assets/bigwindowImg/ind3Img/r.png") no-repeat center
+      center;
   }
   .container {
     width: 432px;
@@ -104,7 +155,8 @@ export default {
         position: relative;
         text-align: center;
         line-height: 28px;
-        background: url("~@/assets/bigwindowImg/ind3Img/boxbg.png") no-repeat center center;
+        background: url("~@/assets/bigwindowImg/ind3Img/boxbg.png") no-repeat
+          center center;
         color: #fff;
         font-size: 14px;
         cursor: pointer;
@@ -124,15 +176,14 @@ export default {
         .active {
           width: 128px;
           height: 28px;
-          background: url("~@/assets/bigwindowImg/ind3Img/active.png") no-repeat center
-            center;
+          background: url("~@/assets/bigwindowImg/ind3Img/active.png") no-repeat
+            center center;
           position: absolute;
           top: 0;
           left: 0;
           // transition: all 0.5s;
-          opacity: .8;
+          opacity: 0.8;
         }
-
       }
     }
   }

huaxin-web/src/views/bigWindow/Index/index.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2026-01-05 10:39:41
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-03-16 13:43:59
+ * @LastEditTime: 2026-04-08 10:01:45
  * @FilePath: /huaxindd-web/src/views/Index/index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -16,7 +16,11 @@
   >
     <div class="back" @click="back">跳转后台</div>
     <Top />
-    <component :is="currentTabComponent" @imgClick="imgClick"></component>
+    <component
+      :is="currentTabComponent"
+      @centerClick="centerClick"
+      @imgClick="imgClick"
+    ></component>
     <!-- <Ind /> -->
   </div>
 </template>
@@ -48,7 +52,7 @@ export default {
         4: "/urgent/emergency",
         // 周期
         5: "/cycle/cycle",
-        // 运行 
+        // 运行
         7: "/reportinfo/gasdata",
       },
     };
@@ -60,19 +64,12 @@ export default {
     this.scaleX = window.innerWidth / 1920;
   },
   methods: {
-    imgClick(num) {
-      console.log(num);
-      if (num == 2) {
-        this.currentTabComponent = Ind2;
-      } else if (num == 6) {
-        this.currentTabComponent = Ind3;
-      } else if (num == "index") {
-        this.currentTabComponent = Ind;
-      } else {
-        if (this.goPage[num]) {
-          this.$router.push(this.goPage[num]);
-        }
-      }
+    imgClick() {
+      // this.$router.push(src);
+      this.currentTabComponent =Ind;
+    },
+    centerClick() {
+      this.currentTabComponent = Ind3;
     },
     back() {
       this.$router.push("/checktask/jmchacktask");