Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_
This commit is contained in:
lll
commit
89bdd78ec4
|
|
@ -0,0 +1,21 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./registerServiceWorker";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
Vue.config.productionTip = false;
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import moment from 'moment'; //引入
|
||||
// 全局引入Echarts;
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
// 然后挂载在vue原型上;
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./registerServiceWorker";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
Vue.config.productionTip = false;
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import moment from 'moment'; //引入
|
||||
Vue.prototype.$moment = moment ; //挂载到原型
|
||||
// 全局引入Echarts;
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
// 然后挂载在vue原型上;
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./registerServiceWorker";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
Vue.config.productionTip = false;
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import moment from 'moment'; //引入
|
||||
Vue.prototype.$moment = moment ; //挂载到原型
|
||||
moment.locale("zh-CN"); //汉化，否则显示日期格式是国外的日期格式
|
||||
// 全局引入Echarts;
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
// 然后挂载在vue原型上;
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./registerServiceWorker";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
Vue.config.productionTip = false;
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
// 全局引入Echarts;
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
// 然后挂载在vue原型上;
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,983 @@
|
|||
<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>
|
||||
<video :src="videoSource" controls autoplay></video>
|
||||
<div id="dqsxtxx">
|
||||
<div class="headers"></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">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</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">
|
||||
<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>
|
||||
|
||||
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",
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
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 "";
|
||||
},
|
||||
},
|
||||
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() {
|
||||
// this.defineEcharts("sstpf", this.option1);
|
||||
// this.defineEcharts("yysl", this.option2);
|
||||
// this.defineEcharts("nysl", this.option3);
|
||||
// this.defineEcharts("nhfx", this.option4);
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
width: 1041px;
|
||||
height: 586px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 184px;
|
||||
height: 37px;
|
||||
font-size: 22px;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 166px;
|
||||
height: 33px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: 20px;
|
||||
transform: translate(50%, 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;
|
||||
align-content: space-around;
|
||||
|
||||
.spjk_one {
|
||||
width: 551px;
|
||||
height: 383px;
|
||||
background: #1969A8;
|
||||
opacity: 1;
|
||||
|
||||
.jiankong {
|
||||
width: 100%;
|
||||
height: 323px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 125px;
|
||||
|
||||
// background: #6C1C00;
|
||||
// opacity: 1;
|
||||
// border: 1px solid #FF4200;
|
||||
.con1,
|
||||
.con2 {
|
||||
width: 100%;
|
||||
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>
|
||||
|
||||
|
|
@ -0,0 +1,984 @@
|
|||
<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>
|
||||
<video :src="videoSource" controls autoplay></video>
|
||||
<div id="dqsxtxx">
|
||||
<div class="headers"></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">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</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">
|
||||
<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>
|
||||
|
||||
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",
|
||||
}
|
||||
],
|
||||
videoSource:"",
|
||||
};
|
||||
},
|
||||
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 "";
|
||||
},
|
||||
},
|
||||
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() {
|
||||
// this.defineEcharts("sstpf", this.option1);
|
||||
// this.defineEcharts("yysl", this.option2);
|
||||
// this.defineEcharts("nysl", this.option3);
|
||||
// this.defineEcharts("nhfx", this.option4);
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
width: 1041px;
|
||||
height: 586px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 184px;
|
||||
height: 37px;
|
||||
font-size: 22px;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 166px;
|
||||
height: 33px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: 20px;
|
||||
transform: translate(50%, 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;
|
||||
align-content: space-around;
|
||||
|
||||
.spjk_one {
|
||||
width: 551px;
|
||||
height: 383px;
|
||||
background: #1969A8;
|
||||
opacity: 1;
|
||||
|
||||
.jiankong {
|
||||
width: 100%;
|
||||
height: 323px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 125px;
|
||||
|
||||
// background: #6C1C00;
|
||||
// opacity: 1;
|
||||
// border: 1px solid #FF4200;
|
||||
.con1,
|
||||
.con2 {
|
||||
width: 100%;
|
||||
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>
|
||||
|
||||
|
|
@ -0,0 +1,984 @@
|
|||
<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>
|
||||
<video :src="videoSource" controls autoplay class="videos"></video>
|
||||
<div id="dqsxtxx">
|
||||
<div class="headers"></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">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</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">
|
||||
<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>
|
||||
|
||||
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",
|
||||
}
|
||||
],
|
||||
videoSource:"",
|
||||
};
|
||||
},
|
||||
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 "";
|
||||
},
|
||||
},
|
||||
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() {
|
||||
// this.defineEcharts("sstpf", this.option1);
|
||||
// this.defineEcharts("yysl", this.option2);
|
||||
// this.defineEcharts("nysl", this.option3);
|
||||
// this.defineEcharts("nhfx", this.option4);
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
width: 1041px;
|
||||
height: 586px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 184px;
|
||||
height: 37px;
|
||||
font-size: 22px;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 166px;
|
||||
height: 33px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: 20px;
|
||||
transform: translate(50%, 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;
|
||||
align-content: space-around;
|
||||
|
||||
.spjk_one {
|
||||
width: 551px;
|
||||
height: 383px;
|
||||
background: #1969A8;
|
||||
opacity: 1;
|
||||
|
||||
.jiankong {
|
||||
width: 100%;
|
||||
height: 323px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 125px;
|
||||
|
||||
// background: #6C1C00;
|
||||
// opacity: 1;
|
||||
// border: 1px solid #FF4200;
|
||||
.con1,
|
||||
.con2 {
|
||||
width: 100%;
|
||||
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>
|
||||
|
||||
|
|
@ -0,0 +1,988 @@
|
|||
<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>
|
||||
<video :src="videoSource" controls autoplay class="videos"></video>
|
||||
<div id="dqsxtxx">
|
||||
<div class="headers"></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">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</div>
|
||||
</div>
|
||||
<div class="spjk_one">
|
||||
<div class="jiankong"></div>
|
||||
<div class="title">SP锅炉</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">
|
||||
<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>
|
||||
|
||||
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",
|
||||
}
|
||||
],
|
||||
videoSource:"",
|
||||
};
|
||||
},
|
||||
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 "";
|
||||
},
|
||||
},
|
||||
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() {
|
||||
// this.defineEcharts("sstpf", this.option1);
|
||||
// this.defineEcharts("yysl", this.option2);
|
||||
// this.defineEcharts("nysl", this.option3);
|
||||
// this.defineEcharts("nhfx", this.option4);
|
||||
},
|
||||
};
|
||||
</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";
|
||||
}
|
||||
}
|
||||
.videos{
|
||||
width: 1041px;
|
||||
height: 586px;
|
||||
opacity: 1;
|
||||
}
|
||||
#dqsxtxx {
|
||||
margin-top: 50px;
|
||||
width: 1151px;
|
||||
height: 800px;
|
||||
|
||||
.headers {
|
||||
width: 1041px;
|
||||
height: 586px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 184px;
|
||||
height: 37px;
|
||||
font-size: 22px;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 166px;
|
||||
height: 33px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: 20px;
|
||||
transform: translate(50%, 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;
|
||||
align-content: space-around;
|
||||
|
||||
.spjk_one {
|
||||
width: 551px;
|
||||
height: 383px;
|
||||
background: #1969A8;
|
||||
opacity: 1;
|
||||
|
||||
.jiankong {
|
||||
width: 100%;
|
||||
height: 323px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
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: 125px;
|
||||
|
||||
// background: #6C1C00;
|
||||
// opacity: 1;
|
||||
// border: 1px solid #FF4200;
|
||||
.con1,
|
||||
.con2 {
|
||||
width: 100%;
|
||||
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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue