<!-- 设备分布列表 -->
<template>
  <div class="inner">
    <div class="mapCover">
      <div id="map">地图</div>
      <!-- 弹框关键代码 -->
    <infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
    </div>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图</el-radio>
      </el-radio-group>
    </div>
    <!-- tabs设备类型 -->
    <div class="equipTypebox">
      <div class="equipTypeBody">
        <div class="equipTypeList">
          <div v-for="(item,index) in equipType" 
            @click="changeEquip(index,item)" 
            @mouseover='mouseOve(index,item)' 
            @mouseleave='mouseOut(index,item)' 
            :key="item.type"  
            :class="[currSelectType==item.type?'active':'']" 
            :ref="'tabsRef'+index"
          >
          <img v-if="!item.type" :src="tabIcon[0]" alt="" width="25px" class="tabIcon">
          <img v-else :src="tabIcon[item.type]" alt="" height="25px" width="25px" class="tabIcon">

          <img v-if="!item.type" :src="tabHoverIcon[0]" alt="" width="25px" class="hoverIcon">
          <img v-else :src="tabHoverIcon[item.type]" alt="" height="25px" width="25px" class="hoverIcon">
          
          {{item.name}}
          <!-- {{item.name+`${item.type}`}} -->
          </div>
        </div>
        <div :style="'left:'+equipStyleLeft+'px'" class="equipHighLight"></div>
      </div>
    </div>
    <!-- 控制 -->
    <components :is="sidebarComponents" @sidebarClear="sidebarClear()" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='queryInfo.type' :model="queryInfo.model"></components>
    <!-- 设备列表 -->
    <equip-list>
      <div class="searchEquipBox">
        <el-input
					style="cursor: pointer"
					placeholder="请输入内容"
					size="mini"
					clearable
					v-model="searchEquipVal"
					suffix-icon="el-icon-search"
					class="input-with-select"
          @change="getEquipList()"
				></el-input>
      </div>
      <div class="equipListBox" id="equipListBox"  v-loading="equipListloading" >
        <div class="innerList">
            <div class="scroll">
              <el-scrollbar>
                <div class="equipList">
                  <div v-for="(item,index) in equipListCurr" :key="index" :class="[index==equipListActive?'active':'','equipItem']" @click="equipMarkerClick(item)">
                    <div>
                      <div class="equipId">
                        <span :class="item.device_status?'online':'offline'"></span>
                        {{item.device_name || item.device_id}}
                      </div>
                      <div class="equipType">{{item.device_type_id | equipType}}</div>
                    </div>
                    <div class="equipTime">{{item.addtime*1000 | formatTime}}</div>
                  </div>
                </div>
              </el-scrollbar>
          </div> 
        </div>
        
        <!-- <div class="equipList" >
          <div v-for="(item,index) in equipListCurr" :key="index" :class="[index==equipListActive?'active':'','equipItem']" @click="equipMarkerClick(item)">
            <div>
              <div class="equipId">
                <span :class="item.device_status?'online':'offline'"></span>
                {{item.device_name || item.device_id}}
              </div>
              <div class="equipCity">{{item.city}}</div>
            </div>
            <div>
              <div class="equipType">{{item.device_type_id | equipType}}</div>
              <div class="equipTime">{{item.addtime*1000 | formatTime}}</div>

            </div>
          </div>
        </div> -->
      </div>
      
    </equip-list>
    <!-- 杀虫灯数据框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="scdDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                数据详情
              </span>
          </div>
        </template>
        <div class="equipData">
          <div class="more" @click="lookmore()">设备控制</div>
          <template>
            <el-tabs class="equipTabs" v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane
                v-for="(pages, index) in pages['2']"
                v-bind:key="index"
                :label="pages.label"
                :name="pages.name"
              > 
                <!-- <keep-alive> -->
                  <components :is="pages.name" @child-event="setTimeDialogShow" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                <!-- </keep-alive> -->
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </el-dialog>
    <!-- 测报灯数据框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="cbdDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              数据详情
              </span>
          </div>
        </template>
        <div class="equipData">
          <div class="more" @click="lookmore()">设备控制</div>
          <template>
            <el-tabs class="equipTabs" v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane
                v-for="(pages, index) in pages['3']"
                v-bind:key="index"
                :label="pages.label"
                :name="pages.name"
              > 
                <!-- <keep-alive> -->
                  <components :is="pages.name" @child-event2="showCurrPane" @child-event="hideCurrPane" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                <!-- </keep-alive> -->
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </el-dialog>
    <!-- 性诱设备数据框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="xycbDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                数据详情
              </span>
          </div>
        </template>
        <div class="equipData">
          <div class="more" @click="lookmore()">设备控制</div>
          <template>
            <el-tabs class="equipTabs" v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane
                v-for="(pages, index) in pages['4']"
                v-bind:key="index"
                :label="pages.label"
                :name="pages.name"
              > 
                <!-- <keep-alive> -->
                  <components :is="pages.name" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                <!-- </keep-alive> -->
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </el-dialog>
    <!-- 气象站数据框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="qxzDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                数据详情
              </span>
          </div>
        </template>
        <div class="equipData">
          <div class="more" @click="lookmore()">设备控制</div>
          <template>
            <el-tabs class="equipTabs" v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane
                v-for="(pages, index) in pages['5']"
                v-bind:key="index"
                :label="pages.label"
                :name="pages.name"
              > 
                <!-- <keep-alive> -->
                  <components :is="pages.name" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                <!-- </keep-alive> -->
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </el-dialog>
    <!-- 监控数据框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="jkDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                可视化详情-{{queryInfo.equip_id}}
              </span>
          </div>
        </template>
        <div class="equipData">
          <div class="">
            <div id="videoCon"></div>
            <div class="direc">
              <div
                @mousedown="configCamera('move', 0)"
                @mouseup="stopConfigCamera()"
                class="upCtr"
              >
                <img src="../../../../static/images/jkctrl1.png" alt="">
              </div>
              <div
                @mousedown="configCamera('move', 1)"
                @mouseup="stopConfigCamera()"
                class="downCtr"
              >
                <img src="../../../../static/images/jkctrl2.png" alt="">
              </div>
              <div
                @mousedown="configCamera('move', 2)"
                @mouseup="stopConfigCamera()"
                class="leftCtr"
              >
                <img src="../../../../static/images/jkctrl3.png" alt="">
              </div>
              <div
                @mousedown="configCamera('move', 3)"
                @mouseup="stopConfigCamera()"
                class="rightCtr"
              >
                <img src="../../../../static/images/jkctrl4.png" alt="">
              </div>
            </div>
          </div>
        </div>
    </el-dialog>
    <!-- 孢子仪数据框 -->
     <el-dialog
      class="figEldialog"
      :visible.sync="bzyDialogVisible"
      width="800px"
      top="230px"
      :modal="false"
      :close-on-click-modal="true"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                数据详情
              </span>
            <!-- <div class="avue-crud__dialog__menu" @click="dialogFullFun()">
              <i class="el-icon-full-screen"></i>
            </div> -->
          </div>
        </template>
        <!-- <equip-info v-if="hackReset" @child-event="setTimeDialogShow" @getNowState='getNowState' :d_id="queryInfo.d_id" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
          <template v-solt:equipStateInner></template>
        </equip-info> -->
        <div class="equipData">
          <div class="more" @click="lookmore()">设备控制</div>
          <template>
            <el-tabs class="equipTabs" v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane
                v-for="(pages, index) in pages['7']"
                v-bind:key="index"
                :label="pages.label"
                :name="pages.name"
              > 
                <!-- <keep-alive> -->
                  <components :is="pages.name" @child-event="setTimeDialogShow" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                <!-- </keep-alive> -->
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </el-dialog>
    <!-- 设置孢子仪载玻片、培养液更换时间配置弹框 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="setTimeDialogVisible"
      width="420px"
      top="230px"
      :fullscreen="dialogFull"
      v-dialogDrag
    >
      <template slot="title">
          <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                配置（请及时填写）
              </span>
            <!-- <div class="avue-crud__dialog__menu" @click="dialogFullFun()">
              <i class="el-icon-full-screen"></i>
            </div> -->
          </div>
        </template>
      <el-form ref="form" :model="time" label-width="130px">
        <el-form-item label="载玻片更换时间: ">
          <el-date-picker
            v-model="time.time01"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="培养液更换时间: ">
          <el-date-picker
            v-model="time.time02"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="grayInfo" @click="setTimeDialogVisible = false">取 消</el-button>
        <el-button type="blueInfo" @click="setTimeSubm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import AMap from 'AMap'; 
import infoWindowComponent from './baseComponents/MapInfoWindow.vue'
import sidebar from "@/components/highStand/sidebar"
import equipList from "@/components/highStand/equipList"
import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "@/components/home/coordtransform_utils.js";  //纠偏方法
import equipState from './baseComponents/equipState' //设备状态
import qxzEquipState from './baseComponents/equipStateQxz' //气象站设备状态
import equipInfo from './baseComponents/equipInfo' //设备基础信息
import equipHistoryDate from './baseComponents/equipHistoryDate' //设备历史数据
import qxzEquipHistoryDate from './baseComponents/equipHistoryDateQxz' //气象站设备历史数据
import twentyFourHistoryDate from './baseComponents/twentyFourHistoryDate' //气象站24小时数据
import cbdTabPhoto from './baseComponents/cbdTabPhoto' //测报灯图片
import cbdTabPestStat from './baseComponents/cbdTabPestStat' //测报灯害虫统计
import bzyTabPhoto from './baseComponents/bzyTabPhoto' //孢子仪图片
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
      infoWindowComponent,
      sidebar,
      equipList,
      equipState,
      qxzEquipState,
      equipInfo,
      equipHistoryDate,
      qxzEquipHistoryDate,
      twentyFourHistoryDate,
      cbdTabPhoto,
      cbdTabPestStat,
      bzyTabPhoto,
  },
  data() {
    //这里存放数据
    return {
      map:null,
      center:[120.298433, 31.680335],
      tileLayer1:null,
      tileLayer2:null,
      user_id:'',
      sidebarComponents:'',
      mapType: 1,
      // tabs导航
      equipType:[
        {
          type:'',
          name:"全部",
        },
        {
          type:7,
          name:"孢子仪",
        },
        {
          type:6,
          name:"监控",
        },
        {
          type:5,
          name:"环境监测",
        },
        // {
        //   type:4,
        //   name:"性诱设备",
        // },
        // {
        //   type:3,
        //   name:"虫情测报",
        // },
        // {
        //   type:2,
        //   name:"杀虫灯"
        // },
      ],
      tabIcon:[
        require('@/assets/images/home/mapIcon/icon0.png'),
        require('@/assets/images/home/mapIcon/icon0.png'),
        require('@/assets/images/home/mapIcon/icon2.png'),
        require('@/assets/images/home/mapIcon/icon3.png'),
        require('@/assets/images/home/mapIcon/icon4.png'),
        require('@/assets/images/home/mapIcon/icon5.png'),
        require('@/assets/images/home/mapIcon/icon6.png'),
        require('@/assets/images/home/mapIcon/icon7.png'),
        require('@/assets/images/home/mapIcon/icon9.png'),
      ],
      tabHoverIcon:[
        require('@/assets/images/home/mapIcon/hover0.png'),
        require('@/assets/images/home/mapIcon/hover0.png'),
        require('@/assets/images/home/mapIcon/hover2.png'),
        require('@/assets/images/home/mapIcon/hover3.png'),
        require('@/assets/images/home/mapIcon/hover4.png'),
        require('@/assets/images/home/mapIcon/hover5.png'),
        require('@/assets/images/home/mapIcon/hover6.png'),
        require('@/assets/images/home/mapIcon/hover7.png'),
      ],
      currSelectType:0,
      currSelectSite:0,
      equipStyleLeft:0,
      // 海量点样式表
      equipPoints:[],
      massMarks:null,
      markers:[],
      geocoder:null,
      equipStyleObject:[
        {
          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型0
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型1
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型2
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon3.png"), // 设别类型3
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon4.png"), // 设别类型4
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon5.png"), // 设别类型5
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon6.png"), // 设别类型6
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon7.png"), // 设别类型7
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon7.png"), // 设别类型8
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon9.png"), // 设别类型9
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon2Off.png"), // 设别类型2 index-10
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon3Off.png"), // 设别类型3 index-11
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon4Off.png"), // 设别类型4 index-12
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon5Off.png"), // 设别类型5 index-13
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon6Off.png"), // 设别类型6 index-14
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon7Off.png"), // 设别类型7 index-15
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon7Off.png"), // 设别类型8 index-16
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapIcon/icon9Off.png"), // 设别类型9 index-17
          size: new AMap.Size(50, 50), // 图标大小
          anchor: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      markerStyleObject:[
        {
          image: require("../../../../static/images/baseEquipIcon/scdIcon.svg"), // 设别类型0
          // image: require("../../../../static/images/icon8.svg"), // 设别类型0
          // image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png', // 设别类型0
          size: new AMap.Size(50, 50), // 图标大小
          // imageSize: new AMap.Size(32, 32),
          imageOffset: new AMap.Pixel(0,0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/scdIcon.svg"), // 设别类型1
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/scdIcon.svg"), // 设别类型2
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/cbdIcon.svg"), // 设别类型3
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/xycbIcon.svg"), // 设别类型4
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/qxzIcon.svg"), // 设别类型5
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/jkIcon.svg"), // 设别类型6
          size: new AMap.Size(55, 55), // 图标大小
          imageSize: new AMap.Size(55, 55),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/bzyIcon.svg"), // 设别类型7
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/xycbIcon.svg"), // 设别类型8
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/cbdIcon.svg"), // 设别类型9
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/scdIcon1.svg"), // 设别类型2 index-10
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/cbdIcon1.svg"), // 设别类型3 index-11
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/xycbIcon1.svg"), // 设别类型4 index-12
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/qxzIcon1.svg"), // 设别类型5 index-13
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/jkIcon1.svg"), // 设别类型6 index-14
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/bzyIcon1.svg"), // 设别类型7 index-15
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/xycbIcon1.svg"), // 设别类型8 index-16
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          image: require("../../../../static/images/baseEquipIcon/cbdIcon1.svg"), // 设别类型9 index-17
          size: new AMap.Size(50, 50), // 图标大小
          imageSize: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(0, 0) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      queryInfo:{
        equip_id:"",
        d_id:"",
        type:"",
        model:""
      },
      // 信息弹框
      detailsShow:false,
      // 孢子仪弹框
      setTimeDialogVisible:false,
      time:{
        time01:"",
        time02:"",
      },
      // 孢子仪配置载玻片时间did
      currbzyGlass:"",
      // 设备tabs标签
      activeName: "",
      nowPage: "",
      pages:{
        "2":[{
          name:"equipInfo",
          label:"设备信息",
        },{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "3":[{
          name:"equipInfo",
          label:"设备信息",
        },{
          name:"equipState",
          label:"实时状态",
        },
        {
          name:"cbdTabPhoto",
          label:"查看图片",
        },
        {
          name:"equipHistoryDate",
          label:"历史数据",
        },
        {
          name:"cbdTabPestStat",
          label:"害虫统计",
        }
        ],
        "4":[{
          name:"equipInfo",
          label:"设备信息",
        },{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "5":[{
          name:"equipInfo",
          label:"设备信息",
        },{
          name:"qxzEquipState",
          label:"实时状态",
        },{
          name:"twentyFourHistoryDate",
          label:"24小时数据",
        },{
          name:"qxzEquipHistoryDate",
          label:"历史数据",
        }],
        "7":[{
          name:"equipInfo",
          label:"设备信息",
        },{
          name:"equipState",
          label:"实时状态",
        },{
          name:"bzyTabPhoto",
          label:"查看图片",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
      },
      // 右侧控制
      sidebarState:false,
      // 设备列表
      searchEquipVal:'',
      equipList:[],
      equipListCurr:[],
      equipListActive:'',
      hackReset:false,
      equipListloading: false,
      dialogFull:false,
      // 弹框显示状态
      scdDialogVisible:false,
      cbdDialogVisible:false,
      qxzDialogVisible:false,
      xycbDialogVisible:false,
      jkDialogVisible:false,
      bzyDialogVisible:false,
      player:null,
      polygonString:"114.407233,34.763419;114.409615,34.763067;114.409551,34.761427;114.407856,34.758378;114.407019,34.758942;114.404508,34.759823;114.405839,34.762362"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // detailsShow(val){
    //   if(val != 0){
    //     this.activeName = this.pages[val][0].name
    //     this.nowPage = this.pages[val][0].name
    //   }else{
    //     if(val== 5){
    //       this.activeName = 'qxzEquipState'
    //       this.nowPage = 'qxzEquipState'
    //     }else{
    //       this.activeName = 'equipState'
    //       this.nowPage = 'equipState'
    //     }
    //   }
    // }
  },
  //方法集合
  methods: {
    // 初始化地图
    infoMap(){
        this.map = new AMap.Map("map", {
            center: this.center,
            resizeEnable: true,
            zoom: 4,
        });
        AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.PolyEditor",
        ],
        () => {
          // this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale());

          this.geocoder = new AMap.Geocoder({
            city: "全国",
            radius: 1000,
          });

        }
      );
      this.tileLayer1 = new AMap.TileLayer({
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 10,
      }); //卫星图层
      this.tileLayer2 = new AMap.TileLayer({
        // 图块取图地址
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 101,
      });
      this.map.add(this.tileLayer1);
      // this.map.add(this.tileLayer2);
      this.renderPolygon()
      this.changeEquip(0,this.equipType[0])
    },
    renderPolygon(){
      var path = this.polygonString.split(';');
      var polygonPath = path.map((item)=>{
        var lnglat = item.split(',')
        return new AMap.LngLat(lnglat[0],lnglat[1])
      })
      var polygon = new AMap.Polygon({
          path: polygonPath,  
          fillOpacity: 0, // 多边形填充颜色
          strokeWeight: 5, // 线条宽度，默认为 1
          strokeColor: 'yellow', // 线条颜色
          strokeOpacity:1
      });
      if(this.user_id == 115){
        this.map.add(polygon);
      }
    },
    getUserEquipType(){
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.user_device_type",
        data: this.qs.stringify({
          user_id:this.user_id
        })
      }).then(res => {
        if (res.data.message == "") {
          this.equipType=[{
            type:'',
            name:'全部'
          }]
          for(let i of res.data.data.type_list){
            this.equipType.push({
              type:i,
              name:this.equipsTypeSwitch(i)
            })
          }
          
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipsTypeSwitch(i){
      switch (i) {
        case '2':
          return '防治测报';
          break;
        case '3':
          return '虫情测报';
          break;
        case '4':
          return '性诱测报';
          break;
        case '5':
          return '环境监测';
          break;
        case '6':
          return '可视化';
          break;
        case '7':
          return '孢子仪';
          break;
        case '9':
          return '糖醋测报';
          break;
        case 2:
          return '防治测报';
          break;
        case 3:
          return '虫情测报';
          break;
        case 4:
          return '性诱测报';
          break;
        case 5:
          return '环境监测';
          break;
        case 6:
          return '可视化';
          break;
        case 7:
          return '孢子仪';
          break;
        case 9:
          return '糖醋测报';
          break;
      }
    },
    changeMapType(val){ 
      if(val==0){
        this.tileLayer1.hide()
        this.tileLayer2.hide()
      }else{
        this.tileLayer1.show()
        this.tileLayer2.show()
      }
    },
    changeEquip(index,item){
      this.currSelectType = item.type;
      this.currSelectSite = index;
      this.detailsShow = ''
      this.queryInfo.type = item.type
      this.getEquipList()
    },
    mouseOve(index,item){
      this.equipStyleLeft = this.$refs.tabsRef0[0].clientWidth*index
    },
    mouseOut(index,item){
      // console.log(this.$refs.tabsRef0[0].clientWidth);
      // console.log(this.$refs.tabsRef0[0].style.width);
      
      if(item.type!=this.currSelectType){
        this.equipStyleLeft = this.$refs.tabsRef0[0].clientWidth*this.currSelectSite
      }
    },
    iconFormat(equip_ip, item) {
      switch (equip_ip + "") {
        case "2":
          item.icon = require("@/assets/images/home/mapIcon/icon2.png");
          break;
        case "3":
          item.icon = require("@/assets/images/home/mapIcon/icon3.png");
          break;
        case "4":
          item.icon = require("@/assets/images/home/mapIcon/icon4.png");
          break;
        case "5":
          item.icon = require("@/assets/images/home/mapIcon/icon5.png");
          break;
        case "6":
          item.icon = require("@/assets/images/home/mapIcon/icon6.png");
          break;
        case "7":
          item.icon = require("@/assets/images/home/mapIcon/icon7.png");
          break;
        case "9":
          item.icon = require("@/assets/images/home/mapIcon/icon9.png");
          break;
      }
    },
    getEquipList() {
      this.equipListloading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.equip_map_location",
        data: this.qs.stringify({
          equip_type: this.queryInfo.type,
          device_id: this.searchEquipVal,
          user_id:this.user_id
        }),
      }).then((res) => {
        this.equipListloading = false;
        if (res.data.message == "") {
          let data = res.data.data;
          var index = 0;
          this.equipListCurr = data.map((item) => {
            this.iconFormat(item.device_type_id, item);
            if(item.device_status == 1){
              item.style = item.device_type_id; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
            }else{
              item.style = parseInt(item.device_type_id)+8; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
            }
            item.index = index++;
            if (item.gps_type == 1) {
              //GPS
              item.lnglat = wgs84togcj02(item.lng, item.lat);
            }
            return item;
          });
          console.log(this.equipListCurr);
          
          // 海量点标注
          // if (this.massMarks) {
          //     console.log(this.massMarks);
              
          //   this.massMarks.clear();
          // }
          // this.massMarks = new AMap.MassMarks(this.equipListCurr, {
          //   zIndex: 199, // 海量点图层叠加的顺序
          //   // zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
          //   style: this.equipStyleObject, // 设置样式对象
          // });
          // this.massMarks.setMap(this.map);
          // this.map.setZoom(15)
          // this.map.setCenter([113.666549,34.808612])
          // this.massMarks.on("click", (e) => {
          //   document.getElementById("equipListBox").scrollTop = 87*e.data.index;
          //   this.equipMarkerClick(e.data);
          //   // this.openInfo(e.data);
          // });
          console.log(this.equipListCurr);
          
          // 普通标注
          if(this.markers){
            this.map.remove(this.markers)
          }
          for (var i = 0; i < this.equipListCurr.length; i += 1) {
            var title = this.equipListCurr[i].device_name || '设备'+this.equipListCurr[i].device_id
            var marker = new AMap.Marker({
              icon: new AMap.Icon(this.markerStyleObject[this.equipListCurr[i].style]),
              position: [this.equipListCurr[i].lnglat[0],this.equipListCurr[i].lnglat[1]],
              zIndex: 101,
              map:this.map,
              title: title,
            });
            marker.setExtData(this.equipListCurr[i])//添加marker 的自定义属性
            this.markers.push(marker);
            //给所有的点标注添加点击事件
    		    AMap.event.addListener(marker, 'click', (e) => {
              console.log(e.target.getExtData());
              var item = e.target.getExtData()
              document.querySelector(".el-scrollbar__view .equipList").scrollTop = 87*item.index;
              this.equipMarkerClick(item);
            });
          }
          //在视野中显示所有的点
          this.map.setFitView();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipMarkerClick(item) {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
      console.log(item);
      
      this.equipShow = true; //图标上设备信息框
      this.equipsVisible = true; //右侧设备弹框
      this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
      this.currEquip = item;
      this.queryInfo.equip_id = item.device_id
      this.queryInfo.d_id = item.d_id
      this.queryInfo.type = item.device_type_id
      this.queryInfo.model = item.device_model
      this.equipListActive = item.index
      this.sidebarComponents = "" //siderbar为空
      if(this.detailsShow== 2){
        this.scdDialogVisible=true;
      }else{
        this.scdDialogVisible=false;
      }
      if(this.detailsShow== 3){
        this.cbdDialogVisible=true;
      }else{
        this.cbdDialogVisible=false;
      }
      if(this.detailsShow== 4){
        this.xycbDialogVisible=true;
      }else{
        this.xycbDialogVisible=false;
      }
      if(this.detailsShow== 5){
        this.qxzDialogVisible=true;
      }else{
        this.qxzDialogVisible=false;
      }
      if(this.detailsShow== 7){
        this.bzyDialogVisible=true;
      }else{
        this.bzyDialogVisible=false;
      }
      // if(this.detailsShow== 5){
      //   this.activeName = 'qxzEquipState'
      //   this.nowPage = 'qxzEquipState'
      // }else{
        this.activeName = 'equipInfo'
        this.nowPage = 'equipInfo'
      // }

      if (item.device_type_id == 6) {
        this.jkDialogVisible=true;
        if(this.player){
          this.player.stop()
          this.player = ''
        }
        //监控
        this.$axios({
          url: "/api/api_gateway?method=camera.camera_manage.addr_camera",
          method: "POST",
          data: this.qs.stringify({ 
            device_id: item.device_id,
           }),
        }).then((res) => {
          if (res.data.message == "") {
            let data = eval("(" + res.data.data + ")");
            let hlsHd = data.hlsHd;
            // this.jkSrc = hlsHd
            // console.log(this.jkSrc)
            let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
            console.log(hlsHd);
            document.getElementById("videoCon").innerHTML = playHtml;
            setTimeout(() => {
              console.log(document.getElementById("myPlayer"));
              this.player = new EZUIPlayer("myPlayer");
              this.player.play();
              // let player = videojs('myPlayer')
              // player.src({ src: hlsHd, type: 'application/x-mpegURL' })
              // player.play()
            }, 1000);
          }
        });
      }else{
        this.jkDialogVisible=false;
      }
    },
    /**
    打开消息窗体
    我这边实现的是点击marker事件后，弹出消息框
    注：positionResult 为marker点击事件的 event
    */
    openInfo(positionResult) {
        var that = this;
        let infoWindow = new AMap.InfoWindow({
            isCustom: true,
            content: that.$refs.infoWindowComponent.$el,
            offset: new AMap.Pixel(5, -11),
        });
        infoWindow.open(this.map, positionResult.lnglat);
        this.infoWindow = infoWindow;
        // 调用组件方法，初始化组件页面的infoWindow等数据
        that.$refs.infoWindowComponent.initialize({
            currEquip: positionResult,
            visible: true,
            infoWindow: infoWindow,
        });
    },
    //关闭方向
    stopConfigCamera() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
        data: this.qs.stringify({
          device_id: this.queryInfo.equip_id,
          ctrl: "stop",
        }),
      });
    },
    //上下左右和拍照
    configCamera(ctrl, movenum) {
      if (ctrl == "takephoto") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.camera_takephoto",
          data: this.qs.stringify({
            device_id: this.queryInfo.equip_id,
            ctrl: ctrl,
          }),
        }).then((res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.picUrl = data.picUrl;
            this.takePhotoDialogVisible = true;
          } else {
            this.$message.error("设备网络异常!");
          }
        });
      } else {
        //上下左右、放大、缩小
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
          data: this.qs.stringify({
            device_id: this.queryInfo.equip_id,
            ctrl: ctrl,
            movenum: movenum,
          }),
        }).then((res) => {
          if (res.data) {
            this.$message.success("操作成功");
          } else {
            this.$message.error("操作失败");
          }
        });
      }
    },
    jkClose(){
      this.player.stop()
      this.detailsShow='';
      console.log(this.player);
      
    },
    jkClose2(){
      // this.detailsShow='';
      console.log(this.player);
      
      this.player.stop()
    },
    // 弹框放大
    dialogFullFun(){
      this.dialogFull = !this.dialogFull
      
      document.querySelector(".figEldialog").children[0].style.top = 0;
      document.querySelector(".figEldialog").children[0].style.left = 0;
    },
     //载玻片、培养液更换时间展示
    setTimeDialogShow(data){
      this.setTimeDialogVisible = true;
      this.time.time01 = data.glass
      this.time.time02 = data.cultivate
      this.currbzyGlass = data.d_id
    },
    //载玻片、培养液更换时间配置提交
    setTimeSubm() {
      let glass_slide_time = parseInt(
        new Date(this.time.time01).getTime() / 1000
      );
      let cultivate_time = parseInt(
        new Date(this.time.time02).getTime() / 1000
      );
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.updata_spore_time",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.currbzyGlass,
          glass_slide_time,
          cultivate_time,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("修改成功!");
        } else {
          this.$message.error(res.data.message);
        }
        this.setTimeDialogVisible = false;
      });
    },
    //tabs每次切换只渲染一个界面
    tabshandleClick(tab) {
      this.nowPage = tab.name;
     
    },
    // 设备控制控制
    lookmore(){
      this.sidebarComponents = 'sidebar'
      this.detailsShow=""
      this.scdDialogVisible=false;
      this.cbdDialogVisible=false;
      this.bzyDialogVisible=false;
      this.xycbDialogVisible=false;
      this.qxzDialogVisible=false;
      this.jkDialogVisible=false;
    },
    // 注销控制组件
    sidebarClear(val){
      this.sidebarComponents = ''
    },
    // 设备刷新请求实时状态
    getNowState(){
      if(this.nowPage == 'equipState' || this.nowPage == 'qxzEquipState' ){
        // console.log(`child${this.detailsShow}`);
        // console.log(this.$refs[`child${this.detailsShow}`][0]);
        
        this.$refs[`child${this.detailsShow}`][0].equipStateSet(this.queryInfo.equip_id, this.queryInfo.type);
      }
    },
    // 测报灯查看识别结果当前弹框隐藏
    hideCurrPane(){
      this.cbdDialogVisible = false;
    },
    showCurrPane(){
      this.cbdDialogVisible = true;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.user_id = this.$store.state.plantProtectionUserId || this.$store.state.user_id;
    this.getUserEquipType()
    this.infoMap()

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.inner{
    height: 100%;
    position: relative;
    .mapCover{
        height: 100%;
        #map{
            width: 100%;
            height: 100%;
        }
    }
    .mapTypebox{
        position: absolute;
        right: .25rem;
        top:.375rem;
        background: #fff;
        padding: .0625rem;
        border-radius: .0625rem;
    }
}
// tabs设备类型
.equipTypebox{
  position: absolute;
  left: 20px;
  top:30px;
  // background: #fff;
  line-height: 32px;
  border-radius: 20px;
  .equipTypeBody{
    position: relative;
    z-index: 10;
    background: #262a31;
    border-radius: 43px;
    color: #fff;
    .equipTypeList{
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      >div{
        width: 1.5rem;
        text-align: center;
        border-radius: .25rem;
        font-size: .175rem;
        cursor: pointer;
        >img{
          vertical-align: middle;
        }
        .hoverIcon{
          display: none;
        }
      }
      >div.active{
        .tabIcon{
          display: none;
        }
        .hoverIcon{
          display: inline-block;
        }
      }
      >div:hover{
        // color: #eee;
        .tabIcon{
          display: none;
        }
        .hoverIcon{
          display: inline-block;
        }
      }
    }
    .equipHighLight{
      position: absolute;
      top: 0;
      height: 32px;
      width: 1.5rem;
      border-radius: .25rem;
      background: #0195ff;
      z-index: 0;
      transition: all 1s;
    }
  }
  
}

// 设备数据样式
.equipData{
  padding-top: 10px;
  position: relative;
  .more{
    position: absolute;
    right: 5px;
    top: 20px;
    z-index: 9999;
    cursor: pointer;
    color: #ccc;
  }
  .more:hover{
    color: #0195ff;
  }
}
// 弹框tabs样式覆盖
/deep/.el-tabs__active-bar{
  background-color: #0295ff;
}

// 监控弹框样式
.jkDialog{
  position: fixed;
  width: 750px;
  background: #323a47;
  top: 200px;
  left: 30%;
  z-index: 180;
}
// 设备列表
.searchEquipBox{
    padding: 20px;
    background: #0c142c;
}
.equipListBox{
    position: absolute;
    left: 0;
    right: .4375rem;
    top: 70px;
    bottom: 0;
    overflow: hidden;
    .innerList{
        position: absolute;
        top: 0;
        bottom: -18px;
        left: 0;
        right: 0;
        .scroll{
            height: 100%;
            overflow: auto;
            .equipList{
              width: 4rem;
              padding-bottom: 20px;
              .equipItem{
                padding: .125rem .0875rem;
                cursor: pointer;
                
                margin: .1875rem;
                border: 1px dashed transparent;
                border-bottom: 1px dashed #ddd;
                padding-bottom: .125rem;
                color: #b8b8b8;
                >div:nth-child(1){
                  display: flex;
                  justify-content: space-between;
                  // flex: 1;
                  // overflow: hidden;
                }
                .equipId{
                  line-height: .425rem;
                  font-size: .175rem;
                  color: #92c2f3;
                  font-weight: 700;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  width: 80%;
                  span{
                    display: inline-block;
                    width: .1125rem;
                    height: .1125rem;
                    border-radius: 50%;
                    margin-right: .0375rem;
                  }
                  span.online{
                    background: #0195ff;
                  }
                  span.offline{
                    background: red;
                  }
                }
                .equipCity{
                  text-indent: .2rem;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
                .equipType{
                  line-height: .425rem;
                  font-size: .175rem;
                  color: #0195ff;
                  font-weight: 700;
                  text-align: right;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  width: 105px;
                }
                .equipTime{
                  text-align: right;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  width: 100%;
                }
              }
              .equipItem.active{
                border: 1px dashed #0195ff;
                box-shadow: 0px 0px 5px 1px #39acff;
              }
            }
        }
        .scroll {
            height: 100%;
            overflow-y: hidden;
            }
            .el-scrollbar{
            height: 100%;
            }
            .el-scrollbar__bar{
            &.is-vertical{
                width:100px;//滚动条宽度
            }
            }
            /deep/.el-scrollbar__wrap{
            overflow-y: auto;
            overflow-x:hidden;
            }
            .el-scrollbar__thumb {
            // 可设置滚动条颜色
            background: red;
        }
    }
  
}
.jkTitle{
  display: flex;
  line-height: 36px;
  color: #0096ff;
  justify-content: space-between;
  padding: 0 10px;
  i{
    cursor: pointer;
  }
}
.direc{
  display: flex;
  justify-content: flex-end;
  >div{
    margin: 0 10px;
    cursor: pointer;
  }
}


/deep/.equipTabs .el-tabs__item.is-active,/deep/.equipTabs .el-tabs__item:hover{
  color: #0295ff;
}
/deep/.equipTabs .el-tabs__item{
  color: #cccccc;
}

</style>