liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nyjcd

This commit is contained in:
lll 2023-11-23 13:42:26 +08:00
parent c9830c2b2b
commit 0b78323501
3 changed files with 225 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -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>

10
src/views/Index.vue
View File

@ -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>

218
src/views/lll/NYJCD.vue
View File

@ -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;
}
}
}
}
}