|
|
|
@ -1,195 +1,198 @@ |
|
|
|
<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 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> |
|
|
|
<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 class="flow"> |
|
|
|
<div class="part sensor"> |
|
|
|
<sensors class="graph"></sensors> |
|
|
|
</div> |
|
|
|
<ul class="manageDetail"> |
|
|
|
<li v-for="item in manage"> |
|
|
|
<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"> |
|
|
|
<h4 class="keep-ratio">{{ item.title }}</h4> |
|
|
|
<p class="keep-ratio"><em>{{ item.value }}</em><i>条</i></p> |
|
|
|
<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> |
|
|
|
</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 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> |
|
|
|
<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 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> |
|
|
|
<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 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> |
|
|
|
|
|
|
|
<div class="part apply"> |
|
|
|
<div class="applyUnit" v-for="item in apply" :key="item.title"> |
|
|
|
<div class="con"> |
|
|
|
<img src="./img/applyitem.svg" alt=""> |
|
|
|
<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> |
|
|
|
<p class="keep-ratio">调用<em>{{ item.value }}</em>次</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
import bgBtn from "@screen/components/Decorations/bg-btn.vue" |
|
|
|
import sensors from "./sensors.vue" |
|
|
|
import request from '@/utils/request' |
|
|
|
export default { |
|
|
|
name: 'dataVRoadNet', |
|
|
|
data(){ |
|
|
|
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 } |
|
|
|
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:[] |
|
|
|
dataShare: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
bgBtn, sensors |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
mounted() { |
|
|
|
this.initData(); |
|
|
|
this.mockData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
mockData(){ |
|
|
|
const mock = ()=>{ |
|
|
|
let num1 = this.summary[1].dataAll.value + Math.floor(Math.random()*200); |
|
|
|
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); |
|
|
|
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; |
|
|
|
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); |
|
|
|
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); |
|
|
|
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); |
|
|
|
this.summary[3].dataRed.value = (num3 / this.summary[3].dataGreen.value * 100).toFixed(2); |
|
|
|
|
|
|
|
let num4 = 1154 + Math.random()*120; |
|
|
|
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); |
|
|
|
this.summary[4].dataGreen.value = (num4 / this.summary[4].dataAll.total * 100).toFixed(2); |
|
|
|
|
|
|
|
let num5 = 81 + Math.random()*20; |
|
|
|
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); |
|
|
|
this.summary[5].dataGreen.value = (num5 / this.summary[5].dataAll.total * 100).toFixed(2); |
|
|
|
} |
|
|
|
mock(); |
|
|
|
let interval = setInterval(()=>{ |
|
|
|
let interval = setInterval(() => { |
|
|
|
mock(); |
|
|
|
}, 1500); |
|
|
|
this.$once("hook:beforeDestroy", () => this.clearInterval(interval)); |
|
|
|
}, |
|
|
|
initData() { |
|
|
|
async initData() { |
|
|
|
this.summary = [ |
|
|
|
{ |
|
|
|
width:287, |
|
|
|
dataAll:{ title:"接入设备总数", value:3015, unit:"套"}, |
|
|
|
dataGreen:{ title:"设备类型数", value:55, unit:"类"}, |
|
|
|
dataRed:{ title:"故障数", value:207, unit:"套"} |
|
|
|
width: 287, |
|
|
|
dataAll: { title: "接入设备总数", value: 3015, unit: "套" }, |
|
|
|
dataGreen: { title: "设备类型数", value: 55, unit: "类" }, |
|
|
|
dataRed: { title: "故障数", value: 207, unit: "套" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width:376, |
|
|
|
width: 376, |
|
|
|
dataAll: { title: "接入数据总数", value: 1251446, unit: "条" }, |
|
|
|
dataGreen: { title: "昨日接入数", value: 20624577, unit: "条" }, |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
@ -207,191 +210,527 @@ export default { |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width:226, |
|
|
|
dataAll: { title: "内存", value: 0, total:1800, unit: "G" }, |
|
|
|
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: "" }, |
|
|
|
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 } |
|
|
|
{ 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 = [ |
|
|
|
|
|
|
|
//非机预警数据使用情况 |
|
|
|
const _dataShare = [ |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: "根据收费站国标查询出口流水车型信息", value: 26805 }, |
|
|
|
{ title: "济菏当天的交易牌识数据量", value: 26805 }, |
|
|
|
{ title: "查询出入口信息", value: 26805 }, |
|
|
|
{ title: "收费站出口流水数据统计", value: 26805 }, |
|
|
|
{ title: "当天门架牌识流水数据统计", value: 26805 }, |
|
|
|
{ title: "收费站入口流水数据统计 ", value: 26805 }, |
|
|
|
{ title: "数据共享中心内存使用情况", value: 26805 }, |
|
|
|
{ title: "设备接入总数", value: 26805 }, |
|
|
|
{ title: "非机预警数据使用情况", value: 26805 }, |
|
|
|
{ title: "根据Passid和时间查询出口流水是否有记录", value: 26805 }, |
|
|
|
{ title: "基础数据统计", value: 26805 }, |
|
|
|
{ title: "非机预警数据使用情况", value: '-' }, |
|
|
|
{ title: "门架流水数据统计", value: 26805 }, |
|
|
|
{ title: "数据共享中心CPU使用情况", value: 26805 }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
]; |
|
|
|
|
|
|
|
const warningNumber = await request({ url: 'business/warning/countNumber', method: 'get'}); |
|
|
|
if (warningNumber.code != 200) return; |
|
|
|
_dataShare[7].value = warningNumber.data; |
|
|
|
|
|
|
|
const odsExpNumber = await request({ url: 'business/odsTollExpassData/countNumber', method: 'get'}); |
|
|
|
if (odsExpNumber.code != 200) return; |
|
|
|
_dataShare[2].value = odsExpNumber.data; |
|
|
|
|
|
|
|
const odsEnpNumber = await request({ url: 'business/odsTollEnpassData/countNumber', method: 'get'}); |
|
|
|
if (odsEnpNumber.code != 200) return; |
|
|
|
_dataShare[4].value = odsEnpNumber.data; |
|
|
|
|
|
|
|
const odsEtcNumber = await request({ url: 'business/odsTollEtctuData/countNumber', method: 'get'}); |
|
|
|
if (odsEtcNumber.code != 200) return; |
|
|
|
_dataShare[8].value = odsEtcNumber.data; |
|
|
|
|
|
|
|
const odsViuNumber = await request({ url: 'business/odsTollViuData/countNumber', method: 'get'}); |
|
|
|
if (odsViuNumber.code != 200) return; |
|
|
|
_dataShare[3].value = odsViuNumber.data; |
|
|
|
|
|
|
|
const basicNumber = await request({ url: 'business/moduleCall/basicDataNumber', method: 'get'}); |
|
|
|
if (basicNumber.code != 200) return; |
|
|
|
_dataShare[6].value = basicNumber.data; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.dataShare = _dataShare; |
|
|
|
|
|
|
|
//设备调用次数查询 |
|
|
|
// |
|
|
|
request({ |
|
|
|
url: 'business/dcOperLog/count/deviceType', |
|
|
|
url: 'business/moduleCall/countNumber', |
|
|
|
method: 'get' |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res,'----------') |
|
|
|
}).then(result => { |
|
|
|
if (result.code != 200) return; |
|
|
|
const _apply = []; |
|
|
|
result.data.forEach(e => { |
|
|
|
_apply.push({ title: e.name, value: e.quantity }) |
|
|
|
}); |
|
|
|
this.apply = _apply; |
|
|
|
|
|
|
|
// 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} |
|
|
|
// ]; |
|
|
|
}) |
|
|
|
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; |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
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;} |
|
|
|
.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; |
|
|
|
|
|
|
|
.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;} |
|
|
|
|
|
|
|
.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;} |
|
|
|
|
|
|
|
.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;} |
|
|
|
|
|
|
|
.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.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; } |
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
.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(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; } |
|
|
|
&: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; |
|
|
|
} |
|
|
|
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;} |
|
|
|
|
|
|
|
.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; |
|
|
|
.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; |
|
|
|
} |
|
|
|
h4, p em{ color: #00D1FF; font-style: normal; margin: 0 3px; } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
</style> |
王钦
9 months ago
