第一个页面做完了

src/components/DeviceSummary.vue

+<template>
+  <div class="device-summary">
+    <div class="left">
+      <div class="title">{{ title }}</div>
+      <img class="device-img" :src="leftImage" alt="" />
+    </div>
+    <div class="right">
+      <div v-for="item in list" :key="item.label" class="row">
+        <div class="label">{{ item.label }}</div>
+        <div class="bar">
+          <div class="fill" :style="{ width: item.percent + '%' }"></div>
+        </div>
+        <div class="value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import leftImage from "@/assets/index/b.png";
+
+export default {
+  name: "DeviceSummary",
+  props: {
+    title: {
+      type: String,
+      default: "阀门井",
+    },
+    list: {
+      type: Array,
+      default() {
+        return [
+          { label: "在线设备", value: 230, percent: 80 },
+          { label: "离线设备", value: 30, percent: 20 },
+          { label: "报警设备", value: 3, percent: 10 },
+          { label: "故障设备", value: 3, percent: 10 },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      leftImage,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.device-summary {
+  display: flex;
+  align-items: center;
+  background: #000;
+  color: #fff;
+  font-size: 14px;
+  width: 500px;
+}
+
+.left {
+  position: relative;
+  width: 230px;
+  height: 210px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin-right: 18px;
+}
+
+.title {
+  position: absolute;
+  top: 18px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #a9ddff;
+}
+
+.device-img {
+  width: 220px;
+  height: 200px;
+  object-fit: contain;
+}
+
+.right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  background: rgba(12, 135, 220, 0.9);
+  padding: 0 10px;
+}
+
+.label {
+  width: 70px;
+  color: #e7f6ff;
+}
+
+.bar {
+  flex: 1;
+  height: 10px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: linear-gradient(90deg, #0bd6ff 0%, #27a0ff 100%);
+}
+
+.value {
+  width: 36px;
+  text-align: right;
+  font-weight: 600;
+}
+</style>

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/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">{{ 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: "整改中" },
+
+        ];
+      },
+    },
+    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: 14px;
+  overflow: hidden;
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  height: 42px;
+  background: #0b75d3;
+  font-weight: 600;
+}
+
+.body {
+  padding: 8px 0;
+  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;
+}
+
+.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: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+  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>

src/components/PressureBars.vue

+<template>
+  <div class="pressure-bars">
+    <div v-for="item in list" :key="item.label" class="row">
+      <div class="label">{{ item.label }}</div>
+      <div class="bar">
+        <div class="fill" :style="{ width: item.percent + '%' }"></div>
+      </div>
+      <div class="value">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PressureBars",
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return [
+          { label: "次高压线", value: 120, percent: 80 },
+          { label: "中压线", value: 98, percent: 60 },
+          { label: "低压线", value: 86, percent: 40 },
+        ];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pressure-bars {
+  width: 100%;
+  background: #000;
+  color: #fff;
+  font-size: 14px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: rgba(120, 195, 255, 0.7);
+}
+
+.row + .row {
+  margin-top: 8px;
+}
+
+.label {
+  width: 70px;
+  font-weight: 600;
+}
+
+.bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  margin: 0 12px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00b7ff 0%, #20e0ff 100%);
+  border-radius: 4px;
+}
+
+.value {
+  width: 36px;
+  text-align: right;
+  font-weight: 600;
+}
+</style>

src/router/index.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2026-01-04 10:50:30
+ * @LastEditTime: 2026-01-05 10:44:09
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/router/index.js
@@ -9,7 +9,8 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 // import Home from '../views/Home.vue'
-import Ind from "../views/Ind/Ind.vue";
+import Index from "../views/Index/index.vue";
+
 
 Vue.use(VueRouter);
 
@@ -17,7 +18,7 @@ const routes = [
   {
     path: "/",
     name: "Rotate",
-    component: Ind,
+    component: Index,
   },
 ];
 

src/views/Ind/Ind.vue

@@ -2,21 +2,18 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:20:39
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2025-12-24 13:31:16
+ * @LastEditTime: 2026-01-05 13:53:06
  * @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="ind"
-    :style="{
-      transform: `scale(${scaleX},${scaleX})`,
-      top: `-${((1 - scaleX) * innerHeight) / 2}px`,
-    }"
+
   >
     <img class="img" :src="bg" alt="" />
 
-    <Top />
+
     <Left />
     <Right />
     <div
@@ -46,7 +43,7 @@
               ? `scale(1.5)`
               : innerWidth < 1600
               ? `scale(1.1)`
-              : `scale(${1.8 * scaleX},${1.8 * scaleX})`,
+              : `scale(${1.63 * scaleX},${1.63 * scaleX})`,
         }"
       >
         <Rotate />
@@ -56,7 +53,6 @@
 </template>
 
 <script>
-import Top from "./components/Top.vue";
 import Left from "./components/Left.vue";
 import Right from "./components/Right.vue";
 import Rotate from "./components/Rotate.vue";
@@ -65,7 +61,7 @@ import bg from "@/assets/rotate/bg.png";
 export default {
   name: "",
   components: {
-    Top,
+
     Left,
     Right,
     Rotate,
@@ -91,19 +87,19 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.ind {
-  // width:2880px;
-  width: 1920px;
-  height: 100vh;
+// .ind {
+//   // width:2880px;
+//   width: 1920px;
+//   height: 100vh;
 
-  background: black;
-  position: relative;
-  left: 50%;
-  top: 0px;
-  // margin-left: -1440px;
-  margin-left: -960px;
-  overflow: hidden;
-}
+//   background: black;
+//   position: relative;
+//   left: 50%;
+//   top: 0px;
+//   // margin-left: -1440px;
+//   margin-left: -960px;
+//   overflow: hidden;
+// }
 .center-rotate {
   // padding-top: 240px;
   position: absolute;

src/views/Ind/components/DeviceScrollTable.vue

+<template>
+  <div class="device-scroll-table" :style="rootStyle">
+    <div class="header-row">
+      <div class="col id">设备编号</div>
+      <div class="col type">设备类型</div>
+      <div class="col date">安装时间</div>
+      <div class="col status">设备状态</div>
+    </div>
+    <div class="body" ref="body" @mouseenter="isPaused = true" @mouseleave="isPaused = false">
+      <div
+        class="scroll"
+        :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
+        :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
+      >
+        <div v-for="row in rows" :key="row.id + row.date" class="row">
+          <div class="col id">{{ row.id }}</div>
+          <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']">
+              {{ row.status }}
+            </span>
+          </div>
+        </div>
+        <template v-if="shouldScroll">
+          <div
+            v-for="(row, index) in rows"
+            :key="'clone-' + index + row.id"
+            class="row"
+          >
+            <div class="col id">{{ row.id }}</div>
+            <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']">
+                {{ row.status }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeviceScrollTable",
+  props: {
+    rows: {
+      type: Array,
+      default() {
+        return [
+          { id: "1", type: "阀门井", date: "2014-12-10", status: "正常" },
+          { id: "2", type: "调压箱", date: "2015-12-24", status: "临期" },
+          { id: "3", type: "调压箱", date: "2014-12-10", status: "正常" },
+          { id: "4", type: "阀门井", date: "2014-12-10", status: "正常" },
+          { id: "5", type: "调压箱", date: "2015-12-24", status: "临期" },
+          { id: "6", type: "调压箱", date: "2014-12-10", status: "正常" },
+          
+        ];
+      },
+    },
+    speed: {
+      type: Number,
+      default: 20,
+    },
+    height: {
+      type: Number,
+      default: 180,
+    },
+  },
+  data() {
+    return {
+      shouldScroll: false,
+      isPaused: false,
+    };
+  },
+  computed: {
+    scrollDuration() {
+      const rowsCount = this.rows.length || 1;
+      return Math.max(6, rowsCount * this.speed * 0.1);
+    },
+    rootStyle() {
+      return this.height ? { height: this.height + "px" } : { height: "100%" };
+    },
+  },
+  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;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.device-scroll-table {
+  width: 100%;
+  color: #ffffff;
+  font-size: 14px;
+  background: #000;
+  overflow: hidden;
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  height: 42px;
+  background: #0b75d3;
+  font-weight: 600;
+}
+
+.body {
+  padding: 6px 0;
+  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;
+}
+
+.scroll.is-paused {
+  animation-play-state: paused;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.col {
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.col.id {
+  width: 28%;
+}
+
+.col.type {
+  width: 24%;
+}
+
+.col.date {
+  width: 28%;
+}
+
+.col.status {
+  width: 20%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tag {
+  display: inline-block;
+  min-width: 40px;
+  text-align: center;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.tag-blue {
+  background: #1ea7ff;
+}
+
+.tag-orange {
+  background: #ff6a00;
+}
+
+@keyframes tableScroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+</style>

src/views/Ind/components/Left.vue

@@ -2,33 +2,95 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:31:30
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2025-12-24 13:32:47
+ * @LastEditTime: 2026-01-06 17:02:54
  * @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="left">
-    <div class="time">
-      <div class="l">{{ YYYY }}</div>
-      <div>{{ HHHH }}</div>
+    <div class="t">
+      <Title text="管线长度" text2="单位（公里）" />
+      <div class="gxbox">
+        <div v-for="item in itemArr" :key="item.text" class="gxbox-item">
+          <div class="num">{{ item.num }}</div>
+          <div class="text">{{ item.text }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="lb">
+      <Title text="设备统计" />
+      <div class="lba lbamt">
+        <div class="box-a">阀门井设备统计</div>
+        <div class="box-b">
+          <div class="fa">
+            <div class="faa">266</div>
+            <div class="fab">总量</div>
+            <div class="fac"></div>
+          </div>
+          <div class="fb">
+            <PressureBarChart :data="pressureData" />
+          </div>
+        </div>
+      </div>
+
+      <div class="lba">
+        <div class="box-a">调压箱统计</div>
+        <div class="box-b">
+          <div class="fa">
+            <div class="faa">1448</div>
+            <div class="fab">总量</div>
+            <div class="fac"></div>
+          </div>
+          <div class="fb">
+            <PressureBarChart :data="pressureData2" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import Title from "@/views/PubCom/title.vue";
+import PressureBarChart from "@/views/Ind/components/PressureBarChart.vue";
 export default {
   name: "",
+  components: {
+    Title,
+    PressureBarChart,
+  },
   data() {
     return {
-      YYYY: null,
-      HHHH: null,
-    };
+      itemArr: [
+        {
+          num: "3.396",
+          text: "高压",
         },
-  created() {
-    setInterval(() => {
-      this.YYYY = this.$dayjs().format("YYYY-MM-DD");
-      this.HHHH = this.$dayjs().format("HH:mm:ss");
-    });
+        {
+          num: "14.66",
+          text: "次高",
+        },
+        {
+          num: "347.866",
+          text: "中压",
+        },
+        {
+          num: "1201.94",
+          text: "低压",
+        },
+      ],
+      pressureData: [
+        { name: "次高压线", value: 120 },
+        { name: "中压线", value: 98 },
+        { name: "低压线", value: 86 },
+      ],
+      pressureData2: [
+        { name: "次高压线", value: 120 },
+        { name: "中压线", value: 98 },
+        { name: "低压线", value: 86 },
+      ],
+    };
   },
   mounted() {},
   methods: {},
@@ -36,22 +98,93 @@ export default {
 </script>
 <style lang="scss" scoped>
 .left {
-  width: 20%;
+  overflow: hidden;
+  // width: 20%;
+  width: 434px;
   top: 102px;
   bottom: 50px;
-  background: url("~@/assets/index/l.png") no-repeat center;
-  background-size: 100% 100%;
+  // background: url("~@/assets/index/l.png") no-repeat center;
+
+  // background-size: 100% 100%;
+  // border: 1px solid red;
+
   position: absolute;
-  left: 40px;
-  z-index:9999;
-  .time {
-    font-size: 28px;
-    top:-88px;
+  left: 10px;
+  z-index: 9999;
+}
+.t {
+  margin-bottom: 40px;
+}
+.gxbox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  .gxbox-item {
+    width: 90px;
+    height: 106px;
+    background: url("~@/assets/indImg/itemBg.png") no-repeat center;
+    padding-top: 5px;
+    > div {
+      color: #fff;
+      text-align: center;
+    }
+    .num {
+      font-size: 24px;
+      margin-bottom: 2px;
+    }
+    .text {
+      font-size: 14px;
+    }
+  }
+}
+.lbamt {
+  margin-top: 42px;
+}
+.lba {
+  height: 152px;
+  margin-bottom: 80px;
+  .box-a {
+    width: 172px;
+    height: 36px;
+    background: url("~@/assets/indImg/boxabg.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 36px;
+    color: #fff;
+    margin-bottom: 12px;
+  }
+  .box-b {
+    width: 100%;
+    height: 130px;
     display: flex;
-    position:absolute;
+    justify-content: space-between;
+
+    .fa {
+      width: 155px;
+      height: 124px;
       color: #fff;
-    .l{
-      margin-right:20px;
+      text-align: center;
+      padding-top: 15px;
+      .faa {
+        position: relative;
+        font-size: 30px;
+      }
+      .fab {
+        position: relative;
+        z-index: 99;
+        font-size: 20px;
+      }
+      .fac {
+        position: relative;
+        top: -55px;
+        width: 100%;
+        height: 100px;
+        background: url("~@/assets/indImg/fabg.png") no-repeat;
+      }
+    }
+    .fb {
+      flex: 1;
     }
   }
 }

src/views/Ind/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: {
+    data: {
+      type: Array,
+      default() {
+        return [
+          { name: "次高压线", value: 120 },
+          { name: "中压线", value: 98 },
+          { name: "低压线", value: 86 },
+        ];
+      },
+    },
+  },
+  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: 10,
+          right: 10,
+          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: 14,
+            },
+          },
+          {
+            type: "category",
+            data: values,
+            offset:-10,
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 14,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: values,
+            barWidth: 10,
+            barCategoryGap: 5,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(255,255,255,0)",
+              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: 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: 152px;
+  // overflow: hidden;
+  // background: red;
+}
+</style>

src/views/Ind/components/Right.vue

@@ -2,20 +2,67 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-12-20 09:31:30
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2025-12-24 13:32:56
+ * @LastEditTime: 2026-01-07 10:56:45
  * @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="right">
     <img class="imgr" :src="d" alt="" />
+    <div class="t1">
+      <Title text="事件定位" />
+      <div class="t1box">
+        <div class="b1">
+          <img class="img1" src="@/assets/indImg/rimga.png" alt="" />
+          <div>事件概况</div>
+          <img class="shu" src="@/assets/indImg/shu.png" alt="" />
+        </div>
+        <div class="b2">
+          <div class="b2t1">发生泄露报警</div>
+          <div class="b2t2">
+            <div class="dz">地址：</div>
+            <div>河北省石家庄市平山西柏坡经济开发区经开路1号</div>
+          </div>
+        </div>
+        <div class="b3">
+          <img class="img1" src="@/assets/indImg/rimgb.png" alt="" />
+          <div>点击定位</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="t2">
+      <Title text="事件定位" />
+      <div class="chars-box">
+        <UserTypeBarChartVue />
+      </div>
+    </div>
+
+    <div class="t3">
+      <Title text="设备生命周期" />
+      <div class="tab-box">
+        <Table/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import Title from "@/views/PubCom/title.vue";
+
 import d from "@/assets/index/rt.png";
+import UserTypeBarChartVue from "./UserTypeBarChart.vue";
+import Table from "@/views/Ind/components/DeviceScrollTable.vue"
+
+
 export default {
   name: "",
+  components: {
+    Title,
+    UserTypeBarChartVue,
+    Table
+
+  },
   data() {
     return {
       d,
@@ -26,15 +73,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .right {
-  width: 20%;
+  // width: 20%;
+  width: 434px;
 
   position: absolute;
   top: 102px;
   bottom: 50px;
-  background: url("~@/assets/index/r.png") no-repeat center;
-  background-size: 100% 100%;
-  right: 40px;
-  z-index:9999;
+  // background: url("~@/assets/index/r.png") no-repeat center;
+  // background-size: 100% 100%;
+  // background: red;
+  // border: 1px solid red;
+  right: 10px;
+  z-index: 9999;
 
   .imgr {
     position: absolute;
@@ -42,4 +92,76 @@ export default {
     top: -88px;
   }
 }
+.t1box {
+  width: 100%;
+  height: 120px;
+  background: url("~@/assets/indImg/t1boxbg.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 20px 0;
+  margin-top: 20px;
+  margin-bottom: 40px;
+  .b1 {
+    // display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    padding-top: 10px;
+    position: relative;
+    width: 95px;
+
+    .img1 {
+      margin-bottom: 2px;
+    }
+    .shu {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  .b2 {
+    width: 240px;
+    color: #fff;
+    padding-left: 15px;
+    .b2t1 {
+      color: #ff6464;
+      font-size: 20px;
+      margin-bottom: 4px;
+    }
+    .b2t2 {
+      display: flex;
+      font-size: 16px;
+      .dz {
+        width: 90px;
+      }
+    }
+  }
+  .b3 {
+    // padding-left:5px;
+    color: #fff;
+    padding-top: 25px;
+    text-align: center;
+  }
+}
+.t2 {
+  margin-bottom: 20px;
+  .chars-box {
+    margin-top: 20px;
+  }
+}
+.t3 {
+  display: flex;
+  flex-direction:column;
+  height: 210px;
+
+  .tab-box{
+    margin-top:20px;
+    flex:1;
+    background: red;
+    overflow: hidden;
+  }
+
+}
 </style>

src/views/Ind/components/UserTypeBarChart.vue

+<template>
+  <div ref="chart" class="user-type-bar-chart"></div>
+</template>
+
+<script>
+export default {
+  name: "UserTypeBarChart",
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return ["白芨屯", "七树庄", "王浒圳", "新罕电", "小张各庄", "欢喜庄", "李朝庄"];
+      },
+    },
+    residential: {
+      type: Array,
+      default() {
+        return [26, 34, 18, 22, 24, 28, 10];
+      },
+    },
+    industrial: {
+      type: Array,
+      default() {
+        return [18, 24, 8, 18, 20, 26, 22];
+      },
+    },
+  },
+  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: 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,
+          axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
+          axisTick: { show: false },
+          axisLabel: {
+            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.industrial,
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              color: "#42ff9d",
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-type-bar-chart {
+  width: 100%;
+  height: 200px;
+}
+</style>

src/views/Index/components/Top.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-12-20 09:31:30
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-05 10:58:43
+ * @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="top">
+    <img :src="top" alt="" />
+    <div class="time">
+      <div class="l">{{ YYYY }}</div>
+      <div>{{ HHHH }}</div>
+    </div>
+    ƒ
+  </div>
+</template>
+
+<script>
+import top from "@/assets/index/top.png";
+export default {
+  name: "",
+  data() {
+    return {
+      top,
+      YYYY: null,
+      HHHH: null,
+    };
+  },
+  created() {
+    setInterval(() => {
+      this.YYYY = this.$dayjs().format("YYYY-MM-DD");
+      this.HHHH = this.$dayjs().format("HH:mm:ss");
+    });
+  },
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.top {
+  width: 100%;
+  height: 102px;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  z-index: 99;
+}
+.time {
+  font-size: 20px;
+  top: 24px;
+  left: 48px;
+  display: flex;
+  position: absolute;
+  color: #fff;
+  z-index: 9999;
+  .l {
+    margin-right: 20px;
+  }
+}
+</style>

src/views/Index/index.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-05 10:39:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-05 10:43:52
+ * @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"
+    :style="{
+      transform: `scale(${scaleX},${scaleX})`,
+      top: `-${((1 - scaleX) * innerHeight) / 2}px`,
+    }"
+  >
+    <Top />
+    <Ind />
+  </div>
+</template>
+
+<script>
+import Top from "./components/Top.vue";
+import Ind from "@/views/Ind/Ind.vue";
+
+export default {
+  name: "",
+  components: {
+    Top,
+    Ind,
+  },
+  data() {
+    return {
+      scaleX: 1,
+      innerWidth: 0,
+      innerHeight: 0,
+    };
+  },
+  created() {
+    this.innerWidth = window.innerWidth;
+    this.innerHeight = window.innerHeight;
+    // this.scaleX = window.innerWidth / 2880;
+    this.scaleX = window.innerWidth / 1920;
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.ind {
+  // width:2880px;
+  width: 1920px;
+  height: 100vh;
+
+  background: black;
+  position: relative;
+  left: 50%;
+  top: 0px;
+  // margin-left: -1440px;
+  margin-left: -960px;
+  overflow: hidden;
+}
+</style>

src/views/PubCom/title.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-06 10:16:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-01-06 14:18:17
+ * @FilePath: /huaxindd-web/src/views/PubCom/title.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="title-wrapper">
+    <div class="t1">{{text}}</div>
+    <div class="t2">{{text2}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    text: {
+      type: String,
+      default: "",
+    },
+    text2: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.title-wrapper {
+  width: 424px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  background: url("~@/assets/pbuImg/titlebg.png") no-repeat;
+  box-sizing: border-box;
+  padding-left:165px;
+
+}
+.t1,.t2{
+  color:#fff;
+}
+.t1{
+  font-size: 22px;
+  margin-right: 10px;
+  
+}
+.t2{
+  font-size: 14px;
+}
+</style>