cropland/src/pages/plantGuard/irrigate/irrigate.vue

<!-- 灌溉地图展示 -->
<template>
  <div class="map">
    <div id="container">加载数据，请稍候...</div>
    <!-- 设备列表 -->
    <div class="equipListBox">
      <div class="searchTop">
        <div>设备列表</div>
        <!-- <div>
          <el-input
            size="small"
            placeholder="请选择设备"
            suffix-icon="el-icon-search"
            v-model="searchVal"
          ></el-input>
        </div> -->
      </div>
      <div class="inner">
        <div class="scroll">
          <el-scrollbar>
            <div class="equipList">
                <div class="item"
                v-for="(item,index) in equipRelayList" :key="index" @click="lookEquip(item)">
                    <div class="">
                        <img :src="require('../../../../static/images/irrigate/navIcon/navIcon'+`${item.type}`+'.png')" alt="">
                        <span>{{item.name}}</span>
                    </div>
                    <span @click.stop="setEquipInfo(item,index)">
                      <i class="el-icon-setting"></i>
                    </span>
                </div>
                <div class="item" v-if="!equipRelayList.length">
                   暂无数据 
                </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 环形菜单 -->
    <div class="navMenu">
      <div class="mainMenu" @click="subMenuToggle">
        <div>
          <i class="el-icon-menu"></i>
          <div>菜单</div>
        </div>
      </div>
      <div class="subMenu" ref="subMenu">
        <div class="itemMenu itemMenu1" @click="subMenuState(1)">
          <div>预警</div>
        </div>
        <div class="itemMenu itemMenu2" @click="subMenuState(2)">
          <div>状态</div>
        </div>
        <div class="itemMenu itemMenu3" @click="subMenuState(3)">
          <div>要素</div>
        </div>
      </div>
    </div>
    <div class="popupInner">
      <!-- 设备预警 -->
      <div v-show="warnShow" class="equipWarnBox suspensionBox">
        <div class="top">
          <div>设备预警</div>
          <div @click="subMenuState(1)">
            <i class="el-icon-caret-right"></i>
          </div>
        </div>
        <div class="inner">
          <div class="wranTitle">
            <div
              v-for="(item,index) in wranTitle"
              v-bind:key="item"
              :class="[index==1?'wranmsg':'']"
            >{{item}}</div>
          </div>
          <div class="equipList">
            <div
              class="scroll-content"
              ref="scrollContent"
              :style="{ top }"
              @mouseenter="Stop()"
              @mouseleave="Up()"
            >
              <!-- <div class=""   @mouseenter="Stop()" @mouseleave="Up()"> -->
              <div class="wranInfo" v-for="item in scrollWranList" v-bind:key="item.id">
                <div>{{item.equipName}}</div>
                <div class="wranmsg">{{item.msg}}{{item.msg}}</div>
                <div>{{item.time}}</div>
                <div class="state">{{item.state}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备状态 -->
      <div v-show="equipShow" class="equipCtrlBox suspensionBox">
        <div class="top">
          <div>设备状态</div>
          <div>
            <span class="historyBtn" @click="lookCtrlHistory()">历史数据</span>
            <i class="el-icon-caret-right" @click="subMenuState(2)"></i>
          </div>
        </div>
        <div class="inner">
          <el-scrollbar :style="{'height':ctrlScrollHeight+'px'}">
            <div class="equipList">
              <div class="equipState" v-for="item in equipRelayList" v-bind:key="item.id">
                <div>
                  <span class="name">{{item.name}}</span>
                  <el-switch v-model="item.val" @change="equipStateSwitch(item)" active-color="#0295ff" inactive-color="#b6b6b6"></el-switch>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!-- 气象要素 -->
      <div v-show="qxzElShow" class="qxzEquipBox suspensionBox">
        <div class="top">
          <div>
            <span>水肥要素</span>
            <span class="uptime">(2021-04-21 12:00:00)</span>
          </div>
          <div>
            <span class="historyBtn" @click="lookEleHistory()">历史数据</span>
            <i class="el-icon-caret-right" @click="subMenuState(3)"></i>
          </div>
        </div>
        <div class="inner">
          <el-scrollbar :style="{'height':qxzScrollHeight+'px'}">
            <div class="equipList">
              <div class="equipState" v-for="item in equipEleList" v-bind:key="item.id">
                <div>
                  <img
                    :src="`../../../../static/images/irrigate/qxdev/icon_${item.eleNum}.png`"
                    alt
                  />
                </div>
                <div>
                  <div class="val">{{item.val}}{{item.unit}}</div>
                  <div class="name">{{item.name}}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 设备定位 -->
    <el-dialog
      title="设置"
      custom-class='setlnglatBox'
      :visible.sync="setlnglatVisible"
      width="660px"
      :fullscreen="dialogFull"
      v-dialogDrag
      >
      <setLocation @func="addrSave" v-if="setlnglatVisible" :lnglat="currRelay.lnglat"></setLocation>
    </el-dialog>
    <!-- 设备提示框 -->
    <dcfPopUP ref="dcfPopUP"></dcfPopUP>
    <sbPopUP ref="sbPopUP"></sbPopUP>
    <sqPopUP ref="sqPopUP"></sqPopUP>
    <sfjPopUP ref="sfjPopUP"></sfjPopUP>
    <wranPopUP ref="wranPopUP"></wranPopUP>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const dcfPopUP = () => import("./popUp/dcfPopUp");
const sbPopUP = () => import("./popUp/sbPopUp");
const sqPopUP = () => import("./popUp/sqPopUP");
const sfjPopUP = () => import("./popUp/sfjPopUP");
// const setLocation = () => import("./popUp/setLocation");
import setLocation from "./popUp/setLocation";
// const wranPopUP = ()=> import('./wranPopUP')
import wranPopUP from "./popUp/wranPopUP";
// 要素配置表
import eleList from "../../../../static/js/irrigate/eleList.json"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    dcfPopUP,
    sbPopUP,
    sqPopUP,
    sfjPopUP,
    wranPopUP,
    setLocation
  },
  data() {
    //这里存放数据
    return {
      id:this.$store.state.irrigate_id,
      map: null,
      center: [116.3683244, 39.915085],
      zoom: 4.5,
      tileLayer1: null,
      tileLayer2: null,
      dialogFull:false,
      // 继电器配置表
      relayList: {
        "0": {
          id: 1,
          index: 0,
          name: "-"
        },
        "1": {
          id: 2,
          index: 1,
          name: "风机"
        },
        "2": {
          id: 3,
          index: 2,
          name: "水泵"
        },
        "3": {
          id: 4,
          index: 3,
          name: "增氧机"
        },
        "4": {
          id: 5,
          index: 4,
          name: "湿帘"
        },
        "5": {
          id: 6,
          index: 5,
          name: "遮阳"
        },
        "6": {
          id: 7,
          index: 6,
          name: "开窗"
        },
        "7": {
          id: 8,
          index: 7,
          name: "保温"
        },
        "8": {
          id: 9,
          index: 8,
          name: "投食机"
        }
      },
      relayName: [],
      relayNum: [],
      relayVal: [],
      relayName: [],
      relaydevice_addr:[],
      equipRelayList: [],
      ctrlScrollHeight:"",
      // 要素
      eleList:eleList,
      eleName: [],
      eleNum: [],
      eleVal: [],
      equipEleList: [],
      qxzScrollHeight: "",
      searchVal: "",
      equipData: [],
      marker: null,
      markerList: [],
      infoWindow: null,
      // subMenu状态 0是旋转0度  1是180度
      subMenu: 0,
      warnShow: true,
      equipShow: true,
      qxzElShow: true,
      // 设备预警滚动
      wranTitle: ["设备编号", "预警信息", "时间", "状态"],
      scrollWranList: [
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-26",
          state: "未读"
        },
        {
          equipName: "水泵654321",
          msg: "液体流速≥400mm/s",
          time: "2021-4-25",
          state: "未读"
        },
        {
          equipName: "水泵456546",
          msg: "液体流速≥500mm/s",
          time: "2021-4-24",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-23",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-22",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-21",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-20",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        },
        {
          equipName: "水泵123456",
          msg: "液体流速≥500mm/s",
          time: "2021-4-19",
          state: "未读"
        }
      ],
      activeIndex: 0,
      intnum: undefined,
      // 编辑的继电器
      currRelay:{
        relayNum:'',
        index:'',
        lnglat:[],
      },
      setlnglatVisible:false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    top() {
      return -this.activeIndex * 22 + "px";
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      //创建地图
      var that = this;
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: that.center,
        zoom: that.zoom
      });
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.PolyEditor"
        ],
        () => {
          //   this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale({ position: "RB" }));

          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.getEquipList();
    },
    getEquipList() {
      this.equipData = [
        {
          imei: 412155155,
          type: 1,
          name: "水泵设备1",
          lnglat: [116.3683244, 39.915085]
        },
        {
          imei: 412155155,
          type: 1,
          name: "水泵设备2",
          lnglat: [116.3667244, 39.915085]
        },
        {
          imei: 412155155,
          type: 2,
          name: "施肥机设备",
          lnglat: [116.3685244, 39.917085]
        },
        {
          imei: 412155155,
          type: 3,
          name: "电磁阀",
          lnglat: [116.3675244, 39.916085]
        },
        {
          imei: 412155155,
          type: 4,
          name: "墒情站",
          lnglat: [116.3695244, 39.916085]
        }
      ];
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.sf_status",
        data: this.qs.stringify({
          device_id: this.id
        })
      }).then(res => {
        var data = res.data.data;
        // 要素
        this.eleName = data.conf.eleName.split("/");
        this.eleNum = data.conf.eleNum.split("/");
        this.eleVal = eval("(" + data.dat.device_status + ")");
        this.renderEle();
        // 继电器
        this.relayName = data.conf.relayName.split("/");
        this.relayNum = data.conf.relayNum.split("/");
        this.relayVal = eval("(" + data.dat.device_status + ")");
        if(data.dat.device_addr){     
          this.relaydevice_addr = data.dat.device_addr.split("/");
          this.renderRelay();
        }else{
          for(var i = 0;i<32;i++){
              var defaultlnglat = data.conf.lng+','+data.conf.lat
              this.relaydevice_addr.push(defaultlnglat);
            if(i==31){
              this.renderRelay();
            }
          }
          
        }
      });
    },
    // 渲染要素
    renderEle() {
      this.equipEleList = [];
      this.eleNum.forEach((item, index) => {
        if (item != 100) {
          var name = this.eleName[index] || this.eleList[item].name;
          var unit = this.eleList[item].unit || '单位'
          if(this.eleVal["e" + (index + 1)] == 32767){
              var val = 'N/A';
          }else{
              var val = this.eleVal["e" + (index + 1)];
          }
          this.equipEleList.push({
            eleNum: item,
            val: val,
            unit: unit,
            name: name
          });
        }
      });
      this.$nextTick(() => {
        if (this.equipEleList.length <= 3) {
          this.qxzScrollHeight = 68;
        } else if (this.equipEleList.length <= 6) {
          this.qxzScrollHeight = 136;
        } else{
          this.qxzScrollHeight = 204;
        }
      });
    },
    // 渲染继电器
    renderRelay() {
      this.equipRelayList = [];
      this.relayNum.forEach((item, index) => {
        if (item != 0) {
          var name = this.relayName[index] || this.relayList[item].name;
          var val = this.eleVal["j" + (index + 1)];    
          var lnglat = this.relaydevice_addr[index]
          
          this.equipRelayList.push(
              {
                  switchNum:index,
                  val:val,
                  name:name,
                  lnglat:lnglat,
                  type:item
              }
          )
        }
      });
      this.$nextTick(() => {
        if (this.equipRelayList.length <= 3) {
          this.ctrlScrollHeight = 33;
        } else if (this.equipRelayList.length <= 6) {
          this.ctrlScrollHeight = 66;
        } else if (this.equipRelayList.length <= 9) {
          this.ctrlScrollHeight = 99;
        } else{
          this.ctrlScrollHeight = 132;
        }
      });
      this.map.remove(this.markerList);
      this.markerList = [];
      this.equipRelayList.forEach(item => {
        if (item.type == 1) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon1.gif";
          // var icon = '../../../../static/images/1111.gif'
        } else if (item.type == 2) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon2.gif";
          // var icon = '../../../../static/images/icon5.svg'
        } else if (item.type == 3) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon3.gif";
        } else if (item.type == 4) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon4.gif";
        } else if (item.type == 5) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon5.gif";
        } else if (item.type == 6) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon6.gif";
        } else if (item.type == 7) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon7.gif";
        } else if (item.type == 8) {
          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon8.gif";
        }
        var itemlnglat = item["lnglat"].split(',');
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(itemlnglat[0], itemlnglat[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({            
              image: icon,
              size: new AMap.Size(33, 40),  //图标大小
              imageSize: new AMap.Size(33, 40)
          }),
          offset: new AMap.Pixel(-13, -30),
          title: item["name"]
        });
        // 设置点标记的动画效果，此处为弹跳效果
        // this.marker.setAnimation('AMAP_ANIMATION_BOUNCE');
        this.markerList.push(this.marker);
        //信息窗体
        this.marker.content = item["name"];
        // AMap.event.addListener(this.marker, "click", event => {
        //   this.markerClick(event, item);
        // });
        // AMap.event.addListener(this.map, "click", event => {
        //   if (this.infoWindow) {
        //     this.infoWindow.close();
        //   }
        // });
      });
      this.$nextTick(() => {
        this.map.add(this.markerList);
        this.map.setFitView();
      });
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        offset: new AMap.Pixel(-105, -20)
        // anchor:'bottom-righ'
      });
      // 预警提示框
      // this.$refs.wranPopUP.initialize({
      //   currEquip: {},
      //   visible: true,
      //   infoWindow: this.infoWindow
      // });
      // this.infoWindow.setContent(this.$refs.wranPopUP.$el);
      // this.infoWindow.open(this.map, this.equipData[0].lnglat);
    },
    markerClick(event, item) {
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        offset: new AMap.Pixel(16, -45)
      });
      if (item.type == 1) {
        this.$refs.dcfPopUP.initialize({
          currEquip: {},
          visible: true,
          infoWindow: this.infoWindow
        });
        this.infoWindow.setContent(this.$refs.dcfPopUP.$el);
      } else if (item.type == 2) {
        this.$refs.sbPopUP.initialize({
          currEquip: {},
          visible: true,
          infoWindow: this.infoWindow
        });
        this.infoWindow.setContent(this.$refs.sbPopUP.$el);
      } else if (item.type == 3) {
        this.$refs.sqPopUP.initialize({
          currEquip: {},
          visible: true,
          infoWindow: this.infoWindow
        });
        this.infoWindow.setContent(this.$refs.sqPopUP.$el);
      } else if (item.type == 4) {
        this.$refs.sfjPopUP.initialize({
          currEquip: {},
          visible: true,
          infoWindow: this.infoWindow
        });
        this.infoWindow.setContent(this.$refs.sfjPopUP.$el);
      }
      this.infoWindow.open(this.map, event.target.getPosition());
    },
    // 环形菜单特效
    subMenuToggle() {
      if (this.subMenu == 0) {
        this.subMenu = 1;
        this.$refs.subMenu.style.transform = "rotate(0deg) scale(1)";
      } else {
        this.subMenu = 0;
        this.$refs.subMenu.style.transform = "rotate(124deg) scale(1.4)";
      }
    },
    // 子菜单点击
    subMenuState(flag) {
      if (flag == 1) {
        this.warnShow = !this.warnShow;
      } else if (flag == 2) {
        this.equipShow = !this.equipShow;
      } else if (flag == 3) {
        this.qxzElShow = !this.qxzElShow;
      }
    },
    lookEleHistory(){
      this.$store.commit('setData',{
        name:'ele_history_id',
        val:this.id
      })
      this.$router.push('eleHistory');
    },
    lookCtrlHistory(){
      this.$store.commit('setData',{
        name:'ele_operat_id',
        val:this.id
      })
      this.$router.push('operatData');
    },
    ScrollUp() {
      this.intnum = setInterval(_ => {
        this.$refs.scrollContent.style.transition = "top 0.5s";
        if (this.activeIndex < this.scrollWranList.length - 5) {
          this.activeIndex += 1;
        } else {
          this.$refs.scrollContent.style.transition = "none";
          this.activeIndex = 0;
        }
      }, 1000);
    },

    Stop() {
      clearInterval(this.intnum);
    },
    Up() {
      this.ScrollUp();
    },
    // 设备控制
    equipStateSwitch(item){
      var switchNum = item.switchNum;
      if(item.val){
        var relayState = 1
      }else{
        var relayState = 0
      }
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.sf_control",
        data: this.qs.stringify({
          device_id: this.id,
          relayNum:switchNum,
          relayState:relayState,
        })
      }).then(res => {
        this.$message({
          message: '下发成功',
          type: 'success'
        });
      })
    },
    lookEquip(item){
      var addr =this.relaydevice_addr[item.switchNum].split(',');
      this.map.setCenter(addr)
      this.map.setZoom(17)
    },
    setEquipInfo(item,index){
      this.currRelay.relayNum=item.switchNum;
      this.currRelay.index=index;
      this.currRelay.lnglat=this.relaydevice_addr[item.switchNum].split(',');
      this.setlnglatVisible = true
      
    },
    addrSave(data){
      var addr = [].concat(this.relaydevice_addr)
      addr[this.currRelay.relayNum]=data.lng+','+data.lat
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.sf_control_addr",
        data: this.qs.stringify({
          device_id: this.id,
          device_addr:addr.join('/')
        })
      }).then(res => {
        if(res.data.data==true){
          this.setlnglatVisible = false;
          this.relaydevice_addr[this.currRelay.relayNum]=data.lng+','+data.lat      
          this.renderRelay()
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //  this.ScrollUp();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap();
    for (var i = 0; i < 4; i++) {
      this.scrollWranList.push(this.scrollWranList[i]);
    }
    this.$nextTick(() => {
      this.ScrollUp();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    this.Stop();
  }, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.map,
#container {
  width: 100%;
  height: 100%;
}

.equipListBox {
  position: absolute;
  left: 110px;
  top: 160px;
  bottom: 3.125rem;
  width: 3.5rem;
  background: rgba(12, 20, 44, 0.8);
  border-radius: 8px;
  overflow: hidden;
  z-index: 200;
  .searchTop {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 10px;
    background: #0c142c;
    .el-input {
      width: 2.25rem;
      input {
        background: #ececec;
        color: #000;
        padding: 5px;
        height: 27px;
      }
      /deep/.el-input__inner {
        height: 28px;
        line-height: 28px;
      }
    }
  }
  .inner {
    position: absolute;
    top: 52px;
    bottom: -18px;
    left: 0;
    right: 0;
    .scroll {
      height: 100%;
      overflow: auto;
      .equipList {
        .item {
            padding: 0.175rem;
            color: #fff;
            font-size: 0.175rem;
            // background: red;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
          >div{
            width: 72%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          >span:nth-child(2){
              font-size: 14px;
          }
          img {
            vertical-align: middle;
            margin-right: 2px;
          }
          &:hover {
            background: #0c142c;
          }
        }
        .item.active {
          background: #0c142c;
        }
      }
    }
    .scroll {
      height: 100%;
      overflow-y: hidden;
    }
    .el-scrollbar {
      height: 100%;
    }
    .el-scrollbar__bar {
      &.is-vertical {
        width: 100px; //滚动条宽度
      }
    }
    .el-scrollbar__wrap {
      overflow-y: auto;
      overflow-x: hidden;
    }
    .el-scrollbar__thumb {
      // 可设置滚动条颜色
      background: red;
    }
  }
}
// 悬浮框样式
.suspensionBox {
  // position: absolute;
  width: 400px;
  background: rgba(12, 20, 44, 0.8);
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
  margin-top: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 10px;
    background: #0c142c;
    i {
      cursor: pointer;
      font-size: 14px;
    }
  }
}
.popupInner {
  position: absolute;
  right: 0;
  top: 160px;
  z-index: 200;
}
// 设备预警
.equipWarnBox {
  height: 190px;
  right: 10px;
  // top: 160px;
  .inner {
    // height: 82px;
    // overflow: hidden;
    .wranTitle {
      display: flex;
      justify-content: space-around;
      line-height: 33px;
      color: #fff;
      .wranmsg {
        width: 157px;
      }
    }
    .equipList {
      height: 110px;
      overflow: hidden;
      .scroll-wrap {
        height: 150px;
        overflow: hidden;
      }
      .scroll-content {
        position: relative;
        transition: top 0.5s;
        .wranInfo {
          line-height: 22px;
          color: #92c2f3;
          display: flex;
          justify-content: space-around;
          .wranmsg {
            width: 157px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .state {
            color: red;
          }
        }
      }
      .scroll-content p {
        line-height: 50px;
        text-align: center;
      }
    }
  }
}
.equipCtrlBox {
//   height: 180px;
  right: 10px;
  top: 357px;
  .top {
    .uptime {
      color: #eee;
    }
    .historyBtn {
      border: 1px solid #00c2ff;
      color: #00c2ff;
      border-radius: 14px;
      padding: 2px 4px;
      cursor: pointer;
    }
  }
  .inner {
    // height: 132px;
    overflow: hidden;
    padding-bottom: 10px;
    .el-scrollbar {
    //   height: 149px;
        /deep/.el-scrollbar__wrap {
        overflow-y: auto;
        overflow-x: hidden;
        }
    }
  }
  .equipList {
    display: flex;
    flex-wrap: wrap;
    .equipState {
      color: #fff;
      width: 50%;
      margin-top: 13px;
      text-align: center;
      .name {
        display: inline-block;
        white-space: nowrap;
        width: 87px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        // text-align: right;
      }
      /deep/.el-switch__core {
        width: 30px !important;
        height: 15px;
        /*color:#409EFF;*/
      }
      /*设置圆*/
      /deep/.el-switch__core::after {
        width: 14px;
        height: 14px;
        margin-top: -1px;
        margin-bottom: 2px;
      }
    }
  }
}
.qxzEquipBox {
  // height: 215px;
  right: 10px;
  top: 542px;
  color: #fff;
  .top {
    .uptime {
      color: #eee;
    }
    .historyBtn {
      border: 1px solid #00c2ff;
      color: #00c2ff;
      border-radius: 14px;
      padding: 2px 4px;
      cursor: pointer;
    }
  }
  .inner {
    .el-scrollbar {
      // height: 198px;
      /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .equipList {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10px;
      .equipState {
        width: 33.333%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        > div:first-child {
          margin-right: 5px;
        }
        .val {
          font-size: 14px;
          background-image: -webkit-linear-gradient(bottom, #069dff, #09fdff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: 700;
        }
        .name {
          color: #92c2f3;
          width: 70px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
// 环形菜单
.navMenu {
  position: fixed;
  left: 110px;
  bottom: 23px;
  width: 135px;
  height: 135px;
  z-index: 100;
  > div {
    position: absolute;
    cursor: pointer;
  }
  .mainMenu {
    left: 0;
    bottom: 0;
    z-index: 5;
    // transform: scale(.8);
    transition: all 0.3s;

    > div {
      width: 70px;
      height: 70px;
      background: #0c142c;
      border-radius: 50%;
      color: #fff;
      line-height: 18px;
      font-size: 12px;
      text-align: center;
      > i {
        font-size: 30px;
        margin-top: 12px;
      }
    }
  }
  .subMenu {
    transform: rotate(124deg) scale(1.4);
    transform-origin: 30px 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.5s;
    .itemMenu {
      transform: scale(1);
      transition: all 0.3s;
      position: absolute;
      cursor: pointer;
      &:hover {
        transform: scale(1.1);
      }
      > div {
        width: 40px;
        height: 40px;
        background: #0c142c;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        line-height: 40px;
        text-align: center;
      }
    }
    .itemMenu1 {
      right: 65px;
      bottom: 96px;
    }
    .itemMenu2 {
      right: 16px;
      bottom: 64px;
    }
    .itemMenu3 {
      right: -1px;
      bottom: 5px;
    }
  }
}
// 设备定位弹框
/deep/.setlnglatBox{
  box-shadow: 0px 0px 4px 0px #0161ff;
  background: rgba(12, 20, 44, 0.8);
  border-radius: 8px;
}
/deep/.setlnglatBox .el-dialog__header{
  background: #0c142c;
  padding: 10px 20px;
  border-bottom: 1px solid #0c142c;
}
/deep/.setlnglatBox .el-dialog__header .el-dialog__title{
  color: #fff;
  font-size: 14px;
}
/deep/.setlnglatBox .el-dialog__headerbtn .el-dialog__close{
      color: #fff;
    }
</style>