Skip to content

G
gassafety-progress
Commit f6685227 authored by yaqizhang's avatar yaqizhang
Browse files
Options

添加燃气用户数量

parent 81713b8b
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 60 deletions
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ f6685227
......@@ -140,54 +140,100 @@
></div>
</div>
</div>
<div class="outuser">
<div class="outuserone">
<p>燃气用户数量</p>
<span class="outuserspan">{{ diviceNum.userNum }}</span>
<div class="inuser">
<div class="outuserleft">
<div class="outuserone">
<p>燃气用户数量</p>
<!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> -->
</div>
<div id="huanleft" style="width: 235px; height: 170px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">用户总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
>{{ diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in4">
<span> ● </span>
<span style="color: #cddbe4">居民用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.juminNum }}</span
>
</div>
<div class="usernumin in5">
<span> ● </span>
<span style="color: #cddbe4">商业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.shangNum }}</span
>
</div>
<div class="usernumin in6">
<span> ● </span>
<span style="color: #cddbe4">工业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.gongNum }}</span
>
</div>
</div>
</div>
<div class="outusertwo">
<p>安全设备数量</p>
<span class="outuserspan">{{
diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
}}</span>
</div>
</div>
<div id="huan" style="width: 450px; height: 170px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">设备总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
>{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in1">
<span> ● </span>
<span style="color: #cddbe4">在线数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.changNum }}</span
>
</div>
<div class="usernumin in2">
<span> ● </span>
<span style="color: #cddbe4">离线数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.liNum }}</span
>
</div>
<div class="usernumin in3">
<span> ● </span>
<span style="color: #cddbe4">报警数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.baoNum }}</span
>
<div class="outuserright">
<div class="outusertwo">
<p>安全设备数量</p>
<!-- <span class="outuserspan">{{
diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
}}</span> -->
</div>
<div id="huanright" style="width: 235px; height: 170px;"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">设备总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
>{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in1">
<span> ● </span>
<span style="color: #cddbe4">在线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.changNum }}</span
>
</div>
<div class="usernumin in2">
<span> ● </span>
<span style="color: #cddbe4">离线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.liNum }}</span
>
</div>
<div class="usernumin in3">
<span> ● </span>
<span style="color: #cddbe4">报警 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.baoNum }}</span
>
</div>
</div>
</div>
</div>
<!-- 资源统计 -->
......@@ -395,7 +441,7 @@ export default {
top: "8%",
left: "8%",
right: "4%",
bottom: "7%",
bottom: "10%",
containLabel: true,
},
xAxis: {
......@@ -506,12 +552,96 @@ export default {
});
},
drawLine3() {
// 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById("huan"));
// let myChart32 = echarts.init(document.getElementById('main32'))
let myChart31 = echarts.init(document.getElementById("huanleft"));
let myChart32 = echarts.init(document.getElementById('huanright'))
// 绘制图表
myChart31.setOption({
color: ["#91cc75", "#5470c6", "#fa8167" ],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
},
},
name: "民警训练总量",
data: [
{ name: "居民用户", value: this.diviceNum.juminNum },
{ name: "商业用户", value: this.diviceNum.shangNum },
{ name: "工业用户", value: this.diviceNum.gongNum },
],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
},
},
},
],
},
],
});
myChart32.setOption({
color: ["#FF4040", "#F0C41B", "#188DF0"],
grid: {
left: 0,
......@@ -722,22 +852,30 @@ export default {
transform: scale(2.4);
}
}
.outuser {
width: 450px;
height: 60px;
.inuser{
width: 100%;
height: 265px;
}
.outuserone {
.outuserleft {
width: 50%;
height: 100%;
text-align: center;
float: left;
color: #cddbe4;
}
.outusertwo {
.outuserright {
width: 50%;
height: 100%;
text-align: center;
float: right;
}
.outuserone {
width: 100%;
height: 20px;
text-align: center;
color: #cddbe4;
}
.outusertwo {
width: 100%;
height: 20px;
text-align: center;
color: #cddbe4;
}
.outuserspan {
......@@ -748,9 +886,7 @@ export default {
}
.usernum {
width: 100%;
height: 20px;
display: flex;
justify-content: space-around;
text-align: center;
}
.usernumin {
font-size: 15px;
......@@ -764,6 +900,15 @@ export default {
.in3 {
color: #ff4040;
}
.in4 {
color: #91cc75;
}
.in5 {
color: #5470c6;
}
.in6 {
color: #fa8167;
}
.inyuan {
width: 106px;
height: 106px;
......@@ -772,7 +917,7 @@ export default {
position: fixed;
margin-bottom: 10px;
margin-top: -138px;
margin-left: 172px;
margin-left: 64px;
font-size: 15px;
color: #cddbe4;
text-align: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment