1588 lines
40 KiB
Vue
1588 lines
40 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="a">
|
||
<img
|
||
src="../../assets/img/可调负荷/可调图标--未选中.png"
|
||
alt=""
|
||
@click="sendMessageToCSharp"
|
||
/>
|
||
</div>
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/智能运维-监控.png" class="title" />
|
||
<div class="dqsxtxx">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>当前摄像头信息</p>
|
||
</div>
|
||
<div id="dqsxtxx">
|
||
<div class="headers">
|
||
<iframe
|
||
:src="'webs/index.html' + '?1?221.214.127.18'"
|
||
frameborder="0"
|
||
width="100%"
|
||
height="100%"
|
||
ref="videos"
|
||
></iframe>
|
||
<p class="h_footer">
|
||
<!-- <span class="time">{{ dates }}</span> -->
|
||
<img
|
||
src="../../assets/ZNYWJK/放大.png"
|
||
alt=""
|
||
class="quanping"
|
||
@click="handleFullScreen"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<h2>摄像头信息</h2>
|
||
<div class="footers">
|
||
<div class="one">
|
||
<p>鲁西平阴厂区全景</p>
|
||
</div>
|
||
<div class="two">
|
||
<p>网络数据</p>
|
||
</div>
|
||
<div class="three">
|
||
<p>1920*1080</p>
|
||
</div>
|
||
<div class="four">
|
||
<p>5ms</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spjk">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>摄像头视频监控</p>
|
||
</div>
|
||
<div id="spjk">
|
||
<div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
|
||
<div class="jiankong">
|
||
<iframe
|
||
:src="'webs/index.html?' + item.channel + '?' + item.ip"
|
||
frameborder="0"
|
||
width="100%"
|
||
height="100%"
|
||
></iframe>
|
||
</div>
|
||
<div class="spjk_title">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sxtlb">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>摄像头列表</p>
|
||
</div>
|
||
<div id="sxtlb">
|
||
<div class="data">
|
||
<span
|
||
:class="res == '生产监控系统' ? 'active' : ''"
|
||
@click="res = '生产监控系统'"
|
||
>生产监控系统</span
|
||
>
|
||
<span
|
||
:class="res == '配电室监控系统' ? 'active' : ''"
|
||
@click="res = '配电室监控系统'"
|
||
>配电室监控系统</span
|
||
>
|
||
</div>
|
||
<div class="con">
|
||
<div class="con1" v-for="(item,index) in jklist1">
|
||
<p>监控{{index+1}}：{{ item.name }}</p>
|
||
<p>{{ item.date }}</p>
|
||
</div>
|
||
<!-- <div class="con1">
|
||
<p>监控17：回转窑南侧</p>
|
||
<p>07:12:18</p>
|
||
</div>
|
||
<div class="con2">
|
||
<p>监控16：篦冷机</p>
|
||
<p>07:12:18</p>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="wdjc1">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>温度监测1</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div class="selects">
|
||
<el-select
|
||
v-model="value"
|
||
:popper-append-to-body="false"
|
||
class="custom-select"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:popper-append-to-body="false"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div id="wdjc1">
|
||
<div class="hpfj">
|
||
<h2>1#后排风机</h2>
|
||
<div class="nei">
|
||
<div class="ones" v-for="(item, index) in fjlist" :key="index">
|
||
<p>{{ item.name }}</p>
|
||
<p class="green">{{ item.count }}</p>
|
||
<p class="bianhao">编号：{{ item.bianhao }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hpfj">
|
||
<h2>1#窑主电机</h2>
|
||
<div class="nei">
|
||
<div class="ones" v-for="(item, index) in fjlist2" :key="index">
|
||
<p>{{ item.name }}</p>
|
||
<p class="green">{{ item.count }}</p>
|
||
<p class="bianhao">编号：{{ item.bianhao }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wdjc2">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>温度监测2</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div class="selects">
|
||
<el-select
|
||
v-model="value"
|
||
:popper-append-to-body="false"
|
||
class="custom-select"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:popper-append-to-body="false"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div id="wdjc2">
|
||
<div class="controls">
|
||
<h3>智能操控装置</h3>
|
||
<ul>
|
||
<li v-for="item in list">
|
||
<span>{{ item.name }}：</span>
|
||
<span class="blue">{{ item.count }}</span>
|
||
<span>℃</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="controls">
|
||
<h3>智能操控装置</h3>
|
||
<ul>
|
||
<li v-for="item in list">
|
||
<span>{{ item.name }}：</span>
|
||
<span class="blue">{{ item.count }}</span>
|
||
<span>℃</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import screenfull from "screenfull";
|
||
export default {
|
||
data() {
|
||
return {
|
||
fjlist: [
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#后排风机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
],
|
||
fjlist2: [
|
||
{
|
||
name: "1#窑主电机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#窑主电机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#窑主电机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
{
|
||
name: "1#窑主电机上动触头A相",
|
||
count: "0.0",
|
||
bianhao: "139671",
|
||
},
|
||
],
|
||
list: [
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
{
|
||
name: "上静触头A相温度",
|
||
count: "0.0",
|
||
},
|
||
],
|
||
options: [
|
||
{
|
||
value: "选项1",
|
||
label: "线路测温",
|
||
},
|
||
{
|
||
value: "选项2",
|
||
label: "设备测温",
|
||
},
|
||
{
|
||
value: "选项3",
|
||
label: "线路测温",
|
||
},
|
||
{
|
||
value: "选项4",
|
||
label: "线路测温",
|
||
},
|
||
{
|
||
value: "选项5",
|
||
label: "线路测温",
|
||
},
|
||
],
|
||
value: "设备测温",
|
||
res: "生产监控系统",
|
||
tableData: [
|
||
{
|
||
date1: "水泥单位产品综合能耗",
|
||
date2: "80kgce/t",
|
||
date3: "84kgce/t",
|
||
date4: "5%",
|
||
},
|
||
{
|
||
date1: "水泥大内产品综合电耗",
|
||
date2: "40kWh/t",
|
||
date3: "53kWh/t",
|
||
date4: "32.5%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合能耗",
|
||
date2: "100kgce/t",
|
||
date3: "114kgce/t",
|
||
date4: "14%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合电耗",
|
||
date2: "48kWh/t",
|
||
date3: "55kWh/t",
|
||
date4: "14.58%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合煤耗",
|
||
date2: "94kgce/",
|
||
date3: "108kgce/",
|
||
date4: "14.89%",
|
||
},
|
||
],
|
||
devices: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: true,
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: false,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: false,
|
||
date3: "45.00",
|
||
},
|
||
],
|
||
sxtlist: [
|
||
{
|
||
channel: "9",
|
||
ip: "221.214.127.18",
|
||
name: "2号窑尾取样",
|
||
},
|
||
{
|
||
channel: "12",
|
||
ip: "221.214.127.18",
|
||
name: "水泥散12#发货口",
|
||
},
|
||
{
|
||
channel: "6",
|
||
ip: "221.214.127.18",
|
||
name: "1#回转窑",
|
||
},
|
||
{
|
||
channel: "10",
|
||
ip: "221.214.127.18",
|
||
name: "辊压机",
|
||
},
|
||
{
|
||
channel: "3",
|
||
ip: "221.214.127.18",
|
||
name: "2#窑",
|
||
},
|
||
|
||
{
|
||
channel: "13",
|
||
ip: "221.214.127.18",
|
||
name: "垃圾处理北门外",
|
||
},
|
||
{
|
||
channel: "5",
|
||
ip: "221.214.127.18",
|
||
name: "2号窑头监测房",
|
||
},
|
||
{
|
||
channel: "15",
|
||
ip: "221.214.127.18",
|
||
name: "3号窑头监测房",
|
||
},
|
||
],
|
||
// dates: new Date(),
|
||
isFullScreenTag: false,
|
||
jklist1:[
|
||
{
|
||
name:"鲁西平阴厂区全景",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑头取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑头取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑头监测房",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"2号窑头监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"鲁西平阴1号2号3号",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑尾取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑尾取样处",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"辅材均化棚北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号水泥磨取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原煤均化棚",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑头监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑头在线监测",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"3号生料库顶取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑尾取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号煤磨在线监测",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号水泥在线监测",
|
||
date:"07:12:18",
|
||
},
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
// window.vuplex.postMessage({
|
||
// type: "Tog",
|
||
// message: "智能运维_true",
|
||
// });
|
||
window.vuplex.postMessage("智能运维-监控");
|
||
this.$router.push("/znyw");
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
handleFullScreen() {
|
||
screenfull.toggle(this.$refs.videos);
|
||
},
|
||
},
|
||
created() {
|
||
// if (window.vuplex) {
|
||
// addMessageListener();
|
||
// } else {
|
||
// window.addEventListener("vuplexready", addEventListener);
|
||
// } function addEventListener() {
|
||
// window.vuplex.addEventListener("message", function (event) {
|
||
// let json = event.data;
|
||
// console.log("JSON received" + json);
|
||
// })
|
||
// }
|
||
},
|
||
mounted() {},
|
||
watch:{
|
||
res:{
|
||
handler(to){
|
||
console.log(to);
|
||
if(to=="配电室监控系统"){
|
||
this.jklist1=[
|
||
{
|
||
name:"水泥磨西二排南向北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨高浓度收尘",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨西四排南向北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨东小配电间",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"水泥磨西3排南向北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨高密吸尘",
|
||
date:"07:12:18",
|
||
},
|
||
//2
|
||
{
|
||
name:"水泥磨西二排北向南",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨西1排北向南",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨西2排北向南",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨西南角",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"水泥磨西1排南向北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"水泥磨西四排北向南",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"二期窑尾东向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"二期窑尾弱电间",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"二期窑尾西向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2期煤磨西2排北向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"2期煤磨西1排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2期窑头西排1北向",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"2期窑头西排3北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2期窑头西排5北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2期窑头西排4北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期窑头西排4北向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"2期窑头弱电间",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期窑头西三排",
|
||
date:"07:12:18",
|
||
}, //2
|
||
{
|
||
name:"1期窑头西一排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期窑头西四排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2期窑头西二排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期窑头弱电间",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"1期生料磨西四排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西北配电间",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"1期生料磨西南配电间",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨弱电间",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西三排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西四排南向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"1期窑头西二排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期煤磨西一排",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"1期生料磨西三排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西一排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西一排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西二排南向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"1期煤磨西二排",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1期生料磨西二排北向",
|
||
date:"07:12:18",
|
||
}, //2
|
||
{
|
||
name:"二期原料磨西二排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"一期窑尾东向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"一期窑尾弱电间",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原材料配电室西向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"矿山1",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原材料弱电间",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"矿山东头北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原材料配电室东向1",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"变电所-枪东",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨西三排南向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"原生料磨西二排南向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨北头配电间",
|
||
date:"07:12:18",
|
||
},
|
||
//3
|
||
{
|
||
name:"原生料磨西一排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨西一排南向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨西四排北向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨西四排南向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"原生料磨弱电机房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨南小机房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原生料磨西三排北向",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"1期窑尾西向",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1#框架电力仓库",
|
||
date:"07:12:18",
|
||
},
|
||
]
|
||
}else{
|
||
this.jklist1=[
|
||
{
|
||
name:"鲁西平阴厂区全景",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑头取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑头取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑头监测房",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"2号窑头监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"鲁西平阴1号2号3号",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"2号窑尾取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号窑尾取样处",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"辅材均化棚北",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号水泥磨取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑尾监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"原煤均化棚",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑头监测房",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑头在线监测",
|
||
date:"07:12:18",
|
||
}, {
|
||
name:"3号生料库顶取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号窑尾取样处",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"3号煤磨在线监测",
|
||
date:"07:12:18",
|
||
},
|
||
{
|
||
name:"1号水泥在线监测",
|
||
date:"07:12:18",
|
||
},
|
||
]
|
||
}
|
||
},
|
||
deep: true, // 深度观察监听
|
||
immediate: true, // 第一次初始化渲染就可以监听到
|
||
}
|
||
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
display: flex;
|
||
background-image: url(../../assets/img/左遮罩.png),
|
||
url(../../assets/img/右遮罩.png);
|
||
padding-top: 400px;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.a {
|
||
position: absolute;
|
||
width: 1300px;
|
||
z-index: 2;
|
||
top: 420px;
|
||
right: 480px;
|
||
z-index: 100;
|
||
|
||
img {
|
||
margin-right: 102px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.dqsxtxx {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
#dqsxtxx {
|
||
margin-top: 50px;
|
||
width: 1151px;
|
||
height: 800px;
|
||
.headers {
|
||
margin-left: 50px;
|
||
width: 1041px;
|
||
height: 586px;
|
||
opacity: 1;
|
||
position: relative;
|
||
.videos {
|
||
width: 1041px;
|
||
height: 586px;
|
||
opacity: 1;
|
||
}
|
||
.videos1 {
|
||
width: 1041px;
|
||
height: 586px;
|
||
opacity: 1;
|
||
display: none;
|
||
}
|
||
.h_footer {
|
||
width: 1040px;
|
||
height: 58px;
|
||
background: #1f1f1f;
|
||
opacity: 0.45;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
.time {
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 20px;
|
||
width: 300px;
|
||
}
|
||
.quanping {
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
margin-left: 40px !important;
|
||
margin-top: 10px;
|
||
width: 184px;
|
||
height: 37px;
|
||
font-size: 22px;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.footers {
|
||
width: 100%;
|
||
height: 200px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
align-content: space-around;
|
||
|
||
.one {
|
||
width: 497px;
|
||
height: 80px;
|
||
background: url(../../assets/ZNYWJK/1.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
p {
|
||
width: 236px;
|
||
height: 33px;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
// left: 30%;
|
||
top: 50%;
|
||
margin-left: 96px;
|
||
transform: translateY(50%);
|
||
}
|
||
}
|
||
|
||
.two {
|
||
width: 497px;
|
||
height: 80px;
|
||
background: url(../../assets/ZNYWJK/2.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
p {
|
||
width: 166px;
|
||
height: 33px;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: 40px;
|
||
transform: translate(50%, 50%);
|
||
}
|
||
}
|
||
|
||
.three {
|
||
width: 497px;
|
||
height: 80px;
|
||
background: url(../../assets/ZNYWJK/3.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
p {
|
||
width: 166px;
|
||
height: 33px;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: 20px;
|
||
transform: translate(50%, 50%);
|
||
}
|
||
}
|
||
|
||
.four {
|
||
width: 497px;
|
||
height: 80px;
|
||
background: url(../../assets/ZNYWJK/4.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
p {
|
||
width: 166px;
|
||
height: 33px;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: 40px;
|
||
transform: translate(50%, 50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.spjk {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#spjk {
|
||
width: 1155px;
|
||
height: 800px;
|
||
margin-top: 50px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
overflow-y: auto;
|
||
// 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
}
|
||
// 滑块
|
||
::-webkit-scrollbar-thumb {
|
||
width: 14px;
|
||
height: 241px;
|
||
border-radius: 10px;
|
||
background: url(../../assets/ZNYWJK/滑动条.png);
|
||
background-size: cover;
|
||
}
|
||
// 轨道
|
||
::-webkit-scrollbar-track {
|
||
border-radius: 10px;
|
||
background: url(../../assets/ZNYWJK/滑动条.png);
|
||
background-size: cover;
|
||
background-color: #f00;
|
||
}
|
||
/* 选中滚动条按钮 */
|
||
::-webkit-scrollbar-button{
|
||
background-color: #f00;
|
||
display: block;
|
||
}
|
||
|
||
/* 选中向上箭头 */
|
||
::-webkit-scrollbar-button:start{
|
||
display: none !important;
|
||
height: 0px;
|
||
}
|
||
|
||
/* 选中向下箭头 */
|
||
::-webkit-scrollbar-button:end{
|
||
display: none !important;
|
||
height: 0px;
|
||
}
|
||
.spjk_one {
|
||
width: 551px;
|
||
height: 383px;
|
||
// background: #1969A8;
|
||
margin-bottom: 20px;
|
||
opacity: 1;
|
||
border: none;
|
||
|
||
.jiankong {
|
||
width: 100%;
|
||
height: 323px;
|
||
video {
|
||
border: none;
|
||
width: 551px;
|
||
height: 301px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.spjk_title {
|
||
width: 100%;
|
||
height: 60px;
|
||
font-size: 28px;
|
||
text-align: center;
|
||
font-family: MicrosoftYaHei;
|
||
background: #1969a8;
|
||
color: #ffffff;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sxtlb {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#sxtlb {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 28px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
|
||
span {
|
||
width: 240px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%
|
||
);
|
||
}
|
||
}
|
||
|
||
.con {
|
||
margin-top: 100px;
|
||
width: 1120px;
|
||
height: 145px;
|
||
overflow: auto;
|
||
// background: #6C1C00;
|
||
// opacity: 1;
|
||
// border: 1px solid #FF4200;
|
||
.con1,
|
||
.con2 {
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
height: 70px;
|
||
padding: 0px 80px 0px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.con1 {
|
||
background: url(../../assets/ZNYWJK/蓝.png);
|
||
}
|
||
|
||
.con2 {
|
||
margin-top: 20px;
|
||
background: url(../../assets/ZNYWJK/蓝.png);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.wdjc1 {
|
||
position: relative;
|
||
margin-top: 120px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 100px;
|
||
position: relative;
|
||
|
||
.selects {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: -60px;
|
||
// font-size: 30px;
|
||
z-index: 1000;
|
||
|
||
//下拉框的颜色改变
|
||
.custom-select /deep/ .el-input__inner {
|
||
color: #fff !important;
|
||
font-size: 20px;
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
border: 2px solid #06cdff !important;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
/* // 设置下拉框的背景颜色及边框属性； */
|
||
.custom-select /deep/.el-select-dropdown {
|
||
// 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
border: 2px solid #06cdff !important;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
/* // 设置下拉框的字体属性及背景颜色； */
|
||
.custom-select /deep/ .el-select-dropdown__item {
|
||
font-size: 18px;
|
||
color: #fff;
|
||
font-weight: 200;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
// /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
|
||
.custom-select /deep/.el-select-dropdown__list {
|
||
/* padding-top: 10px; */
|
||
padding: 0;
|
||
}
|
||
|
||
/* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
|
||
.custom-select /deep/.el-popper[x-placement^="bottom"] {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
|
||
.custom-select /deep/.el-popper .popper__arrow,
|
||
.custom-select /deep/.el-popper .popper__arrow::after {
|
||
display: none;
|
||
}
|
||
|
||
/* // 设置鼠标悬停在下拉框列表的悬停色； */
|
||
.custom-select /deep/.el-select-dropdown__item:hover {
|
||
color: rgb(213, 215, 230);
|
||
background-color: #326aff;
|
||
}
|
||
|
||
.custom-select /deep/ .el-select-dropdown {
|
||
position: absolute;
|
||
top: 40px !important;
|
||
left: 0px !important;
|
||
}
|
||
}
|
||
|
||
#wdjc1 {
|
||
width: 1156px;
|
||
height: 960px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
|
||
.hpfj {
|
||
width: 1154px;
|
||
height: 471px;
|
||
background: url(../../assets/ZNYWJK/风机框.png);
|
||
background-size: cover;
|
||
margin-bottom: 40px;
|
||
|
||
// background: #0184AA;
|
||
// opacity: 1;
|
||
// border: 1px solid #0EE0ED;
|
||
h2 {
|
||
color: #fff;
|
||
padding: 20px;
|
||
}
|
||
|
||
.nei {
|
||
width: 100%;
|
||
height: 380px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
align-content: space-around;
|
||
flex-wrap: wrap;
|
||
|
||
// flex-direction: column;
|
||
.ones {
|
||
margin-left: 12px;
|
||
width: 350px;
|
||
padding-left: 10px;
|
||
padding-top: 10px;
|
||
height: 163px;
|
||
font-size: 30px;
|
||
margin-right: 20px;
|
||
box-sizing: border-box;
|
||
background: url(../../assets/ZNYWJK/风机内框.png);
|
||
|
||
// background: #00F0FF;
|
||
// opacity: 0.2;
|
||
// border: NaNpx solid #00F0FF;
|
||
.green {
|
||
text-align: center;
|
||
color: #51ff72;
|
||
height: 80px;
|
||
font-size: 40px;
|
||
line-height: 80px;
|
||
}
|
||
|
||
.bianhao {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.wdjc2 {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 120px;
|
||
position: relative;
|
||
|
||
.selects {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: -60px;
|
||
z-index: 1000;
|
||
|
||
//下拉框的颜色改变
|
||
.custom-select /deep/ .el-input__inner {
|
||
color: #fff !important;
|
||
font-size: 20px;
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
border: 2px solid #06cdff !important;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
/* // 设置下拉框的背景颜色及边框属性； */
|
||
.custom-select /deep/.el-select-dropdown {
|
||
// 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
border: 2px solid #06cdff !important;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
/* // 设置下拉框的字体属性及背景颜色； */
|
||
.custom-select /deep/.el-select-dropdown__item {
|
||
font-size: 18px;
|
||
color: #fff;
|
||
font-weight: 200;
|
||
background: #1d3349 !important;
|
||
}
|
||
|
||
// /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
|
||
.custom-select /deep/.el-select-dropdown__list {
|
||
/* padding-top: 10px; */
|
||
padding: 0;
|
||
}
|
||
|
||
/* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
|
||
.custom-select /deep/.el-popper[x-placement^="bottom"] {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
|
||
.custom-select /deep/.el-popper .popper__arrow,
|
||
.custom-select /deep/.el-popper .popper__arrow::after {
|
||
display: none;
|
||
}
|
||
|
||
/* // 设置鼠标悬停在下拉框列表的悬停色； */
|
||
.custom-select /deep/.el-select-dropdown__item:hover {
|
||
color: rgb(213, 215, 230);
|
||
background-color: #326aff;
|
||
}
|
||
|
||
.custom-select /deep/ .el-select-dropdown {
|
||
position: absolute;
|
||
top: 40px !important;
|
||
left: 0px !important;
|
||
}
|
||
}
|
||
|
||
#wdjc2 {
|
||
width: 1156px;
|
||
height: 883px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
h3 {
|
||
text-align: center;
|
||
font-size: 30px;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.controls {
|
||
width: 512px;
|
||
height: 883px;
|
||
background: url(../../assets/ZNYWJK/竖框.png);
|
||
|
||
ul {
|
||
width: 100%;
|
||
list-style: none;
|
||
box-sizing: border-box;
|
||
|
||
li {
|
||
width: 456px;
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
padding: 0px 30px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
font-size: 28px;
|
||
box-sizing: border-box;
|
||
background: url(../../assets/ZNYWJK/输入框.png);
|
||
|
||
.blue {
|
||
margin: 0px 20px 10px;
|
||
margin-left: 30px;
|
||
color: #0ee5ff;
|
||
font-size: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|