第二个页面完成

70b22b83 · 纪泽龙 · 7a99569c · 70b22b83 · 70b22b83 · 70b22b83
Commit 70b22b83 authored Jan 10, 2026 by 纪泽龙
14 changed files
--- a/public/index.html
+++ b/public/index.html
+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-04 10:42:29
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-09 15:21:25
+ * @FilePath: /huaxindd-web/public/index.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
+<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta charset="utf-8">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  </head>
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <body>
+  <script
-    <noscript>
+    src="https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
+  <title>
-    <div id="app"></div>
+    <%= htmlWebpackPlugin.options.title %>
-    <!-- built files will be auto injected -->
+  </title>
-  </body>
-</html>
+</head>
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+</html>
\ No newline at end of file
--- a/src/assets/ind2Img/ind2Imga.png
+++ b/src/assets/ind2Img/ind2Imga.png
--- a/src/utils/deviceIconTypeConfig.js
+++ b/src/utils/deviceIconTypeConfig.js
+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-04 09:01:34
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-09 15:29:34
+ * @FilePath: /huaxindd-web/src/utils/deviceIconTypeConfig.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+//设备类型
+export const deviceType = {
+  "regulatorBox": 1,
+  "valve": 2,
+  "station": 3,
+  "monitorDeviceAlarm": 4
+}
+//设备图标
+export const deviceIcon = {
+  // 1:  require("@/assets/indexImg/mapTyx.png"),
+  // 2:  require("@/assets/indexImg/mapFmj.png"),
+  // 3:  require("@/assets/indexImg/mapCz.png"),
+  // 4:  require("@/assets/indexImg/monitorDeviceAlarm.gif")
+}
+export const pipeColor = {
+  1: "#2EE7E7",
+  2: "#FFFFFF",
+  3: "#18FF0F",
+  4: "#DE67FA",
+  // 运行监控-巡检巡查的线条颜色
+  5: "#1890FF",
+};
--- a/src/utils/newMap.js
+++ b/src/utils/newMap.js
--- a/src/views/Ind/components/DeviceScrollTable.vue
+++ b/src/views/Ind/components/DeviceScrollTable.vue
@@ -6,7 +6,12 @@
      <div class="col date">安装时间</div>
      <div class="col status">设备状态</div>
    </div>
-    <div class="body" ref="body" @mouseenter="isPaused = true" @mouseleave="isPaused = false">
+    <div
+      class="body"
+      ref="body"
+      @mouseenter="isPaused = true"
+      @mouseleave="isPaused = false"
+    >
      <div
        class="scroll"
        :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
@@ -17,7 +22,12 @@
          <div class="col type">{{ row.type }}</div>
          <div class="col date">{{ row.date }}</div>
          <div class="col status">
-            <span :class="['tag', row.status === '正常' ? 'tag-blue' : 'tag-orange']">
+            <span
+              :class="[
+                'tag',
+                row.status === '正常' ? 'tag-blue' : 'tag-orange',
+              ]"
+            >
              {{ row.status }}
            </span>
          </div>
@@ -32,7 +42,12 @@
            <div class="col type">{{ row.type }}</div>
            <div class="col date">{{ row.date }}</div>
            <div class="col status">
-              <span :class="['tag', row.status === '正常' ? 'tag-blue' : 'tag-orange']">
+              <span
+                :class="[
+                  'tag',
+                  row.status === '正常' ? 'tag-blue' : 'tag-orange',
+                ]"
+              >
                {{ row.status }}
              </span>
            </div>
@@ -57,7 +72,6 @@ export default {
          { id: "4", type: "阀门井", date: "2014-12-10", status: "正常" },
          { id: "5", type: "调压箱", date: "2015-12-24", status: "临期" },
          { id: "6", type: "调压箱", date: "2014-12-10", status: "正常" },
        ];
      },
    },
@@ -115,7 +129,7 @@ export default {
  width: 100%;
  color: #ffffff;
  font-size: 14px;
-  background: #000;
+  // background: #000;
  overflow: hidden;
 }
@@ -123,7 +137,7 @@ export default {
  display: flex;
  align-items: center;
  height: 42px;
-  background: #0b75d3;
+  background: rgba(0, 124, 225, 0.4);
  font-weight: 600;
 }

--- a/src/views/Ind2/Ind.vue
+++ b/src/views/Ind2/Ind.vue
+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-12-20 09:20:39
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-10 10:23:10
+ * @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="ind2">
+    <div id="gao-map-index"></div>
+    <Left />
+    <Right />
+  </div>
+</template>
+<script>
+import Left from "./components/Left.vue";
+import Right from "./components/Right.vue";
+import { EditorMap } from "@/utils/newMap";
+import {
+  deviceType,
+  deviceIcon,
+  pipeColor,
+} from "@/utils/deviceIconTypeConfig";
+export default {
+  name: "",
+  components: {
+    Left,
+    Right,
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    initMap() {
+      // const path = eval(this.systemSetting.map_center);
+      this.gaoMap = new EditorMap(
+        "gao-map-index",
+        {
+          center: [118.09, 39.48],
+          // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
+          mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
+          zoom: 10.5,
+          devicePicData: deviceIcon,
+          pipeColor: pipeColor,
+        },
+        this
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+ .ind2 {
+  height: 100vh;
+  width: 100%;
+  #gao-map-index{
+    width: 100%;
+    height: 100%;
+  }
+ }
+</style>
--- a/src/views/Ind2/components/HazardOverview.vue
+++ b/src/views/Ind2/components/HazardOverview.vue
+<template>
+  <div class="hazard-overview">
+    <div ref="chart" class="hazard-ring"></div>
+    <div class="legend">
+      <div
+        v-for="item in items"
+        :key="item.name"
+        class="legend-item"
+      >
+        <span class="dot" :style="{ backgroundColor: item.color }"></span>
+        <span class="label">{{ item.name }}</span>
+        <span class="value">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HazardOverview",
+  props: {
+    items: {
+      type: Array,
+      default() {
+        return [
+          { name: "居民用户隐患", value: 3, color: "#4aa8ff" },
+          { name: "工商用户隐患", value: 2, color: "#ffb357" },
+          { name: "管线隐患", value: 4, color: "#3be6ff" },
+          { name: "其他设施", value: 3, color: "#ff4a4a" },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  computed: {
+    totalValue() {
+      return this.items.reduce((sum, item) => {
+        const value = Number(item.value) || 0;
+        return sum + value;
+      }, 0);
+    },
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  watch: {
+    items: {
+      handler() {
+        this.updateChart();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    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;
+      }
+      const data = this.items.map((item) => ({
+        name: item.name,
+        value: Number(item.value) || 0,
+      }));
+      this.chart.setOption({
+        color: this.items.map((item) => item.color),
+        title: {
+          text: String(this.totalValue),
+          subtext: "总数",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 32,
+            fontWeight: "bold",
+          },
+          subtextStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["68%", "86%"],
+            center: ["50%", "50%"],
+            startAngle: 90,
+            label: { show: false },
+            labelLine: { show: false },
+            emphasis: { scale: false },
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: "rgba(3, 16, 28, 0.9)",
+            },
+            data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.hazard-overview {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.hazard-ring {
+  width: 180px;
+  height: 180px;
+}
+.legend {
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-left: 16px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 12px;
+  background: linear-gradient(
+    90deg,
+    rgba(64, 156, 255, 0.35) 0%,
+    rgba(64, 156, 255, 0.08) 100%
+  );
+  border: 1px solid rgba(64, 156, 255, 0.5);
+  color: #ffffff;
+  box-shadow: inset 0 0 14px rgba(64, 156, 255, 0.25);
+}
+.dot {
+  width: 16px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+.label {
+  flex: 1;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.value {
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>
--- a/src/views/Ind2/components/IssueTable.vue
+++ b/src/views/Ind2/components/IssueTable.vue
+<template>
+  <div
+    class="issue-table"
+    :style="{
+      minWidth: minWidth + 'px',
+      maxHeight: maxHeight + 'px',
+      height: height ? height + 'px' : '100%',
+    }"
+  >
+    <div class="header-row">
+      <div class="col id">工单编号</div>
+      <div class="col type">类型</div>
+      <div class="col issue">整改问题</div>
+      <div class="col status">状态</div>
+    </div>
+    <div class="body" ref="body">
+      <div
+        class="scroll"
+        :class="{ 'is-scrolling': shouldScroll }"
+        :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
+      >
+        <div v-for="row in rows" :key="row.id + row.issue" class="row">
+          <div class="col id vid">{{ row.id }}</div>
+          <div class="col type">{{ row.type }}</div>
+          <div class="col issue" :title="row.issue">{{ row.issue }}</div>
+          <div class="col status">
+            <span
+              :class="[
+                'tag',
+                row.status === '整改中' ? 'tag-blue' : 'tag-orange',
+              ]"
+            >
+              {{ row.status }}
+            </span>
+          </div>
+        </div>
+        <template v-if="shouldScroll">
+          <div
+            v-for="(row, index) in rows"
+            :key="'clone-' + index + row.issue"
+            class="row"
+          >
+            <div class="col id">{{ row.id }}</div>
+            <div class="col type">{{ row.type }}</div>
+            <div class="col issue" :title="row.issue">{{ row.issue }}</div>
+            <div class="col status">
+              <span
+                :class="[
+                  'tag',
+                  row.status === '整改中' ? 'tag-blue' : 'tag-orange',
+                ]"
+              >
+                {{ row.status }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "IssueTable",
+  props: {
+    rows: {
+      type: Array,
+      default() {
+        return [
+          { id: "1", type: "阀门井", issue: "阀门井泄漏", status: "整改中" },
+          { id: "2", type: "调压箱", issue: "调压箱老化", status: "未整改" },
+          { id: "3", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "4", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "5", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "6", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "7", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "8", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "9", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "10", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "11", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "12", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "13", type: "管线", issue: "管线老化", status: "整改中" },
+          { id: "14", type: "管线", issue: "管线老化", status: "整改中" },
+        ];
+      },
+    },
+    minWidth: {
+      type: Number,
+      default: 431,
+    },
+    maxHeight: {
+      type: Number,
+      default: 525,
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    speed: {
+      type: Number,
+      default: 20,
+    },
+  },
+  data() {
+    return {
+      shouldScroll: false,
+    };
+  },
+  computed: {
+    scrollDuration() {
+      const rowsCount = this.rows.length || 1;
+      return Math.max(6, rowsCount * this.speed * 0.1);
+    },
+  },
+  mounted() {
+    this.updateScrollState();
+    window.addEventListener("resize", this.updateScrollState);
+  },
+  updated() {
+    this.updateScrollState();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.updateScrollState);
+  },
+  methods: {
+    updateScrollState() {
+      this.$nextTick(() => {
+        const body = this.$refs.body;
+        if (!body) {
+          this.shouldScroll = false;
+          return;
+        }
+        this.shouldScroll = body.scrollHeight > body.clientHeight;
+        console.log(body.scrollHeight, body.clientHeight);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.issue-table {
+  width: 100%;
+  // background: #000;
+  color: #fff;
+  font-size: 16px;
+  overflow: hidden;
+}
+.header-row {
+  display: flex;
+  align-items: center;
+  height: 52px;
+  background: rgba(0, 124, 225, 0.4);
+  font-weight: 600;
+}
+.body {
+  padding: 8px 0;
+  // padding-left: 4px;
+  height: calc(100% - 42px);
+  overflow: hidden;
+}
+.scroll {
+  display: flex;
+  flex-direction: column;
+}
+.scroll.is-scrolling {
+  animation-name: tableScroll;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.issue-table:hover .scroll.is-scrolling {
+  animation-play-state: paused;
+}
+.row {
+  display: flex;
+  align-items: center;
+  height: 34px;
+}
+.col {
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.id {
+  width: 28%;
+  text-align: left;
+}
+.vid{
+  padding-left:15px;
+}
+.type {
+  width: 18%;
+}
+.issue {
+  width: 34%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.status {
+  width: 20%;
+  display: flex;
+  justify-content: flex-end;
+  // padding-right: 14px;
+}
+.tag {
+  display: inline-block;
+  min-width: 54px;
+  text-align: center;
+  padding: 4px 8px;
+  border-radius: 2px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.tag-blue {
+  background: #1e88e5;
+}
+.tag-orange {
+  background: #e85d2a;
+}
+@keyframes tableScroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+</style>
--- a/src/views/Ind2/components/Left.vue
+++ b/src/views/Ind2/components/Left.vue
+<template>
+  <div class="left">
+    <div class="t">
+      <Title text="用户安检" />
+      <div class="btn">
+        <div
+          class="btn-item"
+          v-for="item in btnData1"
+          :key="item"
+          :class="{ active: btn1Active == item }"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="chars1">
+        <div><img src="@/assets/ind2Img/ind2Imga.png" alt="" /></div>
+        <div class="bb">
+          <div class="text">安检任务1进度</div>
+          <PressureBarChartVue />
+        </div>
+      </div>
+      <div class="chars2">
+        <UserTypeStackBarChart />
+      </div>
+    </div>
+    <div class="b">
+      <Title text="管线巡检" />
+      <div class="btn">
+        <div
+          class="btn-item"
+          v-for="item in btnData2"
+          :key="item"
+          :class="{ active: btn2Active == item }"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="text-wrapper">
+        <div v-for="item in textData" :key="item.t1">
+          <div class="text1">{{ item.t1 }}</div>
+          <div class="text2">{{ item.t2 }}</div>
+        </div>
+      </div>
+      <div class="chars3">
+        <PressureBarChart2 />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Title from "@/views/PubCom/title.vue";
+import PressureBarChartVue from "./PressureBarChart.vue";
+import PressureBarChart2 from "./PressureBarChart2.vue";
+import UserTypeStackBarChart from "./UserTypeStackBarChart.vue";
+export default {
+  name: "",
+  components: {
+    Title,
+    PressureBarChartVue,
+    UserTypeStackBarChart,
+    PressureBarChart2,
+  },
+  data() {
+    return {
+      textData: [
+        {
+          t1: "2.396",
+          t2: "高压已巡检",
+        },
+        {
+          t1: "2.396",
+          t2: "高压已巡检",
+        },
+        {
+          t1: "2.396",
+          t2: "高压已巡检",
+        },
+        {
+          t1: "2.396",
+          t2: "高压已巡检",
+        },
+      ],
+      btnData1: ["居民", "工商业"],
+      btn1Active: "居民",
+      btnData2: ["日", "季度", "年"],
+      btn2Active: "日",
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.left {
+  overflow: hidden;
+  // width: 20%;
+  width: 434px;
+  top: 102px;
+  bottom: 50px;
+  // background: url("~@/assets/index/l.png") no-repeat center;
+  // background-size: 100% 100%;
+  // border: 1px solid red;
+  position: absolute;
+  left: 10px;
+  z-index: 999999;
+}
+.btn {
+  display: flex;
+  margin-top: 15px;
+  margin-bottom: 20px;
+  .btn-item {
+    width: 71px;
+    height: 38px;
+    background: rgba(25, 151, 254, 0.098);
+    box-sizing: border-box;
+    border: 0.96px solid #10b4f5;
+    box-shadow: inset 0px 0px 13px 0px rgba(25, 151, 254, 0.61);
+    margin-right: 15px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 38px;
+    color:#fff;
+    &.active {
+      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
+      border: 1px solid #72c1ff;
+    }
+  }
+}
+.chars1 {
+  display: flex;
+  .bb {
+    flex: 1;
+    margin-bottom: 12px;
+    .text {
+      color: #fff;
+      font-size: 16px;
+      margin-bottom: 2px;
+      padding-left: 10px;
+      padding-top: 10px;
+      box-sizing: border-box;
+    }
+  }
+}
+.b {
+  margin-top: 25px;
+}
+.text-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+  .text1 {
+    font-size: 28px;
+  }
+  .text2 {
+    font-size: 16px;
+  }
+}
+</style>
--- a/src/views/Ind2/components/PressureBarChart.vue
+++ b/src/views/Ind2/components/PressureBarChart.vue
+<template>
+  <div class="chars-wrapper">
+    <!-- <div class="bg">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div> -->
+    <div ref="chart" class="pressure-bar-chart"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "PressureBarChart",
+  props: {
+    value: {
+      type: Number,
+      default: 78,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  watch: {
+    value() {
+      this.updateChart();
+    },
+    max() {
+      this.updateChart();
+    },
+  },
+  methods: {
+    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;
+      }
+      const maxValue = Math.max(this.max, 1);
+      const safeValue = Math.min(Math.max(this.value, 0), maxValue);
+      this.chart.setOption({
+        grid: {
+          left: 0,
+          right: 40,
+          top: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          max: maxValue,
+          splitLine: { show: false },
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { show: false },
+        },
+        yAxis: [
+          {
+            show: false,
+            type: "category",
+            data: [""],
+            axisTick: { show: false },
+            axisLine: { show: false },
+          },
+          {
+            // show: false,
+            type: "category",
+            data: [`${this.value}%`],
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 18,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [safeValue],
+            barWidth: 14,
+            barCategoryGap: 5,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(16, 180, 245, 0.22)",
+              borderRadius: 6,
+            },
+            itemStyle: {
+              borderRadius: [0, 6, 6, 0],
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#2f7bff" },
+                { offset: 0.6, color: "#31c3ff" },
+                { offset: 1, color: "#2ef5ff" },
+              ]),
+            },
+            label: {
+              show: false,
+              position: "right",
+              color: "#fff",
+              fontSize: 16,
+              formatter: ({ value }) => `${value}%`,
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chars-wrapper {
+  width: 100%;
+  position: relative;
+}
+.bg {
+  position: absolute;
+  width: 100%;
+  // height: 152px;
+  // display: flex;
+  // flex-direction:column;
+  // justify-content: space-between;
+  padding-top: 5px;
+  .item {
+    width: 100%;
+    height: 40px;
+    // background: rgba(130, 202, 255, 0.18);
+    background: rgba(130, 202, 255, 0.18);
+    margin-bottom: 10px;
+  }
+  // width: 100%;
+  // height: 120px;
+}
+.pressure-bar-chart {
+  position: relative;
+  // position:absolute;
+  // background: red;
+  width: 100%;
+  height: 20px;
+  // overflow: hidden;
+  // background: red;
+}
+</style>
--- a/src/views/Ind2/components/PressureBarChart2.vue
+++ b/src/views/Ind2/components/PressureBarChart2.vue
+<template>
+  <div class="chars-wrapper">
+    <!-- <div class="bg">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div> -->
+    <div ref="chart" class="pressure-bar-chart"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "PressureBarChart",
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [
+          { name: "白官屯镇", value: 90 },
+          { name: "七树庄镇", value: 78 },
+          { name: "丰登坞镇", value: 75 },
+          { name: "新军屯镇", value: 70 },
+          { name: "小张各庄镇", value: 68 },
+          { name: "欢喜庄乡", value: 65 },
+          { name: "李钊庄镇", value: 64 },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      },
+    },
+  },
+  methods: {
+    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;
+      }
+      const names = this.data.map((item) => item.name);
+      const values = this.data.map((item) => item.value);
+      const maxValue = Math.max(...values, 1);
+      this.chart.setOption({
+        grid: {
+          left: 0,
+          right: 20,
+          top: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          max: Math.ceil(maxValue * 1.25),
+          splitLine: { show: false },
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { show: false },
+        },
+        yAxis: [
+          {
+            type: "category",
+            data: names,
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 16,
+            },
+          },
+          {
+            type: "category",
+            data: values.map(item=>`${item}%`),
+            offset:20,
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 16,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: values,
+            barWidth: 14,
+            barCategoryGap: 5,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(255,255,255,0.12)",
+              borderRadius: 6,
+            },
+            itemStyle: {
+              borderRadius: [0, 6, 6, 0],
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#2ea6ff" },
+                { offset: 1, color: "#14e0ff" },
+              ]),
+            },
+            label: {
+              show: false,
+              position: "right",
+              color: "#ffffff",
+              fontSize: 14,
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chars-wrapper{
+  width: 100%;
+  position: relative;
+}
+.bg {
+  position: absolute;
+  width: 100%;
+  height: 234px;
+  // display: flex;
+  // flex-direction:column;
+  // justify-content: space-between;
+  padding-top: 5px;
+  .item {
+    width: 100%;
+    height: 40px;
+    // background: rgba(130, 202, 255, 0.18);
+    background: rgba(130, 202, 255, 0.18);
+    margin-bottom: 10px;
+  }
+  // width: 100%;
+  // height: 120px;
+}
+.pressure-bar-chart {
+  position: relative;
+  // position:absolute;
+  // background: red;
+  width: 100%;
+  height: 234px;
+  // overflow: hidden;
+  // background: red;
+}
+</style>
--- a/src/views/Ind2/components/Right.vue
+++ b/src/views/Ind2/components/Right.vue
+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-09 15:10:53
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-10 15:57:06
+ * @FilePath: /huaxindd-web/src/views/Ind2/components/Right.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="right">
+    <div class="t">
+      <Title text="隐患统计" />
+      <div class="tc">
+        <HazardOverviewVue />
+      </div>
+    </div>
+    <div class="b">
+      <Title text="设备生命周期" />
+      <div class="table">
+        <Table/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Title from "@/views/PubCom/title.vue";
+import HazardOverviewVue from "./HazardOverview.vue";
+import Table from "./IssueTable.vue"
+export default {
+  name: "",
+  components: {
+    Title,
+    HazardOverviewVue,
+    Table
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.right {
+  // width: 20%;
+  width: 434px;
+  position: absolute;
+  top: 102px;
+  bottom: 50px;
+  // background: url("~@/assets/index/r.png") no-repeat center;
+  // background-size: 100% 100%;
+  // background: red;
+  // border: 1px solid red;
+  right: 10px;
+  z-index: 9999;
+  .t {
+    // margin-top:25px;
+    .tc{
+      margin-top:25px;
+    }
+  }
+  .b{
+    margin-top:25px;
+    .table{
+      margin-top:10px;
+      width: 255px;
+      height: 500px;
+      // background: blue;
+    }
+  }
+}
+</style>
--- a/src/views/Ind2/components/UserTypeStackBarChart.vue
+++ b/src/views/Ind2/components/UserTypeStackBarChart.vue
+<template>
+  <div ref="chart" class="user-type-stack-bar-chart"></div>
+</template>
+<script>
+export default {
+  name: "UserTypeStackBarChart",
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return [
+          "白芨屯",
+          "七树庄",
+          "王浒圳",
+          "新罕电",
+          "小张各庄",
+          "欢喜庄",
+          "李朝庄",
+        ];
+      },
+    },
+    residential: {
+      type: Array,
+      default() {
+        return [22, 14, 24, 22, 26, 18, 28];
+      },
+    },
+    industrial: {
+      type: Array,
+      default() {
+        return [10, 8, 12, 10, 6, 16, 4];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    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();
+    },
+    industrial() {
+      this.updateChart();
+    },
+  },
+  methods: {
+    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: 6,
+          right: 6,
+          top: 28,
+          bottom: 0,
+          containLabel: true,
+        },
+        legend: {
+          top: 0,
+          right: 10,
+          itemWidth: 16,
+          itemHeight: 8,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: this.categories,
+          axisLine: { lineStyle: { color: "rgba(19,253,245,0.19)" } },
+          axisTick: {
+            show: true,
+            inside: true,
+            length: 1.5,
+            width:2,
+            lineStyle: { color: "#2CFFFF" },
+          },
+          axisLabel: {
+            color: "#ffffff",
+            fontSize: 11,
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: false },
+          splitLine: {
+            lineStyle: { color: "rgba(19,253,245,0.19)" },
+          },
+        },
+        series: [
+          {
+            name: "居民用户",
+            type: "bar",
+            stack: "total",
+            data: this.residential,
+            barWidth: 14,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              color: "#20c8ff",
+            },
+          },
+          {
+            name: "工商业用户",
+            type: "bar",
+            stack: "total",
+            data: this.industrial,
+            barWidth: 14,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              color: "#ff6b3d",
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user-type-stack-bar-chart {
+  width: 100%;
+  height: 200px;
+}
+</style>
--- a/src/views/Index/index.vue
+++ b/src/views/Index/index.vue
@@ -2,38 +2,40 @@
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2026-01-05 10:39:41
 * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2026-01-05 10:43:52
+ * @LastEditTime: 2026-01-09 15:34:16
 * @FilePath: /huaxindd-web/src/views/Index/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
  <div
-    class="ind"
+    class="index"
    :style="{
      transform: `scale(${scaleX},${scaleX})`,
      top: `-${((1 - scaleX) * innerHeight) / 2}px`,
    }"
  >
    <Top />
-    <Ind />
+    <component :is="currentTabComponent"></component>
+    <!-- <Ind /> -->
  </div>
 </template>
 <script>
 import Top from "./components/Top.vue";
-import Ind from "@/views/Ind/Ind.vue";
+import Ind from "@/views/Ind2/Ind.vue";
 export default {
  name: "",
  components: {
    Top,
-    Ind,
+    // Ind,
  },
  data() {
    return {
      scaleX: 1,
      innerWidth: 0,
      innerHeight: 0,
+      currentTabComponent:Ind,
    };
  },
  created() {
@@ -46,7 +48,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.ind {
+.index {
  // width:2880px;
  width: 1920px;
  height: 100vh;