<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}}
                                        (
                                        {{item.odo == 0 ? '离线' :item.odo == 1 ? '智能调度' : item.odo == 2 ? '人工调度' : item.odo == 3 ? '在线' : '其他作业'}}
                                        )
                                    </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">
                        <button class="voiceAppContent_4_btns" @click="toNoticeFn('广播')">广播</button>
                        <button class="voiceAppContent_4_btns" @click="toNoticeFn('紧急通知')">紧急通知</button>
                        <button class="voiceAppContent_4_btns" @click="toNoticeFn('通话')">通话</button>
                        <button class="voiceAppContent_4_btns" @click="todispatchChange()">{{dispatchBtnTitle}}</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="item.noticeClass == '智能调度' ? '' : item.noticeClass == '人工调度' ? '' : selectSituation(item)">{{item.noticeClass == '智能调度' ? '无录音' : item.noticeClass == '人工调度' ? '无录音' : '录音播放'}}</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>
                                        <div>目的地</div>
                                    </dt>
                                    <dd v-for="(item,index) in dispatchDetailsList" :key="index">
                                        <div>{{item.carNo}}</div>
                                        <div>{{item.startAdr}}</div>
                                        <div>{{item.createTime}}</div>
                                        <div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</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 class="main" style="display:none;">
				<slot name="top"></slot>

				<div class="mainBox">
					<div class="btns">
						<div>
							<button @click="recOpen">打开录音,请求权限</button>
							<button @click="recClose">关闭录音,释放资源</button>
						</div>
						
						<button @click="recStart">录制</button>
						<button @click="recStop" style="margin-right:80px">停止</button>
						
						<span style="display: inline-block;">
							<button @click="recPause">暂停</button>
							<button @click="recResume">继续</button>
						</span>
						<span style="display: inline-block;">
							<button @click="recPlayLast">播放</button>
							<button @click="recUploadLast">上传</button>
						</span>
					</div>
				</div>

				<div class="mainBox">
					<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block;vertical-align:bottom" class="ctrlProcessWave"></div>
					<div style="height:40px;width:300px;display:inline-block;background:#999;position:relative;vertical-align:bottom">
						<div class="ctrlProcessX" style="height:40px;background:#0B1;position:absolute;" :style="{width:powerLevel+'%'}"></div>
						<div class="ctrlProcessT" style="padding-left:50px; line-height:40px; position: relative;">{{ duration+"/"+powerLevel }}</div>
					</div>
				</div>
				
				<div class="mainBox">
					<audio ref="LogAudioPlayer" style="width:100%"></audio>

					<div class="mainLog">
						
					</div>
				</div>

				<div v-if="recOpenDialogShow" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">
					
				</div>

				<slot name="bottom"></slot>
		</div>
        
        <!-- 播放器 -->
        <audio controls currentTime autoplay :src='srcUrl' style="display:none;"></audio>

        <!-- 语音区域组件 -->
        <div class="videoListView" v-if="dialogVisible">
            <div class="videoListView_title">{{dialogTitle}}</div>
            <div style="color:white;font-size:14px;margin-bottom:1vh;">若无选中车辆，默认对所有车辆发起</div>
            <div class="videoListView_content">
                <div v-for="(item,index) in tanchuCarListArray" :label="item" :key="index">{{item.number}}</div>
            </div>
            <div style="margin-top:10px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
                <el-button type="primary" style="width:40%;" @click="recStart">录制语音</el-button>
                <el-button type="primary" style="width:40%;" @click="recStop" >结束语音</el-button>
            </div>
            <div style="margin-top:10px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
                <el-button type="primary" style="width:40%;" @click="recUploadLast">上传语音</el-button>
                <el-button style="width:40%;" @click="quxiaoVideo()">取消语音</el-button>
            </div>
        </div>

        <!-- 人工调度组件 -->
        <div class="peopleScheAssembly" v-if="peopleScheAssemblyShow">
            <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">人工调度详情</div>

            <el-form size="small" label-width="100px" :rules="rules">
                <el-form-item label="装载区" style="display: inline-block;" class="des1">
					<!-- <el-select v-model="zaDestination" placeholder="请选择装载区" style="width:200px;">
						<el-option v-for="(obj,index) in caiquData1" :label="obj.name" :value="obj.name" :key="index"></el-option>
					</el-select> -->
                    <el-cascader v-model="zaDestination" :options="caiquData1"></el-cascader>
				</el-form-item>
                <el-form-item label="卸点区" style="display: inline-block;" class="des1">
					<el-select v-model="xzDestination" placeholder="请选择卸点区" style="width:200px;">
						<el-option v-for="(obj,index) in xiequData1" :label="obj.name" :value="obj.name" :key="index"></el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="时长" style="display: inline-block;" class="des1">
					<el-select v-model="desform.duration" placeholder="请选择调度时长" style="width:200px;">
						<el-option label="单次" value="单次"></el-option>
						<el-option label="一天" value="一天"></el-option>
						<el-option label="长期" value="长期"></el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="截止日期" style="display: inline-block;" class="des1">
					<el-date-picker v-model="desform.endTime" type="datetime" placeholder="选择日期时间" style="width:200px;" :disabled='desform.duration != "长期" '></el-date-picker>
				</el-form-item>
                <el-form-item label="说明" style="display: inline-block;" class="des1">
					<el-input type="textarea" v-model="desform.carshow" style="width:200px;"></el-input>
				</el-form-item>
            </el-form>

            <div class="peopleScheAssemblyBtns">
                <el-button type="primary" style="height:40px;width:100px;font-size: 16px;" round @click="peopleScheAssemblyFn()">确定</el-button>
                <el-button style="height:40px;width:100px;font-size: 16px;" round @click="peopleScheAssemblyCloseFn()">取消</el-button>
            </div>

        </div>

    </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
//加载必须要的core，demo简化起见采用的直接加载类库，实际使用时应当采用异步按需加载
import Recorder from 'recorder-core'
// //需要使用到的音频格式编码引擎的js文件统统加载进来，这些引擎文件会比较大
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
// //可选的扩展
import 'recorder-core/src/extensions/waveview'

export default {
    data() {
		return {
            intelligentSchedulTimer:null,
            heartbeatTimer:null,
            websocket: null,
			whetherShow:false,
            selectCarFleet:'', //搜索对应车队
			carFleetData:[], //车队信息
			carsInforData:[], //车辆信息
			selectCarRadioArray:[], //多选选中车辆
			tanchuCarListArray:[], //弹出列表选中车辆
            recentNoticeData:[], //近期通知列表
            dispatchLoadingNum:0, //智能调度进行中
            dispatchFinishNum:0, //智能调度已完成
            dispatchDetailsList:[], //智能调度情况表
            dispatchBtnTitle:'人工调度',
            dispatchBtnTitle1:'人工调度',
            //车辆区域分布Echarts
            carsAreaDistributionData:{
                name:[],
                kache:[],
                chanche:[],
                qitache:[],
            },
            //各装点车铲比Echarts
            carsProportionData:[],
            dialogTitle:'广播车辆',
            dialogTitle1:'',
            dialogVisible:false,
            srcUrl:null,
            resultBlob:null,

            //人工调度配置
            desform:{},
            caiquData1:[],
            xiequData1:[],
            zaDestination:[],
            xzDestination:'',
            destinationDataAll:[],//人工调度调度目的地列表
            peopleScheAssemblyShow:false,
            rules: {
				// odd: [
				// 	{required: true, message: '请输入调度单号', trigger: 'blur' }
				// ],
			},

            //录音相关数据
            type:"mp3",
            bitRate:16,
            sampleRate:16000,
            rec:0,
            duration:0,
            powerLevel:0,
            recOpenDialogShow:0,
            logs:[],

		}
	},
	methods: {
        //获取总数据
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.srcUrl = null;
                this.selectCarFleet = '';
                this.dialogVisible = false;
                this.selectCarRadioArray = [];
                this.tanchuCarListArray = [];
                this.peopleScheAssemblyShow = false;
                this.desform = {};
                this.zaDestination = [];
                this.xzDestination = '';

                this.$nextTick(()=>{
                    //车队信息
                    HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
                        if(res.code == 200){
                            this.carFleetData = res.data.content;
                        };
                    })
                    //车辆信息
                    this.loadData2();
                    //获取区域信息
                    this.loadData4();
                    //近期通知列表
                    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);
                            //     }
                            // })
                            // if(flag0.length == 0){
                            //     this.dispatchBtnTitle = '人工调度';
                            // }else{
                            //     this.dispatchBtnTitle = flag0[0].noticeClass;
                            // }
                        };
                    })
                    //智能调度情况
                    HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
                        this.dispatchDetailsList = res;
                    })
                    //获取智能调度情况中的进行中数量
                    HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
                        if(res.length == 0){
                            this.dispatchLoadingNum = 0;
                        }else{
                            this.dispatchLoadingNum = res[0].under;
                        }
                    })
                    //获取智能调度情况中的已完成数量
                    HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
                        if(res.length == 0){
                            this.dispatchFinishNum = 0;
                        }else{
                            this.dispatchFinishNum = res[0].round;
                        }
                    })
                    //车辆区域分布Echarts
                    HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
                        if(res.code == 200){
                            let name = [];
                            let kache = [];
                            let chanche = [];
                            let qitache = [];
                            res.data.forEach((item,index)=>{
                                name.push(item.name);
                                kache.push(item.truck);
                                chanche.push(item.shovel);
                                qitache.push(item.other);
                            })
                            this.carsAreaDistributionData.name = name;
                            this.carsAreaDistributionData.kache = kache;
                            this.carsAreaDistributionData.chanche = chanche;
                            this.carsAreaDistributionData.qitache = qitache;
                            this.carsAreaDistributionEcharts();
                        }
                    })
                    //各装点车铲比Echarts
                    HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
                        if(res.code == 200){
                            this.carsProportionData = res.data;
                            this.carsProportionEcharts();
                        }
                    })

                    //定时器
                    this.intelligentSchedulTimer = setInterval(() => {
                        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);
                                //     }
                                // })
                                // if(flag0.length == 0){
                                //     this.dispatchBtnTitle = '人工调度';
                                // }else{
                                //     this.dispatchBtnTitle = flag0[0].noticeClass;
                                // }
                            };
                        })
                        //智能调度情况
                        HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
                            this.dispatchDetailsList = res;
                        })
                        //获取智能调度情况中的进行中数量
                        HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
                            if(res.length == 0){
                                this.dispatchLoadingNum = 0;
                            }else{
                                this.dispatchLoadingNum = res[0].under;
                            }
                        })
                        //获取智能调度情况中的已完成数量
                        HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
                            if(res.length == 0){
                                this.dispatchFinishNum = 0;
                            }else{
                                this.dispatchFinishNum = res[0].round;
                            }
                        })
                        //车辆区域分布Echarts
                        HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
                            if(res.code == 200){
                                let name = [];
                                let kache = [];
                                let chanche = [];
                                let qitache = [];
                                res.data.forEach((item,index)=>{
                                    name.push(item.name);
                                    kache.push(item.truck);
                                    chanche.push(item.shovel);
                                    qitache.push(item.other);
                                })
                                this.carsAreaDistributionData.name = name;
                                this.carsAreaDistributionData.kache = kache;
                                this.carsAreaDistributionData.chanche = chanche;
                                this.carsAreaDistributionData.qitache = qitache;
                                this.carsAreaDistributionEcharts();
                            }
                        })
                        //各装点车铲比Echarts
                        HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
                            if(res.code == 200){
                                this.carsProportionData = res.data;
                                this.carsProportionEcharts();
                            }
                        })
                    }, 10000)

                })
                //开启录音
                this.recOpen();
            }else{
                if(this.intelligentSchedulTimer) {
                    clearInterval(this.intelligentSchedulTimer);
                }
                //关闭录音
                this.recClose();
                this.whetherShow = false;
                this.srcUrl = null;
            }
        },
        //获取车辆信息
		loadData2() {
			let query = {};
			query.size = 9999;
			query.road = this.selectCarFleet;
			HttpReq.truckDispatching.carInformationQuery(query).then((res) => {
				if(res.code == 200){
					this.carsInforData = res.data.content;
				};
			})
		},
        //获取区域信息
		loadData4() {
			HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
				if(res.code == 200){
                    let caiqu1 = [];
                    let xiequ1 = [];
					res.data.content.forEach((item,index)=>{
                        if(item.areaclass == '采区'){
                            caiqu1.push(item);
                        }else if(item.areaclass == '卸区'){
                            xiequ1.push(item);
                        }
                    });
                    this.$nextTick(()=>{
                        let caiquCenArr1 = [];
                        caiqu1.forEach((item1,index1)=>{
                            let caiquCenObj1 = {};
                            caiquCenObj1.value = item1.name;
                            caiquCenObj1.label = item1.name;
                            HttpReq.truckDispatching.RegionalCaiDianQuery({size:9999,areaName:item1.name}).then((res1) => {
                                if(res1.code == 200 && res1.data.totalElements != 0){
                                    let caiquCenArr2 = [];
                                    res1.data.content.forEach((item2,index2)=>{
                                        let caiquCenObj2 = {};
                                        caiquCenObj2.value = item2.name;
                                        caiquCenObj2.label = item2.name;
                                        caiquCenArr2.push(caiquCenObj2);
                                    })
                                    caiquCenObj1.children = caiquCenArr2;
                                };
                            })
                            caiquCenArr1.push(caiquCenObj1);
                        });
                        this.caiquData1 = caiquCenArr1;
                        this.xiequData1 = xiequ1;
                    })  
				};
			})
		},
        //页面刚进入时开启长连接
		loadData3(){
			this.initWebSocket();
			this.heartbeatTimer = setInterval(() => {
				this.reconnect();
			}, 20000)
		},
        //关闭心跳以及关闭长连接
		xintiaoCloseFn(){
			//页面销毁时关闭长连接
        	this.websocketclose();
			//关闭心跳
			if(this.heartbeatTimer) {
				clearInterval(this.heartbeatTimer);
			}
		},
        //车辆多选取消
		cancelSelect(index){
			let handleArray = [...this.selectCarRadioArray];
			handleArray.splice(index,1);
			this.selectCarRadioArray = handleArray;
		},
        //搜索车辆
        toSearchFn(){
            this.loadData2();
        },
        //发起通知
        toNoticeFn(text){
            if(text == '广播'){
                this.dialogTitle = '广播车辆';
            }else if(text == '紧急通知'){
                this.dialogTitle = '接到通知的车辆';
            }else if(text == '通话'){
                this.dialogTitle = '连麦的车辆';
            }
            this.dialogTitle1 = text;
            if(JSON.stringify(this.selectCarRadioArray) == '[]'){
                this.tanchuCarListArray = this.carsInforData;
            }else{
                this.tanchuCarListArray = this.selectCarRadioArray;
            }
            this.dialogVisible = true;
            //关闭人工调度组件
            this.peopleScheAssemblyShow = false;
            this.desform = {};
            this.zaDestination = [];
            this.xzDestination = '';
        },
        //取消发送语音
        quxiaoVideo(){
            this.dialogVisible = false; 
            this.tanchuCarListArray = [];
            this.selectCarRadioArray = [];
        },
        //人工调度和智能调度切换
        todispatchChange(){
            if(this.dispatchBtnTitle == '人工调度'){
                this.peopleScheAssemblyShow = true;
                // 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) {});
            }
            //关闭发起通知组件
            this.dialogVisible = false; 
            this.tanchuCarListArray = [];
        },
        //发起人工调度
        peopleScheAssemblyFn(){
            if(JSON.stringify(this.selectCarRadioArray) == '[]'){
                this.$notify({
					title: '请选择调度车辆！',
					type: 'warning',
					duration: 2500
				});
                return
            }
            if(JSON.stringify(this.zaDestination) == '[]' && !this.xzDestination){
                this.$notify({
					title: '请选择调度装载区或卸点区！',
					type: 'warning',
					duration: 2500
				});
                return
            }
            if(!this.desform.duration){
                this.$notify({
					title: '请选择调度时长！',
					type: 'warning',
					duration: 2500
				});
                return
            }
            if(this.desform.duration == '长期' && !this.desform.endTime){
                this.$notify({
					title: '请选择调度截止日期！',
					type: 'warning',
					duration: 2500
				});
                return
            }
            this.selectCarRadioArray.forEach((item,index)=>{
                if(JSON.stringify(this.zaDestination) != '[]'){
                    let query1 = {...this.desform};
				    query1.carNo = item.number;
				    query1.flag = 1;
                    query1.destination = this.zaDestination[0] + '-' + (this.zaDestination[1] ? this.zaDestination[1] : '');
                    HttpReq.truckDispatching.manualSchedulingAdd(query1).then((res) => {
                        if(res.code == 200){
                            
                        }else{
                            this.$notify({
                                title: res.msg,
                                type: 'error',
                                duration: 2500
                            })
                        }
                    }).catch(function(error) { });
                    HttpReq.truckDispatching.manualOrderAdd(query1).then((res) => {
                        if(res.code == 200){
                            
                        }else{
                            this.$notify({
                                title: res.msg,
                                type: 'error',
                                duration: 2500
                            })
                        }
                    }).catch(function(error) { });
                }
                if(this.xzDestination){
                    let query2 = {...this.desform};
				    query2.carNo = item.number;
                    query2.flag = 1;
                    query2.destination = this.xzDestination;
                    HttpReq.truckDispatching.manualSchedulingAdd(query2).then((res) => {
                        if(res.code == 200){
                            
                        }else{
                            this.$notify({
                                title: res.msg,
                                type: 'error',
                                duration: 2500
                            })
                        }
                    }).catch(function(error) { });
                    HttpReq.truckDispatching.manualOrderAdd(query2).then((res) => {
                        if(res.code == 200){
                            
                        }else{
                            this.$notify({
                                title: res.msg,
                                type: 'error',
                                duration: 2500
                            })
                        }
                    }).catch(function(error) { });
                }
			})
			this.$notify({
				title: '人工调度发起成功！',
				type: 'success',
				duration: 2500
			});
            this.peopleScheAssemblyShow = false;
            this.desform = {},
            this.zaDestination = [];
            this.xzDestination = '';
            this.selectCarRadioArray = [];

            //切换智能调度
            this.dispatchBtnTitle = '人工调度';
            this.dispatchBtnTitle1 = '人工调度';
            HttpReq.truckDispatching.recentNoticeAdd({noticeClass:this.dispatchBtnTitle1,flag:0}).then((res) => {
				if(res.code == 200){
					//近期通知列表
                    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) {});

        },
        //取消人工调度
        peopleScheAssemblyCloseFn(){
            this.peopleScheAssemblyShow = false;
            this.desform = {};
            this.zaDestination = [];
            this.xzDestination = '';
            this.selectCarRadioArray = [];
        },
        //车辆区域分布Echarts
        carsAreaDistributionEcharts(){
            echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
            var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    }
                },
                legend: {
                    textStyle:{
                        color: 'white',
                        fontSize:16,
                    }
                },
                grid: {
                    top: '13%',
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.carsAreaDistributionData.name,
                    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: this.carsAreaDistributionData.kache,
                        barWidth: 30,
                        itemStyle: {
							color: '#2BBFA8'
						},
                    },
                    {
                        name: '铲车',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: this.carsAreaDistributionData.chanche,
                        barWidth: 35,
                        itemStyle: {
							color: '#DB972D'
						},
                    },
                    {
                        name: '其他车辆',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: this.carsAreaDistributionData.qitache,
                        barWidth: 35,
                        itemStyle: {
							color: '#158DFD'
						},
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //各装点车铲比Echarts
        carsProportionEcharts(){
            echarts.init(document.getElementById('carsProportionView')).dispose();
            var myChart = echarts.init(document.getElementById('carsProportionView'));
            var option;

            const data = [this.carsProportionData];
            option = {
                grid: {
                    top:'15%',
                    left: '5%',
                    right: '8%',
                    bottom: '9%',
                    containLabel: true
                },
                xAxis: {
                    name: '铲',
                    nameTextStyle: { fontSize: 14 },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 1
                        }
                    },
                },
                yAxis: {
                    name: '卡车',
                    nameTextStyle: { fontSize: 14 },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    scale: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 0
                        }
                    },
                },
                series: [
                    {
                        data: data[0],
                        type: 'scatter',
                        symbolSize: 15,
                        emphasis: {
                            focus: 'series',
                            label: {
                                show: true,
                                formatter: function (param) {
                                    return param.data[2];
                                },
                                position: 'top',
                                fontSize:16,
                            }
                        },
                        itemStyle: {
                            color: '#4BF3F9',
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        },

        //初始化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("e",e);
			if(e == undefined){
				return
			}else{
				let obj1 = JSON.parse(e.data);
                HttpReq.truckDispatching.recentNoticeAdd({noticeClass:obj1.fromUserId,flag:1,videoContent:obj1.contentText}).then((res) => {
                	if(res.code == 200){
                		//近期通知列表
                        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) { });
			}  
        }, 
        //WebSocket数据发送 
        websocketsend(agentData){
            this.websocket.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);
			}
		},

        recOpen:function(){
            var This=this;
            var rec=this.rec=Recorder({
                type:This.type
                ,bitRate:This.bitRate
                ,sampleRate:This.sampleRate
                ,onProcess:function(buffers,powerLevel,duration,sampleRate){
                    This.duration=duration;
                    This.powerLevel=powerLevel;

                    This.wave.input(buffers[buffers.length-1],powerLevel,sampleRate);
                }
            });

            This.dialogInt=setTimeout(function(){//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况
                This.showDialog();
            },8000);

            rec.open(function(){
                This.dialogCancel();
                This.reclog("已打开:"+This.type+" "+This.sampleRate+"hz "+This.bitRate+"kbps",2);
                
                This.wave=Recorder.WaveView({elem:".ctrlProcessWave"});
            },function(msg,isUserNotAllow){
                This.dialogCancel();
                This.reclog((isUserNotAllow?"UserNotAllow，":"")+"打开失败："+msg,1);
            });

            This.waitDialogClickFn=function(){
                This.dialogCancel();
                This.reclog("打开失败：权限请求被忽略，用户主动点击的弹窗",1);
            };
        },
		recClose:function(){
            var rec=this.rec;
            this.rec=null;
			if(rec){
				rec.close();
				this.reclog("已关闭");
			}else{
				this.reclog("未打开录音",1);
			};
		},
        recStart:function(){
			
            if(!this.rec||!Recorder.IsOpen()){
                //this.reclog("未打开录音",1);
				this.recOpen()
                //return;
            }
            this.rec.start();

            var set=this.rec.set;
            this.reclog("录制中："+set.type+" "+set.sampleRate+"hz "+set.bitRate+"kbps");
			this.$notify({
				title: '录制中！',
				type: 'success',
				duration: 5000
			});
			
        },
		recPause:function(){
			if(this.rec&&Recorder.IsOpen()){
				this.rec.pause();
			}else{
				this.reclog("未打开录音",1);
			};
		},
		recResume:function(){
			if(this.rec&&Recorder.IsOpen()){
				this.rec.resume();
			}else{
				this.reclog("未打开录音",1);
			};
		},
        recStop:function(){
            if(!(this.rec&&Recorder.IsOpen())){
                This.reclog("未打开录音",1);
				This.$notify({
					title: '未打开录音！',
					type: 'warning',
					duration: 2500
				});
                return;
            }
			
            var This=this;
            var rec=This.rec;
            rec.stop(function(blob,duration){
                This.reclog("已录制:","",{
                    blob:blob,
                    duration:duration,
                    rec:rec
                });
				This.$notify({
					title: '已录制！',
					type: 'success',
					duration: 2500
				});
            },function(s){
				This.$notify({
					title: '录音失败,'+s,
					type: 'warning',
					duration: 2500
				});
                This.reclog("录音失败："+s,1);
            });
			this.recOpen();
        },
		

		recPlayLast:function(){
			if(!this.recLogLast){
				this.reclog("请先录音，然后停止后再播放",1);
				return;
			};
			
			this.recplay(this.recLogLast.idx);
		},
		recUploadLast:function(){
			let carNumberString = '';
			this.tanchuCarListArray.forEach((item,index)=>{
				carNumberString = carNumberString + item.number + ';';
			})
			carNumberString = carNumberString + 'pcBigScreen';
			this.carAllNumberString = carNumberString;

			var This=this;
			if(!this.recLogLast){
				this.reclog("请先录音，然后停止后再上传",1);
				This.$notify({
					title: '请先录音，然后停止后再上传！',
					type: 'warning',
					duration: 2500
				});
				return;
			};
			
			var blob=this.recLogLast.res.blob;
			this.blobToDataURI(blob);

			/***方式一：将blob文件转成base64纯文本编码 ***/
			var reader=new FileReader();
			reader.onloadend=function(){
				var postData="";
				// postData+="mime="+encodeURIComponent(blob.type);//告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
				// postData+="&upfile_b64="+encodeURIComponent((/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1]) //录音文件内容，后端进行base64解码成二进制
				//postData = btoa(reader.result); //录音文件内容
				postData = This.resultBlob; //录音文件内容

				//发送语音数据
				if (This.websocket.readyState == 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
					This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
					This.$notify({
						title: '上传成功！',
						type: 'success',
						duration: 2500
					});
				} else if (This.websocket.readyState == 0) { // 表示正在连接，设置300ms后发送信息
					setTimeout(function () {
						This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
						This.$notify({
							title: '上传成功！',
							type: 'success',
							duration: 2500
						});
					}, 300);
				} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
					This.initWebSocket();
					setTimeout(function () {
						This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
						This.$notify({
							title: '上传成功！',
							type: 'success',
							duration: 2500
						});
					}, 500);
				}
			};
			reader.readAsDataURL(blob);
		},


        reclog:function(msg,color,res){
			var obj={
                idx:this.logs.length
                ,msg:msg
                ,color:color
                ,res:res

                ,playMsg:""
                ,down:0
                ,down64Val:""
            };
			if(res&&res.blob){
				this.recLogLast=obj;
			};
            this.logs.splice(0,0,obj);
        },
        recplay:function(idx){
            var This=this;
            var o=this.logs[this.logs.length-idx-1];
            o.play=(o.play||0)+1;
            var logmsg=function(msg){
                o.playMsg='<span style="color:green">'+o.play+'</span> '+This.getTime()+" "+msg;
            };
            logmsg("");

            var audio=this.$refs.LogAudioPlayer;
            audio.controls=true;
            if(!(audio.ended || audio.paused)){
                audio.pause();
            };
            audio.onerror=function(e){
                logmsg('<span style="color:red">播放失败['+audio.error.code+']'+audio.error.message+'</span>');
            };
            audio.src=(window.URL||webkitURL).createObjectURL(o.res.blob);
            audio.play();
        },
        recdown:function(idx){
            var This=this;
            var o=this.logs[this.logs.length-idx-1];
            o.down=(o.down||0)+1;

            o=o.res;
            var name="rec-"+o.duration+"ms-"+(o.rec.set.bitRate||"-")+"kbps-"+(o.rec.set.sampleRate||"-")+"hz."+(o.rec.set.type||(/\w+$/.exec(o.blob.type)||[])[0]||"unknown");
            var downA=document.createElement("A");
            downA.href=(window.URL||webkitURL).createObjectURL(o.blob);
            downA.download=name;
            downA.click();
        },
        recdown64:function(idx){
            var This=this;
            var o=this.logs[this.logs.length-idx-1];
            var reader = new FileReader();
            reader.onloadend = function() {
                o.down64Val=reader.result;
            };
            reader.readAsDataURL(o.res.blob);
        },
        getTime:function(){
            var now=new Date();
            var t=("0"+now.getHours()).substr(-2)
                +":"+("0"+now.getMinutes()).substr(-2)
                +":"+("0"+now.getSeconds()).substr(-2);
            return t;
        },
        intp:function(s,len){
            s=s==null?"-":s+"";
            if(s.length>=len)return s;
            return ("_______"+s).substr(-len);
        },


        showDialog:function(){
            //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
            if(!/mobile/i.test(navigator.userAgent)){
                return;//只在移动端开启没有权限请求的检测
            };
            this.recOpenDialogShow=1;
        },
        dialogCancel:function(){
            clearTimeout(this.dialogInt);
            this.recOpenDialogShow=0;
        },
        waitDialogClick:function(){
            this.dialogCancel();
            this.waitDialogClickFn();
        },


        //解析base64编码到blob流
		dataURItoBlob(base64Data) {
			//console.log(base64Data);
			var byteString;
			if(base64Data.split(',')[0].indexOf('base64') >= 0)
				byteString = atob(base64Data.split(',')[1]);//base64 解码
			else{
				byteString = unescape(base64Data.split(',')[1]);
			}
			var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png

			// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
			// var ia = new Uint8Array(arrayBuffer);//创建视图
			var ia = new Uint8Array(byteString.length);//创建视图
			for(var i = 0; i < byteString.length; i++) {
				ia[i] = byteString.charCodeAt(i);
			}
			var blob = new Blob([ia], {
				type: mimeString
			});
			return blob;
		},
		//blob流转base64编码
		blobToDataURI(blob) {
			let that = this;
			var reader = new FileReader();
		    reader.readAsDataURL(blob);
			reader.onload = function(){
				that.resultBlob = reader.result;
			}
		},
        //播放语音
		selectSituation(item){
            if(!item.videoContent){
                this.$notify({
					title: '无语音数据！',
					type: 'warning',
					duration: 2500
				});
            }else{
                //注意base64的最后面中括号和引号是不转译的
                let bstr = this.dataURItoBlob(item.videoContent);
                const reader1 = new FileReader();
                reader1.readAsArrayBuffer(bstr);
                reader1.onload = (e) => {
                    const bufer = e.srcElement.result;
                    const blob = this.addWavHeader(bufer, 16000, 16, 1);
                    this.srcUrl = (window.URL||webkitURL).createObjectURL(blob);
                };
            }
            
		},
		addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {
			const dataLength = samples.byteLength;
			/* 新的buffer类，预留44bytes的heaer空间 */
			const buffer = new ArrayBuffer(44 + dataLength);
			/* 转为 Dataview, 利用API来填充字节 */
			const view = new DataView(buffer);
			let offset = 0;
			/* ChunkID, 4 bytes,  资源交换文件标识符 */
			this.writeString(view, offset, 'RIFF'); offset += 4;
			/* ChunkSize, 4 bytes, 下个地址开始到文件尾总字节数,即文件大小-8 */
			view.setUint32(offset, /* 32 */ 36 + dataLength, true); offset += 4;
			/* Format, 4 bytes, WAV文件标志 */
			this.writeString(view, offset, 'WAVE'); offset += 4;
			/* Subchunk1 ID, 4 bytes, 波形格式标志 */
			this.writeString(view, offset, 'fmt '); offset += 4;
			/* Subchunk1 Size, 4 bytes, 过滤字节,一般为 0x10 = 16 */
			view.setUint32(offset, 16, true); offset += 4;
			/* Audio Format, 2 bytes, 格式类别 (PCM形式采样数据) */
			view.setUint16(offset, 1, true); offset += 2;
			/* Num Channels, 2 bytes,  通道数 */
			view.setUint16(offset, channelCount, true); offset += 2;
			/* SampleRate, 4 bytes, 采样率,每秒样本数,表示每个通道的播放速度 */
			view.setUint32(offset, sampleRateTmp, true); offset += 4;
			/* ByteRate, 4 bytes, 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
			view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
			/* BlockAlign, 2 bytes, 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
			view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
			/* BitsPerSample, 2 bytes, 每样本数据位数 */
			view.setUint16(offset, sampleBits, true); offset += 2;
			/* Subchunk2 ID, 4 bytes, 数据标识符 */
			this.writeString(view, offset, 'data'); offset += 4;
			/* Subchunk2 Size, 4 bytes, 采样数据总数,即数据总大小-44 */
			view.setUint32(offset, dataLength, true); offset += 4;
			if (sampleBits === 16) {
				this.floatTo16BitPCM(view, samples);
			} else if (sampleBits === 8) {
				this.floatTo8BitPCM(view, samples);
			} else {
				this.floatTo32BitPCM(view, samples);
			}
			return new Blob([view], { type: 'audio/wav' });
		},
		writeString(view, offset, string) {
			for (let i = 0; i < string.length; i += 1) {
				view.setUint8(offset + i, string.charCodeAt(i));
			}
		},
		floatTo32BitPCM(output, input) {
			const oinput = new Int32Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 4) {
				output.setInt32(newoffset, oinput[i], true);
			}
		},
		floatTo16BitPCM(output, input) {
			const oinput = new Int16Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 2) {
				output.setInt16(newoffset, oinput[i], true);
			}
		},
		floatTo8BitPCM(output, input) {
			const oinput = new Int8Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 1) {
				output.setInt8(newoffset, oinput[i], true);
			}
    	},

	},
    beforeDestroy() {
        if(this.intelligentSchedulTimer) {
			clearInterval(this.intelligentSchedulTimer);
		}
    },
}
</script>

<style scoped>
.voiceAppContent_4_btns{
    background-color: #112251;
    border: 1px solid #00FCF9;
    color: #00FFFF;
    border-radius: 5px;
    height: 3.5vh;
    font-size: 17px;
    margin: 0px 2vw 10px;
    width: 25%;
    font-size: 15px;
    cursor: pointer;
}
.voiceAppContent_4_btns:active{
    background:linear-gradient( to top,#007EFF,#30CFBE);
    border: 0px solid #00FCF9;
    color: white;
    border-radius: 5px;
    height: 3.5vh;
    font-size: 17px;
    margin: 0px 2vw 10px;
    width: 25%;
    font-size: 15px;
    cursor: pointer;
}
.intelligentSchScrView{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.intelligentSchScrView_leftView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.intelligentSchScrView_rightView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.intelligentSchScrView_leftView1{
    width: 100%;
    height: 64vh;
    /* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%; */
    background-color: rgba(32,42,67,0.95);
    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%; */
    background-color: rgba(32,42,67,0.95);
    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%; */
    background-color: rgba(32,42,67,0.95);
    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: #274088;
	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;
    background-color: #020C39;
}
.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: #A6F6F9;
	font-size: 16px;
    font-family: 'SourceHanSansCN-Regular';
}
.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;
    background-color: #020C39;
}
.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: #A6F6F9;
	font-size: 16px;
	display: flex;
	justify-content: space-between;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.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;
}
.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: 21.5vh;
}
.intelligentSchScrView_rightView_content_1_bottom_rolling{
    text-align: center;
	height: 21.5vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
    display: none;
}
#carsAreaDistributionView{
    width: 19vw;
    height: 27.5vh;
}
#carsProportionView{
    width: 19vw;
    height: 27.5vh;
}
.videoListView{
    position: absolute;
    bottom: 28vh;
    left: 20vw;
    height: 47vh;
    width: 35vh;
    z-index: 3;
    background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
	background-size:100% 100%;
    padding: 10px 10px 0px;
    box-sizing: border-box;
}
.videoListView_title{
    color: white;
    font-size: 18px;
}
.videoListView_content{
    width: 100%;
    height: 30vh;
    border: 1px solid rgb(24,144,255);
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    background-color: rgba(32,42,67,0.95);
    
}
.videoListView_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.videoListView_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
	);
}
.videoListView_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background   : #ededed;
	border-radius: 10px;
}
.videoListView_content>div{
    margin-bottom: 10px;
    width: 49%;
    color: rgb(24,228,240);
    text-align: center;
}
.peopleScheAssembly{
    position: absolute;
    bottom: 10vh;
    left: 20vw;
    height: 50vh;
    width: 40vh;
    z-index: 3;
    background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
	background-size:100% 100%;
    padding: 10px 10px 0px;
    box-sizing: border-box;
}
.peopleScheAssemblyBtns{
    position: absolute;
    bottom: 5px;
    padding: 0 15% 10px;
    box-sizing: border-box;
}
</style>


<style>
.des1 .el-form-item__label{
    color: white;
    font-size: 15px;
}
.intelligentSchScrView .el-input--small .el-input__inner{
    background-color: #021445;
    border: 2px solid #01f5fe;
    color: #01f5fe;
}
.intelligentSchScrView .el-input--small .el-input__inner{
    background-color: #021445;
    border: 2px solid #01f5fe;
    color: #01f5fe;
}
.intelligentSchScrView .el-input--small .el-input__inner::placeholder {
  color:  #31E5F5;
}
.intelligentSchScrView .el-select .el-input .el-select__caret{
    color: #01f5fe;
}
.intelligentSchScrView .el-textarea__inner{
    background-color: #021445;
    color: #01f5fe;
    border: 2px solid #01f5fe;
}
.el-select-dropdown__list{
    background-color: #021445 !important;
    border: 1px solid #01f5fe;
    color:  #31E5F5;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: #021445 !important;
    color:  #31E5F5;
}
.el-select-dropdown__item{
    background-color: #021445 !important;
    color:  #31E5F5;
    font-size: 16px;
}
.el-cascader-panel{
    background-color: #021445 !important;
    color:  #31E5F5;
    font-size: 16px;
}
.el-cascader-menu{
    border: 0px;
}
.el-cascader-menu__list{
    color:  #31E5F5;
    border: 1px solid #01f5fe;
}
.el-cascader-node:not(.is-disabled):hover, .el-cascader-node:not(.is-disabled):focus{
    background-color: #021445 !important;
}
</style>