nyjcd
This commit is contained in:
lll
parent
c9830c2b2b
commit
0b78323501
|
|
@ -17,8 +17,8 @@
|
|||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
|
||||
<p>智能运维</p>
|
||||
</div>
|
||||
<div class="box6" v-if="isShow">
|
||||
<div class="box6" v-if="isShow" @click="sendMessageToCSharp">
|
||||
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
|
||||
<p>碳资产管理</p>
|
||||
</div>
|
||||
|
|
@ -99,6 +99,14 @@ export default {
|
|||
isShow: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sendMessageToCSharp() {
|
||||
window.vuplex.postMessage({
|
||||
type: "Tog",
|
||||
message: "碳资产管理_true",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,36 @@
|
|||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>余热发电</p>
|
||||
</div>
|
||||
<div class="chartBox"></div>
|
||||
<div class="chartBox">
|
||||
<div id="yrfd"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ljfdl">
|
||||
<div class="imgBox">
|
||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>垃圾发电量</p>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div id="ljfdl"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qcsbydpm">
|
||||
<div class="imgBox">
|
||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>全厂设备用电排名</p>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div class="chartbox" v-for="item in list1">
|
||||
<span>{{ item.name }}</span>
|
||||
<div class="bigBox">
|
||||
<div
|
||||
class="smallBox"
|
||||
:style="{ width: `${40 * item.value}px` }"
|
||||
></div>
|
||||
</div>
|
||||
<span>{{ item.value }}kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,6 +154,10 @@ export default {
|
|||
option2: {
|
||||
legend: {
|
||||
data: ["余热发电量"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "20px",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
|
|
@ -171,10 +204,80 @@ export default {
|
|||
data: [523, 410, 300, 300, 250],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00FF00",
|
||||
color: "#09E83E",
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
value: "max",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#09E83E",
|
||||
fontSize: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
option3: {
|
||||
legend: {
|
||||
data: [{ 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: "单位: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",
|
||||
name: "垃圾发电量",
|
||||
symbolSize: 15,
|
||||
data: [200, 300, 500, 400, 334],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#43FFF4",
|
||||
lineStyle: {
|
||||
width: 5, //折线宽度
|
||||
color: "#21FF55", //折线颜色
|
||||
color: "#43FFF4", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -199,6 +302,36 @@ export default {
|
|||
value: "6.52",
|
||||
},
|
||||
],
|
||||
list1: [
|
||||
{
|
||||
name: "回转窑",
|
||||
value: "15.20",
|
||||
},
|
||||
{
|
||||
name: "熟料收尘",
|
||||
value: "6.21",
|
||||
},
|
||||
{
|
||||
name: "篦冷机",
|
||||
value: "6.21",
|
||||
},
|
||||
{
|
||||
name: "生料收尘",
|
||||
value: "6.52",
|
||||
},
|
||||
{
|
||||
name: "生料磨",
|
||||
value: "4.57",
|
||||
},
|
||||
{
|
||||
name: "预热器",
|
||||
value: "4.27",
|
||||
},
|
||||
{
|
||||
name: "配电室",
|
||||
value: "3.27",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -211,6 +344,8 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.defineEcharts("qcssdh", this.option1);
|
||||
this.defineEcharts("yrfd", this.option2);
|
||||
this.defineEcharts("ljfdl", this.option3);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -385,6 +520,83 @@ export default {
|
|||
}
|
||||
.chartBox {
|
||||
margin-top: 50px;
|
||||
#yrfd {
|
||||
width: 1156px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ljfdl {
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
width: 1156px;
|
||||
p {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
font-size: 30px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
}
|
||||
}
|
||||
.chartBox {
|
||||
margin-top: 50px;
|
||||
#ljfdl {
|
||||
width: 1156px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qcsbydpm {
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
.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: 100%;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
.bigBox {
|
||||
width: 661px;
|
||||
height: 26px;
|
||||
background-color: #273546;
|
||||
.smallBox {
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(1, 191, 249, 1) 20%,
|
||||
rgba(68, 161, 201, 1) 100%,
|
||||
rgba(42, 196, 243, 1) 20%
|
||||
);
|
||||
}
|
||||
}
|
||||
span:nth-of-type(1) {
|
||||
width: 231px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
color: #10ff3c;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue