You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
387 lines
18 KiB
387 lines
18 KiB
<template>
|
|
<div class="roadNet">
|
|
<div class="summary">
|
|
<div class="summaryUnit" v-for="item in summary" :style="{'flex-basis' : item.width + 'px'}">
|
|
<div class="info info_01 keep-ratio" origin="left">
|
|
<p v-if="item.dataAll">
|
|
<span class="em">{{ item.dataAll.title }}:</span>
|
|
<em class="blue">{{ item.dataAll.value }}<template v-if="item.dataAll.total">/{{ item.dataAll.total }}</template></em>
|
|
<i v-if="item.dataAll.unit">{{ item.dataAll.unit }}</i>
|
|
</p>
|
|
</div>
|
|
<div class="info info_02 keep-ratio" origin="left">
|
|
<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">
|
|
<sensors class="graph"></sensors>
|
|
</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 class="keep-ratio">济荷运管中心</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 class="keep-ratio">{{ item.title }}</h4>
|
|
<p class="keep-ratio"><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 class="keep-ratio">实时计算</h4>
|
|
<div class="con">
|
|
<p class="total keep-ratio">25,568,876</p>
|
|
<ul>
|
|
<li class="keep-ratio">节点</li>
|
|
<li class="keep-ratio">5/5</li>
|
|
<li class="keep-ratio">实时清洗</li>
|
|
<li class="keep-ratio">实时加工</li>
|
|
<li class="keep-ratio">实时汇报</li>
|
|
<li class="keep-ratio">实时分析</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="calcUnit big">
|
|
<h4>AI模型</h4>
|
|
<div class="con">
|
|
<p class="total">33,210</p>
|
|
<ul>
|
|
<li class="keep-ratio">实时交通态势感知模型</li>
|
|
<li class="keep-ratio">交通预警模型</li>
|
|
<li class="keep-ratio">在途车辆分析模型</li>
|
|
<li class="keep-ratio">应急指挥疏导模型</li>
|
|
<li class="keep-ratio">智能行车诱导模型</li>
|
|
<li class="keep-ratio">短临预报算法模型</li>
|
|
<li class="keep-ratio">交通综合指数模型</li>
|
|
<li class="keep-ratio">路网分析模型</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="calcUnit small">
|
|
<h4>离线计算</h4>
|
|
<div class="con">
|
|
<p class="total">2,017</p>
|
|
<ul>
|
|
<li class="keep-ratio">节点</li>
|
|
<li class="keep-ratio">6/6</li>
|
|
<li class="keep-ratio">实时清洗</li>
|
|
<li class="keep-ratio">批量加工</li>
|
|
<li class="keep-ratio">数据汇聚</li>
|
|
<li class="keep-ratio">数据分析</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 keep-ratio">
|
|
<div class="item" v-for="item,index in dataShare" :style="positionArr[index]">
|
|
<img src="./img/shareItem.svg" alt="">
|
|
<em>{{ item.value }}</em>
|
|
<p class="title">
|
|
<el-tooltip class="title" effect="dark" :content="item.title" placement="top-start">
|
|
<span>
|
|
{{ item.title }}
|
|
</span>
|
|
</el-tooltip>
|
|
</p>
|
|
</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 class="keep-ratio">{{ item.title }}</h4>
|
|
<p class="keep-ratio">调用<em>{{ item.value }}</em>次</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import bgBtn from "@screen/components/Decorations/bg-btn.vue"
|
|
import sensors from "./sensors.vue"
|
|
export default {
|
|
name: 'dataVRoadNet',
|
|
data(){
|
|
return {
|
|
summary:[],
|
|
manage:[],
|
|
apply:[],
|
|
positionArr:[
|
|
{top:"-60px", right:"50%", transform: "translate(-20px, -50%)", opacity:0 },
|
|
{top:"-60px", left:"50%", transform: "translate(20px, -50%)", opacity: 0 },
|
|
{top:"0%", right:"50%", transform: "translate(-20px, 0)" },
|
|
{top:"0%", left:"50%", transform: "translate(20px, 0)" },
|
|
{top:"33.33%", right:"50%", transform: "translate(-70px, -50%)" },
|
|
{top:"33.33%", left:"50%", transform: "translate(70px, -50%)" },
|
|
{top:"62%", right:"50%", transform: "translate(-70px, -50%)" },
|
|
{top:"62%", left:"50%", transform: "translate(70px, -50%)" },
|
|
{bottom:"0%", right:"50%", transform: "translate(-20px, 0)" },
|
|
{bottom:"0%", left:"50%", transform: "translate(20px, 0)" },
|
|
{top:"calc(100% + 60px)", right:"50%", transform: "translate(-20px, -50%)", opacity: 0 },
|
|
{top:"calc(100% + 60px)", left:"50%", transform: "translate(20px, -50%)", opacity: 0 }
|
|
],
|
|
dataShare:[]
|
|
}
|
|
},
|
|
components: {
|
|
bgBtn, sensors
|
|
},
|
|
mounted(){
|
|
this.initData();
|
|
this.mockData();
|
|
},
|
|
methods: {
|
|
mockData(){
|
|
const mock = ()=>{
|
|
let num1 = this.summary[1].dataAll.value + Math.floor(Math.random()*200);
|
|
this.summary[1].dataAll.value = num1;
|
|
this.summary[1].dataRed.value = (num1/this.summary[1].dataGreen.value*100).toFixed(2);
|
|
|
|
let num2 = +this.summary[2].dataAll.value + Math.random()*0.01;
|
|
this.summary[2].dataAll.value = num2.toFixed(2);
|
|
this.summary[2].dataRed.value = (num2/this.summary[2].dataGreen.value*100).toFixed(2);
|
|
|
|
let num3 = this.summary[3].dataAll.value + Math.floor(Math.random()*20);
|
|
this.summary[3].dataAll.value = num3;
|
|
this.summary[3].dataRed.value = (num3/this.summary[3].dataGreen.value*100).toFixed(2);
|
|
|
|
let num4 = 1154 + Math.random()*120;
|
|
this.summary[4].dataAll.value = num4.toFixed(2);
|
|
this.summary[4].dataGreen.value = (num4/this.summary[4].dataAll.total*100).toFixed(2);
|
|
|
|
let num5 = 81 + Math.random()*20;
|
|
this.summary[5].dataAll.value = num5.toFixed(2);
|
|
this.summary[5].dataGreen.value = (num5/this.summary[5].dataAll.total*100).toFixed(2);
|
|
}
|
|
mock();
|
|
let interval = setInterval(()=>{
|
|
mock();
|
|
}, 1500);
|
|
this.$once("hook:beforeDestroy", () => this.clearInterval(interval));
|
|
},
|
|
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: 1251446, unit: "条" },
|
|
dataGreen: { title: "昨日接入数", value: 20624577, unit: "条" },
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" }
|
|
},
|
|
{
|
|
width: 287,
|
|
dataAll: { title: "存储占用量", value: 32, unit: "GB" },
|
|
dataGreen: { title: "昨日新增", value: 55, unit: "GB" },
|
|
dataRed: { title: "环比", value: 20.5, unit: "%" }
|
|
},
|
|
{
|
|
width: 376,
|
|
dataAll: { title: "服务调用总数", value: 752524, unit: "次" },
|
|
dataGreen: { title: "昨日服务数", value: 21034145, unit: "次" },
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" }
|
|
},
|
|
{
|
|
width:226,
|
|
dataAll: { title: "内存", value: 0, total:1800, unit: "G" },
|
|
dataGreen: { title: "使用率", value: 70.73, unit: "%" }
|
|
},
|
|
{
|
|
width: 226,
|
|
dataAll: { title: "CPU", value: 0, total: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.dataShare = [
|
|
{ title: '', value: '' },
|
|
{ title: '', value: '' },
|
|
{ title: "根据收费站国标查询出口流水车型信息", value: 26805 },
|
|
{ title: "济菏当天的交易牌识数据量", value: 26805 },
|
|
{ title: "查询出入口信息", value: 26805 },
|
|
{ title: "数据共享中心内存使用情况", value: 26805 },
|
|
{ title: "设备接入总数", value: 26805 },
|
|
{ title: "非机预警数据使用情况", value: 26805 },
|
|
{ title: "根据Passid和时间查询出口流水是否有记录", value: 26805 },
|
|
{ title: "数据共享中心CPU使用情况", value: 26805 },
|
|
{ title: '', value: '' },
|
|
{ title: '', value: '' },
|
|
];
|
|
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>
|
|
h4, p, ul,li{ margin: 0; padding:0;}
|
|
.roadNet{ padding: 20px; width:100%; height:100%; display: flex; flex-direction: column;
|
|
.summary{
|
|
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; position: relative;
|
|
&.part{ border: none; background-image: none;}
|
|
.graph{
|
|
position: absolute; height: 100%; width: calc(100% + 100px); z-index: 1000;
|
|
}
|
|
}
|
|
.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{
|
|
flex:1.2; margin-bottom: 46px; 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; position: relative;
|
|
.center{ width: 130px; height: 130px;}
|
|
.item{ position: absolute; height: 38px; line-height: 38px; display: flex; min-width: 240px; cursor: default;
|
|
// 右侧
|
|
&:nth-child(odd){ padding-left: 10px; flex-direction: row-reverse; justify-content: flex-end;
|
|
img{ transform: scaleX(100%); left: 0; top:0; }
|
|
}
|
|
// 左侧
|
|
&:nth-child(even){ padding-right: 10px; justify-content: flex-end;
|
|
img{ transform: scaleX(-100%); right: 0; top:0; }
|
|
}
|
|
img{ position: absolute; height: 100%; z-index: -10;}
|
|
em{ color: #00D1FF; font-family: PangMenZhengDao; font-size: 16px; font-style: normal; margin: 0 4px;}
|
|
.title{ font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;
|
|
span:hover{ color: #00D1FF;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.apply{
|
|
flex: 1; 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>
|
|
|