<template>
    <div class="screen-page">
        <threeDModel ref="model"></threeDModel>
        <div class="screen-page-mask">
            <headline></headline>
            <div class="left-sidebar">
                <div class="tollstation-infor">
                    <div class="section-header" @click="showModel">
                        <span>收费站综合信息</span>
                    </div>
                    <div class="section-content">
                        <div class="icon-transit-time"></div>
                        <div class="section-content-container">
                            <span class="container-name"
                                >今日车辆平均通行时间</span
                            >
                            <div class="container-content">
                                <span class="container-content-line"></span>
                                <span class="container-content-num">0</span>
                            </div>
                            <div class="container-content">
                                <span class="container-content-line"></span>
                                <span class="container-content-num">7</span>
                            </div>
                            <span class="container-content-min">分</span>
                        </div>
                    </div>
                    <div class="section-content">
                        <div class="icon-transaction-rate"></div>
                        <div class="section-content-container">
                            <span class="container-name">今日交易成功率</span>
                            <div class="container-content">
                                <span class="container-content-line"></span>
                                <span class="container-content-num">1</span>
                            </div>
                            <div class="container-content">
                                <span class="container-content-line"></span>
                                <span class="container-content-num">0</span>
                            </div>
                            <div class="container-content">
                                <span class="container-content-line"></span>
                                <span class="container-content-num">0</span>
                            </div>
                            <span class="container-content-min">%</span>
                        </div>
                    </div>
                </div>
                <div class="day-fee">
                    <div class="section-header">
                        <span>当日收费情况</span>
                    </div>
                    <div class="sub-title">
                        <img
                            src="../../assets/img/bigScreen/icon-subTitle.png"
                        />
                        <span>现金和非现金占比</span>
                    </div>
                    <div class="data-infor">
                        <span class="infor-title">非现金</span>
                        <div class="infor-figure">
                            <div class="infor-figure-actived yellow"></div>
                        </div>
                        <span class="infor-number yellow-color">90%</span>
                        <span class="infor-title">现金</span>
                        <div class="infor-figure">
                            <div class="infor-figure-actived orange"></div>
                        </div>
                        <span class="infor-number orange-color">10%</span>
                    </div>
                    <div class="sub-title">
                        <img
                            src="../../assets/img/bigScreen/icon-subTitle.png"
                        />
                        <span>ETC和非ETC占比</span>
                    </div>
                    <div class="data-infor">
                        <span class="infor-title">ETC</span>
                        <div class="infor-figure">
                            <div class="infor-figure-actived green"></div>
                        </div>
                        <span class="infor-number green-color">90%</span>
                        <span class="infor-title">非ETC</span>
                        <div class="infor-figure">
                            <div class="infor-figure-actived blue"></div>
                        </div>
                        <span class="infor-number blue-color">10%</span>
                    </div>
                </div>
            </div>
            <div class="right-sidebar">
                <div class="travel-time">
                    <div class="section-header">
                        <span>车辆平均通行时间</span>
                    </div>
                    <img src="../../assets/img/bigScreen/top-bg.png" />
                </div>
                <div class="day-changes">
                    <div class="section-header">
                        <span>通行车辆七日变化趋势</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headline from './headline.vue'
import threeDModel from './3DModel/modelIndex.vue'

export default {
    components: {headline, threeDModel},
    name: 'homePage',
    data() {
        return {
            dayFeeData: [
                {
                    cash: [
                        {
                            name: '现金',
                            figure: '90%',
                        },
                        {
                            name: '非现金',
                            figure: '10%',
                        },
                    ],
                    etc: [
                        {
                            name: 'etc',
                            figure: '90%',
                        },
                        {
                            name: '非etc',
                            figure: '10%',
                        },
                    ],
                },
            ],
        }
    },
    mounted() {},
    methods: {
        showModel() {
            this.$refs.model.showData()
        },
    },
}
</script>

<style lang='scss' scoped>
@import '../../views/BigScreen/bigScreen.scss';
.screen-page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    
}
.screen-page-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background: url('../../assets/img/bigScreen/modelbg-mask.png') no-repeat center / 100% 100%;
    
}
.section-header{
    width: 332px;
    height: 30px;
    margin-left: 16px;
    margin-top: 20px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 30px;
    background: url('../../assets/img/bigScreen/title.png') no-repeat center / 100% 100%;
}
.section-header span{
  margin-left: 32px;
  font-size: 14px;
}
.section-content{
  width: 328px;
  height: 28%;
  margin-left: 16px;
  margin-top: 8px;
  display: flex;
  background: url('../../assets/img/bigScreen/content.png') no-repeat center / 100% 100%;
}
.tollstation-infor{
  width: 100%;
  height: 53%;
  display: flex;
  flex-direction: column;
  // background-color: red;
}
.icon-transit-time{
  height: 100px;
  width: 100px;
  margin-top: 16px;
  margin-left: 16px;
  background: url('../../assets/img/bigScreen/icon-transit-time.png') no-repeat center / 100% 100%;
}
.icon-transaction-rate{
  height: 100px;
  width: 100px;
  margin-top: 16px;
  margin-left: 16px;
  background: url('../../assets/img/bigScreen/icon-transaction-rate.png') no-repeat center / 100% 100%;
}
.section-content-container{
  width: calc(100% - 150px);
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin-top: 16px;
  margin-left: 16px;
}
.container-name{
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
}
.transaction-rate-name{
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
}
.container-content{
  position: relative;
  margin-top: 15px;
  margin-right: 4px;
  width: 45px;
  height: 56px;
  background: #81888F;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;

  line-height: 56px;
  text-align: center;
}
.container-content-line{
  display: inline-block;
  background-color: #81888F;
  width: 100%;
  height: 3px;
  top:49%;
  left: 0;
  position: absolute;
  z-index: 99;
  border-radius: 0px 0px 0px 0px;
}
.container-content-num{
  display: inline-block;
  position: absolute;
  font-size: 40px;
  font-weight: 700;
  color: #FFFFFF;
  left: 26%;
}
.container-content-min{
  display: block;
  margin-top: 50px;
  margin-left: 4px;
  width: 16px;
  height: 21px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 21px;
}
.day-fee{
  width: 100%;
  height: 38%;
  display: flex;
  flex-direction: column;
}


.sub-title{
display: flex;
align-items: center;
justify-content: center;
width: 326px;
height: 8.7%;
margin-top: 32px;
margin-left: 17px;
background: url('../../assets/img/bigScreen/sub-title.png') no-repeat center / 100% 100%;
}
.sub-title img{
  width: 13px;
  height: 16px;
}
.sub-title span{
  display: block;
  height: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 16px;
  margin-left: 8px;
}
.data-infor{
  width: 300px;
  height: 18.5%;
  margin-top: 32px;
  margin-left: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.infor-title{
  display: block;
  width: 36px;
  height: 24%;
  font-size: 12px;
 font-weight: 400;
 color: #FFFFFF;
 line-height: 16px;
}
.infor-figure{
  width: 213px;
  height: 12%;
  background: #656870;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  margin-left: 8px;
  display: flex;
}
.infor-figure-actived{
width: 90%;
height: 100%;
opacity: 1;
}
.infor-number{
  margin-left: 14px;
  display: block;
  width: 25px;
  height: 24%;
  font-size: 12px;
font-weight: 400;
line-height: 16px;
}

.travel-time{
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
}
.travel-time img{
  width: 360px;
  height: 389px;
}
.day-changes{
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
}
.yellow{
background: linear-gradient(to left, #CAAD66 0%, rgba(202,173,102,0) 100%);
}

.yellow-color{
color: #C9AC66;
}
.orange{
background: linear-gradient(to left, #FF9751 0%, rgba(255,151,81,0) 100%);
}
.orange-color{
  color: #FC9651;
}
.green{
background: linear-gradient(to left, #49FFB6 0%, rgba(73,255,182,0) 100%);
}
.green-color{
  color: #49FFB6;
}
.blue{
background: linear-gradient(to left, #8ED3B7 0%, rgba(142,211,183,0) 100%);
}
.blue-color{
  color: #8ED3B7;
}

</style>