<template>
	<div class="carSpecificInforView" v-if="whetherShow">
        <!-- 关闭按钮 -->
        <img src="../../../../assets/images/cutGraph/close.png" class="closeStyle" @click="closeFn()">
        <!-- 车辆信息标题 -->
        <div class="smallTitleStyle">
            <div>
                <img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
                <div class="smallTitleStyle_text">车辆信息</div>
            </div>
            <div style="color:#CBF6F8;cursor: pointer;">
                <span class="el-icon-camera-solid" style="font-size:20px;"></span>
                <span style="font-size:17px;margin-left:3px;">查看监控</span>
            </div>
        </div>
        <!-- 车辆信息内容 -->
        <div class="carSpecificInfor_son1">
            <div>
                <div>车辆名称：</div>
                <div class="contentInput">{{carInformationData.name}}</div>
            </div>
            <div>
                <div>车辆牌号：</div>
                <div class="contentInput">{{carInformationData.number}}</div>
            </div>
            <div>
                <div>车辆年限：</div>
                <div class="contentInput">{{carInformationData.year}}年</div>
            </div>
            <div>
                <div>车辆状态：</div>
                <div class="contentInput">{{carInformationData.status == '0' ? '正常' : carInformationData.status == '1' ? '故障' : carInformationData.status == '2' ? '停用' : ''}}</div>
            </div>
            <div>
                <div>保养时间：</div>
                <div class="contentInput">{{carInformationData.time}}</div>
            </div>
            <div>
                <div>超速预警值：</div>
                <div class="contentInput">{{carInformationData.alarm}}Km/h</div>
            </div>
            <div>
                <div>终端设备编号：</div>
                <div class="contentInput">{{carInformationData.plant}}</div>
            </div>
        </div>
        <!-- 车辆实时数据标题  -->
        <div class="smallTitleStyle" style="margin-top:10px;">
            <div>
                <img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
                <div class="smallTitleStyle_text">车辆实时数据</div>
            </div>
            <div style="color:#CBF6F8;cursor: pointer;">
                <span style="font-size:17px;">查看车辆轨迹回放</span>
            </div>
        </div>
        <!-- 车辆实时数据内容  -->
        <div class="carSpecificInfor_son1">
            <div>
                <div>运行状态：</div>
                <div class="contentInput">{{carRealTimeData.status}}</div>
            </div>
            <div>
                <div>运载种类：</div>
                <div class="contentInput">{{carRealTimeData.carclass}}</div>
            </div>
            <div>
                <div>运行时长：</div>
                <div class="contentInput">{{carRealTimeData.runTime}}</div>
            </div>
            <div>
                <div>开始时间：</div>
                <div class="contentInput">{{carRealTimeData.startTime}}</div>
            </div>
            <div>
                <div>运输效率：</div>
                <div class="contentInput">{{carRealTimeData.effic}}</div>
            </div>
            <div>
                <div>当日行驶里程：</div>
                <div class="contentInput">{{carRealTimeData.mil}}</div>
            </div>
            <div>
                <div>车次：</div>
                <div class="contentInput">{{carRealTimeData.carnum}}</div>
            </div>
        </div>
        <!-- 司机信息标题  -->
        <div class="smallTitleStyle" style="margin-top:10px;">
            <div>
                <img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
                <div class="smallTitleStyle_text">司机信息</div>
            </div>
        </div>
        <!-- 司机信息内容  -->
        <div class="carSpecificInfor_son1">
            <div>
                <div>司机姓名：</div>
                <div class="contentInput">{{driverInformationData.name}}</div>
            </div>
            <div>
                <div>用户名：</div>
                <div class="contentInput">{{driverInformationData.userName}}</div>
            </div>
            <div>
                <div>电话：</div>
                <div class="contentInput">{{driverInformationData.phone}}</div>
            </div>
            <div>
                <div>部门：</div>
                <div class="contentInput">{{driverInformationData.depart}}</div>
            </div>
            <div>
                <div>岗位：</div>
                <div class="contentInput">{{driverInformationData.post}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';

export default {
	data() {
		return {
			whetherShow:false,
            carText:'',
            driverText:'',
            carInformationData:{},
            carRealTimeData:{},
            driverInformationData:{},
		}
	},
	mounted() {},
	methods: {
		loadData(car,driver){
            this.whetherShow = true;
            this.carText = car;
            this.driverText = driver;

            this.$nextTick(()=>{
				//获取车辆信息
				HttpReq.truckDispatching.carInformationQuery({size:1,name:this.carText}).then((res) => {
					if(res.code == 200){
						this.carInformationData = res.data.content[0];
					}
				})
				//获取车辆实时数据
				HttpReq.truckDispatching.screenCarInforCarRealQuery({size:1,carname:this.carText}).then((res) => {
					if(res.code == 200){
						this.carRealTimeData = res.data.content[0];
					}
				})
                //获取司机人员信息
				HttpReq.truckDispatching.driverManagementPCQuery({size:1,userName:this.driverText}).then((res) => {
					if(res.code == 200){
						this.driverInformationData = res.data.content[0];
					}
				})
			})
		},
        closeFn(){
            this.whetherShow = false;
        }
	},
	
}
</script>

<style scope>
.carSpecificInforView{
    position: absolute;
    top: 7vh;
    left: 25vw;
    width: 25vw;
    height: 90vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
	background-size:100% 100%;
    padding: 1.5vh 3vw 0px 1vw;
    box-sizing: border-box;
    overflow: hidden;
}
.closeStyle{
    position: absolute;
    top: 4vh;
    right: 1vw;
    cursor: pointer;
}
.smallTitleStyle{
    display: flex;
    justify-content: space-between;
}
.smallTitleStyle>div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.smallTitleStyle_text{
    margin-left: 5px;
    font-size: 18px;
    color: skyblue;
}
.carSpecificInfor_son1>div{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    color: #01F6F9;
}
.contentInput{
    height: 3.5vh;
    width: 12.5vw;
    border: 2px solid #01F6F9;
    border-radius: 5px;
    line-height: 3.3vh;
    padding: 0px 10px;
    box-sizing: border-box;
}
</style>