首页
This commit is contained in:
@@ -241,55 +241,61 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n_right_content">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">设备运行情况</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="home_echart_4" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">近一月故障次数前5设备</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="home_echart_5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">最近10次设备故障</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>故障时间</li>
|
||||
<li>设备编码</li>
|
||||
<li>设备名称</li>
|
||||
<li>故障信息</li>
|
||||
<li>当前状态</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="LastTenFailureList" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in LastTenFailureList" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.failure_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.failure_info}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_status_name}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n_right_content">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">设备运行情况</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="home_echart_4" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">近一月故障次数前5设备</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="home_echart_5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">最近10次设备故障</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>故障时间</li>
|
||||
<li>设备编码</li>
|
||||
<li>设备名称</li>
|
||||
<li>故障信息</li>
|
||||
<li>当前状态</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="LastTenFailureList" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in LastTenFailureList" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.failure_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.failure_info}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_status_name}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
|
||||
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
|
||||
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
|
||||
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -615,6 +621,7 @@ export default {
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.n_container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
overflow hidden
|
||||
.n_header
|
||||
@@ -632,21 +639,23 @@ export default {
|
||||
padding-left 3px
|
||||
.n_body_container
|
||||
_wh(100%, 92%)
|
||||
padding 40px 20px 20px 0
|
||||
padding 40px 0 20px 0
|
||||
_bis('../../../images/bg_content_r.jpg')
|
||||
.n_body_container_wraper
|
||||
_wh(100%, 100%)
|
||||
_fj(row)
|
||||
.n_left_content
|
||||
position relative
|
||||
_wh(calc(67% - 16px), 100%)
|
||||
padding-right calc(100% / 3)
|
||||
_wh(100%, 100%)
|
||||
.n_right_content
|
||||
_wh(33%, 100%)
|
||||
position absolute
|
||||
right 0
|
||||
top 0
|
||||
_wh(calc(100% / 3), 100%)
|
||||
background-color #070b1c
|
||||
.item_wrap
|
||||
_wh(100%, 33%)
|
||||
+.item_wrap
|
||||
margin-top .5%
|
||||
_wh(100%, calc(100% / 3))
|
||||
.item_tip
|
||||
_wh(100%, 32px)
|
||||
line-height 32px
|
||||
@@ -710,13 +719,12 @@ export default {
|
||||
.status_wrap
|
||||
position absolute
|
||||
top -26px
|
||||
right 40px
|
||||
right calc(100% / 3)
|
||||
z-index 1
|
||||
_fj(row)
|
||||
.status_item
|
||||
_fj(row)
|
||||
+.status_item
|
||||
margin-left 20px
|
||||
margin-right 20px
|
||||
.status_tip
|
||||
_wh(15px, 15px)
|
||||
border-radius 50%
|
||||
@@ -724,14 +732,6 @@ export default {
|
||||
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||||
.status_name
|
||||
_font(16px, 1, #fff)
|
||||
.green
|
||||
background-color $green2
|
||||
.yellow
|
||||
background-color $yellow
|
||||
.gray
|
||||
background-color $gray1
|
||||
.red
|
||||
background-color $orange
|
||||
.machine_wrap
|
||||
position absolute
|
||||
z-index 2
|
||||
@@ -757,7 +757,7 @@ export default {
|
||||
_wh(100%, auto)
|
||||
.mtp_wrap_2
|
||||
top 35%
|
||||
left 0
|
||||
left 1%
|
||||
.gtssj_wrap_1
|
||||
width 2.5%
|
||||
top 35%
|
||||
@@ -1041,5 +1041,8 @@ export default {
|
||||
100% {
|
||||
transform: rotateZ(-90deg)
|
||||
}
|
||||
}
|
||||
}.style_block
|
||||
position absolute
|
||||
_wh(calc(100% / 3), calc(100% / 3))
|
||||
background red
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user