nyjcd
This commit is contained in:
lll
parent
c9830c2b2b
commit
0b78323501
|
|
@ -17,8 +17,8 @@
|
||||||
/* width: 100vw;
|
/* width: 100vw;
|
||||||
height: 100vh; */
|
height: 100vh; */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: 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);
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
|
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
|
||||||
<p>智能运维</p>
|
<p>智能运维</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="box6" v-if="isShow">
|
<div class="box6" v-if="isShow" @click="sendMessageToCSharp">
|
||||||
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
|
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
|
||||||
<p>碳资产管理</p>
|
<p>碳资产管理</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,6 +99,14 @@ export default {
|
||||||
isShow: true,
|
isShow: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
sendMessageToCSharp() {
|
||||||
|
window.vuplex.postMessage({
|
||||||
|
type: "Tog",
|
||||||
|
message: "碳资产管理_true",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,36 @@
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
<p>余热发电</p>
|
<p>余热发电</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -125,6 +154,10 @@ export default {
|
||||||
option2: {
|
option2: {
|
||||||
legend: {
|
legend: {
|
||||||
data: ["余热发电量"],
|
data: ["余热发电量"],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
|
|
@ -171,10 +204,80 @@ export default {
|
||||||
data: [523, 410, 300, 300, 250],
|
data: [523, 410, 300, 300, 250],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
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: {
|
lineStyle: {
|
||||||
width: 5, //折线宽度
|
width: 5, //折线宽度
|
||||||
color: "#21FF55", //折线颜色
|
color: "#43FFF4", //折线颜色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -199,6 +302,36 @@ export default {
|
||||||
value: "6.52",
|
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() {
|
mounted() {
|
||||||
this.defineEcharts("qcssdh", this.option1);
|
this.defineEcharts("qcssdh", this.option1);
|
||||||
|
this.defineEcharts("yrfd", this.option2);
|
||||||
|
this.defineEcharts("ljfdl", this.option3);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -385,6 +520,83 @@ export default {
|
||||||
}
|
}
|
||||||
.chartBox {
|
.chartBox {
|
||||||
margin-top: 50px;
|
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