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