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>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>
|
||||||
</head>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
<body>
|
</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</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(
|
||||||
|
to right,
|
||||||
rgba(1, 191, 249, 1) 20%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(68, 161, 201, 1) 100%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
rgba(42, 196, 243, 1) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -25,7 +29,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="fhdkcl">
|
<div id="fhdkcl">
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="plan" style="width: 100%" :row-class-name="tableRowClassName">
|
<el-table
|
||||||
|
:data="plan"
|
||||||
|
style="width: 100%"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
>
|
||||||
<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">
|
||||||
|
|
@ -79,12 +87,19 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="kdsb">
|
<div id="kdsb">
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
|
<el-table
|
||||||
|
:data="devices"
|
||||||
|
style="width: 100%"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
>
|
||||||
<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">
|
||||||
<template scope="scope">
|
<template scope="scope">
|
||||||
<img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
|
<img
|
||||||
|
src="../../assets/KDFH/tongguo.png"
|
||||||
|
v-if="scope.row.date2 == true"
|
||||||
|
/>
|
||||||
<img src="../../assets/KDFH/jinggao.png" v-else />
|
<img src="../../assets/KDFH/jinggao.png" v-else />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
@ -181,7 +196,7 @@ export default {
|
||||||
date1: "一级",
|
date1: "一级",
|
||||||
date2: "45.00kW",
|
date2: "45.00kW",
|
||||||
date3: "1小时",
|
date3: "1小时",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
devices: [
|
devices: [
|
||||||
{
|
{
|
||||||
|
|
@ -213,31 +228,31 @@ export default {
|
||||||
date1: "熟料收尘",
|
date1: "熟料收尘",
|
||||||
date2: false,
|
date2: false,
|
||||||
date3: "45.00",
|
date3: "45.00",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
option: {
|
option: {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// value: 50, // 内容 配合formatter
|
// value: 50, // 内容 配合formatter
|
||||||
type: 'liquidFill',
|
type: "liquidFill",
|
||||||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||||||
center: ['50%', '50%'],
|
center: ["50%", "50%"],
|
||||||
data: [
|
data: [
|
||||||
0.6,
|
0.6,
|
||||||
{
|
{
|
||||||
value: 0.6,
|
value: 0.6,
|
||||||
direction: 'left', //波浪方向
|
direction: "left", //波浪方向
|
||||||
},
|
},
|
||||||
], // data个数代表波浪数
|
], // data个数代表波浪数
|
||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
color: "transparent", // 球体本景色
|
color: "transparent", // 球体本景色
|
||||||
},
|
},
|
||||||
amplitude: '6%', //波浪的振幅
|
amplitude: "6%", //波浪的振幅
|
||||||
// 修改波浪颜色
|
// 修改波浪颜色
|
||||||
color: [
|
color: [
|
||||||
{
|
{
|
||||||
type: 'linear',
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
|
|
@ -245,11 +260,11 @@ export default {
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#2EED5C',
|
color: "#2EED5C",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#2EED5C',
|
color: "#2EED5C",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
globalCoord: false,
|
globalCoord: false,
|
||||||
|
|
@ -257,7 +272,7 @@ export default {
|
||||||
],
|
],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
formatter: 55 + '{d|%}',
|
formatter: 55 + "{d|%}",
|
||||||
rich: {
|
rich: {
|
||||||
d: {
|
d: {
|
||||||
fontSize: 36,
|
fontSize: 36,
|
||||||
|
|
@ -265,7 +280,7 @@ export default {
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 48,
|
fontSize: 48,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -274,37 +289,37 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
z: 1,
|
z: 1,
|
||||||
center: ['50%', '50%'],
|
center: ["50%", "50%"],
|
||||||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
radius: ["72%", "73.5%"], // 控制外圈圆的粗细
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '',
|
name: "",
|
||||||
value: 500,
|
value: 500,
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#2EED5C',
|
color: "#2EED5C",
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#2EED5C',
|
color: "#2EED5C",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
zlevel: 0,
|
zlevel: 0,
|
||||||
silent: true,
|
silent: true,
|
||||||
radius: ['78%', '80%'],
|
radius: ["78%", "80%"],
|
||||||
z: 1,
|
z: 1,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -324,25 +339,25 @@ export default {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// value: 50, // 内容 配合formatter
|
// value: 50, // 内容 配合formatter
|
||||||
type: 'liquidFill',
|
type: "liquidFill",
|
||||||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||||||
center: ['50%', '50%'],
|
center: ["50%", "50%"],
|
||||||
data: [
|
data: [
|
||||||
0.6,
|
0.6,
|
||||||
{
|
{
|
||||||
value: 0.6,
|
value: 0.6,
|
||||||
direction: 'left', //波浪方向
|
direction: "left", //波浪方向
|
||||||
},
|
},
|
||||||
], // data个数代表波浪数
|
], // data个数代表波浪数
|
||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
color: "transparent", // 球体本景色
|
color: "transparent", // 球体本景色
|
||||||
},
|
},
|
||||||
amplitude: '6%', //波浪的振幅
|
amplitude: "6%", //波浪的振幅
|
||||||
// 修改波浪颜色
|
// 修改波浪颜色
|
||||||
color: [
|
color: [
|
||||||
{
|
{
|
||||||
type: 'linear',
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
|
|
@ -350,11 +365,11 @@ export default {
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#10A1DD',
|
color: "#10A1DD",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#10A1DD',
|
color: "#10A1DD",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
globalCoord: false,
|
globalCoord: false,
|
||||||
|
|
@ -362,7 +377,7 @@ export default {
|
||||||
],
|
],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
formatter: 55 + '{d|%}',
|
formatter: 55 + "{d|%}",
|
||||||
rich: {
|
rich: {
|
||||||
d: {
|
d: {
|
||||||
fontSize: 36,
|
fontSize: 36,
|
||||||
|
|
@ -370,7 +385,7 @@ export default {
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 48,
|
fontSize: 48,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -379,37 +394,37 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
z: 1,
|
z: 1,
|
||||||
center: ['50%', '50%'],
|
center: ["50%", "50%"],
|
||||||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
radius: ["72%", "73.5%"], // 控制外圈圆的粗细
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '',
|
name: "",
|
||||||
value: 500,
|
value: 500,
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#10A1DD',
|
color: "#10A1DD",
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#10A1DD',
|
color: "#10A1DD",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
zlevel: 0,
|
zlevel: 0,
|
||||||
silent: true,
|
silent: true,
|
||||||
radius: ['78%', '80%'],
|
radius: ["78%", "80%"],
|
||||||
z: 1,
|
z: 1,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -424,8 +439,8 @@ export default {
|
||||||
data: this.Pie2(),
|
data: this.Pie2(),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//U3D交互的绑定
|
//U3D交互的绑定
|
||||||
|
|
@ -435,7 +450,7 @@ export default {
|
||||||
// message: "负荷管理_true",
|
// message: "负荷管理_true",
|
||||||
// });
|
// });
|
||||||
window.vuplex.postMessage("负荷管理-可调负荷");
|
window.vuplex.postMessage("负荷管理-可调负荷");
|
||||||
this.$router.push('/fhgl');
|
this.$router.push("/fhgl");
|
||||||
},
|
},
|
||||||
tableRowClassName({ row, rowIndex }) {
|
tableRowClassName({ row, rowIndex }) {
|
||||||
if ((rowIndex + 1) % 2 === 0) {
|
if ((rowIndex + 1) % 2 === 0) {
|
||||||
|
|
@ -452,9 +467,9 @@ export default {
|
||||||
value: 50,
|
value: 50,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#2EED5C',
|
color: "#2EED5C",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderColor: 'rgba(0,0,0,0)',
|
borderColor: "rgba(0,0,0,0)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -464,9 +479,9 @@ export default {
|
||||||
value: 100,
|
value: 100,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: 'rgba(0,0,0,0)',
|
color: "rgba(0,0,0,0)",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderColor: 'rgba(0,0,0,0)',
|
borderColor: "rgba(0,0,0,0)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -483,9 +498,9 @@ export default {
|
||||||
value: 50,
|
value: 50,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#10A1DD',
|
color: "#10A1DD",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderColor: 'rgba(0,0,0,0)',
|
borderColor: "rgba(0,0,0,0)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -495,9 +510,9 @@ export default {
|
||||||
value: 100,
|
value: 100,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: 'rgba(0,0,0,0)',
|
color: "rgba(0,0,0,0)",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderColor: 'rgba(0,0,0,0)',
|
borderColor: "rgba(0,0,0,0)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -509,46 +524,46 @@ export default {
|
||||||
const dataArr = [
|
const dataArr = [
|
||||||
{
|
{
|
||||||
value: 53,
|
value: 53,
|
||||||
name: '削锋',
|
name: "削锋",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#136768', // 0% 处的颜色
|
color: "#136768", // 0% 处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#28E2EC ', // 100% 处的颜色
|
color: "#28E2EC ", // 100% 处的颜色
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const colorSet = [
|
const colorSet = [
|
||||||
[0.81, color],
|
[0.81, color],
|
||||||
[1, '#136768'],
|
[1, "#136768"],
|
||||||
];
|
];
|
||||||
const rich = {
|
const rich = {
|
||||||
white: {
|
white: {
|
||||||
fontSize: 40,
|
fontSize: 40,
|
||||||
color: '#25D1D9',
|
color: "#25D1D9",
|
||||||
fontWeight: '500',
|
fontWeight: "500",
|
||||||
},
|
},
|
||||||
bule: {
|
bule: {
|
||||||
fontSize: 60,
|
fontSize: 60,
|
||||||
fontFamily: 'DINBold',
|
fontFamily: "DINBold",
|
||||||
color: '#25D1D9',
|
color: "#25D1D9",
|
||||||
fontWeight: '700',
|
fontWeight: "700",
|
||||||
},
|
},
|
||||||
radius: {
|
radius: {
|
||||||
width: 350,
|
width: 350,
|
||||||
height: 80,
|
height: 80,
|
||||||
// lineHeight:80,
|
// lineHeight:80,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: '#0092F2',
|
borderColor: "#0092F2",
|
||||||
fontSize: 50,
|
fontSize: 50,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
backgroundColor: '#1B215B',
|
backgroundColor: "#1B215B",
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
height: 400,
|
height: 400,
|
||||||
|
|
@ -557,31 +572,31 @@ export default {
|
||||||
};
|
};
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: '{a} <br/>{b} : {c}%',
|
formatter: "{a} <br/>{b} : {c}%",
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'gauge',
|
type: "gauge",
|
||||||
radius: '70%',
|
radius: "70%",
|
||||||
startAngle: '225',
|
startAngle: "225",
|
||||||
endAngle: '-45',
|
endAngle: "-45",
|
||||||
pointer: {
|
pointer: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
detail: {
|
detail: {
|
||||||
formatter: function (value) {
|
formatter: function (value) {
|
||||||
var num = Math.round(value);
|
var num = Math.round(value);
|
||||||
return '{bule|' + num + '}{white|%}';
|
return "{bule|" + num + "}{white|%}";
|
||||||
},
|
},
|
||||||
rich: rich,
|
rich: rich,
|
||||||
offsetCenter: ['0%', '0%'],
|
offsetCenter: ["0%", "0%"],
|
||||||
},
|
},
|
||||||
data: dataArr,
|
data: dataArr,
|
||||||
title: {
|
title: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
offsetCenter: ['0', '75%'],
|
offsetCenter: ["0", "75%"],
|
||||||
fontSize: 30
|
fontSize: 30,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -600,9 +615,9 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
length: 35,
|
length: 35,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#00377a',
|
color: "#00377a",
|
||||||
width: 2,
|
width: 2,
|
||||||
type: 'solid',
|
type: "solid",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
|
@ -626,7 +641,7 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
var chartDom = document.getElementById('xf');
|
var chartDom = document.getElementById("xf");
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
|
|
@ -634,34 +649,34 @@ export default {
|
||||||
const dataArr = [
|
const dataArr = [
|
||||||
{
|
{
|
||||||
value: 42,
|
value: 42,
|
||||||
name: '填谷',
|
name: "填谷",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#136768', // 0% 处的颜色
|
color: "#136768", // 0% 处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#278A83 ', // 100% 处的颜色
|
color: "#278A83 ", // 100% 处的颜色
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const colorSet = [
|
const colorSet = [
|
||||||
[0.7, color],
|
[0.7, color],
|
||||||
[1, '#136768'],
|
[1, "#136768"],
|
||||||
];
|
];
|
||||||
const rich = {
|
const rich = {
|
||||||
white: {
|
white: {
|
||||||
fontSize: 40,
|
fontSize: 40,
|
||||||
color: '#085D57',
|
color: "#085D57",
|
||||||
fontWeight: '500',
|
fontWeight: "500",
|
||||||
},
|
},
|
||||||
bule: {
|
bule: {
|
||||||
fontSize: 60,
|
fontSize: 60,
|
||||||
fontFamily: 'DINBold',
|
fontFamily: "DINBold",
|
||||||
color: '#085D57',
|
color: "#085D57",
|
||||||
fontWeight: '700',
|
fontWeight: "700",
|
||||||
},
|
},
|
||||||
radius: {
|
radius: {
|
||||||
width: 350,
|
width: 350,
|
||||||
|
|
@ -670,10 +685,10 @@ export default {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
// borderColor: '#0092F2',
|
// borderColor: '#0092F2',
|
||||||
fontSize: 50,
|
fontSize: 50,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
// backgroundColor: '#1B215B',
|
// backgroundColor: '#1B215B',
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
height: 400,
|
height: 400,
|
||||||
|
|
@ -682,31 +697,31 @@ export default {
|
||||||
};
|
};
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: '{a} <br/>{b} : {c}%',
|
formatter: "{a} <br/>{b} : {c}%",
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'gauge',
|
type: "gauge",
|
||||||
radius: '70%',
|
radius: "70%",
|
||||||
startAngle: '225',
|
startAngle: "225",
|
||||||
endAngle: '-45',
|
endAngle: "-45",
|
||||||
pointer: {
|
pointer: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
detail: {
|
detail: {
|
||||||
formatter: function (value) {
|
formatter: function (value) {
|
||||||
var num = Math.round(value);
|
var num = Math.round(value);
|
||||||
return '{bule|' + num + '}{white|%}';
|
return "{bule|" + num + "}{white|%}";
|
||||||
},
|
},
|
||||||
rich: rich,
|
rich: rich,
|
||||||
offsetCenter: ['0%', '0%'],
|
offsetCenter: ["0%", "0%"],
|
||||||
},
|
},
|
||||||
|
|
||||||
data: dataArr,
|
data: dataArr,
|
||||||
title: {
|
title: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
offsetCenter: ['0', '75%'],
|
offsetCenter: ["0", "75%"],
|
||||||
// width:100,
|
// width:100,
|
||||||
// height:4,
|
// height:4,
|
||||||
// borderRadius:[4,4,4,4,],
|
// borderRadius:[4,4,4,4,],
|
||||||
|
|
@ -740,9 +755,9 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
length: 35,
|
length: 35,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#00377a',
|
color: "#00377a",
|
||||||
width: 2,
|
width: 2,
|
||||||
type: 'solid',
|
type: "solid",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
|
@ -751,7 +766,7 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
var chartDom = document.getElementById('tg');
|
var chartDom = document.getElementById("tg");
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
|
|
@ -1106,35 +1121,35 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
var chartDom = document.getElementById('fhzy');
|
var chartDom = document.getElementById("fhzy");
|
||||||
var myChart2 = echarts.init(chartDom);
|
var myChart2 = echarts.init(chartDom);
|
||||||
option && myChart2.setOption(option);
|
option && myChart2.setOption(option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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() {
|
||||||
var chartDom = document.getElementById('gang');
|
var chartDom = document.getElementById("gang");
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
this.option && myChart.setOption(this.option);
|
this.option && myChart.setOption(this.option);
|
||||||
var chartDom2 = document.getElementById('ruan');
|
var chartDom2 = document.getElementById("ruan");
|
||||||
var myChart2 = echarts.init(chartDom2);
|
var myChart2 = echarts.init(chartDom2);
|
||||||
this.option2 && myChart2.setOption(this.option2);
|
this.option2 && myChart2.setOption(this.option2);
|
||||||
this.xf();
|
this.xf();
|
||||||
this.tg();
|
this.tg();
|
||||||
this.kdfhzy();
|
this.kdfhzy();
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -1169,7 +1184,7 @@ export default {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
color: #05F0FF;
|
color: #05f0ff;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1186,7 +1201,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 去掉eltable的hover效果
|
// 去掉eltable的hover效果
|
||||||
.el-table tbody tr:hover>td {
|
.el-table tbody tr:hover > td {
|
||||||
background-color: #0b679e !important;
|
background-color: #0b679e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1205,7 +1220,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
//去掉边框白线
|
//去掉边框白线
|
||||||
.el-table__row>td {
|
.el-table__row > td {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1609,13 +1624,13 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_one {
|
.gang_one {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
display: block;
|
display: block;
|
||||||
background: #2EEDAF;
|
background: #2eedaf;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -1626,7 +1641,7 @@ export default {
|
||||||
height: 43px;
|
height: 43px;
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #2EEDAF;
|
color: #2eedaf;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1640,14 +1655,14 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_two {
|
.gang_two {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
background: #2EEDD8;
|
background: #2eedd8;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -1659,7 +1674,7 @@ export default {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #2EEDD8;
|
color: #2eedd8;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1673,14 +1688,14 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_three {
|
.gang_three {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
display: block;
|
display: block;
|
||||||
background: #9ACAFD;
|
background: #9acafd;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -1692,7 +1707,7 @@ export default {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #9ACAFD;
|
color: #9acafd;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1739,13 +1754,13 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_one {
|
.gang_one {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
display: block;
|
display: block;
|
||||||
background: #2EEDAF;
|
background: #2eedaf;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -1756,7 +1771,7 @@ export default {
|
||||||
height: 43px;
|
height: 43px;
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #2EEDAF;
|
color: #2eedaf;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1770,14 +1785,14 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_two {
|
.gang_two {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
background: #2EEDD8;
|
background: #2eedd8;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -1789,7 +1804,7 @@ export default {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #2EEDD8;
|
color: #2eedd8;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1803,14 +1818,14 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
|
||||||
.gang_three {
|
.gang_three {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
display: block;
|
display: block;
|
||||||
background: #9ACAFD;
|
background: #9acafd;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -1822,7 +1837,7 @@ export default {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
font-family: TRENDS;
|
font-family: TRENDS;
|
||||||
color: #9ACAFD;
|
color: #9acafd;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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(() => {
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -13,8 +17,12 @@
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<p>单位：tCO2</p>
|
<p>单位：tCO2</p>
|
||||||
<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
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="qybjzl">
|
<div id="qybjzl">
|
||||||
|
|
@ -61,11 +69,14 @@
|
||||||
<p>碳排放量</p>
|
<p>碳排放量</p>
|
||||||
</div>
|
</div>
|
||||||
<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
|
||||||
</div>
|
>
|
||||||
<div id="tpfl">
|
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="tpfl"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|
@ -75,8 +86,7 @@
|
||||||
<p>各类排放占比</p>
|
<p>各类排放占比</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="chartBox">
|
<div class="chartBox">
|
||||||
<div id="pfzb">
|
<div id="pfzb"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sstpf">
|
<div class="sstpf">
|
||||||
|
|
@ -85,8 +95,7 @@
|
||||||
<p>实时碳排放</p>
|
<p>实时碳排放</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="chartBox">
|
<div class="chartBox">
|
||||||
<div id="sstpf">
|
<div id="sstpf"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tzh">
|
<div class="tzh">
|
||||||
|
|
@ -176,7 +185,7 @@ export default {
|
||||||
date1: "熟料收尘",
|
date1: "熟料收尘",
|
||||||
date2: false,
|
date2: false,
|
||||||
date3: "45.00",
|
date3: "45.00",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
option1: {
|
option1: {
|
||||||
legend: {
|
legend: {
|
||||||
|
|
@ -230,7 +239,9 @@ export default {
|
||||||
{
|
{
|
||||||
type: "line",
|
type: "line",
|
||||||
name: "碳排放量",
|
name: "碳排放量",
|
||||||
data: [15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 29, 19, 20, 18, 20, 9],
|
data: [
|
||||||
|
15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 29, 19, 20, 18, 20, 9,
|
||||||
|
],
|
||||||
// smooth: true,
|
// smooth: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -288,7 +299,7 @@ export default {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.name + params.value
|
return params.name + params.value;
|
||||||
},
|
},
|
||||||
rich: {
|
rich: {
|
||||||
white: {
|
white: {
|
||||||
|
|
@ -303,23 +314,120 @@ export default {
|
||||||
// focus: "adjacency",
|
// focus: "adjacency",
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{ name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
|
{
|
||||||
{ name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
name: "总量",
|
||||||
{ name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
value: "2641.76",
|
||||||
{ name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
itemStyle: { color: "#5FE3D9" },
|
||||||
{ name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
depth: 0,
|
||||||
{ name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
},
|
||||||
{ name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
{
|
||||||
{ name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
name: "原材料",
|
||||||
{ name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
value: "461.71",
|
||||||
{ name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
itemStyle: { color: "#55A9CE" },
|
||||||
{ name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
depth: 1,
|
||||||
{ name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
},
|
||||||
{ name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
{
|
||||||
{ name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
name: "电",
|
||||||
{ name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
value: "871",
|
||||||
{ name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
itemStyle: { color: "#55A9CE" },
|
||||||
{ name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
depth: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "柴油",
|
||||||
|
value: "290.76",
|
||||||
|
itemStyle: { color: "#55A9CE" },
|
||||||
|
depth: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "煤",
|
||||||
|
value: "28.51",
|
||||||
|
itemStyle: { color: "#55A9CE" },
|
||||||
|
depth: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "1号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "1",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "2",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "3",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "1号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "11",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "22",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "33",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "1号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "111",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "222",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "333",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "1号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "1111",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "2222",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3号生产线",
|
||||||
|
value: "28.51",
|
||||||
|
id: "3333",
|
||||||
|
itemStyle: { color: "#52DBF1" },
|
||||||
|
depth: 2,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
links: [
|
links: [
|
||||||
// L1→L3 4509
|
// L1→L3 4509
|
||||||
|
|
@ -355,7 +463,7 @@ export default {
|
||||||
{
|
{
|
||||||
name: "光伏",
|
name: "光伏",
|
||||||
value: 88,
|
value: 88,
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -367,7 +475,7 @@ export default {
|
||||||
// message: "碳资产管理_true",
|
// message: "碳资产管理_true",
|
||||||
// });
|
// });
|
||||||
window.vuplex.postMessage("碳资产管理");
|
window.vuplex.postMessage("碳资产管理");
|
||||||
this.$router.push('/tzcglsl');
|
this.$router.push("/tzcglsl");
|
||||||
},
|
},
|
||||||
defineEcharts(dom, option) {
|
defineEcharts(dom, option) {
|
||||||
var chartDom = document.getElementById(dom);
|
var chartDom = document.getElementById(dom);
|
||||||
|
|
@ -381,22 +489,35 @@ export default {
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
getbing() {
|
getbing() {
|
||||||
var trafficWay = [{
|
var trafficWay = [
|
||||||
name: '原煤',
|
{
|
||||||
value: 73.02
|
name: "原煤",
|
||||||
}, {
|
value: 73.02,
|
||||||
name: '原材料',
|
},
|
||||||
value: 12.6
|
{
|
||||||
}, {
|
name: "原材料",
|
||||||
name: '电',
|
value: 12.6,
|
||||||
value: 171.49
|
},
|
||||||
}];
|
{
|
||||||
|
name: "电",
|
||||||
|
value: 171.49,
|
||||||
|
},
|
||||||
|
];
|
||||||
var data = [];
|
var data = [];
|
||||||
var labels = "";
|
var labels = "";
|
||||||
// var index = 0;
|
// var index = 0;
|
||||||
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
|
var color = [
|
||||||
|
"#00ffff",
|
||||||
|
"#00cfff",
|
||||||
|
"#006ced",
|
||||||
|
"#ffe000",
|
||||||
|
"#ffa800",
|
||||||
|
"#ff5b00",
|
||||||
|
"#ff3000",
|
||||||
|
];
|
||||||
trafficWay.forEach((item, index) => {
|
trafficWay.forEach((item, index) => {
|
||||||
data.push({
|
data.push(
|
||||||
|
{
|
||||||
value: item.value,
|
value: item.value,
|
||||||
name: item.name,
|
name: item.name,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|
@ -405,29 +526,31 @@ export default {
|
||||||
shadowBlur: 20,
|
shadowBlur: 20,
|
||||||
borderColor: color[index],
|
borderColor: color[index],
|
||||||
shadowColor: color[index],
|
shadowColor: color[index],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
value: 40,
|
value: 40,
|
||||||
name: '',
|
name: "",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
label: {
|
label: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false,
|
||||||
|
},
|
||||||
|
color: "rgba(0, 0, 0, 0)",
|
||||||
|
borderColor: "rgba(0, 0, 0, 0)",
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
color: 'rgba(0, 0, 0, 0)',
|
|
||||||
borderColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
}
|
||||||
}
|
);
|
||||||
});
|
|
||||||
labels = {
|
labels = {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'outside',
|
position: "outside",
|
||||||
color: '#ddd',
|
color: "#ddd",
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var percent = 0;
|
var percent = 0;
|
||||||
var total = 0;
|
var total = 0;
|
||||||
|
|
@ -435,10 +558,20 @@ export default {
|
||||||
total += trafficWay[k].value;
|
total += trafficWay[k].value;
|
||||||
}
|
}
|
||||||
percent = ((params.value / total) * 100).toFixed(0);
|
percent = ((params.value / total) * 100).toFixed(0);
|
||||||
if (params.name !== '') {
|
if (params.name !== "") {
|
||||||
return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
|
return (
|
||||||
|
"{colors|" +
|
||||||
|
percent +
|
||||||
|
"%" +
|
||||||
|
"}" +
|
||||||
|
"\n" +
|
||||||
|
"\n" +
|
||||||
|
"{names|" +
|
||||||
|
params.name +
|
||||||
|
"}"
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
return '';
|
return "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
rich: {
|
rich: {
|
||||||
|
|
@ -450,10 +583,10 @@ export default {
|
||||||
names: {
|
names: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 30,
|
fontSize: 30,
|
||||||
}
|
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
})
|
};
|
||||||
|
});
|
||||||
// for (var i = 0; i < trafficWay.length; i++) {
|
// for (var i = 0; i < trafficWay.length; i++) {
|
||||||
// data.push({
|
// data.push({
|
||||||
// value: trafficWay[i].value,
|
// value: trafficWay[i].value,
|
||||||
|
|
@ -513,9 +646,10 @@ export default {
|
||||||
// },
|
// },
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
var seriesOption = [{
|
var seriesOption = [
|
||||||
name: '',
|
{
|
||||||
type: 'pie',
|
name: "",
|
||||||
|
type: "pie",
|
||||||
clockWise: false,
|
clockWise: false,
|
||||||
radius: [105, 109],
|
radius: [105, 109],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
|
|
@ -526,68 +660,72 @@ export default {
|
||||||
length: 40,
|
length: 40,
|
||||||
length2: 100,
|
length2: 100,
|
||||||
show: true,
|
show: true,
|
||||||
color: '#00ffff'
|
color: "#00ffff",
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data: data
|
},
|
||||||
}];
|
},
|
||||||
|
data: data,
|
||||||
|
},
|
||||||
|
];
|
||||||
let option = {
|
let option = {
|
||||||
// backgroundColor: '#0A2E5D',
|
// backgroundColor: '#0A2E5D',
|
||||||
color: color,
|
color: color,
|
||||||
title: {
|
title: {
|
||||||
text: '257.1t',
|
text: "257.1t",
|
||||||
top: '48%',
|
top: "48%",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
left: "49%",
|
left: "49%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
fontSize: 32,
|
fontSize: 32,
|
||||||
fontWeight: '400'
|
fontWeight: "400",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
graphic: {
|
graphic: {
|
||||||
elements: [{
|
elements: [
|
||||||
|
{
|
||||||
type: "image",
|
type: "image",
|
||||||
z: 3,
|
z: 3,
|
||||||
style: {
|
style: {
|
||||||
// image: "transparent",
|
// image: "transparent",
|
||||||
width: 178,
|
width: 178,
|
||||||
height: 178
|
height: 178,
|
||||||
},
|
},
|
||||||
left: 'center',
|
left: "center",
|
||||||
top: 'center',
|
top: "center",
|
||||||
position: [100, 100]
|
position: [100, 100],
|
||||||
}]
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
orient: '',
|
orient: "",
|
||||||
x: 'right',
|
x: "right",
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '原煤',
|
name: "原煤",
|
||||||
value: "13.68"
|
value: "13.68",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '原材料',
|
name: "原材料",
|
||||||
value: "13.68"
|
value: "13.68",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '电',
|
name: "电",
|
||||||
value: "13.68"
|
value: "13.68",
|
||||||
}],
|
},
|
||||||
|
],
|
||||||
left: 900,
|
left: 900,
|
||||||
bottom: 240,
|
bottom: 240,
|
||||||
align: 'left',
|
align: "left",
|
||||||
formatter: ((name) => {
|
formatter: (name) => {
|
||||||
const item = trafficWay.filter((item) => item.name === name)[0];
|
const item = trafficWay.filter((item) => item.name === name)[0];
|
||||||
return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
|
return `{name|${name}}` + `{num|${item.value}}{name|kWh}`;
|
||||||
// return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
|
// return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
|
||||||
}),
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
rich: {
|
rich: {
|
||||||
|
|
@ -598,16 +736,16 @@ export default {
|
||||||
num: {
|
num: {
|
||||||
fontSize: 28,
|
fontSize: 28,
|
||||||
color: color[1],
|
color: color[1],
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemGap: 20
|
},
|
||||||
|
itemGap: 20,
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
series: seriesOption
|
series: seriesOption,
|
||||||
}
|
};
|
||||||
let chartDom = document.getElementById("pfzb");
|
let chartDom = document.getElementById("pfzb");
|
||||||
let myChart = this.$echarts.init(chartDom);
|
let myChart = this.$echarts.init(chartDom);
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
|
@ -1102,16 +1240,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() {
|
||||||
this.defineEcharts("sstpf", this.option1);
|
this.defineEcharts("sstpf", this.option1);
|
||||||
|
|
@ -1120,7 +1258,7 @@ export default {
|
||||||
this.getbing();
|
this.getbing();
|
||||||
this.tpfl();
|
this.tpfl();
|
||||||
this.initChart();
|
this.initChart();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1214,10 +1352,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1241,7 +1381,7 @@ export default {
|
||||||
.one {
|
.one {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #3CFF1C;
|
color: #3cff1c;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1257,7 +1397,7 @@ export default {
|
||||||
.two {
|
.two {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #4AB0DD;
|
color: #4ab0dd;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1273,7 +1413,7 @@ export default {
|
||||||
.three {
|
.three {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #39D7EE;
|
color: #39d7ee;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1296,7 +1436,7 @@ export default {
|
||||||
.one {
|
.one {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #3CFF1C;
|
color: #3cff1c;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1312,7 +1452,7 @@ export default {
|
||||||
.two {
|
.two {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #4AB0DD;
|
color: #4ab0dd;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1334,7 +1474,7 @@ export default {
|
||||||
.three {
|
.three {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
color: #39D7EE;
|
color: #39d7ee;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
|
|
@ -1421,10 +1561,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1553,11 +1695,9 @@ export default {
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(1, 191, 249, 1) 20%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(68, 161, 201, 1) 100%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(1, 191, 249, 1) 20%,
|
rgba(1, 191, 249, 1) 20%,
|
||||||
rgba(68, 161, 201, 1) 100%,
|
rgba(68, 161, 201, 1) 100%,
|
||||||
rgba(42, 196, 243, 1) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -812,10 +861,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1641,10 +1680,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1743,10 +1786,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
to right,
|
||||||
rgba(33, 76, 124, 0.3) 20%,
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
rgba(152, 207, 230, 0.3) 100%,
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
rgba(33, 76, 124, 0.3) 20%);
|
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(
|
||||||
|
90deg,
|
||||||
rgba(56, 183, 161, 0.3) 30%,
|
rgba(56, 183, 161, 0.3) 30%,
|
||||||
rgba(79, 180, 163, 0.3) 30%,
|
rgba(79, 180, 163, 0.3) 30%,
|
||||||
rgba(81, 147, 136, 0.3) 40%);
|
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