hui
1 year ago
37 changed files with 774 additions and 862 deletions
@ -1,5 +1,6 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
|
{{ sideTheme }} |
||||
<template v-if="sideTheme == 'theme-dark' || |
<template v-if="sideTheme == 'theme-dark' || |
||||
sideTheme == 'theme-light' || |
sideTheme == 'theme-light' || |
||||
sideTheme == 'theme-blue' |
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