index.vue

<template>
  <div>
    <div
      :style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
      id="container"
    ></div>
    <div v-show="false" class="btn-wrapper">
      <div class="myBtn">
        <div
          class="el-btn"
          :class="{ active: targetNum == 1 }"
          @click.stop="addDevice"
        >
          <template v-if="iconClass == 'icon-create'">
            <span class="left">
              <i class="iconfont" :class="iconClass" />
            </span>
            <span class="right">{{ createLabel }}</span>
          </template>
          <template v-else>
            <span class="newLetf">{{ createLabel }}</span>
            <span class="newRight">
              <i class="iconfont" :class="iconClass" />
            </span>
          </template>
        </div>
        <div
          class="el-btn"
          :class="{ active: targetNum == 2 }"
          @click.stop="editDevice"
        >
          <span class="left">
            <i class="iconfont icon-compile" />
          </span>
          <span class="right">编辑</span>
        </div>
        <div
          class="el-btn"
          :class="{ active: targetNum == 3 }"
          @click.stop="deleteDevice"
        >
          <span class="left">
            <i class="iconfont icon-delete" />
          </span>
          <span class="right">删除</span>
        </div>
      </div>

      <div class="animate">
        <el-collapse-transition>
          <div v-show="deviceType">
            <div v-for="item in changeBtnData" :key="item.value" class="option">
              <div
                class="op-btn"
                :class="{ active: item.value == createValue }"
                @click.stop="createChange($event, item)"
              >
                <span class="left">
                  <i class="iconfont" :class="item.icon" />
                </span>
                <span class="right">{{ item.label }}</span>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <Right
      v-show="rightDataShow"
      :class="{ classShow: !rightDataShow }"
      ref="Right"
      :list="rightBototmData"
    />
    <Bottom
      v-show="bottomDataShow"
      :class="{
        classShow: !bottomDataShow,
        bottomMarginRight: bottomMarginRight,
      }"
      ref="Bottom"
      :list="rightBototmData"
    />
    <!-- 报警工单 -->
    <CreateWork
      ref="CreateWork"
      :open="createWorkOpen"
      @callback="CreateWorkCallBack"
    />
    <!-- 隐患工单 -->
    <CreateWorkTrouble
      ref="CreateWorkTrouble"
      :open="createWorkTroubleOpen"
      @callback="CreateWorkTroubleCallBack"
    />

    <div
      ref="drawer"
      class="drawer"
      :class="{ back: backFlag, opacity: drawerOpacity }"
      @click.stop="drawerClick"
    >
      <div class="mapChange">
        <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
        <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
      </div>
      <!-- 管道压力 -->
      <div class="pipePressure">
        <!-- <div>管道压力</div> -->
        <div class="hasColorBox" :style="{ color: lineColor[`1`] }">
          <div :style="{ backgroundColor: lineColor[`1`] }"></div>
          低压
        </div>
        <div class="hasColorBox" :style="{ color: lineColor[`2`] }">
          <div :style="{ backgroundColor: lineColor[`2`] }"></div>
          中压
        </div>
        <div class="hasColorBox" :style="{ color: lineColor[`3`] }">
          <div :style="{ backgroundColor: lineColor[`3`] }"></div>
          次高压
        </div>
        <div class="hasColorBox" :style="{ color: lineColor[`4`] }">
          <div :style="{ backgroundColor: lineColor[`4`] }"></div>
          高压
        </div>
      </div>
      <div class="switch" @click="backFlag = !backFlag">
        <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
        <img v-else src="@/assets/images/r.png" alt="" />
      </div>
      <!-- 只能动态传入内嵌盒子的高 -->
      <div class="scroll" :style="{ height: `${boxHeight}px` }">
        <el-input
          v-model="keyWord"
          placeholder="点击输入设备名称"
          id="tipinput"
          class="search-input"
        >
          <template slot="suffix">
            <div @click="search()">
              <i class="iconfont icon-search"></i>
            </div>
          </template>
        </el-input>
        <!-- <el-button class="search-but" @click="search()">搜索</el-button> -->
        <el-button class="refresh-but" @click="refreshMap()">
          <i class="iconfont icon-reset"></i>
        </el-button>

        <div class="leftBar-wrapper">
          <div
            class="box-wrapper"
            v-for="(item, index) in changeBtnData"
            :key="item.value"
          >
            <div
              class="box"
              :class="{
                active: leftBarNum.indexOf(item.value) >= 0,
                firstbox: index == 0,
              }"
              @click="arrowRightChange(item)"
            >
              <span class="upPic"> 上图 </span>
              <div class="left">
                <i class="iconfont" :class="item.icon"></i>
              </div>
              <div class="right">
                {{ item.label }}
              </div>
              <i
                @click.stop="leftBarChange(item)"
                class="el-icon-check bingo"
              ></i>
              <i class="ju"></i>
              <i
                class="arrow-right el-icon-arrow-right"
                :class="{ active: arrowRightNum.indexOf(item.value) >= 0 }"
              ></i>
            </div>
            <el-collapse-transition>
              <div
                class="animate"
                v-show="arrowRightNum.indexOf(item.value) >= 0"
              >
                <!-- 有数据 -->
                <template v-if="item.list.length > 0">
                  <!-- 设备以及管道 展示内容是一样的 -->
                  <template v-if="item.value != 8 && item.value != 9">
                    <div class="list-wrapper">
                      <div class="thead">
                        <div class="no"></div>
                        <div class="code">设备编号</div>
                        <div class="name">设备名称</div>
                      </div>
                      <div
                        class="deviceList"
                        v-for="(iten, index) in item.list"
                        :class="{
                          topActive: index == 0,
                          textRed: iten.alarmState == 1,
                        }"
                        :key="iten.deviceId + `` + index"
                        @click.stop="panToo(iten, item)"
                      >
                        <div class="no">
                          {{ iten.no + 1 }}
                        </div>
                        <div :title="iten.code" class="code">
                          {{ iten.code }}
                        </div>
                        <div :title="iten.deviceName" class="name">
                          {{ iten.deviceName }}
                        </div>
                      </div>
                    </div>
                  </template>
                  <!-- 隐患的展示 -->
                  <template v-else-if="item.value == 8">
                    <div class="list-wrapper">
                      <div class="thead">
                        <div class="no"></div>
                        <div class="code">隐患等级</div>
                        <div class="name">隐患名称</div>
                      </div>
                      <div
                        class="deviceList"
                        :class="{ topActive: index == 0 }"
                        v-for="(iten, index) in item.list"
                        :key="iten.deviceId + `` + index"
                        @click.stop="panToo(iten, item)"
                      >
                        <div class="no">{{ iten.no + 1 }}</div>
                        <div :title="iten.troubleLevel" class="code">
                          {{ iten.troubleLevel }}
                        </div>
                        <div :title="iten.troubleName" class="name">
                          {{ iten.troubleName }}
                        </div>
                      </div>
                    </div>
                  </template>
                  <!-- 值班人员 展示不太一样-->
                  <template v-else-if="item.value == 9">
                    <div class="list-wrapper">
                      <div class="thead">
                        <div class="no"></div>
                        <div class="code">人员姓名</div>
                        <div class="name">联系电话</div>
                      </div>
                      <div
                        class="deviceList"
                        :class="{ topActive: index == 0 }"
                        v-for="(iten, index) in item.list"
                        :key="iten.deviceId + `` + index"
                        @click.stop="panToo(iten, item)"
                      >
                        <div class="no">{{ iten.no + 1 }}</div>
                        <div :title="iten.userName" class="code">
                          {{ iten.userName }}
                        </div>
                        <div :title="iten.userPhone" class="name">
                          {{ iten.userPhone ? iten.userPhone : "-" }}
                        </div>
                      </div>
                    </div>
                  </template>

                  <!-- 翻页 -->
                  <div class="goback">
                    <div class="btn-w">
                      <el-button
                        class="btn backPage"
                        type="mini"
                        :disabled="item.nowPage == 1"
                        @click="pageBack(item, index)"
                        icon="el-icon-arrow-left"
                      />
                      <span class="btn-w-num">{{ item.nowPage }}</span>
                      <el-button
                        class="btn goPage"
                        type="mini"
                        :disabled="item.nowPage == item.maxPage"
                        @click="pageGo(item, index)"
                        icon="el-icon-arrow-right"
                      />
                    </div>
                  </div>
                </template>
                <!-- 无数据 -->
                <template v-else>
                  <div style="padding-left: 5px; color: #fff">暂无数据</div>
                </template>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import  from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import gaodeMap, {
  map,
  DEVICE_TYPE,
  mapOperateType,
} from "utils/gaodeMapView.js";

import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import Bottom from "./components/Bottom.vue";
import Right from "./components/Right.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";
import { lineColor } from "@/utils/mapCommon.js";

export default {
  components: {
    Bottom,
    CreateWork,
    CreateWorkTrouble,
    Right,
  },
  data() {
    return {
      lineColor,
      gaoMap: null,
      deviceType: false,
      value: "",
      operateType: "",
      radio1: "",
      // 1新建，2编辑，3删除,点按钮变色
      targetNum: 0,
      // 左边的bar的active判定
      leftBarNum: [1, 2, 3, 4, 7, 8, 9],
      // 右转箭头的样式active判定
      arrowRightNum: [],
      // 新建里的值
      iconClass: "icon-create",
      createValue: 0,
      createLabel: "新增",
      changeBtnData: [
        {
          type: "0",
          value: 1,
          icon: "icon-gd",
          label: "管道",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "1",
          value: 2,
          icon: "icon-tyx",
          label: "调压箱",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "2",
          value: 3,
          icon: "icon-fmj",
          label: "阀门井",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "3",
          value: 4,
          icon: "icon-llj",
          label: "流量计",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "4",
          value: 7,
          icon: "icon-ylb",
          label: "压力表",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "5",
          value: 8,
          icon: "icon-yh",
          label: "隐患",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
        {
          type: "6",
          value: 9,
          icon: "icon-zhibanrenyuan",
          label: "值班人员",
          nowPage: 1,
          maxPage: 99,
          list: [],
        },
      ],
      // 这是图上所有的点
      allList: [[], [], [], [], [], [], []],
      keyWord: "",
      // 右下角的数据data
      rightBototmData: [],
      bottomDataShow: true,
      rightDataShow: true,
      // 如果右边与下面重叠了，bottom要往左移
      bottomMarginRight: false,
      // 是否显示生成工单弹框
      createWorkOpen: false,
      //隐患工单
      createWorkTroubleOpen: false,
      // 查询用的
      alarmObj: { alarmId: "", type: "" },
      troubleObj: null,

      //  左边抽屉 内嵌scroll盒子的高
      boxHeight: "",
      boxWidth: "",
      drawerOpacity: false,
      //抽屉是否收回
      backFlag: true,
      mapStyle: true,
    };
  },
  created() {
    // 让左边的框隐藏
    this.$store.dispatch("app/toggleDevice", "mobile");
    console.log("sasdasdas");
  },

  mounted() {
    // this.$nextTick(() => {

    this.onResize();
    window.removeEventListener("resize", this.onResize);
    window.addEventListener("resize", this.onResize);
    this.initMap();

    // });
  },
  watch: {
    // changeBtnData: {
    //   handler(newName, oldName) {},
    //   deep: true,
    //   // immediate: true,
    // },
  },
  methods: {
    onResize() {
      this.boxHeight = document.body.clientHeight - 80;
      this.boxWidth = document.body.clientWidth;
      console.log("挂在");

      const {
        Bottom: { $el: pageDomBottom },
        Right: { $el: pageDomRight },
      } = this.$refs;
      // 右边的底
      const RightBottom = pageDomRight.offsetTop + pageDomRight.offsetHeight;
      // 下边的上边
      const bottomTop = pageDomBottom.offsetTop;
      if (RightBottom > bottomTop) {
        // 重叠了，bottom右移动
        this.bottomMarginRight = true;
      }
    },

    initMap() {
      let gaoMap = new gaodeMap("石家庄");
      this.gaoMap = gaoMap;
      window.removeEventListener("mousedown", this.barClose);
      window.addEventListener("mousedown", this.barClose);
      gaoMap.addMouseTool();
      gaoMap.searchTips("tipinput");
      // 获取地图上设备资源
      this.getResource();
      // 把组件this传入类
      this.gaoMap.view = this;
      // 右下角数据 跟值班人员
      this.rightBottomData();
      // this.backFlag = false;
    },
    // 更改卫星图
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
      this.gaoMap.changeMap(this.mapStyle);
    },

    // 获取地图上的资源
    getResource() {
      this.getDeviceInfo()
        .then((res) => {
          if (res == 200) {
            console.log(res);
            return this.getPipeList();
          }
        })
        .then((res) => {
          if (res == 200) {
            // 值班人员
            return this.getInspectorLocations();
          }
        })
        .then((res) => {
          if (res == 200) {
            //隐患
            return this.getMapHiddenTroublelist();
          }
        })
        .then((res) => {
          if (res == 200) {
            // 所有设备上图结束之后，左边的抽屉加载数据
            this.pipeList().then((res) => {
              console.log("开始报警准备");
              this.getSelectAlarmDevice();
            });
            // 获取报警资源
          }
        });
    },
    // 设备
    getDeviceInfo(queryParams) {
      this.loading = true;
      return getAllDeviceInfo(queryParams).then((response) => {
        if (response.code == 200) {
          console.log("所有设备", response.data);
          //各种苏剧分离存储
          this.deviceClassify(response.data);
          for (var i = 0; i < response.data.length; i++) {
            if ("1" == response.data[i].deviceType) {
              this.gaoMap.addMarker(
                DEVICE_TYPE.REGEULATORBOX,
                response.data[i]
              );
            }
            if ("2" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
            }
            if ("3" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
            }
            if ("4" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
            }
          }
        }
        this.loading = false;
        return response.code;
      });
    },
    // 管道
    getPipeList(queryParams) {
      return pipeAllInfoList(queryParams).then((res) => {
        console.log("管道", res);
        if (res.code == 200) {
          this.gaoMap.addPolyline(res.data);
          this.pipeClassify(res.data);
        }
        return res.code;
      });
    },
    //值班人员
    getInspectorLocations(queryParams) {
      return getInspectorLocations(queryParams).then((res) => {
        if (res.code == 200) {
          console.log(" 值班人员", res);
          // 把值班人员传进类里
          this.gaoMap.workerManArr = res.data;
          this.workerManClassify(res.data);
          for (var i = 0; i < res.data.length; i++) {
            let options = res.data[i];
            options.type = 9;
            this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
          }
        }
        return res.code;
      });
    },
    // 隐患
    getMapHiddenTroublelist(queryParams) {
      return getMapHiddenTroublelist(queryParams).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.troubleClassify(res.data);
          res.data.forEach((item) => {
            console.log("隐患", item);
            this.gaoMap.addMarker(DEVICE_TYPE.TROUBLE, item);
          });
          return res.code;
        }
      });
    },
    // 获取报警资源，并且改变图上的状态
    getSelectAlarmDevice() {
      return selectAlarmDevice().then((res) => {
        if (res.length > 0) {
        }
        console.log("报警设备", res);
        this.statusChange(res);
      });
    },
    // 遍历设备改变状态 polyLines markers
    statusChange(list) {
      // 过滤报警管道
      const polyLineArr = list.filter((item) => {
        return item.deviceType == "0";
      });
      // 过滤报警的其它设备
      const deviceArr = list.filter((item) => {
        return item.deviceType != "0";
      });
      // 管道
      if (polyLineArr.length > 0) {
        polyLineArr.forEach((item) => {
          // 获取循报警设备的id
          const { deviceId, orderId, alarmId, alarmType, alarmValue, endTime } =
            item;
          console.log("endTime", endTime);
          // 获取polyLine
          const polyline = this.gaoMap.polyLines.filter((item) => {
            const pipeId = item.getExtData().lineData.pipeId;
            return deviceId == pipeId;
          })[0];

          if (polyline) {
            let options = polyline.getExtData();

            // 增加一个报警状态
            // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
            options.lineData.view = this;
            options.lineData.alarmId = alarmId;
            options.lineData.orderId = orderId;
            if (endTime) {
              polyline.setOptions({ strokeColor: "#2EE7E7" });
              options.lineData.alarmState = 0;
              // 报警类型
              options.lineData.alarmType = null;
              // 报警信息
              options.lineData.alarmValue = null;
              console.log("管道回复");
            } else {
              polyline.setOptions({ strokeColor: "#ff0000" });
              options.lineData.alarmState = 1;
              // 报警类型
              options.lineData.alarmType = alarmType;
              // 报警信息
              options.lineData.alarmValue = alarmValue;
              console.log("管道报警");
            }
            polyline.setExtData(options);
            const myP = this.allList[0].filter((item) => {
              console.log(item.selfData.alarmState);
              return item.selfData.alarmState;
            })[0];

            // console.log("this.allList[0]", this.allList[0]);
            // console.log("myP", myP);
            // 改变左侧列表的状态（1报警，0，正常）
            myP.alarmState = options.lineData.alarmState;
          }
        });
      }

      console.log("deviceArr", deviceArr);
      // 其他设备
      if (deviceArr.length > 0) {
        deviceArr.forEach((item) => {
          // 获取循报警设备的id
          const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } =
            item;
          // 获取polyLine
          const device = this.gaoMap.markers.filter((item) => {
            const { deviceId: id, troubleId } = item.getExtData();
            // 因为隐患也有 deviceId，为了防止隐患直接遍成报警状态，所以要排除隐患，没有troubleId的就不是隐患
            return !troubleId && deviceId == id;
          })[0];
          if (device) {
            const options = device.getExtData();
            // 增加一个报警状态
            // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
            options.view = this;
            options.alarmId = alarmId;
            options.orderId = orderId;
            if (endTime) {
              options.alarmState = 0;
              // 报警类型
              options.alarmType = null;
              // 报警信息
              options.alarmValue = null;
            } else {
              options.alarmState = 1;
              // 报警类型
              options.alarmType = alarmType;
              // 报警信息
              options.alarmValue = alarmValue;
            }
            device.setExtData(options);

            // 找到是列表里的哪个，改变它的状态，让列表里的这个设备变成红色
            const myDevice = this.allList.filter((item) => {
              for (let i = 0; i < item.length; i++) {
                const iten = item[i];
                // 不是隐患也不是值班人员
                if (!iten.troubleId && !iten.userId) {
                  return iten.deviceId == device.getExtData().deviceId;
                }
              }
            })[0][0];
            // console.log("myDevice", myDevice);
            myDevice.alarmState = options.alarmState;
            // const imageName = device.getExtData()
            // console.log(imageName)

            // 3是流量计 4是压力表
            if (device.getExtData().deviceType == 3) {
              // 如果有endtime说明已经维护好了
              if (endTime) {
                this.gaoMap.changeMarkIcon(
                  device,
                  require(`@/assets/images/liuliangji.png`)
                );
              } else {
                this.gaoMap.changeMarkIcon(
                  device,
                  require(`@/assets/images/llj.gif`)
                );
              }
            } else if (device.getExtData().deviceType == 4) {
              if (endTime) {
                this.gaoMap.changeMarkIcon(
                  device,
                  require(`@/assets/images/yalibiao.png`)
                );
              } else {
                this.gaoMap.changeMarkIcon(
                  device,
                  require(`@/assets/images/ylb.gif`)
                );
              }
            }
          }
        });
      }
      if (this.ws) return;
      this.socket();
    },
    socket() {
      console.log("socket执行");
      this.ws = new WebSocket(
        "ws://36.148.23.59:8901/gassafety/websocketServer"
      );
      // this.ws = new WebSocket(
      //   "ws://192.168.2.23:8903/gassafety/websocketServer"
      // );
      this.ws.onopen = (evt) => {
        console.log("WebSockets开启");
      };
      this.ws.onmessage = (evt) => {
        console.log("推送", evt);
        // console.log("Received Message: " + evt.data);
        // ws.close();
        const obj = JSON.parse(evt.data);
        this.statusChange([obj]);
      };
      this.ws.onclose = () => {
        console.log("ws协议关闭");
      };
    },

    // 右下角数据
    async rightBottomData() {
      this.rightBototmData = [];
      await countPipeLength().then((res) => {
        // console.log("管道管道管道管道管道管道", res);
        if (res.code == 200) {
          let obj;
          if (res.data > 0) {
            obj = { number: res.data, type: "99" };
          } else {
            obj = { number: 0, type: "99" };
          }
          this.rightBototmData.push(obj);
        }
      });
      await countDeviceByType().then((res) => {
        if (res.code == 200) {
          let obj = [
            {
              number: 0,
              type: "1",
            },
            {
              number: 0,
              type: "2",
            },
            {
              number: 0,
              type: "3",
            },
            {
              number: 0,
              type: "4",
            },
          ];
          res.data.forEach((item, index) => {
            for (let i = 0; i < obj.length; i++) {
              let objItem = obj[i];
              if (item.type == objItem.type) {
                objItem.number = item.number;
              }
            }
          });
          this.rightBototmData.push(...obj);
        }
      });
    },

    // 左边的Bar修改值 左边抽屉
    leftBarChange(item) {
      // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
      this.gaoMap.closeInfoWindow();
      this.domAllShow();

      this.gaoMap.polyLinesColorClear();
      const index = this.leftBarNum.indexOf(item.value);
      if (index >= 0) {
        this.leftBarNum.splice(index, 1);
      } else {
        this.leftBarNum.push(item.value);
        this.panTo(item);
      }
      // 1,2,3,4,7分别对应数据库type5，1，2，3，4
      // console.log(this.leftBarNum);
      if (this.leftBarNum.includes(1)) {
        this.gaoMap.lineShow(true);
        // this.panTo(item);
      } else {
        this.gaoMap.lineShow(false);
      }

      // console.log("marks",this.gaoMap.markers)
      // this.gaoMap.markerShow();
      if (this.leftBarNum.includes(2)) {
        this.gaoMap.markerShow(1, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(1, false);
      }

      if (this.leftBarNum.includes(3)) {
        this.gaoMap.markerShow(2, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(2, false);
      }

      if (this.leftBarNum.includes(4)) {
        this.gaoMap.markerShow(3, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(3, false);
      }

      if (this.leftBarNum.includes(7)) {
        this.gaoMap.markerShow(4, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(4, false);
      }
      // 隐患
      if (this.leftBarNum.includes(8)) {
        this.gaoMap.markerShow(8, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(8, false);
      }

      if (this.leftBarNum.includes(9)) {
        this.gaoMap.markerShow(9, true);
        // this.panTo(item);
      } else {
        this.gaoMap.markerShow(9, false);
      }
    },
    panTo(item, bool) {
      this.gaoMap.myMap.setZoom(12);
      if (item.list.length > 0) {
        if (this.leftBarNum.includes(item.value)) {
          let path;
          // 线条
          if (item.value == 1) {
            const a =
              (Number(item.list[0].lnglat[0]) + Number(item.list[0].path[0])) /
              2;
            const b =
              (Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
              2;
            path = [a, b - 0.08];
          } else {
            path = [item.list[0].path[0], item.list[0].path[1] - 0.08];
          }
          this.gaoMap.panTo(path);
        }
      }
    },
    panToo(iten, item) {
      this.domAllShow();
      // 如果没打对勾，就啥也不干
      if (!this.leftBarNum.includes(item.value)) return;
      // 点击的时候允许infowindow消失
      this.gaoMap.leftListClick = true;
      // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
      // 所有线条颜色还原
      this.gaoMap.polyLinesColorClear();
      this.gaoMap.myMap.setZoom(12);
      if (item.list.length > 0) {
        if (this.leftBarNum.includes(item.value)) {
          let path;
          if (item.value == 1) {
            const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
            const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
            //屏幕移动的位置
            path = [a, b - 0.08];
            // 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
            iten.infoPath = [a.toFixed(6), b.toFixed(6)];
            console.log(path);
          } else {
            path = [iten.path[0], iten.path[1] - 0.08];
          }
          // const path =
          //   item.value == 1
          //     ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
          //     : [iten.path[0], iten.path[1] - 0.1];
          this.gaoMap.panTo(path);
        }
      }
      // 当前地图中心点
      const { lat, lng } = this.gaoMap.myMap.getCenter();
      // 管道是这个方法，因为管道比较特殊
      if (item.value == 1) {
        this.polylineInfoWindowShow(iten, lat, lng);
      } else if (item.value == 9) {
        // 工作人员
        this.workerManInfoWindowShow(iten, lat, lng);
      } else if (item.value == 8) {
        this.trouleInfoWindowShow(iten, lat, lng);
      } else {
        // 其他设备
        this.diveceInfoWindowShow(iten, lat, lng);
      }
    },
    // 如果是线条飞过去出现infowindow
    polylineInfoWindowShow(iten, lat, lng) {
      const target = this.gaoMap.polyLines.filter((item) => {
        return item.getExtData().lineData.pipeId == iten.deviceId;
      })[0];
      console.log("target", target);
      const e = {
        target,
        lnglat: iten.infoPath,
      };
      // console.log(target.getOptions());
      console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));

      // 如果是原地不动，就直接执行
      // if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
      if (
        iten.infoPath[0] - lng >= -0.00001 &&
        iten.infoPath[0] - lng <= 0.00001 &&
        iten.infoPath[1] - (lat + 0.08) >= -0.00001 &&
        iten.infoPath[1] - (lat + 0.08) <= 0.00001
      ) {
        this.gaoMap.leftListClick = false;
        this.gaoMap.polylineMouseOver(e);
        target.setOptions({ strokeColor: "#F7FE38" });
        return;
      }

      // 因为地图移动的时候infowindow无法显示
      this.gaoMap.handleInfoWindowOpenFunc = () => {
        this.gaoMap.polylineMouseOver(e);
        target.setOptions({ strokeColor: "#F7FE38" });
      };
    },
    // 这个是其他设备的infowindow
    diveceInfoWindowShow(iten, lat, lng) {
      const target = this.gaoMap.markers.filter((item) => {
        return item.getExtData().deviceId == iten.deviceId;
      })[0];
      console.log("target", target);
      const e = {
        target,
        lnglat: iten.path,
      };
      // 如果是原地不动，就直接执行
      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
        this.gaoMap.leftListClick = false;
        this.gaoMap.infoOpen(e);
        return;
      }
      // 因为地图移动的时候infowindow无法显示
      this.gaoMap.handleInfoWindowOpenFunc = () => {
        this.gaoMap.infoOpen(e);
      };
    },
    // 隐患infowindow
    trouleInfoWindowShow(iten, lat, lng) {
      const target = this.gaoMap.markers.filter((item) => {
        return item.getExtData().troubleId == iten.troubleId;
      })[0];
      console.log("target", target);
      const e = {
        target,
        lnglat: iten.path,
      };
      // 如果是原地不动，就直接执行
      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
        this.gaoMap.leftListClick = false;
        this.gaoMap.troubleOpen(e);
        return;
      }
      // 因为地图移动的时候infowindow无法显示
      this.gaoMap.handleInfoWindowOpenFunc = () => {
        this.gaoMap.troubleOpen(e);
      };
    },
    // workerMan，值班人员飞过去后侠士infowindow
    workerManInfoWindowShow(iten, lat, lng) {
      // console.log("iten",iten.userId)
      const target = this.gaoMap.markers.filter((item) => {
        return item.getExtData().userId == iten.userId;
      })[0];
      console.log("target", target);
      const e = {
        target,
        lnglat: iten.path,
      };
      // 如果是原地不动，就直接执行
      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
      // console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
        this.gaoMap.leftListClick = false;
        this.gaoMap.wokerManOpen(e);
        return;
      }
      // 因为地图移动的时候infowindow无法显示
      this.gaoMap.handleInfoWindowOpenFunc = () => {
        this.gaoMap.wokerManOpen(e);
      };
    },

    // 向右的箭头的动画
    arrowRightChange(item) {
      const index = this.arrowRightNum.indexOf(item.value);
      if (index >= 0) {
        this.arrowRightNum.splice(index, 1);
      } else {
        this.arrowRightNum.push(item.value);
      }
      this.domAllShow();
    },

    // 管道储存
    pipeClassify(pipeData) {
      const pipeArr = pipeData.map((item, index) => {
        // console.log( '管道路径',eval(item.coordinates )[0])
        return {
          lnglat: eval(item.coordinates)[0],
          path: eval(item.coordinates)[1],
          no: index,
          deviceId: item.pipeId,
          deviceType: "0",
          deviceName: item.pipeName,
          code: item.pipeCode,
          alarmState: item.alarmState ? item.alarmState : "0",
          selfData: item,
        };
      });
      this.allList[0] = pipeArr;
      console.log("管道", pipeArr);
    },
    // 设备分类存储
    deviceClassify(data) {
      // 所有调压箱数据
      const tyxArr = data
        .filter((item) => {
          return item.deviceType == 1;
        })
        .map((item, index) => {
          return {
            path: [item.longitude, item.latitude],
            no: index,
            deviceId: item.deviceId,
            deviceType: item.deviceType,
            deviceName: item.deviceName,
            code: item.iotNo,
            alarmState: item.alarmState ? item.alarmState : "0",
            selfData: item,
          };
        });
      // 所有阀门井数据
      const fmjArr = data
        .filter((item) => {
          return item.deviceType == 2;
        })
        .map((item, index) => {
          return {
            path: [item.longitude, item.latitude],
            no: index,
            deviceId: item.deviceId,
            deviceType: item.deviceType,
            deviceName: item.deviceName,
            code: item.iotNo,
            alarmState: item.alarmState ? item.alarmState : "0",
            selfData: item,
          };
        });
      // 所有流量计数据
      const lljArr = data
        .filter((item) => {
          return item.deviceType == 3;
        })
        .map((item, index) => {
          return {
            path: [item.longitude, item.latitude],
            no: index,
            deviceId: item.deviceId,
            deviceType: item.deviceType,
            deviceName: item.deviceName,
            code: item.iotNo,
            alarmState: item.alarmState ? item.alarmState : "0",
            selfData: item,
          };
        });
      // 所有压力表数据
      const ylbArr = data
        .filter((item) => {
          return item.deviceType == 4;
        })
        .map((item, index) => {
          return {
            path: [item.longitude, item.latitude],
            no: index,
            deviceId: item.deviceId,
            deviceType: item.deviceType,
            deviceName: item.deviceName,
            code: item.iotNo,
            alarmState: item.alarmState ? item.alarmState : "0",
            selfData: item,
          };
        });
      // console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
      this.allList[1] = tyxArr;
      this.allList[2] = fmjArr;
      this.allList[3] = lljArr;
      this.allList[4] = ylbArr;
    },
    // 隐患存储
    troubleClassify(troubleData) {
      const workManArr = troubleData.map((item, index) => {
        return {
          path: [item.longitude, item.latitude],
          no: index,
          troubleId: item.troubleId,
          troubleName: item.troubleName,
          troubleLevel: item.troubleLevel,
        };
      });
      console.log("值班人员", workManArr);
      this.allList[5] = workManArr;
    },
    // 值班人员
    workerManClassify(workManData) {
      const workManArr = workManData.map((item, index) => {
        return {
          path: [item.longitude, item.latitude],
          no: index,
          userId: item.userId,
          userName: item.nickName,
          userPhone: item.phonenumber,
        };
      });
      console.log("值班人员", workManArr);
      this.allList[6] = workManArr;
    },
    // 左边设备翻页
    async pipeList(pageNum) {
      const num = pageNum ? pageNum : 10;
      // const { nowPage } = this.changeBtnData[0];
      // this.changeBtnData[0].list = this.allList[0].filter((item, index) => {
      //   return index >= (nowPage - 1) * num && index < nowPage * num;
      // });
      // console.log(this.changeBtnData[0], this.allList[0]);
      this.changeBtnData.forEach((item, index) => {
        // console.log("=======", index, this.allList[index]);
        if (this.allList[index]?.length > 0) {
          item.list = this.allList[index].filter((item2, index2) => {
            return (
              index2 >= (item.nowPage - 1) * num && index2 < item.nowPage * num
            );
          });
          item.maxPage = Math.ceil(this.allList[index].length / num);
        } else {
          // 如果为空，就直接把item.list写成[];
          item.list = [];
        }
      });
    },
    pageBack(item) {
      item.nowPage--;
      this.pipeList();
    },
    pageGo(item) {
      item.nowPage++;
      this.pipeList();
    },
    addDevice() {
      if (this.iconClass == "icon-create") {
        this.targetNum = this.targetNum != 1 ? 1 : 0;
      } else {
        if (this.deviceType) {
          this.targetNum = 0;
          this.createReset();
          this.gaoMap.newLineReset();
        }
      }
      if (this.targetNum == 1 && this.createValue == 1) {
        this.gaoMap.lineType = 1;
      } else {
        this.gaoMap.lineType = 0;
        this.gaoMap.mouseTool.close();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();

      this.deviceType = !this.deviceType;
      this.gaoMap.mapOperateType = "add";
      this.gaoMap.removeMarkerDragg();
    },

    // 选择新建项目哪个
    createChange(e, item) {
      // e.stopPropagation();
      this.deviceType = false;
      this.iconClass = item.icon;
      this.createValue = item.value;
      this.createLabel = item.label;

      if (this.targetNum == 1 && this.createValue == 1) {
        // 0是初始，1是新建 2是编辑 3删除
        this.gaoMap.lineType = 1;
        if (this.gaoMap.newLineObj == null) {
          this.gaoMap.createNewLine();
        }
      } else {
        // 如果不是管道，就归位
        this.gaoMap.lineType = 0;
        // 如果不是管道了，把之前的管道清空
        this.gaoMap.newLineReset();

        // this.createReset();
        // 其他
        this.gaoMap.draw(this.createValue.toString());
      }
      // 清空所有正在编辑状态的线
      this.gaoMap.linePolyEditorAllClose();
    },

    // 新建按钮还原
    createReset() {
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.gaoMap.closeAddMarker();
    },
    editDevice() {
      this.targetNum = this.targetNum != 2 ? 2 : 0;
      this.gaoMap.lineType = this.targetNum;
      if (this.targetNum != 2) {
        this.gaoMap.linePolyEditorAllClose();
        this.gaoMap.removeMarkerDragg();
        this.gaoMap.mapOperateType = "normal";
      } else {
        // 如果正在新建线条，则清空
        this.gaoMap.newLineReset();
        this.deviceType = false;
        this.gaoMap.mapOperateType = "edit";
        this.gaoMap.addMarkerDragg();
        // this.gaoMap.placeSearch.clear();
        this.gaoMap.closeAddMarker();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();
      this.createReset();
    },
    deleteDevice() {
      this.targetNum = this.targetNum != 3 ? 3 : 0;
      this.gaoMap.lineType = this.targetNum;
      if (this.targetNum != 3) {
        this.gaoMap.removeMarkerDragg();
        this.gaoMap.mapOperateType = "normal";
      } else {
        // 如果正在新建线条，则清空
        this.gaoMap.newLineReset();
        // 清空所有正在编辑状态的线
        this.gaoMap.linePolyEditorAllClose();
        this.deviceType = false;
        this.gaoMap.mapOperateType = "delete";
        this.gaoMap.removeMarkerDragg();
        //this.gaoMap.placeSearch.clear();
        this.gaoMap.closeAddMarker();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();
      this.createReset();
    },
    selectDeviceType(val) {
      // if("add" == this.operationType){
      this.gaoMap.draw(val);
      // }
      this.deviceType = false;
      this.value = "";
      // 如果选择的是新建管道
      if (val == 1) {
        this.gaoMap.lineType = 1;
        this.gaoMap.createNewLine();
      }
    },

    searchClear() {
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.targetNum = 0;
      this.gaoMap.lineType = 0;
      this.gaoMap.newLineReset();
      this.gaoMap.linePolyEditorAllClose();
      this.gaoMap.closeAddMarker();
      this.gaoMap.removeMarkerDragg();
      this.gaoMap.mapOperateType = "normal";
      // map.remove(this.gaodeMap.markerOverlays);
    },
    // 搜索
    async search() {
      this.searchClear();
      map.clearMap();
      this.gaoMap.placeSearch.clear();
      if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {
        this.gaoMap.placeSearch.setCity(this.gaoMap.searchSelectAdcode);
        this.gaoMap.placeSearch.search(this.gaoMap.searchSelectName);
        this.getDeviceInfo({ deviceName: this.gaoMap.searchSelectName });
        this.gaoMap.polyLines = [];
        this.getPipeList({ pipeName: this.gaoMap.searchSelectName });
        this.gaoMap.searchSelectAdcode = undefined;
        this.gaoMap.searchSelectName = undefined;
      } else {
        // 左边全选
        this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
        // this.arrowRightNum=[];
        // 右转箭头的样式active判定
        // this.arrowRightNum = [];
        // 清空左边列表
        // this.changeBtnDataClear();
        // this.gaoMap.placeSearch.search(this.keyWord);
        this.gaoMap.markers = [];
        this.gaoMap.polyLines = [];
        await this.getDeviceInfo({ deviceName: this.keyWord });
        await this.getPipeList({ pipeName: this.keyWord });
        // 值班人员
        await this.getInspectorLocations({ userName: this.keyWord });
        await this.getMapHiddenTroublelist({ troubleName: this.keyWord });

        this.changeBtnData.forEach((item) => {
          item.nowPage = 1;
        });
        this.pipeList().then(() => {
          // 设备报警
          this.getSelectAlarmDevice();
        });
      }
    },
    // 清空左边列表
    changeBtnDataClear() {
      this.allList = [];
      this.changeBtnData.forEach((item) => {
        // 清空list
        item.list = [];
        item.maxPage = 99;
        item.nowPage = 1;
      });
    },
    // 新建下拉列表关闭 window点击事件
    barClose() {
      // 一点windowbottomData显示
      // this.bottomDataShow = true;
      // return;
      console.log("window");
      // 颜色恢复

      this.deviceType = false;
      // 关闭当前线条的infowindow
      // this.gaoMap.closeInfoWindow();
      // 如果没有选择的时候点window 则高亮消失
      if (this.targetNum == 1 && this.iconClass == "icon-create") {
        this.targetNum = 0;
      }
      // 辅助新建重新画线
      // if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
      // console.log("利用window把lineFlagh恢复");
      this.gaoMap.lineFlag = false;
      // this.gaoMap.createNewLine();
    },
    domAllShow() {
      this.bottomDataShow = true;
      this.rightDataShow = true;
    },
    refreshMap() {
      // this.changeBtnDataClear();
      this.keyWord = "";
      this.arrowRightNum = [];
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.targetNum = 0;
      this.changeBtnData.forEach((item) => {
        item.nowPage = 1;
      });
      map.clearMap();

      this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
      this.initMap();
    },
    // 改变工单弹框状态
    // openChange(bool) {
    //   this.createWorkOpen = bool;
    // },
    // openTroubleChange(bool) {
    //   this.createWorkTroubleOpen = bool;
    // },
    // 生成工单的回调
    CreateWorkCallBack(e) {
      if (!this.alarmObj.alarmId) return;
      console.log("alarmObj", this.alarmObj);
      if (this.alarmObj.type == "pipe") {
        const polyline = this.gaoMap.polyLines.filter((item) => {
          return item.getExtData().lineData.alarmId == this.alarmObj.alarmId;
        })[0];
        let options = polyline.getExtData();
        // 暂时传值，到时候回重新刷新
        options.lineData.orderId = e;
        polyline.setExtData(options);
      } else {
        const marker = this.gaoMap.markers.filter((item) => {
          return item.getExtData().alarmId == this.alarmObj.alarmId;
        })[0];
        let options = marker.getExtData();
        // 暂时传值，到时候回重新刷新
        options.orderId = e;
        marker.setExtData(options);
      }
      // 工单弹框生成之后执行的方法
    },
    alarmObjChange(obj) {
      this.alarmObj = obj;
      console.log(this.alarmObj);
    },
    // 隐患
    // 手动加入orderId
    CreateWorkTroubleCallBack(e) {
      // console.log("隐患嘿嘿嘿")
      const trouble = this.gaoMap.troubles.filter((item) => {
        console.log(item, this.troubleObj.troubleId);
        return item.data.troubleId == this.troubleObj.troubleId;
      })[0];
      console.log("找到隐患了，是", trouble);
      let options = trouble.getExtData();
      // 暂时传值，到时候回重新刷新
      options.orderId = e;
      trouble.setExtData(options);
      trouble.data.orderId = e;
    },
    troubleObjChange(obj) {
      this.troubleObj = obj;
    },
    drawerClick() {
      console.log("drawerClick");
      this.gaoMap.polyLinesColorClear();
      this.gaoMap.closeInfoWindow();
      this.domAllShow();
    },
  },

  beforeDestroy() {
    // 让抽屉继续隐身
    console.log("移除window事件");
    map.clearMap();
    window.removeEventListener("mousedown", this.barClose);
    window.removeEventListener("resize", this.onResize);

    // 关闭scoket
    if (this.ws) {
      console.log("socket关闭了");
      this.ws.close();
      this.ws = null;
    }
  },
};
</script>


<style lang="scss" scoped>
#container {
  position: fixed;
  top: 80px;
  bottom: 0;
  width: 100%;
}
// 如果right与bottom 重叠，则bottom左移动
.bottomMarginRight {
  right: 280px;
}
// .btn-wrapper {
//   position: fixed;
//   right: 32px;
//   top: 100px;
//   .myBtn {
//     display: flex;
//     justify-content: space-between;
//     .el-btn {
//       width: 144px;
//       height: 44px;
//       background-color: #053b6a;
//       margin-right: 22px;
//       border-radius: 4px;
//       text-align: center;
//       line-height: 44px;
//       color: #fff;
//       cursor: pointer;
//       font-size: 18px;
//       display: flex;
//       justify-content: space-between;
//       &.active {
//         background: #31eaea;
//         color: #053b6a !important;
//       }
//       .left {
//         padding-left: 38px;
//         i {
//           font-size: 18px;
//         }
//       }
//       .right {
//         padding-right: 38px;
//       }
//       .newLetf {
//         margin-left: 20px;
//       }
//       .newRight {
//         margin-right: 20px;
//         position: relative;
//         i {
//           position: absolute;
//           right: 0px;
//           top: 1px;
//           font-size: 30px;
//         }
//       }
//     }
//   }
//   .animate {
//     .option {
//       .op-btn {
//         width: 144px;
//         height: 38px;
//         border-radius: 0;
//         color: #053b6a;
//         line-height: 38px;
//         background-color: #fff;
//         cursor: pointer;
//         position: relative;
//         border: 1px solid #cccccc;
//         border-top: 0;
//         &.active {
//           background-image: url("../../../assets/images/bac1.png");
//         }
//         .left {
//           position: relative;
//           margin-right: 30px;
//           margin-left: 22px;
//           i {
//             position: absolute;
//             top: -7px;
//             font-size: 20px;
//           }
//         }
//         .right {
//           display: inline-block;
//           font-size: 14px;
//           line-height: 38px;
//         }

//         &:hover {
//           background-image: url("../../../assets/images/bac1.png");
//         }
//       }
//     }
//   }
// }
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.2rem;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}

.input-text {
  width: 4rem;
  margin-right: 1rem;
}

.classShow {
  opacity: 0;
}
.drawer {
  position: fixed;
  top: 80px;
  bottom: 0;
  left: 0;
  width: 348px;
  transition: 0.2s linear;
  // background: #fff;
  // background: #061d3380;
  background: rgba(6, 29, 51, 0.8);
  // background: red;
  opacity: 0;
  // 优化抽屉出来回去
  &.opacity {
    opacity: 1;
  }
  &.back {
    left: -348px;
  }
  .mapChange {
    right: -178px;
    top: 10px;
    color: #fff;
    position: absolute;
    display: flex;
    div {
      padding: 4px 8px;
      border: 1px solid #fff;
      margin-left: 8px;
      cursor: pointer;
      &.active,
      &:hover {
        background-color: #053b6a;
        color: #31eaea;
      }
    }
  }
  .pipePressure {
    position: absolute;
    color: #fff;
    right: -80px;
    top: 50px;
    padding: 1px;
    // background: rgba(6, 29, 51, 0.8);
    .hasColorBox {
      // border: 1px solid #053b6a;
      padding: 2px 5px;
      margin-bottom: 5px;
      & > div {
        display: inline-block;
        width: 10px;
        height: 10px;
      }
    }
  }
  .scroll {
    // height: 100%;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      display: none;
    }
    .search-input {
      position: absolute;
      top: 14px;
      left: 39px;
      width: 236px;
      // background-color: red !important;
      .icon-search {
        line-height: 28px;
        cursor: pointer;
        font-size: 13px;
      }
    }
    .refresh-but {
      // position: fixed;
      position: absolute;
      padding: 0px;
      height: 28px;
      width: 28px;
      top: 14px;
      left: 285px;
      // width: 85px;
      color: white;
      background-color: #053b6a;
      .icon-reset {
        font-size: 13px;
      }
    }
  }

  // 左边的bar
  .leftBar-wrapper {
    // position: fixed;
    width: 340px;
    // margin-left: 20px;
    margin-top: 60px;
    // box-sizing: border-box;
    .box-wrapper {
      width: 340px;
    }
    .animate {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-top: none;
      width: 340px;
      .list-wrapper {
        margin-left: 22px;
        padding-top: 8px;
      }
      .thead {
        display: flex;
        font-size: 14px;
        margin-bottom: 8px;
        > div {
          // border-right: 1px solid #cccccc;
          box-sizing: border-box;
          // padding-left: 5px;
          // color: #053b6a;
          color: #fff;
          font-weight: 600;
        }
      }
      .deviceList {
        cursor: pointer;
        margin-bottom: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #053b6a00;
        color: #1d1d1d;
        &:hover {
          box-sizing: border-box;
          border-bottom: 1px solid #7fc0f8;
          font-weight: 600;
          > div {
            color: #7fc0f8;
          }
        }
        &.topActive {
          // border-top: 1px solid #cccccc;
        }
        display: flex;
        // border-bottom: 1px solid #cccccc;
        // justify-content: space-between;
        > div {
          // flex: 1;
          font-size: 14px;
          // border-right: 1px solid #cccccc;
          box-sizing: border-box;
          // padding-left: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #fff;
          // border-right: 1px solid #cccccc;
        }
      }
      .no {
        width: 25px;
        font-weight: 700;
      }
      .name {
        // border-right: none;
        flex: 1;
        text-align: center;
        margin-left: 10px;
      }
      .code {
        width: 100px;
        text-align: center;
      }
      .textRed {
        .no,
        .name,
        .code {
          color: red;
        }
        &:hover {
          border-bottom: 1px solid red;
          .no,
          .name,
          .code {
            color: red !important;
          }
        }
      }
    }
    .box {
      width: 348px;
      height: 48px;
      padding-left: 20px;
      display: flex;
      // background-color: #ffffff;
      box-sizing: border-box;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
      cursor: pointer;
      position: relative;
      // box-sizing: border-box;
      &.firstbox {
        // border-top: 1px solid rgba(0, 0, 0, 0.5);
        border-top: 1px solid rgba(5, 59, 106, 0);

        // box-sizing: border-box;
        &:hover {
          border-top: 1px solid rgba(5, 59, 106, 0);
        }
      }
      &:hover {
        box-sizing: border-box;
        // background-color: rgba(5, 59, 106, 0.1);
        background-color: #053b6a;
        border-bottom: none !important;
        .upPic {
          color: #31eaea;
        }
        .left,
        .right {
          color: #31eaea !important;
        }
      }
      .upPic {
        display: inline-block;
        margin-left: 40px;
        line-height: 48px;
        font-size: 16px;
        color: #fff;
      }
      > i.ju {
        position: absolute;
        display: inline-block;
        width: 15px;
        height: 15px;
        background: #fff;
        border: 1px solid #cccccc;
        left: 45px;
        top: 16px;
        // top: ;
        z-index: 1;
        border-radius: 2px;
      }
      > i.bingo {
        z-index: 2;
        position: absolute;
        // line-height: 48px;
        left: 45px;
        top: 16px;
        color: #fff;
      }
      > i.arrow-right {
        color: #fff !important;
        position: absolute;
        right: 32px;
        top: 16px;
        transition: 0.3s linear;
        &.active {
          transform: rotate(90deg);
        }
      }
      &.active {
        // background-color: #053b6a;
        // .left,
        // .right {
        //   color: #fff;
        // }
        > i {
          color: #31eaea;
          font-weight: 600;
        }
      }
      .left {
        color: #fff;
        line-height: 48px;
        margin-left: 28px;
        .iconfont {
          font-size: 22px;
        }
      }
      .right {
        color: #fff;
        line-height: 48px;
        font-size: 16px;
        margin-left: 4px;
      }
    }
    .goback {
      display: flex;
      justify-content: space-between;
      .minMax {
        font-size: 14px;
        line-height: 28px;
        box-sizing: border-box;
        padding-left: 3px;
      }
      .btn-w {
        width: 100%;
        text-align: center;
        padding-bottom: 2px;
        .btn {
          border-radius: 50%;
          background: none;
          // width: 14px;
          // height: 14px;
          padding: 2px;
        }
        .btn-w-num {
          display: inline-block;
          font-size: 14px;
          padding: 0px 5px;
          color: #fff;
        }
      }
    }
  }
  // 开关
  .switch {
    position: absolute;
    font-size: 30px;
    right: -30px;
    top: 50%;
    margin-top: -123px;
    width: 40px;
    border-radius: 40%;
    overflow: hidden;
    cursor: pointer;
    i {
      background: #fff;
    }
  }
}
</style>