<template>
  <div class="mapchild">
    <div class="bg">
      <transition name="myr">
        <iframe
          name="myframe"
          frameborder="0"
          width="100%"
          height="100%"
          style="position: absolute; background: black"
          ref="iframe"
          v-show="htStatus == 1"
          :src="unityUrl"
          allowfullscreen
        ></iframe>
      </transition>
      <transition name="my">
        <iframe
          name="htWeb"
          v-show="htStatus != 1"
          frameborder="0"
          width="100%"
          height="100%"
          style="position: absolute; background: black"
          ref="htWeb"
          :src="threeUrl"
          allowfullscreen
        ></iframe>
      </transition>
    </div>
    <transition name="my">
      <div
        class="xianmodel"
        v-show="xianShow"
        style="
          width: 1200px;
          height: 700px;
          position: absolute;
          background: rgb(4, 35, 69);
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 99999;
        "
      >
        <div
          class="top"
          style="
            width: 100%;
            height: 5%;
            font-size: 18px;
            padding: 5px 10px 0 0;
            color: #fff;
            text-align: right;
            cursor: pointer;
            box-sizing: border-box;
          "
          @click="handleXianfalse"
        >
          x
        </div>
        <!-- <div class="pic" style="width: 100%; height: calc(100% - 5%)"></div> -->
        <iframe :src="yiciSrc" style="width: 100%; height: calc(100% - 5%)"></iframe>
      </div>
    </transition>
    <transition name="my">
      <div
        v-show="mapShow"
        style="
          width: 40%;
          height: 50%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 99999;
        "
      >
        <div
          class="mapmodels"
          style="width: 100%; height: 100%; position: relative"
        >
          <div
            style="
              position: absolute;
              top: 0px;
              left: 42%;
              width: auto;
              height: 20px;
              font-size: 20px;
              font-size: 20px;
              margin-top: 10px;
              color: #ffffff;
            "
          >
            主展馆负一楼
          </div>
          <div
            style="
                position: absolute;
                top: 0px;
                right: 0px;
                width: 20px;
                height: 20px;
                color: #fff;
                cursor: pointer
                font-size:20px;
              "
            @click="handletanchuan"
          ></div>
          <div
            class="reddianno"
            style="
              width: 10px;
              height: 10px;
              position: absolute;
              top: 267px;
              left: 220px;
            "
            title="开关名称开关容量"
            @click="popShow"
          ></div>
          <div
            class="reddianno"
            style="
              width: 10px;
              height: 10px;
              position: absolute;
              top: 264px;
              left: 234px;
            "
            title="上级开关"
            @click="popShow"
          ></div>
          <div
            class="reddianno"
            style="
              width: 10px;
              height: 10px;
              position: absolute;
              top: 257px;
              left: 262px;
            "
            title="下级开关"
            @click="popShow"
          ></div>
          <div
            style="
              position: absolute;
              top: 140px;
              right: 320px;
              width: 100px;
              height: 100%;
              transform: rotate(45deg);
            "
          >
            <div
              class="reddian"
              style="position: absolute; top: 30px; left: 0px"
              @click="handledianwei"
            ></div>
          </div>
          <div
            style="
              width: 216px;
              height: 143px;
              position: relative;
              left: 39%;
              top: 21%;
            "
            class="popmodels"
            v-show="popInfoShow"
          >
            <div
              style="
                position: absolute;
                top: 0px;
                right: 0px;
                width: 13px;
                height: 20px;
                color: #fff;
                cursor: pointer
                font-size:20px;
              "
              @click="handlePop"
            >
              x
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="host-body">
      <HeaderIndex style="position: relative" :htStatus= 'htStatus' />
      <div class="main">
        <transition name="homeleaves">
          <div class="left" v-if="homeActive">
            <div class="leftmenus">
              <div class="menus">
              <div
                class="list"
                v-for="(item, index) in menusArr"
                :class="css_list[index]"
                :key="index"
                @click="handleMenus(index)"
                :style="{
                  backgroundImage:
                    menusActive != index
                      ? 'url(' + menubg.url + ')'
                      : 'url(' + menubg.actUrl + ')',
                }"
              >
                <p>{{ item.text }}</p>
                <img
                  :src="menusActive != index ? item.pic : item.actPic"
                  alt=""
                  style="margin-right: 10px"
                />
              </div>
            </div>
            </div>
            <div class="menshow"  style="margin-left:5px;cursor: pointer;" @click="handleMenufalse()">
            <img src="@/assets/newimgs/WechatIMG2.png" alt="">
          </div>
          </div>
        </transition>
        <transition name="homeleave">
          <div class="right" v-if="homeActive">
            <div class="infothings" v-if="menusActive == 0" v-show="infothingsShow">
              <div class="toptitle">配电房信息</div>
              <div class="info">
                <div
                  class="list"
                  :style="{
                    background:
                      index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                  }"
                  v-for="(item, index) in infoArr"
                  :key="index"
                >
                  <div>
                    <img :src="item.path" alt="" />
                    <span
                      style="color: #fff; margin-left: 10px; font-size: 14px"
                      >{{ item.name }}</span
                    >
                  </div>
                  <div class="text">
                    {{ item.text }}
                  </div>
                </div>
              </div>
              <div class="infos">
                <div
                  class="list"
                  :class="getBg[index]"
                  v-for="(item, index) in fuzaiArr"
                  :key="index"
                >
                  <div class="text" :style="{'margin-left':(index%2==0?'88px':'100px')}">
                    <span
                      v-if="index == 0"
                      style="
                        color: rgb(135, 237, 15);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 2px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 0"
                      style="color: rgb(135, 237, 15); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 1"
                      style="
                        color: rgb(252, 83, 251);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="(index == 1)"
                      style="color: rgb(252, 83, 251); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 2"
                      style="
                        color: rgb(102, 254, 255);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 2"
                      style="color: rgb(102, 254, 255); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 3"
                      style="
                        color: rgb(251, 157, 62);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 3"
                      style="color: rgb(251, 157, 62); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="infothings" v-if="menusActive == 0" v-show="!infothingsShow">
              <div class="toptitle">配电房信息</div>
              <div class="info">
                <div
                  class="list"
                  :style="{
                    background:
                      index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                  }"
                  v-for="(item, index) in infoArr1"
                  :key="index"
                >
                  <div>
                    <img :src="item.path" alt="" />
                    <span
                      style="color: #fff; margin-left: 10px; font-size: 14px"
                      >{{ item.name }}</span
                    >
                  </div>
                  <div class="text">
                    {{ item.text }}
                  </div>
                </div>
              </div>
              <div class="infos">
                <div
                  class="list"
                  :class="getBg[index]"
                  v-for="(item, index) in fuzaiArr1"
                  :key="index"
                >
                  <div class="text" :style="{'margin-left':(index%2==0?'78px':'100px')}">
                    <span
                      v-if="index == 0"
                      style="
                        color: rgb(135, 237, 15);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 2px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 0"
                      style="color: rgb(135, 237, 15); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 1"
                      style="
                        color: rgb(252, 83, 251);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="(index == 1)"
                      style="color: rgb(252, 83, 251); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 2"
                      style="
                        color: rgb(102, 254, 255);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 2"
                      style="color: rgb(102, 254, 255); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                    <span
                      v-if="index == 3"
                      style="
                        color: rgb(251, 157, 62);
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 3px;
                      "
                      >{{ item.vlaue }}</span
                    >
                    <span
                      v-if="index == 3"
                      style="color: rgb(251, 157, 62); font-size: 13px"
                      >{{ item.icon }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="envior" v-if="menusActive == 3" v-show="environmentShow">
              <div class="toptitle">环境信息</div>
              <div class="info">
                <div
                  class="list"
                  :style="{
                    background:
                      index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                  }"
                  v-for="(item, index) in eniorArr"
                  :key="index"
                 >
                  <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.name
                    }}</span>
                    <img
                      :src="item.path"
                      alt=""
                      style="width: 16px; height: 16px; margin-right: 20px"
                    />
                  </div>
                  <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.nametwo
                    }}</span>
                    <span
                      v-if="index != 2"
                      style="color: #fff; font-size: 13px"
                      >{{ item.value }}</span
                    >
                    <img
                      v-else
                      :src="item.value"
                      alt=""
                      style="width: 16px; height: 16px"
                    />
                  </div> 
                </div>
                <!-- <div class="enviorLeft">
                  <div class="top">
                    <div
                  class="list"
                  :style="{
                    background:
                      index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                  }"
                  v-for="(item, index) in environmentArr"
                  :key="index"
                 >
                 <div style="width: 100%;display: flex;justify-content: space-between;">
                    <span style="color: #fff; font-size: 13px">{{
                      item.name
                    }}</span>
                    <img
                      :src="item.path"
                      alt=""
                      style="width: 16px; height: 16px; margin-right: 10px"
                    />
                  </div>
                 </div>
                  </div>
                  <div class="bottom"></div>
                </div> -->
                <!-- <div class="enviorRight">

                </div> -->
              </div>
            </div>
            <div class="envior1" v-if="menusActive == 3" v-show="!environmentShow">
              <div class="toptitle">环境信息</div>
             <div class="info">
                <div
                  class="list"
                  :style="{
                    background:
                      index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                  }"
                  v-for="(item, index) in eniorArr1"
                  :key="index"
                 >
                  <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.name
                    }}</span>
                    <img
                      :src="item.path"
                      alt=""
                      style="width: 16px; height: 16px; margin-right: 20px"
                    />
                  </div>
                  <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.nametwo
                    }}</span>
                    <span
                      v-if="index != 4"
                      style="color: #fff; font-size: 13px"
                      >{{ item.value }}</span
                    >
                    <img
                      v-else
                      :src="item.value"
                      alt=""
                      style="width: 16px; height: 16px"
                    />
                  </div> 
                  <!-- <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.name
                    }}</span>
                    <img
                    v-if="index !=3"
                      :src="item.path"
                      alt=""
                      style="width: 16px; height: 16px; margin-right: 15px"
                    />
                     <span
                      v-else
                      style="color: #fff; font-size: 13px"
                      v-html="item.path"></span
                    >
                  </div> -->
                  <!-- <div>
                    <span style="color: #fff; font-size: 13px">{{
                      item.nametwo
                    }}</span>
                    
                    <img
                     v-if="index != 2"
                      :src="item.value"
                      alt=""
                      style="width: 16px; height: 16px"
                    />
                    <span
                      v-else
                      style="color: #fff; font-size: 13px;"
                      v-html="item.value"></span
                    >
                  </div> -->
                </div>
              </div>
            </div>
            <div class="maptu" v-if="menusActive == 2">
              <div class="toptitle">
                <div :style="{width:(this.unityChange ==0?'34%':'85%')}">一次系统图</div>
                <div style="width: 35%;height: 35px" class="changeselect" v-if="this.unityChange ==0">
                  <el-select v-model="oneValue" placeholder="请选择" @change="selectChange(oneValue)">
                      <el-option
                        v-for="item in oneOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                 </el-select>
            </div>
                
              </div>
              <div class="info">
                <div class="pic1" @click="handleXian1" v-if="this.unityChange == 1"></div>
                <div class="pic" @click="handleXian(oneValue)" :class="{'picActive':oneValue ==2}" v-else></div>
              </div>
            </div>
            <div class="chuplc" v-if="menusActive == 1">
              <div class="toptitle">开关信息</div>
              <div class="user_skills">
                <el-table
                  :data="tableData"
                  stripe
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;overflow-y: auto;"
                  height="250"
                >
                  <el-table-column prop="number" label="出线编号" width="50">
                  </el-table-column>
                  <el-table-column prop="name" label="出线名称" width="80">
                  </el-table-column>
                  <el-table-column prop="openCloseStatus" label="分合状态"  width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.openCloseStatus == '1'">开</span>
                        <span v-else>合</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="date" label="时刻"  width="70"> </el-table-column> -->
                  <el-table-column prop="rateCapacity" label="额定容量kW"  width="70">
                  </el-table-column>
                  <el-table-column prop="realTimePower" label="实时功率kW"  width="70">
                  </el-table-column>
                  <el-table-column prop="voltage" label="电压V"  width="70">
                  </el-table-column>
                  <el-table-column prop="electricCurrent" label="电流A"  width="70">
                  </el-table-column>
                </el-table>
                <div class="tabBtn" v-if="false">查看详情</div>
              </div>
            </div>
            <div class="yunwei"  v-if="(menusActive == 4)">
              <div class="toptitle">运维档案</div>
              <div class="info">
                <!-- <div class="changeselect">
                    <el-select v-model="openvalue" placeholder="请选择" @change="selectPdf(openvalue)">
                      <el-option
                        v-for="item in yunweiArr1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div> -->
                <div class="changeselect">
                    <el-select v-model="openvalue1" placeholder="请选择" @change="selectPdf(openvalue1)">
                      <el-option
                        v-for="item in yunweiArr2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                <!-- <div class="changeselect">
                    <el-select v-model="openvalue2" placeholder="请选择" @change="selectPdf(openvalue2)">
                      <el-option
                        v-for="item in yunweiArr3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div> -->
                <div class="changeselect">
                    <el-select v-model="openvalue3" placeholder="请选择" @change="selectPdf(openvalue3)">
                      <el-option
                        v-for="item in yunweiArr4"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                <div class="changeselect">
                    <el-select v-model="openvalue4" placeholder="请选择" @change="selectPdf(openvalue4)">
                      <el-option
                        v-for="item in yunweiArr5"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
              </div>
            </div>
            <div class="warnnews" v-if="(menusActive == 5)">
              <div class="toptitle">告警信息</div>
              <div class="info">
                <div style="color:#ffffff;font-size:18px;margin-top:10px">无</div>
                <vue-seamless-scroll
                  :data="alarmListData"
                  class="seamless-warp"
                  :class-option="classOption"
                  v-if="alarmListData.length > 0"
                >
                  <ul class="attentionInfo">
                    <li
                      v-for="(item, index) in alarmListData"
                      :key="index"
                      :style="{
                        background:
                          index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
                      }"
                    >
                      <div class="infolist">
                        <div class="attentionInfo_title" style="color: #ed6d17">
                          <img src="../../../assets/gj.png" alt="" />
                          告警
                          <span
                            style="color: #fff; float: right; margin-right: 10%"
                            >{{ item.time }}</span
                          >
                        </div>
                        <p>
                          {{ item.bianwei
                          }}<span style="color: #fff; float: right"
                            >发生值：{{ item.fsz }}</span
                          >
                        </p>
                        <p>{{ item.dizhi }}</p>
                        <p>
                          {{ item.zhan
                          }}<span style="color: #fff; float: right"
                            >侧面门禁：{{ item.cemeng }}</span
                          >
                        </p>
                      </div>
                      <div class="jiankong">
                        <img
                          src="../../../assets/newimgs/摄像头.png"
                          style="width: 35px; height: 32px"
                          alt=""
                          @click="openVideo()"
                        />
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
            <div class="record" v-if="(menusActive == 6)">
              <div class="toptitle">实时事件记录</div>
              <div class="info">
                <div class="topList">
                  <div class="jilu" v-for="(item,index) in record" :key="index">
                    <div class="warnJilu">
                      <div class="attentionInfo_title" style="color: red">
                        <img src="@/assets/gj1.png" alt="" />
                        事件
                      </div>
                      <p
                        style="color: #ffffff; margin-top: 10px; font-size: 15px"
                      >
                        {{item.operation}} {{item.operationDate}}
                      </p>
                      <!-- <p
                        style="color: #ffffff; margin-top: 10px; font-size: 15px"
                      >
                        动作，跳闸
                      </p> -->
                    </div>
                    <!-- <div class="jiankong">
                      <img
                        src="@/assets/newimgs/摄像头.png"
                        style="width: 35px; height: 32px"
                        alt=""
                        @click="openVideo()"
                      />
                    </div> -->
                  </div>
                </div>
                <!-- <div class="jilu" style="background: rgba(1, 34, 85, 0.4)">
                  <div class="warnJilu">
                    <div class="attentionInfo_title" style="color: red">
                      <img src="@/assets/gj1.png" alt="" />
                      事件
                    </div>
                    <p
                      style="color: #ffffff; margin-top: 10px; font-size: 15px"
                    >
                      1#进线失电 11-28 16:20:15
                    </p>
                  </div>
                  <div class="jiankong">
                    <img
                      src="@/assets/newimgs/摄像头.png"
                      style="width: 35px; height: 32px"
                      alt=""
                      @click="openVideo()"
                    />
                  </div>
                </div> -->
                <div class="select">
                  <div class="seSearch">查询</div>
                  <div class="changeselect">
                    <el-select v-model="chaValue" placeholder="请选择" @change="searchChange">
                      <el-option
                        v-for="item in optionsOpen"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="bottomList">
                <div class="jilu" v-for="(item,index) in siteRecord" :key="index">
                  <div class="warnJilu">
                    <div class="attentionInfo_title" style="color: red">
                      <img src="@/assets/gj1.png" alt="" />
                      事件
                    </div>
                    <p
                      style="color: #ffffff; margin-top: 10px; font-size: 15px"
                    >
                     {{item.operation}}      {{item.operationDate}}
                    </p>
                    <!-- <p
                      style="color: #ffffff; margin-top: 10px; font-size: 15px"
                    >
                      动作，跳闸
                    </p> -->
                  </div>
                  <!-- <div class="jiankong">
                    <img
                      src="@/assets/newimgs/摄像头.png"
                      style="width: 35px; height: 32px"
                      alt=""
                      @click="openVideo()"
                    />
                  </div> -->
                </div>
                </div>
                <!-- <div class="jilu" style="background: rgba(1, 34, 85, 0.4)">
                  <div class="warnJilu">
                    <div class="attentionInfo_title" style="color: red">
                      <img src="@/assets/gj1.png" alt="" />
                      事件
                    </div>
                    <p
                      style="color: #ffffff; margin-top: 10px; font-size: 15px"
                    >
                      2#进线失电 11-28 16:20:15
                    </p>
                  </div>
                  <div class="jiankong">
                    <img
                      src="@/assets/newimgs/摄像头.png"
                      style="width: 35px; height: 32px"
                      alt=""
                      @click="openVideo()"
                    />
                  </div>
                </div> -->
                <div class="select">
                  <div class="seSearch">记录输入</div>
                </div>
                <div
                  class="radio"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    padding: 0 10px;
                    box-sizing: border-box;
                    margin: 15px 0px;
                  "
                >
                  <el-radio v-model="radio" label="1" style="margin: 0"
                    >{{radioVal1}}</el-radio
                  >
                  <el-radio v-model="radio" label="2" style="margin: 0"
                    >{{radioVal2}}</el-radio
                  >
                  <el-radio v-model="radio" label="3" style="margin: 0"
                    >{{radioVal3}}</el-radio
                  >
                </div>
                <div class="sumbit">
                  <!-- <div class="leftsub" @click="handleUpate('1')">修改</div> -->
                  <div class="rightsub" @click="handleUpate('2')">提交</div>
                </div>
              </div>
            </div>
            <div class="notice" v-if="(menusActive == 7)">
              <div class="toptitle">用电检查结果通知书</div>
              <div class="info">
                <div class="blurInp">
                  <span style="margin-right: 10px">用户：</span>
                  <el-input v-model="input" placeholder="侵华日军南京大屠杀纪念馆"></el-input>
                </div>
                <div class="blurInp">
                  <span style="margin-right: 10px">户号：</span>
                  <el-input v-model="input" placeholder="3200267442021"></el-input>
                </div>
                <div class="blurInp">
                  <span style="margin-right: 10px">地址：</span>
                  <el-input v-model="input" placeholder="南京市建邺区水西门大街418号"></el-input>
                </div>
                <p style="color: #ffffff; line-height: 23px; font-size: 14px;margin-bottom: 5px;">
                  经检查，发现贵单位电力使用中存在下列问题：<br />
                </p>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="1">有资质电工配置不全</el-checkbox>
                  <el-checkbox label="2">未能落实值班电工24小时值班</el-checkbox>
                  <el-checkbox label="3">运行管理规程、制度与台账记录不全</el-checkbox>
                  <el-checkbox label="4" >高、低压配电柜未使用双重编号</el-checkbox>
                  <el-checkbox label="5" >高、低压配电柜双重编号不全</el-checkbox>
                  <el-checkbox label="6" >现场无模拟图版</el-checkbox>
                  <el-checkbox label="7" >模拟图版与现场不一致</el-checkbox>
                  <el-checkbox label="8" >电气设备预防性试验超周期</el-checkbox>
                  <el-checkbox label="9" >电气设备预防性试验项目不全</el-checkbox>
                  <el-checkbox label="10" >继电保护装置未按期定校</el-checkbox>
                  <el-checkbox label="11" >电气设备未定期清扫</el-checkbox>
                  <el-checkbox label="12" >无功补偿装置运行异常</el-checkbox>
                  <el-checkbox label="13" >防小动物措施不完善</el-checkbox>
                  <el-checkbox label="14" >备品备件不全</el-checkbox>
                  <el-checkbox label="15" >两票使用情况不规范</el-checkbox>
                  <el-checkbox label="16" >安全工器具配置不全</el-checkbox>
                  <el-checkbox label="17" >安全工器具试验超周期</el-checkbox>
                  <el-checkbox label="18" >电房脏乱，通道不畅通</el-checkbox>
                  <el-checkbox label="19" >设备应按季节做好防雷、防污闪、防潮和通风散热</el-checkbox>
                  <el-checkbox label="20" >加强电房身边巡视 发现缺陷及时处理</el-checkbox>
                </el-checkbox-group>
                
                <p
                  style="
                    color: #ffffff;
                    line-height: 23px;
                    font-size: 14px;
                    margin: 10px 0;
                  "
                >
                  其他问题：
                </p>
                <div class="textarea">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                  >
                  </el-input>
                </div>
                <p
                  style="
                    color: #ffffff;
                    line-height: 23px;
                    font-size: 15px;
                    margin-bottom: 20px;
                  "
                >
                  检查结论：<br />
                  对于以上存在的问题和建议，希望能引起贵单位的重视，尽快安排整改
                </p>
                <div class="blurInp">
                 <div class="leftInp">
                  <span style="margin-right: 5px; width: 96px"
                      >用电检查员：</span
                    >
                    <el-input v-model="input" placeholder=""></el-input>
                 </div>
                 <div class="rightInp">
                  <span style="margin-right: 10px; width: 152px"
                      >用户签收（盖章）：</span
                    >
                 </div>
                </div>
                <div style="display: flex;  justify-content: space-between;">
                  <span style="margin-right: 10px; width: 132px;color: #ffffff;"
                      >检查单位盖章：</span
                    >
                    <p
                  style="color: #ffffff; line-height: 23px; font-size: 14px"
                  v-html="
                    `检查日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日`
                  "
                ></p>
                </div>
              
                <div class="sumbit">
                  <div class="leftsub">取消</div>
                  <div class="rightsub">提交</div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div
      class="btn"
      :style="{ 'justify-content': htStatus == 1 ? 'space-between' : 'center' }"
    >
      <img
        src="@/assets/htBtn/inside.png"
        alt=""
        srcset=""
        v-if="htStatus == 1 && unityChange == 0"
        @click="handleUnity()"
        title="全景浏览"
      />
      <img
        src="@/assets/htBtn/unity.png"
        alt=""
        srcset=""
        v-if="htStatus != 1 && unityChange == 0"
        @click="handleHtweb()"
        title="3D展示"
      />
      <img
        src="@/assets/htBtn/location.png"
        alt=""
        srcset=""
        @click="personShow()"
        v-if="htStatus == 1"
        title="人物定位"
      />
      <img
        src="@/assets/htBtn/Look.png"
        alt=""
        srcset=""
        v-if="htStatus == 1"
        @click="handlefushi()"
        title="平面图"
      />
      <!-- <img src="@/assets/htBtn/measure.png" alt="" srcset=""> -->
    </div>
    <div class="center" v-show="carChangeShow">
      <div class="close" @click="closeVideo">关闭</div>
      <Center
        :dataSource="false"
        style="width: 100%; height:95%;"
      >
        <!-- <template slot="top">
                 </template> -->
      </Center>
    </div>
    <div class="selectModel">
          <div
           :class="{'active':routerActive==index}"
            class="selectbtn"
            v-for="(item, index) in selectArr"
            :key="index"
            style="color: #fff"
            @click="handleSelect(index)"
          >
            {{ item }}
          </div>
        </div>
      <transition name="homeleave">
        <!-- <div class="smallmap" v-if="homeActive" @click="hanldetoukui()">
          <img src="@/assets/mapInfo/地图.png" alt="" srcset="" />
        </div> -->
      </transition>
      <div class="homexian">
        <img src="@/assets/newimgs/WechatIMG2.png" alt="" v-if="homeActive == false"  @click="handleMenushow">
      </div>
       <!-- <div v-show="fileType"  class="pdf" style="width:600px;height:800px;position: fixed;z-index: 99999;top: 0;left: 0;bottom:0;right:0;margin:auto;overflow-y:scroll">

         <div style="position: fixed; top:66px;left:0;width:65.6%;height:30px;text-align:right;z-index:999999;cursor: pointer;font-size:30px" @click="handleClosepdf">x</div>
         <pdf v-for="i in numPages" :key="i"  :page="i" :src="file"></pdf>
       </div> -->
       <div
        class="xianmodel1"
        v-show="fileType"
        style="
          width: 30%;
          height: 80%;
          position: absolute;
          background: rgb(4, 35, 69);
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          overflow-y:scroll
          z-index: 99999;
        "
      >
        <div
          class="top"
          style="
            position: fixed;
            width: 30%;
            height: 3%;
            font-size: 18px;
            padding: 5px 10px 0 0;
            color: #fff;
            text-align: right;
            cursor: pointer;
            box-sizing: border-box;
            background: rgb(4, 35, 69,0.7);
            z-index: 999;
          "
          @click="handleClosepdf"
        >
          x
        </div>
        <pdf v-for="i in numPages" :key="i"  :page="i" :src="file" style="top:30px"></pdf>
      </div>
  </div>
</template>
  
  <script>
import customDvScrollBoard2 from "@/components/customDvScrollBoard2";
import * as mockData from "./mock";
import drawMixin from "@/utils/drawMixin";
import headerIndex from "@/components/layout/header.vue";
import BasicBox4 from "@/components/BasicBox4";
import BasicBox2 from "@/components/BasicBox2";
import axios from "axios";
import BasicBox from "@/components/BasicBox";
import Center from "../../center";
import vueSeamlessScroll from "vue-seamless-scroll";
import pdf from 'vue-pdf'
import {getSiteInfo,getEnvironmentInfo,getSwitchInfo,getDeviceRecord,getDeviceNum,updateDeviceRecord} from "@/api/api";
export default {
  mixins: [drawMixin],
  data() {
    return {
      record:[
        {
          id:'',
          operation:'',
          operationDate:''
        }
      ],
      siteRecord:[
        {
          operation:'',
          operationDate:'',
          id:'',
        }
      ],
      yiciSrc:'http://221.226.19.85:10123/info.html?primaryGraphId=1874E7D1D0D0AE1F',
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType:false,
      file: "",
      numPages: 1,
      infothingsShow:true,
      environmentShow:true,
      routerActive:0,
      checkList:[],
      yunweiArr1:[
        {
          value: '1',
          label: "设备台账查询",
        },
      ],
      yunweiArr2:[
        {
          value:'2',
          label: "10KV变压器试验记录",
        },
         {
          value: '6',
          label: "10KV真空断路器试验记录",
        },
        {
          value: '7',
          label: "低压交流耐压试验记录1",
        },
        {
          value: '8',
          label: "电缆试验记录",
        },
      ],
      yunweiArr3:[
        {
          value: '3',
          label: "维修记录查询",
        },
       
      ],
      yunweiArr4:[
        {
          value: '4',
          label: "值班人员资质",
        },
        
      ],
      yunweiArr5:[
        {
          value: '5',
          label: "巡检记录查询",
        },
         {
          value: '51',
          label: "电检查结果通知书",
        },
      ],
      homeActive:true,
      input: "",
      textarea: "",
      openvalue:'设备台账查询',
      openvalue1:'试验记录查询',
      openvalue2:'维修记录查询',
      openvalue3:'值班人员资质',
      openvalue4:'巡检记录查询',
      oneValue:1,
      chaValue:'',
      radio: "",
      radioVal1:"1#进线失电",
      radioVal2:"2#进线失电",
      radioVal3:"1#、2#进线同时失电",
      optionsOpen: [
        {
          value: 1,
          label: "102",
        },
      ],
      oneOptions: [
        {
          value: 1,
          label: "10kV 一次系统图",
        },
        {
          value: 2,
          label: "400V一次系统图",
        },
      ],
      tableData: [
      ],
      css_list: [
        "css1",
        "css2",
        "css3",
        "css4",
        "css5",
        "css6",
        "css7",
        "css8",
      ],
      menusActive: 0,
      menubg: {
        url: require("@/assets/newimgs/moren.png"),
        actUrl: require("@/assets/newimgs/xuanzhong.png"),
      },
      menusArr: [
        {
          pic: require("@/assets/newimgs/配电房-默认.png"),
          actPic: require("@/assets/newimgs/配电房-选中.png"),
          text: "配电房信息",
        },
       
        {
          pic: require("@/assets/newimgs/设备出线-默认.png"),
          actPic: require("@/assets/newimgs/设备出线-选中.png"),
          text: "开关信息",
        },
        {
          pic: require("@/assets/newimgs/一次系统-默认.png"),
          actPic: require("@/assets/newimgs/一次系统-选中.png"),
          text: "一次系统图",
        },
         {
          pic: require("@/assets/newimgs/环境信息-默认.png"),
          actPic: require("@/assets/newimgs/环境信息-选中.png"),
          text: "环境信息",
        },
        {
          pic: require("@/assets/newimgs/运维档案-默认.png"),
          actPic: require("@/assets/newimgs/运维档案-选中.png"),
          text: "运维档案",
        },
        {
          pic: require("@/assets/newimgs/告警信息-默认.png"),
          actPic: require("@/assets/newimgs/告警信息-选中.png"),
          text: "告警信息",
        },
        {
          pic: require("@/assets/newimgs/事件记录-默认.png"),
          actPic: require("@/assets/newimgs/事件记录-选中.png"),
          text: "事件记录",
        },
        {
          pic: require("@/assets/newimgs/检查通知单-默认.png"),
          actPic: require("@/assets/newimgs/检查通知单-选中.png"),
          text: "检查通知单",
        },
        {
          pic: require("@/assets/newimgs/VR-默认.png"),
          actPic: require("@/assets/newimgs/VR-选中.png"),
          text: "VR全景",
        },
      ],
      popInfoShow: false,
      xianShow: false,
      mapShow: false,
      tableShow: false,
      getBg: ["list1", "list2", "list3", "list4"],
      infoArr: [
        {
          path: require("@/assets/mapInfo/资源 33.png"),
          name: "站房名称",
          text: "新馆",
        },
        {
          path: require("@/assets/mapInfo/资源 30.png"),
          name: "站房地址",
          text: "南京市建邺区水西门大街418号",
        },
        {
          path: require("@/assets/mapInfo/资源 31.png"),
          name: "变压器数量",
          text: "2",
        },
        {
          path: require("@/assets/mapInfo/资源 32.png"),
          name: "变压器容量",
          text: "3200kVA",
        },
        // {
        //   path: require("@/assets/mapInfo/资源 29.png"),
        //   name: "进线名称",
        //   text: "10kv",
        // },
        {
          path: require("@/assets/mapInfo/资源 7.png"),
          name: "电气联系人",
          text: "李工",
        },
        {
          path: require("@/assets/mapInfo/资源 26.png"),
          name: "联系电话",
          text: "18061776824",
        },
        {
          path: require("@/assets/mapInfo/资源 28.png"),
          name: "投运时间",
          text: "2015.11.12",
        },
        {
          path: require("@/assets/mapInfo/资源 33.png"),
          name: "上次试验时间",
          text: "2011.11.12",
        },
      ],
       infoArr1: [
        {
          path: require("@/assets/mapInfo/资源 33.png"),
          name: "站房名称",
          text: "旧馆",
        },
        {
          path: require("@/assets/mapInfo/资源 30.png"),
          name: "站房地址",
          text: "南京市建邺区水西门大街418号",
        },
        {
          path: require("@/assets/mapInfo/资源 31.png"),
          name: "变压器数量",
          text: "2",
        },
        {
          path: require("@/assets/mapInfo/资源 32.png"),
          name: "变压器容量",
          text: "1600kVA",
        },
        // {
        //   path: require("@/assets/mapInfo/资源 29.png"),
        //   name: "进线名称",
        //   text: "10kv",
        // },
        {
          path: require("@/assets/mapInfo/资源 7.png"),
          name: "电气联系人",
          text: "李工",
        },
        {
          path: require("@/assets/mapInfo/资源 26.png"),
          name: "联系电话",
          text: "18061776824",
        },
        {
          path: require("@/assets/mapInfo/资源 28.png"),
          name: "投运时间",
          text: "2007.11.12",
        },
        {
          path: require("@/assets/mapInfo/资源 33.png"),
          name: "上次试验时间",
          text: "2011.11.12",
        },
      ],
      environmentArr:[
        {
          path: require("@/assets/mapInfo/资源 37.png"),
          name: "门禁1",
        }
      ],
      eniorArr: [
        {
          path: require("@/assets/mapInfo/资源 37.png"),
          name: "门禁1",
          nametwo: "温度（℃）",
          value: "26",
          fieldName:'doorState',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 37.png"),
          name: "门禁2",
          nametwo: "湿度（%RH）",
          value: "40.5",
          fieldName:'doorState',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感1",
          nametwo: "水浸",
          value: require("@/assets/mapInfo/资源 35.png"),
          fieldName:'smokeSensation',
          fieldNameTwo:'waterout'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感2",
          nametwo: "",
          value: "",
          fieldName:'smokeSensation',
          fieldNameTwo:''
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感3",
          nametwo: "",
          value: '',
          fieldName:'smokeSensation',
          fieldNameTwo:''
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感4",
          nametwo: "",
          value: '',
          fieldName:'smokeSensation',
        },
      ],
      eniorArr1:[
        //  {
        //   path: require("@/assets/mapInfo/资源 37.png"),
        //   name: "前门门禁",
        //   nametwo: "侧门门禁",
        //   value:require("@/assets/mapInfo/资源 37.png"),
        // },
        // {
        //   path: require("@/assets/mapInfo/资源 36.png"),
        //   name: "烟感1",
        //   nametwo: "烟感2",
        //   value: require("@/assets/mapInfo/资源 36.png"),
        // },
        //  {
        //   path: require("@/assets/mapInfo/资源 35.png"),
        //   name: "水浸",
        //   nametwo: "温度（℃）",
        //   value: '24.1',
        // },
        // {
        //   path: '24.1&nbsp;&nbsp;&nbsp;&nbsp;',
        //   name: "湿度(%RH)",
        //   nametwo: "",
        //   value: '',
        // },
         {
          path: require("@/assets/mapInfo/资源 37.png"),
          name: "门禁1",
          nametwo: "高压侧温度（℃）",
          value: "26",
          fieldName:'doorState',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 37.png"),
          name: "门禁2",
          nametwo: "高压侧湿度（%RH）",
          value: "40.5",
          fieldName:'doorState',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感1",
          nametwo: "低压侧温度（℃）",
          value: "24.1",
          fieldName:'doorState',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感2",
          nametwo: "低压侧湿度（%RH）",
          value: "44.7",
          fieldName:'smokeSensation',
          fieldNameTwo:'temperature'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感3",
          nametwo: "水浸",
          value: require("@/assets/mapInfo/资源 35.png"),
          fieldName:'smokeSensation',
          fieldNameTwo:'waterout'
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感4",
          nametwo: "",
          value: '',
          fieldName:'smokeSensation',
        },
        {
          path: require("@/assets/mapInfo/资源 36.png"),
          name: "烟感4",
          nametwo: "",
          value: '',
          fieldName:'smokeSensation',
        },
      ],
      fuzaiArr: [
        {
          name: "总负荷",
          vlaue: "198",
          icon: "",
        },
        {
          name: "进线电压信息",
          vlaue: "5.84",
          icon: "",
        },
        {
          name: "累计电量",
          vlaue: "183935",
          icon: "",
        },
        {
          name: "功率因数",
          vlaue: "0.98",
          icon: "",
        },
      ],
      fuzaiArr1: [
        {
          name: "总负荷",
          vlaue: "198",
          icon: "",
        },
        {
          name: "进线电压信息",
          vlaue: "5.84",
          icon: "",
        },
        {
          name: "累计电量",
          vlaue: "183935",
          icon: "",
        },
        {
          name: "功率因数",
          vlaue: "0.98",
          icon: "",
        },
      ],
      threeUrl: "",
      htStatus: 1,
      perSon: "1",
      selectArr: ["新馆", "旧馆"],
      alarmListData: [
        // {
        //   time: "2022-11-04 08:16:46",
        //   bianwei: "侧门门禁2报警变位",
        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
        //   zhan: "腾飞大厦中心站",
        //   fsz: "1",
        //   cemeng: "2",
        // },
        // {
        //   time: "2022-11-04 08:16:46",
        //   bianwei: "侧门门禁2报警变位",
        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
        //   zhan: "腾飞大厦中心站",
        //   fsz: "1",
        //   cemeng: "2",
        // },
        // {
        //   time: "2022-11-04 08:16:46",
        //   bianwei: "侧门门禁2报警变位",
        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
        //   zhan: "腾飞大厦中心站",
        //   fsz: "1",
        //   cemeng: "2",
        // },
        // {
        //   time: "2022-11-04 08:16:46",
        //   bianwei: "侧门门禁2报警变位",
        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
        //   zhan: "腾飞大厦中心站",
        //   fsz: "1",
        //   cemeng: "2",
        // },
        // {
        //   time: "2022-11-04 08:16:46",
        //   bianwei: "侧门门禁2报警变位",
        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
        //   zhan: "腾飞大厦中心站",
        //   fsz: "1",
        //   cemeng: "2",
        // },
      ],
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        // limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      // unityUrl:"https://my.matterportvr.cn/show/?m=hEnMfFnid82&sr=-3.04&ss=32",
      unityUrl: "",
      toukuiShow: false,
      unityChange: 0,
      titleData: "",
      valueData: "38",
      backgroundPic: {
        index: "landRes2/bg",
      },
      options: [],
      carChangeShow: false,
      locanionIp:'',
      //不动产数据
      workList: [],
      workListData: [],
      workListDatafcz: [],
      //土地数据
      workListNew: [],
      workListFCZ: [],
      fczShow: false,
      config4: {
        header: ["部门", "楼层", "房号", "名称"],
        rowNum: 12,
        data:
          // [['2019', '2', '16.67%'],
          // ['2021', '2', '16.67%'],
          // ['2022', '5', '66.67%'],['无', '无', '无'],]
          [],
        columnWidth: [60],
      },
      type: "",

      tit: "不动产产权证信息",
      loading: false,

      ...mockData.default,
    };
  },
  components: {
    HeaderIndex: headerIndex,
    BasicBox4,
    BasicBox2,
    BasicBox,
    customDvScrollBoard2,
    Center,
    vueSeamlessScroll,
    pdf
  },
  watch: {
    unityChange: {
      handler(newV) {
        if (newV == 0) {
          this.unityUrl = "/htWeb/unity.html?src=1";
          this.threeUrl="http://221.226.19.85:10133/bdz_360_22_12_8/index.html"
          this.searchHandle('2')
          this.reachtableData('2')
        } else {
          this.unityUrl = "/htWeb/unity.html?src=2";
        this.threeUrl="http://221.226.19.85:10133/bdz_360_22_11_11/index.html"
        this.searchHandle('1')
        this.reachtableData('1')
        }
      
      },
      immediate: true,
    },
  },
  mounted() {
    this.init()
    // //查询实时记录
    window.setInterval(()=>{
      getEnvironmentInfo({ siteId: "2"}).then((res)=>{
      // this.eniorArr
      for (const key in res.data.data) {
        if (key == 'doorState') {
          for (let i = 0; i < res.data.data.doorState.length; i++) {
            this.eniorArr[i].name = res.data.data.doorState[i].doorName
            if (res.data.data.doorState[i].isOpen == 0) {
              this.eniorArr[i].path =  require("@/assets/mapInfo/资源 38.png")
            }else{
              this.eniorArr[i].path =  require("@/assets/mapInfo/资源 37.png")
            }
          }
         
        }
        if (key == 'smokeSensation') {
          for (let i = 0; i < res.data.data.smokeSensation.length; i++) {
            this.eniorArr[i + res.data.data.doorState.length].name = res.data.data.smokeSensation[i].doorName
            if (res.data.data.smokeSensation[i].isOpen == 0) {
              this.eniorArr[i+res.data.data.doorState.length].path =  require("@/assets/mapInfo/资源 36.png")
            }else{
              this.eniorArr[i+res.data.data.doorState.length].path =  require("@/assets/mapInfo/资源 40.png")
            }
          }
        }
        if (key == 'waterout') {
          if (res.data.data.waterout == 0) {
            this.eniorArr[2].value = require("@/assets/mapInfo/资源 35.png")
          }else{
            this.eniorArr[2].value = require("@/assets/mapInfo/资源 39.png")
          }
        }
        if (key == 'temperature') {
          for (let i = 0; i < res.data.data.temperature.length; i++) {
            if (res.data.data.temperature[i].type == 3) {
              this.eniorArr[0].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
            }
            // if (res.data.data.temperature[i].type == 2) {
            //   this.eniorArr[2].value = res.data.data.temperature[i].value
            // }
            // if (res.data.data.temperature[i].type == 3) {
            //   this.eniorArr1[2].value = res.data.data.temperature[i].value
            // }
          }
        }
        if (key == 'humidity') {
          for (let i = 0; i < res.data.data.humidity.length; i++) {
            if (res.data.data.humidity[i].type == 3) {
              this.eniorArr[1].value =  res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
            }
            // if (res.data.data.humidity[i].type == 2) {
            //   this.eniorArr[3].value = res.data.data.humidity[i].value
            // }
          }
        }
      }
    })
    getEnvironmentInfo({ siteId: "1"}).then((res)=>{
      // this.eniorArr
      for (const key in res.data.data) {
        if (key == 'doorState') {
          for (let i = 0; i < res.data.data.doorState.length; i++) {
            this.eniorArr1[i].name = res.data.data.doorState[i].doorName
            if (res.data.data.doorState[i].isOpen == 0) {
              this.eniorArr1[i].path =  require("@/assets/mapInfo/资源 38.png")
            }else{
              this.eniorArr1[i].path =  require("@/assets/mapInfo/资源 37.png")
            }
          }
         
        }
        if (key == 'smokeSensation') {
          for (let i = 0; i < res.data.data.smokeSensation.length; i++) {
            this.eniorArr1[i + res.data.data.doorState.length].name = res.data.data.smokeSensation[i].doorName
            if (res.data.data.smokeSensation[i].isOpen == 0) {
              this.eniorArr1[i+res.data.data.doorState.length].path =  require("@/assets/mapInfo/资源 36.png")
            }else{
              this.eniorArr1[i+res.data.data.doorState.length].path =  require("@/assets/mapInfo/资源 40.png")
            }
          }
        }
        if (key == 'waterout') {
          if (res.data.data.waterout == 0) {
            this.eniorArr1[4].value = require("@/assets/mapInfo/资源 35.png")
          }else{
            this.eniorArr1[4].value = require("@/assets/mapInfo/资源 39.png")
          }
        }
        if (key == 'temperature') {
          for (let i = 0; i < res.data.data.temperature.length; i++) {
            if (res.data.data.temperature[i].type == 1) {
              this.eniorArr1[0].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
            }
            if (res.data.data.temperature[i].type == 2) {
              this.eniorArr1[2].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
            }
            // if (res.data.data.temperature[i].type == 3) {
            //   this.eniorArr1[2].value = res.data.data.temperature[i].value
            // }
          }
        }
        if (key == 'humidity') {
          for (let i = 0; i < res.data.data.humidity.length; i++) {
            if (res.data.data.humidity[i].type == 1) {
              this.eniorArr1[1].value = res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
            }
            if (res.data.data.humidity[i].type == 2) {
              this.eniorArr1[3].value = res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
            }
          }
        }
      }
    })
    },3000)
    
    
     // 环境信息
     window.setInterval(()=>{
      getSiteInfo({siteId:'2'}).then((res)=>{
      this.infoArr[0].text = res.data.data.siteName
      this.infoArr[1].text = res.data.data.siteAdress
      this.infoArr[2].text = res.data.data.totalTransformationSite
      this.infoArr[3].text = res.data.data.transformationCapacity+'kVA'
      // this.infoArr[4].text = res.data.data.contacts
      this.infoArr[5].text = res.data.data.phone
      this.infoArr[6].text = res.data.data.useTime
      this.infoArr[7].text = res.data.data.lastUseTime
      let cos = res.data.data.cos/2
      let cosString = cos.toString()
      if (cosString.indexOf(".") != -1) {
        this.fuzaiArr[3].vlaue =  cosString.substring(0,cosString.indexOf(".")+3)
      }else{
        this.fuzaiArr[3].vlaue = res.data.data.cos/2
      }
      let totalPower = res.data.data.totalPower
      let totalPowerString = totalPower.toString()
      if (totalPowerString.indexOf(".") != -1) {
        this.fuzaiArr[2].vlaue = totalPowerString.substring(0,totalPowerString.indexOf(".")+3)
      }else{
        this.fuzaiArr[2].vlaue = res.data.data.totalPower
      }
      let voltage = res.data.data.voltage
      let voltageString = voltage.toString()
      if (voltageString.indexOf(".") != -1) {
              this.fuzaiArr[1].vlaue = voltageString.substring(0,voltageString.indexOf(".")+3)
      }else{
        this.fuzaiArr[1].vlaue = res.data.data.voltage
      }
      let totalLoad = res.data.data.totalLoad
      let totalLoadString = totalLoad.toString()
      if (totalLoadString.indexOf(".") != -1) {
      this.fuzaiArr[0].vlaue = totalLoadString.substring(0,totalLoadString.indexOf(".")+3)
      }else{
        this.fuzaiArr[0].vlaue = res.data.data.totalLoad
      }
    })
    getSiteInfo({siteId:'1'}).then((res)=>{
      this.infoArr1[0].text = res.data.data.siteName
      this.infoArr1[1].text = res.data.data.siteAdress
      this.infoArr1[2].text = res.data.data.totalTransformationSite
      this.infoArr1[3].text = res.data.data.transformationCapacity+'kVA'
      // this.infoArr1[4].text = res.data.data.contacts
      this.infoArr1[5].text = res.data.data.phone
      this.infoArr1[6].text = res.data.data.useTime
      this.infoArr1[7].text = res.data.data.lastUseTime
      let cos = res.data.data.cos/2
      let cosString = cos.toString()
      if (cosString.indexOf(".") != -1) {
        this.fuzaiArr1[3].vlaue =  cosString.substring(0,cosString.indexOf(".")+3)
      }else{
        this.fuzaiArr1[3].vlaue = res.data.data.cos/2
      }
      let totalPower = res.data.data.totalPower
      let totalPowerString = totalPower.toString()
      if (totalPowerString.indexOf(".") != -1) {
        this.fuzaiArr1[2].vlaue = totalPowerString.substring(0,totalPowerString.indexOf(".")+3)
      }else{
        this.fuzaiArr1[2].vlaue = res.data.data.totalPower
      }
      let voltage = res.data.data.voltage
      let voltageString = voltage.toString()
      if (voltageString.indexOf(".") != -1) {
              this.fuzaiArr1[1].vlaue = voltageString.substring(0,voltageString.indexOf(".")+3)
      }else{
        this.fuzaiArr1[1].vlaue = res.data.data.voltage
      }
      let totalLoad = res.data.data.totalLoad
      let totalLoadString = totalLoad.toString()
       if (totalLoadString.indexOf(".") != -1) {
      this.fuzaiArr1[0].vlaue = totalLoadString.substring(0,totalLoadString.indexOf(".")+3)
      }else{
        this.fuzaiArr1[0].vlaue = res.data.data.totalLoad
      }
    });
     },3000)
    
    
    // window.setInterval(()=>{
    //   // getSwitchInfo({siteId:'1'}).then((res)=>{
    //   // this.tableData = res.data.data.items
    // // })
    // this.reachtableData()
    // },5000)
    
    window.openVideo = this.openVideo;
    this.timeFn();
    this.cancelLoading();
    this.titleData = this.$route.params.id.slice(0, 4);
    console.log("jdMain", this.$route.params);
    this.type = this.$route.params.type;
    this.getJdData(this.type);
    // this.getJdData()
    window.OnSceneLoaded = function (scene) {
      console.log("scene", scene);
      window.FloorUI("true");
    };
    this.file.promise.then((pdf) => {
      this.numPages = pdf.numPages
    })
    
   
    },
  beforeDestroy(){
    // clearInterval(this.timing);
  },
  methods: {
    reachtableData(val){
      this.tableData = []
      if (this.unityChange == 0) {
        val == ''
         window.setInterval(()=>{
          this.getTableData()
      },3000)
      }else {
        window.setInterval(()=>{
         this.getTableData()
      },3000)
      }
     
    },
    getTableData(){
      if (this.unityChange == 0) {
        getSwitchInfo({siteId:'2'}).then((res)=>{
         this.tableData = res.data.data.items
         for (let i = 0; i < this.tableData.length; i++) {
         this.tableData[i].electricCurrent = this.tableData[i].electricCurrent.substring(0,this.tableData[i].electricCurrent.indexOf(".")+2)
          this.tableData[i].voltage = this.tableData[i].voltage.substring(0,this.tableData[i].voltage.indexOf(".")+2)
            this.tableData[i].realTimePower =  this.tableData[i].realTimePower.substring(0,this.tableData[i].realTimePower.indexOf(".")+2)
         }
          
      })
      }else{
        getSwitchInfo({siteId:'1'}).then((res)=>{
         this.tableData = res.data.data.items
         for (let i = 0; i < this.tableData.length; i++) {
         this.tableData[i].electricCurrent = this.tableData[i].electricCurrent.substring(0,this.tableData[i].electricCurrent.indexOf(".")+2)
          this.tableData[i].voltage = this.tableData[i].voltage.substring(0,this.tableData[i].voltage.indexOf(".")+2)
            this.tableData[i].realTimePower =  this.tableData[i].realTimePower.substring(0,this.tableData[i].realTimePower.indexOf(".")+2)
         }
      })
      }
       
    },
    searchHandle(val){
        getDeviceRecord({
        siteId:val,
        deviceNum:''
      }).then((res)=>{
        for (let i = 0; i < res.data.data.length; i++) {
          let date = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD HH:mm:ss")
          let dataNew = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD")
          let newDate =  new Date()
        let  newDate1 = this.$moment(newDate).format("YYYY-MM-DD")
          if (dataNew == newDate1 ) {
            this.record = res.data.data
          this.record[i].operationDate = date
          }
          
        }
      })
      //实时记录下拉框
      getDeviceNum({
        siteId: val
      }).then((res)=>{
        // console.log(res.data.data,'实时记录');
        // this.optionsOpen = Object.keys(res.data.data).map((item,index)=>{
        //   console.log();
        //     // return {value:res.data.data[index].line_code,label:res.data.data[index].line_name}
        //   })
        
        var obj ={}
        for (let i = 0; i < res.data.data.length; i++) {
          obj[i] = res.data.data[i]
        }
        obj.length = res.data.data.length
        this.optionsOpen = Object.keys(res.data.data).map((item,index)=>{
            return {value:(item++),label:res.data.data[index]}
          })
          this.chaValue = this.optionsOpen[0].label
          this.searchChange(0)
      })
    },
    handleUpate(val){
      console.log('optionsOpen',this.optionsOpen[this.chaValue].label,this.radio,this.siteRecord[this.chaValue].id);
      
      let params ={
        deviceNum: this.optionsOpen[this.chaValue].label,
        operation:'',
        siteId:this.unityChange=='1'?'1':'2'
      }
      
      let paramsChange = {
        deviceNum:this.optionsOpen[this.chaValue].label,
        operation:'',
        siteId:this.unityChange=='1'?'1':'2',
        id:this.siteRecord[this.chaValue].id
      }
      if (this.radio == 1) {
        params.operation = this.radioVal1
        paramsChange.operation = this.radioVal1
      }else if(this.radio == 2){
         params.operation = this.radioVal2
         paramsChange.operation = this.radioVal2
      }else if(this.radio == 3){
         params.operation = this.radioVal3
         paramsChange.operation = this.radioVal3
      }
      if(val == '1'){
        updateDeviceRecord(paramsChange).then(res=>{
          this.searchChange(this.chaValue)
        })
      }else{
        updateDeviceRecord(params).then(res=>{
          this.searchChange(this.chaValue)
        })
      }
    },
      init(){
      if(typeof window != 'undefined'){
        var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        if (RTCPeerConnection) (()=>{
            var rtc = new RTCPeerConnection()
            rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
            rtc.createOffer( offerDesc => { //创建并存储一个sdp数据
            rtc.setLocalDescription(offerDesc)
        }, e => { console.log(e)})
        rtc.onicecandidate =(evt) => { //监听candidate事件
            if (evt.candidate) {
                console.log('evt:',evt.candidate.candidate)
                let ip_rule = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
                var ip_addr = ip_rule.exec(evt.candidate.candidate)[1]
                let pattern = /[a-zA-Z]/
                if(!pattern.test(ip_addr)){
                  this.locanionIp = ip_addr
                }
                
                console.log('ip_addr:',ip_addr)   //打印获取的IP地址
            }}
        })()
        else{console.log("没有找到")}
     }
    },
    //查询事件s
    searchChange(val){
      this.siteRecord = []
      // let label = this.optionsOpen[event].label
      console.log(this.optionsOpen[val].label,'chaxun');
      // this.chaValue = this.optionsOpen[val].label
      getDeviceRecord({
      siteId:this.unityChange =='1'?'1':'2',
      deviceNum: this.optionsOpen[val].label
    }).then((res)=>{
      // console.log(res.data.data,'实时记录');
      // this.siteRecord = res.data.data
        for (let i = 0; i < res.data.data.length; i++) {
        let date = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD  HH:mm:ss")
        this.siteRecord = res.data.data
        this.siteRecord[i].operationDate = date
      }
    })
    },
      handleClosepdf(){
        this.fileType  =  false
        this.openvalue='设备台账查询';
       this.openvalue1='试验记录查询';
       this.openvalue2='维修记录查询';
       this.openvalue3='值班人员资质';
       this.openvalue4='巡检记录查询';
       this.file = ''
      },
    //弹出pdf
    selectPdf(val){
      console.log(val,'mmmmmm');
      this.numPages = 1
      if (val == 1) {
      //   let fileUrl = "";
      //   // this.fileType  =  true
      //   this.numPages = 4
      // this.file = pdf.createLoadingTask(fileUrl)
      }
      else if (val == 2) {
        let fileUrl = "/pdf/bianyaqishiyan.pdf";
      this.fileType  =  true
       this.numPages = 2
      this.file = pdf.createLoadingTask(fileUrl)
      }
      // else if(val == 3){
      //   let fileUrl = "/pdf/jiangdongpeidianOne.pdf";
      // this.fileType  =  true
      // this.numPages = 4
      // this.file = pdf.createLoadingTask(fileUrl)
      // }
      else if(val == 4){
        let fileUrl = "/pdf/zhibanrenyuan.pdf";
      this.fileType  =  true
      this.numPages = 1
      this.file = pdf.createLoadingTask(fileUrl)
      }else if(val == 5){
        let fileUrl = "/pdf/jiangdongpeidianTwo.pdf";
      this.fileType  =  true
      this.numPages = 13
      this.file = pdf.createLoadingTask(fileUrl)
      }else if(val == 6){
        let fileUrl = "/pdf/zhankongDuanlu.pdf";
      this.fileType  =  true
      this.numPages = 7
      this.file = pdf.createLoadingTask(fileUrl)
      }else if(val == 7){
        let fileUrl = "/pdf/diyashiyan.pdf";
      this.fileType  =  true
      this.numPages = 1
      this.file = pdf.createLoadingTask(fileUrl)
      }else if(val == 8){
        let fileUrl = "/pdf/dianlanshiyan.pdf";
      this.fileType  =  true
      this.numPages = 2
      this.file = pdf.createLoadingTask(fileUrl)
      }else if(val ==51){
        let fileUrl = this.unityChange =='1'?'/pdf/jiuguanyongdian.pdf':'/pdf/xinguanyongdian.pdf';
      this.fileType  =  true
      this.numPages = 1
      this.file = pdf.createLoadingTask(fileUrl)
      }
      
    },
    //一次选择
    selectChange(val){
      console.log(val,'val');
    },
    handleMenushow(){
      this.homeActive = true
    },
    handleMenufalse(){
      this.homeActive = false
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "success-row"; //这是类名
      } else {
        return "";
      }
    },
    handleMenus(index) {
      this.menusActive = index;
      if (index == 8) {
        this.handleUnity();
      }
    },
    //弹窗
    popShow() {
      this.popInfoShow = true;
    },
    handleXian(val) {
      if (val == 1) {
        this.xianShow = true;
        this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=1874E7D1D0D0AE1F'
      }else if(val == 2){
        this.xianShow = true
        this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=12640A6DD8E2DAEE'
      }
    },
     handleXian1() {
        this.xianShow = true
        this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=2CD496643A1EB7D5'
    },
    handleXianfalse() {
      this.xianShow = false;
    },
    handledianwei() {
      this.mapShow = false;
      window.parent.handledianwei();
    },
    handleTableClose() {
      this.tableShow = false;
    },
    handleTable() {
      this.tableShow = true;
    },
    hanldetoukui() {
      this.mapShow = true;
    },
    hanldetoukuifalse() {
      this.toukuiShow = false;
    },
    handletanchuan() {
      this.mapShow = false;
    },
    handlePop() {
      this.popInfoShow = false;
    },
    // 俯视
    handlefushi() {
      this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 700, 0]); // 镜头位置
    },
    handleHtweb() {
      this.htStatus = 1;
      if (this.unityUrl.indexOf("htWeb") != -1) {
        this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 500, 500]);
      } else {
        if (this.unityChange == 0) {
          this.unityUrl = "/htWeb/unity.html?src=1";
        } else this.unityUrl = "/htWeb/unity.html?src=2";
      }
    },
    handleUnity() {
      this.$refs.iframe.contentWindow.unity.g3d.flyTo(
        this.$refs.iframe.contentWindow.unity.models[0],
        {
          animation: true,
          ratio: 0.9, // [0, 1]，越大相机越近,
          direction: [0, 135, 0],
        }
      );
      setTimeout(() => {
        this.htStatus = 2;
        // this.unityJiazai()
      }, 1000 * 1.5);
    },
    personShow() {
      if (this.perSon == "1") {
        this.$refs.iframe.contentWindow.unity.models[0].setVisible(true);
        this.$refs.iframe.contentWindow.unity.models[1].setVisible(true);
        this.$refs.iframe.contentWindow.unity.models[2].setVisible(true);
        this.$refs.iframe.contentWindow.unity.models[3].setVisible(true);
        this.perSon = "2";
      } else if (this.perSon == "2") {
        this.$refs.iframe.contentWindow.unity.models[0].setVisible(false);
        this.$refs.iframe.contentWindow.unity.models[1].setVisible(false);
        this.$refs.iframe.contentWindow.unity.models[2].setVisible(false);
        this.$refs.iframe.contentWindow.unity.models[3].setVisible(false);
        this.perSon = "1";
      }
    },
    unityJiazai(){
      if(this.unityChange==0){
        this.threeUrl="https://web-1300932214.cos.ap-nanjing.myqcloud.com/360/bdz_360_22_12_8/index.html"
      }else(
        this.threeUrl="https://web-1300932214.cos.ap-nanjing.myqcloud.com/360/bdz_360_22_11_11/index.html"
      )
    },
    handleSelect(index) {
      this.routerActive = index
      this.unityChange = index;
      if (index == 1) {
        this.environmentShow = false
        this.infothingsShow = false
      }else{
         this.environmentShow = true
         this.infothingsShow = true
      }
    },
    timeFn() {
      // this.timing = setInterval(() => {
      //   this.dateDay = formatTime(new Date(), "HH: mm: ss");
      //   this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
      //   this.dateWeek = this.weekday[new Date().getDay()];
      // }, 1000);
    },
    openVideo() {
      if (this.unityChange == 0) {
        console.log("aaa");
      this.$refs.iframe.contentWindow.unity.g3d.flyTo(
        this.$refs.iframe.contentWindow.unity.models[0],
        {
          animation: true,
          ratio: 0.9, // [0, 1]，越大相机越近,
          direction: [0, 135, 0],
        }
      );
      setTimeout(() => {
        // this.carChangeShow = true;
        console.log(this.locanionIp,'12122');
        var url  = 'http://'+this.locanionIp+':5500/demo/demo_window_simple_previewNew.html'
        console.log(url,'url');
         window.open(url, 
        'baidu', 
        'top=200,left=450,width=1000,height=600');
        console.log("bbb");
      }, 1000 * 1.5);
      }else{
        console.log("aaa");
      this.$refs.iframe.contentWindow.unity.g3d.flyTo(
        this.$refs.iframe.contentWindow.unity.models[0],
        {
          animation: true,
          ratio: 0.9, // [0, 1]，越大相机越近,
          direction: [0, 135, 0],
        }
      );
      setTimeout(() => {
        // this.carChangeShow = true;
        console.log(window.location.hostname,'12122');
        var url  = 'http://'+this.locanionIp+':5500/demo/demo_window_simple_preview.html'
        console.log(url,'url');
         window.open(url, 
        'baidu', 
        'top=200,left=450,width=1000,height=600');
        console.log("bbb");
      }, 1000 * 1.5);
      }
      
    },
    closeVideo() {
      this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 500, 500]);
      this.carChangeShow = false;
    },
    //获取基地数据
    getJdData(val) {
      if (val == "不动产") {
        console.log("val", val);
        this.workListData = [];
        axios
          .get("/json/jdData.json")
          .then((result) => {
            console.log("getMenuData111", result.data);
            for (var i = 0; i < result.data.length; i++) {
              if (result.data[i].jd == this.$route.params.id) {
                console.log("result.data[i]", result.data[i]);
                this.workListData.push(result.data[i]);
                this.changeWorkList(result.data[i]);
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else if (val == "土地证") {
        this.tit = "土地证信息";
        this.workListData = [];
        this.fczShow = true;
        axios
          .get("/json/tdData.json")
          .then((result) => {
            console.log("getMenuData111", result.data);
            for (var i = 0; i < result.data.length; i++) {
              if (result.data[i].jd == this.$route.params.id) {
                console.log("result.data[i]", result.data[i]);
                this.workListData.push(result.data[i]);
                this.changeWorkListTd(result.data[i]);
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
        this.workListDatafcz = [];
        axios
          .get("/json/fczData.json")
          .then((result) => {
            console.log("getMenuData111", result.data);
            for (var i = 0; i < result.data.length; i++) {
              if (result.data[i].jd == this.$route.params.id) {
                console.log("result.data[i]", result.data[i]);
                this.workListDatafcz.push(result.data[i]);
                this.changeWorkListfcz(result.data[i]);
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    //不动产
    changeWorkList(data) {
      var entries = Object.entries(data);
      var list = entries.map(function (item) {
        return {
          value: item[1],
          name: item[0],
        };
      });
      for (var i = 0; i < list.length; i++) {
        for (var t = 0; t < this.workList.length; t++) {
          if (list[i].name == this.workList[t].name) {
            this.workList[t].value = list[i].value;
          }
        }
      }
    },
    //土地证
    changeWorkListTd(data) {
      var entries = Object.entries(data);
      var list = entries.map(function (item) {
        return {
          value: item[1],
          name: item[0],
        };
      });
      for (var i = 0; i < list.length; i++) {
        for (var t = 0; t < this.workListNew.length; t++) {
          if (list[i].name == this.workListNew[t].name) {
            this.workListNew[t].value = list[i].value;
          }
        }
      }
      this.workList = this.workListNew;
    },
    changeWorkListfcz(data) {
      var entries = Object.entries(data);
      var list = entries.map(function (item) {
        return {
          value: item[1],
          name: item[0],
        };
      });
      for (var i = 0; i < list.length; i++) {
        for (var t = 0; t < this.workListFCZ.length; t++) {
          if (list[i].name == this.workListFCZ[t].name) {
            this.workListFCZ[t].value = list[i].value;
          }
        }
      }
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
  .pdf{
    &::-webkit-scrollbar{
      width: 0;
    }
  }
  @keyframes donghua7 {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}
@keyframes donghua8 {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}
  .homeleave-leave,.homeleave-enter-to{
          animation: donghua7 1s linear;
        }
 
        .homeleave-enter,.homeleave-leave-active{
            animation: donghua7 1s linear reverse;
        }
        .homeleaves-leave,.homeleaves-enter-to{
          animation: donghua8 1s linear;
        }
 
        .homeleaves-enter,.homeleaves-leave-active{
            animation: donghua8 1s linear reverse;
        }
//   表格透明
.user_skills {
  ::v-deep .el-table--border::after {
    width: 0;
  }
  
  ::v-deep .el-table {
    background-color: transparent !important;
    border: none;
    &::before {
      //去除底部白线
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
     &::-webkit-scrollbar{
      width: 0;
    }
  }
  ::v-deep .el-table th {
    background-color: transparent !important;
  }
  ::v-deep .el-table__header-wrapper {
    height: 48px;
    border: 1px solid rgb(23, 83, 131);
  }
  ::v-deep .el-table__header th {
    border: none;
    padding: 0;
    height: 48px;
    .cell {
      height: 100%;
      display: flex;
      align-items: center;
    }
    &.el-table__cell.is-leaf {
      border: none !important;
    }
  }
  ::v-deep .el-table tr {
    background-color: transparent !important;
    &.success-row {
      background-color: rgba(23, 83, 131, 0.4) !important;
    }
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent !important;
    border: none;
    color: #ffffff;
  }
  ::v-deep .el-table__body td .cell {
    // white-space: nowrap !important;
    white-space: normal !important;
    padding: 0;
    font-size: 13px;
    line-height: 14px;
    // word-break: break-all;
  }
  ::v-deep .el-table th.el-table__cell > .cell {
    color: rgb(86, 254, 226);
  }
 ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 0px;
    }
   ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 2px;
      height: 50px;
      background: #eee;
    }
   ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.4);
    }
}
.xianmodel {
  
  .pic {
    background: url("../../../assets/mapInfo/资源 89.jpg") no-repeat;
    background-size: 100% 100%;
  }
}
.xianmodel1{
  &::-webkit-scrollbar{
      width: 0;
    }
}
.reddianno {
  background: url("../../../assets/mapInfo/资源 84.png") no-repeat;
  background-size: 100% 100%;
}
.reddian {
  width: 25px;
  height: 25px;
  background: url("../../../assets/mapInfo/资源 84.png") no-repeat;
  animation: jumpBoxHandler 20s infinite alternate;
}
@keyframes jumpBoxHandler {
  0% {
    left: 0;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 90px;
  }
}
.mapmodels {
  background: url("../../../assets/mapInfo/弹窗1.jpg") no-repeat;
  background-size: 100% 100%;
  .popmodels {
    background: url("../../../assets/mapInfo/弹窗信息.jpg") no-repeat;
    background-size: 100% 100%;
  }
}
.teblecon {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

// @import "~@/common/var.scss";
// @import "~@/assets/scss/index.scss";
@keyframes donghua {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.my-leave,
.my-enter-to {
  animation: donghua 1s linear;
}

.my-enter,
.my-leave-active {
  animation: donghua 1s linear reverse;
}

@keyframes donghua1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.myr-leave,
.myr-enter-to {
  animation: donghua1 1s linear;
}

.myr-enter,
.myr-leave-active {
  animation: donghua1 1s linear reverse;
}

@keyframes donghuatan {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}
.tanchuan-enter-active {
  animation: donghuatan 1s linear;
}

.tanchuan-leave-active {
  animation: donghuatan 1s linear reverse;
}
// 样式
.mapchild {
  width: 100%;
  height: 100%;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .host-body {
    width: 100%;
    height: 100%;
  }
}
.btn {
  position: fixed;
  width: 160px;
  height: 54px;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  img {
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}
.main {
  width: 100%;
  height: calc(100% - 76px);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  // margin-top: 76px;
  position: relative;
  z-index: 9;
  pointer-events: none;
  .left {
    width: 351px;
    height: 100%;
    pointer-events: auto;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .leftmenus{
      width: 301px;
      height: 100%;
      background: url("../../../assets/newimgs/zuoxian.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      .menus {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      width: 100%;
      height: 580px;
      .list {
        width: 184px;
        height: 54px;
        background: url("../../../assets/newimgs/moren.png") no-repeat;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        p {
          color: #ffffff;
          margin-left: 20px;
          font-size: 15px;
        }
        &.css1 {
          margin-left: 0px;
        }
        &.css2 {
          margin-left: 10px;
        }
        &.css3 {
          margin-left: 20px;
        }
        &.css4 {
          margin-left: 40px;
        }
        &.css5 {
          margin-left: 50px;
        }
        &.css6 {
          margin-left: 40px;
        }
        &.css7 {
          margin-left: 30px;
        }
        &.css8 {
          margin-left: 20px;
        }
        &.css9 {
          margin-left: 0px;
        }
      }
    }
    }
    
  }
  .right {
    height: 100%;
    pointer-events: auto;
    display: flex;
    padding-top: 110px;
    padding-right: 10px;
    box-sizing: border-box;
    .infothings {
      width: 427px;
      height: 594px;
      background: url("../../../assets/newimgs/peidianfangKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
          
      }
      .info {
        margin-top: 5px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        .list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          height: 32px;
          align-items: center;
          font-size: 13px;
          padding: 0 10px;
          box-sizing: border-box;
          .text {
            width: fit-content;
            height: 100%;
            color: #ffffff;
            line-height: 27px;
            font-size: 13px;
          }
        }
      }
      .infos {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin-top: 10px;
        .list {
          width: 190px;
          height: 105px;
          margin-bottom: 10px;
          .text {
            height: 100%;
            width: 70%;
            margin-left: 90px;
            line-height: 145px;
          }
          &.list1 {
            background: url("../../../assets/mapInfo/zongfuhe.png") no-repeat;
            background-size: 100% 100%;
          }
          &.list2 {
            background: url("../../../assets/mapInfo/jinxiandianya.png") no-repeat;
            background-size: 100% 100%;
          }
          &.list3 {
            background: url("../../../assets/mapInfo/leijidianliang.png") no-repeat;
            background-size: 100% 100%;
          }
          &.list4 {
            background: url("../../../assets/mapInfo/gonglvyiinshu.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    .envior {
      width: 427px;
      height: 241px;
      background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info {
        width: 100%;
        height: calc(100% - 50px);
        // padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        // margin-top: 10px;
        // .enviorLeft{
        //   width:50%;
        //   height: 100%;
        //   display: flex;
        //   flex-wrap: wrap;
        //   .top{
        //     width:100%;
        //   height: 50%;
        //   // border: 1px solid red;
        //   }
        //   .bottom{
        //     width:100%;
        //   height: 50%;
        //     border: 1px solid blue;
        //   }
        // }
        // .enviorRight{
        //   width:50%;
        //   height: 100%;
        //   border: 1px solid burlywood;
        // }
        .list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          height: 32px;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          & > div {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .envior1 {
     width: 427px;
      height: 241px;
      background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info {
        width: 100%;
        height: calc(100% - 50px);
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        margin-top: 10px;
        .list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          height: 32px;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          & > div {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .maptu {
      width: 427px;
      height: 260px;
      background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
      background-size: 100% 100%;
      
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        // text-indent: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-evenly;
         .changeselect {
            // width: 160px;
            // height: 35px;
            ::v-deep .el-input__inner {
              height: 35px;
              background: rgba(23, 83, 131, 0.2);
            }
            ::v-deep .el-input__inner {
              height: 35px;
              // height: 34px;
              border-color: rgb(169,251,250);
              color: #ffffff;
              border-radius: 0;
            }
            ::v-deep .el-input__icon {
              line-height: 35px;
            }
          }
      }
      .info {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        width: 100%;
        height: calc(100% - 40px);
        padding: 10px 20px;
        box-sizing: border-box;
        .pic {
          width: 100%;
          height: 100%;
          background: url("../../../assets/mapInfo/ziyuan1.jpg") no-repeat;
          background-size: 100% 100%;
        }
        .pic1{
          width: 100%;
          height: 100%;
          background: url("../../../assets/mapInfo/ziyuan3.jpg") no-repeat;
          background-size: 100% 100%;
        }
        .picActive {
          width: 100%;
          height: 100%;
          background: url("../../../assets/mapInfo/ziyuan4.jpg") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .chuplc {
      width: 530px;
      height: 666px;
      background: url("../../../assets/newimgs/zhongyaoshebeiKuang.png")
        no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
        margin-left: 6px;
      }
      .user_skills {
        width: 100%;
        height: calc(100% - 80px);
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .tabBtn {
          width: 126px;
          height: 45px;
          text-align: center;
          line-height: 45px;
          color: #ffffff;
          letter-spacing: 1px;
          background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .warnnews {
      width: 427px;
      height: 405px;
      background: url("../../../assets/newimgs/waiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info {
        width: 100%;
        height: calc(100% - 40px);
        padding: 0px 15px 10px 15px;
        box-sizing: border-box;
        overflow: hidden;
      }
    }
    .record {
      width: 427px;
      height: 701px;
      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info {
        width: 100%;
        height: calc(100% - 40px);
        box-sizing: border-box;
        padding: 10px 15px;
        margin-top: 10px;
        ::v-deep .el-radio{
          color: #ffffff;
        }
        .topList{
          height: 300px;
          overflow-y:scroll ;
          overflow-x: hidden;
          &::-webkit-scrollbar{
            width: 0;
          }
        }
         
        .jilu {
          width: 100%;
          height: 100px;
          display: flex;
          flex-flow: row nowrap;
          padding: 5px 8px;
          box-sizing: border-box;
          .warnJilu {
            width: calc(100% - 45px);
            height: 100%;
          }
          .jiankong {
            height: 100px;
            width: 35px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
          }
        }
        .select {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
         
          .seSearch {
            width: 216px;
            height: 35px;
            background: url("../../../assets/newimgs/二级菜单.png") no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
            text-indent: 40px;
            line-height: 35px;
          }
          .changeselect {
            width: 160px;
            height: 35px;
            ::v-deep .el-input__inner {
              height: 35px;
              background: rgba(23, 83, 131, 0.6);
            }
            ::v-deep .el-input__inner {
              height: 35px;
              // height: 34px;
              border-color: rgb(23, 83, 131);
              color: #ffffff;
              border-radius: 0;
            }
            ::v-deep .el-input__icon {
              line-height: 35px;
            }
          }
        }
        .bottomList{
          height: 131px;
          overflow-y:scroll ;
          overflow-x: hidden;
          &::-webkit-scrollbar{
            width: 0;
          }
        }
        .sumbit {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 20px;
          .leftsub {
            background: url("../../../assets/newimgs/morenXiugai.png") no-repeat;
            background-size: 100% 100%;
            width: 123px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
          }
          .rightsub {
            background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
            background-size: 100% 100%;
            width: 123px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
          }
        }
      }
    }
    .notice {
      width: 427px;
      height: 721px;
      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info {
        width: 100%;
        height: calc(100% - 40px);
        box-sizing: border-box;
        padding: 10px 15px;
        margin-top: 10px;
        .blurInp {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .leftInp{
            display: flex;
            flex-flow: row nowrap;
           
            align-items: center;
            margin-right: 10px;
            ::v-deep .el-input{
              width: 120px;
            }
            ::v-deep .el-input__inner {
              width: 120px;
              height: 30px;
              background: rgba(23, 83, 131, 0.6);
            }
          }
          span {
            display: inline-block;
            width: 90px;
            color: #ffffff;
          }
          ::v-deep .el-input__inner {
            width: 280px;
            height: 35px;
            background: rgba(23, 83, 131, 0.6);
          }
          ::v-deep .el-input__inner {
            height: 35px;
            // height: 34px;
            border-color: rgb(23, 83, 131);
            color: #ffffff;
            border-radius: 0;
          }
        }
        .textarea {
          margin: 0 0 10px 0;
          ::v-deep .el-textarea__inner {
            width: 100%;
            height: 60px;
            background: rgba(23, 83, 131, 0.6);
            color: #ffffff;
            border-radius: 0;
            border-color: rgb(23, 83, 131);
          }
        }
        .sumbit {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 20px;
          .leftsub {
            background: url("../../../assets/newimgs/morenXiugai.png") no-repeat;
            background-size: 100% 100%;
            width: 123px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
          }
          .rightsub {
            background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
            background-size: 100% 100%;
            width: 123px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
          }
        }
        ::v-deep .el-checkbox-group{
          display: flex;
          flex-flow: column nowrap;
          width: 100%;
          height: 140px;
          overflow-y: scroll;
          overflow-x: hidden;
          &::-webkit-scrollbar {

            width:5px;

            }

            /* 滚动槽 */

            &::-webkit-scrollbar-track {

            -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);

            border-radius:10px;

            }

            /* 滚动条滑块 */

            &::-webkit-scrollbar-thumb {

            border-radius:10px;

            background:rgba(0,0,0,0.1);

            -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);

            }

            &::-webkit-scrollbar-thumb:window-inactive {

            background:rgba(255,0,0,0.4);

            }
          .el-checkbox{
            margin-bottom: 5px;
            color: #ffffff;
          }
        }
      }
    }
    .yunwei{
      width: 427px;
      height: 491px;
      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
      background-size: 100% 100%;
      .toptitle {
        width: 100%;
        height: 40px;
        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
        text-indent: 40px;
        line-height: 40px;
      }
      .info{
        width: 100%;
        height: calc(100% - 40px);
        box-sizing: border-box;
        padding: 10px 25px;
        margin-top: 10px;
        display: flex;
        flex-flow: column nowrap;
        .changeselect {
            width:100%;
            height: 35px;
            margin-bottom: 45px;
            ::v-deep .el-select{
              width: 100%;
            }
            ::v-deep .el-input__inner {
              height: 35px;
              background: rgba(23, 83, 131, 0.6);
            }
            ::v-deep .el-input__inner {
              height: 35px;
              // height: 34px;
              border-color: rgb(23, 83, 131);
              color: #ffffff;
              border-radius: 0;
            }
            ::v-deep .el-input__icon {
              line-height: 35px;
            }
          }
        
      }
    }
  }
}
.homexian{
  position: fixed;
  z-index: 999;
  cursor: pointer;
  top:53%;
  left: 10px;
  margin: auto;
}
.smallmap {
  width: 120px;
  height: 80px;
  position: fixed;
  z-index: 999;
  cursor: pointer;
  top: 80px;
  right: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.selectModel {
  width: 160px;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  position: fixed;
  top: 120px;
  left: 480px;
  .selectbtn {
    background: url(../../../assets/moren.png) no-repeat;
    background-size: 100% 100%;
    // margin-right: 10px;
    height: 34px;
    width: 82px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active{
    background: url(../../../assets/xuanzhong.png) no-repeat;
    background-size: 100% 100%;
    // margin-right: 10px;
    height: 34px;
    width: 82px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.center {
  width: 29%;
  height: 45%;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: fixed;
  background: url("../../../assets/leftone.png") no-repeat;
  background-size: 100% 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  .box {
    font-size: 14px;
    // background: #11223289;
    background: rgba(16, 29, 37, 0.8);
    border: 2px solid #29a3d3a1;
    width: 23%;
    margin: 1%;
    text-align: center;
    p {
      &:first-child {
        padding: 8px 0 10px 0;
        font-weight: bold;
        font-size: 18px;
      }

      &:nth-child(2) {
        // color: $default-font-color;
      }

      padding: 5px 0;
    }
  }
  .close {
    position: absolute;
    right: 6%;
    top: 8%;
    cursor: pointer;
    color: #ffffff;
  }
  .box:hover {
    background: rgba(76, 106, 124, 0.8);
  }
}
h1 {
  text-align: center;
  position: absolute;
  top: -40px;
  left: 35%;
  font-size: 22px;
  color: #a5e7ed;
  font-weight: bolder;
  mask-image: -webkit-gradient(linear, top, bottom, from(#ecf9fa), to(#acf2f8));
}
.attentionInfo {
  overflow-y: scroll;
  // height: 208px;
  overflow-x: hidden;
  p {
    display: block;
    width: 93%;
    margin: 2px 0;
    color: #acf2f8;
    font-size: 13px;
    padding-right: 10px;
  }

  li {
    height: auto;
    font-size: 13px;
    padding: 10px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .infolist {
      width: calc(100% - 45px);
    }
    .jiankong {
      height: 100px;
      width: 35px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
  }

  i {
    margin-right: 10px;
  }

  &_title {
    // color: $table-header-color
  }
}
.attentionInfo::-webkit-scrollbar {
  display: none;
}
</style>
  