12-1
This commit is contained in:
lll
parent
ea5336da3a
commit
edfe05eda9
|
|
@ -1,17 +1,23 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
</head>
|
<title>
|
||||||
<body>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
<noscript>
|
</title>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
</head>
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
<body>
|
||||||
<!-- built files will be auto injected -->
|
<noscript>
|
||||||
</body>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
32
src/App.vue
32
src/App.vue
|
|
@ -1,9 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app"> <router-view /> </div>
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {},
|
||||||
|
mounted() {
|
||||||
|
if (window.vuplex) {
|
||||||
|
this.addMessageListener();
|
||||||
|
} else {
|
||||||
|
window.addEventListener("vuplexready", this.addMessageListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addMessageListener() {
|
||||||
|
let that = this;
|
||||||
|
window.vuplex.addEventListener("message", function (event) {
|
||||||
|
let json = event.data;
|
||||||
|
that.$router.push({
|
||||||
|
name: "pds1",
|
||||||
|
query: {
|
||||||
|
type: json,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -23,4 +46,3 @@
|
||||||
/* background: transparent; */
|
/* background: transparent; */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -57,8 +57,8 @@ const routes = [
|
||||||
},
|
},
|
||||||
//配电室
|
//配电室
|
||||||
{
|
{
|
||||||
path: "pds",
|
path: "pds1",
|
||||||
name: "pds",
|
name: "pds1",
|
||||||
component: () => import("../views/lll/PDS.vue"),
|
component: () => import("../views/lll/PDS.vue"),
|
||||||
},
|
},
|
||||||
//能源监测
|
//能源监测
|
||||||
|
|
|
||||||
|
|
@ -230,9 +230,7 @@ export let pdsJs = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "万吨仓电力室",
|
name: "万吨仓电力室",
|
||||||
list: [
|
list: ["污水处理"],
|
||||||
"污水处理",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "余热发电电力室",
|
name: "余热发电电力室",
|
||||||
|
|
@ -390,8 +388,8 @@ export let pdsJs = [
|
||||||
},
|
},
|
||||||
// 辅料处理配电室
|
// 辅料处理配电室
|
||||||
{
|
{
|
||||||
name:"辅料处理配电室",
|
name: "辅料处理配电室",
|
||||||
list:[
|
list: [
|
||||||
"电源进线",
|
"电源进线",
|
||||||
"251CA01AP01辅料智能抓斗电源",
|
"251CA01AP01辅料智能抓斗电源",
|
||||||
"721CA01AP01原煤智能抓斗电源",
|
"721CA01AP01原煤智能抓斗电源",
|
||||||
|
|
@ -407,8 +405,8 @@ export let pdsJs = [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"原料配料配电室",
|
name: "原料配料配电室",
|
||||||
list:[
|
list: [
|
||||||
"331RE01LP011#侧式刮板取料机电源",
|
"331RE01LP011#侧式刮板取料机电源",
|
||||||
"331RE02LP012#侧式刮板取料机电源",
|
"331RE02LP012#侧式刮板取料机电源",
|
||||||
"331RE02LP01SP2#侧式刮板取料机备用",
|
"331RE02LP01SP2#侧式刮板取料机备用",
|
||||||
|
|
@ -437,8 +435,8 @@ export let pdsJs = [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"石灰石破碎配电室",
|
name: "石灰石破碎配电室",
|
||||||
list:[
|
list: [
|
||||||
"电源进线",
|
"电源进线",
|
||||||
"照明电源",
|
"照明电源",
|
||||||
"备用抽屉柜",
|
"备用抽屉柜",
|
||||||
|
|
@ -458,8 +456,8 @@ export let pdsJs = [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"石灰石输送控制室1、2",
|
name: "石灰石输送控制室1、2",
|
||||||
list:[
|
list: [
|
||||||
"2A1BC02MT01带式输送机软起柜",
|
"2A1BC02MT01带式输送机软起柜",
|
||||||
"2A1BC01MT01带式输送机软起柜",
|
"2A1BC01MT01带式输送机软起柜",
|
||||||
"电源进线",
|
"电源进线",
|
||||||
|
|
@ -468,5 +466,5 @@ export let pdsJs = [
|
||||||
"2A1BC03MT01带式输送机软起柜",
|
"2A1BC03MT01带式输送机软起柜",
|
||||||
"电源进线",
|
"电源进线",
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,102 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content ">
|
<div class="content">
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="box1" @click="go1">
|
<div class="box1" @click="go1">
|
||||||
<img src="../assets/img/生产工艺按钮.png" v-show="flag1" alt="" class="tabbars1" />
|
<img
|
||||||
<img src="../assets/img/生产工艺按钮选中_hover.png" alt="" v-show="!flag1" class="tabbars1" />
|
src="../assets/img/生产工艺按钮.png"
|
||||||
|
v-show="flag1"
|
||||||
|
alt=""
|
||||||
|
class="tabbars1"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/生产工艺按钮选中_hover.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!flag1"
|
||||||
|
class="tabbars1"
|
||||||
|
/>
|
||||||
<p>生产工艺</p>
|
<p>生产工艺</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box2" @click="go2">
|
<div class="box2" @click="go2">
|
||||||
<img src="../assets/img/能源监测按钮 拷贝.png" alt="" v-show="flag2" class="tabbars2" />
|
<img
|
||||||
<img src="../assets/img/能源监测按钮 _hover.png" alt="" v-show="!flag2" class="tabbars2" />
|
src="../assets/img/能源监测按钮 拷贝.png"
|
||||||
|
alt=""
|
||||||
|
v-show="flag2"
|
||||||
|
class="tabbars2"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/能源监测按钮 _hover.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!flag2"
|
||||||
|
class="tabbars2"
|
||||||
|
/>
|
||||||
<p>能源监测</p>
|
<p>能源监测</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box3" @click="go3">
|
<div class="box3" @click="go3">
|
||||||
<img src="../assets/img/负荷管理按钮 .png" v-show="flag3" alt="" class="tabbars3" />
|
<img
|
||||||
<img src="../assets/img/负荷管理按钮 拷贝_hover.png" alt="" v-show="!flag3" class="tabbars3" />
|
src="../assets/img/负荷管理按钮 .png"
|
||||||
|
v-show="flag3"
|
||||||
|
alt=""
|
||||||
|
class="tabbars3"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/负荷管理按钮 拷贝_hover.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!flag3"
|
||||||
|
class="tabbars3"
|
||||||
|
/>
|
||||||
<p>负荷管理</p>
|
<p>负荷管理</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box4" @click="go4">
|
<div class="box4" @click="go4">
|
||||||
<img src="../assets/img/能效管理按钮 拷贝.png" alt="" v-show="flag4" class="tabbars4" />
|
<img
|
||||||
<img src="../assets/img/能效管理按钮_hover.png" alt="" v-show="!flag4" class="tabbars4" />
|
src="../assets/img/能效管理按钮 拷贝.png"
|
||||||
|
alt=""
|
||||||
|
v-show="flag4"
|
||||||
|
class="tabbars4"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/能效管理按钮_hover.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!flag4"
|
||||||
|
class="tabbars4"
|
||||||
|
/>
|
||||||
<p>能效管理</p>
|
<p>能效管理</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box5" @click="go5">
|
<div class="box5" @click="go5">
|
||||||
<img src="../assets/img/智能运维按钮 拷贝.png" alt="" v-show="flag5" class="tabbars5" />
|
<img
|
||||||
<img src="../assets/img/智能运维按_hover.png" v-show="!flag5" alt="" class="tabbars5" />
|
src="../assets/img/智能运维按钮 拷贝.png"
|
||||||
|
alt=""
|
||||||
|
v-show="flag5"
|
||||||
|
class="tabbars5"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/智能运维按_hover.png"
|
||||||
|
v-show="!flag5"
|
||||||
|
alt=""
|
||||||
|
class="tabbars5"
|
||||||
|
/>
|
||||||
<p>智能运维</p>
|
<p>智能运维</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box6" @click="go6">
|
<div class="box6" @click="go6">
|
||||||
<img src="../assets/img/碳资产管理.png" v-show="flag6" alt="" class="tabbars6" />
|
<img
|
||||||
<img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" v-show="!flag6" class="tabbars6" />
|
src="../assets/img/碳资产管理.png"
|
||||||
|
v-show="flag6"
|
||||||
|
alt=""
|
||||||
|
class="tabbars6"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/img/碳资产管理 拷贝_hover.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!flag6"
|
||||||
|
class="tabbars6"
|
||||||
|
/>
|
||||||
<p>碳资产管理</p>
|
<p>碳资产管理</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -73,7 +133,7 @@ export default {
|
||||||
this.flag4 = true;
|
this.flag4 = true;
|
||||||
this.flag5 = true;
|
this.flag5 = true;
|
||||||
this.flag6 = true;
|
this.flag6 = true;
|
||||||
// this.sendMessageToCSharp("生产工艺");
|
this.sendMessageToCSharp("生产工艺");
|
||||||
// this.$router.push(
|
// this.$router.push(
|
||||||
// "/znywjk",
|
// "/znywjk",
|
||||||
// () => {},
|
// () => {},
|
||||||
|
|
@ -87,11 +147,11 @@ export default {
|
||||||
this.flag4 = true;
|
this.flag4 = true;
|
||||||
this.flag5 = true;
|
this.flag5 = true;
|
||||||
this.flag6 = true;
|
this.flag6 = true;
|
||||||
// this.sendMessageToCSharp("能源监测");
|
this.sendMessageToCSharp("能源监测");
|
||||||
this.$router.push(
|
this.$router.push(
|
||||||
"/area",
|
"/area",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
go3() {
|
go3() {
|
||||||
|
|
@ -101,11 +161,11 @@ export default {
|
||||||
this.flag4 = true;
|
this.flag4 = true;
|
||||||
this.flag5 = true;
|
this.flag5 = true;
|
||||||
this.flag6 = true;
|
this.flag6 = true;
|
||||||
// this.sendMessageToCSharp("负荷管理");
|
this.sendMessageToCSharp("负荷管理");
|
||||||
this.$router.push(
|
this.$router.push(
|
||||||
"/fhgl",
|
"/fhgl",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
go4() {
|
go4() {
|
||||||
|
|
@ -115,11 +175,11 @@ export default {
|
||||||
this.flag4 = false;
|
this.flag4 = false;
|
||||||
this.flag5 = true;
|
this.flag5 = true;
|
||||||
this.flag6 = true;
|
this.flag6 = true;
|
||||||
// this.sendMessageToCSharp("能效管理");
|
this.sendMessageToCSharp("能效管理");
|
||||||
this.$router.push(
|
this.$router.push(
|
||||||
"/nxgl",
|
"/nxgl",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
go5() {
|
go5() {
|
||||||
|
|
@ -129,11 +189,11 @@ export default {
|
||||||
this.flag4 = true;
|
this.flag4 = true;
|
||||||
this.flag5 = false;
|
this.flag5 = false;
|
||||||
this.flag6 = true;
|
this.flag6 = true;
|
||||||
// this.sendMessageToCSharp("智能运维");
|
this.sendMessageToCSharp("智能运维");
|
||||||
this.$router.push(
|
this.$router.push(
|
||||||
"/znyw",
|
"/znyw",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
go6() {
|
go6() {
|
||||||
|
|
@ -146,8 +206,8 @@ export default {
|
||||||
// this.sendMessageToCSharp("碳资产管理");
|
// this.sendMessageToCSharp("碳资产管理");
|
||||||
this.$router.push(
|
this.$router.push(
|
||||||
"/tzcgl",
|
"/tzcgl",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="a">
|
<div class="a">
|
||||||
<img src="../../assets/img/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
|
<img
|
||||||
|
src="../../assets/img/可调图标--未选中.png"
|
||||||
|
alt=""
|
||||||
|
@click="sendMessageToCSharp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img src="../../assets/img/标题/负荷管理.png" class="title" />
|
<img src="../../assets/img/标题/负荷管理.png" class="title" />
|
||||||
|
|
@ -103,7 +107,10 @@
|
||||||
<div class="chartbox" v-for="item in list">
|
<div class="chartbox" v-for="item in list">
|
||||||
<span class="chartname">{{ item.name }}</span>
|
<span class="chartname">{{ item.name }}</span>
|
||||||
<div class="bigBox">
|
<div class="bigBox">
|
||||||
<div class="smallBox" :style="{ width: `${54 * item.value}px` }"></div>
|
<div
|
||||||
|
class="smallBox"
|
||||||
|
:style="{ width: `${54 * item.value}px` }"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ item.value * 100 }}kW</span>
|
<span>{{ item.value * 100 }}kW</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -267,7 +274,7 @@ export default {
|
||||||
//U3D交互的绑定
|
//U3D交互的绑定
|
||||||
sendMessageToCSharp() {
|
sendMessageToCSharp() {
|
||||||
window.vuplex.postMessage("负荷管理");
|
window.vuplex.postMessage("负荷管理");
|
||||||
this.$router.push('/kdfh');
|
this.$router.push("/kdfh");
|
||||||
},
|
},
|
||||||
BingTu() {
|
BingTu() {
|
||||||
// 复制代码
|
// 复制代码
|
||||||
|
|
@ -351,7 +358,20 @@ export default {
|
||||||
// const col = color[params.dataIndex];
|
// const col = color[params.dataIndex];
|
||||||
// 样式可以根据需要进行调整
|
// 样式可以根据需要进行调整
|
||||||
// return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
|
// return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
|
||||||
return '{name|' + params.name + "}" + `\n` + "\n" + '{myStyle|' + params.value + "}" + "\t" + "{name|" + "kw" + "}"
|
return (
|
||||||
|
"{name|" +
|
||||||
|
params.name +
|
||||||
|
"}" +
|
||||||
|
`\n` +
|
||||||
|
"\n" +
|
||||||
|
"{myStyle|" +
|
||||||
|
params.value +
|
||||||
|
"}" +
|
||||||
|
"\t" +
|
||||||
|
"{name|" +
|
||||||
|
"kw" +
|
||||||
|
"}"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
rich: {
|
rich: {
|
||||||
|
|
@ -361,10 +381,10 @@ export default {
|
||||||
},
|
},
|
||||||
myStyle: {
|
myStyle: {
|
||||||
color: color[0],
|
color: color[0],
|
||||||
fontWeight: 'bold',
|
fontWeight: "bold",
|
||||||
fontSize: 40,
|
fontSize: 40,
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
length: 88,
|
length: 88,
|
||||||
|
|
@ -683,16 +703,16 @@ export default {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.setLabel();
|
this.setLabel();
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// } function addEventListener() {
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
let json = event.data;
|
// let json = event.data;
|
||||||
console.log("JSON received" + json);
|
// console.log("JSON received" + json);
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
var chartDom = document.getElementById("main");
|
var chartDom = document.getElementById("main");
|
||||||
|
|
@ -1155,10 +1175,12 @@ export default {
|
||||||
.smallBox {
|
.smallBox {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(1, 191, 249, 1) 20%,
|
to right,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
rgba(68, 161, 201, 1) 100%,
|
||||||
|
rgba(42, 196, 243, 1) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1251,16 +1251,16 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// } function addEventListener() {
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
let json = event.data;
|
// let json = event.data;
|
||||||
console.log("JSON received" + json);
|
// console.log("JSON received" + json);
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.defineEcharts("nylx", this.option1);
|
this.defineEcharts("nylx", this.option1);
|
||||||
|
|
|
||||||
|
|
@ -272,16 +272,16 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// } function addEventListener() {
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
let json = event.data;
|
// let json = event.data;
|
||||||
console.log("JSON received" + json);
|
// console.log("JSON received" + json);
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -710,16 +710,16 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// } function addEventListener() {
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
let json = event.data;
|
// let json = event.data;
|
||||||
console.log("JSON received" + json);
|
// console.log("JSON received" + json);
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.defineEcharts("tpfqd", this.option1);
|
this.defineEcharts("tpfqd", this.option1);
|
||||||
|
|
|
||||||
|
|
@ -358,16 +358,16 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// } function addEventListener() {
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
let json = event.data;
|
// let json = event.data;
|
||||||
console.log("JSON received" + json);
|
// console.log("JSON received" + json);
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.defineEcharts("sstpf", this.option1);
|
// this.defineEcharts("sstpf", this.option1);
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
/>
|
/>
|
||||||
<img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
|
<img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
|
||||||
</div>
|
</div>
|
||||||
<div class="area">
|
<div class="areaBox" ref="areaBox">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -67,19 +67,7 @@ export default {
|
||||||
mei: false,
|
mei: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
sendMessageToCSharp(name) {
|
sendMessageToCSharp(name) {
|
||||||
window.vuplex.postMessage({
|
window.vuplex.postMessage({
|
||||||
|
|
@ -116,9 +104,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.area {
|
.areaBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -915,18 +915,6 @@ export default {
|
||||||
this.defineEcharts("tpfl", option);
|
this.defineEcharts("tpfl", option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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() {
|
mounted() {
|
||||||
this.defineEcharts("qcydl", this.option1);
|
this.defineEcharts("qcydl", this.option1);
|
||||||
this.defineEcharts("qcysl", this.option2);
|
this.defineEcharts("qcysl", this.option2);
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="imgLeft">
|
<div class="imgLeft">
|
||||||
<div @click="goOne('1号生产线')" :class="click1 == '1号生产线' ? 'active' : ''">
|
<div
|
||||||
|
@click="goOne('1号生产线')"
|
||||||
|
:class="click1 == '1号生产线' ? 'active' : ''"
|
||||||
|
>
|
||||||
1号生产线
|
1号生产线
|
||||||
</div>
|
</div>
|
||||||
<div @click="goOne('2号生产线')" :class="click1 == '2号生产线' ? 'active' : ''">
|
<div
|
||||||
|
@click="goOne('2号生产线')"
|
||||||
|
:class="click1 == '2号生产线' ? 'active' : ''"
|
||||||
|
>
|
||||||
2号生产线
|
2号生产线
|
||||||
</div>
|
</div>
|
||||||
<div @click="goOne('3号生产线')" :class="click1 == '3号生产线' ? 'active' : ''">
|
<div
|
||||||
|
@click="goOne('3号生产线')"
|
||||||
|
:class="click1 == '3号生产线' ? 'active' : ''"
|
||||||
|
>
|
||||||
3号生产线
|
3号生产线
|
||||||
</div>
|
</div>
|
||||||
<div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
|
<div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
|
||||||
|
|
@ -16,19 +25,34 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="imgRight">
|
<div class="imgRight">
|
||||||
<div @click="goTwo('破碎系统')" :class="click2 == '破碎系统' ? 'active' : ''">
|
<div
|
||||||
|
@click="goTwo('破碎系统')"
|
||||||
|
:class="click2 == '破碎系统' ? 'active' : ''"
|
||||||
|
>
|
||||||
破碎系统
|
破碎系统
|
||||||
</div>
|
</div>
|
||||||
<div @click="goTwo('生料系统')" :class="click2 == '生料系统' ? 'active' : ''">
|
<div
|
||||||
|
@click="goTwo('生料系统')"
|
||||||
|
:class="click2 == '生料系统' ? 'active' : ''"
|
||||||
|
>
|
||||||
生料系统
|
生料系统
|
||||||
</div>
|
</div>
|
||||||
<div @click="goTwo('回转窑系统')" :class="click2 == '回转窑系统' ? 'active' : ''">
|
<div
|
||||||
|
@click="goTwo('回转窑系统')"
|
||||||
|
:class="click2 == '回转窑系统' ? 'active' : ''"
|
||||||
|
>
|
||||||
回转窑系统
|
回转窑系统
|
||||||
</div>
|
</div>
|
||||||
<div @click="goTwo('煤磨系统')" :class="click2 == '煤磨系统' ? 'active' : ''">
|
<div
|
||||||
|
@click="goTwo('煤磨系统')"
|
||||||
|
:class="click2 == '煤磨系统' ? 'active' : ''"
|
||||||
|
>
|
||||||
煤磨系统
|
煤磨系统
|
||||||
</div>
|
</div>
|
||||||
<div @click="goTwo('水泥磨系统')" :class="click2 == '水泥磨系统' ? 'active' : ''">
|
<div
|
||||||
|
@click="goTwo('水泥磨系统')"
|
||||||
|
:class="click2 == '水泥磨系统' ? 'active' : ''"
|
||||||
|
>
|
||||||
水泥磨系统
|
水泥磨系统
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,9 +65,15 @@
|
||||||
<p>全厂实时电荷</p>
|
<p>全厂实时电荷</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
>年</span
|
||||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
|
>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div id="qcssdh"></div>
|
<div id="qcssdh"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,7 +86,10 @@
|
||||||
<div class="chartbox" v-for="item in list">
|
<div class="chartbox" v-for="item in list">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
<div class="bigBox">
|
<div class="bigBox">
|
||||||
<div class="smallBox" :style="{ width: `${35 * item.value}px` }"></div>
|
<div
|
||||||
|
class="smallBox"
|
||||||
|
:style="{ width: `${35 * item.value}px` }"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ item.value }}kWh</span>
|
<span>{{ item.value }}kWh</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -68,7 +101,12 @@
|
||||||
<p>总降拓扑图</p>
|
<p>总降拓扑图</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgBox1">
|
<div class="imgBox1">
|
||||||
<img src="../../assets/znyw/tpt.png" />
|
<el-image
|
||||||
|
v-for="item in arr"
|
||||||
|
:src="item.url"
|
||||||
|
:preview-src-list="item.srcList"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -101,14 +139,17 @@
|
||||||
<div class="chartbox" v-for="item in list1">
|
<div class="chartbox" v-for="item in list1">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
<div class="bigBox">
|
<div class="bigBox">
|
||||||
<div class="smallBox" :style="{ width: `${40 * item.value}px` }"></div>
|
<div
|
||||||
|
class="smallBox"
|
||||||
|
:style="{ width: `${40 * item.value}px` }"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ item.value }}kWh</span>
|
<span>{{ item.value }}kWh</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="area">
|
<div class="area1">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,6 +157,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { RouterView } from "vue-router";
|
import { RouterView } from "vue-router";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
import Viewer from "viewerjs";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -292,9 +334,39 @@ export default {
|
||||||
value: "3.27",
|
value: "3.27",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
arr: [
|
||||||
|
{
|
||||||
|
url: require("../../assets/tpt/总降电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/总降电力室.png")],
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
initViewer() {
|
||||||
|
this.viewer = new Viewer(this.$el, {
|
||||||
|
inline: false,
|
||||||
|
button: true,
|
||||||
|
navbar: true,
|
||||||
|
title: false,
|
||||||
|
toolbar: true,
|
||||||
|
tooltip: true,
|
||||||
|
movable: false,
|
||||||
|
zoomable: true,
|
||||||
|
rotatable: false,
|
||||||
|
scalable: true,
|
||||||
|
transition: true,
|
||||||
|
fullscreen: true,
|
||||||
|
keyboard: true,
|
||||||
|
url(image) {
|
||||||
|
console.log(image.src);
|
||||||
|
return image.src;
|
||||||
|
},
|
||||||
|
ready() {
|
||||||
|
console.log("Viewer is ready");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
defineEcharts(dom, option) {
|
defineEcharts(dom, option) {
|
||||||
var chartDom = document.getElementById(dom);
|
var chartDom = document.getElementById(dom);
|
||||||
var myChart = this.$echarts.init(chartDom);
|
var myChart = this.$echarts.init(chartDom);
|
||||||
|
|
@ -309,29 +381,29 @@ export default {
|
||||||
goOne(a) {
|
goOne(a) {
|
||||||
this.click2 = "";
|
this.click2 = "";
|
||||||
this.click1 = a;
|
this.click1 = a;
|
||||||
// this.sendMessageToCSharp(this.click1);
|
this.sendMessageToCSharp(this.click1);
|
||||||
if (this.click1 == "配电室") {
|
if (this.click1 == "配电室") {
|
||||||
this.$router.replace(
|
this.$router.replace(
|
||||||
"/area/nyjcd/pds",
|
"/area/nyjcd/pds",
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
this.$router.replace(
|
this.$router.replace(
|
||||||
`/area/nyjcd/scx1?type=${this.click1}`,
|
`/area/nyjcd/scx1?type=${this.click1}`,
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
goTwo(a) {
|
goTwo(a) {
|
||||||
this.click1 = "";
|
this.click1 = "";
|
||||||
this.click2 = a;
|
this.click2 = a;
|
||||||
// this.sendMessageToCSharp(this.click2);
|
this.sendMessageToCSharp(this.click2);
|
||||||
this.$router.replace(
|
this.$router.replace(
|
||||||
`/area/nyjcd/scx1?type=${this.click2}`,
|
`/area/nyjcd/scx1?type=${this.click2}`,
|
||||||
() => { },
|
() => {},
|
||||||
() => { }
|
() => {}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
//余热发电 3d
|
//余热发电 3d
|
||||||
|
|
@ -592,16 +664,17 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", addEventListener);
|
||||||
} function addEventListener() {
|
// }
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// function addMessageListener() {
|
||||||
let json = event.data;
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
console.log("JSON received" + json);
|
// let json = event.data;
|
||||||
})
|
// console.log("JSON received" + json);
|
||||||
}
|
// });
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 监听,当路由发生变化的时候执行
|
// 监听,当路由发生变化的时候执行
|
||||||
|
|
@ -618,16 +691,24 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
let dom = document.querySelector(".area1");
|
||||||
|
dom.style.pointerEvents = "none";
|
||||||
|
this.initViewer();
|
||||||
this.defineEcharts("qcssdh", this.option1);
|
this.defineEcharts("qcssdh", this.option1);
|
||||||
// this.defineEcharts("yrfd", this.option2);
|
// this.defineEcharts("yrfd", this.option2);
|
||||||
this.yrfd();
|
this.yrfd();
|
||||||
this.defineEcharts("ljfdl", this.option3);
|
this.defineEcharts("ljfdl", this.option3);
|
||||||
},
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.viewer) {
|
||||||
|
this.viewer.destroy();
|
||||||
|
}
|
||||||
|
},
|
||||||
components: { RouterView },
|
components: { RouterView },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.area {
|
.area1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 400px;
|
padding-top: 400px;
|
||||||
|
|
@ -636,7 +717,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: all;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -648,7 +729,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgLeft {
|
.imgLeft {
|
||||||
|
|
@ -736,10 +817,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -802,10 +885,12 @@ export default {
|
||||||
.smallBox {
|
.smallBox {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(1, 191, 249, 1) 20%,
|
to right,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
rgba(68, 161, 201, 1) 100%,
|
||||||
|
rgba(42, 196, 243, 1) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -843,6 +928,8 @@ export default {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
width: 1156px;
|
width: 1156px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -955,10 +1042,12 @@ export default {
|
||||||
.smallBox {
|
.smallBox {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(1, 191, 249, 1) 20%,
|
to right,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
rgba(68, 161, 201, 1) 100%,
|
||||||
|
rgba(42, 196, 243, 1) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -973,4 +1062,5 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img src="../../../assets/img/标题/能源监测-电-配电室.png" class="title" />
|
<img
|
||||||
|
src="../../../assets/img/标题/能源监测-电-配电室.png"
|
||||||
|
class="title"
|
||||||
|
/>
|
||||||
<div class="pdsssdh">
|
<div class="pdsssdh">
|
||||||
<div class="imgBox">
|
<div class="imgBox">
|
||||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
<p>配电室实时负荷</p>
|
<p>配电室实时负荷</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
>年</span
|
||||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
|
>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div id="pdsssdh"></div>
|
<div id="pdsssdh"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,8 +29,16 @@
|
||||||
<p>配电室用电量</p>
|
<p>配电室用电量</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="type == '总用电' ? 'active' : ''" @click="type = '总用电'">总用电</span>
|
<span
|
||||||
<span :class="type == '分时段' ? 'active' : ''" @click="type = '分时段'">分时段</span>
|
:class="type == '总用电' ? 'active' : ''"
|
||||||
|
@click="type = '总用电'"
|
||||||
|
>总用电</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
:class="type == '分时段' ? 'active' : ''"
|
||||||
|
@click="type = '分时段'"
|
||||||
|
>分时段</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div id="pdsydl"></div>
|
<div id="pdsydl"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,26 +65,44 @@
|
||||||
<span>6</span>
|
<span>6</span>
|
||||||
<p>个</p>
|
<p>个</p>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="tableData"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="配电室名称" align="center" width="300px">
|
<el-table-column
|
||||||
|
prop="date1"
|
||||||
|
label="配电室名称"
|
||||||
|
align="center"
|
||||||
|
width="300px"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="实时电荷" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="实时电荷" align="center"
|
||||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span><span>kW</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||||
|
><span>kW</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date3" label="今日用电量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date3" label="今日用电量" align="center"
|
||||||
<span style="color: #58caff"> {{ scope.row.date3 }}</span><span>kWh</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff"> {{ scope.row.date3 }}</span
|
||||||
|
><span>kWh</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="设备状态" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="设备状态" align="center"
|
||||||
<span v-if="scope.row.date4"><img src="../../../assets/KDFH/tongguo.png" /></span>
|
><template slot-scope="scope">
|
||||||
<span v-else><img src="../../../assets/KDFH/jinggao.png" /></span>
|
<span v-if="scope.row.date4"
|
||||||
|
><img src="../../../assets/KDFH/tongguo.png"
|
||||||
|
/></span>
|
||||||
|
<span v-else
|
||||||
|
><img src="../../../assets/KDFH/jinggao.png"
|
||||||
|
/></span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -81,17 +116,28 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="chartBox">
|
<div class="chartBox">
|
||||||
<div id="pdsjk">
|
<div id="pdsjk">
|
||||||
<el-table :data="tableData1" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="tableData1"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="配电室名称" align="center" width="300px">
|
<el-table-column
|
||||||
|
prop="date1"
|
||||||
|
label="配电室名称"
|
||||||
|
align="center"
|
||||||
|
width="300px"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="用电量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="用电量" align="center"
|
||||||
<span style="color: #58caff"> {{ scope.row.date2 }}</span><span>kWh</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff"> {{ scope.row.date2 }}</span
|
||||||
|
><span>kWh</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -686,19 +732,20 @@ export default {
|
||||||
|
|
||||||
this.defineEcharts("pdsydl", option);
|
this.defineEcharts("pdsydl", option);
|
||||||
},
|
},
|
||||||
|
// addMessageListener() {
|
||||||
|
// window.vuplex.addEventListener("message", function (event) {
|
||||||
|
// let json = event.data;
|
||||||
|
// console.log("JSON received" + json);
|
||||||
|
// });
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
created() {
|
// created() {
|
||||||
if (window.vuplex) {
|
// if (window.vuplex) {
|
||||||
addMessageListener();
|
// this.addMessageListener();
|
||||||
} else {
|
// } else {
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
// window.addEventListener("vuplexready", this.addMessageListener);
|
||||||
} function addEventListener() {
|
// }
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
// },
|
||||||
let json = event.data;
|
|
||||||
console.log("JSON received" + json);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.defineEcharts("pdsssdh", this.option1);
|
this.defineEcharts("pdsssdh", this.option1);
|
||||||
// this.defineEcharts("pdsydl", this.option2);
|
// this.defineEcharts("pdsydl", this.option2);
|
||||||
|
|
@ -758,10 +805,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -812,10 +861,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -865,10 +916,12 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -961,7 +1014,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -980,7 +1033,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,15 @@
|
||||||
<p>{{ $route.query.type }}实时电荷</p>
|
<p>{{ $route.query.type }}实时电荷</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
>年</span
|
||||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
|
>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div id="pdsssdh"></div>
|
<div id="pdsssdh"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,8 +29,16 @@
|
||||||
<p>{{ $route.query.type }}用电量</p>
|
<p>{{ $route.query.type }}用电量</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="type == '总用电' ? 'active' : ''" @click="type = '总用电'">总用电</span>
|
<span
|
||||||
<span :class="type == '分时段' ? 'active' : ''" @click="type = '分时段'">分时段</span>
|
:class="type == '总用电' ? 'active' : ''"
|
||||||
|
@click="type = '总用电'"
|
||||||
|
>总用电</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
:class="type == '分时段' ? 'active' : ''"
|
||||||
|
@click="type = '分时段'"
|
||||||
|
>分时段</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div id="pdsydl"></div>
|
<div id="pdsydl"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,9 +50,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="pdstpt">
|
<div id="pdstpt">
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'">年</span>
|
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
|
||||||
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'">月</span>
|
>年</span
|
||||||
<span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'">日</span>
|
>
|
||||||
|
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,26 +77,44 @@
|
||||||
<span>5</span>
|
<span>5</span>
|
||||||
<p>个</p>
|
<p>个</p>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="tableData"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="生产工艺名称" align="center" width="300px">
|
<el-table-column
|
||||||
|
prop="date1"
|
||||||
|
label="生产工艺名称"
|
||||||
|
align="center"
|
||||||
|
width="300px"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="实时电荷" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="实时电荷" align="center"
|
||||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span><span>kW</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||||
|
><span>kW</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date3" label="今日用电量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date3" label="今日用电量" align="center"
|
||||||
<span style="color: #58caff"> {{ scope.row.date3 }}</span><span>kWh</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff"> {{ scope.row.date3 }}</span
|
||||||
|
><span>kWh</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="设备状态" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="设备状态" align="center"
|
||||||
<span v-if="scope.row.date4"><img src="../../../assets/KDFH/tongguo.png" /></span>
|
><template slot-scope="scope">
|
||||||
<span v-else><img src="../../../assets/KDFH/jinggao.png" /></span>
|
<span v-if="scope.row.date4"
|
||||||
|
><img src="../../../assets/KDFH/tongguo.png"
|
||||||
|
/></span>
|
||||||
|
<span v-else
|
||||||
|
><img src="../../../assets/KDFH/jinggao.png"
|
||||||
|
/></span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -103,17 +141,28 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="chartBox">
|
<div class="chartBox">
|
||||||
<div id="pdsjk">
|
<div id="pdsjk">
|
||||||
<el-table :data="tableData1" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
:header-cell-style="getHeaderCellStyle">
|
:data="tableData1"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="getHeaderCellStyle"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="配电室名称" align="center" width="300px">
|
<el-table-column
|
||||||
|
prop="date1"
|
||||||
|
label="配电室名称"
|
||||||
|
align="center"
|
||||||
|
width="300px"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="用电量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="用电量" align="center"
|
||||||
<span style="color: #58caff"> {{ scope.row.date2 }}</span><span>kWh</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff"> {{ scope.row.date2 }}</span
|
||||||
|
><span>kWh</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -1503,18 +1552,6 @@ export default {
|
||||||
myChart.setOption(option, true);
|
myChart.setOption(option, true);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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() {
|
mounted() {
|
||||||
this.defineEcharts("pdsssdh", this.option1);
|
this.defineEcharts("pdsssdh", this.option1);
|
||||||
// this.defineEcharts("pdsydl", this.option2);
|
// this.defineEcharts("pdsydl", this.option2);
|
||||||
|
|
@ -1587,10 +1624,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1641,10 +1680,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1694,10 +1735,12 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1743,10 +1786,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1814,7 +1859,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1833,7 +1878,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -56,13 +56,16 @@
|
||||||
<div id="ystj">
|
<div id="ystj">
|
||||||
<img src="../../assets/nyjc/组 964.png" alt="" />
|
<img src="../../assets/nyjc/组 964.png" alt="" />
|
||||||
<div class="zs">
|
<div class="zs">
|
||||||
<span>总数：</span><span style="color: #58caff; font-size: 30px">5</span>
|
<span>总数：</span
|
||||||
|
><span style="color: #58caff; font-size: 30px">5</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="zx">
|
<div class="zx">
|
||||||
<span>在线：</span><span style="color: #56f671; font-size: 30px">118</span>
|
<span>在线：</span
|
||||||
|
><span style="color: #56f671; font-size: 30px">118</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="zxl">
|
<div class="zxl">
|
||||||
<span>在线率：</span><span style="color: #56f671; font-size: 30px">72%</span>
|
<span>在线率：</span
|
||||||
|
><span style="color: #56f671; font-size: 30px">72%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,8 +82,12 @@
|
||||||
<span>5</span>
|
<span>5</span>
|
||||||
<p>个</p>
|
<p>个</p>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="tableData"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
|
|
@ -88,16 +95,23 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="名称" align="center">
|
<el-table-column prop="date1" label="名称" align="center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="用煤量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="用煤量" align="center"
|
||||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span><span>t</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||||
|
><span>t</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date3" label="碳排放量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date3" label="碳排放量" align="center"
|
||||||
|
><template slot-scope="scope">
|
||||||
<span style="color: #58caff">{{ scope.row.date3 }}</span>
|
<span style="color: #58caff">{{ scope.row.date3 }}</span>
|
||||||
<span>t</span>
|
<span>t</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date4" label="单位热值含碳量" align="center"><template slot-scope="scope">
|
<el-table-column
|
||||||
|
prop="date4"
|
||||||
|
label="单位热值含碳量"
|
||||||
|
align="center"
|
||||||
|
><template slot-scope="scope">
|
||||||
<span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
|
<span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
|
||||||
<span>tCO2/t</span>
|
<span>tCO2/t</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -114,12 +128,22 @@
|
||||||
<div class="chartBox">
|
<div class="chartBox">
|
||||||
<div id="tpt">
|
<div id="tpt">
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
>年</span
|
||||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
|
>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData1" :row-class-name="tableRowClassName" style="width: 100%"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="tableData1"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column label="序号" align="center">
|
<el-table-column label="序号" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.$index + 1 }}
|
{{ scope.$index + 1 }}
|
||||||
|
|
@ -127,8 +151,10 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date1" label="设备名称" align="center">
|
<el-table-column prop="date1" label="设备名称" align="center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="用煤量" align="center"><template slot-scope="scope">
|
<el-table-column prop="date2" label="用煤量" align="center"
|
||||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span><span>t</span>
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||||
|
><span>t</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -724,18 +750,7 @@ export default {
|
||||||
this.defineEcharts("yysl", option);
|
this.defineEcharts("yysl", option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
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() {
|
mounted() {
|
||||||
this.defineEcharts("rysl", this.option1);
|
this.defineEcharts("rysl", this.option1);
|
||||||
// this.defineEcharts("yysl", this.option2);
|
// this.defineEcharts("yysl", this.option2);
|
||||||
|
|
@ -1066,7 +1081,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1085,7 +1100,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1152,10 +1167,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1171,7 +1188,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1190,7 +1207,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1211,4 +1228,5 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -680,18 +680,6 @@ export default {
|
||||||
this.defineEcharts("yysl", option);
|
this.defineEcharts("yysl", option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 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() {
|
mounted() {
|
||||||
this.defineEcharts("rysl", this.option1);
|
this.defineEcharts("rysl", this.option1);
|
||||||
// this.defineEcharts("yysl", this.option2);
|
// this.defineEcharts("yysl", this.option2);
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,11 @@
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img src="../../assets/img/标题/回路名称.png" class="title" />
|
<img src="../../assets/img/标题/回路名称.png" class="title" />
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
<li v-for="item in list" :class="res == item ? 'active' : ''" @click="res = item">
|
<li
|
||||||
|
v-for="item in list"
|
||||||
|
:class="res == item ? 'active' : ''"
|
||||||
|
@click="(res = item), sendMessageToCSharp(item)"
|
||||||
|
>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -13,8 +17,11 @@
|
||||||
<p>拓扑图</p>
|
<p>拓扑图</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="tpt">
|
<div id="tpt">
|
||||||
<el-image v-for="item in arr" style="width: 100px; height: 100px" :src="item.url"
|
<el-image
|
||||||
:preview-src-list="item.srcList">
|
v-for="item in arr"
|
||||||
|
:src="item.url"
|
||||||
|
:preview-src-list="item.srcList"
|
||||||
|
>
|
||||||
</el-image>
|
</el-image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,93 +30,86 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Viewer from "viewerjs";
|
import Viewer from "viewerjs";
|
||||||
|
import { pdsJs } from "../../utils/pds";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
arr: [
|
arr: [
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/二线生料电力室.png"),
|
// url: require("../../assets/tpt/二线生料电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
// srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/二线窑头电力室1.png"),
|
// url: require("../../assets/tpt/二线窑头电力室1.png"),
|
||||||
srcList: [require("../../assets/tpt/二线窑头电力室1.png")],
|
// srcList: [require("../../assets/tpt/二线窑头电力室1.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/二线窑头电力室2.png"),
|
// url: require("../../assets/tpt/二线窑头电力室2.png"),
|
||||||
srcList: [require("../../assets/tpt/二线窑头电力室2.png")],
|
// srcList: [require("../../assets/tpt/二线窑头电力室2.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/矿山电力室.png"),
|
// url: require("../../assets/tpt/矿山电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/矿山电力室.png")],
|
// srcList: [require("../../assets/tpt/矿山电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/水泥磨电力室.png"),
|
// url: require("../../assets/tpt/水泥磨电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/水泥磨电力室.png")],
|
// srcList: [require("../../assets/tpt/水泥磨电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/万吨仓电力室.png"),
|
// url: require("../../assets/tpt/万吨仓电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/万吨仓电力室.png")],
|
// srcList: [require("../../assets/tpt/万吨仓电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/窑尾电力室.png"),
|
// url: require("../../assets/tpt/窑尾电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/窑尾电力室.png")],
|
// srcList: [require("../../assets/tpt/窑尾电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/一线生料电力室.png"),
|
// url: require("../../assets/tpt/一线生料电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/一线生料电力室.png")],
|
// srcList: [require("../../assets/tpt/一线生料电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/一线窑头电力室1.png"),
|
// url: require("../../assets/tpt/一线窑头电力室1.png"),
|
||||||
srcList: [require("../../assets/tpt/一线窑头电力室1.png")],
|
// srcList: [require("../../assets/tpt/一线窑头电力室1.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/一线窑头电力室2.png"),
|
// url: require("../../assets/tpt/一线窑头电力室2.png"),
|
||||||
srcList: [require("../../assets/tpt/一线窑头电力室2.png")],
|
// srcList: [require("../../assets/tpt/一线窑头电力室2.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/一线原煤电力室.png"),
|
// url: require("../../assets/tpt/一线原煤电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/一线原煤电力室.png")],
|
// srcList: [require("../../assets/tpt/一线原煤电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/余热发电电力室.png"),
|
// url: require("../../assets/tpt/余热发电电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/余热发电电力室.png")],
|
// srcList: [require("../../assets/tpt/余热发电电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/原材料电力室.png"),
|
// url: require("../../assets/tpt/原材料电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/原材料电力室.png")],
|
// srcList: [require("../../assets/tpt/原材料电力室.png")],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
url: require("../../assets/tpt/总降电力室.png"),
|
// url: require("../../assets/tpt/总降电力室.png"),
|
||||||
srcList: [require("../../assets/tpt/总降电力室.png")],
|
// srcList: [require("../../assets/tpt/总降电力室.png")],
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
list: [
|
list: [
|
||||||
"6.3KV#1破碎出线",
|
// "6.3KV#1破碎出线",
|
||||||
"6.3KV#1窑头出线",
|
// "6.3KV#1窑头出线",
|
||||||
"6.3KV#1原料#1出线",
|
// "6.3KV#1原料#1出线",
|
||||||
"6.3KV#1原料#2出线",
|
// "6.3KV#1原料#2出线",
|
||||||
"6.3KV#2窑头出线",
|
// "6.3KV#2窑头出线",
|
||||||
"6.3KV#2原料#1出线",
|
// "6.3KV#2原料#1出线",
|
||||||
"6.3KV#2原料#2出线",
|
// "6.3KV#2原料#2出线",
|
||||||
"6.3KV#1发电机出线(安热线)",
|
// "6.3KV#1发电机出线(安热线)",
|
||||||
"6.3KV#主变1进线",
|
// "6.3KV#主变1进线",
|
||||||
"6.3KV#主变2进线",
|
// "6.3KV#主变2进线",
|
||||||
],
|
],
|
||||||
res: "6.3KV#1破碎出线",
|
res: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (window.vuplex) {
|
this.getList(this.$route.query.type);
|
||||||
addMessageListener();
|
this.changeArr(this.$route.query.type);
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", addEventListener);
|
|
||||||
} function addEventListener() {
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
console.log("JSON received" + json);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initViewer() {
|
initViewer() {
|
||||||
|
|
@ -136,9 +136,46 @@ export default {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
openViewer(index) {
|
//根据三维传参拿到回路名称列表
|
||||||
console.log(this.viewer);
|
getList(name) {
|
||||||
this.viewer && this.viewer.view(index);
|
var list = [];
|
||||||
|
pdsJs.forEach((item) => {
|
||||||
|
if (item.name == name) {
|
||||||
|
list = item.list;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
},
|
||||||
|
sendMessageToCSharp(name) {
|
||||||
|
window.vuplex.postMessage(name);
|
||||||
|
},
|
||||||
|
changeArr(name) {
|
||||||
|
if (name == "总降电力室") {
|
||||||
|
this.arr[0] = {
|
||||||
|
url: require("../../assets/tpt/二线生料电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
||||||
|
};
|
||||||
|
} else if (name == "矿山电力室") {
|
||||||
|
this.arr[0] = {
|
||||||
|
url: require("../../assets/tpt/矿山电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/矿山电力室.png")],
|
||||||
|
};
|
||||||
|
} else if (name == "原材料电力室") {
|
||||||
|
this.arr[0] = {
|
||||||
|
url: require("../../assets/tpt/原材料电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/原材料电力室.png")],
|
||||||
|
};
|
||||||
|
} else if (name == "一线生料磨电力室") {
|
||||||
|
this.arr[0] = {
|
||||||
|
url: require("../../assets/tpt/一线生料电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/一线生料电力室.png")],
|
||||||
|
};
|
||||||
|
} else if (name == "二线生料磨电力室") {
|
||||||
|
this.arr[0] = {
|
||||||
|
url: require("../../assets/tpt/二线生料电力室.png"),
|
||||||
|
srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
||||||
|
};
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -180,7 +217,9 @@ export default {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
height: 1300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
li {
|
li {
|
||||||
width: 1128px;
|
width: 1128px;
|
||||||
height: 103px;
|
height: 103px;
|
||||||
|
|
@ -200,7 +239,6 @@ export default {
|
||||||
.tpt {
|
.tpt {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 56px;
|
margin-top: 56px;
|
||||||
|
|
||||||
.data {
|
.data {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -212,7 +250,6 @@ export default {
|
||||||
top: 120px;
|
top: 120px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
width: 122px;
|
width: 122px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
|
|
@ -221,19 +258,18 @@ export default {
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
to right,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgBox {
|
.imgBox {
|
||||||
height: 93px;
|
height: 93px;
|
||||||
width: 1156px;
|
width: 1156px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -243,11 +279,14 @@ export default {
|
||||||
font-family: "MicrosoftYaHei";
|
font-family: "MicrosoftYaHei";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#tpt {
|
#tpt {
|
||||||
width: 1155px;
|
width: 1155px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
/deep/ .el-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="a">
|
<div class="a">
|
||||||
<img src="../../assets/img/智能运维图标.png" alt="" @click="sendMessageToCSharp" />
|
<img
|
||||||
|
src="../../assets/img/智能运维图标.png"
|
||||||
|
alt=""
|
||||||
|
@click="sendMessageToCSharp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img src="../../assets/img/标题/智能运维.png" class="title" />
|
<img src="../../assets/img/标题/智能运维.png" class="title" />
|
||||||
|
|
@ -165,7 +169,11 @@
|
||||||
<div>垃圾处理站排放物监测</div>
|
<div>垃圾处理站排放物监测</div>
|
||||||
<div>一层</div>
|
<div>一层</div>
|
||||||
<div>
|
<div>
|
||||||
<el-table :data="tableData" style="width: 100%" header-cell-style="background-color: #1969A8; color: white">
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column prop="date1" label="监测点1" align="center">
|
<el-table-column prop="date1" label="监测点1" align="center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="监测点2" align="center">
|
<el-table-column prop="date2" label="监测点2" align="center">
|
||||||
|
|
@ -218,8 +226,12 @@
|
||||||
<p>巡检计划</p>
|
<p>巡检计划</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="plan" style="width: 100%" :row-class-name="tableRowClassName"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="plan"
|
||||||
|
style="width: 100%"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column prop="date1" label="计划名称" align="center">
|
<el-table-column prop="date1" label="计划名称" align="center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="计划内容" align="center">
|
<el-table-column prop="date2" label="计划内容" align="center">
|
||||||
|
|
@ -251,8 +263,12 @@
|
||||||
<p>告警列表</p>
|
<p>告警列表</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName"
|
<el-table
|
||||||
header-cell-style="background-color: #1969A8; color: white">
|
:data="list"
|
||||||
|
style="width: 100%"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
<el-table-column prop="date1" label="发生时间" align="center">
|
<el-table-column prop="date1" label="发生时间" align="center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="date2" label="告警等级" align="center">
|
<el-table-column prop="date2" label="告警等级" align="center">
|
||||||
|
|
@ -447,8 +463,8 @@ export default {
|
||||||
// type: "Tog",
|
// type: "Tog",
|
||||||
// message: "智能运维_true",
|
// message: "智能运维_true",
|
||||||
// });
|
// });
|
||||||
window.vuplex.postMessage("智能运维")
|
window.vuplex.postMessage("智能运维");
|
||||||
this.$router.push('/znywjk');
|
this.$router.push("/znywjk");
|
||||||
},
|
},
|
||||||
tableRowClassName({ row, rowIndex }) {
|
tableRowClassName({ row, rowIndex }) {
|
||||||
if ((rowIndex + 1) % 2 === 0) {
|
if ((rowIndex + 1) % 2 === 0) {
|
||||||
|
|
@ -464,18 +480,7 @@ export default {
|
||||||
myChart.setOption(this.option);
|
myChart.setOption(this.option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
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() {
|
mounted() {
|
||||||
this.defineEcharts();
|
this.defineEcharts();
|
||||||
},
|
},
|
||||||
|
|
@ -591,10 +596,12 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: linear-gradient(90deg,
|
background: linear-gradient(
|
||||||
rgba(56, 183, 161, 0.3) 30%,
|
90deg,
|
||||||
rgba(79, 180, 163, 0.3) 30%,
|
rgba(56, 183, 161, 0.3) 30%,
|
||||||
rgba(81, 147, 136, 0.3) 40%);
|
rgba(79, 180, 163, 0.3) 30%,
|
||||||
|
rgba(81, 147, 136, 0.3) 40%
|
||||||
|
);
|
||||||
border-left: 5px solid #28a896;
|
border-left: 5px solid #28a896;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
|
|
@ -778,12 +785,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #102b49 !important;
|
background-color: #102b49 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -878,7 +885,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -897,7 +904,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -971,7 +978,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -990,7 +997,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
::v-deep .el-table__row>td {
|
::v-deep .el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue