能源监控九个页面逻辑
This commit is contained in:
lll
parent
79eb01d575
commit
9e5f6e5998
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -28,9 +28,9 @@ const routes = [
|
|||
},
|
||||
// 能效管理
|
||||
{
|
||||
path:"/nxgl",
|
||||
name:"nxgl",
|
||||
component:()=>import("@/views/Zhou/NXGL.vue")
|
||||
path: "/nxgl",
|
||||
name: "nxgl",
|
||||
component: () => import("@/views/Zhou/NXGL.vue"),
|
||||
},
|
||||
{
|
||||
path: "pds",
|
||||
|
|
@ -43,6 +43,11 @@ const routes = [
|
|||
name: "pds1",
|
||||
component: () => import("../views/lll/NYJCD/PDS.vue"),
|
||||
},
|
||||
{
|
||||
path: "scx1",
|
||||
name: "scx1",
|
||||
component: () => import("../views/lll/NYJCD/SCX1.vue"),
|
||||
},
|
||||
{
|
||||
path: "area",
|
||||
name: "area",
|
||||
|
|
@ -57,6 +62,18 @@ const routes = [
|
|||
path: "nyjcd",
|
||||
name: "nyjcd",
|
||||
component: () => import("../views/lll/NYJCD.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "scx1",
|
||||
name: "scx1",
|
||||
component: () => import("../views/lll/NYJCD/SCX1.vue"),
|
||||
},
|
||||
{
|
||||
path: "pds",
|
||||
name: "pds",
|
||||
component: () => import("../views/lll/NYJCD/PDS.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "nyjcs",
|
||||
|
|
|
|||
|
|
@ -81,9 +81,12 @@ export default {
|
|||
z-index: 2;
|
||||
top: 420px;
|
||||
right: 1351px;
|
||||
z-index: 100;
|
||||
|
||||
img {
|
||||
margin-right: 102px;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<div class="left" v-if="flag">
|
||||
<img src="../../assets/img/标题/能源监测-电.png" class="title" />
|
||||
<div class="qcssdh">
|
||||
<div class="imgBox">
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="right" v-if="flag">
|
||||
<div class="yrfd">
|
||||
<div class="imgBox">
|
||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
|
|
@ -144,15 +144,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { RouterView } from "vue-router";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
res: "月",
|
||||
click1: "",
|
||||
click2: "",
|
||||
flag: true,
|
||||
option1: {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
|
|
@ -176,7 +182,7 @@ export default {
|
|||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100, // 指定刻度间隔
|
||||
interval: 100,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
|
|
@ -202,7 +208,7 @@ export default {
|
|||
normal: {
|
||||
color: "#00FF00",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
width: 5,
|
||||
color: "#21FF55", //折线颜色
|
||||
},
|
||||
},
|
||||
|
|
@ -240,7 +246,7 @@ export default {
|
|||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100, // 指定刻度间隔
|
||||
interval: 100,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
|
|
@ -265,8 +271,8 @@ export default {
|
|||
normal: {
|
||||
color: "#09E83E",
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
show: true,
|
||||
position: "top",
|
||||
value: "max",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
|
|
@ -309,7 +315,7 @@ export default {
|
|||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100, // 指定刻度间隔
|
||||
interval: 100,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
|
|
@ -335,7 +341,7 @@ export default {
|
|||
normal: {
|
||||
color: "#43FFF4",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
width: 5,
|
||||
color: "#43FFF4", //折线颜色
|
||||
},
|
||||
},
|
||||
|
|
@ -393,7 +399,6 @@ export default {
|
|||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
|
|
@ -403,20 +408,55 @@ export default {
|
|||
goOne(a) {
|
||||
this.click2 = "";
|
||||
this.click1 = a;
|
||||
this.flag = false;
|
||||
if (this.click1 == "配电室") {
|
||||
this.$router.replace(
|
||||
"/area/nyjcd/pds",
|
||||
() => {},
|
||||
() => {}
|
||||
);
|
||||
} else {
|
||||
this.$router.replace(
|
||||
`/area/nyjcd/scx1?type=${this.click1}`,
|
||||
() => {},
|
||||
() => {}
|
||||
);
|
||||
}
|
||||
},
|
||||
goTwo(a) {
|
||||
this.click1 = "";
|
||||
this.click2 = a;
|
||||
this.flag = false;
|
||||
this.$router.replace(
|
||||
`/area/nyjcd/scx1?type=${this.click2}`,
|
||||
() => {},
|
||||
() => {}
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.flag = true;
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("qcssdh", this.option1);
|
||||
this.defineEcharts("yrfd", this.option2);
|
||||
this.defineEcharts("ljfdl", this.option3);
|
||||
},
|
||||
components: { RouterView },
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 400px;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
pointer-events: all;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -426,8 +466,10 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.imgLeft {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
left: 1300px;
|
||||
top: 1500px;
|
||||
|
|
@ -440,6 +482,7 @@ export default {
|
|||
font-size: 30px;
|
||||
background-image: url("../../assets/nyjc/组 2 76.png");
|
||||
margin: 37px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background-image: url("../../assets/nyjc/组 276.png");
|
||||
|
|
@ -447,6 +490,7 @@ export default {
|
|||
}
|
||||
|
||||
.imgRight {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
right: 1300px;
|
||||
top: 1300px;
|
||||
|
|
@ -459,6 +503,7 @@ export default {
|
|||
font-size: 30px;
|
||||
background-image: url(../../assets/nyjc/组\ 277.png);
|
||||
margin: 37px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background-image: url("../../assets/nyjc/图层 1.png");
|
||||
|
|
|
|||
|
|
@ -65,6 +65,82 @@
|
|||
<span>6</span>
|
||||
<p>个</p>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width: 100%"
|
||||
header-cell-style="background-color: #1969A8; color: white"
|
||||
>
|
||||
<el-table-column label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date1"
|
||||
label="配电室名称"
|
||||
align="center"
|
||||
width="300px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="实时电荷" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||
><span>kW</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date3" label="今日用电量" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58caff"> {{ scope.row.date3 }}</span
|
||||
><span>kWh</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="设备状态" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span v-if="scope.row.date4"
|
||||
><img src="../../../assets/KDFH/tongguo.png"
|
||||
/></span>
|
||||
<span v-else
|
||||
><img src="../../../assets/KDFH/jinggao.png"
|
||||
/></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pdsjk">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<p>配电室用电排名</p>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div id="pdsjk">
|
||||
<el-table
|
||||
:data="tableData1"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width: 100%"
|
||||
header-cell-style="background-color: #1969A8; color: white"
|
||||
>
|
||||
<el-table-column label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date1"
|
||||
label="配电室名称"
|
||||
align="center"
|
||||
width="300px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="用电量" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58caff"> {{ scope.row.date2 }}</span
|
||||
><span>kWh</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -214,6 +290,100 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
date1: "总降电力室",
|
||||
date2: "20.34",
|
||||
date3: "20.34",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "矿山电力室",
|
||||
date2: "17.42",
|
||||
date3: "17.42",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "原材料电力室",
|
||||
date2: "12.22",
|
||||
date3: "12.22",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "一线生料磨电力室",
|
||||
date2: "19.19",
|
||||
date3: "19.19",
|
||||
date4: false,
|
||||
},
|
||||
{
|
||||
date1: "二线生料磨电力室",
|
||||
date2: "17.42",
|
||||
date3: "17.42",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "窑尾电力室",
|
||||
date2: "12.22",
|
||||
date3: "12.22",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "一线窑头电力室1",
|
||||
date2: "19.19",
|
||||
date3: "19.19",
|
||||
date4: false,
|
||||
},
|
||||
{
|
||||
date1: "一线窑头电力室2",
|
||||
date2: "19.19",
|
||||
date3: "19.19",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "二线窑头电力室1",
|
||||
date2: "19.19",
|
||||
date3: "19.19",
|
||||
date4: false,
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
date1: "总降电力室",
|
||||
date2: "20.34",
|
||||
},
|
||||
{
|
||||
date1: "矿山电力室",
|
||||
date2: "17.42",
|
||||
},
|
||||
{
|
||||
date1: "原材料电力室",
|
||||
date2: "12.22",
|
||||
},
|
||||
{
|
||||
date1: "一线生料磨电力室",
|
||||
date2: "19.19",
|
||||
},
|
||||
{
|
||||
date1: "二线生料磨电力室",
|
||||
date2: "17.42",
|
||||
},
|
||||
{
|
||||
date1: "窑尾电力室",
|
||||
date2: "12.22",
|
||||
},
|
||||
{
|
||||
date1: "一线窑头电力室1",
|
||||
date2: "19.19",
|
||||
},
|
||||
{
|
||||
date1: "一线窑头电力室2",
|
||||
date2: "19.19",
|
||||
},
|
||||
{
|
||||
date1: "二线窑头电力室1",
|
||||
date2: "19.19",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -222,6 +392,12 @@ export default {
|
|||
var myChart = this.$echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if ((rowIndex + 1) % 2 === 0) {
|
||||
return "success-row";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("pdsssdh", this.option1);
|
||||
|
|
@ -232,8 +408,8 @@ export default {
|
|||
<style scoped lang="less">
|
||||
.box {
|
||||
width: 100%;
|
||||
margin-top: -800px;
|
||||
height: 100%;
|
||||
padding-top: 400px;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
|
|
@ -432,7 +608,7 @@ export default {
|
|||
margin-top: 50px;
|
||||
#pdsjk {
|
||||
width: 1156px;
|
||||
height: 600px;
|
||||
height: 900px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -446,6 +622,42 @@ export default {
|
|||
color: #56f671;
|
||||
}
|
||||
}
|
||||
/deep/.el-table tr {
|
||||
background: #16253b;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 50px;
|
||||
.cell {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
// 去掉eltable的hover效果
|
||||
::v-deep .el-table tbody tr:hover > td {
|
||||
background-color: #0b679e !important;
|
||||
}
|
||||
//修改表头颜色
|
||||
::v-deep .has-gutter {
|
||||
background-color: #1969a8;
|
||||
th {
|
||||
background-color: #1969a8;
|
||||
}
|
||||
}
|
||||
//奇偶行颜色
|
||||
::v-deep .el-table .success-row {
|
||||
background: #184167;
|
||||
}
|
||||
//去掉边框白线
|
||||
::v-deep .el-table__row > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
/* 移除表头的下边框 */
|
||||
::v-deep .el-table__header th {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,740 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<img class="title" :src="src" />
|
||||
<div class="pdsssdh">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<!-- <p>一号生产线实时负荷</p> -->
|
||||
|
||||
<p>{{ $route.query.type }}实时电荷</p>
|
||||
</div>
|
||||
<div class="data">
|
||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||
>年</span
|
||||
>
|
||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||
>月</span
|
||||
>
|
||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||
>日</span
|
||||
>
|
||||
</div>
|
||||
<div id="pdsssdh"></div>
|
||||
</div>
|
||||
<div class="pdsydl">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<!-- <p>一号生产线用电量</p> -->
|
||||
<p>{{ $route.query.type }}用电量</p>
|
||||
</div>
|
||||
<div class="data">
|
||||
<span
|
||||
:class="type == '总用电' ? 'active' : ''"
|
||||
@click="type = '总用电'"
|
||||
>总用电</span
|
||||
>
|
||||
<span
|
||||
:class="type == '分时段' ? 'active' : ''"
|
||||
@click="type = '分时段'"
|
||||
>分时段</span
|
||||
>
|
||||
</div>
|
||||
<div id="pdsydl"></div>
|
||||
</div>
|
||||
<div class="pdstpt">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<!-- <p>一号生产线用电量对比</p> -->
|
||||
<p>{{ $route.query.type }}用电量对比</p>
|
||||
</div>
|
||||
<div id="pdstpt">
|
||||
<div class="data">
|
||||
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
|
||||
>年</span
|
||||
>
|
||||
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||||
>月</span
|
||||
>
|
||||
<span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
|
||||
>日</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="pdsjk">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<!-- <p>一号生产线监控</p> -->
|
||||
<p>{{ $route.query.type }}监控</p>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div id="pdsjk">
|
||||
<div class="title">
|
||||
<p>设备数量：</p>
|
||||
<span>5</span>
|
||||
<p>个</p>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width: 100%"
|
||||
header-cell-style="background-color: #1969A8; color: white"
|
||||
>
|
||||
<el-table-column label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date1"
|
||||
label="生产工艺名称"
|
||||
align="center"
|
||||
width="300px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="实时电荷" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||
><span>kW</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date3" label="今日用电量" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58caff"> {{ scope.row.date3 }}</span
|
||||
><span>kWh</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="设备状态" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span v-if="scope.row.date4"
|
||||
><img src="../../../assets/KDFH/tongguo.png"
|
||||
/></span>
|
||||
<span v-else
|
||||
><img src="../../../assets/KDFH/jinggao.png"
|
||||
/></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pdsjk">
|
||||
<div class="imgBox">
|
||||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||
<!-- <p>一号生产线用电排名</p> -->
|
||||
<p>{{ $route.query.type }}用电排名</p>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div id="pdsjk">
|
||||
<el-table
|
||||
:data="tableData1"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width: 100%"
|
||||
:header-cell-style="getHeaderCellStyle"
|
||||
>
|
||||
<el-table-column label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date1"
|
||||
label="配电室名称"
|
||||
align="center"
|
||||
width="300px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date2" label="用电量" align="center"
|
||||
><template slot-scope="scope">
|
||||
<span style="color: #58caff"> {{ scope.row.date2 }}</span
|
||||
><span>kWh</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
res: "月",
|
||||
res1: "月",
|
||||
type: "总用电",
|
||||
src: "",
|
||||
option1: {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:KW",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
padding: 10,
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100, // 指定刻度间隔
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
// top: "5%",
|
||||
left: "8%",
|
||||
right: "5%",
|
||||
bottom: "8%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 20,
|
||||
data: [200, 300, 500, 400, 334],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00FF00",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
color: "#21FF55", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
option2: {
|
||||
legend: {
|
||||
data: [
|
||||
{ icon: "rect", name: "昨日" },
|
||||
{ icon: "rect", name: "今日" },
|
||||
],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "20px",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
padding: 10,
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100, // 指定刻度间隔
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
// top: "5%",
|
||||
left: "8%",
|
||||
right: "5%",
|
||||
bottom: "8%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "昨日",
|
||||
data: [200, 300, 500, 400, 334],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#11C3FF",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
color: "#11C3FF", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "今日",
|
||||
data: [200, 300, 500, 400, 334],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#09E83E",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
color: "#09E83E", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
option3: {
|
||||
legend: {
|
||||
data: [
|
||||
{ icon: "rect", name: "昨日" },
|
||||
{ icon: "rect", name: "今日" },
|
||||
],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "20px",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "昨日",
|
||||
type: "bar",
|
||||
data: [45, 55, 17, 60, 12],
|
||||
itemStyle: {
|
||||
color: "#3AF0FF", //折线颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "今日",
|
||||
type: "bar",
|
||||
data: [65, 65, 36, 19, 30],
|
||||
itemStyle: {
|
||||
color: "#5BFAB1", //折线颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
date1: "回转窑",
|
||||
date2: "20.34",
|
||||
date3: "20.34",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "熟料收尘",
|
||||
date2: "17.42",
|
||||
date3: "17.42",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "篦冷机",
|
||||
date2: "12.22",
|
||||
date3: "12.22",
|
||||
date4: true,
|
||||
},
|
||||
{
|
||||
date1: "生料收尘",
|
||||
date2: "19.19",
|
||||
date3: "19.19",
|
||||
date4: false,
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
date1: "总降电力室",
|
||||
date2: "20.34",
|
||||
},
|
||||
{
|
||||
date1: "矿山电力室",
|
||||
date2: "17.42",
|
||||
},
|
||||
{
|
||||
date1: "原材料电力室",
|
||||
date2: "12.22",
|
||||
},
|
||||
{
|
||||
date1: "一线生料磨电力室",
|
||||
date2: "19.19",
|
||||
},
|
||||
{
|
||||
date1: "二线生料磨电力室",
|
||||
date2: "17.42",
|
||||
},
|
||||
{
|
||||
date1: "窑尾电力室",
|
||||
date2: "12.22",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听,当路由发生变化的时候执行
|
||||
$route: {
|
||||
// $route可以用引号，也可以不用引号
|
||||
handler(to, from) {
|
||||
this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
|
||||
},
|
||||
deep: true, // 深度观察监听
|
||||
immediate: true, // 第一次初始化渲染就可以监听到
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if ((rowIndex + 1) % 2 === 0) {
|
||||
return "success-row";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
getHeaderCellStyle() {
|
||||
return {
|
||||
backgroundColor: "#1969A8",
|
||||
color: "white",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("pdsssdh", this.option1);
|
||||
this.defineEcharts("pdsydl", this.option2);
|
||||
this.defineEcharts("pdstpt", this.option3);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
margin-top: -800px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 1237px;
|
||||
height: 2500px;
|
||||
margin-left: 61px;
|
||||
background-image: url("../../../assets/img/侧边.png");
|
||||
padding-left: 59px;
|
||||
padding-right: 45px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
margin-top: 15px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
.pdsssdh {
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
.data {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-family: "DOUYU";
|
||||
color: #ffffff;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 120px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
span {
|
||||
width: 122px;
|
||||
height: 38px;
|
||||
margin: 10px;
|
||||
display: block;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(33, 76, 124, 0.3) 20%,
|
||||
rgba(152, 207, 230, 0.3) 100%,
|
||||
rgba(33, 76, 124, 0.3) 20%
|
||||
);
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
width: 1156px;
|
||||
p {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
font-size: 30px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
}
|
||||
}
|
||||
#pdsssdh {
|
||||
width: 1155px;
|
||||
height: 500px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.pdsydl {
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
.data {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-family: "DOUYU";
|
||||
color: #ffffff;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 120px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
span {
|
||||
width: 122px;
|
||||
height: 38px;
|
||||
margin: 10px;
|
||||
display: block;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(33, 76, 124, 0.3) 20%,
|
||||
rgba(152, 207, 230, 0.3) 100%,
|
||||
rgba(33, 76, 124, 0.3) 20%
|
||||
);
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
width: 1156px;
|
||||
p {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
font-size: 30px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
}
|
||||
}
|
||||
#pdsydl {
|
||||
width: 1155px;
|
||||
height: 600px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.pdstpt {
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
.data {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-family: "DOUYU";
|
||||
color: #ffffff;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 120px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
span {
|
||||
width: 122px;
|
||||
height: 38px;
|
||||
margin: 10px;
|
||||
display: block;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
.active {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(33, 76, 124, 0.3) 20%,
|
||||
rgba(152, 207, 230, 0.3) 100%,
|
||||
rgba(33, 76, 124, 0.3) 20%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
width: 1156px;
|
||||
p {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
font-size: 30px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
}
|
||||
}
|
||||
#pdstpt {
|
||||
width: 1155px;
|
||||
height: 600px;
|
||||
margin-top: 50px;
|
||||
.data {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-family: "DOUYU";
|
||||
color: #ffffff;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 120px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
span {
|
||||
width: 122px;
|
||||
height: 38px;
|
||||
margin: 10px;
|
||||
display: block;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(33, 76, 124, 0.3) 20%,
|
||||
rgba(152, 207, 230, 0.3) 100%,
|
||||
rgba(33, 76, 124, 0.3) 20%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 1237px;
|
||||
height: 2500px;
|
||||
margin-right: 61px;
|
||||
background-image: url("../../../assets/img/侧边.png");
|
||||
padding-left: 59px;
|
||||
padding-right: 45px;
|
||||
box-sizing: border-box;
|
||||
.pdsjk {
|
||||
position: relative;
|
||||
margin-top: 130px;
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
width: 1156px;
|
||||
p {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
font-size: 30px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
}
|
||||
}
|
||||
.chartBox {
|
||||
margin-top: 50px;
|
||||
#pdsjk {
|
||||
width: 1156px;
|
||||
height: 400px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 50px;
|
||||
margin-bottom: 20px;
|
||||
span {
|
||||
margin: 0 20px;
|
||||
font-size: 30px;
|
||||
color: #56f671;
|
||||
}
|
||||
}
|
||||
/deep/.el-table tr {
|
||||
background: #16253b;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 50px;
|
||||
.cell {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
// 去掉eltable的hover效果
|
||||
::v-deep .el-table tbody tr:hover > td {
|
||||
background-color: #0b679e !important;
|
||||
}
|
||||
//修改表头颜色
|
||||
::v-deep .has-gutter {
|
||||
background-color: #1969a8;
|
||||
th {
|
||||
background-color: #1969a8;
|
||||
}
|
||||
}
|
||||
//奇偶行颜色
|
||||
::v-deep .el-table .success-row {
|
||||
background: #184167;
|
||||
}
|
||||
//去掉边框白线
|
||||
::v-deep .el-table__row > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
/* 移除表头的下边框 */
|
||||
::v-deep .el-table__header th {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue