hui
1 year ago
37 changed files with 774 additions and 862 deletions
@ -1,5 +1,6 @@ |
|||
<template> |
|||
<div> |
|||
{{ sideTheme }} |
|||
<template v-if="sideTheme == 'theme-dark' || |
|||
sideTheme == 'theme-light' || |
|||
sideTheme == 'theme-blue' |
|||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,253 @@ |
|||
<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> |
|||
</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 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> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: '', |
|||
components: { |
|||
|
|||
}, |
|||
props:{ |
|||
dataList:{ |
|||
type:Array, |
|||
default:()=>[], |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
watch:{ |
|||
|
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.deviceSummary { |
|||
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-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{ |
|||
border-radius: 50%; |
|||
border: 1px solid #00D1FF; |
|||
width: 30px; |
|||
height: 30px; |
|||
padding:8px; |
|||
box-sizing: content-box; |
|||
text-align: center; |
|||
img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
i{ font-size: 26px; color: #00D1FF; line-height: 30px;} |
|||
} |
|||
.numUnit{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 40px; |
|||
.num { |
|||
font-size: 19px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #00D1FF; |
|||
} |
|||
.unit { |
|||
margin-left: 3px; |
|||
font-size: 12px; |
|||
padding-top: 3px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
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)); |
|||
} |
|||
|
|||
.right-list { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.list-text { |
|||
height: 30px; |
|||
line-height: 30px; |
|||
width: 100%; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
|
|||
.title { |
|||
float: left; |
|||
width: 40px; |
|||
text-align: left; |
|||
} |
|||
.value{ |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.value1 { |
|||
color: #00EBC1ee; |
|||
} |
|||
|
|||
.value2 { |
|||
color: #FFFFFFee; |
|||
} |
|||
|
|||
.value3 { |
|||
color: #FFD15Cee; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.title-tool { |
|||
position: relative; |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, rgba(1, 139, 182, 0) 0%, #1FCAF160 100%); |
|||
border-radius: 3px 3px 0px 0px; |
|||
|
|||
.text { |
|||
font-size: 15px; |
|||
letter-spacing: 3px; |
|||
font-family: "PangMenZhengDao"; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.title-tool::after { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 1px; |
|||
width: 100%; |
|||
height: 1px; |
|||
background: linear-gradient(90deg, rgba(81, 181, 255, 0) 3%, #51B5FF 49%, rgba(81, 181, 255, 0) 100%); |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="compBox" :style="boxStyle"> |
|||
<div class="info"> |
|||
<p class="value" :style="{color:skinLib[skin].numColor}">{{ value }}{{ unit }}</p> |
|||
<p class="title" :style="`font-size:${titleFontSize}px`">{{ title }}</p> |
|||
</div> |
|||
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="bg"> |
|||
<defs> |
|||
<template v-for="item,key in skinLib"> |
|||
<linearGradient :id="'stroke'+key" x1="92%" y1="20%" x2="50%" y2="100%"> |
|||
<stop offset="0%" :style="`stop-color:${item.bgColor}; stop-opacity:${item.strokeOpacity[0]}`" /> |
|||
<stop offset="100%" :style="`stop-color:${item.bgColor}; stop-opacity:${item.strokeOpacity[1]}`" /> |
|||
</linearGradient> |
|||
<linearGradient :id="'fill'+key" x1="90%" y1="12%" x2="30%" y2="100%"> |
|||
<stop offset="0%" :style="`stop-color:${item.bgColor}; stop-opacity:${item.fillOpacity[0]}`" /> |
|||
<stop offset="100%" :style="`stop-color:${item.bgColor}; stop-opacity:${item.fillOpacity[1]}`" /> |
|||
</linearGradient> |
|||
</template> |
|||
</defs> |
|||
<ellipse cx="50%" cy="50%" :rx="width / 2 - 1" :ry="height / 2 - 1" |
|||
:style="`fill:url(#fill${skin}); stroke:url(#stroke${skin}); stroke-width:2`" /> |
|||
</svg> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { color } from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'EllipseData', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
skinLib: { |
|||
blue: { bgColor: "rgb(23,162,255)", numColor: "#2CA7F7", strokeOpacity: [0,0.7], fillOpacity: [0,0.6], }, |
|||
cyan: { bgColor: "rgb(23,227,255)", numColor: "#22D0E5", strokeOpacity: [0,0.7], fillOpacity: [0,0.6], }, |
|||
yellow: { bgColor: "rgb(255,206,133)", numColor: "#ECC27F", strokeOpacity: [0,1], fillOpacity: [0,0.85], }, |
|||
green: { bgColor: "rgb(28,124,58)", numColor: "#26B768", strokeOpacity: [0,1], fillOpacity: [0,1], }, |
|||
} |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
props: { |
|||
width: { |
|||
type: Number, |
|||
default: 300 |
|||
}, |
|||
height: { |
|||
type: Number, |
|||
default: 80 |
|||
}, |
|||
value: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
unit: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: "标题" |
|||
}, |
|||
level:{ |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
boxStyle(){ |
|||
return { |
|||
width:this.width + "px", |
|||
height:this.height + "px" |
|||
} |
|||
}, |
|||
titleFontSize(){ |
|||
return [16,14,12,10][this.level]; |
|||
}, |
|||
skin(){ |
|||
return ["yellow", "cyan", "blue", "green"][this.level]; |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.compBox{ |
|||
position: relative; |
|||
.info{ position: absolute; left: 0; top:0; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; |
|||
.value{ font-size: 18px; font-family: "PangMenZhengDao";} |
|||
.title{ font-size: 14px; font-weight: bold;} |
|||
} |
|||
.bg{ |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue