<template>
  <div class="DPcomputer16Box">
    <!-- 人工调度 -->
    <div class="DPcomputer16Box_1">
      <div class="intelligentSchScrView_leftView_title">人工调度</div>
      <div class="intelligentSchScrView_leftView_content">
        <div class="voiceAppContent_2">
          <div class="voiceAppContent_2_title">采区分布</div>
          <div class="rolling">
            <div class="table-box">
              <dl>
                <dt>
                  <div style="width:10%"></div>
                  <div style="width:60%;text-align:left;">采区名称</div>
<!--                  <div style="width:20%;text-align:right;padding-right:20px;">距离</div>-->
                  <div style="width:30%;text-align:right;padding-right:10px;">生产状态</div>
                </dt>
              </dl>
            </div>
          </div>
          <div class="voiceAppContent_2_content" style="padding:0">
            <div class="rolling">
              <div class="table-box">
                <dl>
                  <dd v-for="(item,index) in peningAreaList" :key="index" :class="item.id===selectedPaid?'selected':''"
                      @click="selectedPeningArea(item)">
                    <div style="width:10%"><i v-if="item.id===selectedPaid" style="color:lightgray" class="el-icon-caret-right"></i></div>
                    <div style="width:60%;text-align:left;" :class="item.id===selectedPaid?'selected':''">
                      <div style="max-width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.name">{{ item.name }}</div></div>
<!--                    <div style="width:20%;text-align:right;" :class="item.id===selectedPaid?'selected':''">{{ item.id }} km</div>-->
                    <div style="width:30%;text-align:right;padding-right:5px;">
                      <span v-if="item.productionStatus===0" style="color:crimson">未开工</span>
                      <span v-if="item.productionStatus===1" style="color:mediumseagreen">采集中</span>
                      <span v-if="item.productionStatus===2" style="color:#a3a3a3">已完成</span>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        <div class="voiceAppContent_3">
          <div class="voiceAppContent_2_title">{{curPaItem.pointName}}</div>
          <div class="voiceAppContent_3_content">
            <div class="dataScrView_rightView_content_view1 guanhulanseditu">
<!--              <div class="paTitle">{{curPaItem.name}}</div>-->
              <div style="color:white;align-items:center;">
                <div style="color:#A6F6F9;font-size:20px;text-align:center;"><span
                  style="color:#06BEFA;">{{ curPaItem.targetTaskTotal }}</span> t
                </div>
                <div>今日指标</div>
              </div>
              <div id='liquidEchart1' class="dataScrView_rightView_content_view1_rate1"></div>
              <div style="color:white;align-items:center;">
                <div style="color:#A6F6F9;font-size:20px;text-align:center;"><span
                  style="color:#06BEFA;">{{ curPaItem.targetTaskCurrent }}</span> t
                </div>
                <div>已完成</div>
              </div>
            </div>
<!--            <div class="leftWorkerTag">采集车次：<span> {{curPaItem.frequent}} </span>趟</div>-->
<!--            <div class="rightWorkerTag">施工时长：<span> {{curPaItem.workTime}} </span>h</div>-->
            <div class="dataScrView_rightView_content_view1 guanhulanseditu" style="justify-content:space-around;">
              <div style="text-align:center;width:50px"><img src="../../../../assets/images/cutGraph/iconwj.png" width="44" height="32"></div>
              <div style="color:white;align-items:center;">
                <div style="color:#A6F6F9;font-size:12px;text-align:left;width:180px">
                  参与作业挖机：<span style="color:wheat;font-size:16px;">{{ wjNum }}</span> 台
                </div>
              </div>
              <div style="color:white;align-items:center;">
                <div class="editCarListBtn" @click="openCarListView('铲车')">分配</div>
              </div>
            </div>
            <div class="tbListBox" style="height:4vh">
              <div v-show="loading" style="color:#01f5fe;text-align:center;font-size:12px">
                查询中...
              </div>
              <div v-show="!loading && wjNum==='00'" style="color:#01f5fe;text-align:center;font-size:12px">
                暂未分配
              </div>
              <div v-show="!loading && wjNum!=='00'" class="rolling">
                <div class="table-box">
                  <dl>
                    <dd v-for="(item,index) in wjList" :key="index" :class="item.id===selectedCarid?'selected':''"
                        @click="selectedCar(item)">
                      <div style="width:10%"><i v-if="item.id===selectedCarid" style="color:lightgray" class="el-icon-caret-right"></i></div>
                      <div style="width:40%;text-align:left;" :class="item.id===selectedCarid?'selected':''">
                        <div style="max-width:150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.carNumber }}</div></div>
                      <div style="width:30%;text-align:center;" :class="item.id===selectedCarid?'selected':''">{{ item.driver }}</div>
                      <div style="width:20%;text-align:right;padding-right:5px;" title="点击通话" @click="openVoiceView('通话', item)">
                        <span v-if="item.online==0" style="color:#a3a3a3">离线 <i class="el-icon-phone"></i></span>
                        <span v-else style="color:mediumseagreen">在线 <i class="el-icon-phone-outline"></i></span>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="dataScrView_rightView_content_view1 guanhulanseditu" style="justify-content:space-around;">
              <div style="text-align:center;width:50px"><img src="../../../../assets/images/cutGraph/iconkc.png" width="32" height="32"></div>
              <div style="color:white;align-items:center;">
                <div style="color:#A6F6F9;font-size:12px;text-align:left;width:180px">
                  参与作业卡车：<span style="color:wheat;font-size:16px;">{{ kcNum }}</span> 辆
                </div>
              </div>
              <div style="color:white;align-items:center;">
                <div class="editCarListBtn" @click="openCarListView('卡车')">分配</div>
              </div>
            </div>
            <div class="tbListBox" style="height:15vh">
              <div v-show="loading" style="color:#01f5fe;text-align:center;font-size:12px">
                查询中...
              </div>
              <div v-show="!loading && kcNum==='00'" style="color:#01f5fe;text-align:center;font-size:12px">
                暂未分配
              </div>
              <div v-show="!loading && kcNum!=='00'" class="rolling">
                <div class="table-box">
                  <dl>
                    <dd v-for="(item,index) in kcList" :key="index" :class="item.id===selectedCarid?'selected':''" @click="selectedCar(item)">
                      <div style="width:10%"><i v-if="item.id===selectedCarid" style="color:lightgray" class="el-icon-caret-right"></i></div>
                      <div style="width:40%;text-align:left;" :class="item.id===selectedCarid?'selected':''">
                        <div style="max-width:150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.carNumber }}</div></div>
                      <div style="width:30%;text-align:center;" :class="item.id===selectedCarid?'selected':''">{{ item.driver }}</div>
                      <div style="width:20%;text-align:right;padding-right:5px;" title="点击通话" @click="openVoiceView('通话', item)">
                        <span v-if="item.online==0" style="color:#a3a3a3">离线 <i class="el-icon-phone"></i></span>
                        <span v-else style="color:mediumseagreen">在线 <i class="el-icon-phone-outline"></i></span>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="voiceAppContent_4">
              <button class="voiceAppContent_4_btns" @click="openVoiceView('广播')">广播</button>
              <button class="voiceAppContent_4_btns" @click="openVoiceView('紧急通知')">紧急通知</button>
              <button class="voiceAppContent_4_btns">下班</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 调度弹窗 -->
    <div class="peopleScheAssembly" v-if="peopleScheAssemblyShow">
      <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">车辆调度<span style="font-size:14px">（{{curPaItem.pointName}}）</span></div>
      <div class="rolling">
        <div class="table-box">
          <dl>
            <dt>
              <div style="width:5%"></div>
              <div style="width:25%;text-align:left;">车牌号</div>
              <div style="width:55%;text-align:center;padding-right:20px;">当前任务</div>
              <div style="width:15%;text-align:right;padding-right:10px;">状态</div>
            </dt>
          </dl>
        </div>
      </div>
      <div class="voiceAppContent_2_content" style="padding:0;height: 48vh">
        <div class="rolling">
          <div class="table-box">
            <dl>
              <dd v-for="(item,index) in carList" :key="index" :class="item.flag?'selected':''" @click="checkedCarByList(item)">
                <div style="width:5%" :class="item.flag?'selected':''"><i v-if="item.flag" style="color:lightgray" class="el-icon-check"></i></div>
                <div style="width:25%;text-align:left;" :class="item.flag?'selected':''">
                  {{item.carNumber}}
                </div>
                <div style="width:55%;" :class="item.flag?'selected':''">
                  <div v-if="item.startPoint && item.endPoint" style="display:flex;justify-content:space-evenly;color:whitesmoke">
                    <div style="width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right;" :title="item.startPoint">{{ item.startPoint }}</div>
                    <div style="padding:0 4px;"><i class="el-icon-sort" style="transform:rotate(90deg)"></i></div>
                    <div style="width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;" :title="item.endPoint">{{ item.endPoint }}</div>
                  </div>
                  <span v-else style="color:#747474">空闲中，等待调度...</span>
                </div>
                <div style="width:15%;text-align:right;padding-right:5px;" :class="item.flag?'selected':''">
                  <span v-if="item.onlineStatus=='0'" style="color:#a3a3a3">离线</span>
                  <span v-else style="color:mediumseagreen">在线</span>
                </div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="voiceAppContent_4">
        <button class="voiceAppContent_4_btns" @click="dispatchCars()">开始调度</button>
        <button class="voiceAppContent_4_btns" @click="closeCarListView()">关闭窗口</button>
      </div>
    </div>
    <!-- 录音弹窗 -->
    <div class="peopleScheAssembly" v-if="voiceViewShow">
      <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">车辆调度<span style="font-size:14px">（{{curPaItem.pointName}}）</span></div>
      <el-select v-show="actionType!=='通话'" v-model="selectCarFleet" placeholder="请选择车队" style="width:100%;margin:5px" @change="toSearchFn()">
        <el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:14px;"></el-option>
      </el-select>
      <div class="rolling">
        <div class="table-box">
          <dl>
            <dt>
              <div style="width:10%"></div>
              <div style="width:90%;text-align:center;padding-right:20px;">请选择作用范围</div>
            </dt>
          </dl>
        </div>
      </div>
      <div class="voiceAppContent_2_content" style="padding:0;height: 32vh">
        <div class="rolling">
          <div class="table-box">
            <dl>
              <dd v-for="(item,index) in carsInforData" :key="index" :class="item.selected?'selected':''" @click="checkedActionType(item)">
                <div style="width:10%;text-align:right;" :class="item.selected?'selected':''"><i v-if="item.selected" style="color:lightgray" class="el-icon-check"></i></div>
                <div style="width:90%;text-align:center;" :class="item.selected?'selected':''">
                  {{ item.number }}({{ item.odo == 0 ? '离线' : '在线'}})
                </div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="main" style="padding:5px 20px;">
        <div class="mainBox">
          <div class="btns" style="display:flex;padding-bottom:5px;justify-content:space-evenly;">
            <button class="voiceAppContent_4_btns" style="width:20%" @click="recStart()">录制</button>
            <button class="voiceAppContent_4_btns" style="width:20%" @click="recStop()">结束</button>
            <button class="voiceAppContent_4_btns" style="width:20%" @click="recPlayLast()">播放</button>
            <button class="voiceAppContent_4_btns" style="width:20%" @click="recUploadLast()">上传</button>
          </div>
        </div>
        <div class="mainBox">
          <div style="height:60px;width:300px;border:1px solid #18e4f0;box-sizing: border-box;display:inline-block;vertical-align:bottom" class="ctrlProcessWave"></div>
          <div style="height:12px;width:300px;color:white;display:inline-block;position:relative;vertical-align:bottom">
            <div class="ctrlProcessX" style="height:12px;background:#18e4f0;position:absolute;" :style="{width:powerLevel+'%'}"></div>
            <div class="ctrlProcessT" style="line-height:12px;position:relative;font-size:12px;text-align:right;">
              录音时长：{{ duration }} s </div>
          </div>
        </div>
        <div class="mainBox" style="display:none">
          <audio ref="LogAudioPlayer" style="width:100%"></audio>
        </div>
      </div>
      <div class="voiceAppContent_4">
        <button class="voiceAppContent_4_btns" @click="closeVoiceView()">关闭录音</button>
      </div>
    </div>
  </div>
</template>

<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图的组件
//加载必须要的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 {
      loading: false,
      selectCarFleet: null,
      peopleScheAssemblyShow: false,
      carClass: '',
      voiceViewShow: false,
      chartsLiquid: null,
      peningAreaList: [],
      selectedPaid: null,
      curPaItem:{
        pointName: '威海采点2',
        targetTaskTotal: 0,
        targetTaskCurrent: 0,
        frequent:103,
        workTime: 5,
        wjNum: 0,
        kcNum: 0,
      },
      selectedCarid: null,
      wjList:[],
      kcList:[],
      carList: [],
      carFleetData: [],
      carsInforData: [],
      //录音相关数据
      type: "mp3",
      bitRate: 16,
      sampleRate: 16000,
      rec: 0,
      duration: 0,
      powerLevel: 0,
      recOpenDialogShow: 0,
      logs: [],
      dialogTitle: '广播',
      toUserIds: '',
    }
  },
  computed: {
    wjNum(){
      let num = this.curPaItem.wjNum;
      let len = num.toString().length;
      while(len < 2) {
        num = "0" + num;
        len++;
      }
      return num;
    },
    kcNum(){
      let num = this.curPaItem.kcNum;
      let len = num.toString().length;
      while(len < 2) {
        num = "0" + num;
        len++;
      }
      return num;
    }
  },
  mounted() {
    this.loadData();
    this.$nextTick(() => {
      this.initWebSocket();
      //车队信息
      HttpReq.truckDispatching.carFleetQuery({size: 9999}).then((res) => {
        if (res.code == 200) {
          this.carFleetData = res.data.content;
          this.selectCarFleet = this.carFleetData[0].name
        }
      })
      this.heartbeatTimer = setInterval(() => {
        this.reconnect();
      }, 20000);
    })
  },
  methods: {
    toSearchFn(){
      this.$nextTick(() => {
        HttpReq.truckDispatching.carInformationQuery({
          road: this.selectCarFleet
        }).then((res) => {
          if (res.code == 200) {
            this.carsInforData = res.data.content.map(function(item) {
              item.selected = true;
              return item;
            });
          }
        })
      });
    },
    checkedActionType(item) {
      item.selected = !item.selected;
    },
    openVoiceView(type,carObj) {
      this.voiceViewShow = true;
      this.actionType = type;
      this.carsInforData = [];
      if(type==='通话'){
        this.carsInforData.push({
          number: carObj.carNumber,
          odo: carObj.online,
          selected: true,
        });
      }else{
        this.toSearchFn();
      }
      //开启录音
      this.recOpen();
    },
    closeVoiceView(){
      this.voiceViewShow=false;
      //结束录音
      this.recClose()
    },
    loadData() {
      this.$nextTick(() => {
        HttpReq.truckDispatching.ddManualScheduling().then((res) => {
          if (res.code == 200) {
            this.peningAreaList = res.data;
            this.selectedPeningArea(res.data[0])
          }
        })

      })
    },
    selectedPeningArea(item) {
      this.loading = true;
      this.selectedPaid = item.id;
      this.curPaItem.pointName = item.name;
      this.selectedCarid = null;
      this.wjList = [];
      this.kcList = [];
      this.curPaItem.wjNum = 0;
      this.curPaItem.kcNum = 0;
      this.curPaItem.targetTaskTotal = 0
      this.curPaItem.targetTaskCurrent =  0;
      HttpReq.truckDispatching.ddManualSchedulingDetailsById({id: item.id}).then((res) => {
        if (res.code == 200) {
          this.wjList = res.data.forkliftList;
          this.kcList = res.data.truckList;
          this.curPaItem.wjNum = this.wjList.length;
          this.curPaItem.kcNum = this.kcList.length;
          this.curPaItem.targetTaskTotal = Number(res.data.todayPlan);
          this.curPaItem.targetTaskCurrent =  Number(res.data.todayAlready);
          this.loading = false;
          this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
          // 把配置和数据放这里
          this.chartsLiquid.setOption({
            series: [{
              type: 'liquidFill',
              name: '采集中\n' + this.curPaItem.targetTaskCurrent / (this.curPaItem.targetTaskTotal||1) * 100 + '%',
              radius: '60px',
              data: [{
                name: 'score',
                direction: 'right',
                value: this.curPaItem.targetTaskCurrent / (this.curPaItem.targetTaskTotal||1),
                itemStyle: {
                  normal: {
                    color: '#34cfe9'
                  }
                }
              }],
              label: {
                normal: {
                  formatter: '{a}',
                  color: '#05ADFB',
                  insideColor: '#fff',
                  textStyle: {
                    fontSize: 14,
                  }
                }
              },
              backgroundStyle: {
                color: '#012861',
                borderWidth: "1.5", // 内边框
                borderColor: "rgb(6, 190, 250)"
              },
              color: [{
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 1,
                  color: ["rgb(6, 190, 250)"], // 0% 处的颜色
                }, {
                  offset: 0,
                  color: ["rgb(6, 190, 250)"], // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }],
              outline: {
                show: true,
                borderDistance: 0,
                itemStyle: {
                  borderColor: '#012861',
                  borderWidth: 5,
                  shadowBlur: 5,
                  shadowColor: 'rgb(6, 190, 250)'
                },
              }
            }]
          });
        }
      })
    },
    selectedCar(item) {
      this.selectedCarid = item.id;
    },
    checkedCarByList(item) {
      item.flag = !item.flag;
    },
    openCarListView(carClass) {
      this.peopleScheAssemblyShow = true;
      this.carList = [];
      this.carClass = carClass;
      HttpReq.truckDispatching.ddManualSchedulingFindCarsByArea({
        carClass: carClass,
        pointName: this.curPaItem.pointName
      }).then((res) => {
        if (res.code == 200) {
          this.carList = res.data;
        }
      })
    },
    dispatchCars(){
      let ids=[];
      this.carList.forEach((item)=>{
        if(item.flag){
          ids.push(item.id);
        }
      });
      HttpReq.truckDispatching.ddChangeCarsScheduling({
        carStatusIdList: ids,
        carClass: this.carClass,
        currentPoint: this.curPaItem.pointName
      }).then((res) => {
        if (res.code == 200) {
          this.$notify({
            title: res.msg,
            type: 'success',
            duration: 5000
          });
          this.closeCarListView();
          this.selectedPeningArea({id:this.selectedPaid,name:this.curPaItem.pointName});
        }else{
          this.$notify({
            title: '网络异常',
            type: 'error',
            duration: 5000
          });
        }
      })
    },
    closeCarListView() {
      this.peopleScheAssemblyShow = false;
    },
    //录音相关
    xintiaoCloseFn() {
      //页面销毁时关闭长连接
      this.websocketclose();
      //关闭录音
      this.recClose();
    },
    //取消发送语音
    quxiaoVideo() {
      this.dialogVisible = false;
      this.mengcengshow = false;
      this.tanchuCarListArray = [];
      this.selectCarRadioArray = [];
    },
    //初始化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) {
      if (e) {
        let obj1 = JSON.parse(e.data);
        let carNumberList = obj1.toUserId.split(';');
        carNumberList.pop();
        HttpReq.truckDispatching.recentNoticeAdd({
          noticeClass: obj1.fromUserId,
          flag: 1,
          videoContent: obj1.contentText,
          carNumberList: carNumberList,
        }).then((res) => {
        }).catch(function (error) {
        });
      }
    },
    //WebSocket数据发送
    websocketsend(agentData) {
      this.websocket.send(agentData);
    },
    //WebSocket关闭
    websocketclose(e) {
      //console.log("connection closed (" + e.code + ")");
      console.log("connection closed !");
    },
    //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/1000).toFixed(2);
          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.recOpen()
      }
      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
      });
    },
    recStop: function () {
      const This = this;
      if (!(this.rec && Recorder.IsOpen())) {
        This.reclog("未打开录音", 1);
        This.$notify({
          title: '未打开录音！',
          type: 'warning',
          duration: 2500
        });
        return;
      }
      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);
    },
    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();
    },
    recUploadLast: function () {
      const This = this;
      if (!this.recLogLast) {
        this.reclog("请先录音，然后停止后再上传", 1);
        This.$notify({
          title: '请先录音，然后停止后再上传！',
          type: 'warning',
          duration: 2500
        });
        return;
      }
      let toUserIds = [];
      This.carsInforData.forEach((item)=>{
        if(item.selected){
          toUserIds.push(item.number);
        }
      });
      if(!toUserIds.length){
        This.$notify({
          title: '请先选择通话对象！',
          type: 'warning',
          duration: 2500
        });
        return;
      }
      toUserIds.push('pcBigScreen');
      let blob = this.recLogLast.res.blob;
      this.blobToDataURI(blob);
      /***方式一：将blob文件转成base64纯文本编码 ***/
      var reader = new FileReader();
      reader.onloadend = function () {
        var postData = "";
        postData = This.resultBlob; //录音文件内容
        //发送语音数据
        if (This.websocket.readyState == 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
          This.websocketsend(`{"toUserId":"${toUserIds.join(';')}","contentText":"${postData}","fromUserId":"${This.actionType}"}`);
          This.$notify({
            title: '上传成功！',
            type: 'success',
            duration: 2500
          });
        } else if (This.websocket.readyState == 0) { // 表示正在连接，设置300ms后发送信息
          setTimeout(function () {
            This.websocketsend(`{"toUserId":"${toUserIds.join(';')}","contentText":"${postData}","fromUserId":"${This.actionType}"}`);
            This.$notify({
              title: '上传成功！',
              type: 'success',
              duration: 2500
            });
          }, 300);
        } else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
          This.initWebSocket();
          setTimeout(function () {
            This.websocketsend(`{"toUserId":"${toUserIds.join(';')}","contentText":"${postData}","fromUserId":"${This.actionType}"}`);
            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);
    },
    showDialog: function () {
      //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
      if (!/mobile/i.test(navigator.userAgent)) {
        return;//只在移动端开启没有权限请求的检测
      }
      this.recOpenDialogShow = 1;
    },
    dialogCancel: function () {
      clearTimeout(this.dialogInt);
      this.recOpenDialogShow = 0;
    },
    //blob流转base64编码
    blobToDataURI(blob) {
      let that = this;
      var reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = function () {
        that.resultBlob = reader.result;
      }
    },
    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;
    },
  },
  beforeDestroy() {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
    this.recClose();
    this.xintiaoCloseFn();
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.DPcomputer16Box {
  overflow: hidden;
  height: 64vh;
  position: relative;
}

.DPcomputer16Box_1 {
  width: 20vw;
  height: 64vh;
  background-color: rgba(32, 42, 67, 0.95);
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
}

.DPcomputer16Box .mengceng1 {
  width: 20vw;
  height: 64vh;
  background-color: black;
  opacity: 0.7;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 40;
}

.DPcomputer16Box .intelligentSchScrView_leftView_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;
}

.DPcomputer16Box .intelligentSchScrView_leftView_content {
  width: 100%;
}

.DPcomputer16Box .voiceAppContent_1 {
  display: flex;
  justify-content: space-around;
}

.DPcomputer16Box .voiceAppContent_1 > div {
  height: 40px;
  line-height: 40px;
  color: rgb(24, 228, 240);
  font-size: 16px;
  font-weight: 600;
}

.DPcomputer16Box .voiceAppContent_2 {
  width: 100%;
  height: 16vh;
  border: 2px solid rgb(24, 228, 240);
  border-radius: 10px;
}

.DPcomputer16Box .voiceAppContent_2_title {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #274088;
  height: 2vh;
  line-height: 2vh;
  color: rgb(24, 228, 240);
  display: flex;
  justify-content: space-around;
  font-size: 16px;
}

.DPcomputer16Box .voiceAppContent_2_content {
  height: 12vh;
  border-radius: 7px;
  width: 100%;
  overflow-y: auto;
  padding: 0px 10px;
  box-sizing: border-box;
  background-color: #020C39;
}

.DPcomputer16Box .voiceAppContent_2_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.DPcomputer16Box .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
  );
}

.DPcomputer16Box .voiceAppContent_2_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.DPcomputer16Box .voiceAppContent_3 {
  margin-top: 1vh;
  width: 100%;
  height: 42vh;
  border: 2px solid rgb(24, 228, 240);
  border-radius: 10px;
}

.DPcomputer16Box .voiceAppContent_3_content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 39vh;
  width: 100%;
  overflow-y: auto;
  padding: 0px 10px;
  box-sizing: border-box;
  background-color: #020C39;
}

.DPcomputer16Box .voiceAppContent_3_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.DPcomputer16Box .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
  );
}

.DPcomputer16Box .voiceAppContent_3_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.DPcomputer16Box .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;
}

.DPcomputer16Box .voiceAppContent_3_content_selectCar > div {
  height: 20px;
  line-height: 20px;
  font-size: 18px;
}

.DPcomputer16Box .el-checkbox__label {
  vertical-align: -3px;
}

.DPcomputer16Box .el-checkbox__label > div {
  display: inline-block;
  color: #A6F6F9;
  font-size: 16px;
  font-family: 'SourceHanSansCN-Regular';
}

.DPcomputer16Box .el-checkbox {
  display: block;
}

.DPcomputer16Box .el-checkbox__inner {
  width: 30px !important;
  height: 30px !important;
}

.DPcomputer16Box .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);
}

.DPcomputer16Box .voiceAppContent_4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-evenly;
}

.DPcomputer16Box .voiceAppContent_4_btns {
  background-color: #112251;
  border: 1px solid #00FCF9;
  color: #00FFFF;
  border-radius: 5px;
  height: 2.5vh;
  /*margin: 5px 2vw 3px;*/
  width: 25%;
  font-size: 15px;
  cursor: pointer;
}

.DPcomputer16Box .voiceAppContent_4_btns:active {
  background: linear-gradient(to top, #007EFF, #30CFBE);
  border: 1px solid #00FCF9;
  color: white;
}

.DPcomputer16Box .videoListView {
  position: absolute;
  bottom: 1vh;
  left: 1.1vw;
  height: 47vh;
  width: 18vw;
  z-index: 50;
  background: no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
  background-size: 100% 100%;
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.DPcomputer16Box .videoListView_title {
  color: white;
  font-size: 18px;
}

.DPcomputer16Box .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);

}

.DPcomputer16Box .videoListView_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.DPcomputer16Box .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
  );
}

.DPcomputer16Box .videoListView_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.DPcomputer16Box .videoListView_content > div {
  margin-bottom: 10px;
  width: 49%;
  color: rgb(24, 228, 240);
  text-align: center;
}

.DPcomputer16Box .peopleScheAssembly {
  position: absolute;
  bottom: 1vh;
  left: 0.7vw;
  height: 58vh;
  width: 18.5vw;
  z-index: 50;
  background: no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
  background-size: 100% 100%;
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.DPcomputer16Box .peopleScheAssemblyBtns {
  position: absolute;
  bottom: 5px;
  padding: 0 15% 10px;
  box-sizing: border-box;
}
</style>

<style>
.DPcomputer16Box .des1 .el-form-item__label {
  color: white;
  font-size: 15px;
}

.DPcomputer16Box .el-input--small .el-input__inner {
  background-color: #021445;
  border: 2px solid #01f5fe;
  color: #01f5fe;
}

.DPcomputer16Box .el-input--small .el-input__inner {
  background-color: #021445;
  border: 2px solid #01f5fe;
  color: #01f5fe;
}

.DPcomputer16Box .el-input--small .el-input__inner::placeholder {
  color: #31E5F5;
}

.DPcomputer16Box .el-select .el-input .el-select__caret {
  color: #01f5fe;
}

.DPcomputer16Box .el-textarea__inner {
  background-color: #021445;
  color: #01f5fe;
  border: 2px solid #01f5fe;
}

.DPcomputer16Box .rolling {
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
}

.DPcomputer16Box .rolling::-webkit-scrollbar {
  display: none;
}

.DPcomputer16Box dl {
  display: table;
  width: 100%;
}

.DPcomputer16Box dt {
  margin-top: 20px;
  display: table-row;
  background-color: #274088;
}

.DPcomputer16Box dt > div {
  display: table-cell;
  /*padding:7px 3px;*/
  font-size: 12px;
  font-weight: 400;
  color: rgb(24, 228, 240);
}

.DPcomputer16Box dd {
  display: table-row;
  cursor: pointer;
}

.DPcomputer16Box dd > div {
  display: table-cell;
  padding: 2px 3px;
  font-size: 14px;
  color: #A6F6F9;
}

.DPcomputer16Box .selected {
  color: wheat;
  background: rgba(100, 100, 100, 0.2);
}

.DPcomputer16Box .dataScrView_rightView_content_view1 {
  width: 100%;
  position: relative;
  margin-top: 2px;
  display: flex;
  align-items: center;
  font-weight: 200;
  font-size: 14px;
  justify-content: space-evenly;
}

.DPcomputer16Box .dataScrView_rightView_content_view1_rate1 {
  height: 80px;
  width: 80px;
}

.DPcomputer16Box .guanhulanseditu {
  background: no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png');
  background-size: 100% 54%;
}

.DPcomputer16Box .editCarListBtn {
  color: #A6F6F9;
  font-size: 16px;
  cursor: pointer;
  text-decoration: underline;
}
.DPcomputer16Box .editCarListBtn:hover{
  color: wheat;
  text-decoration: blink;
}

.DPcomputer16Box .paTitle {
  color: wheat;
  text-align: center;
  width: 90px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.DPcomputer16Box .leftWorkerTag {
  margin-top: 2px;
  padding: 0 10px;
  color: #A6F6F9;
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  left: 10px;
  width: 42%;
  text-align: left;
  border-bottom: 1px solid rgb(24, 228, 240);
  /* 文本超出 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.DPcomputer16Box .leftWorkerTag span{
  color: wheat;
  font-weight: 600;
}
.DPcomputer16Box .rightWorkerTag {
  margin-top: 2px;
  padding: 0 10px;
  color: #A6F6F9;
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  right: 10px;
  width: 39%;
  text-align: right;
  border-bottom: 1px solid rgb(24, 228, 240);
  /* 文本超出 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.DPcomputer16Box .rightWorkerTag span{
  color: wheat;
  font-weight: 600;
}
.DPcomputer16Box .tbListBox {
  width: 100%;
  overflow-y: auto;
}

.DPcomputer16Box .tbListBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.DPcomputer16Box .tbListBox::-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
  );
}

.DPcomputer16Box .tbListBox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
.el-cascader-node.is-selectable.in-active-path {
  color: #1890ff;
}

.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.selected{
  background-color: #021445 !important;
  color: #31E5F5;
  font-weight: 800;
}

.el-select-dropdown__item {
  padding: 0px 20px;
  box-sizing: border-box;
  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>
