|
|
|
@ -1,14 +1,103 @@ |
|
|
|
<template> |
|
|
|
<div class='roadNet'> |
|
|
|
<div class="roadNet"> |
|
|
|
<div class="summary"> |
|
|
|
<div class="unit" v-for="item in summary"> |
|
|
|
<p class="p01"> |
|
|
|
{{ item.dataAll.title }}<em class="blue">{{ item.dataAll.value }}</em><span>{{ item.dataAll.unit }}</span> |
|
|
|
</p> |
|
|
|
<p class="p02"> |
|
|
|
{{ item.dataGreen.title }}<em class="green">{{ item.dataGreen.value }}</em><span>{{ item.dataGreen.unit }}</span> |
|
|
|
{{ item.dataRed.title }}<em class="red">{{ item.dataRed.value }}</em><span>{{ item.dataRed.unit }}</span> |
|
|
|
</p> |
|
|
|
<div class="summaryUnit" v-for="item in summary" :style="{'flex-basis' : item.width + 'px'}"> |
|
|
|
<div class="info info_01"> |
|
|
|
<p v-if="item.dataAll"><span class="em">{{ item.dataAll.title }}:</span><em class="blue">{{ item.dataAll.value }}</em><i v-if="item.dataAll.unit">{{ item.dataAll.unit }}</i></p> |
|
|
|
</div> |
|
|
|
<div class="info info_02"> |
|
|
|
<p v-if="item.dataGreen"><span>{{ item.dataGreen.title }}:</span><em class="green">{{ item.dataGreen.value }}</em><i v-if="item.dataGreen.unit">{{ item.dataGreen.unit }}</i></p> |
|
|
|
<p v-if="item.dataRed"><span>{{ item.dataRed.title }}:</span><em class="red">{{ item.dataRed.value }}</em><i v-if="item.dataRed.unit">{{ item.dataRed.unit }}</i></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flow"> |
|
|
|
<div class="part sensor"></div> |
|
|
|
<div class="part manage"> |
|
|
|
<img class="arrow arrow_01" src="./img/arrowRight.svg" alt=""> |
|
|
|
<img class="arrow arrow_02" src="./img/arrowRight.svg" alt=""> |
|
|
|
<img class="arrow arrow_03" src="./img/arrowRight.svg" alt=""> |
|
|
|
<div class="manageTotal"> |
|
|
|
<h4>济荷运管中心</h4> |
|
|
|
<p>内存：<em>20.79</em>/62.36GB CPU：<em>1.00</em>/12<br>存储：<em>25.68</em>/2328.93GB</p> |
|
|
|
</div> |
|
|
|
<ul class="manageDetail"> |
|
|
|
<li v-for="item in manage"> |
|
|
|
<div class="con"> |
|
|
|
<h4>{{ item.title }}</h4> |
|
|
|
<p><em>{{ item.value }}</em><i>条</i></p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="part partCalc"> |
|
|
|
<img class="arrow" src="./img/arrowRight.svg" alt=""> |
|
|
|
<div class="calcUnit small"> |
|
|
|
<h4>实时计算</h4> |
|
|
|
<div class="con"> |
|
|
|
<p class="total">25,568,876</p> |
|
|
|
<ul> |
|
|
|
<li>节点</li> |
|
|
|
<li>5/5</li> |
|
|
|
<li>实时清洗</li> |
|
|
|
<li>实时加工</li> |
|
|
|
<li>实时汇报</li> |
|
|
|
<li>实时分析</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="calcUnit big"> |
|
|
|
<h4>AI模型</h4> |
|
|
|
<div class="con"> |
|
|
|
<p class="total">33,210</p> |
|
|
|
<ul> |
|
|
|
<li>实时交通态势感知模型</li> |
|
|
|
<li>交通预警模型</li> |
|
|
|
<li>在途车辆分析模型</li> |
|
|
|
<li>应急指挥疏导模型</li> |
|
|
|
<li>智能行车诱导模型</li> |
|
|
|
<li>短临预报算法模型</li> |
|
|
|
<li>交通综合指数模型</li> |
|
|
|
<li>路网分析模型</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="calcUnit small"> |
|
|
|
<h4>离线计算</h4> |
|
|
|
<div class="con"> |
|
|
|
<p class="total">2,017</p> |
|
|
|
<ul> |
|
|
|
<li>节点</li> |
|
|
|
<li>6/6</li> |
|
|
|
<li>实时清洗</li> |
|
|
|
<li>批量加工</li> |
|
|
|
<li>数据汇聚</li> |
|
|
|
<li>数据分析</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="partRight"> |
|
|
|
<div class="part share"> |
|
|
|
<img class="arrow" src="./img/arrowRight.svg" alt=""> |
|
|
|
<div class="shareCon"> |
|
|
|
<img src="./img/shareCenter.svg" alt="" class="center"> |
|
|
|
<div class="item item_01"> |
|
|
|
<em>26805</em> |
|
|
|
<span></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="part apply"> |
|
|
|
<div class="applyUnit" v-for="item in apply" :key="item.title"> |
|
|
|
<div class="con"> |
|
|
|
<img src="./img/applyitem.svg" alt=""> |
|
|
|
<h4>{{ item.title }}</h4> |
|
|
|
<p>调用<em>{{ item.value }}</em>次</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -21,7 +110,10 @@ export default { |
|
|
|
name: 'dataVRoadNet', |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
summary:[] |
|
|
|
summary:[], |
|
|
|
positionArr:[ |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
@ -33,19 +125,182 @@ export default { |
|
|
|
initData() { |
|
|
|
this.summary = [ |
|
|
|
{ |
|
|
|
|
|
|
|
width:287, |
|
|
|
dataAll:{ title:"接入设备总数", value:3015, unit:"套"}, |
|
|
|
dataGreen:{ title:"设备类型数", value:55, unit:"类"}, |
|
|
|
dataRed:{ title:"故障数", value:207, unit:"套"} |
|
|
|
}, |
|
|
|
{ |
|
|
|
width:376, |
|
|
|
dataAll: { title: "接入数据总数", value: 1213213447, unit: "条" }, |
|
|
|
dataGreen: { title: "昨日接入数", value: 20624577, unit: "条" }, |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 287, |
|
|
|
dataAll: { title: "存储占用量", value: 86059, unit: "GB" }, |
|
|
|
dataGreen: { title: "昨日新增", value: 55, unit: "GB" }, |
|
|
|
dataRed: { title: "环比", value: 20.5, unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 376, |
|
|
|
dataAll: { title: "服务调用总数", value: 43392688, unit: "次" }, |
|
|
|
dataGreen: { title: "昨日服务数", value: 1210345, unit: "次" }, |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width:226, |
|
|
|
dataAll: { title: "内存", value: "1274G/1800G", unit: "" }, |
|
|
|
dataGreen: { title: "使用率", value: 70.73, unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 226, |
|
|
|
dataAll: { title: "CPU", value: "71/126", unit: "" }, |
|
|
|
dataGreen: { title: "使用率", value: 56.35, unit: "类" } |
|
|
|
} |
|
|
|
] |
|
|
|
]; |
|
|
|
this.manage = [ |
|
|
|
{ title : "ETC门架", value : 25800 }, |
|
|
|
{ title : "雷达", value : 25800 }, |
|
|
|
{ title : "一类交调站", value : 25800 }, |
|
|
|
{ title : "气象监测", value : 25800 }, |
|
|
|
{ title : "事件预警", value : 25800 }, |
|
|
|
{ title : "基础数据", value : 25800 }, |
|
|
|
{ title : "摄像机", value : 25800 }, |
|
|
|
{ title : "智能设备箱", value : 25800 } |
|
|
|
]; |
|
|
|
this.apply = [ |
|
|
|
{ title : "设备资产",value : 45}, |
|
|
|
{ title : "智能行车诱导系统",value : 1}, |
|
|
|
{ title : "桥梁检测",value : 2137}, |
|
|
|
{ title : "情报板发布",value : 455}, |
|
|
|
{ title : "交通态势可视化",value : 73700}, |
|
|
|
{ title : "交通态势可视化监控",value : 1348}, |
|
|
|
{ title : "交通事件信息查询",value : 4545}, |
|
|
|
{ title : "设备运行监测",value : 626} |
|
|
|
]; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
.roadNet{ |
|
|
|
h4, p, ul,li{ margin: 0; padding:0;} |
|
|
|
.roadNet{ padding: 20px; display: flex; flex-direction: column; |
|
|
|
.summary{ |
|
|
|
display: flex; justify-content: space-between; |
|
|
|
.unit{ border-left: 2px solid #00D1FF; background: linear-gradient( 180deg, rgba(6,66,88,0) 0%, #064258 93%);} |
|
|
|
display: flex; justify-content: space-between; height: 87px; align-items: stretch; |
|
|
|
.summaryUnit{ border-left: 2px solid #00D1FF; background: linear-gradient( -90deg, rgba(6,66,88,0) 0%, #064258 93%); box-sizing: border-box; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; |
|
|
|
.info{ display: flex; flex-direction: row; font-size: 14px; height: 32px; align-items: center; |
|
|
|
p{ margin-right: 16px; |
|
|
|
&:last-child{ |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
span{ font-size: 14px; |
|
|
|
&.em{ |
|
|
|
font-size: 16px; font-family: PangMenZhengDao; letter-spacing: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
em{ font-size: 19px; font-style: normal; font-family:PangMenZhengDao; margin: 0 2px; |
|
|
|
&.blue{ color: #00D1FF;} |
|
|
|
&.green{ color: #00EBC1;} |
|
|
|
&.red{ color: #FF5F5F;} |
|
|
|
} |
|
|
|
i{ font-style: normal; font-size: 11px; opacity: 0.5;} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.flow{ |
|
|
|
flex:1; display: flex; justify-content: space-between; align-items: stretch; margin-top: 30px; |
|
|
|
.part{ position: relative; background-image: linear-gradient( 180deg, #1FCAF100 0%, #1FCAFF32 100%); border: 1px dashed #00D1FF; |
|
|
|
.arrow{ position: absolute; width: 40px; height: 36px;} |
|
|
|
} |
|
|
|
} |
|
|
|
.sensor{ |
|
|
|
flex-basis: 260px; |
|
|
|
&.part{ border: none; background-image: none;} |
|
|
|
} |
|
|
|
.manage{ |
|
|
|
flex-basis: 430px; display: flex; flex-direction: column; align-items: center; |
|
|
|
.arrow_01{right: -40px; top:22%; } |
|
|
|
.arrow_02{right: -40px; top:47% } |
|
|
|
.arrow_03{right: -40px; top:72% } |
|
|
|
.manageTotal{ |
|
|
|
width:366px; height:112px; background: url(./img/manageTotal.svg) no-repeat center center; text-align: center; margin-top: 30px; |
|
|
|
h4{ color: #FFD15C; line-height: 50px; margin-bottom: 2px;} |
|
|
|
p{ font-family: PangMenZhengDao; |
|
|
|
em{ color: #00D1FF; font-style: normal;} |
|
|
|
} |
|
|
|
} |
|
|
|
.manageDetail{ |
|
|
|
display: flex; flex-wrap: wrap; flex: 1; align-content: stretch; padding: 0; margin-top: 30px; |
|
|
|
li{ |
|
|
|
flex-basis: 50%; list-style-type: none; display: flex; flex-direction: column; align-items: center; justify-content: center; |
|
|
|
.con{ background: url(./img/sourceItem.svg) no-repeat; width: 166px; height: 136px; text-align: center; |
|
|
|
h4{ font-size: 14px; line-height: 30px; margin: 0;} |
|
|
|
p{ |
|
|
|
em{ font-size: 16px; color: #00D1FF; font-style: normal; font-family: PangMenZhengDao; margin: 0 3px;} |
|
|
|
i{ font-size: 10px; opacity: 0.5; font-style: normal;} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.partCalc{ |
|
|
|
flex-basis: 256px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 20px 0; |
|
|
|
.arrow{right: -40px; top:20%} |
|
|
|
.calcUnit{ font-size: 15px; text-align: center; |
|
|
|
h4{font-family: PangMenZhengDao;} |
|
|
|
.con{ background: url(./img/process.svg); background-size: 100% 100%; |
|
|
|
p{ font-family: PangMenZhengDao; color: #FFD15C; } |
|
|
|
ul{ list-style-type: none; margin-top: 6px; |
|
|
|
li{ line-height: 24px; font-size: 14px; font-weight: 600;} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.calcUnit.small{ width: 172px; height: 215px; |
|
|
|
h4{ height: 22px; line-height: 24px;} |
|
|
|
.con{ height: 193px; |
|
|
|
p{ line-height: 22px;} |
|
|
|
} |
|
|
|
} |
|
|
|
.calcUnit.big{ width: 225px; height: 272px; |
|
|
|
.con{ height: 250px; |
|
|
|
p{ height: 30px; line-height: 30px; } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.partRight{ |
|
|
|
flex-basis: 816px; display: flex; flex-direction: column; justify-content: space-between; |
|
|
|
} |
|
|
|
.share{ |
|
|
|
height: 420px; display: flex; justify-content: center; align-items: center; |
|
|
|
.arrow{ transform: rotateZ(90deg); left: 48%; top:calc(100% + 8px);} |
|
|
|
.shareCon{ |
|
|
|
background-image: url(./img/ShareAll.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 756px; height: 245px; display: flex; align-items: center; justify-content: center; |
|
|
|
.center{ width: 130px; height: 130px;} |
|
|
|
.item{ position: absolute;} |
|
|
|
.item_01{} |
|
|
|
.item_02{} |
|
|
|
.item_03{} |
|
|
|
.item_04{} |
|
|
|
.item_05{} |
|
|
|
.item_06{} |
|
|
|
.item_07{} |
|
|
|
.item_08{} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.apply{ |
|
|
|
height: 390px; display: flex; flex-wrap: wrap; padding: 40px 45px; align-content: stretch; |
|
|
|
.applyUnit{ flex-basis: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; |
|
|
|
.con{ width: 140px; text-align: center; align-items: center; justify-content: center; |
|
|
|
h4, p{ font-family: PangMenZhengDao; font-size: 15px; line-height: 22px; margin: 0; padding:0; |
|
|
|
} |
|
|
|
h4, p em{ color: #00D1FF; font-style: normal; margin: 0 3px; } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
