<template>
  <div class="mianViews">
    <div v-show="audioNotice" class="roadblockStyle" style="bottom:14vh;left:15vw;width: 26vw" @click="audioNoticeStop()">
      <img src="../../assets/images/truckTuPian/jjtz.png" height="15"/>
      <span style="padding:5px">收到<span style="color:red">紧急通知</span>，请点击确认!</span>
    </div>
    <div v-show="isLastOrder" class="roadblockStyle" style="font-size:14px;bottom:20vh;left:15vw;width:28vw;display:flex;justify-content:center;align-items:center;" @click="nowLogout()">
      <img src="../../assets/images/truckTuPian/xbicon.png" height="32"/>
      <span style="padding:5px">可以<span style="color:red">下班</span>了，卸车完成后请<span style="color:red;text-decoration:underline">退出登录</span>!</span>
    </div>
    <div class="topViews">
      <div class="topTitle">{{ systemTitle }}</div>
      <div class="topcontent">
        <div style="margin-right: 20px">{{ currentTime }}</div>
        <ElectricQuantity
            class="ElectricQuantityStyle"
            :proIsCharge="IsCharge"
            :proQuantity="batteryEnegy"
        ></ElectricQuantity>
        <span>{{ batteryEnegy }}%</span>
        <!-- <div style="margin-right: 20px;cursor: pointer;">
					<img src="../../assets/images/truckTuPian/moon1.png" width="15">
					<span>切换夜晚模式</span>
				</div>
				<img src="../../assets/images/truckTuPian/dianchi1.png" width="30" height="17" style="margin-right: 20px;">
				<img src="../../assets/images/truckTuPian/xinhao2.png" width="25" height="20" style="margin-right: 20px;">
				<img src="../../assets/images/truckTuPian/xinhao1.png" width="20" height="20"> -->
      </div>
    </div>
    <div class="centerViews">
      <div :class="selectFunction == 1 ? 'IntelligentDis1' : 'IntelligentDis2'" @click="safetyCheck()">
        <div :class="selectFunction == 1 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          安全检查
        </div>
      </div>
      <div :class="selectFunction == 2 ? 'voiceAp2' : 'voiceAp1'" @click="voiceApFn()">
        <div :class="selectFunction == 2 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          语音申请
        </div>
      </div>
      <div :class="leftBtnDisable && selectFunction == 3 ? 'failureDe2' : 'failureDe1'" @click="leftBtnDisable && failureDeFn()">
        <div :class="selectFunction == 3 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          故障申报
        </div>
      </div>
      <div :class="leftBtnDisable && selectFunction == 4? 'performanceSt2': 'performanceSt1'" @click="leftBtnDisable && performanceStFn()">
        <div :class="selectFunction == 4 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          绩效统计
        </div>
      </div>
      <div :class="leftBtnDisable && selectFunction == 5 ? 'carIn2' : 'carIn1'" @click="leftBtnDisable && carInFn()">
        <div :class="selectFunction == 5 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          车辆信息
        </div>
      </div>
      <div :class="leftBtnDisable && selectFunction == 6 ? 'personalCe2' : 'personalCe1'" @click="leftBtnDisable && personalCeFn()">
        <div :class="selectFunction == 6 ? 'centerViewsTitle1' : 'centerViewsTitle2'">
          个人中心
        </div>
      </div>
    </div>
    <div class="roadblockStyle" @click="failureDe1Fn()">
      <img src="../../assets/images/truckTuPian/luzhang.png" height="15"/>
      <span> 路障申报</span>
    </div>
    <div class="dispatchCenterStyle" @click="voiceApFn('右下角')">
      <img src="../../assets/images/truckTuPian/diaoduzhongxin.png" height="17"/>
      <span> 调度中心</span>
    </div>
    <startOrderReceiving ref="startOrderReceivingMethod"/>
    <voiceApplication ref="voiceApplicationMethod" v-show="selectFunction == 2"/>
    <securityReport ref="securityReportMethod" v-show="selectFunction == 1"/>
    <failureDeclaration ref="failureDeclarationMethod" v-show="selectFunction == 3"/>
    <performanceStatistics ref="performanceStatisticsMethod" v-show="selectFunction == 4"/>
    <carInformation ref="carInformationMethod" v-show="selectFunction == 5"/>
    <personalCenter ref="personalCenterMethod" v-show="selectFunction == 6"/>
    <smallWindow ref="smallWindowMethod" v-show="selectFunction == 7"/>
    <!-- 语音播放 -->
    <audio id="audioIndex" controls currentTime autoplay :src="indexSrcUrl" style="display:none;"></audio>
    <!-- 语音提示区域 -->
    <div class="audioTishiView" v-if="audioTishiViewShow">
      <div class="audioTishiView_son1">
        <div v-for="(item, index) in audioData" :key="index" class="indexSituation_fa1">
          <img :src="indexSituationPic1" height="20" @click="indexListeningFn(item)"/>
          <div style="display: inline-block" @click="indexListeningFn(item)">来自{{ item.fromUserId }}</div>
          <span class="el-icon-delete" @click="indexListeningDelFn(index)"></span>
        </div>
      </div>
    </div>
    <!-- 地图区域 -->
    <div id="map" class="mapcontainer" style="width:100%;height:100%">
<!--      <mars3dViewerMap-->
<!--          :url="configUrl"-->
<!--          @onload="onMapload"-->
<!--          ref="mars3dViewerMapMethod"-->
<!--      />-->
    </div>
    <!-- 左下角logo -->
<!--    <img src="../../assets/images/truckTuPian/maplogo1.jpg" class="mapLogo1"/>-->
    <!-- 铲车待装车辆列表 -->
    <div class="waitingtrucksView" v-if="kcListView && carclass == '铲车'">
      <div class="waitingtrucksView_title">待装卡车列表</div>
      <div class="waitingtrucksView_content">
        <div v-for="(item, index) in daizhangCar" :key="index">
          <div>{{ item.kc }}</div>
          <button v-show="item.status===1" class="daizhangCarBtn1" @click="wanchengzhuangcheFn(item)">
            邀请装车
          </button>
          <span v-show="item.status===2" style="color:white;opacity:40%">正在装车...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  httpGet,
  httpPostForJson,
  putForJson,
  httpDelForJson,
} from "@/common/httpBean.js";
import {
  changeJinJiReadStatus,
  posAreaInformationPoint,
  posAreaInformation,
  posGetAllOnlineCarPosition,
  safetySubmitCheck,
  personalCenterInforQuery,
  vehicleInformationQuery,
  getAllLoadableKC,
  vehicleInformationUpdate,
  dingDanBiaoCaoZuo,
  chooseKCZC,
  getalarmRealQuery,
  dispatchFinishQuery,
  carRealTimeLocationQuery2,
  failureDeclarationAdd,
  apiCpointQuery,
  apiPathmapNavigationQuery,
  faultDayAdd,
  faultMonthAdd,
  faultYearAdd,
  crossingFence,
  navigationRoute,
} from "@/axios/api.js";
import axios from "axios";
import startOrderReceiving from "./components/startOrderReceiving/index.vue"; //接受派单
import voiceApplication from "./components/voiceApplication/index.vue"; //语音申请
import securityReport from "./components/securityReport/index.vue"; //安检报告
import failureDeclaration from "./components/failureDeclaration/index.vue"; //故障申报
import performanceStatistics from "./components/performanceStatistics/index.vue"; //绩效统计
import carInformation from "./components/carInformation/index.vue"; //车辆信息
import personalCenter from "./components/personalCenter/index.vue"; //个人中心
import smallWindow from "./components/smallWindow/index.vue"; //小窗口车辆信息
import mars3dViewerMap from "../../components/mars3d/Map.vue"; //地图
import ElectricQuantity from "../../components/electricity/index.vue"; //电池组件
import indexSituationPic1 from "../../assets/images/truckTuPian/tonghuazhong1.png";
import yuyintishi from "@/assets/yuyintishi.mp3";
import confineIn from "@/assets/confineIn.mp3";
import confineOff from "@/assets/confineOff.mp3";
import * as mars3d from "mars3d";
import mapMarker from "@/assets/mapMarker.png";
import tufangche from "@/assets/tufangche.png";
import wajueji from "@/assets/wajueji.png";
import zhuangcheIcon from "@/assets/images/truckTuPian/zhuangchedian1.png";
import xiecheIcon from "@/assets/images/truckTuPian/xiechedian1.png";
import luzhangtubiao from "@/assets/images/truckTuPian/luzhang.png";
import pattern from "@/assets/pattern.png";

import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';
import { config as appConfig } from '@/config.js';

export default {
  components: {
    startOrderReceiving,
    voiceApplication,
    securityReport,
    failureDeclaration,
    performanceStatistics,
    carInformation,
    personalCenter,
    smallWindow,
    mars3dViewerMap,
    ElectricQuantity,
  },
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      intervalWancheng: null,
      //地图图片
      configUrl: basePathUrl + "config/config.json",
      notifyPromise: Promise.resolve(),
      systemTitle: "卡车调度系统卡车终端",
      orderReceiving: false,
      personalName: "",
      zongTimer1: null,
      zongTimer2: null,
      currentTime: "",
      selectFunction: 0,
      carnumber: "",
      equipmentName: "",
      userName1: "",
      carclass: "",
      daizhangCar: [],
      leftBtnDisable: true, //左侧选项按钮是否可用
      //电量显示
      IsCharge: true,
      batteryEnegy: 0,
      //控制点数据
      controlPointData: [],
      //暂存经纬度
      navigatorXY: {
        x: 0,
        y: 0,
      },
      //摄像头会话号
      jsession: "",
      //摄像头车辆设备号
      devices: "",
      //语音组件播放
      indexSrcUrl: "",
      //语音数据
      audioData: [],
      //语音图片
      indexSituationPic1: indexSituationPic1,
      //语音组件显示
      audioTishiViewShow: false,
      //路障申报数量
      roadblockNum: 0,
      //websocket对象
      websocketIndex: null,
      //判断是否连接天线的信号
      antennaConnectorBoolean: false,
      finishNum: null,
      geoTrailInfo: [],
      zongTimer3: null,
      submitReportFormId: null,
      mapDom: null,
      mapCenter: [122.04700, 37.4890],
      posTimer: null,
      currArea: null,
      optFlag: false,
      audioNotice: null, //紧急通知
      areaNum: 0,
      areaTimer: null,
      kcListView: false,
      localName: null,
      trailLine: null,//导航开启后的行驶轨迹
      isLastOrder: false,
    };
  },
  mounted() {
    let that = this;
    //that.initWebSocketIndex();
    this.loadData();
    this.setNowTimes();
    this.zongTimer1 = setInterval(() => {
      this.setNowTimes();
    }, 1000);
    this.zongTimer2 = setInterval(() => {
      if (this.carnumber == "") {
        return;
      }
      //判断车辆类型
      if (this.carclass == "铲车") {
        this.loadData1();
      }
      //获取报警记录
      httpGet(vehicleInformationQuery, {number: this.carnumber}).then(
          (res) => {
            if (res.code == 200) {
              if (res.data.totalElements == 0) {
                return;
              } else {
                // console.log(res, "获取报警记录");
                //获取该车报警记录接口
                httpGet(getalarmRealQuery, {
                  name: res.data.content[0].equipmentName,
                }).then((res1) => {
                  if (res1.code == 200) {
                    res1.data.forEach((item, index) => {
                      this.notifyPromise = this.notifyPromise
                          .then(this.$nextTick)
                          .then(() => {
                            if (this.carclass == "铲车" && item.type != 3) {
                              this.$notify({
                                title:
                                    (item.type == 1
                                        ? "限入"
                                        : item.type == 2
                                            ? "限出"
                                            : item.type == 4
                                                ? "防碰撞"
                                                : "") +
                                    (item.areaName == undefined
                                        ? ""
                                        : item.areaName) +
                                    "报警",
                                type: "warning",
                                duration: 5000,
                                dangerouslyUseHTMLString: true,
                              });
                              this.audioBjFn(item.type, item.areaName);
                            } else if (this.carclass != "铲车") {
                              this.$notify({
                                title:
                                    (item.type == 1
                                        ? "限入"
                                        : item.type == 2
                                            ? "限出"
                                            : item.type == 3 && this.carclass != "铲车"
                                                ? "无故停车"
                                                : item.type == 4
                                                    ? "防碰撞"
                                                    : "") +
                                    (item.areaName == undefined
                                        ? ""
                                        : item.areaName) +
                                    "报警",
                                type: "warning",
                                duration: 5000,
                                dangerouslyUseHTMLString: true,
                              });
                              this.audioBjFn(item.type, item.areaName);
                            }
                          });
                    });
                  }
                });
              }
            }
          }
      );
    }, 10000);
    this.$nextTick(() => {
      this.initMapTalk();
    });
  },
  methods: {
    initMapTalk() {
      this.mapDom = new maptalks.Map("map", {
        center: this.mapCenter,
        maxZoom: 20,
        minZoom: 15,
        zoom: 18,
        pitch: 25,
        // devicePixelRatio: 2,
        renderer: 'canvas',
        dragRotate: false,
        dragPitch: false,
        touchRotate: false,
        touchPitch: false,
        attribution: false,
        baseLayer: new maptalks.TileLayer('baseTitle', {
          urlTemplate: `http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=de0dc270a51aaca3dd4e64d4f8c81ff6`,
          subdomains: ['1', '2', '3', '4'],
          cssFilter: 'sepia(75%) invert(90%)',
        }),
        layers: [
          new maptalks.ImageLayer('images',
              [
                {
                  url: appConfig.BASE_URL+'/avatar/test0325.png',
                  extent: [122.01927668762207031, 37.46949039069553, 122.04700, 37.4890],
                  renderer: 'canvas',
                  opacity: 1,
                }
              ]),
          new maptalks.VectorLayer("regionLayer", {
            enableAltitude: false,
          }),
          new maptalks.VectorLayer("siteLayer", {
            enableAltitude: false,
          }),
          new maptalks.VectorLayer("roadblockLayer", {
            enableAltitude: false,
          }),
          new maptalks.VectorLayer("markerLayer", {
            enableAltitude: false,
          }),
          new maptalks.VectorLayer("navigationLayer", {
            enableAltitude: false,
          }),
        ]
      });
      this.mapDom.on('movestart', (e) => {
        this.optFlag = true;
        setTimeout(()=>{
          this.optFlag = false;
        },12000);
      });
      httpGet(posAreaInformationPoint).then((res) => {
        if (res.code == 200 ) {
          const layer = this.mapDom.getLayer('siteLayer');
          res.data.forEach((item) => {
            let marker = new maptalks.Marker(
                [item.lon, item.lat],
                {
                  properties: {
                    pointType: item.pointType,
                    pointName: item.pointName
                  },
                  symbol: {
                    'textName': '{pointName}',
                    'textSize': 8,
                    'textFaceName': 'monospace',
                    'textFill': '#34495e',
                    'textHaloFill': '#fff',
                    'textHaloRadius': 2,
                    'textWeight': 'bold',
                    'textDy': -28,
                    'markerFile': item.pointType === '装车点' ? zhuangcheIcon : xiecheIcon,
                    'markerWidth': 40,
                    'markerHeight': 40,
                    'markerDy': 10
                  },
                }
            );
            marker.addTo(layer);
          });
        }
      });
      setTimeout(()=>{
        this.getAreaInformation();
      },3000);
      this.getRoadblockInformation();
      this.areaTimer = setInterval(() => {
        this.getAreaInformation();
        this.getRoadblockInformation();
      }, 120000);
      this.getAllOnlineCarPosition();
      this.posTimer = setInterval(() => {
        this.getAllOnlineCarPosition();
      }, 2000);
      this.drawNavigation();
    },
    getRoadblockInformation() {
      httpGet(failureDeclarationAdd,{fault: "路障申报", createTime: this.currentTimeFn()}).then((res) => {
        if (res.code == 200 && res.data.totalElements !== this.roadblockNum) {
          if (res.data.totalElements !== this.roadblockNum) {
            this.roadblockNum = res.data.totalElements;
            const layer = this.mapDom.getLayer('roadblockLayer');
            layer.clear();
            res.data.content.forEach((item) => {
              let marker = new maptalks.Marker(
                  [item.lon, item.lat],
                  {
                    properties: {
                      id: item.id,
                      carcode: item.carcode,
                      createTime: item.createTime,
                      fault: item.fault,
                    },
                    symbol: {
                      'markerFile': luzhangtubiao,
                      'markerWidth': 23,
                      'markerHeight': 23,
                    },
                  }
              );
              marker.addTo(layer);
            });
          }
        }
      });
    },
    drawNavigation(point,carNumber) {
      const layer = this.mapDom.getLayer('navigationLayer');
      layer.clear();
      httpGet(navigationRoute, {
        point: point,
        carNumber: carNumber
      }).then((res) => {
        if (res.code == 200) {
          let line = new maptalks.LineString(res.data||[],
              {
                symbol: {
                  'linePatternFile': pattern,
                  'linePatternDx': 0,
                  'lineWidth': 16
                }
              }
          ).addTo(layer);
          line.animate({
            symbol: {
              linePatternDx: 16
            }
          }, {
            repeat: true
          });
          this.trailLine = new maptalks.LineString([],
              {
                symbol: {
                  'lineColor': '#1bbc9b',
                  'lineWidth': 3
                }
              }
          ).addTo(layer);
          if(res.msg){
            this.$notify({
              title: res.msg,
              type: "success",
              duration: 5000,
              dangerouslyUseHTMLString: true,
            });
          }
        }else{
          this.$notify({
            title: '网络异常',
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        }
      });
    },
    clearNavigation() {
      const layer = this.mapDom.getLayer('navigationLayer');
      layer.clear();
      if(this.trailLine){
        this.trailLine.remove();
        this.trailLine = null;
      }
    },
    getAreaInformation() {
      httpGet(posAreaInformation,{carNumber: this.carnumber}).then((res) => {
        if (res.code === 200  && res.data.length!==this.areaNum) {
          this.areaNum = res.data.length||0;
          const layer = this.mapDom.getLayer('regionLayer');
          layer.clear();
          res.data.forEach((item) => {
            const polygon = new maptalks.MultiPolygon([item.zuobiao], {
              properties: {
                name: item.name,
                areaClass: item.areaClass,
                areaLimitClass: item.areaLimitClass
              },
              symbol: {
                lineWidth: 3,
                lineColor: item.color,
                polygonFill: item.color,
                polygonOpacity: 0.25,
                textName: '{name}',
                textSize: 10,
                textFaceName: 'monospace',
                textFill: item.color,
                textHaloFill: '#000',
                textHaloRadius: 2,
                textWeight: 'bold',
              },
            });
            layer.addGeometry([polygon]);
          });
        }
      });
    },
    getAllOnlineCarPosition() {
      httpGet(posGetAllOnlineCarPosition).then((res) => {
        if (res.code == 200) {
          const layer = this.mapDom.getLayer('markerLayer');
          res.data.forEach((item) => {
            let isExist = false;
            layer.filter(['==', 'carName', item.carName]).forEach( (feature)=> {
              isExist = true;
              if (item.lon && item.lat) {
                feature.setCoordinates([item.lon, item.lat]);
                if(item.equipment === this.equipmentName) {
                  let area = null;
                  const point = new maptalks.Coordinate(item.lon, item.lat);
                  this.mapDom.getLayer('regionLayer').getGeometries().forEach((polygon) => {
                    if (polygon.containsPoint(point)) {
                      if(polygon.properties.areaLimitClass){
                        area = polygon.properties.name;
                      }else{
                        this.localName = polygon.properties.name;
                      }
                    }
                  })
                  if (this.currArea !== area) {
                    if(area){
                      this.crossingFence(area,1);
                    }
                    if(this.currArea){
                      this.crossingFence(this.currArea,0);
                    }
                    this.currArea = area;
                  }
                  if (!this.optFlag) {
                    this.mapDom.setCenter(point);
                  }
                }
              } else {
                feature.remove();
              }
            });
            if (!isExist && item.lon && item.lat) {
              let symbolArr = [];
              if (item.equipment === this.equipmentName) {
                symbolArr.push({
                  'markerFile': mapMarker,
                  'markerWidth': 54,
                  'markerHeight': 50,
                });
                symbolArr.push({
                  'textName': '{carName}\n（我的位置）',
                  'textSize': 14,
                  'textLineSpacing': 2,
                  'textFaceName': 'monospace',
                  'textFill': '#34495e',
                  'textHaloFill': '#fff',
                  'textHaloRadius': 2,
                  'textWeight': 'bold',
                  'textDy': 16,
                  'markerFile': item.carClass === '卡车' ? tufangche : wajueji,
                  'markerWidth': 30,
                  'markerHeight': 30,
                  'markerDy': -20
                })
              } else {
                symbolArr.push({
                  'textName': '{carName}',
                  'textSize': 14,
                  'textFaceName': 'monospace',
                  'textFill': '#34495e',
                  'textHaloFill': '#fff',
                  'textHaloRadius': 2,
                  'textWeight': 'bold',
                  'textDy': 5,
                  'markerFile': item.carClass === '卡车' ? tufangche : wajueji,
                  'markerWidth': 30,
                  'markerHeight': 30,
                  'markerDy': 0
                });
              }
              let marker = new maptalks.Marker(
                  [item.lon, item.lat],
                  {
                    properties: {
                      carClass: item.carClass,
                      carName: item.carName,
                      equipment: item.equipment,
                      fleet: item.fleet,
                    },
                    symbol: symbolArr,
                  }
              );
              marker.on('touchstart', (event) => {
                this.smallWinFn(item.carName);
              })
              marker.addTo(layer);
            }
          });
        }
      });
    },
    getSerialSendIndex(str) {
      window.SerialPort.send(str);
      this.getSerialReceiveIndex();
    },
    async getSerialReceiveIndex() {
      if(!window.SerialPort){
        return;
      }
      const cont = await window.SerialPort.receive();
      // this.$message({
      //   message: cont,
      //   type: "warning",
      // });
      if(cont){
        let strArr = cont.split(',');
        // let wgLat = this.dmsTransform(strArr[2]), wgLon = this.dmsTransform(strArr[4]), h = Number(strArr[9] || 0), p = Number(strArr[6]);
        // let point = this.wgs_gcj_encrypts(wgLat, wgLon);
        let wgLat = Number(strArr[0] || 0), wgLon = Number(strArr[1] || 0), h = Number(strArr[2] || 0), p = 1;
        if(wgLat>0 && wgLon>0 && p>0){ //取有效解
          this.getCarLoactionByGNSS(wgLat, wgLon, h, p);
        }
      }
    },
    crossingFence(areaName, inOut) {
      this.$message({
        message: inOut ? `注意：您已驶入${areaName}` : `注意：您已驶出${areaName}`,
        type: "info",
      });
      httpPostForJson(crossingFence, {
        areaName: areaName,
        inOut: inOut,
        driver: this.userName1,
        equipmentName: this.equipmentName
      }).then((res) => {
        console.log('crossingFence');
      });
    },
    //初始化weosocket
    initWebSocketIndex() {
      const wsuri1 = "ws://"+appConfig.ws+"/ws"; //连接地址，可加参数
      this.websocketIndex = new WebSocket(wsuri1);
      this.websocketIndex.onopen = this.websocketonopenIndex;
      this.websocketIndex.onerror = this.websocketonerrorIndex;
      this.websocketIndex.onmessage = this.websocketonmessageIndex;
      this.websocketIndex.onclose = this.websocketcloseIndex;
    },
    //WebSocket连接成功
    websocketonopenIndex() {
      console.log("9095WebSocket连接成功");
      this.websocketsendIndex("gpsclient");
    },
    //WebSocket连接错误
    websocketonerrorIndex(e) {
      console.log("9095WebSocket连接发生错误");
      //WebSocket重连
      this.initWebSocketIndex();
    },
    //WebSocket数据接收
    websocketonmessageIndex(e) {
      if (e == undefined) {
        return;
      } else {
        //console.log("indexWebsocketMessage",e.data);
        if (this.antennaConnectorBoolean) {
          //this.getSerialSendIndex(e.data)
        } else {
          this.antennaConnectorBoolean = true;
        }
      }
    },
    //WebSocket数据发送
    websocketsendIndex(agentData) {
      this.websocketIndex.send(agentData);
      this.websocketonmessageIndex();
    },
    //WebSocket关闭
    websocketcloseIndex(e) {
      console.log("connection closed !");
    },
    //WebSocket重连
    reconnectIndex() {
      var This = this;
      if (this.websocketIndex.readyState === 1) {
        // that.websock.readyState = 1 表示连接成功，可以立即发送信息
        This.websocketonmessageIndex();
      } else if (this.websocketIndex.readyState === 0) {
        // 表示正在连接，设置300ms后发送信息
        setTimeout(function () {
          This.websocketonmessageIndex();
        }, 300);
      } else {
        // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
        This.initWebSocketIndex();
        setTimeout(function () {
          This.websocketonmessageIndex();
        }, 500);
      }
    },

    loadData() {
      let href1 = window.location.href;
      let href2 = href1.split("?")[1];
      this.userName1 = decodeURI(href2);
      //获取司机人员信息
      httpGet(personalCenterInforQuery, {userName: this.userName1}).then(
          (res) => {
            if (res.code == 200 && res.data.totalElements != 0) {
              this.carnumber = res.data.content[0].car;
              this.personalName = res.data.content[0].name;
              //展示二维地图
              // this.$refs.mars3dViewerMapMethod.getCarInforFn(this.carnumber);
              //开启接受订单
              this.$refs.startOrderReceivingMethod.loadData(this.carnumber);
              //开启语音接收
              this.$refs.voiceApplicationMethod.loadData3(this.carnumber);
              //安检报告提交校验
              this.safetySubmitCheckFn();
              //获取车辆信息
              httpGet(vehicleInformationQuery, {number: this.carnumber}).then((res1) => {
                if (res1.code == 200) {
                  if (res1.data.totalElements == 0) {
                    return;
                  } else {
                    //修改车辆状态为在线
                    putForJson(vehicleInformationUpdate, {
                      id: res1.data.content[0].id,
                      odo: 3,
                    }).then((res2) => {
                    });
                    this.carclass = res1.data.content[0].carclass;
                    if (this.carclass == "铲车") {
                      this.loadData1();
                      this.systemTitle = "卡车调度系统铲车终端";
                    }
                    this.equipmentName = res1.data.content[0].equipmentName;
                    //执行获取位置
                    if (this.equipmentName) {
                      this.zongTimer3 = setInterval(() => {
                        // this.getCarLoaction2();
                        this.getSerialReceiveIndex();
                      }, 2000);
                      // this.getCarLoaction1();
                    }
                  }
                }
              });
            } else {
              this.$refs.voiceApplicationMethod.loadData3(this.carnumber);
            }
          }
      );
      //获取所有关键控制点信息
      httpGet(apiCpointQuery, {size: 9999}).then((res) => {
        if (res.code == 200) {
          this.controlPointData = res.data.content;
        }
      });
    },
    //安检报告提交校验
    safetySubmitCheckFn() {
      httpGet(safetySubmitCheck, {
        username: this.userName1,
      }).then((res) => {
        if (res.code == 200) {
          this.submitReportFormId = res.data;
          if(!this.submitReportFormId){
            this.safetyCheck();
          }
        }
      });
    },
    //获取待装卡车列表
    loadData1() {
      httpGet(getAllLoadableKC, {carNumber: this.carnumber}).then((res) => {
        if (res.code == 200) {
          this.daizhangCar = res.data || [];
        }
      });
    },
    //获取当前时间以及电量
    setNowTimes() {
      let that = this;
      //时间
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = String(
          myDate.getMonth() + 1 < 10
              ? "0" + (myDate.getMonth() + 1)
              : myDate.getMonth() + 1
      );
      let dd = String(
          myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
          myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
          myDate.getMinutes() < 10
              ? "0" + myDate.getMinutes()
              : myDate.getMinutes()
      );
      let sec = String(
          myDate.getSeconds() < 10
              ? "0" + myDate.getSeconds()
              : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.currentTime =
          yy + "-" + mm + "-" + dd + " " + hou + ":" + min + " " + week;
      //电量
      if(navigator.getBattery){
        navigator.getBattery().then(function (battery) {
          that.batteryEnegy = parseInt(battery.level * 100);
        });
      }
    },
    //获取该车位置并上传到后端
    getCarLoaction1() {
      let that = this;
      if (navigator.geolocation) {
        navigator.geolocation.watchPosition(
            //locationSuccess 获取成功的话
            function (position) {
              let LoaObj1 = {};
              let LoaObj1xy = {};
              //判断该车是否在行驶状态
              let drivingDistance = that.getDistanceIndex(
                  that.navigatorXY.y,
                  that.navigatorXY.x,
                  position.coords.latitude,
                  position.coords.longitude
              );
              if (drivingDistance <= 30 || drivingDistance >= 10000) {
                that.leftBtnDisable = true;
              } else {
                that.leftBtnDisable = false;
              }
              if (drivingDistance >= 3) {
                //地图视角跟随
                // that.$refs.mars3dViewerMapMethod.changeView1(
                //     position.coords.latitude,
                //     position.coords.longitude
                // );
              }
              LoaObj1xy.x = position.coords.longitude;
              LoaObj1xy.y = position.coords.latitude;
              that.navigatorXY.x = position.coords.longitude;
              that.navigatorXY.y = position.coords.latitude;
              LoaObj1.gndRate = "";
              LoaObj1.location = LoaObj1xy;
              LoaObj1.name = that.equipmentName;
              LoaObj1.time = new Date().getTime();
              let zuizhong1 = {};
              zuizhong1.name = that.equipmentName;
              zuizhong1.jsonObject = JSON.stringify(LoaObj1);
              //上传坐标
              httpPostForJson(
                  carRealTimeLocationQuery2,
                  JSON.stringify(LoaObj1)
              ).then((res2) => {
              });
            },
            //locationError  获取失败的话
            function (error) {
              var errorType = [
                "您拒绝共享位置信息",
                "获取不到位置信息",
                "获取位置信息超时",
              ];
              console.log(errorType[error.code - 1]);
            },
            {
              enableHighAccuracy: true,
              maximumAge: 2000,
            }
        );
      }
    },
    getCarLoaction2() {
      let that = this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
              let innerHTML='';
              for (var key in position) {
                innerHTML += key + '--'
              }
              that.$message({
                message: innerHTML,
                type: "warning",
              });
            },
            function (error) {
              var errorType = [
                "您拒绝共享位置信息",
                "获取不到位置信息",
                "获取位置信息超时",
              ];
              that.$message({
                message: errorType[error.code - 1],
                type: "warning",
              });
            },
            {
              enableHighAccuracy: true,
              maximumAge: 3000,
            }
        );
      }
    },
    getCarLoactionByGNSS(lat, lng, h, p) {
      let that = this;
      //上传过滤相对静止和明显漂移点
      let coord = {
        lng: lng,
        lat: lat
      };
      that.geoTrailInfo.push({
        coord: coord,
        mkt: that.transformMercator(coord),
        time: new Date().getTime()
      });
      if (that.geoTrailInfo.length >= 3) {
        let [p1, p2, p3] = that.geoTrailInfo;
        let forceUpload = new Date().getTime() - p1.time > 6000;
        let d12 = Math.sqrt(Math.pow(p1.mkt.x - p2.mkt.x, 2) + Math.pow(p1.mkt.y - p2.mkt.y, 2));
        let d23 = Math.sqrt(Math.pow(p3.mkt.x - p2.mkt.x, 2) + Math.pow(p3.mkt.y - p2.mkt.y, 2));
        let d13 = Math.sqrt(Math.pow(p3.mkt.x - p1.mkt.x, 2) + Math.pow(p3.mkt.y - p1.mkt.y, 2));
        //相对静止过滤
        if (d12 < 2) {
          that.geoTrailInfo = [p1, p3];
          if (forceUpload) {
            that.uploadCoord({
              x: p3.coord.lng,
              y: p3.coord.lat
            });
          }
          return;
        }
        if (d23 < 2) {
          that.geoTrailInfo = [p1, p2];
          if (forceUpload) {
            that.uploadCoord({
              x: p2.coord.lng,
              y: p2.coord.lat
            });
          }
          return;
        }
        //轨迹过滤
        if (d12 + d23 > d13 * 1.25) { //p2数据不在预计椭圆范围内不可靠，移除
          that.geoTrailInfo = [p1, p3];
          return;
        }
        that.geoTrailInfo = [p2, p3];
        that.navigatorXY.x = p2.coord.lng;
        that.navigatorXY.y = p2.coord.lat;

        that.uploadCoord({
          x: p2.coord.lng,
          y: p2.coord.lat
        });
      }
    },
    //坐标上传
    uploadCoord(coord) {
      let that = this;
      let LoaObj1 = {};
      LoaObj1.gndRate = "";
      LoaObj1.location = coord;
      LoaObj1.name = that.equipmentName;
      LoaObj1.time = new Date().getTime();
      //上传坐标
      httpPostForJson(carRealTimeLocationQuery2, JSON.stringify(LoaObj1)).then((res2) => {
        if(this.trailLine) {//如果开启导航画出行驶轨迹
          let arr = this.trailLine.getCoordinates();
          arr.push([coord.x,coord.y]);
          this.trailLine.setCoordinates(arr);
        }
      });
    },
    //安全检查
    safetyCheck(){
      if (this.selectFunction != 1) {
        this.$refs.securityReportMethod.loadData(this.carnumber, this.personalName ,this.submitReportFormId);
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        this.selectFunction = 1;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //接受派单
    IntelligentDisFn() {
      console.log(this.orderReceiving, "智能派单");

      if (this.orderReceiving) {
        this.orderReceiving = false;
        this.$refs.startOrderReceivingMethod.zhinengpaidanFn(false);
      } else {
        this.orderReceiving = true;
        this.$refs.startOrderReceivingMethod.zhinengpaidanFn(true);
      }
    },
    //语音申请
    voiceApFn(tishi) {
      if (this.selectFunction != 2) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        let byValue = this.carnumber;
        this.$refs.voiceApplicationMethod.loadData(byValue, tishi);
        this.selectFunction = 2;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //故障申报
    failureDeFn() {
      if (this.selectFunction != 3) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        this.$refs.failureDeclarationMethod.loadData(
            this.carnumber,
            this.personalName
        );
        this.selectFunction = 3;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //绩效统计
    performanceStFn() {
      if (this.selectFunction != 4) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        let byValue = this.personalName;
        this.$refs.performanceStatisticsMethod.loadData(
            byValue,
            this.carnumber,
            this.carclass
        );
        this.selectFunction = 4;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //车辆信息
    carInFn() {
      if (this.selectFunction != 5) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        let byValue = this.carnumber;
        this.$refs.carInformationMethod.loadData(byValue, this.carclass);
        this.selectFunction = 5;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //个人中心
    personalCeFn() {
      if (this.selectFunction != 6) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
        let byValue = this.personalName;
        this.$refs.personalCenterMethod.loadData(byValue, this.carnumber);
        this.selectFunction = 6;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //车辆详情小窗口
    smallWinFn(carNumber) {
      if (this.selectFunction != 7) {
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.loadData(carNumber);
        this.selectFunction = 7;
      } else {
        this.selectFunction = 0;
        this.$refs.securityReportMethod.viewClose();
        this.$refs.voiceApplicationMethod.voiceAppCloseFn();
        this.$refs.failureDeclarationMethod.failureDeCloseFn();
        this.$refs.performanceStatisticsMethod.achievementCloseFn();
        this.$refs.carInformationMethod.carInCloseFn();
        this.$refs.personalCenterMethod.personalCenCloseFn();
        this.$refs.smallWindowMethod.carInCloseFn();
      }
    },
    //完成装车
    wanchengzhuangcheFn(item) {
      item.status=2;
      putForJson(chooseKCZC,item).then((res) => {
        if(res.code===200){
          this.$notify({
            title: res.msg,
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        } else {
          this.$notify({
            title: '网络异常，请稍后再试',
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        }
      });
    },
    //智能调度是否完成
    finishDispatch(number1) {
      let that = this;
      let number = number1 || this.finishNum;
      //智能调度是否完成
      httpGet(dispatchFinishQuery, {carno: number}).then((res) => {
        if (res.code == 200) {
          clearInterval(that.intervalWancheng);
          console.log("智能调度是否完成");
          //删除
          httpDelForJson(dingDanBiaoCaoZuo, [id, this.carnumber, odd]).then(
              (res) => {
                this.loadData1();
              }
          );

          return;
        } else if (res.code == 401) {
          this.$message({
            message: "暂无卸区!",
            type: "warning",
          });
          that.intervalWancheng = setTimeout(() => {
            that.finishDispatch();
          }, 5000);
          return;
        } else {
          clearInterval(that.intervalWancheng);
          console.log(res, "智能调度是否完成");
          return;
        }
      });
    },
    //地图构造完成回调
    onMapload(map) {
      // 以下为演示代码

      // 创建entity图层
      const graphicLayer = new this.mars3d.layer.GraphicLayer();
      map.addLayer(graphicLayer);

      // 2.在layer上绑定监听事件
      graphicLayer.on(this.mars3d.EventType.click, function (event) {
        console.log("监听layer，单击了矢量对象", event);
      });
      graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
        console.log("监听layer，鼠标移入了矢量对象", event);
      });
      graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
        console.log("监听layer，鼠标移出了矢量对象", event);
      });
      // 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindPopup("我是layer上绑定的Popup", {
        anchor: [0, -10],
      });
      // 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindContextMenu([
        {
          text: "删除对象",
          iconCls: "fa fa-trash-o",
          callback: function (e) {
            const graphic = e.graphic;
            if (graphic) {
              graphicLayer.removeGraphic(graphic);
            }
          },
        },
      ]);
    },
    //右下角的路障申报
    failureDe1Fn() {
      let that = this;
      httpGet(vehicleInformationQuery, {number: that.carnumber}).then(
          (res) => {
            if (res.code == 200) {
              if (
                  res.data.content[0].equipmentName == "" ||
                  !res.data.content[0].equipmentName
              ) {
                this.$notify({
                  title: "暂无车辆位置，无法提交路障申报！",
                  type: "error",
                  duration: 2500,
                });
              } else {
                httpGet(carRealTimeLocationQuery2, {
                  name: res.data.content[0].equipmentName,
                }).then((res1) => {
                  if (res1.data) {
                    let lat = res1.data.location.y;
                    let lon = res1.data.location.x;
                    httpPostForJson(failureDeclarationAdd, {
                      fault: "路障申报",
                      lat: lat,
                      lon: lon,
                      carcode: that.carnumber,
                    }).then((res2) => {
                      if (res2.code == 200) {
                        this.$notify({
                          title: "路障申报成功！",
                          type: "success",
                          duration: 2500,
                        });
                      } else {
                        this.$notify({
                          title: res2.head.message,
                          type: "error",
                          duration: 2500,
                        });
                      }
                    });
                    httpPostForJson(faultDayAdd, {
                      fault: "路障申报",
                      lat: lat,
                      lon: lon,
                      carcode: that.carnumber,
                    }).then((res) => {
                    });
                    httpPostForJson(faultMonthAdd, {
                      fault: "路障申报",
                      lat: lat,
                      lon: lon,
                      carcode: that.carnumber,
                    }).then((res) => {
                    });
                    httpPostForJson(faultYearAdd, {
                      fault: "路障申报",
                      lat: lat,
                      lon: lon,
                      carcode: that.carnumber,
                    }).then((res) => {
                    });
                  } else {
                    this.$notify({
                      title: "暂无车辆位置，无法提交路障申报！",
                      type: "error",
                      duration: 2500,
                    });
                  }
                });
              }
            }
          }
      );
    },
    //执行路径
    zhixinglujing(boo, carnumber, carDestination) {
      if (boo) {
        httpGet(apiPathmapNavigationQuery, {
          point: carDestination,
          equipmentName: this.equipmentName,
        }).then((res1) => {
          if (res1.code == 200) {
            let route1 = res1.data.split(";");
            let route2 = [];
            route1.forEach((item1, index1) => {
              this.controlPointData.forEach((item2, index2) => {
                if (item1 == item2.name) {
                  let obj1 = [];
                  obj1.push(parseFloat(item2.lon));
                  obj1.push(parseFloat(item2.lat));
                  obj1.push(500);
                  route2.push(obj1);
                }
              });
            });
            console.log(boo,route2,res1);
            // this.$refs.mars3dViewerMapMethod.addArrowGraphic3(boo, route2);
          }
        });
      } else {
        // this.$refs.mars3dViewerMapMethod.addArrowGraphic3(boo);
      }
    },
    //经纬度度分秒转换
    dmsTransform(str){
      let [a,b]=str.split('.');
      let m = a.slice(-2);
      let d = a.slice(0, -2);
      return Number(d) + Number(m + '.' + b) / 60;
    },
    //wgs84->gcj02
    wgs_gcj_encrypts(wgLat, wgLon) {
      var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      var pi = 3.14159265358979324;
      var a = 6378245.0;
      var ee = 0.00669342162296594323;
      var point = {};
      function transformLon(x, y) {
        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
        return ret;
      }
      function transformLat(x, y) {
        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
        return ret;
      }
      function outOfChina(lat, lon) {
        if (lon < 72.004 || lon > 137.8347)
          return true;
        if (lat < 0.8293 || lat > 55.8271)
          return true;
        return false;
      }
      if (outOfChina(wgLat, wgLon)) {
        point.lat = wgLat;
        point.lng = wgLon;
        return point;
      }
      var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
      var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
      var radLat = wgLat / 180.0 * pi;
      var magic = Math.sin(radLat);
      magic = 1 - ee * magic * magic;
      var sqrtMagic = Math.sqrt(magic);
      dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
      dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
      var lat = wgLat + dLat;
      var lon = wgLon + dLon;
      point.lat = lat;
      point.lon = lon;
      return point;
    },
    //计算三点坐标夹角
    findAngle(A, B, C) {
      var AB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
      var BC = Math.sqrt(Math.pow(B.x - C.x, 2) + Math.pow(B.y - C.y, 2));
      var AC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2));
      return Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB)) * (180 / Math.PI);
    },
    //经纬度转墨卡托
    transformMercator(poi) {
      var mercator = {};
      var earthRad = 6378137.0;
      mercator.x = poi.lng * Math.PI / 180 * earthRad;
      var a = poi.lat * Math.PI / 180;
      mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      return mercator;
    },
    //根据两个经纬度计算距离
    getDistanceIndex(lat1, lng1, lat2, lng2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
          2 *
          Math.asin(
              Math.sqrt(
                  Math.pow(Math.sin(a / 2), 2) +
                  Math.cos(radLat1) *
                  Math.cos(radLat2) *
                  Math.pow(Math.sin(b / 2), 2)
              )
          );
      s = s * 6378.137; // EARTH_RADIUS;
      s = (Math.round(s * 10000) / 10000) * 1000;
      return s;
    },
    //获取语音数据
    audioDataFn(arr) {
      this.audioData = arr;
      if (this.audioData.length == 0) {
        this.audioTishiViewShow = false;
      } else {
        this.audioTishiViewShow = true;
      }
    },
    //听语音
    indexListeningFn(item) {
      this.$refs.voiceApplicationMethod.selectSituationIndex(item);
    },
    //提示收到语音
    tishishoudaoyuyinFn() {
      this.indexSrcUrl = yuyintishi;
      let au = document.getElementById("audioIndex");
      au.currentTime = 0;
      au.play();
    },
    //提示报警语音
    audioBjFn(type, alarmArea) {
      if(type == 1){
        this.indexSrcUrl = confineIn;
        let au = document.getElementById("audioIndex");
        au.currentTime = 0;
        au.play();
        this.currArea = alarmArea;
      }else if(type==2){
        this.indexSrcUrl = confineOff;
        let au = document.getElementById("audioIndex");
        au.currentTime = 0;
        au.play();
      }
    },
    //返回语音url
    fanhuiAudioUrl(url, loopAgain) {
      let index = 0;
      let audio = document.createElement("audio");
      audio.currentTime = 0;
      audio.src = url;
      if (loopAgain) {
        audio.addEventListener('ended', function () {
          setTimeout(function () {
            if (index < loopAgain) {
              audio.play();
              index++
            }
          }, 1500);
        }, false);
      }
      audio.play();
    },
    //返回语音紧急通知
    audioNoticePlay(url) {
      this.indexSrcUrl = url;
      let audio = document.getElementById("audioIndex");
      audio.currentTime = 0;
      const againFn = (e) => {
        if (this.audioNotice) {
          setTimeout(function () {
            audio.play();
          }, 3000);
        } else {
          audio.removeEventListener('ended', againFn, false);
        }
      }
      audio.addEventListener('ended', againFn, false);
      audio.play();
      this.audioNotice = true;
    },
    audioNoticeStop() {
      putForJson(changeJinJiReadStatus, {
        carNumber: this.carnumber
      }).then((res) => {
        if(res.code===200){
          if (res.data) {
            this.audioNotice = false;
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        }else{
          this.$message({
            message: '网络异常请稍后再试',
            type: "warning",
          });
        }
      });
    },
    //删除语音
    indexListeningDelFn(index) {
      this.$refs.voiceApplicationMethod.selectDeleteSituation(index);
    },
    nowLogout(){
      this.$refs.personalCenterMethod.openLogOut();
    },
    //获取当前时间
    currentTimeFn() {
      var date = new Date();
      var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      //修改小时格式
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      //修改分钟格式
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      //修改秒格式
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      //获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
      let currentFormatDate = year + "-" + month + "-" + day;
      return currentFormatDate;
    },
  },
  beforeDestroy() {
    this.$refs.voiceApplicationMethod.xintiaoCloseFn();
    this.$refs.startOrderReceivingMethod.dingshiqiCloseFn();
    this.websocketcloseIndex();
    this.isLastOrder = false;
    if (this.zongTimer1) {
      clearInterval(this.zongTimer1);
      this.zongTimer1 = null;
    }
    if (this.zongTimer2) {
      clearInterval(this.zongTimer2);
      this.zongTimer2 = null;
    }
    if (this.posTimer) {
      clearInterval(this.posTimer);
      this.posTimer = null;
    }
    if (this.areaTimer) {
      clearInterval(this.areaTimer);
      this.areaTimer = null;
    }
    if (this.zongTimer3) {
      clearInterval(this.zongTimer3);
      this.zongTimer3 = null;
    }
  },
};
</script>

<style scope>
.map-container {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 901px) {
  .mapLogo1 {
    position: absolute;
    bottom: 1.5vh;
    left: 1.5vw;
    width: 10vw;
    height: 4.6vh;
    z-index: 1;
  }

  .indexSituation_fa1 {
    flex: 0 0 auto;
    color: #a6f6f9;
    font-size: 12px;
    width: 32%;
    margin: 0px 0.3vh 1vh 0px;
    height: 8vh;
    border: 1px solid rgb(24, 228, 240);
    border-radius: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    position: relative;
  }

  .indexSituation_fa1 span {
    font-size: 15px;
  }

  .audioTishiView {
    width: 85vw;
    height: 12vh;
    background-color: rgba(74, 87, 123, 0.8);
    position: absolute;
    bottom: 0vh;
    right: 0vw;
    z-index: 1;
    border-top-left-radius: 5px;
  }

  .audioTishiView_son1 {
    padding-left: 0.5vw;
    box-sizing: border-box;
    height: 12vh;
    width: 59%;
    display: flex;
    align-items: center;
    overflow-x: scroll;
  }

  .daizhangCarBtn1 {
    font-size: 13px;
    height: 8vh;
    width: 7vw;
    text-align: center;
    background-color: rgb(64, 158, 255);
    color: white;
    border: 0;
    border-radius: 5px;
  }

  .ElectricQuantityStyle {
    width: 75px;
    height: 9vh;
  }

  .mianViews {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .topViews {
    position: absolute;
    top: 0px;
    z-index: 1;
    width: 100vw;
    height: 6vh;
    background-color: rgb(29, 49, 81);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
  }

  .topTitle {
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: bold;
  }

  .topcontent {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .centerViews {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }

  .centerViewsTitle1 {
    margin-top: 10.5vh;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .centerViewsTitle2 {
    margin-top: 10.5vh;
    color: gainsboro;
  }

  .IntelligentDis1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/zhinengpaidan1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 6.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .IntelligentDis2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/zhinengpaidan2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 6.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .voiceAp1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/yuyinshenping1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 22vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .voiceAp2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/yuyinshenping2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 22vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .failureDe1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/guzhangshenbao1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 37.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .failureDe2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/guzhangshenbao2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 37.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .performanceSt1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/jixiao1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 53vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .performanceSt2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/jixiao2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 53vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .carIn1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/cheliangxinxi1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 68.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .carIn2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/cheliangxinxi2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 68.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .personalCe1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/gerenzhongxin1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 84vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .personalCe2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/gerenzhongxin2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 84vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .roadblockStyle {
    position: absolute;
    z-index: 3;
    right: 150px;
    bottom: 2vh;
    height: 8vh;
    line-height: 8vh;
    width: 15vw;
    font-size: 15px;
    text-align: center;
    color: rgb(254, 210, 5);
    background-color: rgb(26, 39, 83);
    border-radius: 5px;
    border: 1px solid lightskyblue;
    opacity: 0.9;
    cursor: pointer;
  }

  .dispatchCenterStyle {
    z-index: 3;
    position: absolute;
    right: 10px;
    bottom: 2vh;
    height: 8vh;
    line-height: 8vh;
    width: 15vw;
    font-size: 15px;
    text-align: center;
    color: rgb(14, 229, 226);
    background-color: rgb(26, 39, 83);
    border-radius: 5px;
    border: 1px solid lightskyblue;
    opacity: 0.9;
    cursor: pointer;
  }

  .smallWindowStyle {
    color: red;
    font-size: 50px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .waitingtrucksView {
    position: absolute;
    right: 0px;
    top: 8vh;
    width: 25vw;
    height: 80vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/juxingkaobei6_1.png");
    background-size: 100% 100%;
    z-index: 1;
    padding: 10px 10px 0px;
    box-sizing: border-box;
  }

  .waitingtrucksView_title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .waitingtrucksView_content {
    margin-top: 10px;
    height: 67vh;
    width: 100%;
    overflow-y: auto;
  }

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

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

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

  .waitingtrucksView_content > div {
    color: rgb(254, 210, 5);
    font-size: 14px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  .mapLogo1 {
    position: absolute;
    bottom: 1.5vh;
    left: 1.5vw;
    width: 10vw;
    height: 4.6vh;
    z-index: 1;
  }

  .indexSituation_fa1 {
    flex: 0 0 auto;
    color: #a6f6f9;
    font-size: 12px;
    width: 32%;
    margin: 0px 0.3vh 1vh 0px;
    height: 8vh;
    border: 1px solid rgb(24, 228, 240);
    border-radius: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    position: relative;
  }

  .indexSituation_fa1 span {
    font-size: 15px;
  }

  .audioTishiView {
    width: 85vw;
    height: 12vh;
    background-color: rgba(74, 87, 123, 0.8);
    position: absolute;
    bottom: 0vh;
    right: 0vw;
    z-index: 1;
    border-top-left-radius: 5px;
  }

  .audioTishiView_son1 {
    padding-left: 0.5vw;
    box-sizing: border-box;
    height: 12vh;
    width: 59%;
    display: flex;
    align-items: center;
    overflow-x: scroll;
  }

  .daizhangCarBtn1 {
    font-size: 16px;
    height: 6vh;
    width: 7vw;
    text-align: center;
    background-color: rgb(64, 158, 255);
    color: white;
    border: 0px;
    border-radius: 5px;
  }

  .ElectricQuantityStyle {
    width: 75px;
    height: 4.5vh;
  }

  .mapcontainer {
    height: 100vh;
    width: 100vw;
    top: 0;
    position: absolute;
    overflow: hidden;
  }

  .mianViews {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .topViews {
    position: absolute;
    top: 0px;
    z-index: 1;
    width: 100vw;
    height: 6vh;
    background-color: rgb(29, 49, 81);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
  }

  .topTitle {
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 27px;
    letter-spacing: 4px;
    font-weight: bold;
  }

  .topcontent {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .centerViews {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
  }

  .centerViewsTitle1 {
    margin-top: 10.5vh;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .centerViewsTitle2 {
    margin-top: 10.5vh;
    color: gainsboro;
  }

  .IntelligentDis1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/zhinengpaidan1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 6.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .IntelligentDis2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/zhinengpaidan2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 6.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .voiceAp1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/yuyinshenping1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 22vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .voiceAp2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/yuyinshenping2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 22vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .failureDe1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/guzhangshenbao1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 37.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .failureDe2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/guzhangshenbao2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 37.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .performanceSt1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/jixiao1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 53vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .performanceSt2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/jixiao2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 53vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .carIn1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/cheliangxinxi1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 68.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .carIn2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/cheliangxinxi2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 68.5vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .personalCe1 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/gerenzhongxin1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 84vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .personalCe2 {
    height: 15vh;
    width: 16vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/gerenzhongxin2.png");
    background-size: 100% 100%;
    position: absolute;
    top: 84vh;
    left: 0.8vw;
    cursor: pointer;
  }

  .roadblockStyle {
    position: absolute;
    z-index: 3;
    right: 150px;
    bottom: 2vh;
    height: 5vh;
    line-height: 5vh;
    width: 130px;
    font-size: 18px;
    text-align: center;
    color: rgb(254, 210, 5);
    background-color: rgb(26, 39, 83);
    border-radius: 5px;
    border: 1px solid lightskyblue;
    opacity: 0.9;
    cursor: pointer;
  }

  .dispatchCenterStyle {
    z-index: 3;
    position: absolute;
    right: 10px;
    bottom: 2vh;
    height: 5vh;
    line-height: 5vh;
    width: 130px;
    font-size: 18px;
    text-align: center;
    color: rgb(14, 229, 226);
    background-color: rgb(26, 39, 83);
    border-radius: 5px;
    border: 1px solid lightskyblue;
    opacity: 0.9;
    cursor: pointer;
  }

  .smallWindowStyle {
    color: red;
    font-size: 50px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .waitingtrucksView {
    position: absolute;
    right: 0px;
    top: 8vh;
    width: 25vw;
    height: 80vh;
    background: no-repeat center center url("~@/assets/images/truckTuPian/juxingkaobei6_1.png");
    background-size: 100% 100%;
    z-index: 1;
    padding: 10px 10px 0px;
    box-sizing: border-box;
  }

  .waitingtrucksView_title {
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    background-image: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .waitingtrucksView_content {
    margin-top: 10px;
    height: 70vh;
    width: 100%;
    overflow-y: auto;
  }

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

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

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

  .waitingtrucksView_content > div {
    color: rgb(254, 210, 5);
    font-size: 19px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>