代码提交
This commit is contained in:
parent
ec23188f23
commit
dc90cc9dc3
File diff suppressed because it is too large
Load Diff
|
|
@ -17,6 +17,7 @@
|
||||||
"v-fit-columns": "^0.2.0",
|
"v-fit-columns": "^0.2.0",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-router": "^3.0.3",
|
"vue-router": "^3.0.3",
|
||||||
|
"vue-video-player": "^5.0.2",
|
||||||
"vuex": "^3.0.1"
|
"vuex": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
|
|
@ -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 }
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -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>
|
||||||
13
src/App.vue
13
src/App.vue
|
|
@ -29,8 +29,10 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import MinxinItem from "./mixins"
|
||||||
export default {
|
export default {
|
||||||
name: 'home',
|
name: 'home',
|
||||||
|
mixins:[MinxinItem],
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
routerTitle:['首页','20kv','35kv','站房智辅'],
|
routerTitle:['首页','20kv','35kv','站房智辅'],
|
||||||
|
|
@ -46,7 +48,13 @@ export default {
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
handleChange(index){
|
handleChange(index){
|
||||||
|
let that = this;
|
||||||
this.routerActive = index
|
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{
|
.left{
|
||||||
width: 815px;
|
width: 815px;
|
||||||
height: 97px;
|
height: 97px;
|
||||||
background: url('./assets/images/titleBg.png') no-repeat;
|
background: url('./assets/images/titleBg1.png') no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-size: 44px;
|
font-size: 44px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -149,5 +157,8 @@ export default {
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 100px);
|
height: calc(100% - 100px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,3 +16,9 @@ export const getLine = (params) => {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
// 查询设备素材
|
||||||
|
export const getDevice = (params) => {
|
||||||
|
return axios.get('/Handler/Device.ashx', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 845 B |
Binary file not shown.
|
After Width: | Height: | Size: 289 B |
Binary file not shown.
|
After Width: | Height: | Size: 448 B |
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 B |
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
|
@ -12,6 +12,14 @@ import * as echarts from 'echarts'
|
||||||
Vue.prototype.$echarts = 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'
|
import moment from 'moment'
|
||||||
//定义一个全局过滤器实现日期格式化
|
//定义一个全局过滤器实现日期格式化
|
||||||
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
|
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
|
||||||
|
|
|
||||||
|
|
@ -17,5 +17,10 @@ export default new Router({
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import ('./views/Home.vue')
|
component: () => import ('./views/Home.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/stationBuilding',
|
||||||
|
name: 'stationBuilding',
|
||||||
|
component: () => import ('./views/stationBuilding.vue')
|
||||||
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,8 @@
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="one" style="height: 405px">
|
<div class="one" style="height: 405px">
|
||||||
<div class="cartitle">盐都区供电公司概况</div>
|
<div class="cartitle">
|
||||||
|
<div class="titleFont">盐都区供电公司概况</div></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<div class="total">
|
<div class="total">
|
||||||
|
|
@ -10,8 +11,13 @@
|
||||||
<img src="@/assets/images/rouer.png" alt="" />
|
<img src="@/assets/images/rouer.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<span style="font-size: 45px; font-weight: 600">304</span>
|
<span style="font-size: 45px; font-weight: 600;
|
||||||
<span style="font-size: 18px">配电路线</span>
|
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>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
|
@ -39,7 +45,12 @@
|
||||||
<img src="@/assets/images/routerLong.png" alt="" />
|
<img src="@/assets/images/routerLong.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="num">
|
<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>
|
<span style="font-size: 18px">路线长度</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -85,14 +96,39 @@
|
||||||
<el-table-column prop="why" label="故障原因" width="80">
|
<el-table-column prop="why" label="故障原因" width="80">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sucss" label="重合成功" width="60">
|
<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>
|
||||||
<el-table-column prop="unsucss" label="重合不成" width="80">
|
<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>
|
||||||
<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>
|
||||||
<el-table-column prop="address" label="接地" width="60">
|
<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>
|
||||||
<el-table-column prop="total" label="合计" width="60">
|
<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-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -100,13 +136,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
<div class="one" style="height: 635px; width: 100%">
|
<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="unityBtn">
|
||||||
<div
|
<div
|
||||||
class="btn"
|
class="btn"
|
||||||
:class="{ btnAct: btnActive == index }"
|
:class="{ btnAct: btnActive == index }"
|
||||||
v-for="(item, index) in btnArr"
|
v-for="(item, index) in btnArr"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="handleUnity(index)"
|
@click="handleUnity(index,item)"
|
||||||
>
|
>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -118,7 +156,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="unityEnlargeBtn">
|
<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"/>
|
<img :src="item.icon" style="margin:7px"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -126,10 +164,10 @@
|
||||||
<div class="unitySuosou">
|
<div class="unitySuosou">
|
||||||
<img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
|
<img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
|
||||||
</div>
|
</div>
|
||||||
<el-select v-model="value" placeholder="请选择线路">
|
<el-select v-model="value" clearable placeholder="请选择线路" >
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="(item,index) in options"
|
||||||
:key="item.value"
|
:key="index"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
|
|
@ -188,7 +226,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="one" style="height: 310px">
|
<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="top">
|
||||||
<div class="topContent" v-for="(item,index) in topContent" :key="index">
|
<div class="topContent" v-for="(item,index) in topContent" :key="index">
|
||||||
<div style="color:#ffffff">{{item.name}}</div>
|
<div style="color:#ffffff">{{item.name}}</div>
|
||||||
|
|
@ -206,16 +252,78 @@
|
||||||
<div id="detailedThree"></div>
|
<div id="detailedThree"></div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCompanyInfo } from "../api/index.js";
|
import { getCompanyInfo,getLine} from "../api/index.js";
|
||||||
|
import ringMainUnit from "./HomePop/ringMainUnit.vue"
|
||||||
export default {
|
export default {
|
||||||
name: "home",
|
name: "home",
|
||||||
components: {},
|
components: {
|
||||||
|
ringMainUnit,//环网柜弹窗
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dateList: ['周','月'],
|
||||||
|
acolor: true,//是否展示颜色
|
||||||
|
currentIndex : -1,
|
||||||
|
alarmInformationData:[
|
||||||
|
{
|
||||||
|
name:'告警信息',
|
||||||
|
date:'2022'
|
||||||
|
}],
|
||||||
|
alarmInformationShow: false, //报警详情信息弹窗
|
||||||
|
realTimeAlarmShow: false,//实时报警弹窗
|
||||||
|
modelOthers: false,
|
||||||
|
componentShow: "",
|
||||||
CompanyInfo: {},
|
CompanyInfo: {},
|
||||||
tableData: [
|
tableData: [
|
||||||
{
|
{
|
||||||
|
|
@ -256,10 +364,12 @@ export default {
|
||||||
icon: require("@/assets/images/btnFangDa.png"),
|
icon: require("@/assets/images/btnFangDa.png"),
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options: [{
|
options: [
|
||||||
value: '选项1',
|
{
|
||||||
label: '黄金糕'
|
value:'',
|
||||||
}],
|
label:''
|
||||||
|
}
|
||||||
|
],
|
||||||
value: '',
|
value: '',
|
||||||
topContent:[
|
topContent:[
|
||||||
{
|
{
|
||||||
|
|
@ -275,7 +385,7 @@ export default {
|
||||||
count:'0.22%'
|
count:'0.22%'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
device:''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -283,15 +393,54 @@ export default {
|
||||||
getCompanyInfo().then((res) => {
|
getCompanyInfo().then((res) => {
|
||||||
this.CompanyInfo = res.data.data;
|
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.detailedOne();
|
||||||
this.detailedThree();
|
this.detailedThree();
|
||||||
this.detailedTwo();
|
this.detailedTwo();
|
||||||
this.detailedFour();
|
this.detailedFour();
|
||||||
this.detailedFive();
|
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: {
|
methods: {
|
||||||
handleUnity(index) {
|
//调用unity方法
|
||||||
|
handleUnity(index,item) {
|
||||||
this.btnActive = index;
|
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() {
|
detailedOne() {
|
||||||
let dataList = [1,1, 4, 6,5, 9, 4,5,0,3]
|
let dataList = [1,1, 4, 6,5, 9, 4,5,0,3]
|
||||||
|
|
@ -1174,8 +1323,41 @@ export default {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
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>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
@ -1216,6 +1398,9 @@ export default {
|
||||||
white-space: nowrap !important;
|
white-space: nowrap !important;
|
||||||
// word-break: break-all;
|
// word-break: break-all;
|
||||||
}
|
}
|
||||||
|
/deep/ .el-table th.el-table__cell>.cell{
|
||||||
|
color: rgb(86,254,226);
|
||||||
|
}
|
||||||
&::before {
|
&::before {
|
||||||
//去除底部白线
|
//去除底部白线
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -1296,6 +1481,9 @@ export default {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
.number{
|
||||||
|
color: rgb(86,254,226);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1448,6 +1636,7 @@ export default {
|
||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-indent: 26px;
|
text-indent: 26px;
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
.one{
|
.one{
|
||||||
|
|
@ -1479,6 +1668,162 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 52px);
|
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>
|
||||||
|
|
@ -1504,7 +1849,19 @@ export default {
|
||||||
.el-input__inner::-webkit-input-placeholder{
|
.el-input__inner::-webkit-input-placeholder{
|
||||||
color: rgb(78,230,207) // 初始化的文字颜色
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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">环网柜名称 {{ringMainUnit}}</div>
|
||||||
|
<div class="informationContent">环网柜编号 125-569-0321-0</div>
|
||||||
|
<div class="informationContent">IP地址 192.134.0.0</div>
|
||||||
|
<div class="informationContent">总间隔 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"/>
|
||||||
|
电缆沟水位 xxxxxxx</div>
|
||||||
|
<div class="informationContent">
|
||||||
|
<img src="@/assets/images/shiliangIcon2.png"/>
|
||||||
|
小电流接地故障报警 报警</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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue