<template>
  <div class="fullHeight overview">
    <div id="photosphere" class="photosphere"></div>
    <div class="navigation_wrap">
      <div
        class="navigation"
        :class="panoramaList.length >= 17 ? 'flex2' : 'flex'"
      >
        <div
          class="img_wrap"
          :class="checkedImgIndex == index ? 'checkedImg' : 'noCheckedImg'"
          v-for="(item, index) in panoramaList"
          :key="index"
          @click="checkedImgBtn(item, index)"
        >
          <img class="img" :src="fileUrl + item.imageUrl" />
        </div>
      </div>
    </div>

    <!-- 车辆监测弹框 -->
    <div class="carDialog pointDialog_l" v-show="showCarDialog">
      <i class="closeBtn el-icon-error" @click="showCarDialog = false"></i>
      <div class="pointDialogContent">
        <div class="fullHeight">
          <div class="top">
            <div class="dialogBlock">
              <div class="dialogBlockContent">
                <div class="blockTitle blockTitle2"><i></i>实时数据</div>
                <div class="leftTopInner">
                  <div class="realTimeInfo2 fullHeight">
                    <div class="dialogDataBox">
                      <p>
                        <span>{{ carRealTimeData.innum }}</span> 次
                      </p>
                      <p>今日进场车次</p>
                    </div>
                    <div class="dialogDataBox">
                      <p>
                        <span>{{ carRealTimeData.outnum }}</span> 次
                      </p>
                      <p>今日出场车次</p>
                    </div>
                    <div class="dialogDataBox">
                      <p>
                        <span>{{ carRealTimeData.whitenum }}</span> 次
                      </p>
                      <p>白名单车辆数</p>
                    </div>
                    <div class="dialogDataBox">
                      <p>
                        <span>{{ carRealTimeData.temporarynum }}</span> 次
                      </p>
                      <p>长期车辆数</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="dialogBlock">
              <div class="dialogBlockContent">
                <div class="blockTitle blockTitle2"><i></i>车种进出统计</div>
                <div class="chart"></div>
              </div>
            </div>
          </div>

          <div class="bottom">
            <div class="dialogBlock">
              <div class="dialogBlockContent">
                <div class="blockTitle blockTitle2"><i></i>进出记录</div>
                <table class="dialogTable">
                  <thead>
                    <tr>
                      <th>车牌号</th>
                      <th>进出时间</th>
                      <th>进出类型</th>
                      <th>进出位置</th>
                      <th>抓拍照片</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-if="carRecordOfAccess.length > 0"
                      v-for="(item, index) in carRecordOfAccess"
                      :key="index"
                    >
                      <td>{{ item.carNumber }}</td>
                      <td>{{ item.passTime }}</td>
                      <td>
                        {{
                          item.type == 0 ? "进入" : item.type == 1 ? "离开" : ""
                        }}
                      </td>
                      <td>{{ item.location }}</td>
                      <td>
                        <img
                          :src="fileUrl + item.imageUrl.substring(1)"
                          alt=""
                        />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 塔吊监测弹框 -->
    <div class="towerDialog pointDialog_l" v-show="showTowerDialog">
      <i class="closeBtn el-icon-error" @click="showTowerDialog = false"></i>
      <div class="pointDialogContent">
        <div class="dialogBlock left">
          <div class="dialogBlockContent">
            <div class="blockTitle blockTitle2"><i></i>驾驶员信息</div>
            <vue-scroll style="height: 270px; margin-bottom: 10px">
              <div
                class="driverInfo"
                v-if="towerBasicInfo.driverList"
                v-for="(item, index) in towerBasicInfo.driverList"
                :key="index"
              >
                <img
                  v-if="item.fieldAcquisitionUrl"
                  :src="fileUrl + item.fieldAcquisitionUrl"
                  alt=""
                />
                <img v-else src="@/assets/images/profile_photo.png" alt="" />
                <div>
                  <p>姓名：{{ item.workerName }}</p>
                  <p>年龄：{{ item.age }}</p>
                  <p>证件：{{ item.idCard }}</p>
                </div>
              </div>
            </vue-scroll>
            <div class="blockTitle blockTitle2"><i></i>设备信息</div>
            <div class="deviceInfo">
              <p>
                设备名称：{{
                  towerBasicInfo.tower ? towerBasicInfo.tower.devName : "--"
                }}
              </p>
              <p>
                设备编号：{{
                  towerBasicInfo.tower ? towerBasicInfo.tower.devSn : "--"
                }}
              </p>
              <p>
                设备备案号：{{
                  towerBasicInfo.tower ? towerBasicInfo.tower.registNo : "--"
                }}
              </p>
              <p>
                生产厂家：{{
                  towerBasicInfo.tower ? towerBasicInfo.tower.factoryName : "--"
                }}
              </p>
            </div>
          </div>
        </div>
        <div class="towerBox center2">
          <div class="tower_wrap">
            <img
              src="@/assets/images/dataBoard/towerImg.png"
              alt=""
              class="towerImg"
              ref="towerBG"
            />
            <img
              v-if="hideGoods"
              src="@/assets/images/towericon/1.png"
              :style="{
                top: 46 + 'px',
                left: coordData.coordX + 'px',
              }"
              alt=""
              class="rings"
            />
            <img
              v-if="hideGoods"
              src="@/assets/images/towericon/line.png"
              :style="{
                top: 50 + 'px',
                left: coordData.coordX + 8 + 'px',
                height: coordData.lineLength - 5 + 'px',
                width: 10 + 'px',
              }"
              alt=""
              class="line"
            />
            <img
              v-if="hideGoods"
              src="@/assets/images/towericon/hock.png"
              :style="{
                top: coordData.coordY + 'px',
                left: coordData.coordX - 5 + 'px',
              }"
              alt=""
              class="hock"
            />
          </div>
          <div class="allTowerTrack flex" ref="allTowerTrack">
            <div class="cycle cycle_border1">
              <!-- :style="{ top: item.mapY + 'px', left: item.mapX + 'px' }" -->
              <!-- @click="getDevData(item)" -->
              <!-- checkedIndex == item.id ? 'cycle_border1' : 'cycle_border2' -->
              <img src="@/assets/images/towericon/tower.png" />

              <!-- <p id="arrow" :style="{ transform: `rotate(${angle}deg)` }"> -->
              <p
                id="arrow"
                :style="{
                  transform: `rotate(${
                    towerCurrentInfo ? towerCurrentInfo.angle : ''
                  }deg)`,
                }"
              >
                <span></span><span></span>
              </p>
            </div>
          </div>
        </div>
        <div class="dialogBlock right">
          <div class="dialogBlockContent">
            <div class="blockTitle blockTitle2"><i></i>塔吊运行信息</div>
            <div class="realTimeInfo towerCrane">
              <!-- <p><span>安全吊重：</span> t</p> -->
              <p>
                <span>前臂长：</span>
                {{
                  towerBasicInfo.tower
                    ? towerBasicInfo.tower.forearmLength
                    : "--"
                }}
                m
              </p>
              <p>
                <span>塔吊高：</span>
                {{
                  towerBasicInfo.tower ? towerBasicInfo.tower.towerHeight : "--"
                }}
                m
              </p>
              <p>
                <span>载重：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.loading : "--" }} t
              </p>
              <p>
                <span>幅度：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.ranger : "--" }} m
              </p>
              <p>
                <span>高度：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.height : "--" }} m
              </p>
              <p>
                <span>角度：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.angle : "--" }} °
              </p>
              <p>
                <span>力矩比：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.torqueRatio : "--" }} %
              </p>
              <p>
                <span>载重比：</span>
                {{ towerCurrentInfo ? towerCurrentInfo.loadRatio : "--" }} %
              </p>
            </div>
            <div>
              <div style="margin-bottom: 15px">
                <el-select
                  class="selectVideoBox"
                  size="medium"
                  v-model="videoId"
                  placeholder="请选择视频"
                  @change="getVideo"
                  @visible-change="visibleChange"
                >
                  <el-option
                    v-for="item in towerBasicInfo.videoList"
                    :key="item.id"
                    :label="item.videoName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!-- <el-button
                      type="primary"
                      style="margin-left: 10px"
                      size="medium"
                      >查询</el-button
                    > -->
              </div>
              <videoModule
                v-if="selectList.length > 0"
                class="playVideoBox"
                style="width: 100%; height: 300px"
                :type="'1x1'"
                :value="selectList"
                :displayBottomMod="false"
                :winNumBer="1"
                :autoplay="false"
                :showCaptrue="false"
                :showControl="false"
                :showPlayback="false"
              ></videoModule>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 升降机监测弹框 -->
    <div class="liferDialog pointDialog_l" v-show="showLifterDialog">
      <i class="closeBtn el-icon-error" @click="showLifterDialog = false"></i>
      <div class="pointDialogContent">
        <div class="left fullHeight">
          <div class="dialogBlock leftTop">
            <div class="dialogBlockContent">
              <div class="blockTitle blockTitle2"><i></i>实时数据</div>
              <div class="leftTopInner">
                <div class="realTimeInfo2 fullHeight">
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.loading
                          ? lifterCurrentData.loading
                          : "--"
                      }}</span>
                      ug/m³
                    </p>
                    <p>重量</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.height
                          ? lifterCurrentData.height
                          : "--"
                      }}</span>
                      ug/m³
                    </p>
                    <p>高度</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.heightRatio
                          ? lifterCurrentData.heightRatio
                          : "--"
                      }}</span>
                      m/s
                    </p>
                    <!-- <p>速度</p> -->
                    <p>高度百分比</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.biasAngle
                          ? lifterCurrentData.biasAngle
                          : "--"
                      }}</span>
                    </p>
                    <p>倾角</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.biasRatio
                          ? lifterCurrentData.biasRatio
                          : "--"
                      }}</span>
                      %
                    </p>
                    <p>倾角百分比</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.runningState == 1
                          ? "上升"
                          : lifterCurrentData.runningState == 2
                          ? "下降"
                          : "停运"
                      }}</span>
                    </p>
                    <p>运行状态</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.peopleNumber
                          ? lifterCurrentData.peopleNumber
                          : "--"
                      }}</span>
                      人
                    </p>
                    <p>当前人数</p>
                  </div>
                  <div class="dialogDataBox">
                    <p>
                      <span>{{
                        lifterCurrentData.loadRatio
                          ? lifterCurrentData.loadRatio
                          : "--"
                      }}</span>
                      %
                    </p>
                    <p>重量百分比</p>
                  </div>
                </div>
                <div class="lifterRunBox fullHeight">
                  <img
                    src="@/assets/images/dataBoard/lifter-1.png"
                    ref="lifterHeight"
                    alt=""
                    style="width: 130px; height: 283px"
                  />
                  <img
                    src="@/assets/images/dataBoard/lifter-2.png"
                    alt=""
                    class="lifter2"
                    :style="{ bottom: showHeight + 'px' }"
                    style="width: 38px; height: auto"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="leftBottom">
            <div class="dialogBlock">
              <div class="dialogBlockContent">
                <div class="blockTitle blockTitle2"><i></i>设备信息</div>
                <div class="deviceInfo">
                  <p>
                    设备名称：{{
                      lifterInfo.lifter ? lifterInfo.lifter.devName : "--"
                    }}
                  </p>
                  <p>
                    设备编号：{{
                      lifterInfo.lifter ? lifterInfo.lifter.devSn : "--"
                    }}
                  </p>
                  <p>
                    设备备案编号：{{
                      lifterInfo.lifter ? lifterInfo.lifter.registNo : "--"
                    }}
                  </p>
                  <p>
                    设备最大载重：{{
                      lifterInfo.lifter ? lifterInfo.lifter.maxLoad : "--"
                    }}t
                  </p>
                </div>
              </div>
            </div>
            <div class="dialogBlock">
              <div class="dialogBlockContent">
                <div class="blockTitle blockTitle2"><i></i>司机信息</div>
                <vue-scroll style="width: 100%; height: 160px">
                  <div
                    v-for="(item, index) in lifterInfo.driverList"
                    :key="index"
                    style="margin: 5px 0"
                  >
                    <div
                      class="deviceInfo"
                      style="
                        display: inline-block;
                        width: 50%;
                        vertical-align: middle;
                      "
                    >
                      <p>姓名：{{ item.workerName }}</p>
                      <p>年龄：{{ item.age }}</p>
                      <p>上岗时间：{{ item.enterDate }}</p>
                    </div>
                    <img
                      width="80"
                      height="90"
                      :src="fileUrl + item.fieldAcquisitionUrl"
                      alt=""
                      style="display: inline-block; vertical-align: middle"
                    />
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>

        <div class="right fullHeight">
          <div class="dialogBlock fullHeight">
            <div class="dialogBlockContent">
              <div class="blockTitle blockTitle2"><i></i>循环记录</div>
              <table class="dialogTable">
                <thead>
                  <tr>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>工作时长</th>
                    <th>载重(t)</th>
                    <th>司机</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in lifterWorkCycleList" :key="index">
                    <td>{{ item.startTime }}</td>
                    <td>{{ item.endTime }}</td>
                    <td>{{ item.workTime }}</td>
                    <td>{{ item.loading }}</td>
                    <td>{{ item.driverName }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频监测弹框 -->
    <div class="pointDialog_l" v-show="showVideoDialog">
      <i class="closeBtn el-icon-error" @click="showVideoDialog = false"></i>
      <div class="pointDialogContent">
        <!-- <div class="videoListBox">
                <ul>
                  <li></li>
                </ul>
              </div> -->
        <areaTree @playParams="getPlayParams" :videoType="1"></areaTree>
        <videoModule
          class="playVideoBox"
          :value="playList"
          :type="'1x1'"
          :displayBottomMod="true"
          :winNumBer="9"
          :autoplay="false"
          :showCaptrue="false"
          :showControl="false"
          :showPlayback="false"
          :hiddenSelectBox="true"
        ></videoModule>
      </div>
    </div>

    <!-- 电箱设备弹框 -->
    <div class="environBox pointDialog_s" v-show="showEletricDialog">
      <div class="title">
        {{ electricDevDetail.name }} - 实时数据
        <span class="closeBtn" @click="showEletricDialog = false">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <div class="pointDialogContent">
        <p class="uploadTime">
          数据上传时间：{{
            electricRealTimeData ? electricRealTimeData.uploadTime : "- -"
          }}
        </p>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.voltageA }}</span> V
          </p>
          <p>A相电压</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.phaseCurrentA }}</span> A
          </p>
          <p>A相电流</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.voltageB }}</span> V
          </p>
          <p>B相电压</p>
        </div>
        <br />
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.phaseCurrentB }}</span> A
          </p>
          <p>B相电流</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.voltageC }}</span> V
          </p>
          <p>C相电压</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.phaseCurrentC }}</span> A
          </p>
          <p>C相电流</p>
        </div>
        <br />
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.cableTemperatureA }}</span> ℃
          </p>
          <p>A线缆温度</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.cableTemperatureB }}</span> ℃
          </p>
          <p>B线缆温度</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.cableTemperatureC }}</span> ℃
          </p>
          <p>C线缆温度</p>
        </div>
        <br />
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.electricLeakage }}</span> mA
          </p>
          <p>漏电流</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ electricRealTimeData.ambientTemperature }}</span> ℃
          </p>
          <p>环境温度</p>
        </div>
      </div>
    </div>

    <!-- 环境设备弹框 -->
    <div class="environBox pointDialog_s" v-show="showEnvironDialog">
      <div class="title">
        {{ environDevDetail.name }} - 实时数据
        <span class="closeBtn" @click="showEnvironDialog = false">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <div class="pointDialogContent">
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.pm10 }}</span> ug/m³
          </p>
          <p>PM10</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.pm25 }}</span> ug/m³
          </p>
          <p>PM2.5</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.windspeed }}</span> m/s
          </p>
          <p>风速</p>
        </div>
        <br />
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.winddirectionName }}</span>
          </p>
          <p>风向</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.noise }}</span> db
          </p>
          <p>噪音</p>
        </div>
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.temperature }}</span> ℃
          </p>
          <p>温度</p>
        </div>
        <br />
        <div class="dialogDataBox">
          <p>
            <span>{{ plantCap.humidity }}</span> %
          </p>
          <p>湿度</p>
        </div>
      </div>
    </div>
    <!-- 人脸闸机弹框 -->
    <div class="faceDevBox pointDialog_s" v-show="showFaceDevDialog">
      <div class="title">
        {{ faceDevDetail.name }}

        <span class="closeBtn" @click="showFaceDevDialog = false">
          <i class="el-icon-close"></i>
        </span>
        <span
          class="devStatus"
          :class="{ red: faceDevDialogData.ufaceDev.deviceState != 1 }"
          >{{
            faceDevDialogData.ufaceDev.deviceState == 1 ? "在线" : "离线"
          }}</span
        >
      </div>
      <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
        <i></i>进出统计
      </div>
      <div class="timeInner flex2">
        <p>今日进场人次</p>
        <div class="bg1 small">
          <span class="num">{{
            faceDevDialogData.totalAttendance.inTotalNum
          }}</span>
        </div>
      </div>
      <div class="timeInner flex2">
        <p>今日出场人次</p>
        <div class="bg1 small">
          <span class="num">{{
            faceDevDialogData.totalAttendance.outTotalNum
          }}</span>
        </div>
      </div>
      <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
        <i></i>进出记录
      </div>
      <div class="inOutListBox">
        <ul>
          <li v-for="(item, index) in faceDevDialogData.list" :key="index">
            <img
              :src="$store.state.FILEURL + item.imageUrl"
              alt=""
              width="20"
              height="30"
            />
            <span class="workerName">{{ item.workerName }}</span>
            <span class="time">{{ item.createTime }}</span>
            <span class="type" :class="{ type2: item.attendanceType == 1 }">{{
              item.attendanceType == 1 ? "进" : "出"
            }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 标养室弹框 -->
    <div class="faceDevBox pointDialog_s" v-show="showRoomDialog">
      <div class="title">
        {{
          markingRoomData.standardDev &&
          markingRoomData.standardDev.laboratoryName
        }}
        <span class="closeBtn" @click="showRoomDialog = false">
          <i class="el-icon-close"></i>
        </span>
        <span
          class="devStatus"
          :class="{ red: markingRoomData && markingRoomData.devState != 1 }"
          >{{
            markingRoomData && markingRoomData.devState == 1 ? "在线" : "离线"
          }}</span
        >
      </div>
      <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
        <i></i>统计
      </div>
      <div class="timeInner flex2">
        <p>温度</p>
        <div class="bg1 small">
          <span class="num"
            >{{
              markingRoomData.currentData &&
              markingRoomData.currentData.temperature
            }}℃</span
          >
        </div>
      </div>
      <div class="timeInner flex2">
        <p>湿度</p>
        <div class="bg1 small">
          <span class="num"
            >{{
              markingRoomData.currentData &&
              markingRoomData.currentData.humidity
            }}%</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
import {
  getPanoramaListApi,
  getDevMarkListApi,
  selectStandardDevStatisticsBySnApi,
} from "@/assets/js/api/panoramic.js";
import { selectWorkerAttendanceByDevApi } from "@/assets/js/api/dataBoard";

import {
  getSelectTowerBySnApi,
  getTowerCurrentDataApi,
} from "@/assets/js/api/towerCrane"; //塔吊
import {
  getSelectLifterBySnApi,
  getLifterCurrentDataApi,
  getSelectLifterWorkCycleListApi,
} from "@/assets/js/api/lifter"; //升降机
import { getRealTimeDataApi } from "@/assets/js/api/electricBox"; //电箱
import {
  selectCarStatisticsByCameraIdApi,
  getCarPassRecordListApi,
} from "@/assets/js/api/carManage"; //车辆
import {
  hidePluginWindow,
  showPluginWindow,
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
import areaTree from "@/components/areaTree";
import videoModule from "@/components/videoModule/videoModule";
export default {
  components: { areaTree, videoModule },
  data() {
    return {
      projectSn: "",
      panoramaList: [],
      fileUrl: "",
      panoramadata: null,
      markersPlugin: null,
      checkedImgIndex: 0,
      nextPano: {
        imageUrl: "",
        id: "",
        imageName: "",
      },
      devList: [],

      imageLoaded: false,

      //点击设备弹窗
      showCarDialog: false,
      showTowerDialog: false,
      towerBasicInfo: {},
      hideGoods: false,
      towerCurrentInfo: {},
      videoId: "",
      selectList: [],
      showLifterDialog: false,
      lifterCurrentData: {},
      showHeight: 0,
      lifterInfo: {},
      lifterWorkCycleList: [],
      showVideoDialog: false,
      playList: [],
      showEletricDialog: false,
      electricBoxPos: {},
      electricDevDetail: {},
      electricRealTimeData: {},
      realTimeData: "",
      showEnvironDialog: false,
      environBoxPos: {},
      plantCap: {
        crc: "--",
        humidity: "--",
        noise: "--",
        plateHumidity: "--",
        plateTemperature: "--",
        pm10: "--",
        pm25: "--",
        pressure: "--",
        temperature: "--",
        tsp: "--",
        voltage: "--",
        winddirectionName: "--",
        windspeed: "--",
      },
      showFaceDevDialog: false,
      environDevDetail: {},
      faceDevDetail: {},
      faceDevDialogData: {
        ufaceDev: {
          deviceState: 1,
        },
        totalAttendance: {},
      },
      carStatList: [], //车辆进出统计
      carRealTimeData: {
        innum: 0,
        outnum: 0,
        temporarynum: 0,
        whitenum: 0,
      }, //车辆实时数据
      carRecordOfAccess: [], //车辆进出记录
      showRoomDialog: false, //标养室
      markingRoomData: {}, //标养室数据
      towerInterval: null,
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.fileUrl = this.$store.state.FILEURL;
  },
  mounted() {
    this.getPanoramaList();
  },
  methods: {
    //获取全景图列表
    getPanoramaList() {
      let data = {
        projectSn: this.projectSn,
      };
      getPanoramaListApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result.length > 0) {
            this.panoramaList = res.result;
            this.checkedImgIndex = 0;
            this.nextPano = res.result[0];
            setTimeout(() => {
              this.showPhoto();
            }, 20);
            this.getDevMarkList();
          }
        }
      });
    },

    //获取所有设备
    getDevMarkList() {
      //type==1 查询所有设备； 2 查询单个全景图已绑定的设备
      let data = {
        panoramaId: this.nextPano.id,
        projectSn: this.projectSn,
        selectType: 2,
        devType: "",
      };
      getDevMarkListApi(data).then((res) => {
        if (res.result.length > 0) {
          let result = JSON.parse(JSON.stringify(res.result));
          this.devList = result;
          //清除所有点位
          if (this.markersPlugin) {
            this.markersPlugin.clearMarkers();
          }
          result.forEach((item, index) => {
            var icon = null;
            switch (Number(item.devType)) {
              case 1:
                icon = require("@/assets/images/dataBoard/devIcon-car.png");
                break;
              case 2:
                icon = require("@/assets/images/dataBoard/devIcon-tower.png");
                break;
              case 3:
                icon = require("@/assets/images/dataBoard/devIcon-lifter.png");
                break;
              case 4:
                icon = require("@/assets/images/dataBoard/devIcon-camera.png");
                break;
              case 5:
                icon = require("@/assets/images/dataBoard/devIcon-electric.png");
                break;
              case 6:
                icon = require("@/assets/images/dataBoard/devIcon-green.png");
                break;
              case 7:
                icon = require("@/assets/images/dataBoard/devIcon-face.png");
                break;
              case 8:
                icon = require("@/assets/images/dataBoard/devIcon-chamber.png");
                break;
            }
            const markersPlugin = (this.markersPlugin = this.panoramadata.getPlugin(
              PhotoSphereViewer.MarkersPlugin
            ));
            setTimeout(() => {
              markersPlugin.addMarker({
                id: item.id,
                longitude: Number(item.longitude),
                latitude: Number(item.latitude),
                image: icon,
                width: 42,
                height: 42,
                anchor: "bottom center",
                tooltip: "设备名称：" + item.name,
                data: {
                  generated: true,
                },
              });
            }, 500);
          });
        }
      });
    },

    //切换全景图
    checkedImgBtn(val, index) {
      this.checkedImgIndex = index;
      this.nextPano = val;
      if (this.panoramadata) {
        this.panoramadata.destroy();
      }
      setTimeout(() => {
        this.showPhoto();
        this.getDevMarkList();
      }, 100);
    },

    //初始化 全景图
    showPhoto() {
      let that = this;
      this.displayPanoramadata = true;
      this.panoramadata = new PhotoSphereViewer.Viewer({
        container: document.querySelector("#photosphere"),

        panorama: this.fileUrl + this.nextPano.imageUrl,
        plugins: [
          [
            PhotoSphereViewer.MarkersPlugin,
            {
              markers: [
                //     {
                //       id: "new-marker",
                //       longitude: "45deg",
                //       latitude: "100deg",
                //       image: require("@/assets/images/bao.png"),
                //       width: 32,
                //       height: 32,
                //     },
              ],
            },
          ],
        ],
        // caption: '', //描述
        // // loading_img: this.loading_img, //默认值为null，在加载时显示的图片的路径。
        // // longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], //可选，移动时每像素经过的经度值。
        // latitude_range: [(-3 * Math.PI) / 4, (3 * Math.PI) / 4], //可选，移动时每像素经过的纬度值。
        // anim_speed: "-2rpm",
        // autoload: true, //可选，默认值为true，true为自动调用全景图，false为在后面加载全景图(通过.load()方法)。
        // fisheye: true,
        // move_speed: 1.1,
        // time_anim: false, //多少毫秒后自动播放
        // size: {
        //   width: "100%",
        //   height: "100%",
        // },
        // navbar: false, //下面导航栏不显示
        // navbar: [
        //   'autorotate', 'zoom', 'download', 'markers',
        // ],
        // markers: (function () {
        //   let a = that.nextPano.nodes;
        //   return a;
        // })(),
      });

      const markersPlugin = (this.markersPlugin = this.panoramadata.getPlugin(
        PhotoSphereViewer.MarkersPlugin
      ));
      //点位 点击事件
      markersPlugin.on("select-marker", (e, marker) => {
        that.clickMark(marker.id);
      });
    },

    //点击设备 标记时
    clickMark(id) {
      let item = {};
      this.devList.forEach((element, index) => {
        if (element.id == id) {
          item = element;
        }
      });
      console.log(item);
      switch (Number(item.devType)) {
        case 1:
          //车辆识别
          this.showCarDialog = true;
          this.getCarDataList(item.devSn);
          this.getCarPassRecordList(item.devSn);
          break;
        case 2:
          //塔吊
          this.showTowerDialog = true;
          this.getTowerDriverInfo(item.devSn);
          break;
        case 3:
          //升降机
          this.showLifterDialog = true;
          this.getLifterDriverInfo(item.devSn);
          break;
        case 4:
          //  摄像头
          this.showVideoDialog = true;
          this.videoList.forEach((element) => {
            if (element.devSn == item.devSn) {
              this.playList = [element];
            }
          });
          break;
        case 5:
          //电箱
          this.electricDevDetail = item;
          this.showEletricDialog = true;
          this.getElectricRealTimeData(item.devSn);
          break;
        case 6:
          this.environDevDetail = item;
          this.showEnvironDialog = true;
          this.getRealTimeDustNoiseData(item.devSn);
          break;
        case 7:
          this.faceDevDetail = item;
          this.showFaceDevDialog = true;
          this.selectWorkerAttendanceByDev(item.devSn);
          break;
        case 8:
          this.showRoomDialog = true;
          this.getStandardDevStatistics(item.devSn);
          break;
      }
    },

    //获取环境设备详情数据
    getRealTimeDustNoiseData(deviceId) {
      let data = {
        deviceId: deviceId,
        projectSn: this.projectSn,
      };
      getRealTimeDustNoiseDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.plantCap = res.result;
          } else {
            this.plantCap = {
              crc: "--",
              humidity: "--",
              noise: "--",
              plateHumidity: "--",
              plateTemperature: "--",
              pm10: "--",
              pm25: "--",
              pressure: "--",
              temperature: "--",
              tsp: "--",
              voltage: "--",
              winddirectionName: "--",
              windspeed: "--",
            };
          }
        }
      });
    },
    //获取人脸闸机数据
    selectWorkerAttendanceByDev(devSn) {
      selectWorkerAttendanceByDevApi({
        projectSn: this.projectSn,
        devSn: devSn,
      }).then((res) => {
        this.faceDevDialogData = res.result;
      });
    },
    //获取标养室数据
    getStandardDevStatistics(devSn) {
      selectStandardDevStatisticsBySnApi({
        projectSn: this.projectSn,
        devSn: devSn,
      }).then((res) => {
        this.markingRoomData = res.result;
      });
    },
    //获取电箱设备的实时数据
    getElectricRealTimeData(devSn) {
      let data = {
        devSn: devSn,
        projectSn: this.projectSn,
      };
      getRealTimeDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.electricRealTimeData = res.result;
          } else {
            this.electricRealTimeData = {
              phaseCurrentA: "--",
              voltageB: "--",
              phaseCurrentB: "--",
              voltageC: "--",
              phaseCurrentC: "--",
              cableTemperatureA: "--",
              cableTemperatureB: "--",
              cableTemperatureC: "--",
              ambientTemperature: "--",
              electricLeakage: "--",
              voltageA: "--",
              uploadTime: "--",
            };
          }
        }
      });
    },

    //获取单个塔吊设备信息
    getTowerDriverInfo(devSn) {
      let data = {
        devSn,
      };
      getSelectTowerBySnApi(data).then((res) => {
        if (res.code == 200) {
          this.towerBasicInfo = res.result;
          this.towerInterval = setInterval(() => {
            this.getTowerCurrentData(devSn, res.result.tower);
          }, 30000);
          if (res.result.videoList.length > 0) {
            this.getVideo(res.result.videoList[0].id);
            this.videoId = res.result.videoList[0].id;
          } else {
            this.videoId = "";
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //获取单个塔吊的实时信息
    getTowerCurrentData(devSn, tower) {
      let that = this;
      let data = {
        devSn,
      };
      getTowerCurrentDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.towerCurrentInfo = res.result
              ? res.result
              : this.towerCurrentInfo;
            let forearmLength = Number(tower.forearmLength); //实际臂长
            let towerHeight = tower.towerHeight
              ? Number(tower.towerHeight)
              : ""; //实际塔高
            let realityX = res.result ? Number(res.result.xValue) : ""; //实际吊钩x位置
            let realityY = res.result ? Number(res.result.yValue) : ""; //实际吊钩y位置
            //没有实时数据
            if (realityX == "" || realityY == "") {
              this.hideGoods = false;
              return;
            }

            // let forearmLength = 186; //实际臂长
            // let towerHeight = 120; //实际塔高
            // let realityX = 86; //实际吊钩x位置
            // let realityY = 0; //实际吊钩y位置

            let clientWidth = this.$refs.towerBG.clientWidth; //图片塔吊的宽度
            let clientHeight = this.$refs.towerBG.clientHeight; //图片塔吊的高度
            let imgLeftWidth = 52; //塔吊图片司机距离左边距离px
            let imgLeftHeight = 48; //塔吊图片司机距离上边距离px
            let slideWidth = 26; //图片滑动组件直径px
            let cargoHeight = 74; //图片货物高度px

            //实际吊钩x位置> 实际臂长
            if (forearmLength < realityX || realityX < 0) {
              window.clearInterval(this.towerInterval);
              this.hideGoods = false;
              this.$message.error("当前设备前臂长参数错误");
              return;
              //实际塔高 < 实际吊钩Y位置
            } else if (towerHeight < realityY || realityY < 0) {
              window.clearInterval(this.towerInterval);
              this.hideGoods = false;
              this.$message.error("当前设备高度参数错误");

              return;
            } else {
              this.hideGoods = true;
              let imgFl = clientWidth - imgLeftWidth - slideWidth; //图片臂长px
              let ratioX = imgFl / forearmLength; //计算臂长比例
              let coordX = ratioX * realityX + imgLeftWidth; //滑动组件位置
              let imgFh = clientHeight - imgLeftHeight - cargoHeight; //图片高度px  图片总高-司机距离上边距离-吊物高度
              let ratioY = imgFh / towerHeight; //计算塔吊高度比例  吊物可移动高度 - 实际塔高度
              let coordY = ratioY * realityY - imgLeftHeight; //获取 吊物当前位置
              let showHeight = imgFh - coordY; //获取到货物的高度位置
              let lineLength = showHeight - cargoHeight / 2; //获取线的长度
              // 赋值
              this.coordData = {
                coordX: coordX,
                coordY: showHeight,
                lineLength: lineLength,
              };
            }
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //塔吊 下拉框聚焦
    visibleChange(val) {
      if (val) {
        hidePluginWindow();
      } else {
        showPluginWindow();
      }
    },
    //塔吊 选择的视频
    getVideo(val) {
      for (let i = 0; i < this.towerBasicInfo.videoList.length; i++) {
        if (val == this.towerBasicInfo.videoList[i].id) {
          this.selectList = [this.towerBasicInfo.videoList[i]];
        }
      }
    },

    //获取单个升降机设备信息
    getLifterDriverInfo(devSn) {
      getSelectLifterBySnApi({ devSn }).then((res) => {
        if (res.code == 200) {
          this.lifterInfo = res.result;
          this.getLifterWorkCycleList(devSn);
          this.getLifterCurrentDataList(devSn, res.result);
          this.lifterInterval = setInterval(() => {
            this.getLifterCurrentDataList(devSn, res.result);
          }, 30000);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //获取升降机 循环列表
    getLifterWorkCycleList(devSn) {
      getSelectLifterWorkCycleListApi({ devSn }).then((res) => {
        if (res.code == 200) {
          this.lifterWorkCycleList = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //获取升降机实时数据
    getLifterCurrentDataList(devSn, devData) {
      let data = {
        devSn,
      };
      getLifterCurrentDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.lifterCurrentData = res.result;
            let height = devData.lifter.maxHeight
              ? Number(devData.lifter.maxHeight)
              : 0; //实际升降机高度
            let nowHeight = res.result.height; //当前升降机所在高度

            if (nowHeight > height) {
              this.$message.error("当前设备高度参数错误");
              this.showHeight = 0;
              return;
            }

            // let height = 100; //实际升降机高度  测试数据
            // let nowHeight = 100; //当前升降机所在高度 测试数据

            let moveMod = 56.5; //升降机移动模块高度 px
            let lifterBottom = 5; //塔底部红色高度 px
            let lifterHeight =
              this.$refs.lifterHeight.clientHeight - lifterBottom; //升降机塔高图片 px
            let ratio = lifterHeight / height;

            let showHeight = ratio * nowHeight + lifterBottom;
            this.showHeight = showHeight;
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //获取车辆实时数据
    getCarDataList(devSn) {
      let data = {
        cameraId: devSn,
        projectSn: this.projectSn,
      };
      selectCarStatisticsByCameraIdApi(data).then((res) => {
        if (res.code == 200) {
          this.carStatList = res.result.carTypeList; //车辆进出统计
          this.carRealTimeData = res.result.totalnum; //车辆实时数据
        }
      });
    },
    //获取进出记录
    getCarPassRecordList(devSn) {
      let data = {
        cameraId: devSn,
        projectSn: this.projectSn,
      };
      getCarPassRecordListApi(data).then((res) => {
        if (res.code == 200) {
          this.carRecordOfAccess = res.result; //车辆进出记录
        }
      });
    },

    //播放
    getPlayParams(data) {
      if (!this.showVideoDialog) {
        this.videoList = data;
      } else {
        this.playList = data;
      }
    },
  },
};
</script>
<style scoped lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex2 {
  display: flex;
  align-items: center;
}
.overview {
  position: relative;
  width: 100%;
  height: 100%;
}
.photosphere {
  width: 100%;
  height: 100%;
}
.navigation_wrap {
  width: 100%;
  position: absolute;
  z-index: 11;
  bottom: 130px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  padding: 10px;
}
.navigation {
  width: 100%;
  overflow-x: auto;
  padding: 5px 0;
  box-sizing: border-box;
}

.navigation::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 9px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 9px;
}
.navigation::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 9px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  background: #999999;
}
.navigation::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  background: #ffffff;
}

.img_wrap {
  width: 73px;
  height: 73px;
  margin: 0 10px 5px;
  cursor: pointer;
}
.img_wrap:first-child {
  margin-left: 0;
}

.img {
  width: 73px;
  height: 73px;
}

.checkedImg {
  border: 3px solid #3390ff;
}

.noCheckedImg {
  border: 3px solid #fff;
}

.pointTabBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  li {
    margin-right: 35px;
    width: 120px;
    height: 39px;
    background-image: url("../../../assets/images/dataBoard/tabBG.png");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &.active {
      background-image: url("../../../assets/images/dataBoard/tabBG-active.png");
      color: #f7d300;
    }
  }
}
.point {
  position: absolute;
  display: inline-flex;
  align-items: center;
  // border-radius: 50%;
  // background: rgb(236, 126, 46);
  // text-align: center;
  // line-height: 30px;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  img {
    width: 52px;
    height: 58px;
  }
  .devName {
    color: #fff;
    font-size: 13px;
    // margin-left: 10px;
  }
}
.pointDialog_s {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #000;
  padding: 15px 15px 10px;
  // width: 400px;
  z-index: 3;
  box-shadow: 0 2px 4px 0 #1a4c5a;
  border: 1px solid #1a4c5a;
  .title {
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(20, 83, 72, 0.4);
    text-align: left;
    font-size: 15px;
    .closeBtn {
      float: right;
      font-size: 20px;
      cursor: pointer;
      &:hover {
        color: #5ce2f6;
      }
    }
  }
  .pointDialogContent {
    margin-top: 20px;
  }
}
.dialogDataBox {
  float: left;
  // width: calc(25% - 12px);
  width: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  // height: 50px;
  margin: 0 5px 10px 5px;
  padding: 10px 0;
  text-align: center;
  P {
    font-size: 12px;
    &:first-child {
      margin-bottom: 3px;
      span {
        font-size: 18px;
      }
    }
  }
}
.pointDialog_l {
  width: 70%;
  height: 70%;
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  margin-left: auto;
  margin-right: auto;
  background-image: url("../../../assets/images/dataBoard/pointDialog_l_BG.png");
  background-size: 100% 100%;
  z-index: 999;
  background-color: #040d15;
  .closeBtn {
    position: absolute;
    right: 40px;
    top: 10px;
    font-size: 20px;
    color: #5ce2f6;
    cursor: pointer;
  }
  .pointDialogContent {
    margin: 40px 70px;
    height: calc(100% - 80px);
    /deep/.areaTreeInner {
      background-color: transparent;
      text-align: left;
      padding: 0;
      height: 100%;
      width: 184px;
      margin-right: 25px;
      background-color: rgba(0, 0, 0, 1);
      border: 1px solid rgba(26, 76, 90, 1);
      .pageTitle {
        display: none;
      }
      .treeBox {
        background-color: transparent;
        height: 100%;
      }
      .el-tree {
        color: white;
      }
    }
  }
}
.faceDevBox {
  text-align: left;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 30%;
  width: 30%;
  z-index: 999;
  color: #fff;
  .blockTitle2 {
    font-size: 14px;
  }
  .timeInner {
    margin-bottom: 10px;
    display: flex;
    p {
      font-size: 12px;
    }
    .num {
      font-size: 16px;
    }
  }
}
.inOutListBox {
  li {
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    .workerName {
      width: 50px;
    }
    img {
      margin-right: 10px;
    }
    .time {
      margin-right: 20px;
    }
    .type {
      width: 30px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid rgba(81, 129, 246, 0.42);
      color: #5181f6;
      &.type2 {
        border: 1px solid rgba(68, 215, 182, 0.42);
        color: #44d7b6;
      }
    }
  }
}
.devStatus {
  background-color: #279e83;
  font-size: 12px;
  width: 40px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  color: white;
  float: right;
  margin-right: 10px;
  border-radius: 3px;
  margin-left: 10px;
  &.red {
    background-color: #fe6c7f;
  }
}
.dialogBlock {
  border: 1px solid #1a4c5a;
  background-color: #000;

  color: #fff;
  .dialogBlockContent {
    margin: 20px;
    text-align: left;
    .deviceInfo,
    .driverInfo,
    .realTimeInfo {
      margin: 20px 0px 20px 10px;
      p {
        margin-bottom: 10px;
      }
    }
  }
}
.towerCrane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  p {
    width: 50%;
    margin-bottom: 10px;
  }
}
.towerDialog {
  .dialogBlock {
    float: left;
  }
  .pointDialogContent {
    background-color: #000;
  }
  .left {
    width: 28%;
    height: 100%;
  }
  .right {
    width: 28%;
    height: 100%;
  }
  .center2 {
    float: left;
    height: 100%;
    width: calc(44% - 4px - 50px);
  }
  .driverInfo {
    margin-left: 10px;
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
  }
}
.liferDialog {
  .left {
    width: calc(75% - 0px);
    float: left;
    margin-right: 0;
    .dialogBlock {
      margin-right: 10px;
    }
  }
  .leftTop {
    height: 60%;
    .dialogBlockContent {
      height: calc(100% - 40px);
    }
    .leftTopInner {
      height: calc(100% - 24px);
    }
  }
  .right {
    width: 25%;
    float: left;
    margin-left: 0;
  }
  .realTimeInfo2 {
    float: left;
    width: calc(60% - 10px);
    margin: 20px 0 0 10px;
  }
  .lifterRunBox {
    float: left;
    width: 40%;
    text-align: center;
    position: relative;
    .lifter2 {
      position: absolute;
      left: calc(50% + 8px);
    }
  }
  .leftBottom {
    margin-top: 10px;
    overflow: hidden;
    height: calc(40% - 10px);
    .dialogBlock {
      float: left;
      margin-right: 10px;
      width: calc(50% - 12px);
      height: calc(100% - 2px);
    }
  }
}
.dialogTable {
  width: 100%;
  border-spacing: 0;
  text-align: center;
  margin-top: 20px;
  thead {
    background-color: rgba(7, 56, 56, 0.6);
    font-size: 13px;
  }
  td,
  th {
    padding: 5px;
    font-weight: normal;
  }
}
.lifterRunBox {
  img {
    // max-height: 100%;
    display: inline-block;
  }
}
.uploadTime {
  text-align: left;
  font-size: 13px;
  margin-bottom: 10px;
}
.carDialog {
  .top {
    overflow: hidden;
    height: 40%;
    margin-bottom: 10px;
    .dialogBlock {
      float: left;
      width: calc(50% - 7px);
      height: calc(100% - 2px);
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .bottom {
    height: calc(60% - 10px);
    .dialogBlock {
      height: calc(100% - 2px);
    }
  }
}
.allTowerTrack {
  width: 100%;
  height: 20%;
  flex-wrap: wrap;
  position: relative;
  text-align: right;
  .cycle_border1 {
    border: #f5a623 3px solid;
  }
  .cycle_border2 {
    border: #f5a623 3px dashed;
  }
  .cycle {
    cursor: pointer;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    padding: 0 !important;
    // margin: 30px auto 0;
    position: absolute;
    right: 10px;
    top: 0px;
  }
  .cycle img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    z-index: 100;
  }
  .cycle p {
    position: absolute;
    width: 2px;
    left: 50%;
    top: 0;
    height: 100%;
    /* background-color: #F5A623; */
    transform: rotate(0deg);
    margin-left: -1px;
    padding: 0;
    transition: all 0.5s;
  }
  .cycle p span {
    display: block;
    height: 50%;
  }
  .cycle p span:first-child {
    background-color: #f5a623;
  }
  .cycle p span:last-child {
    background-color: transparent;
  }
}

.tower_wrap {
  width: 332px;
  height: 324px;
  position: relative;
  margin: 100px auto 0;
  .rings,
  .line,
  .hock {
    position: absolute;
    // top: 0;
    // left: 0;
  }
}
/deep/.selectVideoBox {
  .el-input__inner {
    color: #fff;
    background-color: transparent;
  }
}

.environBox {
  top: 25%;
  left: 40%;
  z-index: 999;
  color: #fff;
}

.bg1 {
  font-size: 18px;
  margin-left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../../assets/images/carOverview/bg1.png");
  width: 137px;
  height: 54px;
  color: white;
  background-size: 100% 100%;
  .num {
    font-size: 34px;
    color: #5ce2f6;
    margin-right: 5px;
  }
  &.small {
    width: 74px;
    height: 28px;
    .num {
      font-size: 18px;
    }
  }
  &.medium {
    width: 88px;
    height: 34px;
    .num {
      font-size: 21px;
    }
  }
}
</style>