add:近期调整

.env.development

@@ -14,5 +14,5 @@ VUE_APP_BASE_API = '/dev-api'
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 # 开发环境的后端接口地址
-VUE_APP_API_TARGET = http://192.168.2.14:9091
+VUE_APP_API_TARGET = http://192.168.2.16:9091
 # VUE_APP_API_TARGET = http://localhost:8080
\ No newline at end of file

package.json

@@ -57,7 +57,7 @@
     "splitpanes": "2.4.1",
     "v-scale-screen": "^1.0.0",
     "vue": "2.6.12",
-    "vue-count-to": "1.0.13",
+    "vue-count-to": "^1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-print-nb": "^1.7.5",

src/api/tyler/dlxt.js

+import request from "@/utils/request";
+
+// 发送数据格式
+export function updateSelectEleHistoryData(query) {
+  return request({
+    url: '/business/screen/ele/all',
+    method: 'get',
+    params: query,
+  })
+}
\ No newline at end of file

src/api/tyler/jst.js

+import request from "@/utils/request";
+
+// 查询提升机数据
+export function getElevatorData(query) {
+  return request({
+    url: "/business/elevator/real/query",
+    method: "get",
+    params: query,
+  });
+}
+
+// 修改水泵开关
+export function updatePumpSwitch(data) {
+  return request({
+    url: "/business/screen/dra/changePumpStatus",
+    method: "post",
+    data: data,
+  });
+}

src/api/tyler/tfxt.js

+import request from '@/utils/request'
+
+
+//空压机数据
+export function kongyajiQuery(query) {
+  return request({
+    url: '/business/screen/fan/kongyajiQuery',
+    method: 'get',
+    data: query
+  })
+}
+//空压机数据
+export function fenshanQuery(query) {
+  return request({
+    url: '/business/screen/fan/dianjiQuery',
+    method: 'get',
+    data: query
+  })
+}
+export function peakEditDra(query) {
+  return request({
+    url: '/business/peak/add',
+    method: 'post',
+    data: query
+  })
+}
+

src/assets/styles/index.scss

-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./btn.scss";
+@font-face {
+  font-family: "fangsong";
+  src: url("~@/assets/font/simfang.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "fangzhengyaoti";
+  src: url("~@/assets/font/FZYTK.TTF") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: $--font-family;
 }
 
 label {
@@ -104,7 +117,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -134,7 +148,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -145,7 +159,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
 
   .subtitle {
     font-size: 20px;

src/assets/styles/variables.scss

 // base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
 
 // 自定义暗色菜单风格
 /**
@@ -50,5 +50,9 @@ $base-sidebar-width: 200px;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
 }
+
+// 添加字体变量
+$--font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial,
+  sans-serif, "fangsong", "fangzhengyaoti";

src/components/Pool/pool.vue

+<template>
+  <canvas ref="waveCanvas" class="wave-canvas"></canvas>
+</template>
+
+<script>
+export default {
+  name: "WaveCanvas",
+  data() {
+    return {
+      animationId: null,
+      time: 0,
+      waves: [
+        {
+          height: 12,
+          speed: 0.03,
+          length: 0.05,
+          color: "rgba(0, 222, 255, 0.6)",
+          offsetY: 0,
+        },
+        {
+          height: 9,
+          speed: 0.05,
+          length: 0.055,
+          color: "rgba(0, 180, 255, 0.5)",
+          offsetY: 2,
+        },
+        {
+          height: 6,
+          speed: 0.04,
+          length: 0.056,
+          color: "rgba(0, 150, 255, 0.4)",
+          offsetY: 2,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initCanvas();
+    this.startAnimation();
+  },
+  beforeDestroy() {
+    cancelAnimationFrame(this.animationId);
+  },
+  methods: {
+    initCanvas() {
+      const canvas = this.$refs.waveCanvas;
+      canvas.width = 337;
+      canvas.height = 47;
+    },
+    drawWave() {
+      const canvas = this.$refs.waveCanvas;
+      const ctx = canvas.getContext("2d");
+      const width = canvas.width;
+      const height = canvas.height;
+
+      ctx.clearRect(0, 0, width, height);
+
+      // 绘制多层波浪
+      this.waves.forEach((wave) => {
+        ctx.beginPath();
+        ctx.moveTo(0, height);
+
+        // 创建波浪路径
+        const points = [];
+        for (let i = -20; i <= width + 20; i += 5) {
+          const x = i;
+          const y =
+            height -
+            20 +
+            wave.offsetY +
+            Math.sin(x * wave.length + this.time * wave.speed) * wave.height;
+          points.push({ x, y });
+        }
+
+        // 绘制贝塞尔曲线
+        ctx.moveTo(0, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+          const xc = (points[i].x + points[i - 1].x) / 2;
+          const yc = (points[i].y + points[i - 1].y) / 2;
+          ctx.quadraticCurveTo(points[i - 1].x, points[i - 1].y, xc, yc);
+        }
+
+        // 闭合路径
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+
+        ctx.fillStyle = wave.color;
+        ctx.fill();
+      });
+    },
+    startAnimation() {
+      const animate = () => {
+        this.time += 0.5;
+        this.drawWave();
+        this.animationId = requestAnimationFrame(animate);
+      };
+      animate();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.wave-canvas {
+  position: absolute;
+  width: 337px;
+  height: 47px;
+  overflow: hidden; // 确保内容不会溢出
+}
+</style>

src/views/Screen/index.vue

@@ -4,10 +4,6 @@
       v-if="showMenu === 0"
       style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
     ></home>
-    <psxt
-      v-if="showMenu === 3"
-      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
-    ></psxt>
 
     <v-scale-screen
       ref="scale-screen"
@@ -15,6 +11,11 @@
       height="1080"
       :fullScreen="true"
     >
+      <psxt
+        v-if="showMenu === 3"
+        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
+      ></psxt>
+
       <dlxt
         v-if="showMenu === 6"
         style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
@@ -27,6 +28,14 @@
         v-if="showMenu === 4"
         style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
       ></tsj>
+      <rydw
+        v-if="showMenu === 1"
+        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
+      ></rydw>
+      <hjjc
+        v-if="showMenu === 2"
+        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
+      ></hjjc>
       <div class="container">
         <!-- 头部 -->
         <div class="header por"></div>
@@ -89,9 +98,6 @@
           </div>
         </div>
 
-        <rydw v-if="showMenu === 1" style="pointer-events: auto"></rydw>
-        <hjjc v-if="showMenu === 2" style="pointer-events: auto"></hjjc>
-
         <!-- 底部 -->
         <!-- <div class="footer">
           </div> -->
@@ -197,7 +203,7 @@ export default {
   padding: 0 20px;
   // background-color: #08152a;
   position: relative;
-  font-family: "SimHei";
+  font-family: "fangsong";
   pointer-events: none;
   color: #fff;
 }
@@ -206,7 +212,7 @@ export default {
   width: 590px;
   height: 80px;
 
-  background: url("~@/assets/images/screen/tit.png") no-repeat center;
+  // background: url("~@/assets/images/screen/tit.png") no-repeat center;
   background-size: 100%;
   margin: 0 auto;
 }

src/views/Screen/items/dlxt.vue

@@ -3,109 +3,1127 @@
     <div class="home">
       <div id="dlxt">
         <div class="dlxt-change">
-          <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{ getSubstationName(1) }}</span>
-          <span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{ getSubstationName(2) }}</span>
+          <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{
+            statusNames[0].name
+          }}</span>
+          <span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{
+            statusNames[1].name
+          }}</span>
         </div>
-        <div class="dlxt-bg dlxt-bg1">
-          <div v-for="(status, index) in statusNames" :key="index" class="dlxt-val" :class="`dlxt-val${index + 1}`" :style="{ color: getColor(status) }">
-            ●{{ getLabel(status) }}
+        <div class="dlxt-bg dlxt-bg1" v-show="showBtn === 1">
+          <!--电柜布局-->
+          <div
+            v-for="(item, index) in dgList"
+            :key="'item1-' + index"
+            class="dlxt-tit"
+            :class="`dlxt-tit${index + 1}`"
+          >
+            <div :class="index <= 2 ? 'dlxt-dg' : 'dlxt-dg2'"></div>
+            <p>
+              <span>{{ item.dgname }}</span>
+            </p>
+            <div class="dlxt-list" :class="`dlxt-list${index + 1}`">
+              <p v-for="param in item.dataList" :key="param.name">
+                <span>{{ param.name }}</span
+                >:<span>{{ param.value }}</span
+                ><span>{{ param.unit }}</span>
+              </p>
             </div>
-          
-          <div v-for="(item, index) in eleName" :key="index" class="dlxt-tit" :class="`dlxt-tit${index + 1}`"><p>{{ item }}</p></div>
-          
-          <div v-for="(params, index) in formattedParameters" :key="index" class="dlxt-list" :class="`dlxt-list${index + 1}`">
-            <p v-for="param in params" :key="param.name">
-              <span>{{ param.name }}</span>:<span>{{ param.value }}</span><span>{{ param.unit }}</span>
+          </div>
+          <!--电表布局-->
+          <div
+            v-for="(item, index) in dbList"
+            :key="'item-' + index"
+            class="dlxt-tit-db"
+            :class="`dlxt-tit-db${index + 1}`"
+          >
+            <p>
+              <span>{{ item.dgname }}</span>
+            </p>
+            <div class="dlxt-db"></div>
+            <div class="dlxt-list" :class="`dlxt-list${index + 1}`">
+              <p v-for="param in item.dataList" :key="param.name">
+                <span>{{ param.name }}</span
+                >:<span>{{ param.value }}</span
+                ><span>{{ param.unit }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="dlxt-bg dlxt-bg2" v-show="showBtn === 2">
+          <!--电柜布局-->
+          <div
+            class="for-box"
+            :class="`pos${index + 1}`"
+            v-for="(item, index) in dgList"
+            :key="index"
+          >
+            <div class="for-box-content"></div>
+            <div class="for-box-tit">
+              <p>
+                <span>{{ item.dgname }}</span>
+              </p>
+            </div>
+            <div class="for-box-list">
+              <p v-for="param in item.dataList" :key="param.name">
+                <span>{{ param.name }}</span
+                >:<span>{{ param.value }}</span
+                ><span>{{ param.unit }}</span>
+              </p>
+            </div>
+          </div>
+          <!--电表布局-->
+          <div
+            class="for-box-db"
+            :class="`db-pos${index + 1}`"
+            v-for="(item, index) in dbList"
+            :key="index"
+          >
+            <div class="for-box-db-status">
+              <span>
+                {{ item.dgname }}
+              </span>
+            </div>
+            <div class="for-box-db-content"></div>
+            <div class="for-box-db-list">
+              <p v-for="param in item.dataList" :key="param.name">
+                <span>{{ param.name }}</span
+                >:<span>{{ param.value }}</span
+                ><span>{{ param.unit }}</span>
               </p>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { eleAll } from "@/api/tyler/screen";
-
+import { updateSelectEleHistoryData } from "@/api/tyler/dlxt";
 export default {
   name: "dlxt",
-  dicts: ['power_val'],
+  dicts: ["power_val"],
   data() {
     return {
       showBtn: 1,
       eleName: [],
-      colors: ['#20F09F', '#00FCFF', '#00C6FF'],
+      colors: [
+        {
+          status: "遥控指示",
+          color: "#20F09F",
+          icon: "icon5",
+        },
+        {
+          status: "就地指示",
+          color: "#00FCFF",
+          icon: "icon6",
+        },
+        {
+          status: "故障复位",
+          color: "#FFC411",
+          icon: "icon10",
+        },
+      ],
       eleAllData: [],
       substations: [],
       formattedParameters: [],
-      statusNames: [] // 用于存储 eleboxStatusName
+      statusNames: [
+        {
+          name: "35变电所",
+
+          dglist: [
+            {
+              status: "遥控指示",
+              dgname: "35KV进线柜",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+            {
+              status: "就地指示",
+              dgname: "35KVPT",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+            {
+              status: "故障复位",
+              dgname: "35KV主变",
+              type: "dg",
+              dataList: [
+                {
+                  name: "UA",
+                  value: "0.00KV",
+                },
+                {
+                  name: "UB",
+                  value: "0.00KV",
+                },
+                {
+                  name: "UC",
+                  value: "0.00KV",
+                },
+              ],
+            },
+            {
+              status: "遥控指示",
+              dgname: "16AH电容",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+            {
+              status: "就地指示",
+              dgname: "15AH金沙",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+            {
+              status: "故障复位",
+              dgname: "14AH金沙",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+            {
+              status: "故障复位",
+              dgname: "13AH金采",
+              type: "dg",
+              dataList: [
+                {
+                  name: "COS",
+                  value: "0.00",
+                },
+                {
+                  name: "Ep",
+                  value: "86003048kWh",
+                },
+                {
+                  name: "Eq",
+                  value: "86003048kVarh",
+                },
+              ],
+            },
+          ],
+          dblist: [
+            {
+              status: "",
+              dgname: "5AHPT计量",
+              type: "db",
+              dataList: [
+                {
+                  name: "UA",
+                  value: "0.00KV",
+                },
+                {
+                  name: "UB",
+                  value: "0.00KV",
+                },
+                {
+                  name: "UC",
+                  value: "0.00KV",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "1AH站用",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "2AH金西",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "3AH金磨Ⅰ",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "4AH金磨Ⅱ",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "6AH进线",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "7AH新金采",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "8AH金选",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "9AH金修",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "10AH金碎",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "11AH备1",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "12AH朱金",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "0.00A",
+                },
+                {
+                  name: "lc",
+                  value: "0.00A",
+                },
+                {
+                  name: "p",
+                  value: "0.0KW",
+                },
+                {
+                  name: "Q",
+                  value: "0.0KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.000",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: "小高尖开关室",
+          dglist: [
+            {
+              status: "遥控指示",
+              dgname: "1AH主电源",
+              type: "dg",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "P",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+                {
+                  name: "Eq",
+                  value: "25341000KVarh",
+                },
+              ],
+            },
+            {
+              status: "就地指示",
+              dgname: "10AH双电源",
+              type: "dg",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "P",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+                {
+                  name: "Eq",
+                  value: "25341000KVarh",
+                },
+              ],
+            },
+            {
+              status: "故障复位",
+              dgname: "15AH金银联",
+              type: "dg",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "P",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+                {
+                  name: "Eq",
+                  value: "25341000KVarh",
+                },
+              ],
+            },
+          ],
+          dblist: [
+            {
+              status: "",
+              dgname: "2AHPT计量",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "3AH二中西",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "4AH五中出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "5AH地变出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "6AH备用出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "7AH电容出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "8AH备用出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "9AH备用1",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "11AH备用2",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "12AH二中东",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "13AH卷扬出",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+            {
+              status: "",
+              dgname: "14AH原风变",
+              type: "db",
+              dataList: [
+                {
+                  name: "la",
+                  value: "64.22A",
+                },
+                {
+                  name: "lc",
+                  value: "63.53A",
+                },
+                {
+                  name: "p",
+                  value: "1107.20KW",
+                },
+                {
+                  name: "Q",
+                  value: "288.00KVAR",
+                },
+                {
+                  name: "COS",
+                  value: "0.972",
+                },
+                {
+                  name: "EP",
+                  value: "53879640KWh",
+                },
+              ],
+            },
+          ],
+        },
+      ], // 用于存储 eleboxStatusName
+
+      dgList: [],
+      dbList: [],
     };
   },
   created() {
-    this.eleAllList();
+    this.init();
   },
   methods: {
-    changeBtn(val) {
-      this.showBtn = val;
-      const substation = this.substations.find(s => s.index === val);
-      if (substation) {
-        this.eleName = substation.eleNames;
-        this.formattedParameters = substation.parameters;
-        this.statusNames = substation.statusNames;
-      }
-    },
-    getSubstationName(val) {
-      const substation = this.substations.find(s => s.index === val);
-      return substation ? substation.name : 'XX变电站';
-    },
-    getLabel(value) {
-      const item = this.dict.type.power_val.find(item => item.value === value);
-      return item ? item.label : '暂无数据';
-    },
-    getColor(value) {
-      const index = this.dict.type.power_val.findIndex(item => item.value === value);
-      return index !== -1 && this.colors[index] ? this.colors[index] : '#fff'; 
-    },
-    eleAllList() {
-      eleAll().then(res => {
-        this.eleAllData = res.data;
-        this.processData(res.data);
-      });
+    init() {
+      this.getdata();
+    },
+    getdata() {
+      updateSelectEleHistoryData({ name: this.statusNames[0].name }).then(
+        (res) => {
+          console.log(res);
+        }
+      );
+      this.dgList = this.statusNames[0].dglist;
+      this.dbList = this.statusNames[0].dblist;
     },
-    processData(data) {
-      this.substations = data.map((item, index) => {
-        const eleNames = item.data.eleboxNameList.map(ele => ele.eleboxName);
-        const parameters = item.data.eleboxNameList.map(ele => {
-          return ele.eleboxParameterList.map(param => ({
-            name: param.eleboxParameterName.toLowerCase(),
-            value: param.eleboxParameterValue,
-            unit: param.eleboxParameterUnits
-          }));
+    changeBtn(index) {
+      this.showBtn = index;
+      this.dgList = this.statusNames[index - 1].dglist.map((el) => {
+        const matchedColor = this.colors.find(
+          (item) => item.status === el.status
+        );
+        return {
+          ...el,
+          color: matchedColor ? matchedColor.color : "#fff", // 提供默认颜色
+          icon: matchedColor ? matchedColor.icon : "",
+        };
       });
-        const statusNames = item.data.eleboxNameList.map(ele => ele.eleboxStatusName);
-        
+      this.dbList = this.statusNames[index - 1].dblist.map((el) => {
+        const matchedColor = this.colors.find(
+          (item) => item.status === el.status
+        );
         return {
-          index: index + 1,
-          name: item.name,
-          eleNames,
-          parameters,
-          statusNames
+          ...el,
+          color: matchedColor ? matchedColor.color : "#fff", // 提供默认颜色
+          icon: matchedColor ? matchedColor.icon : "",
         };
       });
-      
-      // 默认显示第一个变电站的数据
-      if (this.substations.length > 0) {
-        this.eleName = this.substations[0].eleNames;
-        this.formattedParameters = this.substations[0].parameters;
-        this.statusNames = this.substations[0].statusNames;
-      }
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-p{margin: 0;padding: 0;}
+p {
+  margin: 0;
+  padding: 0;
+}
 .home {
   width: 100%;
   height: 100%;
@@ -114,16 +1132,17 @@ p{margin: 0;padding: 0;}
   padding-top: 160px;
   overflow: hidden;
   pointer-events: auto;
-  #dlxt{
-    .dlxt-change{
+  font-family: "fangsong";
+  #dlxt {
+    .dlxt-change {
       width: 100%;
       height: 36px;
       display: flex;
       justify-content: center;
-      color:#fff;
+      color: #fff;
       align-items: center;
       margin-bottom: 32px;
-      span{
+      span {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -131,122 +1150,374 @@ p{margin: 0;padding: 0;}
         height: 36px;
         font-size: 20px;
         font-weight: bold;
-        background-color: rgba(10, 30, 54,.5);
-        border: 1px solid #00FCFF;
+        background-color: rgba(10, 30, 54, 0.5);
+        border: 1px solid #00fcff;
         cursor: pointer;
-        &.active{
-          background: linear-gradient(0deg, #1679B6 0%, #00DEE9 100%);
-          border: 1px solid #00FCFF;
+        &.active {
+          background: linear-gradient(0deg, #1679b6 0%, #00dee9 100%);
+          border: 1px solid #00fcff;
         }
-        
       }
     }
-    .dlxt-bg{
+    .dlxt-bg {
       width: 1830px;
       height: 792px;
       margin: 0 auto;
-      background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
-      background-size: 100%;
-      color:#fff;
+
+      color: #fff;
       position: relative;
-      .dlxt-val{
+      .dlxt-tit {
         position: absolute;
-        top:100px;
+        top: 20px;
+        width: 181px;
+        padding-top: 38px;
+        .dlxt-val {
+          text-align: center;
+          i {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            margin-right: 5px;
+            margin-bottom: -1px;
           }
-      .dlxt-tit{
-        position: absolute;
-        top:270px;
-        width: 230px;
-        height: 38px;
-        background: url("~@/assets/images/screen/dlxt/title.png") no-repeat center;
+        }
+        .dlxt-dg {
+          width: 181px;
+          height: 202px;
+          background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
+          background-size: 100%;
+          margin-bottom: 10px;
+        }
+        .dlxt-dg2 {
+          width: 181px;
+          height: 202px;
+          background: url("~@/assets/images/screen/dlxt/4.png") no-repeat center;
           background-size: 100%;
-        p{
+          margin-bottom: 10px;
+        }
+
+        p {
           font-weight: bold;
           font-size: 20px;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 38px;
           text-align: center;
-          background: linear-gradient(180deg, #FFFFFF 0%, #00CBFF 100%);
+          background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
+            center;
+          background-size: 100%;
+          span {
+            background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
           }
         }
-      .dlxt-list{
-        width: 180px;
-        border: 2px solid #00CCFF;
-        padding: 13px 20px;
+        .dlxt-list {
+          border: 2px solid #00ccff;
           box-sizing: border-box;
+          padding: 10px;
+          margin-top: 5px;
+          p {
+            background: none;
+            margin: 0px;
+            padding: 0px;
+            font-weight: 400;
+            font-size: 18px;
+            color: #11e0ff;
+            line-height: 25px;
+            text-align: left;
+          }
+        }
+      }
+      .dlxt-tit-db {
         position: absolute;
-        top:340px;
-        display: flex;
-        flex-direction: column;
+        top: 560px;
+        width: 122px;
+
+        .dlxt-db {
+          width: 96px;
+          height: 123px;
+          background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
+          background-size: 100%;
+        }
+
+        p {
+          font-weight: bold;
+          font-size: 18px;
+          color: #ffc411;
+          text-align: center;
+          background-size: 100%;
+          margin-bottom: -10px;
+          margin-top: 5px;
+        }
+        .dlxt-list {
+          padding: 10px;
+          p {
+            background: none;
+            margin: 0px;
+            padding: 0px;
             font-weight: 400;
             font-size: 18px;
-        color: #11E0FF;
-        line-height: 30px;
+            color: #11e0ff;
+            text-align: left;
+          }
+        }
+      }
+      .dlxt-tit-db1 {
+        position: absolute;
+        top: 250px;
+        width: 122px;
+        height: 38px;
+        left: 730px;
+        .dlxt-val {
+          text-align: center;
         }
+        .dlxt-db {
+          width: 113px;
+          height: 133px;
+          background: url("~@/assets/images/screen/dlxt/2.png") no-repeat center;
+          background-size: 100%;
+          margin-bottom: 10px;
+          margin: auto;
         }
-    .dlxt-bg1{
-      .dlxt-val1{
-        left:190px;
+        .dlxt-list {
+          border: 2px solid #00ccff;
+          box-sizing: border-box;
+          padding: 10px;
+          margin-top: 5px;
+          p {
+            background: none;
+            margin: 0px;
+            padding: 0px;
+            font-weight: 400;
+            font-size: 18px;
+            color: #11e0ff;
+            line-height: 25px;
+            text-align: left;
           }
-      .dlxt-val2{
-        left:490px;
         }
-      .dlxt-val3{
-        left:790px;
       }
-      .dlxt-val4{
-        left:970px;
+      .dlxt-tit-db2 {
+        left: 0px;
       }
-      .dlxt-val5{
-        left:1270px;
+      .dlxt-tit-db3 {
+        left: 175px;
       }
-      .dlxt-val6{
-        left:1570px;
+      .dlxt-tit-db4 {
+        left: 350px;
       }
-
-      .dlxt-tit1{
-        left: 6px;
+      .dlxt-tit-db5 {
+        left: 524px;
       }
-      .dlxt-tit2{
-        left: 300px;
+      .dlxt-tit-db6 {
+        left: 695px;
       }
-      .dlxt-tit3{
-        left: 600px;
+      .dlxt-tit-db7 {
+        left: 865px;
       }
-      .dlxt-tit4{
-        left: 1000px;
+      .dlxt-tit-db8 {
+        left: 1035px;
       }
-      .dlxt-tit5{
-        left: 1300px;
+      .dlxt-tit-db9 {
+        left: 1205px;
       }
-      .dlxt-tit6{
-        left: 1600px;
+      .dlxt-tit-db10 {
+        left: 1375px;
       }
-      .dlxt-list1{
-        left: 30px;
+      .dlxt-tit-db11 {
+        left: 1545px;
       }
-      .dlxt-list2{
-        left: 330px;
+      .dlxt-tit-db12 {
+        left: 1715px;
+      }
+      .dlxt-tit-db13 {
+        left: 1915px;
       }
-      .dlxt-list3{
-        left: 630px;
     }
-      .dlxt-list4{
-        left: 1030px;
+    .dlxt-bg1 {
+      background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
+      background-size: 100%;
+      background-position-y: 0;
+      .dlxt-tit1 {
+        left: 6px;
+      }
+      .dlxt-tit2 {
+        left: 240px;
+      }
+      .dlxt-tit3 {
+        left: 460px;
+      }
+      .dlxt-tit4 {
+        left: 925px;
       }
-      .dlxt-list5{
-        left: 1330px;
+      .dlxt-tit5 {
+        left: 1155px;
       }
-      .dlxt-list6{
+      .dlxt-tit6 {
+        left: 1400px;
+      }
+      .dlxt-tit7 {
         left: 1630px;
       }
+    }
+    .dlxt-bg2 {
+      background: url("~@/assets/images/screen/dlxt/bg1.png") no-repeat center;
+      background-size: 100%;
+      background-position-y: 260px;
+    }
+    .for-box {
+      width: 170px;
+      position: absolute;
+      top: -10px;
+      padding-top: 25px;
+      .for-box-content {
+        width: 181px;
+        height: 202px;
+        background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
+        background-size: 100%;
+        margin-bottom: 10px;
+      }
+      .for-box-tit {
+        p {
+          font-weight: bold;
+          font-size: 20px;
+          color: #ffffff;
+          line-height: 38px;
+          text-align: center;
+          background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
+            center;
+          background-size: 100%;
+          span {
+            background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+        }
+      }
+      .for-box-list {
+        border: 2px solid #00ccff;
+        box-sizing: border-box;
+        padding: 10px;
+        margin-top: 5px;
+        position: absolute;
+        top: 25px;
+        left: 200px;
+        p {
+          background: none;
+          margin: 0px;
+          padding: 0px;
+          font-weight: 400;
+          font-size: 18px;
+          color: #11e0ff;
+          line-height: 25px;
+          text-align: left;
+        }
+      }
+      &.pos1 {
+        left: 165px;
+      }
+      &.pos2 {
+        left: 915px;
+      }
+      &.pos3 {
+        left: 1385px;
+      }
+    }
 
-
+    .for-box-db {
+      width: 96;
+      position: absolute;
+      padding-top: 10px;
+      .for-box-db-status {
+        width: 96;
+        text-align: center;
+        font-weight: 400;
+        font-size: 18px;
+        color: #ffc411;
       }
+      .for-box-db-content {
+        width: 96px;
+        height: 123px;
+        background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
+        background-size: 100%;
+        margin: auto;
+        margin-bottom: 10px;
       }
 
+      .for-box-db-list {
+        margin-top: 5px;
+        position: absolute;
+        p {
+          background: none;
+          margin: 0px;
+          padding: 0px;
+          font-weight: 400;
+          font-size: 18px;
+          color: #11e0ff;
+          line-height: 25px;
+          text-align: left;
+        }
+      }
+      &.db-pos1 {
+        top: 320px;
+        left: 10px;
+      }
+      &.db-pos2 {
+        top: 470px;
+        left: 185px;
+      }
+      &.db-pos3 {
+        top: 320px;
+        left: 320px;
+      }
+      &.db-pos4 {
+        top: 470px;
+        left: 500px;
+      }
+      &.db-pos5 {
+        top: 320px;
+        left: 630px;
+      }
+      &.db-pos6 {
+        top: 470px;
+        left: 810px;
+      }
+      &.db-pos7 {
+        top: 320px;
+        left: 945px;
+      }
+      &.db-pos8 {
+        top: 470px;
+        left: 1120px;
+      }
+      &.db-pos9 {
+        top: 320px;
+        left: 1260px;
+      }
+      &.db-pos10 {
+        top: 470px;
+        left: 1430px;
+      }
+      &.db-pos11 {
+        top: 320px;
+        left: 1565px;
+      }
+      &.db-pos12 {
+        top: 470px;
+        left: 1740px;
+      }
+    }
+  }
+  .icon5 {
+    background: url("~@/assets/images/screen/dlxt/5.png") no-repeat center;
+    background-size: 100%;
+  }
+  .icon6 {
+    background: url("~@/assets/images/screen/dlxt/6.png") no-repeat center;
+    background-size: 100%;
+  }
+  .icon10 {
+    background: url("~@/assets/images/screen/dlxt/10.png") no-repeat center;
+    background-size: 100%;
+  }
 }
-
 </style>

src/views/Screen/items/hjjc.vue

@@ -1215,6 +1215,9 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
+  padding-top: 160px;
+  background: url("~@/assets/images/screen/bg12.png");
+  color: #fff;
 }
 .histrybox {
   width: 100%;
@@ -1360,6 +1363,7 @@ export default {
     height: 46px;
     background: url("~@/assets/images/screen/title1.png") no-repeat center;
     font-weight: bold;
+    font-family: "fangsong";
     span {
       position: absolute;
       top: -10px;
@@ -1424,6 +1428,7 @@ export default {
       width: 100%;
       height: 100%;
       overflow: hidden;
+      font-family: "fangzhengyaoti";
       ul {
         list-style: none;
         margin: 0 auto;
@@ -1523,6 +1528,7 @@ export default {
         color: #fdfeff;
         font-size: 16px;
         font-weight: 500;
+        font-family: "fangzhengyaoti";
       }
     }
   }
@@ -1542,6 +1548,7 @@ export default {
     // display: flex;
     // justify-content: space-around;
     // align-items: center;
+    font-family: "fangzhengyaoti";
     span {
       float: left;
       margin-left: 25px;

src/views/Screen/items/home.vue

@@ -16,36 +16,36 @@ export default {
           latitude: 32.54745665190039,
           height: 70,
           des: {
-            name: '指挥中心',
-            height: 300
-          }
+            name: "指挥中心",
+            height: 300,
+          },
         },
         {
           longitude: 113.42852104976393,
           latitude: 32.54756929901858,
           height: 35,
           des: {
-            name: '交电所',
-            height: 100
-          }
+            name: "交电所",
+            height: 100,
+          },
         },
         {
           longitude: 113.42927005190415,
           latitude: 32.5467314676447,
           height: 40,
           des: {
-            name: '西矿厂',
-            height: 300
-          }
+            name: "西矿厂",
+            height: 300,
+          },
         },
         {
           longitude: 113.43050560273339,
           latitude: 32.544308886167876,
           height: 40,
           des: {
-            name: '办公楼',
-            height: 300
-          }
+            name: "办公楼",
+            height: 300,
+          },
         },
       ],
     };
@@ -71,18 +71,38 @@ export default {
       this.viewer.cesiumWidget.creditContainer.style.display = "none";
 
       // 加载3D Tileset
-      Cesium.Cesium3DTileset.fromUrl("/terra_b3dms/tileset.json")
+      Cesium.Cesium3DTileset.fromUrl(
+        "http://localhost:80/terra_b3dms_yd/tileset.json",
+        {
+          maximumScreenSpaceError: 1,
+          pickable: true,
+        }
+      )
         .then((tileset) => {
           this.tileset = tileset; // 存储tileset供后续使用
           this.viewer.scene.primitives.add(tileset);
 
           // 调整模型高度
-          var heightOffset = -330.0;
+          var heightOffset = 0;
           var boundingSphere = tileset.boundingSphere;
-          var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
-          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
-          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightOffset);
-          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+          var cartographic = Cesium.Cartographic.fromCartesian(
+            boundingSphere.center
+          );
+          var surface = Cesium.Cartesian3.fromRadians(
+            cartographic.longitude,
+            cartographic.latitude,
+            0.0
+          );
+          var offset = Cesium.Cartesian3.fromRadians(
+            cartographic.longitude,
+            cartographic.latitude,
+            cartographic.height + heightOffset
+          );
+          var translation = Cesium.Cartesian3.subtract(
+            offset,
+            surface,
+            new Cesium.Cartesian3()
+          );
           tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 
           // 开启地形深度检测
@@ -98,7 +118,9 @@ export default {
         });
 
       // 监听鼠标点击事件
-      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+      const handler = new Cesium.ScreenSpaceEventHandler(
+        this.viewer.scene.canvas
+      );
       handler.setInputAction((movement) => {
         this.pickPosition(movement.position);
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -107,7 +129,7 @@ export default {
   methods: {
     // 添加所有标记点
     addMarkers() {
-      this.markerList.forEach(marker => {
+      this.markerList.forEach((marker) => {
         this.addCustomPoint(marker);
       });
     },
@@ -122,38 +144,44 @@ export default {
 
       // 创建描述信息HTML
       let des = '<table class="cesium-infoBox-defaultTable"><tbody>';
-      Object.keys(pointInfo.des).forEach(key => {
+      Object.keys(pointInfo.des).forEach((key) => {
         des += `<tr><th>${key}</th><td>${pointInfo.des[key]}</td></tr>`;
       });
-      des += '</tbody></table>';
+      des += "</tbody></table>";
 
       // 添加实体
       const entity = this.viewer.entities.add({
         position: position,
         billboard: {
           // image: Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png'),
-          image: '/img/location.png',
+          image: "/img/location.png",
           width: 26,
           height: 26,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0),
-          disableDepthTestDistance:15,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+            1.0,
+            8000.0
+          ),
+          disableDepthTestDistance: 15,
           // disableDepthTestDistance: Number.POSITIVE_INFINITY
         },
         label: {
-          text: pointInfo.des.name || '监测点',
-          font: '14px Microsoft YaHei',
+          text: pointInfo.des.name || "监测点",
+          font: "14px Microsoft YaHei",
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
           outlineWidth: 2,
           verticalOrigin: Cesium.VerticalOrigin.TOP,
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0),
-          pixelOffset: new Cesium.Cartesian2(0, -60)
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+            1.0,
+            8000.0
+          ),
+          pixelOffset: new Cesium.Cartesian2(0, -60),
         },
-        name: pointInfo.des.name || '建筑物信息',
-        description: des
+        name: pointInfo.des.name || "建筑物信息",
+        description: des,
       });
 
-      console.log('添加标记点:', pointInfo.des.name);
+      console.log("添加标记点:", pointInfo.des.name);
     },
 
     // 拾取坐标点
@@ -168,15 +196,17 @@ export default {
         const latitude = Cesium.Math.toDegrees(cartographic.latitude);
         const height = cartographic.height;
 
-        console.log(`拾取的坐标点：经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`);
-      }
+        console.log(
+          `拾取的坐标点：经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`
+        );
       }
     },
+  },
   beforeDestroy() {
     if (this.viewer) {
       this.viewer.destroy();
     }
-  }
+  },
 };
 </script>
 

src/views/Screen/items/psxt.vue

@@ -18,7 +18,9 @@
             :class="['top', 'center', 'bottom'][index]"
           >
             <p class="title">
-              液体高度:{{ item | sumpFilter("heghtThreshold") }}m
+              <span v-if="item.sumpName !== '蓄水池'"
+                >液体高度: {{ item | sumpFilter("heghtThreshold") }}m</span
+              >
             </p>
             <p class="name">{{ item | sumpFilter("sumpName") }}</p>
           </div>
@@ -68,14 +70,16 @@
                       : 'dwr'
                   "
                 >
-                  <p>点击电流：{{ item.motorCurrent }}A</p>
+                  <p>电机电流：{{ item.motorCurrent }}A</p>
                   <p>电机轴承温度：{{ item.motorBearingTemp }}℃</p>
                   <p>水泵轴承温度：{{ item.pumpBearingTemp }}℃</p>
                   <p>水泵流量：{{ item.pumpFlow }}</p>
                   <p>排水管路压力：{{ item.drainagePressure }}</p>
                 </div>
               </div>
-              <p>{{ item.pumpName }}</p>
+              <p>
+                <span>{{ item.pumpName }}</span>
+              </p>
             </div>
             <div
               class="phd-left"
@@ -99,12 +103,19 @@
         </div>
       </div>
     </div>
+    <pool style="position: absolute; top: 195px; left: 793px"></pool>
+    <pool style="position: absolute; top: 580px; left: 793px"></pool>
+    <pool style="position: absolute; top: 962px; left: 795px"></pool>
   </div>
 </template>
 <script>
 import { getDraData, updatePumpSwitch } from "@/api/tyler/psxt.js";
+import pool from "@/components/Pool/pool.vue";
 export default {
   name: "psxt",
+  components: {
+    pool,
+  },
   data() {
     return {
       password: "",
@@ -126,6 +137,9 @@ export default {
   created() {
     this.initPumpList();
   },
+  mounted() {
+    this.startWaterAnimation();
+  },
   methods: {
     initPumpList() {
       getDraData().then((res) => {
@@ -192,12 +206,13 @@ export default {
   background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
   display: flex;
   justify-content: center;
-  padding-top: 155px;
+  padding-top: 185px;
+  font-family: "fangsong";
   #cesiumContainer {
     width: 1800px;
-    height: 745px;
+    height: 837px;
     background: url("~@/assets/images/screen/psxt/gd.png") no-repeat center;
-    background-size: 1800px 745px;
+    background-size: 100% 100%;
     position: relative;
     .center-title-box {
       width: 200px;
@@ -239,8 +254,8 @@ export default {
       }
       .title-box {
         text-align: center;
+
         .title {
-          font-family: Source Han Sans SC;
           font-weight: 400;
           font-size: 18px;
           color: #11e0ff;
@@ -252,13 +267,10 @@ export default {
         }
       }
       .top {
-        margin-top: -35px;
+        padding-top: 360px;
       }
       .center {
-        margin-top: 273px;
-      }
-      .bottom {
-        margin-top: 270px;
+        padding-top: 280px;
       }
     }
     .water-pump {
@@ -321,7 +333,7 @@ export default {
               center;
             position: relative;
             .tip-box {
-              width: 182px;
+              width: 192px;
               height: 136px;
               background: #0a1e36;
               border: 2px solid #00deff;
@@ -351,13 +363,22 @@ export default {
           p {
             font-weight: 400;
             font-size: 20px;
-            color: #ffffff;
             line-height: 30px;
             text-align: center;
             margin-top: 3px;
+            background: url("~@/assets/images/screen/psxt/sbmcbg.png") no-repeat
+              center;
+            span {
+              font-family: "fangzhengyaoti";
+              background: linear-gradient(180deg, #ffffff 0%, #ffd200 100%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+              text-fill-color: transparent;
+            }
           }
           .tip-box {
-            width: 182px;
+            width: 192px;
             height: 136px;
             background: #0a1e36;
             border: 2px solid #00deff;
@@ -370,6 +391,7 @@ export default {
               margin-bottom: -2px;
               text-align: left;
               font-weight: 400;
+              background: none;
             }
             &.dwr {
               position: absolute;
@@ -380,31 +402,31 @@ export default {
         }
       }
       &.pst5 {
-        top: 139px;
+        top: 169px;
         left: 143px;
       }
       &.pst6 {
-        top: 139px;
+        top: 169px;
         left: 582px;
       }
       &.pst7 {
-        top: 139px;
+        top: 169px;
         left: 1408px;
       }
       &.pst1 {
-        top: 480px;
+        top: 555px;
         left: 0px;
       }
       &.pst2 {
-        top: 480px;
+        top: 555px;
         left: 440px;
       }
       &.pst3 {
-        top: 480px;
+        top: 555px;
         left: 1188px;
       }
       &.pst4 {
-        top: 480px;
+        top: 555px;
         left: 1630px;
       }
     }
@@ -503,4 +525,18 @@ export default {
     }
   }
 }
+
+@keyframes wave {
+  0% {
+    background-position-x: 0;
+    border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
+  }
+  50% {
+    border-radius: 50% 50% 0 0 / v-bind('(waveHeight + 2) + "px"');
+  }
+  100% {
+    background-position-x: 200px;
+    border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
+  }
+}
 </style>

src/views/Screen/items/rydw.vue

@@ -884,6 +884,9 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
+  padding-top: 160px;
+  background: url("~@/assets/images/screen/bg12.png");
+  color: #fff;
 }
 
 /* 左右侧边栏 */
@@ -924,6 +927,7 @@ export default {
     height: 46px;
     background: url("~@/assets/images/screen/title1.png") no-repeat center;
     font-weight: bold;
+    font-family: "fangsong";
     span {
       position: absolute;
       top: -10px;
@@ -935,6 +939,7 @@ export default {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
+    font-family: "fangzhengyaoti";
     .sub-con-left {
       div {
         margin-top: -40px;
@@ -959,6 +964,8 @@ export default {
       }
     }
     .sub-con-right {
+      font-family: "fangzhengyaoti";
+
       div {
         width: 243px;
         height: 32px;
@@ -978,12 +985,14 @@ export default {
           align-items: center;
           justify-content: space-between;
           padding-right: 50px;
+
           span {
             font-size: 30px;
             color: #ffd929;
             text-indent: 15px;
             font-family: "number";
             margin-top: -4px;
+
             &::before {
               content: "";
               width: 6px;
@@ -1007,6 +1016,7 @@ export default {
     }
   }
 }
+
 /* 中间主区域 */
 .main-area {
   width: calc(100% - 920px);
@@ -1027,6 +1037,7 @@ export default {
   height: 14em;
 }
 .sub-con-scroll-table {
+  font-family: "fangzhengyaoti";
   width: 100%;
   height: 100%;
   margin: 0 auto;
@@ -1068,6 +1079,7 @@ export default {
   text-align: center;
 }
 .sub-con-r {
+  font-family: "fangzhengyaoti";
   width: 100%;
   display: flex;
   justify-content: flex-start; // 改为左对齐

src/views/Screen/items/tfxt.vue

@@ -17,18 +17,18 @@
         </div>
         <div class="fengji-button">本地控制</div>
         <div class="fengji-msg">
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
+          <p>电源电压：406.29V</p>
+          <p>电机电流：266.3A</p>
           <p>运行频率：100HZ</p>
-          <p>设定频率：100HZ</p>
-          <p>风压：10Kpa</p>
-          <p>风速：10m/s</p>
-          <p>风量：m3/s</p>
-          <p>前轴温：10°℃</p>
-          <p>后轴温：10°℃</p>
-          <p>电机温度：10°℃</p>
-          <p>前振动：10000mm/s</p>
-          <p>后振动：10000mm/s</p>
+          <p>设定频率：45HZ</p>
+          <p>风压：1.01KPa</p>
+          <p>风速：3.42m/s</p>
+          <p>风量：24.64m³/s</p>
+          <p>电机温度1:36.1℃</p>
+          <p>电机温度2:0℃</p>
+          <p>环境温度：36.81℃</p>
+          <p>电机振动1：5.2mm/s</p>
+          <p>电机振动2：3.29mm/s</p>
         </div>
       </div>
       <div class="arrow-psition" style="top: 132px; left: 300px">
@@ -56,9 +56,10 @@
         </div>
         <div class="fengji-button">本地控制</div>
         <div class="fengji-msg msg-postion">
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
+          <p>电源电压：390.46V</p>
+          <p>电机电流：28.10A</p>
+          <p>运行频率：49.90HZ</p>
+          <p>设定频率：49.90HZ</p>
         </div>
       </div>
       <!--地面空压机-->
@@ -68,12 +69,7 @@
       </div>
       <!--东风井风机dom-->
       <div class="fengji" style="right: 80px; top: 24px">
-        <div
-          class="fengji-title"
-          style="text-align: right; padding-right: 20px"
-        >
-          东风进风机
-        </div>
+        <div class="fengji-title" style="margin-left: 50px">东风进风机</div>
         <div class="fengji-content">
           <div class="fengji-control">
             <div class="fengji-icon"></div>
@@ -87,18 +83,18 @@
         </div>
         <div class="fengji-button" style="margin-left: 55px">本地控制</div>
         <div class="fengji-msg" style="position: absolute; right: -30px">
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
-          <p>设定频率：100HZ</p>
-          <p>风压：10Kpa</p>
-          <p>风速：10m/s</p>
-          <p>风量：m3/s</p>
-          <p>前轴温：10°℃</p>
-          <p>后轴温：10°℃</p>
-          <p>电机温度：10°℃</p>
-          <p>前振动：10000mm/s</p>
-          <p>后振动：10000mm/s</p>
+          <p>电源电压：418.00V</p>
+          <p>电机电流：126.00A</p>
+          <p>运行频率：40HZ</p>
+          <p>设定频率：40HZ</p>
+          <p>风压：0.28KPa</p>
+          <p>风速：1.31m/s</p>
+          <p>风量：9.45m³/s</p>
+          <p>电机温度1:22.9℃</p>
+          <p>电机温度2:124.8℃</p>
+          <p>环境温度：16.76℃</p>
+          <p>电机振动1：4.24mm/s</p>
+          <p>电机振动2：1.58mm/s</p>
         </div>
       </div>
       <div class="arrow-psition" style="top: 302px; left: 558px">
@@ -114,12 +110,7 @@
       </div>
       <!--二中副扇风机dom-->
       <div class="fengji" style="left: 960px; top: 247px">
-        <div
-          class="fengji-title"
-          style="text-align: right; padding-right: 20px"
-        >
-          二中副扇风机
-        </div>
+        <div class="fengji-title" style="margin-left: 50px">二中副扇风机</div>
         <div class="fengji-content">
           <div class="fengji-control">
             <div class="fengji-icon"></div>
@@ -134,11 +125,12 @@
         <div class="fengji-button" style="margin-left: 55px">本地控制</div>
         <div
           class="fengji-msg"
-          style="position: absolute; right: -190px; top: 20px"
+          style="position: absolute; right: -200px; top: 20px"
         >
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
+          <p>电源电压：381.18V</p>
+          <p>电机电流：25.20A</p>
+          <p>运行频率：49.91HZ</p>
+          <p>设定频率：49.91HZ</p>
         </div>
       </div>
       <div class="arrow-psition" style="top: 472px; left: 288px">
@@ -169,19 +161,15 @@
         </div>
         <div class="fengji-button">本地控制</div>
         <div class="fengji-msg msg-postion">
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
+          <p>电源电压：396.18V</p>
+          <p>电机电流：28.40A</p>
+          <p>运行频率：49.94HZ</p>
+          <p>设定频率：49.94HZ</p>
         </div>
       </div>
       <!--四中副扇风机dom-->
       <div class="fengji" style="left: 1260px; top: 583px">
-        <div
-          class="fengji-title"
-          style="text-align: right; padding-right: 20px"
-        >
-          四中副扇风机
-        </div>
+        <div class="fengji-title" style="margin-left: 50px">四中副扇风机</div>
         <div class="fengji-content">
           <div class="fengji-control">
             <div class="fengji-icon"></div>
@@ -196,11 +184,12 @@
         <div class="fengji-button" style="margin-left: 55px">本地控制</div>
         <div
           class="fengji-msg"
-          style="position: absolute; right: -190px; top: 20px"
+          style="position: absolute; right: -200px; top: 20px"
         >
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
+          <p>电源电压：390.50V</p>
+          <p>电机电流：33.90A</p>
+          <p>运行频率：39.92HZ</p>
+          <p>设定频率：40.00HZ</p>
         </div>
       </div>
       <div class="arrow-psition" style="top: 642px; left: 288px">
@@ -231,9 +220,10 @@
         </div>
         <div class="fengji-button">本地控制</div>
         <div class="fengji-msg msg-postion">
-          <p>电源电压：10V</p>
-          <p>电机电流：10A</p>
-          <p>运行频率：100HZ</p>
+          <p>电源电压：402.71V</p>
+          <p>电机电流：35.10A</p>
+          <p>运行频率：49.92HZ</p>
+          <p>设定频率：49.92HZ</p>
         </div>
       </div>
       <div class="arrow-psition" style="top: 812px; left: 188px">
@@ -273,6 +263,7 @@ export default {
     background: url("~@/assets/images/screen/tfxt/line.png") no-repeat center;
     background-size: 90% 95%;
     background-position-x: 50px;
+    font-family: "fangsong";
     .fengji {
       position: absolute;
       width: 195px;
@@ -282,12 +273,15 @@ export default {
         color: #ffd200;
         line-height: 30px;
         margin: 0;
-        padding-left: 5px;
+        background: url("~@/assets/images/screen/tfxt/fengjititle.png")
+          no-repeat center;
+        text-align: center;
+        width: 150px;
       }
       .fengji-content {
         display: flex;
         img {
-          width: 141px;
+          width: 149px;
           height: 141px;
           padding: 10px 18px;
         }
@@ -335,7 +329,6 @@ export default {
       .fengji-msg {
         padding: 17px;
         border: 2px solid #00ccff;
-        font-family: Source Han Sans SC;
         font-weight: 400;
         font-size: 18px;
         color: #11e0ff;
@@ -349,7 +342,7 @@ export default {
         &.msg-postion {
           position: absolute;
           top: 30px;
-          left: -180px;
+          left: -190px;
         }
       }
     }

src/views/Screen/items/tsj.vue

 <template>
   <div class="main-content">
+    <!-- 左侧数据区 -->
     <div class="left">
       <div class="item-class" v-for="item in leftList" :key="item.name">
         <i class="icon" :class="item.icon"></i>
-        <span class="item-name">{{ item.name }}</span>
+        <span class="item-name" :style="{ color: item.color }">{{
+          item.name
+        }}</span>
         <span class="item-value">{{ item.value }}</span>
       </div>
       <div class="left-botton">
         <span class="item-name">主控<br />位置</span>
-        <span class="item-value">0.00</span>
+        <span class="item-value">
+          <count-to
+            :start-val="0"
+            :end-val="Number(zgposition)"
+            :duration="860"
+            :decimals="2"
+            separator=","
+          />
+        </span>
       </div>
     </div>
+
+    <!-- 中央电梯模拟区 -->
     <div class="center">
       <div class="center-box">
-        <div class="dianti-target" style="top: 300px; left: 170px">去井口</div>
-        <div class="dianti-peizhong" style="top: 150px; left: 365px"></div>
-        <div class="dianti-box" style="top: 450px; left: 413px"></div>
+        <div class="dianti-target" :style="targetStyle">{{ displayTrend }}</div>
+        <div class="dianti-peizhong" :style="counterweightStyle"></div>
+        <div
+          class="dianti-box"
+          :class="{ active: isMoving }"
+          :style="elevatorStyle"
+        ></div>
         <div class="dianti-louceng" style="top: 290px; left: 526px">
-          <div class="louceng-item">一中</div>
-          <div class="louceng-item">二中</div>
-          <div class="louceng-item">三中</div>
-          <div class="louceng-item">四中</div>
-          <div class="louceng-item">五中</div>
+          <div
+            class="louceng-item"
+            v-for="(floor, index) in floors"
+            :key="index"
+          >
+            {{ floor }}
+          </div>
         </div>
       </div>
     </div>
+
+    <!-- 右侧状态区 -->
     <div class="right">
-      <div class="right-item-class" v-for="item in rightList" :key="item.name">
+      <div
+        class="right-item-class"
+        v-for="(item, index) in rightList"
+        :key="'right-' + index"
+      >
         <div class="left-item-box">{{ item.name }}</div>
         <div class="right-item-box">
-          <div class="right-item-box-item">{{ item.value1 }}</div>
-          <div class="right-item-box-item">{{ item.value2 }}</div>
-          <div class="right-item-box-item">{{ item.value3 }}</div>
-          <div class="right-item-box-item">{{ item.value4 }}</div>
+          <div
+            class="right-item-box-item"
+            v-for="(value, subIndex) in [
+              item.value1,
+              item.value2,
+              item.value3,
+              item.value4,
+            ]"
+            :key="'value-' + index + '-' + subIndex"
+            :class="{ active: value.status == 1 }"
+          >
+            {{ value.name }}
+          </div>
         </div>
       </div>
       <div class="right-item-botton">
         <div class="title">井下人工安全巡检</div>
         <div class="right-item-body">
           <div class="table-header">
-            <span>检查人</span>
-            <span>检查点位</span>
-            <span>是否正常</span>
-            <span>日期</span>
+            <span v-for="(header, index) in tableHeaders" :key="index">{{
+              header
+            }}</span>
           </div>
-          <div class="table-content" v-for="item in tableList" :key="item.name">
+          <div
+            class="table-content"
+            v-for="(item, index) in tableList"
+            :key="'table-' + index"
+          >
             <span>{{ item.name }}</span>
             <span>{{ item.point }}</span>
             <span>{{ item.isNormal }}</span>
@@ -57,110 +94,416 @@
 </template>
 
 <script>
+import CountTo from "vue-count-to";
+import { getElevatorData } from "@/api/tyler/jst";
+// 修改位置配置常量（添加中间点容差）
+const POSITIONS = [
+  {
+    name: "去井口",
+    value: 0,
+    depth: 0,
+    glposy: 76,
+    pzposy: 673,
+    range: [-205, 0],
+  },
+  {
+    name: "去一中",
+    value: 1,
+    depth: 410,
+    glposy: 253,
+    pzposy: 578,
+    range: [-430, -206],
+  },
+  {
+    name: "去二中",
+    value: 2,
+    depth: 450,
+    glposy: 338,
+    pzposy: 491,
+    range: [-470, -431],
+  },
+  {
+    name: "去三中",
+    value: 3,
+    depth: 490,
+    glposy: 422,
+    pzposy: 415,
+    range: [-510, -471],
+  },
+  {
+    name: "去四中",
+    value: 4,
+    depth: 530,
+    glposy: 506,
+    pzposy: 325,
+    range: [-550, -511],
+  },
+  {
+    name: "去五中",
+    value: 5,
+    depth: 570,
+    glposy: 596,
+    pzposy: 156,
+    range: [-999, -551],
+  },
+];
 export default {
-  name: "",
-  props: {},
-  components: {},
+  components: { CountTo },
   data() {
     return {
-      leftList: [
-        { icon: "icon1", name: "主控速度", value: "0.00m/s" },
-        { icon: "icon1", name: "编码器速度", value: "0.00m/s" },
-        { icon: "icon1", name: "给定速度", value: "0.00m/s" },
-        { icon: "icon1", name: "从编码器速度", value: "0.00m/s" },
-        { icon: "icon2", name: "主罐位置", value: "0.00m" },
-        { icon: "icon2", name: "位置偏差", value: "0.00m" },
-        { icon: "icon3", name: "电枢电流", value: "0.00A" },
-        { icon: "icon3", name: "磁场电流", value: "-0.08A" },
-        { icon: "icon1", name: "运行油压", value: "0.08MPa" },
+      // 数据列表
+      leftList: [],
+      rightList: [],
+      tableList: [
+        {
+          name: "zhangsan",
+          point: "123",
+          isNormal: "正常",
+          date: "2023-01-01",
+        },
       ],
-      rightList: [
+
+      // 电梯状态
+      zgposition: 0,
+      zgtrend: "待命",
+      isMoving: false,
+
+      // 动画控制
+      animationId: null,
+      timer: null,
+
+      // 位置信息
+      currentPos: null,
+      targetPos: null,
+
+      // 静态配置
+      floors: ["一中", "二中", "三中", "四中", "五中"],
+      tableHeaders: ["检查人", "检查点位", "是否正常", "日期"],
+    };
+  },
+  computed: {
+    // 电梯状态显示
+    displayTrend() {
+      return this.zgtrend.includes("待命")
+        ? `${this.zgtrend}`
+        : `前往：${this.zgtrend}`;
+    },
+    // 电梯目标样式
+    targetStyle() {
+      return {
+        top: "300px",
+        left: "170px",
+        backgroundColor: this.zgtrend.includes("待命") ? "#999" : "#fecb00",
+      };
+    },
+    // 电梯位置样式
+    elevatorStyle() {
+      return this.calculatePosition("glposy");
+    },
+    // 配重位置样式
+    counterweightStyle() {
+      return this.calculatePosition("pzposy");
+    },
+  },
+  watch: {},
+  created() {
+    this.startAutoUpdate(); // 在created中启动定时器
+  },
+  beforeDestroy() {
+    this.clearAnimation();
+    clearInterval(this.timer);
+  },
+  mounted() {
+    this.initPositions();
+    this.startAutoUpdate();
+  },
+  methods: {
+    // 初始化位置数据
+    initPositions() {
+      this.currentPos = POSITIONS[0];
+      this.targetPos = POSITIONS[0];
+    },
+
+    // 计算当前位置
+    calculatePosition(type) {
+      if (!POSITIONS.length) return { top: "450px", left: "413px" };
+
+      const currentDepth = Number(this.zgposition) || 0;
+
+      // 添加安全判断
+      const position =
+        (this.zgtrend === "待命"
+          ? this.findNearestPosition(currentDepth)
+          : this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0];
+
+      return {
+        top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值
+        left: type === "glposy" ? "413px" : "365px",
+      };
+    },
+
+    // 加强查找方法的安全性
+    findNearestPosition(depth) {
+      console.log(depth, "当前深度");
+
+      // 处理负数区间匹配
+      const rangeMatch = POSITIONS.find(
+        (p) => depth >= p.range[0] && depth <= p.range[1]
+      );
+      console.log("负数区间匹配结果:", rangeMatch?.name);
+
+      if (rangeMatch) return rangeMatch;
+      console.log("区间匹配结果:", rangeMatch?.name);
+      // 无区间匹配时找最近深度（使用原始深度值）
+      return POSITIONS.reduce(
+        (prev, curr) =>
+          Math.abs(curr.depth - Math.abs(depth)) <
+          Math.abs(prev.depth - Math.abs(depth))
+            ? curr
+            : prev,
+        POSITIONS[0]
+      );
+    },
+
+    // 查找最近楼层
+    // 统一后的查找方法
+    findNearestPosition(depth) {
+      console.log("当前深度:", depth);
+      // 优先匹配区间范围
+      const rangeMatch = POSITIONS.find(
+        (p) => depth >= p.range[0] && depth <= p.range[1]
+      );
+      console.log("区间匹配结果:", rangeMatch?.name);
+
+      if (rangeMatch) return rangeMatch;
+
+      // 无区间匹配时找最近深度
+      return POSITIONS.reduce(
+        (prev, curr) =>
+          Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth)
+            ? curr
+            : prev,
+        POSITIONS[0]
+      );
+    },
+
+    // 计算移动中的位置
+    calculateMovingPosition(type, currentDepth) {
+      const nearest = this.findNearestPosition(currentDepth);
+      // 添加位置强制更新
+      this.currentPos = nearest;
+      this.targetPos = this.targetPos;
+      const progress = Math.min(
+        1,
+        Math.abs(currentDepth - nearest.depth) /
+          Math.abs(this.targetPos.depth - nearest.depth)
+      );
+
+      return {
+        ...nearest,
+        [type]:
+          nearest[type] + (this.targetPos[type] - nearest[type]) * progress,
+      };
+    },
+
+    // 启动自动更新
+    startAutoUpdate() {
+      this.clearAnimation();
+      this.getdata();
+      this.timer = setInterval(this.getdata, 30000);
+    },
+
+    // 获取数据
+    async getdata() {
+      try {
+        const res = await getElevatorData();
+        if (res.code === 200) {
+          this.processData(res.rows[0]);
+          this.updateElevatorStatus(res.rows[0]);
+          this.moveElevator();
+        }
+      } catch (error) {
+        console.error("数据获取失败:", error);
+      }
+    },
+
+    // 处理数据更新
+    processData(data) {
+      // 左侧数据列表
+      this.leftList = [
         {
-          name: "硬件条件",
-          value1: "运行准备",
-          value2: "主风机启",
-          value3: "变流器启",
-          value4: "液压站启",
+          icon: "icon1",
+          name: "主控速度",
+          value: `${Number(data.mainSpeed).toFixed(2)}m/s`,
+          color: "#00FEEF",
         },
         {
-          name: "安全保护",
-          value1: "硬件安全",
-          value2: "软件安全",
-          value3: "操作台安全",
-          value4: "轻故障",
+          icon: "icon1",
+          name: "编码器速度",
+          value: `${Number(data.coderSpeed).toFixed(2)}m/s`,
+          color: "#00FEEF",
         },
         {
-          name: "信号方向",
-          value1: "井口信号",
-          value2: "信号继电器",
-          value3: "选择正向",
-          value4: "选择反向",
+          icon: "icon1",
+          name: "给定速度",
+          value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
+          color: "#00FEEF",
         },
         {
-          name: "闸回路",
-          value1: "手动闸",
-          value2: "工作闸",
-          value3: "全敞闸",
-          value4: "一级制动",
+          icon: "icon1",
+          name: "从编码器速度",
+          value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
+          color: "#00FEEF",
         },
         {
-          name: "开车回路",
-          value1: "选低速",
-          value2: "使能输出",
-          value3: "装置解封",
-          value4: "系统减速",
+          icon: "icon2",
+          name: "主罐位置",
+          value: `${Number(data.position).toFixed(2)}m`,
+          color: "#26DEFF",
         },
-      ],
-      tableList: [
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          icon: "icon2",
+          name: "位置偏差",
+          value: `${Number(data.locationDeviation).toFixed(2)}m`,
+          color: "#26DEFF",
         },
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          icon: "icon3",
+          name: "电枢电流",
+          value: `${Number(data.motorCurrent).toFixed(2)}A`,
+          color: "#FECB00",
         },
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          icon: "icon3",
+          name: "磁场电流",
+          value: `${Number(data.runningPressure).toFixed(2)}A`,
+          color: "#FECB00",
         },
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          icon: "icon1",
+          name: "运行油压",
+          value: `${Number(data.controlPosition).toFixed(2)}MPa`,
+          color: "#3AFF7B",
         },
+      ];
+
+      // 右侧数据列表
+      this.rightList = [
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          name: "硬件条件",
+          value1: { name: "运行准备", status: data.runPrepare },
+
+          value2: { name: "主风机启", status: data.mainFan },
+          value3: { name: "变流器启", status: data.transformer },
+          value4: {
+            name: "液压站启",
+            status: data.hydraulicStation,
+          },
         },
         {
-          name: "张三",
-          point: "中段12",
-          isNormal: "正常",
-          date: "2023-01-01",
+          name: "安全保护",
+          value1: {
+            name: "硬件安全",
+            status: data.hardwareSecurity,
           },
-      ],
+          value2: {
+            name: "软件安全",
+            status: data.hardwareSecurity,
+          },
+          value3: { name: "操作台安全", status: data.consoleSafety },
+          value4: { name: "轻故障", status: data.minorMalfunction },
+        },
+        {
+          name: "信号方向",
+          value1: { name: "井口信号", status: data.wellheadSignal },
+          value2: { name: "信号继电器", status: data.signalRelay },
+          value3: { name: "选择正向", status: data.chooseForward },
+          value4: { name: "选择反向", status: data.chooseReverse },
+        },
+        {
+          name: "闸回路",
+          value1: { name: "手动闸", status: data.manualGate },
+          value2: { name: "工作闸", status: data.workGate },
+          value3: { name: "全敞闸", status: data.openGate },
+          value4: { name: "一级制动", status: data.firstBraking },
+        },
+        {
+          name: "开车回路",
+          value1: { name: "选低速", status: data.lowSpeed },
+          value2: { name: "使能输出", status: data.enableOutput },
+          value3: { name: "装置解封", status: data.deviceUnsealed },
+          value4: { name: "系统减速", status: data.systemSlowdown },
+        },
+      ];
+
+      this.zgposition = (Number(data.position) || 0).toFixed(2);
+    },
+
+    // 更新电梯状态
+    updateElevatorStatus(data) {
+      if (!data.currentAction) {
+        const currentDepth = Number(data.position) || 0;
+        const nearest = this.findNearestPosition(currentDepth);
+
+        // 强制更新当前位置
+        this.currentPos = nearest; // 新增
+        this.targetPos = nearest; // 新增
+
+        this.zgtrend = `待命(${nearest.name})`;
+        this.isMoving = false;
+      } else {
+        this.targetPos =
+          POSITIONS.find((item) => item.value == data.currentAction) ||
+          POSITIONS[0];
+        this.zgtrend = this.targetPos.name;
+        this.isMoving = true;
+      }
+    },
+
+    // 电梯移动动画
+    moveElevator() {
+      if (!this.isMoving) return;
+      this.clearAnimation();
+
+      const startTime = Date.now();
+      const startPosition = Number(this.zgposition);
+      const targetDepth = this.targetPos.depth;
+      const distance = targetDepth - startPosition;
+      const duration = Math.abs(distance) * 10; // 根据距离计算动画时长
+
+      const animate = () => {
+        const progress = Math.min(1, (Date.now() - startTime) / duration);
+
+        // 实时更新电梯位置
+        this.zgposition = (startPosition + distance * progress).toFixed(2);
+
+        // 到达目标位置后更新状态
+        if (progress < 1) {
+          this.animationId = requestAnimationFrame(animate);
+        } else {
+          this.isMoving = false;
+          this.zgtrend = `待命(${this.targetPos.name})`;
+          this.currentPos = this.targetPos;
+        }
       };
+
+      animate();
+    },
+
+    // 清除动画
+    clearAnimation() {
+      if (this.animationId) {
+        cancelAnimationFrame(this.animationId);
+        this.animationId = null;
+      }
+    },
   },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .main-content {
+  font-family: "fangsong";
   background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
   padding-top: 100px;
   display: flex; // 新增弹性布局
@@ -179,11 +522,23 @@ export default {
         width: 50px;
         height: 50px;
         display: inline-block;
+        margin-left: 15px;
+        vertical-align: middle; // 新增垂直对齐
+        &.icon1 {
           background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
             center;
           background-size: 100% 100%;
-        margin-left: 15px;
-        vertical-align: middle; // 新增垂直对齐
+        }
+        &.icon2 {
+          background: url("~@/assets/images/screen/tsj/icon2.png") no-repeat
+            center;
+          background-size: 100% 100%;
+        }
+        &.icon3 {
+          background: url("~@/assets/images/screen/tsj/icon3.png") no-repeat
+            center;
+          background-size: 100% 100%;
+        }
       }
       .item-name {
         margin-left: 15px;
@@ -275,6 +630,7 @@ export default {
         background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
         background-size: 100% 100%;
         position: absolute;
+        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       }
       .dianti-box {
         width: 78px;
@@ -282,7 +638,31 @@ export default {
         background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
         background-size: 100% 100%;
         position: absolute;
+        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        &.active {
+          &::before {
+            content: "";
+            width: 16px;
+            height: 26px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: url("~@/assets/images/screen/tsj/icon5.png") no-repeat
+              center;
+            background-size: 100% 100%;
           }
+        }
+      }
+      .dianti-box,
+      .dianti-peizhong {
+        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+      }
+
+      .status-normal {
+        color: #00ff0d;
+      }
+
       .dianti-louceng {
         position: absolute;
         .louceng-item {
@@ -340,9 +720,12 @@ export default {
           font-size: 20px;
           color: #ffffff;
           margin: 0; // 移除原有宽度限制
-          line-height: 44px; // 垂直居中
+          line-height: 40px; // 垂直居中
           &.active {
-            background: #02dbf2;
+            background: url("~@/assets/images/screen/tsj/button.png") no-repeat
+              center;
+            background-size: 100% 100%;
+            line-height: 40px; // 垂直居中
             color: black;
           }
         }