代码提交

2022-11-09 08:48:50 +08:00 · 2022-11-09 08:48:50 +08:00 · dc90cc9dc3
parent ec23188f23
commit dc90cc9dc3
44 changed files with 2688 additions and 231 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "v-fit-columns": "^0.2.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
+    "vue-video-player": "^5.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
--- a/public/unityWeb/Build/YD_UnityWeb.data.unityweb
+++ b/public/unityWeb/Build/YD_UnityWeb.data.unityweb
--- a/public/unityWeb/Build/YD_UnityWeb.framework.js.unityweb
+++ b/public/unityWeb/Build/YD_UnityWeb.framework.js.unityweb
--- a/public/unityWeb/Build/YD_UnityWeb.loader.js
+++ b/public/unityWeb/Build/YD_UnityWeb.loader.js
--- a/public/unityWeb/Build/YD_UnityWeb.wasm.unityweb
+++ b/public/unityWeb/Build/YD_UnityWeb.wasm.unityweb
--- a/public/unityWeb/StreamingAssets/UnityServicesProjectConfiguration.json
+++ b/public/unityWeb/StreamingAssets/UnityServicesProjectConfiguration.json
@ -0,0 +1 @@
+{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}
--- a/public/unityWeb/TemplateData/favicon.ico
+++ b/public/unityWeb/TemplateData/favicon.ico
--- a/public/unityWeb/TemplateData/fullscreen-button.png
+++ b/public/unityWeb/TemplateData/fullscreen-button.png
--- a/public/unityWeb/TemplateData/progress-bar-empty-dark.png
+++ b/public/unityWeb/TemplateData/progress-bar-empty-dark.png
--- a/public/unityWeb/TemplateData/progress-bar-empty-light.png
+++ b/public/unityWeb/TemplateData/progress-bar-empty-light.png
--- a/public/unityWeb/TemplateData/progress-bar-full-dark.png
+++ b/public/unityWeb/TemplateData/progress-bar-full-dark.png
--- a/public/unityWeb/TemplateData/progress-bar-full-light.png
+++ b/public/unityWeb/TemplateData/progress-bar-full-light.png
--- a/public/unityWeb/TemplateData/style.css
+++ b/public/unityWeb/TemplateData/style.css
@ -0,0 +1,16 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: absolute }
+#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
+#unity-container.unity-mobile { width: 100%; height: 100% }
+#unity-canvas { background: #231F20 }
+.unity-mobile #unity-canvas { width: 100%; height: 100% }
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-footer { position: relative }
+.unity-mobile #unity-footer { display: none }
+#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
+#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
+#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
--- a/public/unityWeb/TemplateData/unity-logo-dark.png
+++ b/public/unityWeb/TemplateData/unity-logo-dark.png
--- a/public/unityWeb/TemplateData/unity-logo-light.png
+++ b/public/unityWeb/TemplateData/unity-logo-light.png
--- a/public/unityWeb/TemplateData/webgl-logo.png
+++ b/public/unityWeb/TemplateData/webgl-logo.png
--- a/public/unityWeb/index.html
+++ b/public/unityWeb/index.html
@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | Yd_ElectricPowerVisualization</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+  </head>
+  <body>
+    <div id="unity-container" class="unity-desktop">
+      <canvas id="unity-canvas" width=960 height=600></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-logo"></div>
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
+        </div>
+      </div>
+      <div id="unity-warning"> </div>
+      <div id="unity-footer">
+        <div id="unity-webgl-logo"></div>
+        <div id="unity-fullscreen-button"></div>
+        <div id="unity-build-title">Yd_ElectricPowerVisualization</div>
+      </div>
+    </div>
+    <script>
+      var container = document.querySelector("#unity-container");
+      var canvas = document.querySelector("#unity-canvas");
+      var loadingBar = document.querySelector("#unity-loading-bar");
+      var progressBarFull = document.querySelector("#unity-progress-bar-full");
+      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
+      var warningBanner = document.querySelector("#unity-warning");
+
+      // Shows a temporary message banner/ribbon for a few seconds, or
+      // a permanent error message on top of the canvas if type=='error'.
+      // If type=='warning', a yellow highlight color is used.
+      // Modify or remove this function to customize the visually presented
+      // way that non-critical warnings and error messages are presented to the
+      // user.
+      function unityShowBanner(msg, type) {
+        function updateBannerVisibility() {
+          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+        }
+        var div = document.createElement('div');
+        div.innerHTML = msg;
+        warningBanner.appendChild(div);
+        if (type == 'error') div.style = 'background: red; padding: 10px;';
+        else {
+          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+          setTimeout(function() {
+            warningBanner.removeChild(div);
+            updateBannerVisibility();
+          }, 5000);
+        }
+        updateBannerVisibility();
+      }
+
+      var buildUrl = "Build";
+      var loaderUrl = buildUrl + "/YD_UnityWeb.loader.js";
+      var config = {
+        dataUrl: buildUrl + "/YD_UnityWeb.data.unityweb",
+        frameworkUrl: buildUrl + "/YD_UnityWeb.framework.js.unityweb",
+        codeUrl: buildUrl + "/YD_UnityWeb.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "DefaultCompany",
+        productName: "Yd_ElectricPowerVisualization",
+        productVersion: "0.1",
+        showBanner: unityShowBanner,
+      };
+
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+        // Mobile device style: fill the whole browser client area with the game canvas:
+
+        var meta = document.createElement('meta');
+        meta.name = 'viewport';
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+        document.getElementsByTagName('head')[0].appendChild(meta);
+        container.className = "unity-mobile";
+
+        // To lower canvas resolution on mobile devices to gain some
+        // performance, uncomment the following line:
+        // config.devicePixelRatio = 1;
+
+        canvas.style.width = window.innerWidth + 'px';
+        canvas.style.height = window.innerHeight + 'px';
+
+        unityShowBanner('WebGL builds are not supported on mobile devices.');
+      } else {
+        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
+
+        canvas.style.width = "960px";
+        canvas.style.height = "600px";
+      }
+
+      loadingBar.style.display = "block";
+
+      var script = document.createElement("script");
+      var unityInstanceA
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          unityInstanceA = unityInstance
+          loadingBar.style.display = "none";
+          fullscreenButton.onclick = () => {
+            unityInstance.SetFullscreen(1);
+          };
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      function handleChange(val){
+        unityInstanceA.SendMessage('GameManager','UnityMethod_SelectType',val)
+      };
+      function handleChangeLine(val){
+        unityInstanceA.SendMessage('GameManager','UnityMethod_SelectLine',val)
+      };
+      function WebMethod_SelectDevice(val){
+             window.parent.postMessage({
+             val
+            }, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
+      };
+      function fullscreen(val){
+        unityInstanceA.SetFullscreen(val)
+      }
+      document.body.appendChild(script);
+    </script>
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -29,8 +29,10 @@
  </div>
 </template>
 <script>
+import MinxinItem from "./mixins"
 export default {
  name: 'home',
+  mixins:[MinxinItem],
  data(){
    return{
      routerTitle:['首页','20kv','35kv','站房智辅'],
@ -46,7 +48,13 @@ export default {
  },
  methods:{
    handleChange(index){
+      let that = this;
      this.routerActive = index
+      if (this.routerActive == 0) {
+        that.$router.push({name:'home'})
+      }else if (this.routerActive == 3) {
+        that.$router.push({name:'stationBuilding'})
+      }
    }
  }
 }
@ -78,7 +86,7 @@ export default {
  .left{
    width: 815px;
    height: 97px;
-    background: url('./assets/images/titleBg.png') no-repeat;
+    background: url('./assets/images/titleBg1.png') no-repeat;
    background-size: 100% 100%;
    font-size: 44px;
    font-weight: 700;
@ -149,5 +157,8 @@ export default {
 .content {
  width: 100%;
  height: calc(100% - 100px);
+      display: flex;
+    align-items: center;
+    justify-content: space-around;
 }
 </style>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -16,3 +16,9 @@ export const getLine = (params) => {
        params
    })
 };
+// 查询设备素材
+export const getDevice = (params) => {
+    return axios.get('/Handler/Device.ashx', {
+        params
+    })
+};
--- a/src/assets/images/baojing.png
+++ b/src/assets/images/baojing.png
--- a/src/assets/images/baojingxinxiKuang.png
+++ b/src/assets/images/baojingxinxiKuang.png
--- a/src/assets/images/basicFrame.png
+++ b/src/assets/images/basicFrame.png
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/dateAction.png
+++ b/src/assets/images/dateAction.png
--- a/src/assets/images/dateKuang.png
+++ b/src/assets/images/dateKuang.png
--- a/src/assets/images/intervalFrame.png
+++ b/src/assets/images/intervalFrame.png
--- a/src/assets/images/intervalTable.png
+++ b/src/assets/images/intervalTable.png
--- a/src/assets/images/realTimeAlarmKuang.png
+++ b/src/assets/images/realTimeAlarmKuang.png
--- a/src/assets/images/ringMainGH.png
+++ b/src/assets/images/ringMainGH.png
--- a/src/assets/images/ringMainUnitKuang.png
+++ b/src/assets/images/ringMainUnitKuang.png
--- a/src/assets/images/shiliangIcon1.png
+++ b/src/assets/images/shiliangIcon1.png
--- a/src/assets/images/shiliangIcon2.png
+++ b/src/assets/images/shiliangIcon2.png
--- a/src/assets/images/shiliangIcon3.png
+++ b/src/assets/images/shiliangIcon3.png
--- a/src/assets/images/shiliangIcon4.png
+++ b/src/assets/images/shiliangIcon4.png
--- a/src/assets/images/stationBuildingKuang.png
+++ b/src/assets/images/stationBuildingKuang.png
--- a/src/assets/images/titleBg1.png
+++ b/src/assets/images/titleBg1.png
--- a/src/assets/images/xianchangzhaopian.png
+++ b/src/assets/images/xianchangzhaopian.png
--- a/src/assets/videos/video.mp4
+++ b/src/assets/videos/video.mp4
--- a/src/main.js
+++ b/src/main.js
@ -12,6 +12,14 @@ import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts


+import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+Vue.use(VideoPlayer)
+// require('vue-video-player/src/custom-theme.css')
+// import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+// import { videoPlayer } from 'vue-video-player'
+
 import moment from 'moment'
 //定义一个全局过滤器实现日期格式化
 Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
--- a/src/router.js
+++ b/src/router.js
@ -17,5 +17,10 @@ export default new Router({
      name: 'home',
      component: () => import ('./views/Home.vue')
    },
+    {
+      path: '/stationBuilding',
+      name: 'stationBuilding',
+      component: () => import ('./views/stationBuilding.vue')
+    },
  ]
 })
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -2,7 +2,8 @@
  <div class="home">
    <div class="left">
      <div class="one" style="height: 405px">
-        <div class="cartitle">盐都区供电公司概况</div>
+        <div class="cartitle">
+          <div class="titleFont">盐都区供电公司概况</div></div>
        <div class="content">
          <div class="line">
            <div class="total">
@ -10,8 +11,13 @@
                <img src="@/assets/images/rouer.png" alt="" />
              </div>
              <div class="num">
-                <span style="font-size: 45px; font-weight: 600">304</span>
-                <span style="font-size: 18px">配电路线</span>
+                <span style="font-size: 45px; font-weight: 600; 
+                color: transparent;
+                -webkit-background-clip: text;
+                background-clip: text;
+                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));"
+                >304</span>
+                <span style="font-size: 18px;">配电路线</span>
              </div>
            </div>
            <div class="info">
@ -39,7 +45,12 @@
                <img src="@/assets/images/routerLong.png" alt="" />
              </div>
              <div class="num">
-                <span style="font-size: 45px; font-weight: 600">4128</span>
+                <span style="font-size: 45px; font-weight: 600;
+                color: transparent;
+                -webkit-background-clip: text;
+                background-clip: text;
+                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));
+                ">4128</span>
                <span style="font-size: 18px">路线长度</span>
              </div>
            </div>
@ -85,14 +96,39 @@
            <el-table-column prop="why" label="故障原因" width="80">
            </el-table-column>
            <el-table-column prop="sucss" label="重合成功" width="60">
+              <template slot-scope="scope">
+                <div style="color:#ffbc3a">
+                {{ scope.row.sucss}}
+                 </div>
+              </template>
            </el-table-column>
            <el-table-column prop="unsucss" label="重合不成" width="80">
+               <template slot-scope="scope">
+                <div style="color:#ffbc3a">
+                {{ scope.row.unsucss}}
+                 </div>
+              </template>
            </el-table-column>
-            <el-table-column prop="nonesucss" label="无重合闸" width="60">
+            <el-table-column prop="noneunsucss" label="无重合闸" width="60">
+               <template slot-scope="scope">
+                <div style="color:#2793ff">
+                {{ scope.row.noneunsucss}}
+                 </div>
+               </template>
            </el-table-column>
            <el-table-column prop="address" label="接地" width="60">
+              <template slot-scope="scope">
+                <div style="color:#794af8">
+                {{ scope.row.address}}
+                 </div>
+               </template>
            </el-table-column>
            <el-table-column prop="total" label="合计" width="60">
+               <template slot-scope="scope">
+                <div style="color:#ee8316">
+                {{ scope.row.total}}
+                 </div>
+              </template>
            </el-table-column>
          </el-table>
        </div>
@ -100,13 +136,15 @@
    </div>
    <div class="middle">
      <div class="one" style="height: 635px; width: 100%">
+          <iframe src="/unityWeb/index.html" style="height: 100%; width: 100%" 
+          ref="iframe"></iframe>
        <div class="unityBtn">
          <div
            class="btn"
            :class="{ btnAct: btnActive == index }"
            v-for="(item, index) in btnArr"
            :key="index"
-            @click="handleUnity(index)"
+            @click="handleUnity(index,item)"
          >
            {{ item }}
          </div>
@ -118,7 +156,7 @@
          </div>
        </div>
        <div class="unityEnlargeBtn">
-          <div class="content" v-for="(item,index) in btnEnlarge" :key="index">
+          <div class="content" v-for="(item,index) in btnEnlarge" :key="index" @click="enlargeBtn(index)">
            <img :src="item.icon" style="margin:7px"/>
          </div>
        </div>
@ -126,10 +164,10 @@
          <div class="unitySuosou">
            <img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
          </div>
-          <el-select v-model="value" placeholder="请选择线路">
+          <el-select v-model="value" clearable  placeholder="请选择线路" >
            <el-option
-              v-for="item in options"
-              :key="item.value"
+              v-for="(item,index) in options"
+              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
@ -188,7 +226,15 @@
    </div>
    <div class="right">
      <div class="one" style="height: 310px">
-        <div class="cartitle">盐都配变停运管理情况</div>
+        <div class="cartitle">
+          <div  style="width: 82%;display: flex;justify-content: space-between;align-items: center;">盐都配变停运管理情况
+            <div class="dateSelect">
+            <div style="text-indent: 15px;" @click="handleDate(index)" :class="addColor(index)" v-for="(item,index) in dateList" :key="index">
+              {{item}}
+            </div>
+            </div>
+          </div>
+        </div>
        <div class="top">
          <div class="topContent" v-for="(item,index) in topContent" :key="index">
            <div style="color:#ffffff">{{item.name}}</div>
@ -206,16 +252,78 @@
        <div id="detailedThree"></div>
      </div>
    </div>
+    <div class="realTimeAlarm" v-show="realTimeAlarmShow">
+      <div class="content">
+        <img  src="../assets/images/baojing.png"/>
+        <div>都政线XXX环网柜间隔3发生局部放电故障</div>
+      </div>
+    </div>
+    <div class="alarmInformation" v-show="alarmInformationShow">
+      <div class="top">
+        <div class="title">报警详情信息</div>
+        <div class="close">
+            <img
+               @click="handleClose"
+                src="@/assets/images/close.png"
+                style="cursor: pointer"
+                />
+          </div>
+      </div>
+      <div class="content">
+         <div class="table user_skills">
+          <el-table
+            :data="alarmInformationData"
+            style="width: 100%; height: 100%"
+            :header-cell-style="{ 'text-align': 'center' }"
+            :cell-style="{ 'text-align': 'center' }"
+            stripe
+          >
+            <el-table-column label="序号" align="center" >
+              <template slot-scope="scop">
+                {{ scop.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="报警信息" align="center" >
+            </el-table-column>
+            <el-table-column prop="date" label="发生时间" align="center" >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+     <div class="componentShow" v-if="modelOthers">
+      <keep-alive>
+        <component
+          :is="componentShow"
+          :ringMainUnit="device"
+        ></component>
+      </keep-alive>
+    </div>
  </div>
 </template>

 <script>
-import { getCompanyInfo } from "../api/index.js";
+import { getCompanyInfo,getLine} from "../api/index.js";
+import ringMainUnit from  "./HomePop/ringMainUnit.vue"
 export default {
  name: "home",
-  components: {},
+  components: {
+     ringMainUnit,//环网柜弹窗
+  },
  data() {
    return {
+      dateList: ['周','月'],
+      acolor: true,//是否展示颜色
+      currentIndex : -1,
+      alarmInformationData:[
+      {
+        name:'告警信息',
+        date:'2022'
+      }],
+      alarmInformationShow: false, //报警详情信息弹窗
+      realTimeAlarmShow: false,//实时报警弹窗
+      modelOthers: false,
+      componentShow: "",
      CompanyInfo: {},
      tableData: [
        {
@ -256,10 +364,12 @@ export default {
        icon: require("@/assets/images/btnFangDa.png"),
      }
      ],
-       options: [{
-          value: '选项1',
-          label: '黄金糕'
-        }],
+       options: [
+         {
+           value:'',
+           label:''
+         }
+       ],
        value: '',
        topContent:[
          {
@ -275,7 +385,7 @@ export default {
            count:'0.22%'
          },
        ],
-        
+        device:''
    };
  },
  mounted() {
@ -283,15 +393,54 @@ export default {
    getCompanyInfo().then((res) => {
      this.CompanyInfo = res.data.data;
    });
+    // 查询总线路
+    getLine(
+      {action:'all'}
+    ).then((res)=>{
+      if (res.data != '') {
+        this.options = Object.keys(res.data.data).map((item,index)=>{
+          console.log(res.data.data[index],"res.data.data");
+          return {value:res.data.data[index].line_code,label:res.data.data[index].line_name}
+        })
+      }
+      
+    })
    this.detailedOne();
    this.detailedThree();
    this.detailedTwo();
    this.detailedFour();
    this.detailedFive();
-  },
+    this.handleDate(0);
+    let that = this;
+     window.addEventListener('message', function (e) {
+      var res = e.data;
+      if (res.val != null) {
+      that.modelOthers = true
+      that.componentShow = 'ringMainUnit'
+      that.device = res.val
+      }
+      })
+},
+  
  methods: {
-    handleUnity(index) {
+    //调用unity方法
+    handleUnity(index,item) {
      this.btnActive = index;
+      console.log(item);
+      this.$refs.iframe.contentWindow.handleChange(item)
+    },
+    //选择线路
+    selectLine(value){
+      getLine(
+        {
+          action:'query',
+          line_code:value
+        }
+      ).then((res)=>{
+        if (res.data.data != 0) {
+          this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
+        }
+      })
    },
    detailedOne() {
      let dataList = [1,1, 4, 6,5, 9, 4,5,0,3]
@ -1174,8 +1323,41 @@ export default {
  ],
 };
      myChart.setOption(option);
+    },
+    //报警详情信息弹窗
+    enlargeBtn(index){
+      if (index == 0) {
+        this.alarmInformationShow = true
+      }else if (index == 1) {
+         this.$refs.iframe.contentWindow.fullscreen(1);
+      }
+    },
+    handleClose(){
+      this.alarmInformationShow = false
+    },
+    handleDate(index){
+      this.currentIndex = index
+    },
+    addColor(index){
+      if(this.currentIndex == index) {
+          return {active : this.acolor}
+      }
    }
  },
+  watch: {
+       //监听内容
+       value(newVal,oldVal) {
+        console.log(newVal,oldVal,"value发生了变化");
+        if (newVal != oldVal && newVal != '') {
+          this.selectLine(newVal)
+        }else if(newVal == ''){
+          console.log(this.value,"value");
+          this.value = ''
+          let item = '总览'
+          this.handleUnity(0,item)
+        }
+      }
+    }
 };
 </script>
 <style lang="less" scoped>
@ -1216,6 +1398,9 @@ export default {
    white-space: nowrap !important;
    // word-break: break-all;
  }
+  /deep/ .el-table th.el-table__cell>.cell{
+    color: rgb(86,254,226);
+  }
  &::before {
    //去除底部白线
    left: 0;
@ -1296,6 +1481,9 @@ export default {
                font-size: 18px;
                color: #ffffff;
              }
+              .number{
+                color: rgb(86,254,226);
+              }
            }
          }
        }
@ -1448,6 +1636,7 @@ export default {
        line-height: 52px;
        text-align: left;
        text-indent: 26px;
+        
      }
    };
   .one{
@ -1479,7 +1668,163 @@ export default {
      width: 100%;
      height: calc(100% - 52px);
    };
+  };
+  // .titleFont{
+  //     color: transparent ;
+  //     -webkit-background-clip: text;
+  //     background-clip: text ;
+  //     background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
+  // }
+  //弹窗样式
+  .componentShow{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 111;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.8);
  }
+  .realTimeAlarm{
+    width: 517px;
+    height: 136px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin:0 auto;
+    top: 40%;
+    background: url('../assets/images/realTimeAlarmKuang.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .content{
+      color: #ffffff;
+      width: 75%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 4%;
+    }
+  }
+  .alarmInformation{
+    width: 517px;
+    height: 304px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin:0 auto;
+    top: 28%;
+    background: url('../assets/images/baojingxinxiKuang.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 10px 13px;
+    .top{
+          height: 10%;
+          width: 91%;
+          display: flex;
+          align-content: flex-start;
+          justify-content: space-between;
+          .title{
+            font-size: 20px;
+            font-weight: 900;
+             color: transparent ;
+            -webkit-background-clip: text;
+            background-clip: text ;
+            background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
+          }
+    }
+    .content{
+      height: 85%;
+     width: 100%;
+     .user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table__header {
+    height: 48px;
+    background: url("../assets/images/tableBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  /deep/ .el-table__header th {
+    border: none;
+    padding: 0;
+    height: 40px;
+    .cell {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around
+    }
+    &.el-table__cell.is-leaf {
+      border: none !important;
+    }
+  }
+  /deep/ .el-table tr {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent !important;
+    border: none;
+    color: #ffffff;
+  }
+  /deep/ .el-table__body td .cell {
+    white-space: nowrap !important;
+    // word-break: break-all;
+  }
+  /deep/ .el-table th.el-table__cell>.cell{
+    color: #FFFFFF;
+  }
+/deep/.el-table .el-table__cell{
+    padding: 3px 0
+}
+  &::before {
+    //去除底部白线
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+  }
+  .el-table::before{
+    background-color: transparent;
+  }
+::v-deep .el-table .el-table__body tr.el-table__row td{
+  background: rgba(79, 218, 255, 0.1) !important;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
+  background: rgba(79, 218, 255, 0.06) !important;
+}
+}
+ 
+    }
+  }
+  .dateSelect{
+    display: flex;
+    font-size:12px;
+    background: url("../assets/images/dateKuang.png") no-repeat;
+    background-size: 100% 100%;
+    height: 25px;
+    width: 61px;
+    align-items: center;
+  }
+  .active{
+    width: 32px;
+    height: 25px;
+    color: rgb(78,230,207);
+    background: url("../assets/images/dateAction.png") no-repeat;
+    background-size: 100% 100%;
+    line-height: 26px;
+    }
 }
 </style>
 <style lang="less">
@ -1504,7 +1849,19 @@ export default {
 .el-input__inner::-webkit-input-placeholder{
   color: rgb(78,230,207) // 初始化的文字颜色
 }
-
+.el-input__inner{
+  color: rgb(78,230,207);
 }

+}
+.el-select-dropdown{
+  background-color: rgba(14,30,46,0.5) !important;
+  border: 1px solid  rgba(45,143,148,0.5) !important ;
+  .el-select-dropdown__item{
+    color: rgb(78,230,207) !important;
+  }
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: rgb(18,54,87) !important;
+}
+}
 </style>
--- a/src/views/HomePop/ringMainUnit.vue
+++ b/src/views/HomePop/ringMainUnit.vue
@ -0,0 +1,725 @@
+<template>
+  <div class="ringMainUnit">
+      <div class="top">
+          <div class="title">{{ringMainUnit}}</div>
+          <div class="close">
+            <img
+               @click="handleClose"
+                src="@/assets/images/close.png"
+                style="cursor: pointer"
+                />
+          </div>
+      </div>
+      <div class="main">
+            <el-tabs v-model="activeName" @tab-click="handleClick" style="height:4%">
+            <el-tab-pane label="设备信息" name="first">
+            </el-tab-pane>
+            <el-tab-pane label="红外视频/现场照片" name="second"></el-tab-pane>
+        </el-tabs>
+        <div  v-if="activeName == 'first'" style="height:100%;width:100%">
+            <div class="basic">
+                <div class="title" style="margin-top:10px">基本信息</div>
+                <div class="content">
+                    <div class="information">
+                            <div class="informationContent">环网柜名称&nbsp;&nbsp;&nbsp;&nbsp;{{ringMainUnit}}</div>
+                            <div class="informationContent">环网柜编号&nbsp;&nbsp;&nbsp;&nbsp;125-569-0321-0</div>
+                            <div class="informationContent">IP地址&nbsp;&nbsp;&nbsp;&nbsp;192.134.0.0</div>
+                            <div class="informationContent">总间隔&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXX</div>
+                    </div>
+                </div>
+            </div>
+            <div class="earlyWarning">
+                <div class="title">预警信息</div>
+                <div class="content">
+                    <div class="information">
+                            <div class="informationContent">
+                                <img src="@/assets/images/shiliangIcon1.png"/>
+                                电缆沟水位&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxx</div>
+                            <div class="informationContent">
+                                <img src="@/assets/images/shiliangIcon2.png"/>
+                                小电流接地故障报警&nbsp;&nbsp;&nbsp;&nbsp;报警</div>
+                    </div>
+                </div>
+            </div>
+            <div class="interval">
+                <div class="title">间隔监测</div>
+                <div class="table user_skills">
+          <el-table
+            :data="tableData"
+            style="width: 100%; height: 100%"
+            :header-cell-style="{ 'text-align': 'center' }"
+            :cell-style="{ 'text-align': 'center' }"
+            stripe
+          >
+            <el-table-column  prop="name" label="" align="center" width="150">
+            </el-table-column>
+            <el-table-column prop="phase" label="相位" >
+            </el-table-column>
+            <el-table-column prop="interval1" label="间隔1">
+            </el-table-column>
+            <el-table-column prop="interval2" label="间隔2">
+            </el-table-column>
+            <el-table-column prop="interval3" label="间隔3">
+            </el-table-column>
+            <el-table-column prop="interval4" label="间隔4">
+            </el-table-column>
+            <el-table-column prop="interval5" label="间隔5">
+            </el-table-column>
+            <el-table-column prop="interval6" label="间隔6">
+            </el-table-column>
+            <el-table-column prop="interval7" label="间隔7">
+            </el-table-column>
+            <el-table-column prop="interval8" label="间隔8">
+            </el-table-column>
+          </el-table>
+         </div>
+            </div>
+            <div class="intervalData">
+                <el-tabs v-model="intervalName" @tab-click="intervalClick">
+                    <el-tab-pane label="间隔1局放数据" name="first"></el-tab-pane>
+                    <el-tab-pane label="间隔2局放数据" name="second"></el-tab-pane>
+                    <el-tab-pane label="间隔3局放数据" name="three"></el-tab-pane>
+                    <el-tab-pane label="间隔4局放数据" name="four"></el-tab-pane>
+                    <el-tab-pane label="间隔5局放数据" name="five"></el-tab-pane>
+                    <el-tab-pane label="间隔6局放数据" name="six"></el-tab-pane>
+                    <el-tab-pane label="间隔7局放数据" name="seven"></el-tab-pane>
+                    <el-tab-pane label="间隔8局放数据" name="eight"></el-tab-pane>
+                </el-tabs>
+                <div id="intervalShow"></div>
+            </div>
+        </div>
+        
+        <div class="InfraredVideo" v-if="activeName == 'second'" style="height:96%;width:100%">
+            <div class="title">
+                 <el-tabs :tab-position="tabPosition" v-model="InfraredName" style="height:100%">
+                    <el-tab-pane label="间隔1" v-for="(item,index) in vectorgraphData" :key="index">
+                    <span slot="label" style="display: flex;align-items: center;" @click="InfraredClick(index)">
+                        <img :src="item.vectorgraph"/>
+                        <span style="margin-left:10px;font-size:19px" :style="{ color: item.color}">{{item.name}}</span>
+                    </span>
+                    </el-tab-pane>
+                    <div class="content" v-show="photoShow">
+                      <div v-for="(item,index) in photoList" :key="index" style="margin-top:40px">
+                          <img :src="item.photo"/>
+                      </div>
+                    </div>
+                    <div class="content1" v-show="videoShow">
+                          <video-player
+                            class="video-player vjs-custom-skin"
+                            style="heght:100%;width:100%"
+                            ref="VideoPlayer"
+                            :playsinline="true"
+                            :options="playerOptions"
+                            > 
+                          </video-player>
+                    </div>
+                </el-tabs>
+                
+            </div>
+            
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import {getDevice} from "../../api/index.js";
+export default {
+   name:"ringMainUnit",
+   props:['ringMainUnit'],
+   data(){
+       return {
+         photoShow: true,
+         videoShow: false,
+         deviceId:'',
+        tabPosition: 'left',
+        activeName: 'first',
+        intervalName:'first',
+        InfraredName:'first',
+        vectorgraphData:[
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔1',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔2',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔3',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔4',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔5',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔6',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔7',
+                color:'rgb(60,127,127)'
+            },
+            {
+                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
+                name:'间隔8',
+                color:'rgb(60,127,127)'
+            },
+        ],
+        
+        tableData:[
+            {
+                name:'',
+                phase:'A',
+                interval1:'25',
+                interval2:'25',
+                interval3:'25',
+                interval4:'25',
+                interval5:'25',
+                interval6:'25',
+                interval7:'25',
+                interval8:'25',
+            },
+             {
+                name:'电压/KV',
+                phase:'B',
+                interval1:'25',
+                interval2:'25',
+                interval3:'25',
+                interval4:'25',
+                interval5:'25',
+                interval6:'25',
+                interval7:'25',
+                interval8:'25',
+            },
+             {
+                name:'',
+                phase:'C',
+                interval1:'25',
+                interval2:'25',
+                interval3:'25',
+                interval4:'25',
+                interval5:'25',
+                interval6:'25',
+                interval7:'25',
+                interval8:'25',
+            },
+        ],
+        echartsData : {
+        time: ["0点", "1点", "2点", "3点", "4点", "5点",
+        "6点","7点","8点","9点","10点","11点","12点","13点",
+        "14点","15点","16点","17点","18点","19点","20点","21点",
+        "22点","23点"
+        ],
+        num: ["-40", "-60", "-22", "-85", "-50", "-40",
+        "-40", "-60", "-22", "-85", "-50", "-40",
+        "-40", "-60", "-22", "-85", "-50", "-40",
+        "-40", "-60", "-22", "-85", "-50", "-40",
+        ],
+        },
+        photoList:[
+            {
+                photo: '',
+            },
+        ],
+         playerOptions: {
+        height: 400,
+        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+        autoplay: false, // 如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: 'zh-CN',
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: require('../../assets/videos/video.mp4'), // url地址
+          }
+        ],
+        poster: require('../../assets/images/sun.png'), // 你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true // 全屏按钮
+        }
+         }
+    }
+   },
+   mounted(){
+       this.intervalShow()
+      console.log(this.ringMainUnit);
+   },
+   methods:{
+       handleClick(tab) {
+         let that = this;
+        if (tab.index == 0) {
+            this.activeName =  'first'
+        }else if (tab.index == 1) {
+            this.activeName =  'second'
+            getDevice({
+              action : 'querydevice',
+              device_name : that.ringMainUnit
+            }).then((res)=>{
+              console.log(res.data.data.device.devcie_id);
+              let deviceId = res.data.data.device.devcie_id
+              getDevice(
+              {
+                action : 'querymaterial',
+                device_id : deviceId
+              }).then((res)=>{
+                console.log(res.data.data,"素材");
+                this.photoList = Object.keys(res.data.data).map((item,index)=>{
+                  let photoUrl = 'http://172.16.1.254:3111'+ res.data.data[index].url
+                return {photo:photoUrl}
+                })
+              })
+            })
+            
+            
+        }
+      },
+      intervalClick(tab){
+          if (tab.index == 0) {
+            this.intervalName =  'first'
+        }else if (tab.index == 1) {
+            this.intervalName =  'second'
+            // this.echartsData.time = ['lala','momo']
+            // this.echartsData.num = ['12','90']
+            // this.intervalShow()
+        }else if (tab.index == 2) {
+            this.intervalName =  'three'
+        }else if (tab.index == 3) {
+            this.intervalName =  'four'
+        }else if (tab.index == 4) {
+            this.intervalName =  'five'
+        }else if (tab.index == 5) {
+            this.intervalName =  'six'
+        }else if (tab.index == 6) {
+            this.intervalName =  'seven'
+        }else if (tab.index == 7) {
+            this.intervalName =  'eight'
+        }
+      },
+      InfraredClick(index){
+          Object.keys(this.vectorgraphData).forEach((key) => {
+        this.vectorgraphData[key].vectorgraph = require("@/assets/images/shiliangIcon4.png");
+        this.vectorgraphData[key].color = "rgb(60,127,127)";
+        if (key == index) {
+          this.vectorgraphData[
+            index
+          ].vectorgraph = require("@/assets/images/shiliangIcon3.png");
+          this.vectorgraphData[index].color = "#56fefe";
+          this.photoShow = false,
+          this.videoShow = true
+        }
+      });
+      },
+       handleClose() {
+      this.$parent.componentShow = "";
+      this.$parent.modelOthers = false;
+      // this.$emit("closeStatus", this.closeStatus)
+      },
+      //图
+       intervalShow(){
+      let that = this;
+      var data = this.echartsData
+      var myChart = this.$echarts.init(document.getElementById("intervalShow"));
+      var option = {
+        tooltip: {
+            trigger: "axis",
+         
+    },
+        grid: {
+            top: "10%",
+            left: "3%",
+            right: "3%",
+            bottom: "10%",
+            // containLabel: true
+        },
+        xAxis: [
+            {
+            type: "category",
+            boundaryGap: true,
+            axisLine: {
+                //坐标轴轴线相关设置。数学上的x轴
+                show: true,
+                lineStyle: {
+                color: 'color:"#93dcfe"',
+                },
+            },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#93dcfe",
+          margin: 15,
+        },
+        formatter: function (data) {
+          return data;
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: data.time,
+    },
+  ],
+  yAxis: [
+    {
+    //   min: 0,
+    //   max: 100,
+    name: "dbm",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(147,220,254,0.3)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#93dcfe",
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#93dcfe",
+        },
+        // formatter: function (value) {
+        //   if (value === 0) {
+        //     return value;
+        //   }
+        //   return value + "%";
+        // },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "注册总量",
+      type: "line",
+      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 8,
+      lineStyle: {
+        normal: {
+          color: "#1f93fa", // 线条颜色
+        },
+        borderColor: "rgba(0,0,0,.4)",
+      },
+      itemStyle: {
+        color: "#1f93fa",
+        borderColor: "#1f93fa",
+        borderWidth: 2,
+      },
+      label: {
+        normal: {
+          show: false,
+          position: "top",
+          formatter: [" {a|{c}%}"].join(","),
+          rich: {
+            a: {
+              color: "#fff",
+              align: "center",
+            },
+          },
+        },
+      },
+      tooltip: {
+        show: true,
+      },
+      
+      data: data.num,
+    },
+  ],
+};
+      myChart.setOption(option);
+    }
+   }
+}
+</script>
+
+<style lang="less" scoped>
+//表格
+.user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table__header {
+    height: 48px;
+    background: url("../../assets/images/intervalTable.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  /deep/ .el-table__header th {
+    border: none;
+    padding: 0;
+    height: 40px;
+    .cell {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around
+    }
+    &.el-table__cell.is-leaf {
+      border: none !important;
+    }
+  }
+  /deep/ .el-table tr {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent !important;
+    border: none;
+    color: #ffffff;
+  }
+  /deep/ .el-table__body td .cell {
+    white-space: nowrap !important;
+    // word-break: break-all;
+  }
+  /deep/ .el-table th.el-table__cell>.cell{
+    color: rgb(86,254,226);
+  }
+/deep/.el-table .el-table__cell{
+    padding: 3px 0
+}
+  &::before {
+    //去除底部白线
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+  }
+}
+ .el-table::before{
+    background-color: transparent;
+  }
+::v-deep .el-table .el-table__body tr.el-table__row td{
+  background: rgba(79, 218, 255, 0.1) !important;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
+  background: rgba(79, 218, 255, 0.06) !important;
+}
+.ringMainUnit{
+  width: 1511px;
+  height: 1071px;
+  background: url("../../assets/images/ringMainUnitKuang.png") no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: fadeInDown 0.3s;
+  animation: fadeInDown 0.3s;
+  padding: 15px 25px;
+  display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+  .top{
+    height: 4%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title{
+        font-size: 22px;
+        font-weight: 700;
+      color: transparent ;
+      -webkit-background-clip: text;
+      background-clip: text ;
+      background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
+    }
+  }
+  .main{
+      height: 95%;
+      width: 100%;
+    //   border: 1px solid blue;
+      .basic{
+          height: 8.8%;
+          width: 100%;
+        //   border: 1px solid red;
+          .title{
+             height:  27%;
+             width: 100%;
+            //  border: 1px solid yellow;
+             color:rgb(86,244,254);
+             display: flex;
+          }
+          .content{
+              height: 73%;
+              width: 100%;
+              background:url("../../assets/images/basicFrame.png")no-repeat;
+              display: flex;
+            background-size: 100% 100%;
+            justify-content: space-around;
+              .information{
+                  color:#ffffff;
+                      height: 100%;
+                      width: 96%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .informationContent{
+                        height: 35px;
+                        background: url("../../assets/images/cardSquare.png") no-repeat;
+                        background-size: 100% 100%;
+                    }
+              }
+          }
+      }
+      .earlyWarning{
+          height: 8.8%;
+          width: 100%;
+          margin-top: 10px;
+        //   border: 1px solid red;
+          .title{
+             height:  27%;
+             width: 100%;
+            //  border: 1px solid yellow;
+             color:rgb(86,244,254);
+             display: flex;
+          }
+          .content{
+              height: 73%;
+              width: 100%;
+              background:url("../../assets/images/basicFrame.png")no-repeat;
+              display: flex;
+            background-size: 100% 100%;
+            justify-content: flex-start;
+              .information{
+                  color:#ffffff;
+                      height: 100%;
+                      width: 44%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    display: flex;
+                    align-items: center;
+                    -webkit-box-pack: justify;
+                    padding-left: 24px;
+                    .informationContent{
+                        height: 35px;
+                        background: url("../../assets/images/cardSquare.png") no-repeat;
+                        background-size: 100% 100%;
+                    }
+              }
+          }
+      }
+       .interval{
+          height: 40%;
+          width: 100%;
+          margin-top: 10px;
+          .title{
+             height:  7%;
+             width: 100%;
+             color:rgb(86,244,254);
+             display: flex;
+          }
+          .table{
+              height: 85%;
+            // border: 1px solid red;
+              background: url("../../assets/images/intervalFrame.png") no-repeat;
+              background-size: 100% 100%;
+              padding: 15px 20px;
+          }
+      }
+      .intervalData{
+          height: 33%;
+          margin-top: 10px;
+          padding-left: 10px ;
+           background: url("../../assets/images/intervalFrame.png") no-repeat;
+         /deep/ .el-tabs__nav-wrap::after{
+                background-color: transparent !important;
+            }
+            #intervalShow{
+                width: 100%;
+                height: calc(100% - 54px);
+            }
+      }
+      .InfraredVideo{
+          .title{
+              height: 100%;
+              .content{
+                  display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+              }
+          }
+          /deep/ .el-tabs__item{
+              margin-top: 20px;
+              padding: 0 30px;
+          }
+      }
+  }
+}
+/**
+下拉显示动画效果
+*/
+@keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    opacity: 1;
+  }
+}
+</style>
+<style lang="less">
+.el-tabs__item:hover{
+    color:#56fefe !important;
+}
+.el-tabs__item.is-active{
+  color:#56fefe !important;
+}
+.el-tabs__item {
+    color: rgb(60,127,127) !important;
+}
+
+.el-tabs__active-bar{
+    background-color: transparent !important;
+    background: url("../../assets/images/ringMainGH.png") no-repeat;
+    background-size: 100% 100%;
+    bottom: -5px !important;
+    height: 19px !important;
+}
+.el-tabs__nav-wrap::after{
+ background-color: rgb(38,114,120) !important;
+}
+</style>
--- a/src/views/stationBuilding.vue
+++ b/src/views/stationBuilding.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="stationBuilding">
+      <video-player
+      class="video-player vjs-custom-skin"
+      style="heght:100%;width:100%"
+      ref="VideoPlayer"
+      :playsinline="true"
+      :options="playerOptions"
+      > 
+      </video-player>
+  </div>
+</template>
+
+<script>
+export default {
+   name:"stationBuilding",
+   data() {
+  	  return {
+ // 视频播放器配置
+      playerOptions: {
+        height: 400,
+        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+        autoplay: false, // 如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: 'zh-CN',
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: require('../assets/videos/video.mp4'), // url地址
+          }
+        ],
+        poster: require('../assets/images/sun.png'), // 你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true // 全屏按钮
+        }
+      }
+	}
+}
+}
+</script>
+
+<style lang="less" scoped>
+.stationBuilding{
+  width: 1722px;
+  height: 982px;
+  background: url("../assets/images/stationBuildingKuang.png") no-repeat;
+  background-size: 100% 100%;
+  padding: 15px 25px;
+  z-index: 100;
+}
+
+</style>
				`@ -0,0 +1 @@`
				`{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}`