<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>
    