829 lines
26 KiB
Vue
829 lines
26 KiB
Vue
<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">{{equipmentName}}名称 {{ringMainUnit}}</div>
|
||
<div class="informationContent">{{equipmentName}}编号 {{deviceInformation.deivce_bianhao}}</div>
|
||
<div class="informationContent">IP地址 {{deviceInformation.deivce_ip}}</div>
|
||
<div class="informationContent">总间隔 {{deviceInformation.zjg}}</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:'20',
|
||
interval3:'24',
|
||
interval4:'23',
|
||
interval5:'24',
|
||
interval6:'22',
|
||
interval7:'21',
|
||
interval8:'29',
|
||
},
|
||
{
|
||
name:'电压/KV',
|
||
phase:'B',
|
||
interval1:'25',
|
||
interval2:'20',
|
||
interval3:'24',
|
||
interval4:'23',
|
||
interval5:'24',
|
||
interval6:'22',
|
||
interval7:'21',
|
||
interval8:'29',
|
||
},
|
||
{
|
||
name:'',
|
||
phase:'C',
|
||
interval1:'21',
|
||
interval2:'25',
|
||
interval3:'23',
|
||
interval4:'27',
|
||
interval5:'24',
|
||
interval6:'28',
|
||
interval7:'22',
|
||
interval8:'21',
|
||
},
|
||
{
|
||
name:'',
|
||
phase:'A',
|
||
interval1:'21',
|
||
interval2:'25',
|
||
interval3:'23',
|
||
interval4:'27',
|
||
interval5:'24',
|
||
interval6:'28',
|
||
interval7:'22',
|
||
interval8:'21',
|
||
},
|
||
{
|
||
name:'电流/A',
|
||
phase:'B',
|
||
interval1:'25',
|
||
interval2:'20',
|
||
interval3:'24',
|
||
interval4:'23',
|
||
interval5:'24',
|
||
interval6:'22',
|
||
interval7:'21',
|
||
interval8:'29',
|
||
},
|
||
{
|
||
name:'',
|
||
phase:'C',
|
||
interval1:'21',
|
||
interval2:'25',
|
||
interval3:'23',
|
||
interval4:'27',
|
||
interval5:'24',
|
||
interval6:'28',
|
||
interval7:'22',
|
||
interval8:'21',
|
||
},
|
||
{
|
||
name:'',
|
||
phase:'A',
|
||
interval1:'21',
|
||
interval2:'25',
|
||
interval3:'23',
|
||
interval4:'27',
|
||
interval5:'24',
|
||
interval6:'28',
|
||
interval7:'22',
|
||
interval8:'21',
|
||
},
|
||
{
|
||
name:'温度/℃',
|
||
phase:'B',
|
||
interval1:'25',
|
||
interval2:'20',
|
||
interval3:'24',
|
||
interval4:'23',
|
||
interval5:'24',
|
||
interval6:'22',
|
||
interval7:'21',
|
||
interval8:'29',
|
||
},
|
||
{
|
||
name:'',
|
||
phase:'C',
|
||
interval1:'25',
|
||
interval2:'20',
|
||
interval3:'24',
|
||
interval4:'23',
|
||
interval5:'24',
|
||
interval6:'22',
|
||
interval7:'21',
|
||
interval8:'29',
|
||
},
|
||
],
|
||
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 // 全屏按钮
|
||
}
|
||
},
|
||
deviceInformation:{},
|
||
equipmentName:''
|
||
}
|
||
},
|
||
mounted(){
|
||
this.intervalShow(),
|
||
getDevice({
|
||
action : 'querydevice',
|
||
device_name : this.ringMainUnit
|
||
}).then((res)=>{
|
||
if (res.data.data != null) {
|
||
this.deviceInformation = res.data.data
|
||
}
|
||
|
||
})
|
||
this.equipmentName = this.ringMainUnit.substring(this.ringMainUnit.length -3,this.ringMainUnit.length)
|
||
if(this.equipmentName.substring(this.equipmentName.length -2,this.equipmentName.length) == '箱变'){
|
||
this.equipmentName = '箱变'
|
||
}
|
||
},
|
||
methods:{
|
||
handleClick(tab) {
|
||
let that = this;
|
||
if (tab.index == 0) {
|
||
this.activeName = 'first'
|
||
this.$nextTick(()=>{
|
||
this.intervalClick(tab)
|
||
})
|
||
|
||
}else if (tab.index == 1) {
|
||
this.activeName = 'second'
|
||
|
||
getDevice({
|
||
action : 'querydevice',
|
||
device_name : that.ringMainUnit
|
||
}).then((res)=>{
|
||
if (res.data.data.pic != null) {
|
||
this.photoList = Object.keys(res.data.data.pic).map((item,index)=>{
|
||
let photoUrl = 'http://111.229.30.246:3111'+ res.data.data.pic[index].url
|
||
return {photo:photoUrl}
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
},
|
||
intervalClick(tab){
|
||
if (tab.index == 0) {
|
||
this.intervalName = 'first'
|
||
this.intervalShow()
|
||
}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/ .is-scrolling-none {
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
overflow-x: scroll;
|
||
}
|
||
/deep/ .is-scrolling-none::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
/deep/.el-table--scrollable-y ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
/deep/.el-table--scrollable-x ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
/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: 5px 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>
|