|
|
|
@ -1,148 +1,201 @@ |
|
|
|
<template> |
|
|
|
<Empty v-if="!dataList || dataList.length<=0" text="暂无数据..."></Empty> |
|
|
|
<div v-else class='deviceSummary'> |
|
|
|
|
|
|
|
<div class="item" v-for=" (item, index) in dataList" :key="index"> |
|
|
|
<div class="item_con"> |
|
|
|
<div class="title-tool"> |
|
|
|
<span class="text">{{ item.title }}</span> |
|
|
|
<Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> |
|
|
|
<div v-else class="deviceSummary"> |
|
|
|
<draggable |
|
|
|
tag="div" |
|
|
|
:list="dataList" |
|
|
|
@end="____onDragend" |
|
|
|
ghostClass="ghost_class" |
|
|
|
dragClass="drag_class" |
|
|
|
chosenClass="chosen_class" |
|
|
|
class="draggable" |
|
|
|
> |
|
|
|
<div class="item" v-for="(item, index) in dataList" :key="index"> |
|
|
|
<div class="item_con"> |
|
|
|
<div class="title-tool"> |
|
|
|
<span class="text">{{ item.title }}</span> |
|
|
|
</div> |
|
|
|
<div class="item-body"> |
|
|
|
<div class="left-body"> |
|
|
|
<div class="icon"> |
|
|
|
<i class="el-icon-menu" v-if="item.title.includes('全部')" /> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/毫米波雷达.svg" |
|
|
|
v-if="item.title.includes('雷达')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/情报板.svg" |
|
|
|
v-if="item.title.includes('可变信息标志')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/摄像机.svg" |
|
|
|
v-if="item.title.includes('枪型')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/设备箱.svg" |
|
|
|
v-if="item.title.includes('设备箱')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/deviceType/ball.svg" |
|
|
|
v-if="item.title.includes('球形摄像机')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/合流区.svg" |
|
|
|
v-if="item.title.includes('合流区预警')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/行车诱导.svg" |
|
|
|
v-if="item.title.includes('行车诱导')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/护栏碰撞.svg" |
|
|
|
v-if="item.title.includes('碰撞')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/deviceType/ball.svg" |
|
|
|
v-if="item.title.includes('全景摄像机')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/交调.svg" |
|
|
|
v-if="item.title.includes('交通量调')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/气象检测器.svg" |
|
|
|
v-if="item.title.includes('气象')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/语音广播.svg" |
|
|
|
v-if="item.title.includes('语音广播')" |
|
|
|
/> |
|
|
|
<img |
|
|
|
src="@screen/images/layer/路测设备/疲劳唤醒.svg" |
|
|
|
v-if="item.title.includes('疲劳唤醒')" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="numUnit"> |
|
|
|
<span class="num">{{ item.total }}</span> |
|
|
|
<span class="unit">套</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="right-list"> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">在用：</span> |
|
|
|
<div class="value value4"> |
|
|
|
{{ item.sumUseState }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item-body"> |
|
|
|
<div class="left-body"> |
|
|
|
<div class="icon"> |
|
|
|
<i class="el-icon-menu" v-if="item.title.includes('全部')"/> |
|
|
|
<img src="@screen/images/layer/路测设备/毫米波雷达.svg" v-if="item.title.includes('雷达')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/情报板.svg" v-if="item.title.includes('可变信息标志')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/摄像机.svg" v-if="item.title.includes('枪型')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/设备箱.svg" v-if="item.title.includes('设备箱')" /> |
|
|
|
<img src="@screen/images/deviceType/ball.svg" v-if="item.title.includes('球形摄像机')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/合流区.svg" v-if="item.title.includes('合流区预警')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/行车诱导.svg" v-if="item.title.includes('行车诱导')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/护栏碰撞.svg" v-if="item.title.includes('碰撞')" /> |
|
|
|
<img src="@screen/images/deviceType/ball.svg" v-if="item.title.includes('全景摄像机')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/交调.svg" v-if="item.title.includes('交通量调')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/气象检测器.svg" v-if="item.title.includes('气象')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/语音广播.svg" v-if="item.title.includes('语音广播')" /> |
|
|
|
<img src="@screen/images/layer/路测设备/疲劳唤醒.svg" v-if="item.title.includes('疲劳唤醒')" /> |
|
|
|
</div> |
|
|
|
<div class="numUnit"> |
|
|
|
<span class="num">{{ item.total }}</span> |
|
|
|
<span class="unit">套</span> |
|
|
|
</div> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">在线：</span> |
|
|
|
<div class="value value1"> |
|
|
|
{{ item.pctOnl }} |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="right-list"> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">在用：</span> |
|
|
|
<div class="value value4"> |
|
|
|
{{ item.sumUseState }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">在线：</span> |
|
|
|
<div class="value value1"> |
|
|
|
{{ item.pctOnl }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-text"><span class="title">离线：</span> |
|
|
|
<div class="value value2"> |
|
|
|
{{ item.pctOffl }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">丢包：</span> |
|
|
|
<div class="value value3"> |
|
|
|
{{ item.pctLose }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">离线：</span> |
|
|
|
<div class="value value2"> |
|
|
|
{{ item.pctOffl }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-text"> |
|
|
|
<span class="title">丢包：</span> |
|
|
|
<div class="value value3"> |
|
|
|
{{ item.pctLose }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: '', |
|
|
|
components: { |
|
|
|
|
|
|
|
}, |
|
|
|
props:{ |
|
|
|
dataList:{ |
|
|
|
type:Array, |
|
|
|
default:()=>[], |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
} |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
</div> |
|
|
|
</draggable> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import draggable from "vuedraggable"; |
|
|
|
export default { |
|
|
|
name: "", |
|
|
|
components: { draggable }, |
|
|
|
props: { |
|
|
|
dataList: { |
|
|
|
type: Array, |
|
|
|
default: () => [], |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
.deviceSummary { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
____onDragend() {}, |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.deviceSummary { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin-right: 0px; |
|
|
|
overflow-y: scroll; |
|
|
|
.draggable { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin-right: 0px; |
|
|
|
overflow-y: scroll; |
|
|
|
>.item { |
|
|
|
flex-basis:percentage(1/8); |
|
|
|
width: 0; |
|
|
|
margin: 0; |
|
|
|
padding: 0 15px 15px 0; |
|
|
|
height: 194px; |
|
|
|
>.item_con{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
flex-direction: column; |
|
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425868 93%); |
|
|
|
border-radius: 3px 3px 3px 3px; |
|
|
|
} |
|
|
|
.item { |
|
|
|
flex-basis: percentage(1/8); |
|
|
|
width: 0; |
|
|
|
margin: 0; |
|
|
|
padding: 0 15px 15px 0; |
|
|
|
height: 194px; |
|
|
|
> .item_con { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
flex-direction: column; |
|
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425868 93%); |
|
|
|
border-radius: 3px 3px 3px 3px; |
|
|
|
.item-body { |
|
|
|
height: 90px; |
|
|
|
margin-top: 30px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: stretch; |
|
|
|
|
|
|
|
|
|
|
|
.left-body { |
|
|
|
display: flex; |
|
|
|
width: 90px; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.icon{ |
|
|
|
|
|
|
|
.icon { |
|
|
|
border-radius: 50%; |
|
|
|
border: 1px solid #00D1FF; |
|
|
|
border: 1px solid #00d1ff; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
padding:8px; |
|
|
|
padding: 8px; |
|
|
|
box-sizing: content-box; |
|
|
|
text-align: center; |
|
|
|
img{ |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
i{ font-size: 26px; color: #00D1FF; line-height: 30px;} |
|
|
|
i { |
|
|
|
font-size: 26px; |
|
|
|
color: #00d1ff; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
.numUnit{ |
|
|
|
.numUnit { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
@ -152,7 +205,7 @@ |
|
|
|
font-size: 19px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #00D1FF; |
|
|
|
color: #00d1ff; |
|
|
|
} |
|
|
|
.unit { |
|
|
|
margin-left: 3px; |
|
|
|
@ -160,17 +213,20 @@ |
|
|
|
padding-top: 3px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFFF0; |
|
|
|
color: #fffffff0; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
width: 2px; |
|
|
|
margin: 0 10px 0 5px; |
|
|
|
background: linear-gradient(180deg, rgba(3, 60, 81, 0), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0)); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(3, 60, 81, 0), |
|
|
|
rgba(0, 100, 137, 1), |
|
|
|
rgba(3, 60, 81, 0) |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
.right-list { |
|
|
|
@ -187,38 +243,35 @@ |
|
|
|
font-size: 12px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
.title { |
|
|
|
float: left; |
|
|
|
width: 40px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.value{ |
|
|
|
.value { |
|
|
|
font-size: 14px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 800; |
|
|
|
} |
|
|
|
|
|
|
|
.value1 { |
|
|
|
color: #00EBC1ee; |
|
|
|
color: #00ebc1ee; |
|
|
|
} |
|
|
|
|
|
|
|
.value2 { |
|
|
|
color: #FFFFFFee; |
|
|
|
color: #ffffffee; |
|
|
|
} |
|
|
|
|
|
|
|
.value3 { |
|
|
|
color: #FFD15Cee; |
|
|
|
color: #ffd15cee; |
|
|
|
} |
|
|
|
.value4 { |
|
|
|
color: #0D0; |
|
|
|
color: #0d0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.title-tool { |
|
|
|
@ -227,16 +280,19 @@ |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 36px; |
|
|
|
background: linear-gradient(180deg, rgba(1, 139, 182, 0) 0%, #1FCAF160 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(1, 139, 182, 0) 0%, |
|
|
|
#1fcaf160 100% |
|
|
|
); |
|
|
|
border-radius: 3px 3px 0px 0px; |
|
|
|
|
|
|
|
.text { |
|
|
|
font-size: 15px; |
|
|
|
font-family: "Arial","PingFang","Microsoft YaHei"; |
|
|
|
font-family: "Arial", "PingFang", "Microsoft YaHei"; |
|
|
|
font-weight: bold; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.title-tool::after { |
|
|
|
@ -245,12 +301,14 @@ |
|
|
|
bottom: 1px; |
|
|
|
width: 100%; |
|
|
|
height: 1px; |
|
|
|
background: linear-gradient(90deg, rgba(81, 181, 255, 0) 3%, #51B5FF 49%, rgba(81, 181, 255, 0) 100%); |
|
|
|
background: linear-gradient( |
|
|
|
90deg, |
|
|
|
rgba(81, 181, 255, 0) 3%, |
|
|
|
#51b5ff 49%, |
|
|
|
rgba(81, 181, 255, 0) 100% |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
