<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">
                <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>
</template>
    
<script>


export default {
    name: 'dataVRoadNet',
    data(){
        return {
            summary:[],
            positionArr:[
                
            ]
        }
    },
    components: {
    },
    mounted(){
        this.initData();
    },
    methods: {
        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>
h4, p, ul,li{ margin: 0; padding:0;}
.roadNet{ padding: 20px; 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;
        &.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>
    