代码提交

2022-11-09 08:48:50 +08:00 · 2022-11-04 17:58:27 +08:00
56 changed files with 16996 additions and 56 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
@ -5,14 +5,14 @@
        xxx电力可视化系统
      </div>
      <div class="middle">
-        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)">{{item}}</div>
+        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index">{{item}}</div>
      </div>
      <div class="right">
        <div class="time">
          <span>11月30日 周一</span>
          <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
        </div>
-        <div class="weather" v-for="(item,index) in weatherArr">
+        <div class="weather" v-for="(item,index) in weatherArr" :key="index">
          <div class="pic">
            <img :src="item.pic" alt="">
          </div>
@ -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/btnFangDa.png
+++ b/src/assets/images/btnFangDa.png
--- a/src/assets/images/btnTiShi.png
+++ b/src/assets/images/btnTiShi.png
--- a/src/assets/images/btnkuang.png
+++ b/src/assets/images/btnkuang.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/ditu.png
+++ b/src/assets/images/ditu.png
--- a/src/assets/images/fenzhixiang.png
+++ b/src/assets/images/fenzhixiang.png
--- a/src/assets/images/huanwanggui.png
+++ b/src/assets/images/huanwanggui.png
--- a/src/assets/images/iconCard.png
+++ b/src/assets/images/iconCard.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/kaibisuo.png
+++ b/src/assets/images/kaibisuo.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/selectCard.png
+++ b/src/assets/images/selectCard.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/sousuo.png
+++ b/src/assets/images/sousuo.png
--- a/src/assets/images/sousuoKuang.png
+++ b/src/assets/images/sousuoKuang.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/images/xiangbian.png
+++ b/src/assets/images/xiangbian.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
--- 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>
Author	SHA1	Message	Date
lixiaobang	dc90cc9dc3	代码提交	2022-11-09 08:48:50 +08:00
王军	ec23188f23	代码提交	2022-11-04 17:58:27 +08:00
				`@ -0,0 +1 @@`
				`{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}`