Compare commits
No commits in common. "b3101fbda6648a9b5b8e8ce0144687ce6753aafd" and "ffd9b01cc3da7d41cce5f700049f419c556d7a64" have entirely different histories.
b3101fbda6
...
ffd9b01cc3
|
|
@ -17,7 +17,7 @@
|
||||||
/* width: 100vw;
|
/* width: 100vw;
|
||||||
height: 100vh; */
|
height: 100vh; */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: transparent;
|
background-color: transparent;
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB |
|
|
@ -29,11 +29,6 @@ const routes = [
|
||||||
name: "pds",
|
name: "pds",
|
||||||
component: () => import("../views/lll/PDS.vue"),
|
component: () => import("../views/lll/PDS.vue"),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/nyjcd",
|
|
||||||
name: "nyjcd",
|
|
||||||
component: () => import("../views/lll/NYJCD.vue"),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,6 @@ export default {
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: transparent;
|
|
||||||
background: url(../assets/img/标题.png);
|
background: url(../assets/img/标题.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,390 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="box">
|
|
||||||
<div class="left">
|
|
||||||
<img src="../../assets/img/标题/能源监测-电.png" class="title" />
|
|
||||||
<div class="qcssdh">
|
|
||||||
<div class="imgBox">
|
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
||||||
<p>全厂实时电荷</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
|
||||||
>年</span
|
|
||||||
>
|
|
||||||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
|
||||||
>月</span
|
|
||||||
>
|
|
||||||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
|
||||||
>日</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div id="qcssdh"></div>
|
|
||||||
</div>
|
|
||||||
<div class="qcydl">
|
|
||||||
<div class="imgBox">
|
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
||||||
<p>全厂用电量</p>
|
|
||||||
</div>
|
|
||||||
<div class="chartBox">
|
|
||||||
<div class="chartbox" v-for="item in list">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
<div class="bigBox">
|
|
||||||
<div
|
|
||||||
class="smallBox"
|
|
||||||
:style="{ width: `${35 * item.value}px` }"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span>{{ item.value }}kWh</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="zjtpt">
|
|
||||||
<div class="imgBox">
|
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
||||||
<p>总降拓扑图</p>
|
|
||||||
</div>
|
|
||||||
<div class="imgBox1">
|
|
||||||
<img src="../../assets/znyw/tpt.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<div class="yrfd">
|
|
||||||
<div class="imgBox">
|
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
||||||
<p>余热发电</p>
|
|
||||||
</div>
|
|
||||||
<div class="chartBox"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
res: "月",
|
|
||||||
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: ["余热发电量"],
|
|
||||||
},
|
|
||||||
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: "bar",
|
|
||||||
name: "余热发电量",
|
|
||||||
data: [523, 410, 300, 300, 250],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#00FF00",
|
|
||||||
lineStyle: {
|
|
||||||
width: 5, //折线宽度
|
|
||||||
color: "#21FF55", //折线颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
name: "1号生产线",
|
|
||||||
value: "15.20",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2号生产线",
|
|
||||||
value: "6.21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "3号生产线",
|
|
||||||
value: "6.21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "生活办公区",
|
|
||||||
value: "6.52",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
defineEcharts(dom, option) {
|
|
||||||
var chartDom = document.getElementById(dom);
|
|
||||||
var myChart = this.$echarts.init(chartDom);
|
|
||||||
myChart.setOption(option);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.defineEcharts("qcssdh", this.option1);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 500px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.qcssdh {
|
|
||||||
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;
|
|
||||||
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";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#qcssdh {
|
|
||||||
width: 1155px;
|
|
||||||
height: 600px;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.qcydl {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 56px;
|
|
||||||
.imgBox {
|
|
||||||
height: 93px;
|
|
||||||
width: 1156px;
|
|
||||||
p {
|
|
||||||
position: absolute;
|
|
||||||
color: #fff;
|
|
||||||
top: 20px;
|
|
||||||
left: 50px;
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: "MicrosoftYaHei";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chartBox {
|
|
||||||
width: 1155px;
|
|
||||||
margin-top: 50px;
|
|
||||||
.chartbox {
|
|
||||||
width: 1000%;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 30px;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 100px;
|
|
||||||
.bigBox {
|
|
||||||
width: 661px;
|
|
||||||
height: 65px;
|
|
||||||
background-color: #273546;
|
|
||||||
.smallBox {
|
|
||||||
width: 100px;
|
|
||||||
height: 65px;
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
rgba(1, 191, 249, 1) 20%,
|
|
||||||
rgba(68, 161, 201, 1) 100%,
|
|
||||||
rgba(42, 196, 243, 1) 20%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span:nth-of-type(1) {
|
|
||||||
width: 231px;
|
|
||||||
}
|
|
||||||
span:nth-of-type(2) {
|
|
||||||
color: #10ff3c;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zjtpt {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 56px;
|
|
||||||
.imgBox {
|
|
||||||
height: 93px;
|
|
||||||
width: 1156px;
|
|
||||||
p {
|
|
||||||
position: absolute;
|
|
||||||
color: #fff;
|
|
||||||
top: 20px;
|
|
||||||
left: 50px;
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: "MicrosoftYaHei";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.imgBox1 {
|
|
||||||
margin-top: 50px;
|
|
||||||
width: 1156px;
|
|
||||||
height: 500px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
width: 1237px;
|
|
||||||
height: 2500px;
|
|
||||||
margin-right: 61px;
|
|
||||||
background-image: url("../../assets/img/侧边.png");
|
|
||||||
padding-left: 59px;
|
|
||||||
padding-right: 45px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.yrfd {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -568,12 +568,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: linear-gradient(
|
background: linear-gradient(#38b7a1 20%, #38b7a1 0%);
|
||||||
90deg,
|
|
||||||
rgba(56, 183, 161, 0.3) 30%,
|
|
||||||
rgba(79, 180, 163, 0.3) 30%,
|
|
||||||
rgba(81, 147, 136, 0.3) 40%
|
|
||||||
);
|
|
||||||
border-left: 5px solid #28a896;
|
border-left: 5px solid #28a896;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue