Skip to content

P
pjnkb-vue
Commit 26481991 authored by 李苏's avatar 李苏 💬
Browse files
Options

大屏调整

parent c3aca70d
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 30 deletions
src/views/index.vue
View file @ 26481991
......@@ -17,9 +17,9 @@
<!-- 1-->
<div class="main_body_left_c1">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>全厂报警产生频率(次/本月)</span>
<img src="./static/ksh33.png" alt="">
</div>
<div class="mkbody data-box1">
<div ref="ypc" class="full">
......@@ -33,9 +33,9 @@
<div class="main_body_left_c2">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>全厂报警产生频率(次/本周)</span>
<img src="./static/ksh33.png" alt="">
<!-- <img src="./static/ksh33.png" alt=""> -->
</div>
<div class="mkbody data-box1">
<div ref="zpc" class="full">
......@@ -50,9 +50,9 @@
<div class="main_body_left_c3">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>设备报警频次</span>
<img src="./static/ksh33.png" alt="">
</div>
<div class="mkbody data-box1">
<div ref='sbbjpc' class="full">
......@@ -91,22 +91,22 @@
</div>
</div>
<!-- 展示数量-->
<div class="grid-container " style="padding: 10px;">
<div v-for="(item,index) in showList" :key="index" class="grid-item">
<div class="grid-container " style="padding: 25px;">
<div v-for="(item,index) in showList" :key="index" class="grid-item data-box1 ">
<!-- title-->
<div
style="color: #26c6f0; font-size: 15px;text-align: center;font-weight: 700;line-height: 30px;width: 100%;">
style="color: #26c6f0; font-size: 12px;text-align: center;font-weight: 700;line-height: 30px;width: 100%;">
{{item.name}}
</div>
<div style="height: calc(100% - 30px);width: 100%;display: flex;flex-direction: column;">
<div class="flex1 flex-center">
<span style="font-size: 15px;color: #26c6f0;">异常设备数量:</span> <span
style="font-size: 20px;font-style: italic;;color: #e39001;">{{item.ycsl}}</span>
<span style="font-size: 12px;color: #26c6f0;">异常设备数量:</span> <span
style="font-size: 14px;font-style: italic;;color: #e39001;">{{item.ycsl}}</span>
</div>
<div class="flex1 text-center ">
<div class="flex1 ">
<span style="font-size: 15px;color: #26c6f0;">设备总数量:</span> <span
style="font-size: 20px;font-style: italic;;color: #fff;">{{item.zsl}}</span>
<span style="font-size: 12px;color: #26c6f0;">设备总数量:</span> <span
style="font-size: 14px;font-style: italic;;color: #fff;">{{item.zsl}}</span>
</div>
</div>
</div>
......@@ -193,9 +193,9 @@
<!-- 2-->
<div class="main_body_right_c2">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>报警统计</span>
<img src="./static/ksh33.png" alt="">
</div>
<div class="mkbody data-box1">
<div class="full flex">
......@@ -215,9 +215,9 @@
<!-- 3-->
<div class="main_body_right_c3">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>全厂处置率(周)</span>
<img src="./static/ksh33.png" alt="">
</div>
<div class="mkbody data-box1">
<div class="full flex">
......@@ -236,9 +236,9 @@
<!-- 4-->
<div class="main_body_right_c4">
<div class="full">
<div class="mktitle">
<div class="main_title">
<span>全场报警等级统计</span>
<img src="./static/ksh33.png" alt="">
</div>
<div class="mkbody data-box1">
<div ref="qcbjtj" class="full">
......@@ -467,7 +467,8 @@
},
axisLabel: {
show: true,
color: 'white'
color: 'white',
fontSize: 8,
}
}],
yAxis: [{
......@@ -553,7 +554,7 @@
color: 'white',
interval: 0, // 确保所有标签都显示
rotate: 15,
fontSize: 10,
fontSize: 8,
}
}],
yAxis: [{
......@@ -737,7 +738,7 @@
color: 'white',
interval: 0, // 确保所有标签都显示
rotate: 15,
fontSize: 10,
fontSize: 8,
}
}],
yAxis: [{
......@@ -851,7 +852,7 @@
color: 'white',
interval: 0, // 确保所有标签都显示
rotate: 15,
fontSize: 10,
fontSize: 8,
}
}],
yAxis: [{
......@@ -970,7 +971,7 @@
color: 'white',
interval: 0, // 确保所有标签都显示
rotate: 8,
fontSize: 10,
fontSize: 8,
}
}],
yAxis: [{
......@@ -1054,7 +1055,7 @@
color: 'white',
interval: 0, // 确保所有标签都显示
rotate: 8,
fontSize: 10,
fontSize: 8,
}
}],
yAxis: [{
......@@ -1159,7 +1160,8 @@
axisLabel: {
interval: 0,
show: true,
color: 'white'
color: 'white',
fontSize: 8
}
}],
xAxis: [{
......@@ -1184,7 +1186,7 @@
color: 'white',
rotate: 0,
interval: 0,
fontSize: 12,
fontSize: 8,
align: 'center',
}
}],
......@@ -1219,6 +1221,34 @@
}
</script>
<style lang="scss" scoped>
.data-box1 {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.main_title {
width: 100%;
height: 35px;
line-height: 33px;
background-color: #1b4081;
color: #fff;
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
padding-left: 20px;
text-align: left;
position: relative;
border: 1px solid #03657c;
}
.main_title:before {
position: absolute;
left: 2px;
content: '';
width: 4px;
height: 35px;
background-color: #2EB976;}
.lbbt {
height: 4vh;
width: 100%;
......@@ -1258,10 +1288,10 @@
.menu {
// float: left;
width: 142px;
width: 128px;
height: 48px;
margin: 5px 6px 0;
background: url(./static/dhbg.png) no-repeat;
background: url(./static/dhbg.png) no-repeat 100% 100%;
text-align: center;
line-height: 48px;
color: #26c6f0;
......@@ -1285,7 +1315,7 @@
text-align: center;
line-height: 60px;
color: #3279d5;
font-size: 22px;
font-size: 19px;
font-weight: 800;
}
......
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