<template>
    <div class="intelligentSchScrView" v-if="whetherShow">

        <div class="intelligentSchScrView_leftView">
            <!-- 人工调度 -->
            <div class="intelligentSchScrView_leftView1">
                <div class="intelligentSchScrView_leftView_title">人工调度</div>
                <div class="intelligentSchScrView_leftView_content">
                    <div class="voiceAppContent_1">
                        <div>选择车队：</div>
                        <el-select v-model="selectCarFleet" placeholder="请选择车队" style="width:14vw;" @change="toSearchFn()">
                            <el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:18px;"></el-option>
                        </el-select>
                    </div>
                    <div class="voiceAppContent_2">
                        <div class="voiceAppContent_2_title">选择车辆</div>
                        <div class="voiceAppContent_2_content">
                            <el-checkbox-group v-model="selectCarRadioArray">
                                <el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:7px;">
                                    <div style="width:12vw;margin-left:1.7vw;text-align: center;">{{item.number}}</div>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="voiceAppContent_3">
                        <div class="voiceAppContent_2_title">已选中车辆</div>
                        <div class="voiceAppContent_3_content">
                            <div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_3_content_selectCar">
                                <div>{{item.number}}</div>
                                <div style="width:20px;height:20px;background-color: rgb(4,112,171);text-align: center;font-size:30px;line-height:20px;cursor: pointer;" @click="cancelSelect(index)">
                                    <span>×</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="voiceAppContent_4">
                        <el-button type="primary" @click="toNoticeFn('广播')">广播</el-button>
                        <el-button type="primary" @click="toNoticeFn('紧急通知')">紧急通知</el-button>
                        <el-button type="primary" @click="toNoticeFn('通话')">通话</el-button>
                        <el-button type="primary" @click="todispatchChange()">{{dispatchBtnTitle}}</el-button>
                    </div>
                </div>
            </div>
            <!-- 近期通知列表-->
            <div  class="intelligentSchScrView_leftView2">
                <div class="intelligentSchScrView_leftView_title">近期通知列表</div>
                <div class="intelligentSchScrView_leftView_content">
                    <div class="rolling">
                        <div class="table-box">
                            <dl>
                                <dt>
                                    <div>通知类型</div>
                                    <div>开始时间</div>
                                    <div>录音回放</div>
                                </dt>
                                <dd v-for="(item,index) in recentNoticeData" :key="index">
                                    <div>{{item.noticeClass}}</div>
                                    <div>{{item.createTime}}</div>
                                    <div style="cursor: pointer;text-decoration:underline;" @click="playSoundRecordingFn(item.id)">录音播放</div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="intelligentSchScrView_rightView">
            <!-- 智能调度信息 -->
            <div>
                <div class="intelligentSchScrView_rightView_title">智能调度信息</div>
                <div class="intelligentSchScrView_rightView_content">
                    <!-- <div class="intelligentSchScrView_rightView_content_1_top">
                        <div>
                            <img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
                            <div style="color:#F8D909;text-align: center;">
                                <div style="font-size:16px;">正在派送中</div>
                                <div style="font-size:22px;">{{dispatchLoadingNum}}</div>
                            </div>
                        </div>
                        <div>
                            <img src="../../../../assets/images/cutGraph/wanchengle1.png">
                            <div style="color:#01EDF7;text-align: center;">
                                <div style="font-size:16px;">已经完成的</div>
                                <div style="font-size:22px;">{{dispatchFinishNum}}</div>
                            </div>
                        </div>
                    </div> -->
                    <div class="intelligentSchScrView_rightView_content_1_bottom">
                        <div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
                            <div class="table-box">
                                <dl>
                                    <dt>
                                        <div>调度车辆</div>
                                        <div>调度时间</div>
                                        <div>完成时间</div>
                                        <div>目的地</div>
                                    </dt>
                                    <dd v-for="(item,index) in dispatchDetailsList" :key="index">
                                        <div>{{item.carNo}}</div>
                                        <div>{{item.createTime}}</div>
                                        <div>{{item.endTime}}</div>
                                        <div>{{item.destination}}</div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 车辆区域分布-->
            <div>
                <div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
                <div class="intelligentSchScrView_rightView_content">
                    <div id="carsAreaDistributionView"></div>
                </div>
            </div>
            <!-- 各装点车铲比 -->
            <div>
                <div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
                <div class="intelligentSchScrView_rightView_content">
                    <div id="carsProportionView"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';

export default {
    data() {
		return {
            heartbeatTimer:null,
            websocket: null,
			whetherShow:false,
            selectCarFleet:'', //搜索对应车队
			carFleetData:[], //车队信息
			carsInforData:[], //车辆信息
			selectCarRadioArray:[], //多选选中车辆
            recentNoticeData:[], //近期通知列表
            dispatchLoadingNum:0, //智能调度进行中
            dispatchFinishNum:0, //智能调度已完成
            dispatchDetailsList:[], //智能调度情况表
            dispatchBtnTitle:'人工调度',
            dispatchBtnTitle1:'人工调度',
		}
	},
    created(){ },
	mounted() { },
	methods: {
        //获取总数据
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.selectCarFleet = '';
                this.selectCarRadioArray = [];

                this.$nextTick(()=>{
                    //车队信息
                    HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
                        if(res.code == 200){
                            this.carFleetData = res.data.content;
                        };
                    })
                    //车辆信息
                    this.loadData2();
                    //近期通知列表
                    HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
                        if(res.code == 200){
                            this.recentNoticeData = res.data.content;
                            let flag0 = [];
                            this.recentNoticeData.forEach((item)=>{
                                if(item.flag == 0){
                                    flag0.push(item);
                                }
                            })
                            this.dispatchBtnTitle = flag0[0].noticeClass;
                        };
                    })
                    //智能调度情况
                    HttpReq.truckDispatching.personRecordingQuery({size:20,sort:'createTime,desc',flag:0}).then((res) => {
                        let finishData = [];
                        let loadingData = [];
                        if(res.code == 200){
                            res.data.content.forEach((item,index) => {
                                if(item.status == 0){
                                    finishData.push(item);
                                }else{
                                    loadingData.push(item);
                                }
                            });
                            this.dispatchLoadingNum = loadingData.length;
                            this.dispatchFinishNum = finishData.length;
                            this.dispatchDetailsList = res.data.content;
                        }
                    })
                    //车辆区域分布Echarts
                    this.carsAreaDistributionEcharts();
                })

                //页面刚进入时开启长连接
                this.initWebSocket();
                this.heartbeatTimer = setInterval(() => {
                    this.reconnect();
                }, 10000)

            }else{
                this.whetherShow = false;
            }
        },
        //获取车辆信息
		loadData2() {
			let query = {};
			query.size = 9999;
			query.page = 0;
			query.road = this.selectCarFleet;
			//车辆
			HttpReq.truckDispatching.carInformationQuery(query).then((res) => {
				if(res.code == 200){
					this.carsInforData = res.data.content;
				};
			})
		},
        //车辆多选取消
		cancelSelect(index){
			let handleArray = [...this.selectCarRadioArray];
			handleArray.splice(index,1);
			this.selectCarRadioArray = handleArray;
		},
        //搜索车辆
        toSearchFn(){
            this.loadData2();
        },
        //发起通知
        toNoticeFn(text){
            HttpReq.truckDispatching.recentNoticeAdd({noticeClass:text,flag:1}).then((res) => {
				if(res.code == 200){
					this.$notify({
						title: text + '发起成功!',
						type: 'success',
						duration: 2500
					});
					//近期通知列表
                    HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc',}).then((res) => {
                        if(res.code == 200){
                            this.recentNoticeData = res.data.content;
                        };
                    })
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) { });
        },
        //人工调度和智能调度切换
        todispatchChange(){
            if(this.dispatchBtnTitle == '人工调度'){
                this.dispatchBtnTitle = '智能调度';
                this.dispatchBtnTitle1 = '人工调度';
            }else{
                this.dispatchBtnTitle = '人工调度';
                this.dispatchBtnTitle1 = '智能调度';
            }
            HttpReq.truckDispatching.recentNoticeAdd({noticeClass:this.dispatchBtnTitle1,flag:0}).then((res) => {
				if(res.code == 200){
					this.$notify({
						title: this.dispatchBtnTitle1 + '发起成功!',
						type: 'success',
						duration: 2500
					});
					//近期通知列表
                    HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc',}).then((res) => {
                        if(res.code == 200){
                            this.recentNoticeData = res.data.content;
                        };
                    })
                    //发起添加调度类型
                    HttpReq.truckDispatching.screenDispatchWayAdd({dispatcher:this.dispatchBtnTitle1}).then((res) => { })
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) { });
        },
        //播放录音
        playSoundRecordingFn(id){
            console.log(id);
        },
        //车辆区域分布Echarts
        carsAreaDistributionEcharts(){
            var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    }
                },
                legend: {
                    textStyle:{
                        color: 'white',
                        fontSize:16,
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['矿区一', '矿区二', '矿区三'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 1
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 0
                        }
                    },
                },
                series: [
                    {
                        name: '卡车',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: [320, 302, 301],
                        barWidth: 35,
                        itemStyle: {
							color: '#2BBFA8'
						},
                    },
                    {
                        name: '电铲',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: [120, 132, 101],
                        barWidth: 35,
                        itemStyle: {
							color: '#DB972D'
						},
                    },
                    {
                        name: '其他车辆',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: [220, 182, 191],
                        barWidth: 35,
                        itemStyle: {
							color: '#158DFD'
						},
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //各装点车铲比
        carsProportionEcharts(){

        },

        //初始化weosocket 
        initWebSocket(){
            //const wsuri = "ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数
            const wsuri = process.env.VUE_APP_WS_API + "/" + 'pcBigScreen';
            this.websocket = new WebSocket(wsuri); 
            this.websocket.onopen = this.websocketonopen;
            this.websocket.onerror = this.websocketonerror;
            this.websocket.onmessage = this.websocketonmessage; 
            this.websocket.onclose = this.websocketclose;
            this.websocketonmessage();
        },
        //WebSocket连接成功
        websocketonopen() {
            console.log("WebSocket连接成功");
        },
        //WebSocket连接错误
        websocketonerror(e) { 
            console.log("WebSocket连接发生错误");
        },
        //WebSocket数据接收 
        websocketonmessage(e){ 
            console.log("ee",e);
        }, 
        //WebSocket数据发送 
        websocketsend(agentData){
            this.websock.send(agentData); 
        }, 
        //WebSocket关闭 
        websocketclose(e){
            console.log("connection closed (" + e.code + ")"); 
        },
        //WebSocket重连
		reconnect(){
			var This=this;
			if (this.websocket.readyState === 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
				This.websocketonmessage();
			} else if (this.websocket.readyState === 0) { // 表示正在连接，设置300ms后发送信息
				setTimeout(function () {
					This.websocketonmessage();
				}, 300);
			} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
				This.initWebSocket();
				setTimeout(function () {
					This.websocketonmessage();
				}, 500);
			}
		},

	},
    beforeDestroy() {
        //页面销毁时关闭长连接
        this.websocketclose();
        //关闭心跳
		this.heartbeatTimer = null;
    },
}
</script>

<style scoped>
.intelligentSchScrView{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.intelligentSchScrView_leftView{
    height: 100%;
    width: 20%;
}
.intelligentSchScrView_rightView{
    height: 100%;
    width: 20%;
}
.intelligentSchScrView_leftView1{
    width: 100%;
    height: 64vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.intelligentSchScrView_leftView2{
    width: 100%;
    height: 32vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.intelligentSchScrView_rightView>div{
    width: 100%;
    height: 31.8vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.intelligentSchScrView_leftView_title,.intelligentSchScrView_rightView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.intelligentSchScrView_leftView_content,.intelligentSchScrView_rightView_content{
    width: 100%;
}
/* .table-box{
	margin-top: -10px;
} */
dl{
	display:table;
	width:100%;
}
dt{
	margin-top: 20px;
	display:table-row;
	background-color: #274088;
}
dt>div{
	display:table-cell;
	padding:7px 3px;
	font-size: 16px;
	font-weight: 500;
	color: rgb(24,228,240);
}
dd{
	display:table-row;
}
dd>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 15px;
	color: #A6F6F9;
}
.rolling{
    text-align: center;
	height: 25vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.rolling::-webkit-scrollbar {
  display: none;
}

.voiceAppContent_1{
	display: flex;
	justify-content: space-around;
}
.voiceAppContent_1>div{
	height: 40px;
	line-height: 40px;
	color: rgb(24,228,240);
	font-size: 16px;
    font-weight: 600;
}
.voiceAppContent_2{
    width: 100%;
    height: 27vh;
    border: 2px solid rgb(24,228,240);
    border-radius: 10px;
}
.voiceAppContent_2_title{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	background-color: rgb(25,41,94);
	height: 3vh;
	line-height: 3vh;
	color: rgb(24,228,240);
	display: flex;
	justify-content: space-around;
	font-size: 16px;
}
.voiceAppContent_2_content{
	height: 23vh;
	width: 100%;
	overflow-y:auto;
	padding: 0px 10px;
	box-sizing: border-box;
}
.voiceAppContent_2_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.voiceAppContent_2_content::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius   : 10px;
	background-color: #274088;
	background-image: -webkit-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.2) 75%,
		transparent 75%,
		transparent
	);
}
.voiceAppContent_2_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background   : #ededed;
	border-radius: 10px;
}
.el-checkbox__label{
	vertical-align: -3px;
}
.el-checkbox__label>div{
	display: inline-block;
	color: rgb(24,228,240);
	font-size: 17px;
}
.el-checkbox{
	display: block;
}
.el-checkbox__inner{
	width: 30px !important;
	height: 30px !important;
}
.el-checkbox__input .el-checkbox__inner::after {
    border: 2px solid #fff;
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 12px;
	width: 5px;
    position: absolute;
    top: 1px;
	left: 8px;
    transform: rotate(45deg) scaleY(1);
}
.voiceAppContent_3{
    margin-top: 1vh;
    width: 100%;
    height: 18vh;
    border: 2px solid rgb(24,228,240);
    border-radius: 10px;
}
.voiceAppContent_3_content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content:flex-start;
	height: 14vh;
	width: 100%;
	overflow-y:auto;
	padding: 0px 10px;
	box-sizing: border-box;
}
.voiceAppContent_3_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.voiceAppContent_3_content::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius   : 10px;
	background-color: #274088;
	background-image: -webkit-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.2) 75%,
		transparent 75%,
		transparent
	);
}
.voiceAppContent_3_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background   : #ededed;
	border-radius: 10px;
}
.voiceAppContent_3_content_selectCar{
    width: 45%;
	margin-top: 5px;
	color: rgb(24,228,240);
	font-size: 16px;
	display: flex;
	justify-content: space-between;
}
.voiceAppContent_3_content_selectCar>div{
	height: 20px;
	line-height: 20px;
    font-size: 18px;
}
.voiceAppContent_4{
    margin-top: 1vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
}
.voiceAppContent_4 button{
    margin: 0px 2vw 10px;
    width: 25%;
    font-size: 14px;
}
.intelligentSchScrView_rightView_content_1_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.intelligentSchScrView_rightView_content_1_top>div{
    width: 49%;
    height: 6vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
	background-size:100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.intelligentSchScrView_rightView_content_1_bottom{
    width: 100%;
    height: 26.5vh;
}
.intelligentSchScrView_rightView_content_1_bottom_rolling{
    text-align: center;
	height: 26.5vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
    display: none;
}
#carsAreaDistributionView{
    width: 19vw;
    height: 27.5vh;
}
</style>