From 9cd3d98d5e5cb18ee86a0dea73650422ef05eaf0 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 24 Dec 2024 08:59:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BD3D=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bigNumber/secondary/transformerCasing.vue | 163 +--
 src/views/bigNumber/videoList/index.vue       |  82 +-
 .../components/ModelLoading.vue               |  24 +-
 src/views/onLineMonitoring/model/index.vue    | 957 +++++++++---------
 .../children/siteAdministrationItem.vue       |   6 +-
 src/views/system/system.vue                   |  52 +-
 6 files changed, 675 insertions(+), 609 deletions(-)

diff --git a/src/views/bigNumber/secondary/transformerCasing.vue b/src/views/bigNumber/secondary/transformerCasing.vue
index d2a00ff..5ef814e 100644
--- a/src/views/bigNumber/secondary/transformerCasing.vue
+++ b/src/views/bigNumber/secondary/transformerCasing.vue
@@ -8,7 +8,15 @@
       <div class="public">
         <div class="nav">
           <ul>
-            <li v-for="(item, index) in navList1" :key="index" :class="{active:isACtive1 === index}" class="backgroundImage" @click="jump(item, index)"><span>{{ item.name }}</span></li>
+            <li
+              v-for="(item, index) in navList1"
+              :key="index"
+              :class="{ active: isACtive1 === index }"
+              class="backgroundImage"
+              @click="jump(item, index)"
+            >
+              <span>{{ item.name }}</span>
+            </li>
           </ul>
         </div>
         <div class="public-content">
@@ -25,11 +33,18 @@
       <div v-if="isACtive1 == 0" class="public">
         <div class="nav nav-long">
           <ul>
-            <li v-for="(item, index) in navList2" :key="index" :class="{active:isACtive2 === index}" class="backgroundImage"><span>{{ item.name }}</span></li>
+            <li
+              v-for="(item, index) in navList2"
+              :key="index"
+              :class="{ active: isACtive2 === index }"
+              class="backgroundImage"
+            >
+              <span>{{ item.name }}</span>
+            </li>
           </ul>
           <div class="amplification" @click="amplification">
             <p>
-              <img src="../../../assets/image/bigNumber/big.png">
+              <img src="../../../assets/image/bigNumber/big.png" />
               <span>放大</span>
             </p>
           </div>
@@ -43,134 +58,138 @@
   </div>
 </template>
 <script>
-import casingDrivepipe from '../components/secondary/casingDrivepipe'
-import thresholdCase from '../components/secondary/thresholdCase'
-import statistical from '../components/secondary/statistical'
+import casingDrivepipe from "../components/secondary/casingDrivepipe";
+import thresholdCase from "../components/secondary/thresholdCase";
+import statistical from "../components/secondary/statistical";
 export default {
   components: { casingDrivepipe, thresholdCase, statistical },
   data() {
     return {
-      titleName1: '气体（PPM）',
-      titleName2: '温度（C）',
-      statisticalId1: 'main1',
-      statisticalId2: 'main2',
-      navList1: [{
-        name: '套管报警'
-      },
-      {
-        name: '阈值'
-      }],
-      navList2: [{
-        name: '油色谱数据统计'
-      }],
+      titleName1: "气体（PPM）",
+      titleName2: "温度（C）",
+      statisticalId1: "main1",
+      statisticalId2: "main2",
+      navList1: [
+        {
+          name: "套管报警",
+        },
+        {
+          name: "阈值",
+        },
+      ],
+      navList2: [
+        {
+          name: "油色谱数据统计",
+        },
+      ],
       isACtive1: 0,
       isACtive2: 0,
       isPageList: [casingDrivepipe, thresholdCase],
       tabTit: [
-        { name: '数据', data: '#1红外设备' },
-        { name: '实际值', data: '50' },
-        { name: '阈值(℃)', data: '30' },
-        { name: '工作状态', data: '发电' },
-        { name: '安装位置', data: '#1变压器' },
-        { name: '标牌', data: '' },
-        { name: '生产厂家', data: '' },
-        { name: '投运时间', data: '2019-05-18 12' },
-        { name: '维修次数', data: '' },
-        { name: '收集时间', data: '2019-05-18 12:30:00' },
-        { name: '缺失率(%)', data: '' },
-        { name: '例行实验', data: '' }
+        { name: "数据", data: "#1红外设备" },
+        { name: "实际值", data: "50" },
+        { name: "阈值(℃)", data: "30" },
+        { name: "工作状态", data: "发电" },
+        { name: "安装位置", data: "#1变压器" },
+        { name: "标牌", data: "" },
+        { name: "生产厂家", data: "" },
+        { name: "投运时间", data: "2019-05-18 12" },
+        { name: "维修次数", data: "" },
+        { name: "收集时间", data: "2019-05-18 12:30:00" },
+        { name: "缺失率(%)", data: "" },
+        { name: "例行实验", data: "" },
       ],
       tabTitBottom: [
-        { name: '安装位置', data: '#1变压器' },
-        { name: '标牌', data: '' },
-        { name: '生产厂家', data: '' },
-        { name: '投运时间', data: '' },
-        { name: '维修次数（次/半年内）', data: '' },
-        { name: '收集时间', data: '2019-05-18 12:30:00' },
-        { name: '缺失率(%)', data: '' },
-        { name: '例行实验', data: '连接到距当前最近一次的例行实验详情页面' }
-      ]
-    }
+        { name: "安装位置", data: "#1变压器" },
+        { name: "标牌", data: "" },
+        { name: "生产厂家", data: "" },
+        { name: "投运时间", data: "" },
+        { name: "维修次数（次/半年内）", data: "" },
+        { name: "收集时间", data: "2019-05-18 12:30:00" },
+        { name: "缺失率(%)", data: "" },
+        { name: "例行实验", data: "连接到距当前最近一次的例行实验详情页面" },
+      ],
+    };
   },
   methods: {
     jump(item, index) {
-      this.isACtive1 = index
+      this.isACtive1 = index;
     },
     amplification() {
-      window.open('/#/statisticalPage')
-    }
-  }
-}
+      window.open("/#/statisticalPage");
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../assets/stylesheet/index';
-.main{
+@import "../../../assets/stylesheet/index";
+.main {
   width: 100%;
-  height: 90%;
-  padding:vw(123) vw(40) vw(60) vw(40);
+  height: 92%;
+  padding: vw(123) vw(40) vw(60) vw(40);
   position: relative;
-  .top{
+  .top {
     width: 100%;
     position: absolute;
     left: 0;
-    top:0;
-    .back{
+    top: 0;
+    .back {
       width: vw(400);
       height: vw(86);
       margin: 0 auto;
       // background-image: url('../../../assets/image/bigNumber/back.png');
     }
   }
-  .content{
+  .content {
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    .public{
+    .public {
       margin-bottom: vw(50);
-      .nav{
-        ul{
+      .nav {
+        ul {
           display: flex;
-          li{
+          li {
             display: flex;
             align-items: center;
             justify-content: center;
-            background-image: url('../../../assets/image/bigNumber/unchoose.png');
+            background-image: url("../../../assets/image/bigNumber/unchoose.png");
             width: vw(200);
             height: vw(70);
             margin-right: vw(10);
-            color: rgba(229,243,255,0.6);
+            color: rgba(229, 243, 255, 0.6);
             font-size: vw(34);
             cursor: pointer;
-            &.active{
-              background-image: url('../../../assets/image/bigNumber/choose.png');
-              color: rgba(229,243,255,1);
+            &.active {
+              background-image: url("../../../assets/image/bigNumber/choose.png");
+              color: rgba(229, 243, 255, 1);
             }
           }
         }
-        &.nav-long{
+        &.nav-long {
           display: flex;
           justify-content: space-between;
-          ul{
-            li{
+          ul {
+            li {
               width: vw(300);
             }
           }
-          .amplification{
+          .amplification {
             width: vw(180);
             height: vw(70);
             background: #fff;
-            color: #0C2050;
+            color: #0c2050;
             font-size: vw(30);
             cursor: pointer;
             padding: vw(10) vw(20);
-            p{
+            p {
               width: 100%;
               height: 100%;
-              border:1px solid rgba(12,32,80,0.5);
+              border: 1px solid rgba(12, 32, 80, 0.5);
               display: flex;
               justify-content: center;
               align-items: center;
-              img{
+              img {
                 width: vw(34);
                 height: vw(34);
               }
@@ -178,7 +197,7 @@ export default {
           }
         }
       }
-      .public-content{
+      .public-content {
         padding: vw(50) vw(108);
         background: #fff;
       }
diff --git a/src/views/bigNumber/videoList/index.vue b/src/views/bigNumber/videoList/index.vue
index 6333695..a21fcbe 100644
--- a/src/views/bigNumber/videoList/index.vue
+++ b/src/views/bigNumber/videoList/index.vue
@@ -5,7 +5,15 @@
       <div class="back" />
       <div class="nav">
         <ul>
-          <li v-for="(item, index) in navList" :key="index" :class="{active:isACtive === item.id}" class="backgroundImage" @click="jump(item, index)"><span>{{ item.name }}</span></li>
+          <li
+            v-for="(item, index) in navList"
+            :key="index"
+            :class="{ active: isACtive === item.id }"
+            class="backgroundImage"
+            @click="jump(item, index)"
+          >
+            <span>{{ item.name }}</span>
+          </li>
         </ul>
       </div>
     </div>
@@ -18,77 +26,79 @@
 export default {
   data() {
     return {
-      navList: [{
-        id: 0,
-        name: '图像数据',
-        path: '/videoList'
-      }],
-      isACtive: 0
-    }
+      navList: [
+        {
+          id: 0,
+          name: "图像数据",
+          path: "/videoList",
+        },
+      ],
+      isACtive: 0,
+    };
   },
   methods: {
     jump(item, index) {
-      this.isACtive = index
-      this.$router.push(item.path)
-    }
-  }
-}
+      this.isACtive = index;
+      this.$router.push(item.path);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../assets/stylesheet/index';
-.main{
+@import "../../../assets/stylesheet/index";
+.main {
   width: 100%;
-  height: 90%;
-  padding:vw(123) vw(40) vw(60) vw(40);
+  height: 92%;
+  padding: vw(123) vw(40) vw(60) vw(40);
   position: relative;
-  .top{
+  .top {
     width: 100%;
     position: absolute;
     left: 0;
-    top:0;
+    top: 0;
 
-    .back{
+    .back {
       width: vw(400);
       height: vw(86);
       margin: 0 auto;
       // background-image: url('../../../assets/image/bigNumber/back.png');
     }
-    .nav{
+    .nav {
       margin-top: vw(-35);
       margin-left: vw(40);
-      ul{
+      ul {
         display: flex;
-             z-index: 100;
-    padding: 0 0 vw(40) 0;
-        li{
+        z-index: 100;
+        padding: 0 0 vw(40) 0;
+        li {
           display: flex;
           align-items: center;
           justify-content: center;
-          background-image: url('../../../assets/image/bigNumber/unchoose.png');
+          background-image: url("../../../assets/image/bigNumber/unchoose.png");
           width: vw(300);
           height: vw(70);
           margin-right: vw(10);
-          color: rgba(229,243,255,0.6);
+          color: rgba(229, 243, 255, 0.6);
           font-size: vw(34);
           cursor: pointer;
-          &.active{
-            background-image: url('../../../assets/image/bigNumber/choose.png');
-            color: rgba(229,243,255,1);
+          &.active {
+            background-image: url("../../../assets/image/bigNumber/choose.png");
+            color: rgba(229, 243, 255, 1);
             border-bottom: 3px solid #cc750f;
           }
         }
       }
     }
   }
-  .content{
+  .content {
     width: 100%;
-    height:100%;
+    height: 100%;
     overflow-y: auto;
   }
 }
-@media screen and (max-width:1440px){
- .main {
-  height: 90%;
- }
+@media screen and (max-width: 1440px) {
+  .main {
+    height: 90%;
+  }
 }
 </style>
diff --git a/src/views/healthAssessment/components/ModelLoading.vue b/src/views/healthAssessment/components/ModelLoading.vue
index f6efeda..ddce6d9 100644
--- a/src/views/healthAssessment/components/ModelLoading.vue
+++ b/src/views/healthAssessment/components/ModelLoading.vue
@@ -109,7 +109,17 @@ export default {
       if (element.modelType == "211") {
         this.modelDataObj = JSON.parse(element.modelParams);
         this.modelSiteId = element;
-        this.filePath = element.filePath;
+        if (
+          window.location.hostname === "localhost" &&
+          window.location.port === "9528"
+        ) {
+          const currentUrl = "http://192.168.1.190:92";
+          this.filePath = currentUrl + element.filePath;
+        } else {
+          const currentUrl = window.location.origin;
+          this.filePath = currentUrl + element.filePath;
+        }
+        // this.filePath = element.filePath;
         break;
       }
     }
@@ -130,7 +140,17 @@ export default {
           const element = modelParameter[index];
           if (element.modelType == type) {
             this.modelDataObj = JSON.parse(element.modelParams);
-            this.filePath = element.filePath;
+            if (
+              window.location.hostname === "localhost" &&
+              window.location.port === "9528"
+            ) {
+              const currentUrl = "http://192.168.1.190:92";
+              this.filePath = currentUrl + element.filePath;
+            } else {
+              const currentUrl = window.location.origin;
+              this.filePath = currentUrl + element.filePath;
+            }
+
             break;
           }
         }
diff --git a/src/views/onLineMonitoring/model/index.vue b/src/views/onLineMonitoring/model/index.vue
index 5ab1630..dc252f7 100644
--- a/src/views/onLineMonitoring/model/index.vue
+++ b/src/views/onLineMonitoring/model/index.vue
@@ -49,8 +49,8 @@
               item.dataList.length == 1 && item.title == ''
                 ? item.dataList[0].secondTitle
                 : item.title != ''
-                  ? item.title
-                  : '实时数据展示'
+                ? item.title
+                : '实时数据展示'
             "
             placement="top"
           >
@@ -125,10 +125,10 @@
               val.picpath.length == 0 && val.http_url == ''
                 ? 'modelInfoBoxContent'
                 : val.http_url != '' && val.number < 5
-                  ? 'viewVideoData'
-                  : val.picpath.length != 0 && val.http_url == ''
-                    ? 'viewImageData'
-                    : 'modelInfoBoxContent',
+                ? 'viewVideoData'
+                : val.picpath.length != 0 && val.http_url == ''
+                ? 'viewImageData'
+                : 'modelInfoBoxContent',
             ]"
           >
             <!-- 数据项 -->
@@ -147,9 +147,8 @@
                     :content="val.secondTitle"
                     placement="top"
                   >
-                    <span
-                      v-if="item.dataList.length != 1"
-                    >{{ val.secondTitle }}
+                    <span v-if="item.dataList.length != 1"
+                      >{{ val.secondTitle }}
                     </span>
                   </el-tooltip>
                   <i
@@ -196,7 +195,7 @@
                   v-for="(imageData, i) in val.picpath"
                   :key="i.id"
                 >
-                  <img :src="imageData" alt="">
+                  <img :src="imageData" alt="" />
                 </el-carousel-item>
               </el-carousel>
             </template>
@@ -209,14 +208,14 @@
 </template>
 
 <script>
-import * as THREE from 'three'
-import flvjs from 'flv.js'
-import C3S3D from '@/utils/c3s-3d-1.0.1-e'
-import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js'
+import * as THREE from "three";
+import flvjs from "flv.js";
+import C3S3D from "@/utils/c3s-3d-1.0.1-e";
+import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
 import {
   CSS3DRenderer,
-  CSS3DObject
-} from 'three/examples/jsm/renderers/CSS3DRenderer'
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer";
 // 模型数据处理
 import {
   getDataAddress,
@@ -224,35 +223,35 @@ import {
   getDataAddressGIS,
   getDataAddressZongZhan,
   getDataAddressFDJ,
-  defaultDeviceView
-} from '../common.js'
+  defaultDeviceView,
+} from "../common.js";
 // 模型参数配置
 import {
   getTenToSixteenColor,
   getPointData,
   MODEL_ATTRIBUTE,
-  CAMERA_MOVE_DATA
-} from '@/utils/modelData.js'
+  CAMERA_MOVE_DATA,
+} from "@/utils/modelData.js";
 export default {
-  name: 'HelloWorld',
+  name: "HelloWorld",
   components: {},
   props: {
     modelType: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     selectDeviceName: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     animation: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     modelDataList: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -279,57 +278,69 @@ export default {
       filePath: null,
       deviceList: [
         {
-          name: 'byq',
-          type: '111'
+          name: "byq",
+          type: "111",
         },
         {
-          name: 'gis',
-          type: '211'
+          name: "gis",
+          type: "211",
         },
         {
-          name: 'fdj',
-          type: '611'
+          name: "fdj",
+          type: "611",
         },
         {
-          name: 'blq',
-          type: '411'
+          name: "blq",
+          type: "411",
         },
         {
-          name: 'kgg',
-          type: '311'
+          name: "kgg",
+          type: "311",
         },
         {
-          name: 'dl',
-          type: '711'
-        }
+          name: "dl",
+          type: "711",
+        },
       ],
       modelDataObj: null,
-      filePath: null
-    }
+      filePath: null,
+    };
   },
   watch: {
-    modelDataList: function(newVal, oldvVal) {
-      this.$store.dispatch('getModelData').then(() => {
-        this.geiVideoList(newVal)
+    modelDataList: function (newVal, oldvVal) {
+      this.$store.dispatch("getModelData").then(() => {
+        this.geiVideoList(newVal);
         this.$nextTick(() => {
           if (this.moveSatate) {
-            this.clickhandleitem()
-            this.updataModelData()
+            this.clickhandleitem();
+            this.updataModelData();
           }
-        })
-      })
-    }
+        });
+      });
+    },
   },
   created() {
-    const modelParameter = JSON.parse(localStorage.getItem('getModelList'))
-    console.log('00000000', modelParameter, this.modelType)
+    const modelParameter = JSON.parse(localStorage.getItem("getModelList"));
+    console.log("00000000", modelParameter, this.modelType);
     for (let index = 0; index < modelParameter.length; index++) {
-      const element = modelParameter[index]
+      const element = modelParameter[index];
       if (element.modelType == this.modelType) {
-        this.modelDataObj = JSON.parse(element.modelParams)
-        this.modelSiteId = element
-        this.filePath = element.filePath
-        break
+        this.modelDataObj = JSON.parse(element.modelParams);
+        this.modelSiteId = element;
+        console.log("aaaaaaaaaa", element.filePath);
+        if (
+          window.location.hostname === "localhost" &&
+          window.location.port === "9528"
+        ) {
+          const currentUrl = "http://192.168.1.190:92";
+          this.filePath = currentUrl + element.filePath;
+        } else {
+          const currentUrl = window.location.origin;
+          this.filePath = currentUrl + element.filePath;
+        }
+        console.log("bbbbbbbbbbb", this.filePath);
+        // this.filePath = element.filePath;
+        break;
       }
     }
   },
@@ -347,16 +358,16 @@ export default {
     // } else {
     this.$nextTick(() => {
       if (!this.modelDataObj) {
-        this.$bus.$emit('animateState', true)
-        this.$bus.$emit('updataBoxState', true)
-        this.$bus.$emit('updataIsCutDevice', true)
-        this.$bus.$emit('updataIsAnimationMenu', true)
+        this.$bus.$emit("animateState", true);
+        this.$bus.$emit("updataBoxState", true);
+        this.$bus.$emit("updataIsCutDevice", true);
+        this.$bus.$emit("updataIsAnimationMenu", true);
       }
-      return
-    })
-    const data = this.modelDataObj
+      return;
+    });
+    const data = this.modelDataObj;
     this.modelData = {
-      modelName: 'byq_draco', // 模型名称
+      modelName: "byq_draco", // 模型名称
       modelZoom: data.modelZoom, // 模型缩放
       modelDraco: true, // 是否为Draco文件
       modelRotateAct: data.modelRotateAct, // 是否开启自动旋转
@@ -366,33 +377,33 @@ export default {
       rotationVal: data.rotation,
       Point: {
         color: data.pointLight.color,
-        intensity: data.pointLight.intensity
+        intensity: data.pointLight.intensity,
       },
       Ambient: {
         color: data.ambientLight.color,
-        intensity: data.ambientLight.intensity
+        intensity: data.ambientLight.intensity,
       },
-      pointIntensity: 0.3
-    }
-    this.init()
+      pointIntensity: 0.3,
+    };
+    this.init();
     // }
     // 隐藏显示元素
     this.$nextTick(() => {
-      const testDiv = document.querySelectorAll('.infoBox')
+      const testDiv = document.querySelectorAll(".infoBox");
       for (let index = 0; index < testDiv.length; index++) {
-        const element = testDiv[index]
-        element.style.display = 'none'
+        const element = testDiv[index];
+        element.style.display = "none";
       }
-    })
+    });
     // 视频显示
-    const _this = this
-    window.onresize = function() {
+    const _this = this;
+    window.onresize = function () {
       if (_this.checkFullScreen()) {
-        console.log('全屏状态')
+        console.log("全屏状态");
       } else {
-        console.log('缩小状态')
+        console.log("缩小状态");
       }
-    }
+    };
     // this.$nextTick(() => {
     //   setTimeout(() => {
     //     const videoElement = document.getElementById("videoElement");
@@ -412,35 +423,35 @@ export default {
     //   }, 1000);
     // });
     // 初始化点击事件
-    this.updataClickFun()
+    this.updataClickFun();
   },
   beforeDestroy() {
-    C3S3D.destory(this.ThreeObjs)
+    C3S3D.destory(this.ThreeObjs);
   },
   methods: {
     selectTitle(item, key) {
       const index = this.modelDataList[key].dataList.findIndex(
         (item) =>
           item.secondTitle == this.secondTitleArr[key].dataList[0].secondTitle
-      )
-      const itemName = this.modelDataList[key].dataList[0]
+      );
+      const itemName = this.modelDataList[key].dataList[0];
       this.modelDataList[key].dataList[0] =
-        this.modelDataList[key].dataList[index]
-      this.modelDataList[key].dataList[index] = itemName
-      this.secondTitleArr = JSON.parse(JSON.stringify(this.modelDataList))
+        this.modelDataList[key].dataList[index];
+      this.modelDataList[key].dataList[index] = itemName;
+      this.secondTitleArr = JSON.parse(JSON.stringify(this.modelDataList));
     },
     createdInit() {},
     geiVideoList(val) {
-      this.rtspUrllist = []
+      this.rtspUrllist = [];
       for (let index = 0; index < val.length; index++) {
-        const element = val[index]
+        const element = val[index];
         for (let i = 0; i < element.dataList.length; i++) {
-          const item = element.dataList[i]
-          if (item.http_url && item.http_url != '') {
+          const item = element.dataList[i];
+          if (item.http_url && item.http_url != "") {
             this.rtspUrllist.push({
               url: item.http_url,
-              randomInt: item.randomInt
-            })
+              randomInt: item.randomInt,
+            });
           }
         }
       }
@@ -451,39 +462,39 @@ export default {
         document.webkitIsFullScreen ||
         document.mozFullScreen ||
         document.msFullscreenElement ||
-        document.fullscreenElement
+        document.fullscreenElement;
       if (isFull == null || isFull == undefined) {
-        isFull = false
+        isFull = false;
       }
-      return isFull
+      return isFull;
     },
     // 播放
     clickhandleitem() {
       if (this.flvPlayerList.length > 0) {
         this.flvPlayerList.map((item) => {
-          this.destoryVideo(item)
-        })
-        this.flvPlayerList = []
+          this.destoryVideo(item);
+        });
+        this.flvPlayerList = [];
       }
       for (let index = 0; index < this.rtspUrllist.length; index++) {
         if (index > 4) {
-          break
+          break;
         }
-        this.url = this.rtspUrllist[index].url
-        this.createVideo(this.rtspUrllist[index].randomInt)
+        this.url = this.rtspUrllist[index].url;
+        this.createVideo(this.rtspUrllist[index].randomInt);
       }
     },
     createVideo(index) {
       if (flvjs.isSupported()) {
-        var videoElement = document.getElementById('videoElement' + index)
+        var videoElement = document.getElementById("videoElement" + index);
         this.flvPlayer = flvjs.createPlayer(
           {
-            type: 'flv',
+            type: "flv",
             isLive: true,
             hasAudio: true,
             url: this.url,
             hasVideo: true,
-            stashInitialSize: 128
+            stashInitialSize: 128,
           },
           {
             cors: true, // 是否跨域
@@ -493,72 +504,72 @@ export default {
             enableWorker: false, // 不启用分离线程
             enableStashBuffer: false, // 关闭IO隐藏缓冲区
             reuseRedirectedURL: true, // 重用301/302重定向url，用于随后的请求，如查找、重新连接等。
-            autoCleanupSourceBuffer: true // 自动清除缓存
+            autoCleanupSourceBuffer: true, // 自动清除缓存
           }
-        )
-        this.flvPlayer.attachMediaElement(videoElement)
-        if (this.url !== '' && this.url !== null) {
-          this.flvPlayer.load()
-          this.flvPlayer.play()
+        );
+        this.flvPlayer.attachMediaElement(videoElement);
+        if (this.url !== "" && this.url !== null) {
+          this.flvPlayer.load();
+          this.flvPlayer.play();
         }
       }
       // 定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
-      setInterval(function() {
+      setInterval(function () {
         if (videoElement.buffered.length > 0) {
-          const end = videoElement.buffered.end(0) // 视频结尾时间
-          const current = videoElement.currentTime //  视频当前时间
-          const diff = end - current // 相差时间
-          const diffCritical = 4 // 这里设定了超过4秒以上就进行跳转
-          const diffSpeedUp = 1 // 这里设置了超过1秒以上则进行视频加速播放
-          const maxPlaybackRate = 4 // 自定义设置允许的最大播放速度
-          let playbackRate = 1.0 // 播放速度
+          const end = videoElement.buffered.end(0); // 视频结尾时间
+          const current = videoElement.currentTime; //  视频当前时间
+          const diff = end - current; // 相差时间
+          const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
+          const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
+          const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
+          let playbackRate = 1.0; // 播放速度
           if (diff > diffCritical) {
-            videoElement.currentTime = end - 1.5
-            playbackRate = Math.max(1, Math.min(diffCritical, 16))
+            videoElement.currentTime = end - 1.5;
+            playbackRate = Math.max(1, Math.min(diffCritical, 16));
           } else if (diff > diffSpeedUp) {
-            playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
+            playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
           }
-          videoElement.playbackRate = playbackRate
+          videoElement.playbackRate = playbackRate;
           if (videoElement.paused) {
-            videoElement.play()
+            videoElement.play();
           }
         }
-      }, 1000)
-      this.flvPlayerList.push(this.flvPlayer)
+      }, 1000);
+      this.flvPlayerList.push(this.flvPlayer);
     },
     destoryVideo(flvPlayer) {
-      flvPlayer.pause()
-      flvPlayer.unload()
-      flvPlayer.detachMediaElement()
-      flvPlayer.destroy()
-      flvPlayer = null
+      flvPlayer.pause();
+      flvPlayer.unload();
+      flvPlayer.detachMediaElement();
+      flvPlayer.destroy();
+      flvPlayer = null;
     },
     // 初始化
-    init: function() {
-      this.modelState = true
-      const modelDataLists = this.modelData
+    init: function () {
+      this.modelState = true;
+      const modelDataLists = this.modelData;
       const lightList = [
         // 环境光
         {
-          type: 'Ambient',
+          type: "Ambient",
           color: getTenToSixteenColor(modelDataLists.Ambient.color),
-          intensity: modelDataLists.Ambient.intensity
-        }
-      ]
+          intensity: modelDataLists.Ambient.intensity,
+        },
+      ];
       // 环绕点光源
       const pointData = getPointData(
         modelDataLists.Point.intensity,
         getTenToSixteenColor(modelDataLists.Point.color)
-      )
+      );
       if (pointData) {
         for (let index = 0; index < pointData.length; index++) {
-          const element = pointData[index]
+          const element = pointData[index];
           lightList.push({
-            type: 'Point',
+            type: "Point",
             color: element.color,
             intensity: element.intensity,
-            position: element.position
-          })
+            position: element.position,
+          });
         }
       }
       this.ThreeObjs = C3S3D.init({
@@ -569,27 +580,27 @@ export default {
           position: [
             modelDataLists.cameraPosition.x,
             modelDataLists.cameraPosition.y,
-            modelDataLists.cameraPosition.z
-          ]
+            modelDataLists.cameraPosition.z,
+          ],
         },
         controls: {
           noRotate: false,
           autoRotate: false,
-          autoRotateSpeed: this.modelType === '111' ? 1 : 0.6,
+          autoRotateSpeed: this.modelType === "111" ? 1 : 0.6,
           maxPolarAngle: Math.PI / 2,
           minPolarAngle: Math.PI / 2,
-          minAzimuthAngle: this.modelType === '811' ? -Math.PI / 4 : null,
-          maxAzimuthAngle: this.modelType === '811' ? Math.PI / 4 : null,
+          minAzimuthAngle: this.modelType === "811" ? -Math.PI / 4 : null,
+          maxAzimuthAngle: this.modelType === "811" ? Math.PI / 4 : null,
           enableDamping: true,
-          enablePan: true
+          enablePan: true,
         },
         renderer: {
-          alpha: 0
+          alpha: 0,
         },
         css3dRenderer: {},
         light: lightList,
         update: (dt) => {
-          this.update(dt)
+          this.update(dt);
         },
         // 鼠标点击事件
         clickCallback: (e) => {
@@ -598,37 +609,37 @@ export default {
           //     this.ThreeObjs.orbitControls.reset()
           //   }, 3000)
           // }
-          this.onMouseClick(e)
+          this.onMouseClick(e);
         },
         // 鼠标双击事件
         dblclickCallback: (e) => {
-          this.modelOpen(e)
+          this.modelOpen(e);
         },
         // 鼠标移动
         mousemoveCallback: (e) => {
-          this.onMouseMove(e)
+          this.onMouseMove(e);
         },
         // 鼠标摁下
         mousedownCallback: (e) => {
           // this.openAndColse(e);
-        }
-      })
-      this.loadGltf()
-      this.initOutline()
+        },
+      });
+      this.loadGltf();
+      this.initOutline();
     },
 
     // 更新
     update() {
       if (this.ThreeObjs && this.ThreeObjs.camera) {
-        this.ThreeObjs.orbitControls.update()
-        const cameraPos = this.ThreeObjs.camera.position
+        this.ThreeObjs.orbitControls.update();
+        const cameraPos = this.ThreeObjs.camera.position;
         this.CSS3DObjectArr.forEach((item, index) => {
           this.CSS3DObjectArr[index].lookAt(
             cameraPos.x,
             cameraPos.y,
             cameraPos.z
-          )
-        })
+          );
+        });
       }
 
       // if (
@@ -672,31 +683,31 @@ export default {
         pulsePeriod: 6,
         visibleEdgeColor: 0x00a8ff,
         hiddenEdgeColor: 0x00a8ff,
-        downSampleRatio: 1
-      })
+        downSampleRatio: 1,
+      });
     },
     // 绘制连接线以及显示数据区域
     creatLineAndDataBox(item, i, type) {
-      let addressData = null
-      if (this.modelType == '811') {
-        addressData = getDataAddressZongZhan(item)
-      } else if (this.modelType == '211') {
-        addressData = getDataAddressGIS(item)
-      } else if (this.modelType == '711') {
-        addressData = getDataAddressDL(item)
-      } else if (this.modelType == '611') {
-        addressData = getDataAddressFDJ(item)
+      let addressData = null;
+      if (this.modelType == "811") {
+        addressData = getDataAddressZongZhan(item);
+      } else if (this.modelType == "211") {
+        addressData = getDataAddressGIS(item);
+      } else if (this.modelType == "711") {
+        addressData = getDataAddressDL(item);
+      } else if (this.modelType == "611") {
+        addressData = getDataAddressFDJ(item);
       } else {
-        addressData = getDataAddress(item)
+        addressData = getDataAddress(item);
       }
       const params = {
         color: 0x19e1cb,
         points: addressData.points,
-        parent: this.ThreeObjs.scene
-      }
-      const testDiv = document.getElementById('modelInfoBox' + (i + 1))
-      testDiv.style.marginLeft = addressData.translateX + 'vw'
-      testDiv.style.transformOrigin = addressData.Origin
+        parent: this.ThreeObjs.scene,
+      };
+      const testDiv = document.getElementById("modelInfoBox" + (i + 1));
+      testDiv.style.marginLeft = addressData.translateX + "vw";
+      testDiv.style.transformOrigin = addressData.Origin;
       const data = {
         scale: 1,
         position: addressData.points[2],
@@ -707,33 +718,33 @@ export default {
         rotation: addressData.rotation,
         parent: this.ThreeObjs.scene,
         visible: true,
-        name: item.name ? item.name : item.title
-      }
-      const dataList = this.ThreeObjs.scene.children
+        name: item.name ? item.name : item.title,
+      };
+      const dataList = this.ThreeObjs.scene.children;
       const state = dataList.some(
         (element) =>
           (element.name == item.name || element.name == item.title) &&
           element.mainTreeName == this.selectDeviceName
-      )
+      );
       if (state) {
         for (let index = 0; index < dataList.length; index++) {
-          const element = dataList[index]
+          const element = dataList[index];
           if (element.name == item.name || element.name == item.title) {
-            dataList[index - 1].visible = true
-            element.visible = true
+            dataList[index - 1].visible = true;
+            element.visible = true;
           }
         }
       } else {
-        this.lineArr.push(C3S3D.createLine(params))
-        this.CSS3DObjectArr.push(C3S3D.createCSS3DObject(data))
+        this.lineArr.push(C3S3D.createLine(params));
+        this.CSS3DObjectArr.push(C3S3D.createCSS3DObject(data));
       }
     },
     // 加载模型
     loadGltf() {
-      this.$bus.$emit('updataIsCutDevice', false)
-      this.$bus.$emit('updataIsAnimationMenu', false)
-      const group = new THREE.Object3D()
-      this.ThreeObjs.scene.add(group)
+      this.$bus.$emit("updataIsCutDevice", false);
+      this.$bus.$emit("updataIsAnimationMenu", false);
+      const group = new THREE.Object3D();
+      this.ThreeObjs.scene.add(group);
       C3S3D.loadGltf({
         // url:
         //   process.env.VUE_APP_MODEL_API +
@@ -746,7 +757,7 @@ export default {
         rotation: {
           x: C3S3D.toRadian(this.modelData.rotationVal.x),
           y: C3S3D.toRadian(this.modelData.rotationVal.y),
-          z: C3S3D.toRadian(this.modelData.rotationVal.z)
+          z: C3S3D.toRadian(this.modelData.rotationVal.z),
         },
         draco: this.modelData.modelDraco,
         onProgress: (percentage, val) => {
@@ -755,22 +766,22 @@ export default {
           }
         },
         onLoad: (geometry) => {
-          this.secondTitleArr = JSON.parse(JSON.stringify(this.modelDataList))
-          console.log('模型加完成', this.secondTitleArr)
+          this.secondTitleArr = JSON.parse(JSON.stringify(this.modelDataList));
+          console.log("模型加完成", this.secondTitleArr);
           // 模型加完成
-          this.geometry = geometry
-          this.modelState = false
-          if (this.modelType == '711' && this.animation) {
-            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.DIANLAN)
-          } else if (this.modelType == '311' && this.animation) {
-            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.KAIGUANGUI)
-          } else if (this.modelType == '211') {
-            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.GIS)
+          this.geometry = geometry;
+          this.modelState = false;
+          if (this.modelType == "711" && this.animation) {
+            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.DIANLAN);
+          } else if (this.modelType == "311" && this.animation) {
+            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.KAIGUANGUI);
+          } else if (this.modelType == "211") {
+            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.GIS);
           } else {
-            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.PUBLIC)
+            this.startAutoPatrol(this.geometry, CAMERA_MOVE_DATA.PUBLIC);
           }
-        }
-      })
+        },
+      });
     },
     // 鼠标经过高亮部件
     onMouseMove(event) {
@@ -779,7 +790,7 @@ export default {
         event,
         this.ThreeObjs,
         this.ThreeObjs.scene.children
-      )
+      );
       // if (selectObject) {
       //   // 模型元件高亮
       //   C3S3D.outlineLight(this.ThreeObjs, [selectObject]);
@@ -795,9 +806,9 @@ export default {
       // });
       if (this.modelData.modelRotateAct) {
         if (selectObject) {
-          this.ThreeObjs.orbitControls.autoRotate = false
+          this.ThreeObjs.orbitControls.autoRotate = false;
         } else {
-          this.ThreeObjs.orbitControls.autoRotate = true
+          this.ThreeObjs.orbitControls.autoRotate = true;
         }
       }
     },
@@ -807,37 +818,37 @@ export default {
         event,
         this.ThreeObjs,
         this.ThreeObjs.scene.children
-      )
+      );
       if (selectObject) {
         for (let index = 0; index < this.closeSelectObj.length; index++) {
-          const element = this.closeSelectObj[index]
+          const element = this.closeSelectObj[index];
           if (element.name == selectObject.name) {
-            this.closeSelectObj.splice(index, 1)
+            this.closeSelectObj.splice(index, 1);
           }
         }
-        this.clearSelectedObject()
+        this.clearSelectedObject();
         // 获取点击区域位置信息
-        selectObject.geometry.computeBoundingBox()
-        const objPosition = new THREE.Vector3()
+        selectObject.geometry.computeBoundingBox();
+        const objPosition = new THREE.Vector3();
         objPosition.addVectors(
           selectObject.geometry.boundingBox.min,
           selectObject.geometry.boundingBox.max
-        )
-        objPosition.multiplyScalar(0.5)
-        objPosition.applyMatrix4(selectObject.matrixWorld)
+        );
+        objPosition.multiplyScalar(0.5);
+        objPosition.applyMatrix4(selectObject.matrixWorld);
         for (let i = 0; i < this.modelDataList.length; i++) {
-          const item = this.modelDataList[i]
+          const item = this.modelDataList[i];
           if (
             selectObject.name == item.name ||
             selectObject.parent.name == item.name
           ) {
             // 显示配置数据
-            const data = this.ThreeObjs.scene.children
+            const data = this.ThreeObjs.scene.children;
             for (let index = 0; index < data.length; index++) {
-              const element = data[index]
+              const element = data[index];
               if (element.name == item.name && !element.visible) {
-                element.visible = true
-                data[index - 1].visible = true
+                element.visible = true;
+                data[index - 1].visible = true;
               }
             }
           }
@@ -846,91 +857,91 @@ export default {
     },
     // 鼠标按下事件(信息展示框点击更多收缩信息)
     openAndColse(event) {
-      console.log(event, '鼠标按下事件')
+      console.log(event, "鼠标按下事件");
     },
     // 默认折叠
     isSpread(val, key) {
       // 处理数据显示装置默认显示
       if (
         val.dataList[0].picpath.length == 0 &&
-        val.dataList[0].http_url == '' &&
-        this.modelType != '811'
+        val.dataList[0].http_url == "" &&
+        this.modelType != "811"
       ) {
-        const dataList = val.dataList
-        let comparisonData = []
+        const dataList = val.dataList;
+        let comparisonData = [];
         for (let index = 0; index < this.deviceList.length; index++) {
-          const element = this.deviceList[index]
+          const element = this.deviceList[index];
           if (element.type == this.modelType) {
-            comparisonData = defaultDeviceView[element.name]
+            comparisonData = defaultDeviceView[element.name];
           }
         }
-        let height = null
+        let height = null;
         for (let index = 0; index < comparisonData.length; index++) {
-          const element = comparisonData[index]
+          const element = comparisonData[index];
           const state = dataList.some(
             (item) => item.secondTitle.indexOf(element) != -1
-          )
+          );
           if (state) {
-            height = null
-            break
+            height = null;
+            break;
           } else {
-            height = '35px!important'
+            height = "35px!important";
           }
         }
-        return height
-      } else if (this.modelType == '811') {
-        let height = null
-        if (val.title == '出线场' || val.title == '高压电缆') {
-          height = '35px!important'
+        return height;
+      } else if (this.modelType == "811") {
+        let height = null;
+        if (val.title == "出线场" || val.title == "高压电缆") {
+          height = "35px!important";
         } else {
-          height = null
+          height = null;
         }
-        return height
+        return height;
       }
     },
     // 折叠
     clickMore(index) {
       const dom = document.querySelector(
-        '#modelInfoBox' + index + ' .modelInfoBox'
-      )
-      if (dom.style.height == '35px') {
-        dom.style.height = 'auto'
-        dom.style.minHeight = '160px'
+        "#modelInfoBox" + index + " .modelInfoBox"
+      );
+      if (dom.style.height == "35px") {
+        dom.style.height = "auto";
+        dom.style.minHeight = "160px";
       } else {
-        dom.style.height = '35px'
-        dom.style.minHeight = '35px'
+        dom.style.height = "35px";
+        dom.style.minHeight = "35px";
       }
     },
     // 关闭数据显示
     colseDataWindow(e, item) {
       if (item) {
-        const data = this.ThreeObjs.scene.children
+        const data = this.ThreeObjs.scene.children;
         data.map((element, index) => {
           if (
-            element.name != '' &&
+            element.name != "" &&
             (element.name == item.name || element.name == item.title)
           ) {
             if (data[index - 1].children.length == 0) {
-              data[index - 1].visible = false
+              data[index - 1].visible = false;
             }
-            element.visible = false
-            return
+            element.visible = false;
+            return;
           }
-        })
+        });
         // 关闭数据以后显示数据连接位置
         const modelObject = this.ThreeObjs.scene.getObjectByName(
           item.name ? item.name : item.title
-        )
+        );
         if (modelObject && modelObject != undefined) {
-          console.log('9999999999', modelObject)
-          this.closeSelectObj.push(modelObject)
-          this.clearSelectedObject()
+          console.log("9999999999", modelObject);
+          this.closeSelectObj.push(modelObject);
+          this.clearSelectedObject();
         }
       }
     },
     // 关闭后高亮
     clearSelectedObject() {
-      C3S3D.outlineLight(this.ThreeObjs, this.closeSelectObj)
+      C3S3D.outlineLight(this.ThreeObjs, this.closeSelectObj);
     },
     // 双击爆炸模型------------------------------------------------------------------
     modelOpen(event) {
@@ -938,23 +949,23 @@ export default {
         event,
         this.ThreeObjs,
         this.ThreeObjs.scene.children
-      )
-      if (this.modelType === '611') {
+      );
+      if (this.modelType === "611") {
         if (selectObject && this.ztzt === 0) {
-          this.ztzt = 1
+          this.ztzt = 1;
           // 隐藏模型外所有内容
           // 爆炸后数据隐藏
-          this.clearModelData()
-          this.$bus.$emit('updataBoxState', false)
-          this.$bus.$emit('updataIsAnimationMenu', false)
+          this.clearModelData();
+          this.$bus.$emit("updataBoxState", false);
+          this.$bus.$emit("updataIsAnimationMenu", false);
           // 爆炸模型
           for (const key in C3S3D.getAllMesh(this.ThreeObjs.scene)) {
             this.patrolTween = C3S3D.createTween({
               start: {
-                cx: 1
+                cx: 1,
               },
               to: {
-                cx: 3
+                cx: 3,
               },
               duration: 500,
               delayTime: 1,
@@ -964,27 +975,27 @@ export default {
                   this.ThreeObjs.scene,
                   ojb.cx,
                   100,
-                  ['x', 'y', 'z']
-                )
+                  ["x", "y", "z"]
+                );
               },
               onComplete: () => {},
-              easing: TWEEN.Easing.Linear.None
-            })
+              easing: TWEEN.Easing.Linear.None,
+            });
           }
         } else {
           if (this.ztzt === 1) {
-            this.ztzt = 0
+            this.ztzt = 0;
             // 爆炸后数据隐藏
-            this.updataModelData()
-            this.$bus.$emit('updataBoxState', true)
-            this.$bus.$emit('updataIsAnimationMenu', true)
+            this.updataModelData();
+            this.$bus.$emit("updataBoxState", true);
+            this.$bus.$emit("updataIsAnimationMenu", true);
             for (const key in C3S3D.getAllMesh(this.ThreeObjs.scene)) {
               this.patrolTween = C3S3D.createTween({
                 start: {
-                  cx: 3
+                  cx: 3,
                 },
                 to: {
-                  cx: 1
+                  cx: 1,
                 },
                 duration: 500,
                 delayTime: 1,
@@ -994,38 +1005,38 @@ export default {
                     this.ThreeObjs.scene,
                     ojb.cx,
                     100,
-                    ['x', 'y', 'z']
-                  )
+                    ["x", "y", "z"]
+                  );
                 },
                 onComplete: () => {},
-                easing: TWEEN.Easing.Linear.None
-              })
+                easing: TWEEN.Easing.Linear.None,
+              });
             }
-            this.clickhandleitem()
+            this.clickhandleitem();
           }
         }
       }
       if (
-        this.modelType === '411' ||
-        this.modelType === '311' ||
-        this.modelType === '711' ||
-        this.modelType === '211' ||
-        this.modelType === '111'
+        this.modelType === "411" ||
+        this.modelType === "311" ||
+        this.modelType === "711" ||
+        this.modelType === "211" ||
+        this.modelType === "111"
       ) {
         if (selectObject && this.ztzt === 0) {
-          this.ztzt = 1
+          this.ztzt = 1;
           // 爆炸后数据隐藏
-          this.clearModelData()
-          this.$bus.$emit('updataBoxState', false)
-          this.$bus.$emit('updataIsAnimationMenu', false)
+          this.clearModelData();
+          this.$bus.$emit("updataBoxState", false);
+          this.$bus.$emit("updataIsAnimationMenu", false);
           // 爆炸模型
           for (const key in C3S3D.getAllMesh(this.ThreeObjs.scene)) {
             this.patrolTween = C3S3D.createTween({
               start: {
-                cx: 1
+                cx: 1,
               },
               to: {
-                cx: 2
+                cx: 2,
               },
               duration: 500,
               delayTime: 1,
@@ -1035,28 +1046,28 @@ export default {
                   this.ThreeObjs.scene,
                   ojb.cx,
                   100,
-                  ['x', 'y', 'z']
-                )
+                  ["x", "y", "z"]
+                );
               },
               onComplete: () => {},
-              easing: TWEEN.Easing.Linear.None
-            })
+              easing: TWEEN.Easing.Linear.None,
+            });
           }
         } else {
           if (this.ztzt === 1) {
             // 重组模型数据回显
-            this.ztzt = 0
-            this.updataModelData()
-            this.$bus.$emit('updataBoxState', true)
-            this.$bus.$emit('updataIsAnimationMenu', true)
+            this.ztzt = 0;
+            this.updataModelData();
+            this.$bus.$emit("updataBoxState", true);
+            this.$bus.$emit("updataIsAnimationMenu", true);
             // // 双击空白处重新组合
             for (const key in C3S3D.getAllMesh(this.ThreeObjs.scene)) {
               this.patrolTween = C3S3D.createTween({
                 start: {
-                  cx: 2
+                  cx: 2,
                 },
                 to: {
-                  cx: 1
+                  cx: 1,
                 },
                 duration: 500,
                 delayTime: 1,
@@ -1066,28 +1077,28 @@ export default {
                     this.ThreeObjs.scene,
                     ojb.cx,
                     100,
-                    ['x', 'y', 'z']
-                  )
+                    ["x", "y", "z"]
+                  );
                 },
                 onComplete: () => {},
-                easing: TWEEN.Easing.Linear.None
-              })
+                easing: TWEEN.Easing.Linear.None,
+              });
             }
-            this.clickhandleitem()
+            this.clickhandleitem();
           }
         }
       }
     },
     // 相机视角移动动画
     startAutoPatrol(val, data) {
-      this.patrolPoints = data
-      this.patrolIndex = 0
-      this.doPatrol(this.patrolPoints[this.patrolIndex])
+      this.patrolPoints = data;
+      this.patrolIndex = 0;
+      this.doPatrol(this.patrolPoints[this.patrolIndex]);
     },
     // 相机移动
     doPatrol(point) {
-      const cameraPos = this.ThreeObjs.camera.position.clone()
-      const targetPos = this.ThreeObjs.orbitControls.target.clone()
+      const cameraPos = this.ThreeObjs.camera.position.clone();
+      const targetPos = this.ThreeObjs.orbitControls.target.clone();
       this.patrolTween = C3S3D.createTween({
         start: {
           cx: cameraPos.x,
@@ -1095,7 +1106,7 @@ export default {
           cz: cameraPos.z,
           tx: targetPos.x,
           ty: targetPos.y,
-          tz: targetPos.z
+          tz: targetPos.z,
         },
         to: {
           cx: point.cx,
@@ -1103,202 +1114,202 @@ export default {
           cz: point.cz,
           tx: point.tx,
           ty: point.ty,
-          tz: point.tz
+          tz: point.tz,
         },
         duration: point.time,
         delayTime: 1,
         onUpdate: (obj) => {
-          this.ThreeObjs.camera.position.set(obj.cx, obj.cy, obj.cz)
-          this.ThreeObjs.orbitControls.target.set(obj.tx, obj.ty, obj.tz)
+          this.ThreeObjs.camera.position.set(obj.cx, obj.cy, obj.cz);
+          this.ThreeObjs.orbitControls.target.set(obj.tx, obj.ty, obj.tz);
         },
         onComplete: () => {
-          this.patrolTween = null
-          this.patrolIndex++
+          this.patrolTween = null;
+          this.patrolIndex++;
           if (this.patrolIndex >= this.patrolPoints.length) {
-            this.moveSatate = true
-            this.$bus.$emit('updataIsCutDevice', true)
-            this.$bus.$emit('updataIsAnimationMenu', true)
+            this.moveSatate = true;
+            this.$bus.$emit("updataIsCutDevice", true);
+            this.$bus.$emit("updataIsAnimationMenu", true);
             this.ThreeObjs.orbitControls.autoRotate =
-              this.modelData.modelRotateAct
+              this.modelData.modelRotateAct;
             // 开始渲染视频
-            this.clickhandleitem()
-            this.updataModelData()
-            return
+            this.clickhandleitem();
+            this.updataModelData();
+            return;
           }
-          this.doPatrol(this.patrolPoints[this.patrolIndex])
+          this.doPatrol(this.patrolPoints[this.patrolIndex]);
         },
-        easing: TWEEN.Easing.Linear.None
-      })
+        easing: TWEEN.Easing.Linear.None,
+      });
     },
     rotate() {
-      const group = new THREE.Group()
-      group.add(this.geometry)
-      const box = new THREE.Box3().setFromObject(this.geometry)
-      const center = new THREE.Vector3()
-      box.getCenter(center)
+      const group = new THREE.Group();
+      group.add(this.geometry);
+      const box = new THREE.Box3().setFromObject(this.geometry);
+      const center = new THREE.Vector3();
+      box.getCenter(center);
       // 计算需要移动的距离
-      const distance = center.clone().sub(this.ThreeObjs.scene.position)
+      const distance = center.clone().sub(this.ThreeObjs.scene.position);
       // 创建平移变换矩阵，移动到模型中心点
       const translateMat = new THREE.Matrix4().makeTranslation(
         -distance.x,
         -distance.y,
         -distance.z
-      )
+      );
       // 将变换矩阵应用到场景的中心点上
-      this.ThreeObjs.scene.add(group)
-      this.ThreeObjs.scene.position.applyMatrix4(translateMat)
+      this.ThreeObjs.scene.add(group);
+      this.ThreeObjs.scene.position.applyMatrix4(translateMat);
     },
     // 查看实时数据
     viewRealTimeData(e, data) {
-      console.log(data, '查看实时数据===1')
-      const eqType = this.getEqType()
-      const type = data.deviceCode
-      console.log(type, this.modelType, this.modelData, '查看实时数据===222')
+      console.log(data, "查看实时数据===1");
+      const eqType = this.getEqType();
+      const type = data.deviceCode;
+      console.log(type, this.modelType, this.modelData, "查看实时数据===222");
       const queryParams = {
         eqType: eqType,
         title: data.secondTitle,
         time: data.time,
         siteId: this.modelSiteId.siteId,
         mainTreeId: data.mainTreeId,
-        sensorCode: data.sensorCode
-      }
-      if (type == 'ysp') {
+        sensorCode: data.sensorCode,
+      };
+      if (type == "ysp") {
         // 油色谱
         this.$router.push({
-          path: '/oilDataAlarm',
+          path: "/oilDataAlarm",
           query: {
             eqType: eqType,
-            gzType: '1',
+            gzType: "1",
             siteId: this.modelSiteId.siteId,
             mainTreeId: data.mainTreeId,
-            sensorCode: data.sensorCode
-          }
-        })
-      } else if (type == 'tx' || type == 'jj') {
+            sensorCode: data.sensorCode,
+          },
+        });
+      } else if (type == "tx" || type == "jj") {
         // 铁芯夹件
         this.$router.push({
-          path: '/shankAlarm',
+          path: "/shankAlarm",
           query: {
-            type: type == 'tx' ? '1' : '2',
-            title: type == 'tx' ? '铁芯数据' : '夹件数据',
+            type: type == "tx" ? "1" : "2",
+            title: type == "tx" ? "铁芯数据" : "夹件数据",
             eqType: eqType,
-            gzType: type == 'tx' ? '3' : '8',
+            gzType: type == "tx" ? "3" : "8",
             siteId: this.modelSiteId.siteId,
             mainTreeId: data.mainTreeId,
-            sensorCode: data.sensorCode
-          }
-        })
-      } else if (type == 'blq') {
+            sensorCode: data.sensorCode,
+          },
+        });
+      } else if (type == "blq") {
         // 避雷器
         this.$router.push({
-          path: '/arresterAlarmRX',
+          path: "/arresterAlarmRX",
           query: {
             eqType: eqType,
-            gzType: '6',
-            title: '避雷器数据',
+            gzType: "6",
+            title: "避雷器数据",
             siteId: this.modelSiteId.siteId,
             mainTreeId: data.mainTreeId,
-            sensorCode: data.sensorCode
-          }
-        })
-      } else if (type == 'jf') {
+            sensorCode: data.sensorCode,
+          },
+        });
+      } else if (type == "jf") {
         // 局放
-        if (this.modelType == '111') {
+        if (this.modelType == "111") {
           // 查看变压器局放
           this.$router.push({
-            path: '/bureauPutAlarmTwo',
-            query: { ...queryParams }
-          })
+            path: "/bureauPutAlarmTwo",
+            query: { ...queryParams },
+          });
         }
         // 查看GIS局放
-        else if (this.modelType == '711') {
-          this.$router.push({ path: '/cablePd', query: { ...queryParams }})
+        else if (this.modelType == "711") {
+          this.$router.push({ path: "/cablePd", query: { ...queryParams } });
         }
         // 电缆局放
         else if (
-          this.modelType == '211' ||
-          this.modelData.modelName == 'fdjmodel_draco'
+          this.modelType == "211" ||
+          this.modelData.modelName == "fdjmodel_draco"
         ) {
           this.$router.push({
-            path: '/bureauPutAlarm',
-            query: { ...queryParams }
-          })
+            path: "/bureauPutAlarm",
+            query: { ...queryParams },
+          });
         }
-      } else if (type == 'sf6') {
+      } else if (type == "sf6") {
         // SF6
         this.$router.push({
-          path: '/checkSF6Alarm',
-          query: { gzType: '5',...queryParams }
-        })
-      } else if (type == 'dlhl') {
+          path: "/checkSF6Alarm",
+          query: { gzType: "5", ...queryParams },
+        });
+      } else if (type == "dlhl") {
         // 电缆环流
         this.$router.push({
-          path: '/cableCirculation',
-          query: { ...queryParams }
-        })
-      } else if (type == 'hw') {
+          path: "/cableCirculation",
+          query: { ...queryParams },
+        });
+      } else if (type == "hw") {
         // 红外
         this.$router.push({
-          path: '/viewInfraredDataAlarm',
-          query: { ...queryParams }
-        })
+          path: "/viewInfraredDataAlarm",
+          query: { ...queryParams },
+        });
       } else if (
         // 图像数据
-        type == 'tp' &&
+        type == "tp" &&
         data.picpath.length != 0 &&
-        data.http_url == ''
+        data.http_url == ""
       ) {
         this.$router.push({
-          path: '/viewImageDataAlarm',
-          query: { ...queryParams }
-        })
+          path: "/viewImageDataAlarm",
+          query: { ...queryParams },
+        });
       }
       // 新增
       else if (
-        type == 'cw' ||
-        type == 'rzcw' ||
-        type == 'sf6env' ||
-        type == 'zd' ||
-        type == 'genOther' ||
-		type == 'genyl' ||
-        type == 'genjf' ||
-        type == 'qx' ||
-        type == 'jy' ||
-        type == 'rx'
+        type == "cw" ||
+        type == "rzcw" ||
+        type == "sf6env" ||
+        type == "zd" ||
+        type == "genOther" ||
+        type == "genyl" ||
+        type == "genjf" ||
+        type == "qx" ||
+        type == "jy" ||
+        type == "rx"
       ) {
-        let gzType = ''
-        if (type == 'cw') {
+        let gzType = "";
+        if (type == "cw") {
           // 光纤测温
-          gzType = '21'
-        } else if (type == 'rzcw') {
+          gzType = "21";
+        } else if (type == "rzcw") {
           // 绕组测温
-          gzType = '20'
-        } else if (type == 'sf6env') {
+          gzType = "20";
+        } else if (type == "sf6env") {
           // 绕组测温
-          gzType = '22'
-        } else if (type == 'zd') {
+          gzType = "22";
+        } else if (type == "zd") {
           // 绕组测温
-          gzType = '23'
-        } else if (type == 'genjf') {
+          gzType = "23";
+        } else if (type == "genjf") {
           // 局放信息
-          gzType = '24'
-        } else if (type == 'genOther' || type == 'genyl') {
-        // 其他信息
-          gzType = '26'
-        } else if (type == 'qx') {
+          gzType = "24";
+        } else if (type == "genOther" || type == "genyl") {
+          // 其他信息
+          gzType = "26";
+        } else if (type == "qx") {
           // 局放信息
-          gzType = '27'
-        } else if (type == 'jy') {
+          gzType = "27";
+        } else if (type == "jy") {
           // 局放信息
-          gzType = '6'
-        } else if (type == 'rx') {
+          gzType = "6";
+        } else if (type == "rx") {
           // 局放信息
-          gzType = '12'
+          gzType = "12";
         }
-        console.log(data)
+        console.log(data);
         // 测温
         this.$router.push({
-          path: '/thermometry',
+          path: "/thermometry",
           query: {
             eqType: eqType,
             gzType: gzType,
@@ -1307,99 +1318,99 @@ export default {
             amplType: data.amplType,
             siteId: this.modelSiteId.siteId,
             mainTreeId: data.mainTreeId,
-            sensorCode: data.sensorCode
-          }
-        })
+            sensorCode: data.sensorCode,
+          },
+        });
       }
     },
     getEqType() {
-      let type = ''
-      if (this.modelType == '111') {
-        type = '1'
-      } else if (this.modelType == '211') {
-        type = '2'
-      } else if (this.modelType == '611') {
-        type = '6'
-      } else if (this.modelType == '411') {
-        type = '3'
-      } else if (this.modelType == '311') {
-        type = '4'
-      } else if (this.modelType == '711') {
-        type = '7'
+      let type = "";
+      if (this.modelType == "111") {
+        type = "1";
+      } else if (this.modelType == "211") {
+        type = "2";
+      } else if (this.modelType == "611") {
+        type = "6";
+      } else if (this.modelType == "411") {
+        type = "3";
+      } else if (this.modelType == "311") {
+        type = "4";
+      } else if (this.modelType == "711") {
+        type = "7";
       }
-      return type
+      return type;
     },
     // 计算稳定性
     computationalShow(data) {
-      const typeList = ['ysp', 'tx', 'jj', 'jy', 'rx']
-      return typeList.some((item) => item == data.deviceCode)
+      const typeList = ["ysp", "tx", "jj", "jy", "rx"];
+      return typeList.some((item) => item == data.deviceCode);
     },
     computational(e, data) {
-      const typeList = ['ysp', 'tx', 'jj', 'jy', 'rx']
+      const typeList = ["ysp", "tx", "jj", "jy", "rx"];
       if (typeList.indexOf(data.deviceCode) != -1) {
-        this.$bus.$emit('computationalStability', data)
+        this.$bus.$emit("computationalStability", data);
       }
-      e.stopPropagation()
+      e.stopPropagation();
       // e.preventDefalut();
     },
     // 切换设备重新渲染数据
     updataModelData() {
-      C3S3D.outlineLight(this.ThreeObjs, [])
+      C3S3D.outlineLight(this.ThreeObjs, []);
       for (let i = 0; i < this.modelDataList.length; i++) {
-        const item = this.modelDataList[i]
+        const item = this.modelDataList[i];
         // 显示配置数据
-        this.creatLineAndDataBox(item, i)
+        this.creatLineAndDataBox(item, i);
       }
       // 更新点击事件
-      this.updataClickFun()
+      this.updataClickFun();
     },
     // 清除模型数据
     clearModelData() {
       return new Promise((resolve, reject) => {
-        const data = this.ThreeObjs.scene.children
-        const removeList = []
-        let num = 0
+        const data = this.ThreeObjs.scene.children;
+        const removeList = [];
+        let num = 0;
         data.forEach((item, index) => {
-          num++
+          num++;
           if (
-            item.type == 'Line2' ||
-            (item.type == 'Object3D' && item.children.length == 0)
+            item.type == "Line2" ||
+            (item.type == "Object3D" && item.children.length == 0)
           ) {
-            removeList.push(item)
+            removeList.push(item);
           }
-        })
+        });
         if (num == data.length) {
           for (let index = 0; index < removeList.length; index++) {
-            const element = removeList[index]
-            element.visible = false
+            const element = removeList[index];
+            element.visible = false;
           }
-          resolve()
+          resolve();
         }
-      })
+      });
     },
     updataClickFun() {
       this.$nextTick(() => {
         for (let index = 0; index < this.modelDataList.length; index++) {
           document
             .querySelector(
-              '#modelInfoBox' + (index + 1) + ' .modelInfoBoxTitle'
+              "#modelInfoBox" + (index + 1) + " .modelInfoBoxTitle"
             )
             .addEventListener(
-              'pointerdown',
+              "pointerdown",
               (e) => {
-                e.stopPropagation()
+                e.stopPropagation();
               },
               false
-            )
+            );
         }
-      })
+      });
     },
     // 跳转图像数据界面
     viewInfraredMorePage() {
-      this.$router.push({ path: '/videoList' })
-    }
-  }
-}
+      this.$router.push({ path: "/videoList" });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/siteAdministration/children/siteAdministrationItem.vue b/src/views/siteAdministration/children/siteAdministrationItem.vue
index b34af49..64df910 100644
--- a/src/views/siteAdministration/children/siteAdministrationItem.vue
+++ b/src/views/siteAdministration/children/siteAdministrationItem.vue
@@ -124,7 +124,8 @@ export default {
 .siteAdministrationItem {
   width: 100%;
   height: 90%;
-  padding: vw(123) vw(126) vw(60) vw(126);
+  // padding: vw(123) vw(126) vw(60) vw(126);
+  padding: 1.20312vw 1.28125vw 0.5625vw 1.28125vw;
   position: relative;
   .top {
     width: 100%;
@@ -150,7 +151,8 @@ export default {
       margin-left: vw(60);
       position: relative;
       padding: vw(70) 0 0 0;
-      width: calc(100% - 440px);
+      width: calc(100% - 10.88542vw);
+      //width: calc(100% - 440px);
       // width: restVw(478);
       height: 100%;
       > p {
diff --git a/src/views/system/system.vue b/src/views/system/system.vue
index b0ee1df..5168ab0 100644
--- a/src/views/system/system.vue
+++ b/src/views/system/system.vue
@@ -63,70 +63,74 @@
   </div>
 </template>
 <script>
-
 export default {
   data() {
     return {
-      openeds: ['1'],
+      openeds: ["1"],
       dialogVisible: false,
-      titleText: '',
-      isACtive: 0
-    }
+      titleText: "",
+      isACtive: 0,
+    };
   },
   computed: {
-    menus: function() {
-      console.log("0000",this.$store.state.app.interfaceRouter.filter(item => item.path === 'system'));
-      return this.$store.state.app.interfaceRouter.filter(item => item.path === 'system')
-    }
+    menus: function () {
+      console.log(
+        "0000",
+        this.$store.state.app.interfaceRouter.filter(
+          (item) => item.path === "system"
+        )
+      );
+      return this.$store.state.app.interfaceRouter.filter(
+        (item) => item.path === "system"
+      );
+    },
   },
   created() {
     // console.log(this.$store.state.app.interfaceRouter,'2');
-
   },
   methods: {
     // 退出系统
     async logout() {
-      await this.$store.dispatch('logout')
-      this.$router.push('/login')
+      await this.$store.dispatch("logout");
+      this.$router.push("/login");
     },
     dialogVisibleClose() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
     logoutDialog() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
       this.$confirm("此操作将退出当前系统, 是否继续退出?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-          this.logout()
+          this.logout();
         })
         .catch(() => {});
     },
 
-    addTitle() {
-
-    },
+    addTitle() {},
     jump(item, index) {
-      this.isACtive = index
-      this.$router.push(item.path)
+      this.isACtive = index;
+      this.$router.push(item.path);
     },
     handleOpen(key, keyPath) {
       // console.log(key, keyPath)
     },
     handleClose(key, keyPath) {
       // console.log(key, keyPath)
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 @import "../../assets/stylesheet/index";
 .siteAdministrationItem {
   width: 100%;
   height: 90%;
-  padding: vw(123) vw(126) vw(60) vw(126);
+  // padding: vw(123) vw(126) vw(60) vw(126);
+  padding: 1.20312vw 1.28125vw 0.5625vw 1.28125vw;
   position: relative;
   .top {
     width: 100%;