<template>
  <div class="fullHeight" style="position: relative">
    <div v-if=" company != 'henan' " class="floatBtn" @click="showVideoDialog2 = true">
      <img src="@/assets/images/bao.png" alt="" />
    </div>
    <div class="alarmList" v-show="showVideoDialog2">
      <div class="alarmTitle">
        <!-- 视频报警 -->
        {{ $t("message.dataBoard.videoAlarm") }}
        <i class="el-icon-minus" @click="showVideoDialog2 = false"></i>
      </div>
      <div class="transdata1">
        <ul class="tody-table-header2">
          <li>
            <!-- 报警设备 -->
            {{ $t("message.dataBoard.alarmDev") }}
          </li>
          <li>
            <!-- 报警类型 -->
            {{ $t("message.dataBoard.alarmType") }}
          </li>
          <li>
            <!-- 报警时间 -->
            {{ $t("message.dataBoard.alarmTime") }}
          </li>
        </ul>
        <div id="detetion-box2" @mouseover="clearTimer" @mouseout="ScrollUp2">
          <div id="detetion-con1">
            <ul v-for="(item, index) in videoAlarmList" :key="index">
              <li>{{ item.videoName }}</li>
              <li>{{ item.eventName }}</li>
              <li>{{ item.alarmTime }}</li>
            </ul>
          </div>
          <div id="detetion-con2">
            <!-- <ul v-for="(item,index) in videoAlarmList" :key="index">
              <li>{{item.videoName}}</li>
              <li>{{item.eventName}}</li>
              <li>{{item.alarmTime}}</li>
            </ul> -->
          </div>
        </div>
      </div>
    </div>

    <div class="digitalSitePage fullHeight" v-if="bgUrl">
      <!-- 侧边栏 -->
      <div class="fullHeight aside">
        <!-- 塔吊设备 -->
        <div class="blockBox">
          <div class="blockTitle">
            {{ $t("message.companyDiagram.towerDev") }}
          </div>
          <div class="blockContent">
            <div class="devInfoBox">
              <div class="item">
                <img src="@/assets/images/dataBoard/tower.png" alt="" />
                <div>
                  <p class="num" style="color: #5181f6">{{ totalTowerDev }}</p>
                  <p>
                    <!-- 塔吊总数 -->
                    {{ $t("message.dataBoard.totalTowerDev") }}
                  </p>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
                <div>
                  <p class="num" style="color: #f67f51">
                    {{ totalDangerTowerDev }}
                  </p>
                  <p>
                    <!-- 今日报警总数 -->
                    {{ $t("message.dataBoard.todayAlarmCount") }}
                  </p>
                </div>
              </div>
              <div class="list-box">
                <vue-scroll>
                  <div
                    class="list-item"
                    :class="item.devonline == 0 ? 'offline' : 'online'"
                    v-for="(item, index) in towerList"
                    :key="index"
                  >
                    <span class="type" v-if="item.devonline != 0">在线</span>
                    <span class="type" v-else>离线</span>
                    <p>{{ item.devName }}</p>
                    <span v-if="item.alarmNum == ''" class="alarm"
                      >今日报警:0</span
                    >
                    <span v-else class="alarm"
                      >今日报警:{{ item.alarmNum }}</span
                    >
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>
        <!-- 升降机设备 -->
        <div class="blockBox">
          <div class="blockTitle">
            {{ $t("message.companyDiagram.lifterDev") }}
          </div>
          <div class="blockContent dataBoxContent">
            <div class="devInfoBox">
              <div class="item">
                <img src="@/assets/images/dataBoard/lifter.png" alt="" />
                <div>
                  <p class="num" style="color: #5181f6">{{ totalLifterDev }}</p>
                  <p>
                    <!-- 升降机总数 -->
                    {{ $t("message.dataBoard.totalLifterDev") }}
                  </p>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
                <div>
                  <p class="num" style="color: #f67f51">
                    {{ totalDangerLifterDev }}
                  </p>
                  <p>
                    <!-- 今日报警总数 -->
                    {{ $t("message.dataBoard.todayAlarmCount") }}
                  </p>
                </div>
              </div>
              <div class="list-box">
                <vue-scroll>
                  <div
                    class="list-item"
                    :class="item.devonline == 0 ? 'offline' : 'online'"
                    v-for="(item, index) in lifterList"
                    :key="index"
                  >
                    <span class="type" v-if="!item.devonline">在线</span>
                    <span class="type" v-else>离线</span>
                    <p>{{ item.devName }}</p>
                    <span class="alarm">今日报警:{{ item.alarmNum }}</span>
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>
        <!-- 视频设备 -->
        <div class="blockBox">
          <div class="blockTitle">
            {{ $t("message.companyDiagram.videoDev") }}
          </div>
          <div class="blockContent">
            <div class="devInfoBox">
              <div class="item">
                <div class="videoCount">
                  <p>
                    <!-- 视频总数 -->
                    {{ $t("message.dataBoard.videoTotalCount") }}：
                  </p>
                  <p class="num" style="margin-left: 5px">
                    {{ videoCountList.totalDevNum }}
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="onlineVideoCount">
                  <p>
                    <!-- 在线视频数 -->
                    {{ $t("message.dataBoard.onlineVideoCount") }}：
                  </p>
                  <p class="num" style="margin-left: 5px">
                    {{ videoCountList.onlineNum }}
                  </p>
                </div>
              </div>
              <div class="list-box video">
                <vue-scroll>
                  <div
                    style="
                      display: flex;
                      overflow: hidden;
                      flex-wrap: wrap;
                      justify-content: space-between;
                    "
                  >
                    <div
                      class="list-item"
                      :class="item.deviceState == 2 ? 'offline' : 'online'"
                      v-for="(item, index) in videoCountList.videoList"
                      :key="index"
                      style="width: 160px; margin-right: 15px"
                    >
                      <span class="type" v-if="item.deviceState == 1"
                        >在线</span
                      >
                      <span class="type" v-else>离线</span>
                      <p>{{ item.name }}</p>
                    </div>
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mapContent" :class="company == 'longguang'?'lgMapContent':''">
        <vue-scroll v-show="!showVideoDialog">
          <div
            class="mapUrl"
            style="width: 100%; height: 100%; overflow: hidden;"
          >
            <img
              :src="bgUrl"
              style="width: 100%; height: auto; position: relative;"
              class="bgPackImg"
              ref="bgPackImg"
              @load="countBoxSize"
            />
            <!-- <el-image
              style="width: 100%; height: auto;position: relative;"
              :src="bgUrl"
              class="bgPackImg"
              ref="bgPackImg"
            ></el-image> -->
            <!-- <img class="bgPackImg" src="@/assets/images/longguang2/bg.jpg" alt="" style="width: auto; height: auto;position:absolute"
              ref="bgPackImg">
           点位 -->
            <div
              v-for="(item, index) in pointList"
              class="point"
              :key="index"
              :style="{
                top: (item.mapY / imgHeightScale - 36) + 'px',
                left: (item.mapX / imgWidthScale - 22) + 'px',
              }"
              @click="clickPoint(item)"
            >
              <img :src="getDevIcon(item.devType)" alt="" />
              <div class="devName">{{ item.name }}</div>
            </div>

            <!-- 人脸闸机弹框 -->
            <div
              class="faceDevBox pointDialog_s"
              v-show="showFaceDevDialog"
              :style="{ left: faceDevDetail.x, top: faceDevDetail.y }"
            >
              <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 ||
                      faceDevDialogData.ufaceDev.deviceState != 1,
                  }"
                  >{{
                    faceDevDialogData.ufaceDev &&
                    faceDevDialogData.ufaceDev.deviceState == 1
                      ? $t("message.dataBoard.online")
                      : $t("message.dataBoard.notOnline")
                  }}</span
                >
              </div>
              <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
                <i></i
                ><!-- 进出统计 -->{{
                  $t("message.dataBoard.inAndOutStatistics")
                }}
              </div>
              <div class="timeInner">
                <p>
                  <!-- 今日进场人次 -->
                  {{ $t("message.dataBoard.todayInPeople") }}
                </p>
                <div class="bg1 small">
                  <span class="num">{{
                    faceDevDialogData.totalAttendance.inTotalNum
                  }}</span>
                </div>
              </div>
              <div class="timeInner">
                <p>
                  <!-- 今日出场人次 -->
                  {{ $t("message.dataBoard.todayOutPeople") }}
                </p>
                <div class="bg1 small">
                  <span class="num">{{
                    faceDevDialogData.totalAttendance.outTotalNum
                  }}</span>
                </div>
              </div>
              <div
                v-if="faceDevDialogData.list.length > 0"
                class="blockTitle blockTitle2"
                style="margin-bottom: 10px"
              >
                <i></i
                ><!-- 进出记录 -->{{ $t("message.dataBoard.inAndOutRecords") }}
              </div>
              <div
                class="inOutListBox"
                :style="{
                  height: faceDevDialogData.list.length > 0 ? '170px' : '',
                }"
              >
                <vue-scroll>
                  <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.passType == 1 }"
                        >{{
                          item.passType == 1
                            ? $t("message.dataBoard.in")
                            : $t("message.dataBoard.out")
                        }}</span
                      >
                    </li>
                  </ul>
                </vue-scroll>
              </div>
            </div>
            <!-- 环境设备弹框 -->
            <div
              class="environBox pointDialog_s"
              v-show="showEnvironDialog"
              :style="{ left: environBoxPos.x, top: environBoxPos.y }"
            >
              <!-- 实时数据 -->
              <div class="title">
                {{ environDevDetail.name }} -
                {{ $t("message.dataBoard.realData") }}
                <span class="closeBtn" @click="closeInterval()">
                  <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>
                    <!-- 风速 -->
                    {{ $t("message.dataBoard.windSpeed") }}
                  </p>
                </div>
                <br />
                <div class="dialogDataBox">
                  <p>
                    <span>{{ plantCap.winddirectionName }}</span>
                  </p>
                  <p>
                    <!-- 风向 -->
                    {{ $t("message.dataBoard.winddirection") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{ plantCap.noise }}</span> db
                  </p>
                  <p>
                    <!-- 噪音 -->
                    {{ $t("message.dataBoard.noise") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{ plantCap.temperature }}</span> ℃
                  </p>
                  <p>
                    <!-- 温度 -->
                    {{ $t("message.dataBoard.temperature") }}
                  </p>
                </div>
                <br />
                <div class="dialogDataBox">
                  <p>
                    <span>{{ plantCap.humidity }}</span> %
                  </p>
                  <p>
                    <!-- 湿度 -->
                    {{ $t("message.dataBoard.humidity") }}
                  </p>
                </div>
              </div>
            </div>
            <!-- 电箱设备弹框 -->
            <div
              class="environBox pointDialog_s"
              v-show="showEletricDialog"
              :style="{ left: electricBoxPos.x, top: electricBoxPos.y }"
            >
              <!-- 实时数据 -->
              <div class="title">
                {{ electricDevDetail.name }} -
                {{ $t("message.dataBoard.realData") }}
                <span class="closeBtn" @click="showEletricDialog = false">
                  <i class="el-icon-close"></i>
                </span>
              </div>
              <div class="pointDialogContent">
                <!-- 数据上传时间： -->
                <p class="uploadTime">
                  {{ $t("message.dataBoard.dataUpdateTime") }}
                  {{ realTimeData ? realTimeData.uploadTime : "- -" }}
                </p>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.voltageA : "--"
                    }}</span>
                    V
                  </p>
                  <p>
                    <!-- A相电压 -->
                    {{ $t("message.dataBoard.voltageA") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.phaseCurrentA : "--"
                    }}</span>
                    A
                  </p>
                  <p>
                    <!-- A相电流 -->
                    {{ $t("message.dataBoard.phaseCurrentA") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.voltageB : "--"
                    }}</span>
                    V
                  </p>
                  <p>
                    <!-- B相电压 -->
                    {{ $t("message.dataBoard.voltageB") }}
                  </p>
                </div>
                <br />
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.phaseCurrentB : "--"
                    }}</span>
                    A
                  </p>
                  <p>
                    <!-- B相电流 -->
                    {{ $t("message.dataBoard.phaseCurrentB") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.voltageC : "--"
                    }}</span>
                    V
                  </p>
                  <p>
                    <!-- C相电压 -->
                    {{ $t("message.dataBoard.voltageC") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.phaseCurrentC : "--"
                    }}</span>
                    A
                  </p>
                  <p>
                    <!-- C相电流 -->
                    {{ $t("message.dataBoard.phaseCurrentC") }}
                  </p>
                </div>
                <br />
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.cableTemperatureA : "--"
                    }}</span>
                    ℃
                  </p>
                  <p>
                    <!-- A线缆温度 -->
                    {{ $t("message.dataBoard.cableTemperatureA") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.cableTemperatureB : "--"
                    }}</span>
                    ℃
                  </p>
                  <p>
                    <!-- B线缆温度 -->
                    {{ $t("message.dataBoard.cableTemperatureB") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.cableTemperatureC : "--"
                    }}</span>
                    ℃
                  </p>
                  <p>
                    <!-- C线缆温度 -->
                    {{ $t("message.dataBoard.cableTemperatureC") }}
                  </p>
                </div>
                <br />
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.electricLeakage : "--"
                    }}</span>
                    mA
                  </p>
                  <p>
                    <!-- 漏电流 -->
                    {{ $t("message.dataBoard.electricLeakage") }}
                  </p>
                </div>
                <div class="dialogDataBox">
                  <p>
                    <span>{{
                      realTimeData ? realTimeData.ambientTemperature : "--"
                    }}</span>
                    ℃
                  </p>
                  <p>
                    <!-- 环境温度 -->
                    {{ $t("message.dataBoard.ambientTemperature") }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
        <!-- 视频监测弹框 -->
        <!-- 视频监测 -->
        <el-dialog
          @close="closeMap"
          :title="$t('message.dataBoard.videoMontor')"
          :visible.sync="showVideoDialog"
          :modal-append-to-body="false"
          width="95%"
          top="0vh"
          class="dialog_box"
        >
          <div class="pointDialog_l" v-if="showVideoDialog">
            <i class="closeBtn el-icon-error" @click="closeVideoDialog"></i>
            <div class="pointDialogContent">
              <!-- <div class="videoListBox">
                  <ul>
                    <li></li>
                  </ul>
                </div> -->
              <areaTree
                @playParams="getPlayParams"
                :activeLive="activeLiveData"
                :videoType="1"
              ></areaTree>
              <videoModule
                class="playVideoBox playVideoBox2"
                :class="{ isIframe: isIframe }"
                :value="playList"
                :type="'1x1'"
                :displayBottomMod="true"
                :winNumBer="9"
                :autoplay="false"
                :showCaptrue="false"
                :showControl="false"
                :showPlayback="false"
                :hiddenSelectBox="true"
                :scrrenPosition="0"
              ></videoModule>
            </div>
          </div>
        </el-dialog>

        <!-- 塔吊监测弹框 -->
        <!-- 塔吊监测 -->
        <el-dialog
          id="lgStyle"
          @close="closeMap"
          :title="$t('message.dataBoard.towerMontor')"
          :visible.sync="showTowerDialog"
          :modal-append-to-body="false"
          width="95%"
          top="0vh"
        >
          <div class="towerDialog pointDialog_l" v-if="showTowerDialog">
            <i class="closeBtn" :class="company=='longguang'?'':'el-icon-error'" @click="closeTowerDialog"></i>
            <div
              class="pointDialogContent"
              :style="{
                margin: company == 'longguang' ? '0 70px' : '40px 70px',
                height: company == 'longguang' ? '100%' : 'calc(100% - 80px)',
              }"
            >
              <div class="dialogBlock left">
                <div class="dialogBlockContent">
                  <div
                    class="blockTitle blockTitle2"
                    :class="company == 'longguang' ? 'blockTitle3' : ''"
                  >
                    <i v-if="company != 'longguang'"></i>
                    <!-- 设备信息 -->
                    {{ $t("message.dataBoard.devInfo") }}
                  </div>
                  <div class="deviceInfo">
                    <!-- 设备名称： -->
                    <p>
                      {{ $t("message.dataBoard.devName2") + ":"
                      }}{{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.devName
                          : "--"
                      }}
                    </p>
                    <!-- 设备编号： -->
                    <p>
                      {{ $t("message.dataBoard.devCode") + ":" }}
                      {{
                        towerBasicInfo.tower ? towerBasicInfo.tower.devSn : "--"
                      }}
                    </p>
                    <!-- 设备备案号： -->
                    <p>
                      {{ $t("message.dataBoard.devAQ") + ":" }}
                      {{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.registNo
                          : "--"
                      }}
                    </p>
                    <!-- 生产厂家： -->
                    <p>
                      {{ $t("message.dataBoard.manufacturer") + ":" }}
                      {{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.factoryName
                          : "--"
                      }}
                    </p>
                    <p v-if="company == 'longguang'">
                      <!-- 总包单位： -->
                      {{ $t("message.dataBoard.mainContractor") + ":" }}
                      {{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.generalContractorsName
                          : "--"
                      }}
                    </p>
                  </div>
                  <!-- '塔吊操作人员':'驾驶员信息' -->
                  <div
                    class="blockTitle blockTitle2"
                    :class="company == 'longguang' ? 'blockTitle3' : ''"
                  >
                    <i v-if="company != 'longguang'"></i
                    >{{
                      company == "longguang"
                        ? $t("message.dataBoard.towerPlayer")
                        : $t("message.dataBoard.driverInfo")
                    }}
                  </div>
                  <vue-scroll
                    v-if="towerBasicInfoDriverList.length != 0"
                    style="height: 130px; margin-bottom: 10px"
                  >
                    <!--                    driverIdCard，idCard-->
                    <div
                      class="driverInfo"
                      v-for="(item, index) in towerBasicInfo.driverList"
                      v-if="
                        company == 'longguang' ||
                        item.idCard == towerCurrentInfo.driverIdCard
                      "
                      :key="index"
                    >
                      <img
                        @click="openImg(fileUrl + item.fieldAcquisitionUrl)"
                        v-if="item.fieldAcquisitionUrl"
                        :src="fileUrl + item.fieldAcquisitionUrl"
                        alt=""
                      />
                      <img
                        v-else
                        src="@/assets/images/profile_photo.png"
                        alt=""
                      />
                      <div>
                        <!-- 姓名： -->
                        <p>
                          {{ $t("message.dataBoard.name") + ":"
                          }}{{ item.workerName }}
                        </p>
                        <!-- 年龄： -->
                        <p>
                          {{ $t("message.dataBoard.age") + ":" }}{{ item.age }}
                        </p>
                        <!-- 特种证书编号： -->
                        <p>
                          {{ $t("message.dataBoard.certificateNumber") + ":"
                          }}{{ item.certificateNumber }}
                        </p>
                        <!-- 证件： -->
                        <p>
                          {{ $t("message.dataBoard.idCard") + ":"
                          }}{{ item.idCard }}
                        </p>
                      </div>
                    </div>
                  </vue-scroll>
                  <div v-else style="text-align: center">
                    <img
                      style="height: 130px; margin-bottom: 10px"
                      src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
                      alt=""
                    />
                    <p>
                      <!-- 暂无数据 -->
                      {{ $t("message.dataBoard.nodata") }}
                    </p>
                  </div>
                  <div
                    class="blockTitle blockTitle2"
                    v-if="company != 'longguang'"
                  >
                    <i></i>
                    <!-- 报警信息 -->
                    {{ $t("message.dataBoard.alarmInfo") }}
                  </div>
                  <div class="deviceInfo" v-if="company != 'longguang'">
                    <vue-scroll
                      v-if="TowerAlarmList.length != 0"
                      style="height: 350px; margin-bottom: 10px"
                    >
                      <div
                        class="driverInfo"
                        v-for="(item, index) in TowerAlarmList"
                        :key="index"
                      >
                        <div class="TowerAlarm_item">
                          <p class="p1">
                            {{ $t("message.dataBoard.devName2") + ":"
                            }}{{ item.devName }}
                          </p>
                          <p class="p2">
                            {{ $t("message.dataBoard.alarmTime") + ":"
                            }}{{ transformTimestamp(item.alarmTime) }}
                          </p>
                          <p v-if="item.windSpeedAlarm" class="p1">
                            <!-- 风速报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[0]
                            }}
                          </p>
                          <!--  <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>-->
                          <p v-if="item.environmentAlarm" class="p2">
                            <!-- 环境防撞报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[1]
                            }}
                          </p>
                          <p v-if="item.heightAlarm" class="p1">
                            <!-- 高度上限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[2]
                            }}
                          </p>
                          <p v-if="item.maxRangeAlarm" class="p2">
                            <!-- 幅度外限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[3]
                            }}
                          </p>
                          <p v-if="item.minRangeAlarm" class="p1">
                            <!-- 幅度内限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[4]
                            }}
                          </p>
                          <p v-if="item.momentAlarm" class="p2">
                            <!-- 力矩报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[5]
                            }}
                          </p>
                          <p v-if="item.multiAlarm" class="p1">
                            <!-- 多机防撞报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[6]
                            }}
                          </p>
                          <p v-if="item.negAngleAlarm" class="p2">
                            <!-- 逆时针回转限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[7]
                            }}
                          </p>
                          <p v-if="item.posAngleAlarm" class="p1">
                            <!-- 顺时针回转限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[8]
                            }}
                          </p>

                          <!--                          <p v-if="item.windSpeedAlarm" class="p1">风速报警:{{item.windSpeedAlarm == 0?'正常':item.windSpeedAlarm == 1?'报警':'预警'}}</p>-->
                          <!--&lt;!&ndash;                          <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>&ndash;&gt;-->
                          <!--                          <p v-if="item.environmentAlarm" class="p2">环境防撞报警:{{item.environmentAlarm == 0?'正常':item.environmentAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.heightAlarm" class="p1">高度上限位报警:{{item.heightAlarm == 0?'正常':item.heightAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.maxRangeAlarm" class="p2">幅度外限位报警:{{item.maxRangeAlarm == 0?'正常':item.maxRangeAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.minRangeAlarm" class="p1">幅度内限位报警:{{item.minRangeAlarm == 0?'正常':item.minRangeAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.momentAlarm" class="p2">力矩报警:{{item.momentAlarm == 0?'正常':item.momentAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.multiAlarm" class="p1">多机防撞报警:{{item.multiAlarm == 0?'正常':item.multiAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.negAngleAlarm" class="p2">逆时针回转限位报警:{{item.negAngleAlarm == 0?'正常':item.negAngleAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.posAngleAlarm" class="p1">顺时针回转限位报警 :{{item.posAngleAlarm == 0?'正常':item.posAngleAlarm == 1?'报警':'预警'}}</p>-->
                        </div>
                      </div>
                    </vue-scroll>
                    <div v-else style="text-align: center">
                      <img
                        style="height: 150px; margin-top: 100px"
                        src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
                        alt=""
                      />
                      <p>
                        <!-- 暂无数据 -->
                        {{ $t("message.dataBoard.nodata") }}
                      </p>
                    </div>
                  </div>
                  <div
                    class="blockTitle blockTitle2"
                    v-if="company == 'longguang'"
                    :class="company == 'longguang' ? 'blockTitle3' : ''"
                  >
                    <i v-if="company != 'longguang'"></i>
                    <!-- 群塔防碰撞 -->
                    {{ $t("message.dataBoard.groupOfTowersAgainstCollision") }}
                  </div>
                  <div
                    class="svg-box"
                    id="svg_box"
                    v-if="company == 'longguang'"
                  >
                    <svg
                      id="svg"
                      ref="svg"
                      class="svg-pan-zoom_viewport"
                      style="width: 100%; height: 100%"
                    ></svg>
                  </div>
                  <!--                  <div class="blockTitle blockTitle2"><i></i>预警信息</div>-->
                  <!--                  <div class="deviceInfo">-->
                  <!--                    <vue-scroll v-if="TowerWarningList" style="height: 145px; margin-bottom: 10px">-->
                  <!--                      <div-->
                  <!--                              class="driverInfo"-->
                  <!--                              v-for="(item, index) in TowerWarningList"-->
                  <!--                              :key="index"-->
                  <!--                      >-->
                  <!--                        <div class="TowerAlarm_item">-->
                  <!--                          <p class="p1">设备名称:{{item.devName}}</p>-->
                  <!--                          <p class="p2">预警时间：{{ transformTimestamp(item.alarmTime) }}</p>-->
                  <!--                          <p class="p1">报警类别：{{ item.alarmType == 1?'报警':'预警' }}</p>-->
                  <!--                          <p class="p2">角度:{{item.angle}}°</p>-->
                  <!--                          <p class="p1">高度:{{item.height}}m</p>-->
                  <!--                          <p class="p2">载重:{{item.loading}}kg</p>-->
                  <!--                          <p class="p1">载重量比:{{item.loadRatio}}%</p>-->
                  <!--                          <p class="p2">风速:{{item.windspeed}}m/s</p>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                    </vue-scroll>-->
                  <!--                  </div>-->
                </div>
              </div>
              <div class="towerBox center2">
                <div class="towerRunBox">
                  <img
                    v-if="nutHostId"
                    class="pointImg"
                    src="@/assets/images/operationInfo/arrow2.png"
                    alt=""
                  />
                  <div v-if="nutHostId" class="nutBox">
                    <img
                      class="nut"
                      @click="nutDetails"
                      src="@/assets/images/towericon/dff5abfe994eea124e60ef732de8e89.png"
                      alt=""
                    />
                    <span>
                      <!-- 螺栓检测 -->
                      {{ $t("message.dataBoard.boltDetection") }}
                    </span>
                  </div>
                  <div v-if="showBoltDetails" class="boltDetails">
                    <div class="boltDetailsTitle">
                      <!-- 螺栓监测 -->
                      {{ $t("message.dataBoard.boltMonitoring") }}
                      <i
                        class="closeBoltDetails el-icon-error"
                        @click="closeBoltDetails"
                      ></i>
                    </div>
                    <div class="boltDetailsImg">
                      <img
                        src="@/assets/images/towericon/dff5abfe994eea124e60ef732de8e89.png"
                        alt=""
                      />
                    </div>
                    <div class="boltDetailsRight">
                      <div class="boltDetailsRight_top">
                        <div class="boltDetailsRight_top_item">
                          <p
                            :class="{
                              alarmNumber: afterAnalysisDataInfo.alarmNum > 0,
                            }"
                          >
                            {{ afterAnalysisDataInfo.alarmNum }}
                          </p>
                          <p class="itemTitle">
                            <!-- 报警数 -->
                            {{ $t("message.dataBoard.alarmNum") }}
                          </p>
                        </div>
                        <div class="boltDetailsRight_top_item">
                          <p>{{ afterAnalysisDataInfo.nutNum }}</p>
                          <p class="itemTitle">
                            <!-- 螺栓数 -->
                            {{ $t("message.dataBoard.boltNum") }}
                          </p>
                        </div>
                        <div class="boltDetailsRight_top_item">
                          <p>
                            {{
                              afterAnalysisDataInfo.nutNum -
                              afterAnalysisDataInfo.offLineNum
                            }}/{{ afterAnalysisDataInfo.nutNum }}
                          </p>
                          <p class="itemTitle">
                            <!-- 在线数 -->
                            {{ $t("message.dataBoard.onlineNum") }}
                          </p>
                        </div>
                      </div>
                      <div class="boltDetailsRight_bottom">
                        <vue-scroll style="width: 100%; height: 130px">
                          <div class="bottom_list">
                            <div
                              v-for="(
                                item, index
                              ) in afterAnalysisDataInfo.list"
                              v-if="item.alarm == 1 || item.offLine == 1"
                              :key="index"
                              class="listItem"
                            >
                              <!-- 螺栓监测-螺栓 -->
                              <div class="listItemName">
                                {{
                                  $t("message.dataBoard.boltMonitoring") +
                                  "-" +
                                  $t("message.dataBoard.bolt")
                                }}{{ item.nutNo }}
                              </div>
                              <!-- 安装位置: -->
                              <div class="listItemPosition">
                                <span>{{
                                  $t("message.dataBoard.installLocation")
                                }}</span
                                >{{
                                  $t("message.dataBoard.th") +
                                  nutPosition(item.nutNo) +
                                  $t("message.dataBoard.standardKnot")
                                }}
                              </div>
                              <div
                                v-if="afterAnalysisDataInfo.alarmNum"
                                class="listItemAlarm"
                              >
                                <span
                                  ><!-- 报警时间: -->{{
                                    $t("message.dataBoard.alarmTime") + ":"
                                  }}</span
                                >{{ item.alarmTime ? item.alarmTime : "--" }}
                              </div>
                              <div class="listItemOffLine">
                                <span
                                  ><!-- 离线时间: -->{{
                                    $t("message.dataBoard.notOnlineTime") + ":"
                                  }}</span
                                >{{
                                  item.offLineTime ? item.offLineTime : "--"
                                }}
                              </div>
                            </div>
                          </div>
                        </vue-scroll>
                      </div>
                    </div>
                  </div>
                  <img
                    src="@/assets/images/towericon/towerBG.png"
                    alt=""
                    ref="towerBG"
                    v-if="company != 'longguang'"
                  />
                  <!-- 龙光样式 -->
                  <img
                    src="@/assets/images/towericon/towerBG2.png"
                    alt=""
                    ref="towerBG"
                    v-if="company == 'longguang'"
                    style="width: 496px; height: 484px"
                  />

                  <img
                    src="@/assets/images/towericon/1.png"
                    alt=""
                    v-show="hideGoods && company != 'longguang'"
                    class="xMove"
                    id="xMove"
                    :style="{ top: '70px', left: coordData.coordX + 'px' }"
                  />

                  <img
                    src="@/assets/images/towericon/line.png"
                    alt=""
                    class="lines"
                    id="line"
                    v-show="hideGoods && company != 'longguang'"
                    :style="{
                      left: coordData.coordX + 8 + 'px',
                      height: coordData.lineLength + 'px',
                      top: '78px',
                    }"
                  />
                  <!-- 龙光样式 -->
                  <img
                    src="@/assets/images/towericon/line2.png"
                    alt=""
                    class="lines"
                    id="line2"
                    v-show="hideGoods && company == 'longguang'"
                    :style="{
                      left: coordData.coordX + 8 + 'px',
                      height: coordData.lineLength + 'px',
                      width: '5px',
                      top: '126px',
                    }"
                  />

                  <div
                    class="moveBox"
                    id="moveBox"
                    v-show="hideGoods && company != 'longguang'"
                    :style="{
                      top: coordData.coordY + 'px',
                      left: coordData.coordX - 6 + 'px',
                    }"
                  >
                    <img src="@/assets/images/towericon/hock.png" alt="" />
                  </div>
                  <!-- 龙光样式 -->
                  <div
                    class="moveBox"
                    id="moveBox2"
                    v-show="hideGoods && company == 'longguang'"
                    :style="{
                      top: coordData.coordY + 'px',
                      left: coordData.coordX - 10 + 'px',
                    }"
                  >
                    <img
                      style="width: 67px; height: 90px"
                      src="@/assets/images/towericon/hock2.png"
                      alt=""
                    />
                  </div>
                  <!-- <img
                    src="@/assets/images/towericon/towerBG.png"
                    alt=""
                    class="towerImg"
                    ref="towerBG"
                  />
                  <img id="xMove"
                    v-show="hideGoods"
                    src="@/assets/images/towericon/1.png"

                    alt=""
                    class="rings"
                  />
                  <img
                    v-show="hideGoods"
                    src="@/assets/images/towericon/line.png" id="line"

                    alt=""
                    class="line"
                  />
                  <img id="moveBox"
                    v-show="hideGoods"
                    src="@/assets/images/towericon/hock.png"

                    alt=""
                    class="hock"
                  /> -->
                </div>
                <div
                  class="allTowerTrack flex"
                  ref="allTowerTrack"
                  :style="{ height: company == 'longguang' ? '16%' : '20%' }"
                >
                  <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
                  class="blockTitle blockTitle2"
                  v-if="company == 'longguang'"
                  :class="company == 'longguang' ? 'blockTitle3' : ''"
                >
                  <i v-if="company != 'longguang'"></i>
                  <!-- 塔吊运行信息 -->{{
                    $t("message.dataBoard.towerRunInfo")
                  }}
                  <span class="tower-time"
                    ><!-- 当前上传时间： -->{{
                      $t("message.dataBoard.nowUpdateTime") + ":"
                    }}{{
                      towerBasicInfo.tower && towerBasicInfo.tower.realTime
                        ? towerBasicInfo.tower.realTime
                        : "--"
                    }}</span
                  >
                </div>
                <div
                  class="realTimeInfo towerCrane"
                  v-if="company == 'longguang'"
                >
                  <!-- <p><span>安全吊重：</span> t</p> -->
                  <p>
                    <span
                      ><i
                        @mouseenter="showTitle1 = true"
                        @mouseleave="showTitle1 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 前臂长： -->{{
                        $t("message.dataBoard.forearmLong") + ":"
                      }}
                      <div v-if="showTitle1" class="showTitle1">
                        <!-- 前臂长：塔吊回转中心到大臂最前端的水平距离 -->{{
                          $t("message.dataBoard.forearmLong") +
                          ":" +
                          $t("message.dataBoard.forearmInfo")
                        }}
                      </div>
                    </span>
                    {{
                      towerBasicInfo.tower
                        ? towerBasicInfo.tower.forearmLength
                        : "--"
                    }}
                    m
                  </p>
                  <p>
                    <span>
                      <i
                        @mouseenter="showTitle2 = true"
                        @mouseleave="showTitle2 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      >{{ $t("message.dataBoard.towerHeight") + ":"
                      }}<!-- 塔吊高： -->
                      <div v-if="showTitle2" class="showTitle2">
                        {{
                          $t("message.dataBoard.towerHeight") +
                          ":" +
                          $t("message.dataBoard.towerInfo")
                        }}<!-- 塔吊高：塔吊基础表面到吊钩下端的垂直距离。 -->
                      </div>
                    </span>
                    {{
                      towerBasicInfo.tower
                        ? towerBasicInfo.tower.towerHeight
                        : "--"
                    }}
                    m
                  </p>
                  <p v-if="weightSet == 1">
                    <span>
                      <i
                        @mouseenter="showTitle3 = true"
                        @mouseleave="showTitle3 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 载重： -->{{ $t("message.dataBoard.load") + ":" }}
                      <div v-if="showTitle3" class="showTitle3">
                        {{
                          $t("message.dataBoard.load") +
                          ":" +
                          $t("message.dataBoard.loadInfo")
                        }}<!-- 载重：塔吊工作实时吊装重量 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.loading : "--" }} kg
                  </p>
                  <p
                    :class="{
                      red:
                        towerCurrentInfo.maxRangeAlarm != 0 ||
                        towerCurrentInfo.minRangeAlarm != 0,
                    }"
                  >
                    <span>
                      <i
                        @mouseenter="showTitle4 = true"
                        @mouseleave="showTitle4 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 幅度： -->{{ $t("message.dataBoard.range") + ":" }}
                      <div v-if="showTitle4" class="showTitle4">
                        {{
                          $t("message.dataBoard.range") +
                          ":" +
                          $t("message.dataBoard.rangeInfo")
                        }}<!-- 幅度：塔吊的回转中心到吊钩之间的水平距离 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.ranger : "--" }} m
                  </p>
                  <p
                    :class="{ red: towerCurrentInfo.heightAlarm != 0 }"
                    style="white-space: nowrap"
                  >
                    <!-- '吊钩与大臂的垂直距离' --><!-- '高度' -->
                    <span>
                      <i
                        @mouseenter="showTitle5 = true"
                        @mouseleave="showTitle5 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      >{{
                        company != "longguang"
                          ? $t("message.dataBoard.height")
                          : $t("message.dataBoard.heightInfo")
                      }}：
                      <div v-if="showTitle5" class="showTitle5">
                        {{
                          $t("message.dataBoard.height") +
                          ":" +
                          $t("message.dataBoard.heightInfo")
                        }}<!-- 高度：吊钩与大臂的垂直距离 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.height : "--" }} m
                  </p>
                  <p
                    :class="{
                      red:
                        towerCurrentInfo.obliguityXAlarm != 0 ||
                        towerCurrentInfo.obliguityYAlarm != 0,
                    }"
                  >
                    <span>
                      <i
                        @mouseenter="showTitle6 = true"
                        @mouseleave="showTitle6 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 角度： -->{{ $t("message.dataBoard.angle") + ":" }}
                      <div v-if="showTitle6" class="showTitle6">
                        {{
                          $t("message.dataBoard.angle") +
                          ":" +
                          $t("message.dataBoard.angleInfo")
                        }}<!-- 角度：塔吊大臂正北方的相对于水平夹角 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.angle : "--" }} °
                  </p>
                  <p
                    v-if="weightSet == 1"
                    :class="{ red: towerCurrentInfo.momentAlarm != 0 }"
                  >
                    <span>
                      <i
                        @mouseenter="showTitle7 = true"
                        @mouseleave="showTitle7 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 力矩比： -->{{
                        $t("message.dataBoard.torqueRatio") + ":"
                      }}
                      <div v-if="showTitle7" class="showTitle7">
                        {{
                          $t("message.dataBoard.torqueRatio") +
                          ":" +
                          $t("message.dataBoard.torqueRatioInfo")
                        }}<!-- 力矩比：起重机的起重能力。是指起重量载荷与相应工作幅度的乘积 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.torqueRatio : "--" }}
                    %
                  </p>
                  <p v-if="weightSet == 1">
                    <span>
                      <i
                        @mouseenter="showTitle8 = true"
                        @mouseleave="showTitle8 = false"
                        style="color: #5ec6d0"
                        class="el-icon-question"
                      ></i
                      ><!-- 载重比： -->{{
                        $t("message.dataBoard.loadRatio") + ":"
                      }}
                      <div v-if="showTitle8" class="showTitle8">
                        {{
                          $t("message.dataBoard.loadRatio") +
                          ":" +
                          $t("message.dataBoard.loadRatioInfo")
                        }}<!-- 载重比：塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
                      </div></span
                    >
                    {{ towerCurrentInfo ? towerCurrentInfo.loadRatio : "--" }}%
                  </p>
                </div>
              </div>
              <div class="dialogBlock right">
                <div class="dialogBlockContent">
                  <div
                    class="blockTitle blockTitle2"
                    v-if="company != 'longguang'"
                  >
                    <i></i
                    ><!-- 塔吊运行信息 -->{{
                      $t("message.dataBoard.towerRunInfo")
                    }}
                    <span class="tower-time"
                      ><!-- 当前上传时间： -->{{
                        $t("message.dataBoard.nowUpdateTime") + ":"
                      }}{{
                        towerBasicInfo.tower && towerBasicInfo.tower.realTime
                          ? towerBasicInfo.tower.realTime
                          : "--"
                      }}</span
                    >
                  </div>
                  <div
                    class="realTimeInfo towerCrane"
                    v-if="company != 'longguang'"
                  >
                    <!-- <p><span>安全吊重：</span> t</p> -->
                    <p>
                      <span
                        ><i
                          @mouseenter="showTitle1 = true"
                          @mouseleave="showTitle1 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        ><!-- 前臂长： -->{{
                          $t("message.dataBoard.forearmLong") + ":"
                        }}
                        <div v-if="showTitle1" class="showTitle1">
                          <!-- 前臂长：塔吊回转中心到大臂最前端的水平距离 -->{{
                            $t("message.dataBoard.forearmLong") +
                            ":" +
                            $t("message.dataBoard.forearmInfo")
                          }}
                        </div>
                      </span>
                      {{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.forearmLength
                          : "--"
                      }}
                      m
                    </p>
                    <p>
                      <span>
                        <i
                          @mouseenter="showTitle2 = true"
                          @mouseleave="showTitle2 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        ><!-- 塔吊高： -->{{
                          $t("message.dataBoard.towerHeight") + ":"
                        }}
                        <div v-if="showTitle2" class="showTitle2">
                          {{
                            $t("message.dataBoard.towerHeight") +
                            ":" +
                            $t("message.dataBoard.towerInfo")
                          }}<!-- 塔吊高：塔吊基础表面到吊钩下端的垂直距离。 -->
                        </div>
                      </span>
                      {{
                        towerBasicInfo.tower
                          ? towerBasicInfo.tower.towerHeight
                          : "--"
                      }}
                      m
                    </p>
                    <p v-if="weightSet == 1">
                      <span>
                        <i
                          @mouseenter="showTitle3 = true"
                          @mouseleave="showTitle3 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        ><!-- 载重： -->{{ $t("message.dataBoard.load") + ":" }}
                        <div v-if="showTitle3" class="showTitle3">
                          {{
                            $t("message.dataBoard.load") +
                            ":" +
                            $t("message.dataBoard.loadInfo")
                          }}<!-- 载重：塔吊工作实时吊装重量 -->
                        </div></span
                      >
                      {{
                        towerCurrentInfo ? towerCurrentInfo.loading : "--"
                      }}
                      kg
                    </p>
                    <p
                      :class="{
                        red:
                          towerCurrentInfo.maxRangeAlarm != 0 ||
                          towerCurrentInfo.minRangeAlarm != 0,
                      }"
                    >
                      <span>
                        <i
                          @mouseenter="showTitle4 = true"
                          @mouseleave="showTitle4 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        >{{ $t("message.dataBoard.range") + ":"
                        }}<!-- 幅度： -->
                        <div v-if="showTitle4" class="showTitle4">
                          {{
                            $t("message.dataBoard.range") +
                            ":" +
                            $t("message.dataBoard.rangeInfo")
                          }}<!-- 幅度：塔吊的回转中心到吊钩之间的水平距离 -->
                        </div></span
                      >
                      {{ towerCurrentInfo ? towerCurrentInfo.ranger : "--" }} m
                    </p>
                    <p
                      :class="{ red: towerCurrentInfo.heightAlarm != 0 }"
                      style="white-space: nowrap"
                    >
                      <span>
                        <i
                          @mouseenter="showTitle5 = true"
                          @mouseleave="showTitle5 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        >{{
                          company != "longguang"
                            ? $t("message.dataBoard.height")
                            : $t("message.dataBoard.heightInfo")
                        }}：
                        <div v-if="showTitle5" class="showTitle5">
                          {{
                            $t("message.dataBoard.height") +
                            ":" +
                            $t("message.dataBoard.heightInfo")
                          }}<!-- 高度：吊钩与大臂的垂直距离 -->
                        </div></span
                      >
                      {{ towerCurrentInfo ? towerCurrentInfo.height : "--" }} m
                    </p>
                    <p
                      :class="{
                        red:
                          towerCurrentInfo.obliguityXAlarm != 0 ||
                          towerCurrentInfo.obliguityYAlarm != 0,
                      }"
                    >
                      <span>
                        <i
                          @mouseenter="showTitle6 = true"
                          @mouseleave="showTitle6 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        >{{ $t("message.dataBoard.angle") + ":"
                        }}<!-- 角度： -->
                        <div v-if="showTitle6" class="showTitle6">
                          {{
                            $t("message.dataBoard.angle") +
                            ":" +
                            $t("message.dataBoard.angleInfo")
                          }}<!-- 角度：塔吊大臂正北方的相对于水平夹角 -->
                        </div></span
                      >
                      {{ towerCurrentInfo ? towerCurrentInfo.angle : "--" }} °
                    </p>
                    <p
                      v-if="weightSet == 1"
                      :class="{ red: towerCurrentInfo.momentAlarm != 0 }"
                    >
                      <span>
                        <i
                          @mouseenter="showTitle7 = true"
                          @mouseleave="showTitle7 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        >{{ $t("message.dataBoard.torqueRatio") + ":"
                        }}<!-- 力矩比： -->
                        <div v-if="showTitle7" class="showTitle7">
                          {{
                            $t("message.dataBoard.torqueRatio") +
                            ":" +
                            $t("message.dataBoard.torqueRatioInfo")
                          }}<!-- 力矩比：起重机的起重能力。是指起重量载荷与相应工作幅度的乘积 -->
                        </div></span
                      >
                      {{
                        towerCurrentInfo ? towerCurrentInfo.torqueRatio : "--"
                      }}
                      %
                    </p>
                    <p v-if="weightSet == 1">
                      <span>
                        <i
                          @mouseenter="showTitle8 = true"
                          @mouseleave="showTitle8 = false"
                          style="color: #5ec6d0"
                          class="el-icon-question"
                        ></i
                        >{{ $t("message.dataBoard.loadRatio") + ":"
                        }}<!-- 载重比： -->
                        <div v-if="showTitle8" class="showTitle8">
                          {{
                            $t("message.dataBoard.loadRatio") +
                            ":" +
                            $t("message.dataBoard.loadRatioInfo")
                          }}<!-- 载重比：塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
                        </div></span
                      >
                      {{
                        towerCurrentInfo ? towerCurrentInfo.loadRatio : "--"
                      }}%
                    </p>
                  </div>
                  <div>
                    <div
                      style="
                        margin-bottom: 15px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      <div
                        class="blockTitle blockTitle2"
                        :class="company == 'longguang' ? 'blockTitle3' : ''"
                      >
                        <i v-if="company != 'longguang'"></i>
                        <!-- 塔吊视频 -->{{
                          $t("message.dataBoard.towerVideo")
                        }}
                      </div>
                      <!-- 请选择视频 -->
                      <el-select
                        class="selectVideoBox"
                        size="medium"
                        v-model="videoId"
                        :placeholder="$t('message.dataBoard.pleaseChooseVideo')"
                        @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"
                        @click="changVideoSize"
                        >全屏播放</el-button> -->
                      <!-- <el-button
                        type="primary"
                        style="margin-left: 10px"
                        size="medium"
                        >查询</el-button
                      > -->
                    </div>
                    <div style="width: 100%; height: 300px">
                      <!-- <div>推出全屏</div> -->
                      <videoModule
                        class="playVideoBox"
                        style="width: 100%; height: 100%"
                        :type="'1x1'"
                        :value="selectList"
                        :displayBottomMod="false"
                        :winNumBer="1"
                        :autoplay="false"
                        :showCaptrue="false"
                        :showControl="false"
                        :showPlayback="false"
                      ></videoModule>
                    </div>
                  </div>
                  <div
                    class="dialogDataBox2"
                    :style="{
                      'margin-top': company == 'longguang' ? '24px' : '100px',
                    }"
                  >
                    <p>
                      <span>{{ countDown }}</span
                      >s
                    </p>
                    <p>
                      <!-- 倒计时刷新 -->
                      {{ $t("message.dataBoard.countDownFresh") }}
                    </p>
                  </div>
                  <div
                    class="blockTitle blockTitle2"
                    v-if="company == 'longguang'"
                    :class="company == 'longguang' ? 'blockTitle3' : ''"
                  >
                    <i v-if="company != 'longguang'"></i>
                    <!-- 报警信息 -->
                    {{ $t("message.dataBoard.alarmInfo") }}
                  </div>
                  <div
                    class="deviceInfo"
                    style="background: #061125"
                    v-if="company == 'longguang'"
                  >
                    <vue-scroll
                      v-if="TowerAlarmList.length != 0"
                      style="height: 300px; margin-bottom: 10px"
                    >
                      <div
                        class="driverInfo"
                        v-for="(item, index) in TowerAlarmList"
                        :key="index"
                      >
                        <div class="TowerAlarm_item">
                          <p
                            v-if="item.windSpeedAlarm"
                            class="p1"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 风速报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[0]
                            }}
                          </p>
                          <!--  <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>-->
                          <p
                            v-if="item.environmentAlarm"
                            class="p2"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 环境防撞报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[1]
                            }}
                          </p>
                          <p
                            v-if="item.heightAlarm"
                            class="p1"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 高度上限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[2]
                            }}
                          </p>
                          <p
                            v-if="item.maxRangeAlarm"
                            class="p2"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 幅度外限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[3]
                            }}
                          </p>
                          <p
                            v-if="item.minRangeAlarm"
                            class="p1"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 幅度内限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[4]
                            }}
                          </p>
                          <p
                            v-if="item.momentAlarm"
                            class="p2"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 力矩报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[5]
                            }}
                          </p>
                          <p
                            v-if="item.multiAlarm"
                            class="p1"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 多机防撞报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[6]
                            }}
                          </p>
                          <p
                            v-if="item.negAngleAlarm"
                            class="p2"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 逆时针回转限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[7]
                            }}
                          </p>
                          <p
                            v-if="item.posAngleAlarm"
                            class="p1"
                            style="width: 100%; font-size: 15px"
                          >
                            <!-- 顺时针回转限位报警 -->{{
                              $t("message.dataBoard.alarmTypeArray2")[8]
                            }}
                          </p>
                          <p class="p1" style="width: 35%; opacity: 0.8">
                            <!-- 设备名称: -->{{
                              $t("message.dataBoard.devName2") + ":"
                            }}{{ item.devName }}
                          </p>
                          <p class="p2" style="width: 65%; opacity: 0.8">
                            <!-- 报警时间： -->{{
                              $t("message.dataBoard.alarmTime") + ":"
                            }}{{ transformTimestamp(item.alarmTime) }}
                          </p>

                          <!--                          <p v-if="item.windSpeedAlarm" class="p1">风速报警:{{item.windSpeedAlarm == 0?'正常':item.windSpeedAlarm == 1?'报警':'预警'}}</p>-->
                          <!--&lt;!&ndash;                          <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>&ndash;&gt;-->
                          <!--                          <p v-if="item.environmentAlarm" class="p2">环境防撞报警:{{item.environmentAlarm == 0?'正常':item.environmentAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.heightAlarm" class="p1">高度上限位报警:{{item.heightAlarm == 0?'正常':item.heightAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.maxRangeAlarm" class="p2">幅度外限位报警:{{item.maxRangeAlarm == 0?'正常':item.maxRangeAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.minRangeAlarm" class="p1">幅度内限位报警:{{item.minRangeAlarm == 0?'正常':item.minRangeAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.momentAlarm" class="p2">力矩报警:{{item.momentAlarm == 0?'正常':item.momentAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.multiAlarm" class="p1">多机防撞报警:{{item.multiAlarm == 0?'正常':item.multiAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.negAngleAlarm" class="p2">逆时针回转限位报警:{{item.negAngleAlarm == 0?'正常':item.negAngleAlarm == 1?'报警':'预警'}}</p>-->
                          <!--                          <p v-if="item.posAngleAlarm" class="p1">顺时针回转限位报警 :{{item.posAngleAlarm == 0?'正常':item.posAngleAlarm == 1?'报警':'预警'}}</p>-->
                        </div>
                      </div>
                    </vue-scroll>
                    <div v-else style="text-align: center; padding: 20px">
                      <img
                        style="height: 150px; margin-top: 100px"
                        src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
                        alt=""
                      />
                      <p>
                        <!-- 暂无数据 -->
                        {{ $t("message.dataBoard.nodata") }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
        <!-- 升降机监测弹框 -->
        <!-- 升降机监测 -->
        <el-dialog
          class="dialog-wrapper"
          @close="closeMap"
          :title="$t('message.dataBoard.devTypeList')[3].name"
          :visible.sync="showLifterDialog"
          :modal-append-to-body="false"
          width="95%"
          top="0vh"
        >
          <div class="liferDialog pointDialog_l">
            <i class="closeBtn el-icon-error" @click="closeTowerDialog"></i>
            <div class="pointDialogContent">
              <div class="left fullHeight">
                <div class="dialogBlock leftTop">
                  <div class="dialogBlockContent">
                    <div class="blockTitle blockTitle2">
                      <i></i>
                      <!-- 实时数据 -->
                      {{ $t("message.dataBoard.realData") }}
                    </div>
                    <div class="leftTopInner">
                      <div class="realTimeInfo2 fullHeight">
                        <!--                        <div class="dialogDataBox">-->
                        <!--                          <p>-->
                        <!--                            <span>{{-->
                        <!--                              lifterCurrentData.loading-->
                        <!--                                ? lifterCurrentData.loading-->
                        <!--                                : "&#45;&#45;"-->
                        <!--                            }}</span>-->
                        <!--                            kg-->
                        <!--                          </p>-->
                        <!--                          <p>重量</p>-->
                        <!--                        </div>-->
                        <div
                          class="dialogDataBox"
                          :class="[
                            'normal',
                            {
                              alert:
                                lifterCurrentData.heightAlarm != 0 ||
                                lifterCurrentData.heightPreAlarm != 0,
                            },
                          ]"
                        >
                          <p>
                            <span>{{
                              lifterCurrentData.height
                                ? lifterCurrentData.height
                                : "--"
                            }}</span>
                            m
                          </p>
                          <p>
                            <!-- 高度 -->
                            {{ $t("message.dataBoard.height") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ floorNum ? floorNum : "--" }}</span>
                            %
                          </p>
                          <!-- <p>速度</p> -->
                          <p>
                            <!-- 高度百分比 -->
                            {{ $t("message.dataBoard.heightPercentage") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span
                              >{{
                                lifterCurrentData.floorNum
                                  ? lifterCurrentData.floorNum
                                  : "--"
                              }}/{{
                                lifterInfo.lifter
                                  ? lifterInfo.lifter.totalFloor
                                    ? lifterInfo.lifter.totalFloor
                                    : "--"
                                  : "--"
                              }}</span
                            >{{ $t("message.dataBoard.floor")
                            }}<!-- 层 -->
                          </p>
                          <p>
                            <!-- 当前楼层/总楼层 -->
                            {{ $t("message.dataBoard.nowFloorOrAllFloor") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <!-- "上升" "下降"  "停运"-->
                            <span>{{
                              lifterCurrentData.runningState == 1
                                ? $t("message.dataBoard.rise")
                                : lifterCurrentData.runningState == 2
                                ? $t("message.dataBoard.decline")
                                : $t("message.dataBoard.Outage")
                            }}</span>
                          </p>
                          <p>
                            <!-- 运行状态 -->
                            {{ $t("message.dataBoard.runningStatus") }}
                          </p>
                        </div>
                        <!-- <div></div> -->
                        <div
                          class="dialogDataBox"
                          :class="[
                            'normal',
                            {
                              alert:
                                lifterCurrentData.obliguityXAlarm != 0 ||
                                lifterCurrentData.obliguityXPreAlarm != 0,
                            },
                          ]"
                        >
                          <p>
                            <!--                          lifterCurrentData.obliguityXAlarm-->
                            <span>{{
                              lifterCurrentData.dipAngleX
                                ? lifterCurrentData.dipAngleX
                                : "--"
                            }}</span
                            >°
                          </p>
                          <p><!-- 倾角 -->{{ $t("message.dataBoard.dip") }}X</p>
                        </div>
                        <div
                          class="dialogDataBox"
                          :class="[
                            'normal',
                            {
                              alert:
                                lifterCurrentData.obliguityYAlarm != 0 ||
                                lifterCurrentData.obliguityYPreAlarm != 0,
                            },
                          ]"
                        >
                          <p>
                            <span>{{
                              lifterCurrentData.dipAngleY
                                ? lifterCurrentData.dipAngleY
                                : "--"
                            }}</span
                            >°
                          </p>
                          <p><!-- 倾角 -->{{ $t("message.dataBoard.dip") }}Y</p>
                        </div>
                        <div
                          class="dialogDataBox"
                          :class="[
                            'normal',
                            {
                              alert:
                                lifterCurrentData.speedAlarm != 0 ||
                                lifterCurrentData.speedPreAlarm != 0,
                            },
                          ]"
                        >
                          <p>
                            <span>{{
                              lifterCurrentData.speed
                                ? lifterCurrentData.speed
                                : "--"
                            }}</span
                            >m/s
                          </p>
                          <p>
                            <!-- 当前速度 -->
                            {{ $t("message.dataBoard.nowSpeed") }}
                          </p>
                        </div>
                        <div
                          v-if="company != 'longguang'"
                          class="dialogDataBox"
                          :class="[
                            'normal',
                            {
                              alert:
                                lifterCurrentData.windSpeedAlarm != 0 ||
                                lifterCurrentData.windSpeedPreAlarm != 0,
                            },
                          ]"
                        >
                          <p>
                            <span>{{
                              lifterCurrentData.windSpeed
                                ? lifterCurrentData.windSpeed
                                : "--"
                            }}</span
                            >m/s
                          </p>
                          <p>
                            <!-- 风速 -->
                            {{ $t("message.dataBoard.windSpeed") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ countDown }}</span
                            >s
                          </p>
                          <p>
                            <!-- 倒计时刷新 -->
                            {{ $t("message.dataBoard.countDownFresh") }}
                          </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: 417px;
                            position: relative;
                            bottom: 42px;
                          "
                        />
                        <img
                          src="@/assets/images/dataBoard/lifter-2.png"
                          alt=""
                          class="lifter2"
                          :style="{ bottom: showHeight + 'px' }"
                          style="width: 38px; height: 50px"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="leftBottom">
                  <div class="dialogBlock">
                    <div class="dialogBlockContent">
                      <div class="blockTitle blockTitle2">
                        <i></i>
                        <!-- 设备信息 -->
                        {{ $t("message.dataBoard.devInfo") }}
                      </div>
                      <div class="deviceInfo">
                        <p>
                          <!--  设备名称： -->{{
                            $t("message.dataBoard.devName2") + ":"
                          }}{{
                            lifterInfo.lifter ? lifterInfo.lifter.devName : "--"
                          }}
                        </p>
                        <p>
                          <!-- 设备编号： -->{{
                            $t("message.dataBoard.devCode") + ":"
                          }}{{
                            lifterInfo.lifter ? lifterInfo.lifter.devSn : "--"
                          }}
                        </p>
                        <p>
                          <!-- 设备备案号： -->{{
                            $t("message.dataBoard.devAQ") + ":"
                          }}{{
                            lifterInfo.lifter
                              ? lifterInfo.lifter.registNo
                              : "--"
                          }}
                        </p>
                        <p>
                          <!--  设备最大载重： -->{{
                            $t("message.dataBoard.devMaxLoad") + ":"
                          }}{{
                            lifterInfo.lifter
                              ? lifterInfo.lifter.maxLoad
                              : "--"
                          }}kg
                        </p>
                        <p v-if="company == 'longguang'">
                          <!--  总包单位： -->
                          {{ $t("message.dataBoard.mainContractor") + ":"
                          }}{{
                            lifterInfo.lifter
                              ? lifterInfo.lifter.generalContractorsName
                              : "--"
                          }}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="dialogBlock">
                    <div class="dialogBlockContent">
                      <!-- '升降机操作人员':'司机信息' -->
                      <div class="blockTitle blockTitle2">
                        <i></i
                        >{{
                          company == "longguang"
                            ? $t("message.dataBoard.lifterPlayer")
                            : $t("message.dataBoard.driverInfo2")
                        }}
                      </div>
                      <vue-scroll
                        v-if="lifterInfoDriverList.length"
                        style="width: 100%; height: 236px"
                      >
                        <div
                          v-for="(item, index) in lifterInfo.driverList"
                          :key="index"
                          v-if="
                            company == 'longguang' ||
                            item.idCard == lifterCurrentData.driverIdCard
                          "
                          style="margin: 5px 0"
                        >
                          <div
                            class="deviceInfo"
                            style="
                              display: inline-block;
                              width: 50%;
                              vertical-align: middle;
                            "
                          >
                            <p>
                              <!-- 姓名： -->{{
                                $t("message.dataBoard.name") + ":"
                              }}{{ item.workerName }}
                            </p>
                            <p>
                              <!-- 年龄： -->{{
                                $t("message.dataBoard.age") + ":"
                              }}{{ item.age }}
                            </p>
                            <p>
                              <!-- 特种证书编号： -->{{
                                $t("message.dataBoard.certificateNumber") + ":"
                              }}{{ item.certificateNumber }}
                            </p>
                            <p>
                              <!-- 上岗时间： -->{{
                                $t("message.dataBoard.workTime") + ":"
                              }}{{ item.enterDate }}
                            </p>
                          </div>
                          <img
                            width="80"
                            height="90"
                            :src="fileUrl + item.fieldAcquisitionUrl"
                            @click="openImg(fileUrl + item.fieldAcquisitionUrl)"
                            alt=""
                            style="
                              display: inline-block;
                              vertical-align: middle;
                            "
                          />
                        </div>
                      </vue-scroll>
                      <div v-else style="text-align: center">
                        <img
                          style="height: 150px; margin-top: 40px"
                          src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
                          alt=""
                        />
                        <p>
                          <!-- 暂无数据 -->
                          {{ $t("message.dataBoard.nodata") }}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="dialogBlock">
                    <div class="dialogBlockContent">
                      <div class="blockTitle blockTitle2">
                        <i></i>
                        <!-- 报警信息 -->
                        {{ $t("message.dataBoard.alarmInfo") }}
                      </div>
                      <div style="margin: 0px !important" class="deviceInfo">
                        <vue-scroll
                          v-if="lifterAlarmList.length != 0"
                          style="height: 200px"
                        >
                          <div
                            class="driverInfo"
                            v-for="(item, index) in lifterAlarmList"
                            :key="index"
                          >
                            <div class="TowerAlarm_item">
                              <p>
                                <!-- 设备名称: -->{{
                                  $t("message.dataBoard.devName2") + ":"
                                }}{{ item.devName }}
                              </p>
                              <p>
                                <!-- 报警时间： -->{{
                                  $t("message.dataBoard.alarmTime") + ":"
                                }}{{ transformTimestamp(item.addTime) }}
                              </p>
                              <p v-if="item.bottomAlarm" class="p1">
                                <!-- 下限位报警 -->{{
                                  $t("message.dataBoard.alarmTypeArray3")[0]
                                }}
                              </p>
                              <!--  <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>-->
                              <p v-if="item.fallAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[1]
                                }}<!-- 防坠器报警 -->
                              </p>
                              <p v-if="item.heightAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[2]
                                }}<!-- 高度报警 -->
                              </p>
                              <p v-if="item.motor1Alarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[3]
                                }}<!-- 1号电机报警 -->
                              </p>
                              <p v-if="item.motor2Alarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[4]
                                }}<!-- 2号电机报警 -->
                              </p>
                              <p v-if="item.motor3Alarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[5]
                                }}<!-- 3号电机报警 -->
                              </p>
                              <p v-if="item.obliguityXAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[6]
                                }}<!-- 倾角X报警 -->
                              </p>
                              <p v-if="item.obliguityYAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[7]
                                }}<!-- 倾角Y报警 -->
                              </p>
                              <p v-if="item.peopleCntAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[8]
                                }}<!-- 人数报警 -->
                              </p>
                              <p v-if="item.speedAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[9]
                                }}<!-- 速度报警 -->
                              </p>
                              <p v-if="item.topAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[10]
                                }}<!-- 防冲顶报警 -->
                              </p>
                              <p v-if="item.weightAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[11]
                                }}<!-- 载重报警 -->
                              </p>
                              <p v-if="item.windSpeedAlarm">
                                {{ $t("message.dataBoard.alarmTypeArray3")[12]
                                }}<!-- 风速报警 -->
                              </p>
                            </div>
                          </div>
                        </vue-scroll>
                        <div v-else style="text-align: center">
                          <img
                            style="height: 150px; margin-top: 40px"
                            src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
                            alt=""
                          />
                          <p>
                            <!-- 暂无数据 -->
                            {{ $t("message.dataBoard.nodata") }}
                          </p>
                        </div>
                      </div>
                    </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>载重(kg)</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>
        </el-dialog>
        <!-- 车辆监测弹框 -->
        <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>
                      <!-- 实时数据 -->
                      {{ $t("message.dataBoard.realData") }}
                    </div>
                    <div class="leftTopInner">
                      <div class="realTimeInfo2 fullHeight">
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ plantCap.pm10 }}</span>
                            {{ $t("message.dataBoard.onces")
                            }}<!-- 次 -->
                          </p>
                          <p>
                            <!-- 今日进场车次 -->
                            {{ $t("message.dataBoard.todayInCarOnces") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ plantCap.pm25 }}</span>
                            {{ $t("message.dataBoard.onces")
                            }}<!-- 次 -->
                          </p>
                          <p>
                            <!-- 今日出场车次 -->
                            {{ $t("message.dataBoard.todayOutCarOnces") }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ plantCap.pm10 }}</span
                            >{{ $t("message.dataBoard.onces")
                            }}<!--  次 -->
                          </p>
                          <p>
                            <!-- 白名单车辆数 -->{{
                              $t(
                                "message.dataBoard.numberOfVehiclesWhitelisted"
                              )
                            }}
                          </p>
                        </div>
                        <div class="dialogDataBox">
                          <p>
                            <span>{{ plantCap.pm25 }}</span
                            >{{ $t("message.dataBoard.onces") }}
                            <!-- 次 -->
                          </p>
                          <p>
                            <!-- 临时车辆数 -->
                            {{
                              $t("message.dataBoard.numberOfTemporaryVehicles")
                            }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dialogBlock">
                  <div class="dialogBlockContent">
                    <div class="blockTitle blockTitle2">
                      <i></i
                      ><!-- 车种进出统计 -->{{
                        $t("message.dataBoard.carTypeInAndOutTotal")
                      }}
                    </div>
                    <div class="chart"></div>
                  </div>
                </div>
              </div>

              <div class="bottom">
                <div class="dialogBlock">
                  <div class="dialogBlockContent">
                    <div class="blockTitle blockTitle2">
                      <i></i>
                      <!-- 进出记录 -->
                      {{ $t("message.dataBoard.inAndOutRecords") }}
                    </div>
                    <table class="dialogTable">
                      <thead>
                        <tr>
                          <th>
                            <!-- 车牌号 -->
                            {{ $t("message.dataBoard.carNo") }}
                          </th>
                          <th>
                            <!-- 进出时间 -->
                            {{ $t("message.dataBoard.inOrOutTime") }}
                          </th>
                          <th>
                            <!-- 进出标识 -->
                            {{ $t("message.dataBoard.inOrOutMark") }}
                          </th>
                          <th>
                            <!-- 车牌颜色 -->
                            {{ $t("message.dataBoard.plateColor") }}
                          </th>
                          <th>
                            <!-- 抓拍照片 -->
                            {{ $t("message.dataBoard.paparazziPhotos") }}
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>1</td>
                          <td>1</td>
                          <td>1</td>
                          <td>
                            <img src="" alt="" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="environBox pointDialog_s"
          v-show="showCarDialog2"
          :style="{ position: 'absolute', left: carBoxPos.x, top: carBoxPos.y }"
        >
          <div class="title">
            {{ carDetail.name }} -
            <!-- 实时数据 -->{{ $t("message.dataBoard.realData") }}
            <span class="closeBtn" @click="showCarDialog2 = false">
              <i class="el-icon-close"></i>
            </span>
          </div>
          <vue-scroll>
            <div style="width: 330px; height: 230px">
              <div
                class="carData"
                v-for="(item, index) in carList"
                :key="index"
              >
                <img
                  :src="$store.state.FILEURL + item.imageUrl"
                  alt=""
                  style="width: 65px; height: 65px"
                />
                <div class="carInfo">
                  <div v-show="item.type === 0">
                    {{ $t("message.dataBoard.inOrOutType")[0]
                    }}<!-- 进出类型:进 -->
                  </div>
                  <!-- //进出类型 -->
                  <div v-show="item.type === 1">
                    {{ $t("message.dataBoard.inOrOutType")[1]
                    }}<!-- 进出类型:出 -->
                  </div>
                  <!-- //进出类型 -->
                  <div>
                    {{ $t("message.dataBoard.carNo") + ":"
                    }}{{ item.carNumber }}
                  </div>
                  <!-- //车牌号 -->
                  <div>
                    <!-- 通过时间: -->{{ $t("message.dataBoard.passTime") + ":"
                    }}{{ item.passTime }}
                  </div>
                  <!-- //时间 -->
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
        <!--龙门吊-->
        <!-- 龙门吊监测 -->
        <el-dialog
          class="dialog-wrapper"
          @close="closeMap"
          :title="$t('message.dataBoard.devTypeList')[8].name"
          :visible.sync="showGantryCrane"
          :modal-append-to-body="false"
          width="95%"
          top="0vh"
        >
          <div class="towerDialog pointDialog_l">
            <i class="closeBtn el-icon-error" @click="closeTowerDialog"></i>
            <div class="pointDialogContent">
              <div class="showGantryCrane_top">
                <div class="showGantryCrane_top_left">
                  <div class="operationInfo_towercrane">
                    <img
                      class="imgGantry"
                      src="../../projectLevel/assets/images/gantryCrane/gantry2.png"
                    />
                    <div ref="hookBox" class="hookBox">
                      <!--                    imgHeight:0,//照片升降高度-->
                      <!--                    hookLeft:0//divhook向左移动距离-->
                      <div class="hook" :style="{ left: hookLeft + 'px' }">
                        <img
                          class="imgHead"
                          ref="imgHead"
                          src="../../projectLevel/assets/images/gantryCrane/head.png"
                          alt=""
                        />
                        <img
                          :style="{ height: imgHeight + 45 + 'px' }"
                          class="imgMid"
                          src="../../projectLevel/assets/images/gantryCrane/mid.png"
                          alt=""
                        />
                        <img
                          class="imgBottom"
                          src="../../projectLevel/assets/images/gantryCrane/bottom.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="showGantryCrane_top_right">
                  <div class="driverInformationBox">
                    <div class="driverInformationTitle">
                      <!-- 司机信息 -->{{ $t("message.dataBoard.driverInfo2") }}
                    </div>
                    <div class="driverInformation">
                      <div class="driverInformationName">
                        {{ $t("message.dataBoard.name") + ":"
                        }}<!-- 姓名： -->{{
                          gantryCraneOperationInfo.driverName
                        }}
                      </div>
                      <div class="driverInformationIDCard">
                        {{ $t("message.dataBoard.gender") + ":"
                        }}<!-- 性别： -->{{
                          getInfo(gantryCraneOperationInfo.driverIdCard).sex ==
                          "- -"
                            ? "- -"
                            : getInfo(gantryCraneOperationInfo.driverIdCard)
                                .sex == 1
                            ? "男"
                            : "女"
                        }}
                      </div>
                      <div class="driverInformationName">
                        {{ $t("message.dataBoard.idCardNo") + ":"
                        }}<!-- 身份证号： -->{{
                          gantryCraneOperationInfo.driverIdCard
                            ? gantryCraneOperationInfo.driverIdCard
                            : "- -"
                        }}
                      </div>
                      <div class="driverInformationAge">
                        {{ $t("message.dataBoard.age") + ":"
                        }}<!-- 年龄： -->{{
                          getInfo(gantryCraneOperationInfo.driverIdCard).age
                        }}
                      </div>
                      <!--                      <div class="driverInformationWorkingYears">工作年限：3</div>-->
                    </div>
                  </div>
                  <div class="equipmentInformationBox">
                    <div class="equipmentInformationTitle">
                      <!-- 设备信息 -->
                      {{ $t("message.dataBoard.devInfo") }}
                    </div>
                    <div class="equipmentInformation">
                      <div class="equipmentInformationName">
                        <!-- 设备名称： -->{{
                          $t("message.dataBoard.devName2") + ":"
                        }}{{ gantryCraneInfo.devName }}
                      </div>
                      <div class="equipmentInformationQualified">
                        <!-- 出厂日期： -->
                        {{ $t("message.dataBoard.dateOfProduction") + ":" }}
                        {{ transformTimestamp(gantryCraneInfo.factoryTime) }}
                      </div>
                      <div class="equipmentInformationRegister">
                        <!-- 安装时间： -->
                        {{ $t("message.dataBoard.installTime") + ":" }}
                        {{
                          transformTimestamp(gantryCraneInfo.installationTime)
                        }}
                      </div>
                      <div class="equipmentInformationWidth">
                        <!-- 额定跨度： -->
                        {{ $t("message.dataBoard.ratedSpan") + ":" }}
                        {{ gantryCraneInfo.ratedSpan }},
                      </div>
                      <div class="equipmentInformationHeight">
                        <!-- 额定高度： -->
                        {{ $t("message.dataBoard.rateHeight") + ":" }}
                        {{ gantryCraneInfo.ratedHeight }}m
                      </div>
                      <div class="equipmentInformationWeight">
                        <!-- 额定吊重 -->
                        {{ $t("message.dataBoard.rateWeight") + ":" }}
                      </div>
                      <div class="liftingWeight">
                        <div class="MainHook1">
                          <!-- 小车1主钩： -->{{
                            $t("message.dataBoard.smallCarList")[0] + ":"
                          }}{{ gantryCraneInfo.mainHangerRatedLoad }}t
                        </div>
                        <div class="AuxiliaryHook1">
                          {{ $t("message.dataBoard.smallCarList")[1] + ":"
                          }}<!-- 小车1副钩： -->{{
                            gantryCraneInfo.auxiliaryHangerRatedLoad
                              ? gantryCraneInfo.auxiliaryHangerRatedLoad
                              : "- -"
                          }}t
                        </div>
                        <div class="MainHook2">
                          {{ $t("message.dataBoard.smallCarList")[2] + ":"
                          }}<!-- 小车2主钩： -->{{
                            gantryCraneInfo.secondMainHangerRatedLoad
                              ? gantryCraneInfo.secondMainHangerRatedLoad
                              : "- -"
                          }}t
                        </div>
                        <div class="AuxiliaryHook2">
                          {{ $t("message.dataBoard.smallCarList")[3] + ":"
                          }}<!-- 小车2副钩： -->{{
                            gantryCraneInfo.secondAuxiliaryHangerRatedLoad
                              ? gantryCraneInfo.secondAuxiliaryHangerRatedLoad
                              : "- -"
                          }}t
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="showGantryCrane_bottom">
                <div class="operationData">
                  <div class="operationData_item">
                    <p>
                      <!-- 风速 -->
                      {{ $t("message.dataBoard.windSpeed") }}
                    </p>
                    <p>
                      {{
                        gantryCraneOperationInfo.windSpeed
                          ? gantryCraneOperationInfo.windSpeed
                          : "- -"
                      }}m/s
                    </p>
                  </div>
                  <div class="operationData_item">
                    <p><!-- 倾斜 -->{{ $t("message.dataBoard.incline") }}X</p>
                    <p>
                      {{
                        gantryCraneOperationInfo.angleXAxis !== ""
                          ? gantryCraneOperationInfo.angleXAxis
                          : "- -"
                      }}°
                    </p>
                  </div>
                  <div class="operationData_item">
                    <p><!-- 倾斜 -->{{ $t("message.dataBoard.incline") }}Y</p>
                    <p>
                      {{
                        gantryCraneOperationInfo.angleYAxis !== ""
                          ? gantryCraneOperationInfo.angleYAxis
                          : "- -"
                      }}°
                    </p>
                  </div>
                  <div class="operationData_item">
                    <p>
                      <!-- 小车位置 -->
                      {{ $t("message.dataBoard.smallCarLocation") }}
                    </p>
                    <p>
                      {{
                        gantryCraneOperationInfo.smallCraneRange
                          ? gantryCraneOperationInfo.smallCraneRange
                          : "- -"
                      }}m
                    </p>
                  </div>
                  <div class="operationData_item">
                    <p>
                      <!-- 小车1主钩位置 -->
                      {{ $t("message.dataBoard.smallCarList")[4] }}
                    </p>
                    <p>
                      {{
                        gantryCraneOperationInfo.smallCraneMainHookHeight
                          ? gantryCraneOperationInfo.smallCraneMainHookHeight
                          : "- -"
                      }}m
                    </p>
                  </div>
                  <div class="operationData_item">
                    <p>
                      <!-- 小车1主钩吊重 -->
                      {{ $t("message.dataBoard.smallCarList")[5] }}
                    </p>
                    <p>
                      {{
                        gantryCraneOperationInfo.smallCraneMainHookLoad
                          ? gantryCraneOperationInfo.smallCraneMainHookLoad
                          : "- -"
                      }}t
                    </p>
                  </div>
                </div>
                <div class="alarmData">
                  <div class="alarmData_item">
                    <p>
                      <!-- 大车行程超限 -->
                      {{ $t("message.dataBoard.smallCarList")[6] }}
                    </p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.largeCraneDistanceState == 0
                      "
                      class="alarmNormal alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.largeCraneDistanceState == 1 ||
                        gantryCraneOperationInfo.largeCraneDistanceState == 2
                      "
                      class="alarmWarning alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.largeCraneDistanceState == 3 ||
                        gantryCraneOperationInfo.largeCraneDistanceState == 4
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 小车行程超限 -->
                      {{ $t("message.dataBoard.smallCarList")[7] }}
                    </p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.smallCraneRangeState == 0 ||
                        gantryCraneOperationInfo.secondSmallCraneRangeState == 0
                      "
                      class="alarmNormal alarmP"
                    ></p>
                    <!--                    <p class="alarmWarning alarmP"></p>-->
                    <p
                      v-if="
                        gantryCraneOperationInfo.smallCraneRangeState == 1 ||
                        gantryCraneOperationInfo.smallCraneRangeState == 2 ||
                        gantryCraneOperationInfo.secondSmallCraneRangeState ==
                          1 ||
                        gantryCraneOperationInfo.secondSmallCraneRangeState == 2
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 风速 -->
                      {{ $t("message.dataBoard.windSpeed") }}
                    </p>
                    <p
                      v-if="gantryCraneOperationInfo.windSpeedState == 0"
                      class="alarmNormal alarmP"
                    ></p>
                    <p
                      v-if="gantryCraneOperationInfo.windSpeedState == 1"
                      class="alarmWarning alarmP"
                    ></p>
                    <p
                      v-if="gantryCraneOperationInfo.windSpeedState == 2"
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 大车倾斜 -->
                      {{ $t("message.dataBoard.smallCarList")[8] }}
                    </p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.angleXState == 0 ||
                        gantryCraneOperationInfo.angleYState == 0
                      "
                      class="alarmNormal alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.angleXState == 1 ||
                        gantryCraneOperationInfo.angleYState == 2
                      "
                      class="alarmWarning alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.angleXState == 2 ||
                        gantryCraneOperationInfo.angleYState == 2
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 起吊超重 -->
                      {{ $t("message.dataBoard.smallCarList")[9] }}
                    </p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.mainHookWeightState == 0 ||
                        gantryCraneOperationInfo.mainHookWeightState == 1 ||
                        gantryCraneOperationInfo.mainHookWeightState == 2 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          0 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          1 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          2 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          0 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          1 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          2 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          0 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          1 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          2
                      "
                      class="alarmNormal alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.mainHookWeightState == 3 ||
                        gantryCraneOperationInfo.mainHookWeightState == 4 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          3 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          4 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          3 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          4 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          3 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          4
                      "
                      class="alarmWarning alarmP"
                    ></p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.mainHookWeightState == 5 ||
                        gantryCraneOperationInfo.mainHookWeightState == 6 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          5 ||
                        gantryCraneOperationInfo.auxiliaryHookWeightState ==
                          6 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          5 ||
                        gantryCraneOperationInfo.secondMainHookWeightState ==
                          6 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          5 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
                          6
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 起吊高度超限 -->
                      {{ $t("message.dataBoard.smallCarList")[10] }}
                    </p>
                    <p
                      v-if="
                        gantryCraneOperationInfo.mainHookHeightState == 0 ||
                        gantryCraneOperationInfo.auxiliaryHookHeightState ==
                          0 ||
                        gantryCraneOperationInfo.secondMainHookHeightState ==
                          0 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookHeightState ==
                          0
                      "
                      class="alarmNormal alarmP"
                    ></p>
                    <!--                    <p class="alarmWarning alarmP"></p>-->
                    <p
                      v-if="
                        gantryCraneOperationInfo.mainHookHeightState == 1 ||
                        gantryCraneOperationInfo.auxiliaryHookHeightState ==
                          1 ||
                        gantryCraneOperationInfo.secondMainHookHeightState ==
                          1 ||
                        gantryCraneOperationInfo.secondAuxiliaryHookHeightState ==
                          1
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                  <div class="alarmData_item">
                    <p>
                      <!-- 机构碰撞 -->
                      {{ $t("message.dataBoard.smallCarList")[11] }}
                    </p>
                    <p
                      v-if="gantryCraneOperationInfo.largeCarSafeStatus == 0"
                      class="alarmNormal alarmP"
                    ></p>
                    <!--                    <p  class="alarmWarning alarmP"></p>-->
                    <p
                      v-if="
                        gantryCraneOperationInfo.largeCarSafeStatus == 1 ||
                        gantryCraneOperationInfo.largeCarSafeStatus == 2
                      "
                      class="alarmPolice alarmP"
                    ></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <div v-if="company != 'henan' " class="fullHeight aside">
        <div class="blockBox">
          <!-- 人脸闸机 -->
          <div class="blockTitle">
            {{ $t("message.companyDiagram.ufaceDev") }}
          </div>
          <div class="blockContent">
            <div class="devInfoBox">
              <div class="item">
                <img src="@/assets/images/dataBoard/uface.png" alt="" />
                <div>
                  <p class="num" style="color: #5181f6">
                    {{ ufaceList.length }}
                  </p>
                  <p>
                    <!-- 人脸闸机总数 -->
                    {{ $t("message.dataBoard.ufaceDev") }}
                  </p>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/dataBoard/inpeople.png" alt="" />
                <div>
                  <p class="num" style="color: #f67f51">{{ ufaceInCount }}</p>
                  <p>
                    <!-- 今日进场人数 -->
                    {{ $t("message.dataBoard.todayInPeople") }}
                  </p>
                </div>
              </div>
              <div class="list-box">
                <vue-scroll>
                  <div
                    class="list-item"
                    :class="item.deviceState == 2 ? 'offline' : 'online'"
                    v-for="(item, index) in ufaceList"
                    :key="index"
                  >
                    <span class="type" v-if="item.deviceState == 1">在线</span>
                    <span class="type" v-else>离线</span>
                    <p>{{ item.devName }}</p>
                    <span class="inNum">进场人数:{{ item.inTotalNum }}</span>
                    <span class="outNum">出场人数:{{ item.outTotalNum }}</span>
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="blockBox">
          <!-- AI分析 -->
          <div class="blockTitle">
            {{ $t("message.companyDiagram.AIAnalysis") }}
          </div>
          <div class="blockContent dataBoxContent">
            <div
              class="pieAnalyse2"
              ref="pieAnalyse"
              style="width: 100%; height: 60%"
            ></div>
            <img
              class="image"
              src="~@/assets/images/longguang/cutimage/AI_empty.png"
              alt=""
              v-show="!dangerAlarmTypeList.length"
            />
          </div>
        </div>
        <div class="blockBox">
          <!-- 环境监测 -->
          <div class="blockTitle">
            {{ $t("message.companyDiagram.environmentMonitor") }}
          </div>
          <div class="blockContent">
            <div class="devInfoBox">
              <div class="item">
                <img src="@/assets/images/dataBoard/online.jpg" alt="" />
                <div>
                  <p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
                  <p>
                    <!-- 在线设备 -->
                    {{ $t("message.dataBoard.onlineDev") }}
                  </p>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/dataBoard/offline.jpg" alt="" />
                <div>
                  <p class="num" style="color: #f67f51">{{ offlineDevNum }}</p>
                  <p>
                    <!-- 离线设备 -->
                    {{ $t("message.dataBoard.notOnlineDev") }}
                  </p>
                </div>
              </div>
              <div class="list-box">
                <vue-scroll>
                  <div
                    class="list-item"
                    :class="item.devOnline == 2 ? 'offline' : 'online'"
                    v-for="(item, index) in environmentDevList"
                    :key="index"
                  >
                    <span class="type" v-if="item.devOnline != 2">在线</span>
                    <span class="type" v-else>离线</span>
                    <p>{{ item.deviceName }}</p>
                    <span class="alarm" v-if="item.alarmNum"
                      >今日报警:{{ item.alarmNum }}</span
                    >
                    <span class="alarm" v-else>今日报警:0</span>
                  </div>
                </vue-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备类型切换 -->
      <div class="pointTabBox">
        <ul>
          <li
            @click="
              devType = item.id;
              devTypeIndex = index;
              showCarDialog2 = false;
              getAllDevPointList();
            "
            v-for="(item, index) in devTypeList"
            :key="index"
            :class="{ active: devTypeIndex == index }"
            v-if="
              company == 'nanchang' || (company != 'nanchang' && item.id != 99)
            "
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="placeholderBox placeholderBox2" v-else>
      <img src="@/assets/images/noData3.png" alt="" srcset="" />
      <p>
        <!-- 暂无数据，请去项目基本信息上传图纸 -->
        {{ $t("message.dataBoard.smallCarList")[12] }}
      </p>
    </div>
  </div>
</template>
<script>
import {
  getRealTimeDustNoiseDataApi,
  environmentDevList,
} from "@/assets/js/api/environmentManage";
import echarts from "echarts4";
import {
  selectDevCoordinateListApi,
  selectWorkerAttendanceByDevApi,
  selectVideoAlarmPageListApi,
  selectProjectDevCountListApi,
  selectTowerDevAlarmCountList,
  selectLifterDevAlarmCountList,
  selectVideoCountList,
  selectUfaceDevStatisticsList,
  selectEnvironmentDevAlaramCountList,
  getAllTowerDangerInfo,
  getAllLifterDangerInfo,
  getEnvironmentInfo,
  getAiVideoInfo,
  getAIDangerList,
} from "@/assets/js/api/dataBoard";
import { selectCarTotal } from "../../../assets/js/api/carManage.js";
import {
  getSelectTowerBySnApi,
  getTowerCurrentDataApi,
  selectTowerListApi,
  selectProjectTowerNewestCurrentDataListApi,
  getTowerAlarmListApi, //报警信息
  selectTowerNutByNutHostIdApi, //通过id查询螺母信息
} from "@/assets/js/api/towerCrane"; //塔吊
import {
  getSelectLifterBySnApi,
  getLifterCurrentDataApi,
  getSelectLifterWorkCycleListApi,
  getLifterAlarmApi,
} from "@/assets/js/api/lifter"; //升降机
import {
  getGantryCranelistApi, //查询设备列表
  getGantryCraneBySnApi, //通过设备devsn(设备编号)查询设备详情
  getNewestGantryCraneCurrentDataApi, //查询龙门吊设备最新一条实时数据
} from "@/assets/js/api/gantryCrane"; //龙门吊
import { getRealTimeDataApi } from "@/assets/js/api/electricBox"; //电箱
import {
  hidePluginWindow,
  showPluginWindow,
  unInitObjPlugin,
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
import areaTree from "@/components/areaTree";
import videoModule from "@/components/videoModule/videoModule";
import { getAITypeStatistics } from "@/assets/js/api/companyBigScreen.js";
var frontArmLength = 496; //图片塔吊臂长px
var height = 484; //图片塔吊高度px
// var frontArmLength = 332; //图片塔吊臂长px
// var height = 324; //图片塔吊高度px
var imgLeftWidth = 115; //塔吊图片司机距离左边距离px
var imgLeftHeight = 70; //塔吊图片司机距离上边距离px
// var imgLeftWidth = 76; //塔吊图片司机距离左边距离px
// var imgLeftHeight = 45; //塔吊图片司机距离上边距离px
var realWidth = 0; //实际塔吊臂长m
var realHeight = 0; //实际塔吊高度m
var $moveBox;
var $moveBox2;
var $xMove;
var $line;
var $line2;
export default {
  components: { areaTree, videoModule },
  data() {
    return {
      countDownTime: null,
      countDown: 5, //倒计时
      company: "",
      videoList: [],
      playList: [],
      svgTimer: null,
      // [
      //   { name: "全部", id: "" },
      //   { name: "视频监控", id: 4 },
      //   { name: "塔吊监测", id: 2 },
      //   { name: "升降机监测", id: 3 },
      //   { name: "车辆监测", id: 1 },
      //   { name: "用电监测", id: 5 },
      //   { name: "环境监测", id: 6 },
      //   { name: "人脸闸机", id: 7 },
      //   { name: "龙门吊监测", id: 9 },
      //   { name: "应急管理", id: 99 },
      // ],
      devTypeList: this.$t("message.dataBoard.devTypeList"),
      realTimeData: {},
      devTypeIndex: 0,
      imgWidthScale: 0, //工地图片与容器宽度的比例
      imgHeightScale: 0, //工地图片与容器高度的比例
      bgUrl: "", //施工图
      projectSn: "",
      fileUrl: "",
      devType: "",
      pointList: [],
      towerList: [], // 塔吊设备列表
      lifterList: [], // 升降机设备列表
      videoCountList: [], // 视频设备列表
      ufaceList: [], // 人脸闸机列表
      ufaceInCount: 0, //人脸闸机今日进场人数
      environmentDevList: [], //环境设备列表
      plantCapInterval: null,
      plantCap: {
        crc: "--",
        humidity: "--",
        noise: "--",
        plateHumidity: "--",
        plateTemperature: "--",
        pm10: "--",
        pm25: "--",
        pressure: "--",
        temperature: "--",
        tsp: "--",
        voltage: "--",
        winddirectionName: "--",
        windspeed: "--",
      },
      showEnvironDialog: false,
      environDevDetail: { name: "" },
      environBoxPos: {
        x: 0,
        y: 0,
      },
      showVideoDialog: false,
      showVideoDialog2: false,
      faceDevDetail: { name: "", devSn: "", x: 0, y: 0 },
      showFaceDevDialog: false,
      faceDevDialogData: {
        list: [],
        totalAttendance: { inTotalNum: 0, outTotalNum: 0 },
        ufaceDev: { deviceState: 1 },
      },
      showTowerDialog: false,
      showLifterDialog: false,
      showEletricDialog: false,
      electricRealTimeData: {
        phaseCurrentA: "--",
        voltageB: "--",
        phaseCurrentB: "--",
        voltageC: "--",
        phaseCurrentC: "--",
        cableTemperatureA: "--",
        cableTemperatureB: "--",
        cableTemperatureC: "--",
        ambientTemperature: "--",
        electricLeakage: "--",
        voltageA: "--",
        uploadTime: "--",
      },
      electricBoxPos: {
        x: 0,
        y: 0,
      },
      carBoxPos: {
        x: 0,
        y: 0,
      },
      carList: [],
      carDetail: {
        name: "",
      },
      electricDevDetail: { name: "ddd", devSn: "" },
      showCarDialog: false,
      showCarDialog2: false,
      towerBasicInfo: {}, //塔吊基本信息,
      towerBasicInfoDriverList: [],
      nutHostId: "", //螺母主机id
      towerCurrentInfo: {}, //塔吊实时信息
      coordData: {
        coordX: 0,
        coordY: 0,
        lineLength: 0,
      },
      hideGoods: false,
      selectList: [], //视频数据源
      videoId: "",
      towerInterval: null, // 塔吊定时器
      lifterInfo: {}, //升降机基本信息,
      lifterInfoDriverList: [],
      lifterWorkCycleList: [], //升降机循环工作列表
      lifterCurrentData: {}, //升降机实时数据
      showHeight: 0,
      lifterInterval: null, //升降机定时器
      videoAlarmList: [],
      timer1: null,
      lifterAlarmList: [],
      activeLiveData: "",
      videoAlarmTimer: null,
      getTowerDriverInfoTimer: null, //实时获取塔吊信息,
      TowerAlarmList: [], //报警信息
      TowerWarningList: [], //预警信息
      floorNum: "", //高度百分比
      onece: false,
      showGantryCrane: false, //龙门吊
      imgHeight: 0, //照片升降高度
      hookLeft: 0, //divhook向左移动距离
      showBoltDetails: false, //显示隐藏螺母
      afterAnalysisDataInfo: "", //螺母信息
      gantryCraneInfo: "", //龙门吊信息
      gantryCraneOperationInfo: "", //运行数据
      gantryCraneInterval: null, //龙门吊实时数据计时器
      showTitle1: false,
      showTitle2: false,
      showTitle3: false,
      showTitle4: false,
      showTitle5: false,
      showTitle6: false,
      showTitle7: false,
      showTitle8: false,
      weightSet: "",
      towerHeightList: "",
      svgDom: Object,
      styleType: "",
      isDockingToWoer: "",
      isIframe: false,
      boxSize: "",
      totalTowerDev: 0, //塔吊数量
      totalDangerTowerDev: 0, // 塔吊报警数量
      totalLifterDev: 0, //升降机数量
      totalDangerLifterDev: 0, //升降机报警数量
      environmentDevNum: 0, //环境设备数量
      environmentTotalAlarm: 0, // 环境设备报警数量
      videoDevNum: 0, // 视频设备数量
      mapContentHeight: 0, // mapContent与屏幕高度的比例
      mapContentWidth: 0, // mapContent与屏幕宽度的比例
      dangerAlarmTypeList: [], // 预警类型列表
      totalDangerAlarmType: 0,
      onlineDevNum: 0,
      offlineDevNum: 0,
    };
  },
  created() {
    this.company = COMPANY;
  },
  mounted() {
    // this.pieAnalyse2();
    this.isDockingToWoer = isDockingToWoer;
    this.styleType = this.$store.state.userInfo.styleType;
    console.log(this.company);
    this.projectSn = this.$store.state.projectSn;
    this.fileUrl = this.$store.state.FILEURL;
    this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
    this.getAlarmInfor();
    this.getAllDev();
    if (window.localStorage.getItem("isIframe")) {
      if (window.localStorage.getItem("isIframe") == "1") {
        this.isIframe = true;
        // this.$nextTick(()=>{
        //   setOffset(2180,360)
        // })
      }
      console.log(window.localStorage.getItem("isIframe"));
    }
    // this.getVideoAlarm()
    // this.videoAlarmTimer=setInterval(()=>{
    //   this.getVideoAlarm()
    // },5000)
    if (this.bgUrl) {
      this.countBoxSize(); //计算缩放比
      this.getAllDevPointList();
    }
    this.getDevTypeFn();
    this.getDevList();
    this.selectWorkerAttendanceByDev();
    this.pieAnalyse();
    this.countBoxSize();
  },
  computed: {
    changVideoSize() {},
    closeVideo() {},
    transformTimestamp() {
      return function (timestamp) {
        let a = new Date(timestamp).getTime();
        const date = new Date(a);
        const Y = date.getFullYear() + "-";
        const M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        const D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
        const h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        const m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        const s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); // 秒
        const dateString = Y + M + D + h + m + s;
        return dateString;
      };
    },
    nutPosition() {
      return function (num) {
        let a = num / this.towerBasicInfo.tower.nodeCount;
        return Math.ceil(a);
      };
    },
    getInfo() {
      return function (idCard) {
        if (idCard) {
          let sex = null;
          let birth = null;
          let myDate = new Date();
          let month = myDate.getMonth() + 1;
          let day = myDate.getDate();
          let age = 0;

          if (idCard.length === 18) {
            age = myDate.getFullYear() - idCard.substring(6, 10) - 1;
            sex = idCard.substring(16, 17);
            birth =
              idCard.substring(6, 10) +
              "-" +
              idCard.substring(10, 12) +
              "-" +
              idCard.substring(12, 14);
            if (
              idCard.substring(10, 12) < month ||
              (idCard.substring(10, 12) === month &&
                idCard.substring(12, 14) <= day)
            )
              age++;
          }
          if (idCard.length === 15) {
            age = myDate.getFullYear() - idCard.substring(6, 8) - 1901;
            sex = idCard.substring(13, 14);
            birth =
              "19" +
              idCard.substring(6, 8) +
              "-" +
              idCard.substring(8, 10) +
              "-" +
              idCard.substring(10, 12);
            if (
              idCard.substring(8, 10) < month ||
              (idCard.substring(8, 10) === month &&
                idCard.substring(10, 12) <= day)
            )
              age++;
          }

          if (sex % 2 === 0) sex = "0";
          // 性别代码 1代表男，0代表女，暂时不涉及其他类型性别
          else sex = "1";
          return { age, sex, birth };
        } else {
          return { age: "- -", sex: "- -" };
        }
      };
    },
    imgHeightWidth() {
      return this.$refs.bgPackImg.height / this.$refs.bgPackImg.width;
    },
  },
  beforeDestroy() {
    //清除实时获取塔吊信息
    clearInterval(this.gantryCraneInterval);
    clearInterval(this.countDownTime);
    if (this.getTowerDriverInfoTimer) {
      clearInterval(this.getTowerDriverInfoTimer);
    }
    if (this.towerInterval) {
      clearInterval(this.towerInterval);
    }
    //环境监测
    clearInterval(this.plantCapInterval);
    if (this.lifterInterval) {
      clearInterval(this.lifterInterval);
    }
    if (this.videoAlarmTimer) {
      clearInterval(this.videoAlarmTimer);
    }
    clearInterval(this.timer1);
  },
  methods: {
    // 计算点位的缩小比
    countBoxSize() {
      this.$nextTick(() => {
        setTimeout(() => {
          let el = document.querySelector(".mapContent");
          let imgDom = document.querySelector(".bgPackImg");
          console.log(el);
          console.log(this.$refs.bgPackImg);
          let boxwidth = el.offsetWidth;
          let boxHeight = el.offsetHeight;
          // let boxHeightWidth = boxHeight / boxwidth;
          // let mapContentHeight = window.screen.height / boxHeight;
          // let mapContentWidth = window.screen.width / boxwidth;
          // console.log(mapContentHeight)

          // this.mapContentHeight = mapContentHeight;
          // this.mapContentWidth = mapContentWidth;
          // imgDom.height = boxHeight;
          // imgDom.width = imgDom.height / this.imgHeightWidth;
          this.imgWidthScale = imgDom.naturalWidth / imgDom.width;
          this.imgHeightScale = imgDom.naturalHeight / imgDom.height;

          let boxWidthHalf = el.offsetWidth / 2;
          let imgWidthHalf = imgDom.width / 2;
          let leftMove = imgWidthHalf - boxWidthHalf;
          console.log(this.imgWidthScale, this.imgHeightScale);
          imgDom.style.top = 0;
          imgDom.style.left = -leftMove + "px";
        }, 200);
      });
    },
    // 实时获取塔吊回转角度
    selectTowerCurrentData() {
      selectProjectTowerNewestCurrentDataListApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          if (this.svgTimer) {
            clearTimeout(this.svgTimer);
          }
          console.log(res.result);
          for (let i = 0; i < this.towerHeightList.length; i++) {
            // let flag = false
            let id = this.towerHeightList[i].devSn;
            for (let j = 0; j < res.result.length; j++) {
              if (id == res.result[j].devSn) {
                this.towerHeightList[i].t2.attr({
                  // 前臂长
                  text:
                    this.$t("message.dataBoard.forearmLong") +
                    ":" +
                    res.result[j].forearmLength +
                    "m",
                });
                // res.result[j].currentdata.angle = Math.round(Math.random()*300)
                // this.towerHeightList[i].t3.attr({
                //     text: "回转：" + res.result[j].currentdata.angle + "°"
                // })
                // flag = true
                // console.log(this.towerHeightList[i].oldAngle)
                if (!this.towerHeightList[i].oldAngle) {
                  this.towerHeightList[i].oldAngle = 0;
                }
                // console.log(this.towerHeightList[i]);
                let oldrot = Number(this.towerHeightList[i].oldAngle),
                  newrot = Number(res.result[j].currentdata.angle),
                  _this = this;
                // console.log(newrot,oldrot)
                Snap.animate(
                  oldrot,
                  newrot,
                  function (value) {
                    // console.log(_this.towerHeightList[i].relatedX - _this.minX,_this.towerHeightList[i].relatedY,_this.minY);
                    oldrot = value;
                    // console.log(_this.towerHeightList[i])
                    if (!isNaN(value)) {
                      // 旋转
                      // console.log(_this.towerHeightList[i].relatedX - this.minX,_this.towerHeightList[i].relatedY- this.minY);
                      _this.towerHeightList[i].t2.transform(
                        new Snap.Matrix().rotate(
                          value,
                          _this.towerHeightList[i].relatedX - _this.minX,
                          _this.towerHeightList[i].relatedY - _this.minY
                        )
                      );
                      _this.towerHeightList[i].b.transform(
                        new Snap.Matrix().rotate(
                          value,
                          _this.towerHeightList[i].relatedX - _this.minX,
                          _this.towerHeightList[i].relatedY - _this.minY
                        )
                      );
                      // _this.towerHeightList[i].d.transform(new Snap.Matrix().rotate(value[0], _this.towerHeightList[i].relatedX - _this.minX, (_this.towerHeightList[i].relatedY - _this.minY)).translate(0, -value[1]));
                    }
                  },
                  500
                );
                this.towerHeightList[i].oldAngle = newrot;

                // console.log(this.towerHeightList[i].t2)
              }
            }
          }
          this.svgTimer = setTimeout(() => {
            this.selectTowerCurrentData();
          }, 5000);
        }
        // console.log(res, '-----实时回转角度')
      });
    },
    // 获取塔群高度
    selectTowerHeight(val) {
      console.log(val.devSn);
      // this.heightList = this.heightList.reverse()
      selectTowerListApi({ projectSn: this.projectSn }).then((res) => {
        console.log(res.result);
        if (res.code == 200) {
          let maxHeight = 0;
          res.result.forEach((item) => {
            if (item.referenceHeight + item.towerHeight > maxHeight) {
              maxHeight = item.referenceHeight + item.towerHeight;
            }
          });
          res.result.forEach((item) => {
            item.heightRatio =
              (item.referenceHeight + item.towerHeight) / maxHeight;
            item.coordinateX = item.coordinateX ? item.coordinateX : "0";
          });
          this.towerHeightList = res.result;
          // 塔吊
          console.log(res.result, "-----" + this.$t("message.dataBoard.tower"));
          this.$nextTick(() => {
            this.createSvg(val.devSn);
            var panZoomTiger = svgPanZoom("#svg");
          });
        }
      });
    },
    // 绘制塔群
    createSvg(val) {
      console.log(this.towerHeightList);
      this.svgDom = Snap("#svg");
      this.towerHeightList.forEach((item) => {
        if (item.relatedX) {
          this.minX = item.relatedX;
          this.minY = item.relatedY;
        }
      });
      console.log(
        this.towerHeightList[0].relatedX,
        this.towerHeightList[0].relatedY
      );
      // console.log(this.minX);
      this.towerHeightList.forEach((item) => {
        console.log(item.relatedX < this.minX && item.relatedX != "");
        if (item.relatedX < this.minX && item.relatedX != "") {
          this.minX = item.relatedX;
          this.minY = item.relatedY;
        }
      });
      // console.log(this.minX,this.minY);
      this.towerHeightList.forEach((item) => {
        if (item.relatedX || item.relatedY) {
          let color = "";
          let color2 = "";
          if (val == item.devSn) {
            color = "#C9A623";
            color2 = "rgba(201, 166, 35, 0.14)";
          } else {
            color = "#FE6565";
            color2 = "rgba(255, 87, 94, 0.12)";
          }
          console.log(
            item.relatedX - this.minX,
            item.relatedY - this.minY,
            item.devName
          );
          item.a = this.svgDom.paper
            .circle(
              (item.relatedX - this.minX).toFixed(2),
              (item.relatedY - this.minY).toFixed(2),
              item.forearmLength
            )
            .attr({
              fill: color2,
              stroke: color,
              strokeWidth: 1,
            });
          item.b = this.svgDom.paper
            .line(
              (item.relatedX - this.minX).toFixed(2),
              Number((Number(item.relatedY) - this.minY).toFixed(2)) +
                Number(item.posteriorArmLength),
              (item.relatedX - this.minX).toFixed(2),
              (item.relatedY - this.minY - item.forearmLength).toFixed(2)
            )
            .attr({
              // fill: "rgba(255, 87, 94, 0.12)",
              stroke: color,
              strokeWidth: 1,
            });
          item.c = this.svgDom.paper
            .circle(
              (item.relatedX - this.minX).toFixed(2),
              (item.relatedY - this.minY).toFixed(2),
              2
            )
            .attr({
              fill: color,
              stroke: color,
              strokeWidth: item.forearmLength / 8,
            });

          item.t1 = this.svgDom.paper
            .text(
              (Number(item.relatedX) - this.minX).toFixed(2) - 6,
              (Number(item.relatedY) - this.minY).toFixed(2) + 6,
              [item.devName ? item.devName : ""]
            )
            .attr({
              fill: "rgba(255, 255, 255, 0.8)",
              fontSize: 9,
            });

          // if(this.styleType == 1 || isDockingToWoer){
          //     item.t1.attr({
          //         fill: "#2A2E3F"
          //     })
          // }
          item.t2 = this.svgDom.paper
            .text(
              (Number(item.relatedX) - this.minX).toFixed(2) - 6,
              (Number(item.relatedY) - this.minY).toFixed(2) -
                item.forearmLength / 2,
              [
                this.$t("message.dataBoard.forearmLong") + ":",
                item.forearmLength ? item.forearmLength : "0",
                "m",
              ]
            )
            .attr({
              fill: "rgba(255, 255, 255, 0.8)",
              fontSize: 9,
            });
          // if(this.styleType == 1 || isDockingToWoer){
          //     item.t2.attr({
          //         fill: "#2A2E3F"
          //     })
          // }
        }
      });

      this.selectTowerCurrentData();
    },
    openImg(src) {
      window.open(src);
    },
    closeInterval() {
      this.showEnvironDialog = false;
      clearInterval(this.plantCapInterval);
    },
    closeBoltDetails() {
      this.showBoltDetails = false;
    },
    nutDetails() {
      this.showBoltDetails = true;
      selectTowerNutByNutHostIdApi({
        nutHostId: this.towerBasicInfo.tower.nutHostId,
      }).then((res) => {
        if (res.code == 200) {
          this.afterAnalysisDataInfo = JSON.parse(res.result.afterAnalysisData);
          console.log(JSON.parse(res.result.afterAnalysisData));
        } else {
          this.$message.error(res.message);
        }
      });
      console.log(this.towerBasicInfo.tower.nutHostId);
      console.log(this.towerBasicInfo.tower.nodeCount);
    },
    closeMap() {
      this.showTowerDialog = false;
      clearTimeout(this.svgTimer);
      this.afterAnalysisDataInfo = "";
      this.showBoltDetails = false;
      this.showVideoDialog = false;
      // this.activeLiveData = ""
      this.playList = [];
      this.selectList = [];
      console.log(this.playList);
      if (this.getTowerDriverInfoTimer) {
        clearInterval(this.getTowerDriverInfoTimer);
      }
      if (this.towerInterval) {
        clearInterval(this.towerInterval);
      }
      if (this.lifterInterval) {
        clearInterval(this.lifterInterval);
      }
      clearInterval(this.countDownTime);
      this.countDown = 5;
      // unInitObjPlugin()
    },
    closeTowerDialog() {
      this.showTowerDialog = false;
      clearTimeout(this.svgTimer);
      this.showLifterDialog = false;
      this.showGantryCrane = false;
      //清除实时获取塔吊信息
      this.gantryCraneInfo = "";
      this.gantryCraneOperationInfo = "";
      clearInterval(this.gantryCraneInterval);
      if (this.getTowerDriverInfoTimer) {
        clearInterval(this.getTowerDriverInfoTimer);
      }
      if (this.towerInterval) {
        clearInterval(this.towerInterval);
      }
      if (this.lifterInterval) {
        clearInterval(this.lifterInterval);
      }
      clearInterval(this.countDownTime);
      this.countDown = 5;
    },
    move(x, y) {
      // ;
      // var x = randomNum(0,realWidth)
      // var y = randomNum(0,realHeight)
      var xImg, yImg;

      // if (x <= realWidth) {
      //     xImg = (x / realWidth) * frontArmLength + imgLeftWidth
      //     this.warningText=''
      //     if (y <= realHeight) {
      //         yImg = (y / realHeight) * height + imgLeftHeight
      //         this.warningText=''
      //     } else {
      //         yImg = height + imgLeftHeight
      //         this.warningText='当前设备高度参数错误'
      //     }
      // } else {
      //     xImg = frontArmLength + imgLeftWidth;
      //     this.warningText='当前设备前臂长参数错误'
      //     if (y <= realHeight) {
      //         yImg = (y / realHeight) * height + imgLeftHeight
      //     } else {
      //         yImg = height + imgLeftHeight
      //         this.warningText='当前设备前臂长,高度参数错误'
      //     }
      // }
      if (x <= realWidth) {
        xImg = (x / realWidth) * (frontArmLength - imgLeftWidth) + imgLeftWidth;
        this.warningText = "";
      } else {
        xImg = frontArmLength - imgLeftWidth;
        this.warningText = /* "当前设备前臂长参数错误"; */ this.$t(
          "message.dataBoard.errMessage4"
        );
      }
      console.log(
        realHeight,
        y,
        realHeight,
        height,
        imgLeftHeight,
        imgLeftHeight
      );
      if (y <= realHeight) {
        yImg = (y / realHeight) * (height - imgLeftHeight) + imgLeftHeight;
        // this.warningText = "";
      } else {
        yImg = height - imgLeftHeight;
        this.warningText = /* "当前设备高度参数错误"; */ this.$t(
          "message.dataBoard.errMessage"
        );
      }
      console.log(yImg);
      if (yImg > 380) {
        yImg = 380;
      }
      if (xImg < 90) {
        xImg = 90;
      }

      $moveBox.style.left = xImg - 6 + "px";
      $moveBox.style.top = yImg + "px";
      $moveBox2.style.left = xImg - 23 + "px";
      $moveBox2.style.top = yImg + "px";
      $xMove.style.left = xImg + "px";
      $line.style.left = xImg + 8 + "px";
      $line.style.height = yImg - 74 < 0 ? 0 : yImg - 74 + "px";
      $line2.style.left = xImg + 8 + "px";
      $line2.style.height = yImg - 122 < 0 ? 0 : yImg - 122 + "px";
    },
    // 获取所有设备信息
    getAllDev() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      //获取塔吊设备信息
      selectTowerDevAlarmCountList(data).then((res) => {
        if (res.code === 200) {
          this.towerList = res.result.devList;
          console.log(this.towerList);
        }
      });
      // 获取升降机设备信息
      selectLifterDevAlarmCountList(data).then((res) => {
        if (res.code === 200) {
          this.lifterList = res.result.devList;
          console.log(res);
        }
      });
      // 获取人脸闸机设备信息
      selectUfaceDevStatisticsList(data).then((res) => {
        if (res.code === 200) {
          this.ufaceList = res.result.devList;
          this.ufaceList.forEach((item) => {
            this.ufaceInCount += item.inTotalNum;
          });
        }
      });
      // 获取环境监测信息
      selectEnvironmentDevAlaramCountList(data).then((res) => {
        if (res.code === 200) {
          console.log(res.result.devList);
          this.environmentDevList = res.result.devList;
        }
      });
      let data2 = {
        sn: this.$store.state.projectSn,
      };
      // AI分析
      getAITypeStatistics(data2).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          console.log(result);
          this.dangerAlarmTypeList = result.alarmList;
          this.totalDangerAlarmType = result.totalAlarmNum;
          // console.log(result.alarmList)
          // console.log(this.dangerAlarmTypeList)
        }
        this.pieAnalyse();
      });
      // 视频设备数量
      selectVideoCountList(data).then((res) => {
        if (res.code === 200) {
          this.videoCountList = res.result;
        }
      });
    },
    // AI分析
    pieAnalyse() {
      console.log(this.$refs.pieAnalyse);
      let pieAnalyse = echarts.init(this.$refs.pieAnalyse, "dark");
      let total = this.totalDangerAlarmType;
      let dataArray = this.dangerAlarmTypeList.map((x) => {
        return {
          value: x.alarmNum,
          name: x.alarmTypeName,
        };
      });
      console.log(dataArray);
      pieAnalyse.setOption({
        color: [
          "#49B6A0",
          "#C16C28",
          "#F4A968",
          "#4378D8",
          "#D94916",
          "#9FD6F4",
          "#24A79A",
          "#786FF0",
        ],
        animation: false,
        legend: {
          show: true,
          orient: "vertical",
          icon: "circle",
          itemWidth: 5,
          itemHeight: 5,
          right: 60,
          itemGap: 20,
          formatter: function (params) {
            var tagvalue;
            for (var i = 0; i < dataArray.length; i++) {
              if (dataArray[i].name === params) {
                tagvalue = dataArray[i].value ? dataArray[i].value : "0";
              }
            }
            return `${params}    ${tagvalue}`;
          },
        },
        tooltip: {
          show: true,
        },
        backgroundColor: "rgba(3,6,9,0)",
        series: [
          {
            // name: '总数',
            type: "pie",
            center: ["25%", "50%"],
            radius: ["70%", "95%"],
            label: {
              normal: {
                show: true,
                position: "center",
                color: "white",
                formatter:
                  "{total|" + total + "}" + "\n\n" + "{active|预警总数}",
                rich: {
                  total: {
                    fontSize: 17,
                  },
                  active: {
                    fontSize: 14,
                    itemHeight: 15,
                    itemWidth: 50,
                    color: "rgba(254,254,254,0.3)",
                  },
                },
              },
            },
            data: dataArray,
          },
        ],
      });
    },
    //获取设备类型
    getDevTypeFn() {
      selectProjectDevCountListApi({ projectSn: this.projectSn }).then(
        (res) => {
          let arr = res.result;
          // "全部"
          var arr2 = [{ name: this.$t("message.dataBoard.all"), id: "" }];
          arr.forEach((element) => {
            if (element.num !== 0) {
              arr2.push({
                name: element.dev_name,
                id: element.dev_type,
              });
            }
          });

          if (this.company == "nanchang") {
            // 应急管理
            arr2.push({
              name: this.$t("message.dataBoard.emergencyManage"),
              id: 99,
            });
          }
          this.devTypeList = arr2;
        }
      );
    },
    clearTimer() {
      clearInterval(this.timer1);
    },
    //获取AI报警
    getVideoAlarm() {
      selectVideoAlarmPageListApi({
        projectSn: this.projectSn,
        pageNo: 1,
        pageSize: 50,
      }).then((res) => {
        this.videoAlarmList = res.result.records;
        if (this.videoAlarmList.length > 6) {
          this.$nextTick(() => {
            this.ScrollUp2();
          });
        }
      });
    },
    ScrollUp2() {
      var box = document.getElementById("detetion-box2");
      var con1 = document.getElementById("detetion-con1");
      var con2 = document.getElementById("detetion-con2");
      this.speed = 50;
      if (con1.offsetHeight >= box.offsetHeight) {
        con2.innerHTML = con1.innerHTML;
        this.timer1 = setInterval(scrol, this.speed);
        function scrol() {
          /*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0，否则就每个30默秒向上滚动1px */
          if (box.scrollTop >= con1.scrollHeight) {
            box.scrollTop = 0;
          } else {
            box.scrollTop++;
          }
          /*判断滚动的距离刚好为一条公告的高度时停掉定时器，隔1s之后重新启动计时器即可实现公告滚动停留效果 */
          // if (box.scrollTop % 25 == 0) {
          //   clearInterval(timer1);
          //   setTimeout(() => {
          //     timer1 = setInterval(scrol, 30);
          //   }, 2000);
          // }
        }
      }
    },
    closeVideoDialog() {
      this.showVideoDialog = false;
      this.playList = [];
    },
    getPlayParams(data) {
      console.log(1);
      if (!this.showVideoDialog) {
        this.videoList = data;
      } else {
        this.playList = data;
      }
    },
    clickPoint(item) {
      //升降机
      this.lifterInfo = {};
      this.lifterWorkCycleList = [];
      this.lifterCurrentData = {};
      this.lifterAlarmList = [];
      this.floorNum = "";
      //塔吊
      this.towerCurrentInfo = {};
      console.log(this.towerCurrentInfo);
      this.towerBasicInfo = [];
      this.TowerAlarmList = [];
      this.TowerWarningList = [];
      console.log(item.devType);
      switch (Number(item.devType)) {
        case 1:
          console.log(item);
          this.carBoxPos.x = parseFloat(item.mapX) + 50 + "px";
          this.carBoxPos.y =
            parseFloat(item.mapY) / this.imgWidthScale - 20 + "px";
          this.carDetail.name = item.name;
          this.getCarTotalList(item);
          this.showCarDialog2 = true;
          break;
        case 2:
          //塔吊
          this.showTowerDialog = true;
          if (this.company == "longguang") {
            this.selectTowerHeight(item);
          }
          this.$nextTick(async () => {
            //实时获取塔吊运行信息
            this.onece = true;
            this.getTowerDriverInfo(item.devSn);
          });
          break;
        case 3:
          //升降机
          this.showLifterDialog = true;
          this.getLifterDriverInfo(item.devSn);
          this.showHeight = 0;
          break;
        case 4:
          // this.activeLiveData = {}
          console.log(item);
          this.activeLiveData = item;
          this.showVideoDialog = true;
          // this.playList = []
          console.log(this.videoList, "video");
          this.videoList.forEach((element) => {
            if (element.devSn == item.devSn) {
              this.playList = [element];
            }
          });
          console.log(this.playList, "playlist");
          break;
        case 5:
          //电箱
          this.electricDevDetail = item;
          this.electricBoxPos.y = parseFloat(item.mapY) + 0 + "px";
          this.electricBoxPos.x =
            parseFloat(item.mapX) / this.imgWidthScale + 50 + "px";
          this.showEletricDialog = true;
          this.getElectricRealTimeData();
          break;
        case 6:
          this.environDevDetail = item;
          if (parseFloat(item.mapY) > 500) {
            this.environBoxPos.y = parseFloat(item.mapY) - 200 + "px";
          } else {
            this.environBoxPos.y = parseFloat(item.mapY) + 0 + "px";
          }
          if (parseFloat(item.mapX / this.imgWidthScale) > 510) {
            this.environBoxPos.x =
              parseFloat(item.mapX) / this.imgWidthScale - 350 + "px";
          } else {
            this.environBoxPos.x =
              parseFloat(item.mapX) / this.imgWidthScale + 50 + "px";
          }
          this.showEnvironDialog = true;
          this.getRealTimeDustNoiseData(item.devSn);
          break;
        case 7:
          this.faceDevDetail = item;
          if (parseFloat(item.mapY) > 650) {
            this.faceDevDetail.y = parseFloat(item.mapY) - 100 + "px";
          } else {
            this.faceDevDetail.y = parseFloat(item.mapY) + 0 + "px";
          }
          if (parseFloat(item.mapX) / this.imgWidthScale > 630) {
            this.faceDevDetail.x =
              parseFloat(item.mapX) / this.imgWidthScale - 150 + "px";
          } else {
            this.faceDevDetail.x =
              parseFloat(item.mapX) / this.imgWidthScale + 50 + "px";
          }
          this.showFaceDevDialog = true;
          this.selectWorkerAttendanceByDev();
          break;
        //龙门吊
        case 9:
          console.log(item);
          this.showGantryCrane = true;
          this.getGantryCraneBySn(item);
      }
    },
    getCarTotalList(item) {
      console.log(this.projectSn);
      let data = {
        cameraId: item.devSn,
        projectSn: this.projectSn,
      };
      selectCarTotal(data).then((res) => {
        console.log(res);

        if (res.code === 200) {
          let { result } = res;
          this.carList = result;
        }
      });
    },
    //获取当前龙门吊的数据 当前龙门吊司机 当前龙门吊视频 当前设备基本信息
    getGantryCraneBySn(item) {
      let data = {
        devSn: item.devSn,
      };
      getGantryCraneBySnApi(data).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.gantryCraneInfo = res.result.lifter;
          //获取设备的实时数据
          this.getRealTimeData(item.devSn);
        }
      });
    },
    //获取实时数据
    getRealTimeData(devSn) {
      let data = {
        devSn: devSn,
      };
      getNewestGantryCraneCurrentDataApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.result) {
            this.gantryCraneOperationInfo = res.result;
            //动画
            console.log(
              this.gantryCraneInfo.ratedSpan,
              res.result.smallCraneMainHookHeight
            );
            if (
              this.gantryCraneInfo.ratedSpan <
                res.result.smallCraneMainHookHeight ||
              res.result.smallCraneMainHookHeight < 0
            ) {
              // 当前高度参数错误
              this.$message.error(this.$t("message.dataBoard.errMessage3"));
            } else {
              // imgHeight:0,//照片升降高度
              //     hookLeft:0//divhook向左移动距离
              //照片升降高度
              this.imgHeight =
                (260 * res.result.smallCraneMainHookHeight) /
                this.gantryCraneInfo.ratedHeight;
              // console.log(this.imgHeight);
              //divhook向左移动距离
              // console.log(this.$refs.hookBox.offsetWidth,res.result.smallCraneMainHookHeight);
              this.hookLeft =
                (this.$refs.hookBox.offsetWidth * res.result.smallCraneRange) /
                this.gantryCraneInfo.ratedSpan;
              console.log(this.hookLeft);
              // //额定跨度
              // this.lifter.ratedSpan
              // //额定高度
              // this.lifter.ratedHeight
              // //div高380px
              // //div宽
              // this.$refs.hookBox.offsetWidth
            }
            this.gantryCraneInterval = setTimeout(() => {
              this.getRealTimeData(devSn);
            }, 5000);
          } else {
            this.imgHeight = 0;
            this.hookLeft = 0;
          }
        }
      });
    },
    //判断弹框位置
    // getPosition(x){
    //   if(x<185){
    //     return 0
    //   }else{
    //     return x
    //   }
    // },
    getDevIcon(type) {
      switch (Number(type)) {
        case 1:
          return require("@/assets/images/dataBoard/devIcon-car.png");
          break;
        case 2:
          return require("@/assets/images/dataBoard/devIcon-tower.png");
          break;
        case 3:
          return require("@/assets/images/dataBoard/devIcon-lifter.png");
          break;
        case 4:
          return require("@/assets/images/dataBoard/devIcon-camera.png");
          break;
        case 5:
          return require("@/assets/images/dataBoard/devIcon-electric.png");
          break;
        case 6:
          return require("@/assets/images/dataBoard/devIcon-green.png");
          break;
        case 7:
          return require("@/assets/images/dataBoard/devIcon-face.png");
          break;
        case 9:
          return require("@/assets/images/dataBoard/devIcon-gantryCrane.png");
          break;
      }
    },
    // 获取所有点位
    getAllDevPointList() {
      if (this.lifterInterval) {
        clearInterval(this.lifterInterval);
      }
      if (this.towerInterval) {
        clearInterval(this.towerInterval);
      }
      clearInterval(this.countDownTime);
      let data = {
        projectSn: this.projectSn,
        devType: this.devType,
      };
      // 获取设备信息
      selectDevCoordinateListApi(data).then((res) => {
        console.log('res: ', res);
        
        this.pointList = res.result;
        console.log(res.result);
        // [
        //   { name: "全部", id: "" },
        //   { name: "视频监控", id: 4 },
        //   { name: "塔吊监测", id: 2 },
        //   { name: "升降机监测", id: 3 },
        //   { name: "车辆监测", id: 1 },
        //   { name: "用电监测", id: 5 },
        //   { name: "环境监测", id: 6 },
        //   { name: "人脸闸机", id: 7 },
        //   { name: "龙门吊监测", id: 9 },
        //   { name: "应急管理", id: 99 },
        // ],
      });
    },
    //获取环境设备列表--环境监测实时数据--下拉
    getDevList() {
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          // console.log('列表', result)
          this.devList = result.result;
          console.log(this.devList);
          if (result.result.length > 0) {
            // this.currentDevDetail = result.result[0];
            this.offlineDevNum = 0;
            this.onlineDevNum = 0;
            this.devList.forEach((element) => {
              if (element.isClosed == 2) {
                this.offlineDevNum++;
              } else {
                this.onlineDevNum++;
              }
            });
            // console.log('645');
            this.getRealTimeDustNoiseData();
            this.realTimeDustNoiseDataTime = setInterval(() => {
              this.getRealTimeDustNoiseData();
            }, 5000);
            this.selectDustNoiseData();
          } else {
            // this.createCenterChart();
          }
        }
      );
    },
    // 获取设备数量
    getAlarmInfor() {
      let data = {
        sn: this.$store.state.projectSn,
      };
      // 获取塔吊数量
      getAllTowerDangerInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.totalTowerDev = result.devCount.devNum;
          this.totalDangerTowerDev = result.towerAlarmCount;
          console.log(result);
        }
      });
      // getAiVideoInfo
      // 获取升降机数量
      getAllLifterDangerInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.totalLifterDev = result.devCount.devNum;
          this.totalDangerLifterDev = result.lifterAlarmCount;
        }
      });
      // 获取环境监测数量
      getEnvironmentInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res;
          this.environmentDevNum = result.devTotal.devNum;
          this.environmentTotalAlarm = result.alarmTotal.totalAlarm;
        }
      });
      // // 获取报警列表数据
      // getAIDangerList(data).then((res) => {
      //   if (res.code === 200) {
      //     let { result } = res;
      //     console.log(result);
      //     let type = [
      //       "烟感",
      //       "明火",
      //       "人员倒地",
      //       "未戴安全帽",
      //       "区域入侵",
      //       "越界入侵",
      //       "人员聚集衣",
      //       "反光衣",
      //       "裸土覆盖",
      //     ];
      //     this.AIDangerAlarmList = result.slice(0, 6).map((x) => {
      //       return {
      //         createTime: x.createTime,
      //         hardwareName: x.hardwareName,
      //         id: x.id,
      //         imageUrl: x.imageUrl,
      //         location: x.location,
      //         projectName: x.projectName,
      //         alarmType: type[x.alarmType - 1],
      //       };
      //     });
      //   }
      //   this.pieAnalyse()
      // });
    },
    //获取环境设备详情数据
    getRealTimeDustNoiseData(deviceId) {
      let Id = deviceId;
      let data = {
        deviceId: deviceId,
        projectSn: this.projectSn,
      };
      getRealTimeDustNoiseDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.plantCap = res.result;
            this.plantCapInterval = setTimeout(() => {
              this.getRealTimeDustNoiseData(Id);
            }, 5000);
          } else {
            this.plantCap = {
              crc: "--",
              humidity: "--",
              noise: "--",
              plateHumidity: "--",
              plateTemperature: "--",
              pm10: "--",
              pm25: "--",
              pressure: "--",
              temperature: "--",
              tsp: "--",
              voltage: "--",
              winddirectionName: "--",
              windspeed: "--",
            };
          }
        }
      });
    },
    //获取人脸闸机数据
    selectWorkerAttendanceByDev() {
      selectWorkerAttendanceByDevApi({
        projectSn: this.projectSn,
        devSn: this.faceDevDetail.devSn,
      }).then((res) => {
        this.faceDevDialogData = res.result;
        console.log(this.faceDevDialogData);
      });
    },
    //获取电箱设备的实时数据
    getElectricRealTimeData() {
      let data = {
        devSn: this.electricDevDetail.devSn,
        projectSn: this.projectSn,
      };
      getRealTimeDataApi(data).then((res) => {
        if (res.code == 200) {
          console.log(res);
          if (res.result) {
            this.realTimeData = res.result;
          } else {
            this.electricRealTimeData = {
              phaseCurrentA: "--",
              voltageB: "--",
              phaseCurrentB: "--",
              voltageC: "--",
              phaseCurrentC: "--",
              cableTemperatureA: "--",
              cableTemperatureB: "--",
              cableTemperatureC: "--",
              ambientTemperature: "--",
              electricLeakage: "--",
              voltageA: "--",
              uploadTime: "--",
            };
          }
          console.log(this.realTimeData);
        }
      });
    },
    //获取单个塔吊预警信息
    getTowerWarningList(devSn) {
      let data = {
        devSn,
        projectSn: this.projectSn,
        alarmType: "2",
      };
      getTowerAlarmListApi(data).then((res) => {
        console.log(res.result);
        this.TowerWarningList = res.result.records;
      });
    },
    //获取单个塔吊设备信息
    getTowerDriverInfo(devSn) {
      let data = {
        devSn,
      };
      let getTowerAlarmListApiData = {
        devSn,
        projectSn: this.projectSn,
      };
      getTowerAlarmListApi(getTowerAlarmListApiData).then((res) => {
        console.log(res.result);
        this.TowerAlarmList = res.result.records;
      });
      this.getTowerWarningList(devSn);
      getSelectTowerBySnApi(data).then((res) => {
        console.log(1);
        if (res.code == 200) {
          console.log(res.result);
          this.towerBasicInfo = res.result;
          this.weightSet = res.result.tower.weightSet;
          this.towerBasicInfoDriverList = res.result.driverList;
          this.nutHostId = res.result.tower.nutHostId;
          realWidth = this.towerBasicInfo.tower.forearmLength;
          realHeight = this.towerBasicInfo.tower.towerHeight;
          if (res.result.tower.enableVideoUrl == 1) {
          } else {
            if (
              res.result.tower.videoUrl &&
              res.result.tower.videoUrl != "null"
            ) {
              this.towerBasicInfo.videoList = JSON.parse(
                res.result.tower.videoUrl
              );
            } else {
              this.towerBasicInfo.videoList = [];
            }
          }
          if (this.onece) {
            if (this.towerBasicInfo.videoList.length > 0) {
              this.getVideo(this.towerBasicInfo.videoList[0].id);
              this.videoId = this.towerBasicInfo.videoList[0].id;
            } else {
              this.videoId = "";
              this.selectList = [];
            }
            this.onece = false;
          }
          //先清除在创建
          this.getTowerCurrentData(devSn, res.result.tower);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //获取单个塔吊实时数据
    getTowerCurrentData(devSn, tower) {
      let data = {
        devSn,
      };
      // console.log(111);
      getTowerCurrentDataApi(data).then((res) => {
        clearInterval(this.countDownTime);
        this.countDown = 5;
        this.countDownTime = setInterval(() => {
          this.countDown--;
          if (this.countDown === 0) {
            clearInterval(this.countDownTime);
            this.countDown = 5;
          }
        }, 1000);
        clearInterval(this.towerInterval);
        this.towerInterval = setInterval(() => {
          this.getTowerCurrentData(devSn, this.towerBasicInfo.tower);
        }, 5000);
        console.log(res.result);
        if (res.code == 200) {
          if (res.result) {
            this.towerCurrentInfo = res.result
              ? res.result
              : this.towerCurrentInfo;
            var y = parseFloat(res.result.height);
            var x = parseFloat(res.result.ranger);
            //  this.$nextTick(() => {
            $moveBox = document.getElementById("moveBox");
            $moveBox2 = document.getElementById("moveBox2");
            $xMove = document.getElementById("xMove");
            $line = document.getElementById("line");
            $line2 = document.getElementById("line2");

            // });
            this.move(x, y);
            this.hideGoods = true;
            // 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) {
            //   this.hideGoods = false;
            //   // this.$message.error("当前设备前臂长参数错误");
            //   // console.log("当前设备前臂长参数错误")
            //   return;
            //   //实际塔高 < 实际吊钩Y位置
            // } else if (towerHeight < realityY || realityY < 0) {
            //   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.hideGoods = false;
          }
        } 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) {
          console.log(this.towerBasicInfo.videoList[i]);
          this.selectList = [this.towerBasicInfo.videoList[i]];
          return;
        }
      }
    },
    // 获取单个升降机报警信息
    getLifterAlarm(devSn) {
      getLifterAlarmApi({
        devSn,
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.lifterAlarmList = res.result.records;
        }
      });
    },
    //获取单个升降机设备信息
    getLifterDriverInfo(devSn) {
      console.log(devSn);
      this.getLifterAlarm(devSn);
      getSelectLifterBySnApi({ devSn }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.lifterInfo = res.result;
          this.lifterInfoDriverList = res.result.driverList;
          // this.getLifterWorkCycleList(devSn);
          this.getLifterCurrentDataList(devSn, res.result);
        } 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,
      };
      console.log(devData);
      getLifterCurrentDataApi(data).then((res) => {
        if (res.code == 200) {
          clearInterval(this.countDownTime);
          this.countDown = 5;
          this.countDownTime = setInterval(() => {
            this.countDown--;
            if (this.countDown === 0) {
              clearInterval(this.countDownTime);
              this.countDown = 5;
            }
          }, 1000);
          clearInterval(this.lifterInterval);
          this.lifterInterval = setInterval(() => {
            this.getLifterCurrentDataList(devSn, this.lifterInfo);
          }, 5000);
          if (res.result) {
            this.lifterCurrentData = res.result;
            let height = devData.lifter.maxHeight
              ? Number(devData.lifter.maxHeight)
              : 0; //实际升降机高度
            let nowHeight = res.result.height; //当前升降机所在高度
            console.log(res.result);
            console.log(nowHeight, height);

            console.log(nowHeight);
            console.log(this.floorNum);
            if (!height) {
              // 当前设备高度为零
              this.$message.error(this.$t("message.dataBoard.errMessage2"));
              return;
            }
            if (nowHeight > height || nowHeight < 0) {
              // 当前设备高度参数错误
              this.$message.error(this.$t("message.dataBoard.errMessage"));
              this.floorNum = "";
              // this.showHeight = 90;
              return;
            }
            let Num = (nowHeight / height) * 100;
            console.log(Num);
            this.floorNum = Num.toFixed(2);
            console.log("return");
            // let height = 100; //实际升降机高度  测试数据
            // let nowHeight = 100; //当前升降机所在高度 测试数据

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

            console.log(lifterHeight);
            let ratio = (lifterHeight - 42) / height;
            let showHeight = ratio * nowHeight + lifterBottom;
            this.showHeight = showHeight;
            // this.showHeight = this.showHeight
            console.log(this.showHeight, 1623);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
img {
  object-fit: cover;
}


.carData {
  display: flex;
  margin: 7px;
  .carInfo {
    text-align: start;
    margin-left: 10px;
    div {
      margin: 8px;
    }
  }
}

.red {
  color: red !important;
}
.dialogDataBox2 {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  margin-top: 100px;
}
.nutBox {
  cursor: pointer;
  position: absolute;
  top: 250px;
  left: -80px;
  width: 110px;
  height: 120px;
  padding: 13px;
  box-sizing: border-box;
  .nut {
    width: 80px;
  }
  span {
    color: #ffffff;
  }
}
.boltDetails {
  background: #142834;
  position: absolute;
  left: 30px;
  top: 140px;
  width: 484px;
  height: 280px;
  box-sizing: border-box;
  opacity: 0.8;
  .boltDetailsTitle {
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    height: 35px;
    border-bottom: 2px solid #234269;
    .closeBoltDetails {
      cursor: pointer;
      color: #5ce2f6;
      float: right;
    }
  }
  .boltDetailsImg {
    overflow: hidden;
    box-sizing: border-box;
    width: 184px;
    padding-top: 30px;
    display: inline-block;
    img {
      width: 184px;
    }
  }
  .boltDetailsRight {
    padding-right: 25px;
    overflow: hidden;
    display: inline-block;
    width: 275px;
    height: 220px;
    color: #fff;
    border-bottom: 2px solid #234269;
    .boltDetailsRight_top {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      height: 90px;
      border-bottom: 2px solid #234269;
      .boltDetailsRight_top_item {
        box-sizing: border-box;
        padding-top: 20px;
        height: 90px;
        p {
          font-size: 16px;
          color: #c5cacf;
        }
        .alarmNumber {
          color: red;
        }
        .itemTitle {
          margin-top: 10px;
          width: 90px;
          font-size: 20px;
          color: #9099a6;
        }
      }
    }
    .boltDetailsRight_bottom {
      .bottom_list {
        height: 130px;
        .listItem {
          padding-top: 20px;
          padding-left: 10px;
          text-align: left;
          height: 130px;
          div {
            font-size: 16px;
            margin-bottom: 10px;
          }
          span {
            color: #9099a6;
          }
        }
      }
    }
  }
}
.pointImg {
  position: absolute;
  left: 10px;
  top: 200px;
  width: 40px;
  height: 100px;
}
.showGantryCrane_top_left {
  margin-right: 50px;
  display: inline-block;
  width: 1100px;
  .operationInfo_towercrane {
    height: 450px;
    /*background: #121E37;*/
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #1a4c5a;
    .imgGantry {
      width: 100%;
      height: 100%;
    }
  }
  .hookBox {
    position: absolute;
    height: 402px;
    width: 64.5%;
    right: 13.5%;
    top: 35px;
  }
  .hook {
    position: absolute;
    width: 40px;
    text-align: center;
    transition: all 0.5s;
    img {
      width: 40px;
    }
    .imgMid {
      width: 20px;
      height: 50px;
      transition: all 0.5s;
    }
    /*display: flex;*/
    /*justify-content: center;*/
  }
}
.showGantryCrane_top_right {
  overflow: hidden;
  height: 450px;
  width: 400px;
  color: #fbfbfe;
  display: inline-block;
  .driverInformationBox {
    margin-bottom: 20px;
    text-align: left;
    .driverInformationTitle {
      box-sizing: border-box;
      padding: 6px;
      font-size: 24px;
      background: linear-gradient(to right, #3786d6, #182a3c);
    }
    .driverInformation {
      padding-top: 20px;
      font-size: 16px;
    }
  }
  .equipmentInformationBox {
    text-align: left;
    .equipmentInformationTitle {
      box-sizing: border-box;
      padding: 6px;
      font-size: 24px;
      background: linear-gradient(to right, #3786d6, #182a3c);
    }
    .equipmentInformation {
      padding-top: 20px;
      font-size: 16px;
      .liftingWeight {
        padding-left: 25px;
      }
    }
  }
}
.showGantryCrane_bottom {
  padding: 0px 40px;
  color: #fbfbfe;
  .operationData {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .operationData_item {
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 24px;
      text-align: center;
      height: 95px;
      width: 220px;
      border-right: 2px solid #0f1b30;
      border-bottom: 2px solid #0f1b30;
    }
  }
  .alarmData {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .alarmData_item {
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 24px;
      text-align: center;
      height: 95px;
      width: 200px;
      border-right: 2px solid #0f1b30;
      border-bottom: 2px solid #0f1b30;
      .alarmP {
        height: 4px;
        display: inline-block;
        width: 140px;
        border-radius: 4px;
        background: #9acd32;
      }
      .alarmWarning {
        background: #c9a623;
      }
      .alarmPolice {
        background: #fe6565;
      }
    }
  }
}

.el-dialog__wrapper {
  /deep/ .el-dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    .el-dialog__body {
      background: #262d47;
    }
    .el-dialog__header {
      background: #262d47;
      .el-dialog__title {
        color: #6ce9f0;
        font-size: 17px;
        font-weight: 900;
        .el-dialog__headerbtn {
          .el-dialog__close {
            color: #262d47;
          }
        }
      }
      .el-dialog__title::before {
        background: #262d47;
      }
    }
  }
}
.normal {
  color: #35d17e;
}
.alert {
  color: #e54948;
}
.TowerAlarm_item {
  // border:1px #5ce2f6 solid;
  // border-radius: 5px;
  width: 90%;
  padding: 10px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  p {
    width: 50%;
  }
  .p1 {
    width: 43%;
  }
  .p2 {
    width: 47%;
  }
}
.digitalSitePage {
  position: relative;
  width: 100%;
}
.mapContent {
  width: calc(54% - 60px);
  height: calc(100% - 100px);
  text-align: center;
  float: left;
  position: relative;
  margin: 0 30px;
  .mapUrl {
    display: inline-block;
    position: relative;
  }
}
.lgMapContent {
  text-align: left !important;
}
.pointTabBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  position: absolute;
  top: 90%;
  left: 25%;
  li {
    margin-right: 35px;
    width: 120px;
    height: 39px;
    background-image: url("../../../assets/images/dataBoard/box.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;
  height: 45px;
  P {
    font-size: 12px;
    &:first-child {
      margin-bottom: 3px;
      span {
        font-size: 18px;
      }
    }
  }
}
.pointDialog_l {
  width: 100%;
  height: 800px;
  padding-top: 1px;
  /*position: absolute;*/
  /*left: 0;*/
  /*top: 0;*/
  /*background-image: url("../../../assets/images/dataBoard/pointDialog_l_BG.png");*/
  background-size: 100% 100%;
  z-index: 3;
  /*background-color: #040d15;*/
  .closeBtn {
    position: absolute;
    right: 22px;
    top: 21px;
    font-size: 23px;
    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: 224px;
      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;
  .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;
        span {
          position: relative;
          div {
            position: absolute;
            background: #091936;
            border-radius: 5px;
            font-size: 14px;
            color: #ffffff;
            padding: 10px 20px;
            width: 190px;
            box-sizing: border-box;
            left: -200px;
            z-index: 10;
            top: -25px;
          }
          .showTitle1 {
            top: -25px;
          }
          .showTitle2 {
            top: -25px;
          }
          .showTitle3 {
          }
          .showTitle4 {
          }
          .showTitle5 {
          }
          .showTitle6 {
          }
          .showTitle7 {
          }
          .showTitle8 {
          }
        }
      }
    }
  }
}
.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);
    .realTimeInfo {
      margin: 20px 0px 20px 10px;
      text-align: left;
      p {
        margin-bottom: 10px;
        color: #fff;
        span {
          position: relative;
          div {
            position: absolute;
            background: #091936;
            border-radius: 5px;
            font-size: 14px;
            color: #ffffff;
            padding: 10px 20px;
            width: 190px;
            box-sizing: border-box;
            left: -200px;
            z-index: 10;
            top: -25px;
          }
          .showTitle1 {
            top: -25px;
          }
          .showTitle2 {
            top: -25px;
          }
        }
      }
    }
    .towerCrane {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      p {
        width: 50%;
        margin-bottom: 10px;
      }
    }
  }
  .driverInfo {
    margin-left: 10px;
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
  }
}
.liferDialog {
  .left {
    width: 100%;
    // 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);
      transition: all 0.5s;
    }
  }
  .leftBottom {
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    height: calc(40% - 10px);
    .dialogBlock {
      float: left;
      width: 33%;
      // 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;
  // margin: 50px auto 0;
  .rings,
  .line,
  .hock {
    position: absolute;
    // top: 0;
    // left: 0;
  }
}
/deep/.selectVideoBox {
  .el-input__inner {
    background-color: transparent;
    color: #fff;
  }
}
.alarmList {
  position: absolute;
  right: 10px;
  bottom: 100px;
  background-color: #193b43;
  border-radius: 3px;
  text-align: center;
  z-index: 2;
  .alarmTitle {
    padding-top: 10px;
  }
}
.transdata1 {
  // background: url("../../../static/img/transdata_bg.png") no-repeat center/100%
  //   100%;
  height: 220px;
  padding: 15px 20px 15px 20px;
  box-sizing: border-box;
  // transform: translateY(-12px);
}
.tody-table-header2 {
  overflow: hidden;
}

.tody-table-header2 li {
  height: 24px;
  width: 82px;
  line-height: 24px;
  list-style: none;
  float: left;
  font-size: 13px;
  margin-right: 20px;
  font-family: MicrosoftYaHei;
  color: rgba(127, 250, 255, 1);
  text-align: center;
  // background: url("../../../static/img/thead_bg.png") no-repeat center/100%;
  background-size: 100% 100%;
  &:last-child {
    width: 160px;
  }
}
.tody-table-header2 li:last-child {
  margin-right: 0;
}
#detetion-box2 {
  margin-top: 5px;
  height: 150px;
  overflow: hidden;
}
#detetion-box2 ul {
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#detetion-box2 li {
  width: 82px;
  height: 24px;
  line-height: 24px;
  float: left;
  margin-right: 20px;
  font-size: 12px;
  color: #fff;
  &:last-child {
    width: 160px;
  }
}
#detetion-box2 ul li:last-child {
  margin-right: 0;
}
.floatBtn {
  position: absolute;
  right: 10px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #193b43;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  z-index: 2;
}
.el-icon-minus {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
}
.gray {
  -webkit-filter: grayscale(90%);
  -moz-filter: grayscale(90%);
  -ms-filter: grayscale(90%);
  -o-filter: grayscale(90%);
  filter: grayscale(90%);
  filter: gray;
}
.towerRunBox {
  // width: 50%;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  // text-align: center;
}
.moveBox,
.xMove,
.lines {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s;
  // display: none;
}
.lines,
.xMove {
  top: 82px;
}
.lines {
  width: 10px;
  max-height: 340px;
}
.playVideoBox2 {
  width: calc(100% - 240px);
  margin-left: 240px;
}
.tower-time {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
}
//蓝色风格
.dataBoardPage_blue {
  .pointTabBox {
    li {
      background-image: url("../../../assets/images/dataBoard/blueTheme/tabBG.png");
      color: white;
      &.active {
        background-image: url("../../../assets/images/dataBoard/blueTheme/tabBG-active.png");
        color: #ffffff;
      }
    }
  }
  .pointDialog_l {
    background-image: none;
  }
  .dialogBlock {
    // background-color: #03032D;
    background-color: #262d47;
  }
  .pointDialog_s {
    background-color: #091750;
  }
}
// 湛蓝色
.dataBoardPage_blue2 {
  .pointTabBox {
    li {
      background-image: url("../../../assets/images/dataBoard/blueTheme2/tabBG.png");
      color: rgba(255, 255, 254, 0.8);
      &.active {
        background-image: url("../../../assets/images/dataBoard/blueTheme2/tabBG-active.png");
        color: #ffffff;
      }
    }
  }
  .pointDialog_l {
    background-image: none;
  }
  .dialogBlock {
    // background-color: #03032D;
    background-color: #262d47;
  }
  .pointDialog_s {
    background-color: #091750;
  }
}
.svg-box {
  margin-top: 20px;
  width: 100%;
  height: 320px;
  // border: 1px solid red;
}
.dialog_box {
  overflow: inherit;
  // /deep/.el-dialog__wrapper{
  //   overflow: inherit;
  // }
}
.isIframe {
  /deep/.isLongguangIframe {
    left: 1730px !important;
  }
}
/deep/.blockBox {
  height: calc(33.33% - 25px);
  margin-bottom: 25px;
  width: 100%;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../../../assets/images/dataBoard/blockBG.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    top: 0;
    z-index: 1;
  }
  .blockContent {
    padding: 10px 20px;
    height: calc(100% - 20px - 24px);
    position: relative;
    z-index: 2;
    .pieAnalyse2 {
      position: absolute;
      top: 20%;
      left: 4%;
    }
    .image {
      position: absolute;
      top: 15%;
      left: 30%;
    }
    .devInfoBox {
      display: flex;
      margin-bottom: 20px;
      flex-wrap: wrap;
      overflow: hidden;
      .item {
        display: inline-flex;
        align-items: center;
        flex: 1;
        img {
          margin-right: 7px;
          margin-left: 20px;
        }
        p {
          opacity: 0.8;
          font-size: 14px;
        }
        .num {
          opacity: 1;
          font-size: 20px;
        }
      }
      .videoCount,
      .onlineVideoCount {
        display: flex;
        height: 45px;
        line-height: 45px;
        flex: 1;
        color: #fff !important;
      }
      .videoCount {
        margin-left: 27px;
        padding-left: 10px;
        box-sizing: border-box;
        background-image: linear-gradient(
          to right,
          rgba(92, 226, 246, 0),
          rgba(92, 226, 246, 0.2)
        );
      }
      .onlineVideoCount {
        margin-right: 27px;
        background-image: linear-gradient(
          to left,
          rgba(92, 226, 246, 0),
          rgba(92, 226, 246, 0.2)
        );
        padding-left: 15px;
      }
      .list-box {
        overflow: hidden;
        height: 140px;
        box-sizing: border-box;
        margin-top: 15px;
        width: 370px;
        .list-item {
          height: 37px;
          width: 370px;
          line-height: 37px;
          display: flex;
          margin-top: 8px;
          p {
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 37px;
            overflow: hidden;
            line-height: 37px;
            flex: 2;
            padding: 0 10px;
          }
          .inNum {
            margin-right: 17px;
          }
          .outNum {
            margin-right: 17px;
          }
        }
        .online {
          // background-color: #0a2124;
          .type {
            display: inline-block;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            height: 18px;
            line-height: 18px;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 15px;
            background-color: #298372;
          }
          .alarm {
            margin-right: 41px;
          }
        }
        .offline {
          // background-color: #121a21;
          .type {
            display: inline-block;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            height: 18px;
            line-height: 18px;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 15px;
            background-color: #949494;
          }
          .alarm {
            margin-right: 41px;
          }
        }
      }
      .video {
        width: 370px;
        padding-left: 13px;
        box-sizing: border-box;
      }
    }
  }
}
.blockTitle3 {
  padding-left: 10px;
  color: #ffffff !important;
  font-weight: normal !important;
  &::before {
    content: "";
    display: inline-block;
    background-color: #fff;
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background-image: linear-gradient(#0054dd, #27a3e2);
  }
}

</style>
