<template>
<div class="app-container">
<!-- 鱼骨图开始 -->
<div class="self_box_commonbg self_earlytime">
<div class="self_earlytimeLbg">
<img src="/img/earlywarning/oilun.png"/>
</div>
<div class="self_earlytimeDIV">
<ul v-for="(item,index) in oilunList">
<li :class="item.status==1?'':'self_time01_bgactive'">
<span>{{item.name}}</span>
<span>{{item.value}}次</span>
</li>
</ul>
</div>
</div>
<div class="self_box_commonbg self_earlytime self_oilprecept02">
<div class="self_earlytimeLbg">
<img src="/img/earlywarning/oiling.png"/>
</div>
<div class="self_earlytimeDIV">
<ul v-for="(item,index) in oilingList">
<li :class="item.status==1?'':'self_time01_bgactive'">
<span>{{item.name}}</span>
<span>{{item.value}}次</span>
</li>
</ul>
</div>
</div>
<div class="self_box_commonbg self_earlytime self_oilprecept02 self_oilprecept03">
<div class="self_earlytimeLbg">
<img src="/img/earlywarning/dailycheck.png"/>
</div>
<div class="self_earlytimeDIV">
<ul v-for="(item,index) in dailycheckList">
<li :class="item.status==1?'':'self_time01_bgactive'">
<span>{{item.name}}</span>
<span>{{item.value}}次</span>
</li>
</ul>
</div>
</div>
<!-- 鱼骨图开始 -->
</div>
</template>
<script>
export default {
components: {
org,
oilStation,
},
data() {
return {
//卸油 1正常 2异常
oilunList: [
{
name: '作业准备',
value: 0,
status: 1,
},
{
name: '质量验收',
value: 4,
status: 2,
},
{
name: '卸油作业',
value: 5,
status: 2,
},
{
name: '数量验收',
value: 0,
status: 1,
},
{
name: '整理现场',
value: 4,
status: 2,
},
{
name: '作业结束',
value: 0,
status: 1,
}
],
//加油 1正常 2异常
oilingList: [
{
name: '前厅',
value: 2,
status: 2,
},
{
name: '营业厅',
value: 0,
status: 1,
},
{
name: '电器设备',
value: 5,
status: 2,
},
{
name: '油罐区',
value: 3,
status: 2,
},
{
name: '环保',
value: 0,
status: 1,
}
],
//巡检 1正常 2异常
dailycheckList: [
{
name: '入口',
value: 5,
status: 2,
},
{
name: '出口',
value: 4,
status: 2,
},
{
name: '加油岛',
value: 0,
status: 1,
}
]
}
},
created() {
},
methods: {}
}
</script>
<style lang="scss">
.self_earlytime {
position: relative;
height: 300px;
padding: 20px 20px 20px 120px;
box-sizing: border-box;
margin-bottom: 20px;
/* 左边图 */
.self_earlytimeLbg {
position: absolute;
top: 26%;
left: 20px;
width: 100px;
>img {
width: 100%;
height: 100%;
}
}
/* 右边 */
.self_earlytimeDIV {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: relative;
height: 100%;
overflow: hidden;
overflow-x: scroll;
>ul {
height: 100%;
position: relative;
width: 200px;
height: 100%;
margin-left: 20px;
float: left;
>li {
position: absolute;
top: 5%;
left: 12%;
width: 89%;
height: 25px;
line-height: 24px;
padding: 0 10px;
background: rgba(35, 255, 252, 0.1);
border-radius: 16px;
font-size: 0.7rem;
overflow: hidden;
>span:nth-child(2) {
float: right;
}
}
/* 状态 */
>li.self_time01_bgactive {
background: rgba(49, 248, 246, 1);
color: #000;
}
}
>ul:before {
content: "";
position: absolute;
top: 9%;
left: 10%;
margin-left: -10px;
width: 16px;
height: 99px;
background: url('/img/earlywarning/oilun_lineb.png');
background-size: 100%;
}
/* 偶数行 */
>ul:nth-child(even) {
>li {
top: 85%;
}
}
>ul:nth-child(even):before {
transform:rotate(180deg);
top: 50%;
}
}
.self_earlytimeDIV:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
border-top: 1px dashed rgba(51, 213, 218, 0.3);
}
}
/* 第二种鱼骨图样式 */
.self_oilprecept02 {
.self_earlytimeDIV {
>ul {
>li {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
text-align: center;
>span:nth-child(1) {
}
>span:nth-child(2) {
float: none;
position: absolute;
left: 0;
top: 19%;
display: inline-block;
width: 100%;
}
}
/* 状态 */
>li.self_time01_bgactive {
background: none;
>span:nth-child(1) {
color: #fff;
}
}
>li.self_time01_bgactive:before {
background: url('/img/earlywarning/oiling_topyes.png');
background-size: 100%;
}
>li:before {
content: "";
width: 60px;
height: 86px;
position: absolute;
left: 50%;
top: 12%;
margin-left: -30px;
background: url('/img/earlywarning/oiling_topno.png');
background-size: 100%;
}
}
>ul:before {
top: 48%;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(35, 255, 252, 1);
}
/* 偶数行 */
>ul:nth-child(even) {
>li {
top: 10%;
>span:nth-child(1) {
display: inline-block;
text-align: center;
width: 100%;
position: absolute;
top: 78%;
left: 0;
}
>span:nth-child(2) {
top: 60%;
}
}
>li:before {
transform:rotate(180deg);
top: 43%;
}
}
>ul:nth-child(even):before {
top: 48%;
}
}
}
/* 第三种鱼骨图样式 */
.self_oilprecept03 {
.self_earlytimeDIV {
>ul {
>li {
>span:nth-child(1) {
width: 100%;
text-align: center;
position: absolute;
top: 49%;
left: 0;
}
>span:nth-child(2) {
top: 26%;
}
}
/* 状态 */
>li.self_time01_bgactive:before {
background: url('/img/earlywarning/dailycheck_topyes.png');
background-size: 100%;
}
>li:before {
width: 60px;
height: 69px;
background: url('/img/earlywarning/dailycheck_topno.png');
background-size: 100%;
top: 17%;
}
}
>ul:before {
top: 46%;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-radius: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #23FFFC;
background: none;
}
/* 偶数行 */
>ul:nth-child(even) {
>li {
>span:nth-child(1) {
top: 31%;
}
>span:nth-child(2) {
top: 54%;
}
}
>li:before {
top: 45%;
}
}
>ul:nth-child(even):before {
top: 50%;
}
}
}
</style>
