ISMS-Visualization-BJGD-TKT/src/views/basePage/components/layerControl/index.vue

<template>
  <div class="dialog-container">
    <div
      :class="selectedSwitch ? 'big-box' : 'small-box'"
      v-if="show && switchConfigShow"
    >
      <div class="switch-box">
        <div v-for="item in switchConfig" :key="item.type" class="switch-row">
          <span>{{ item.label }}</span>
          <el-switch
            v-model="item.show"
            :active-value="true"
            :inactive-value="false"
            active-color="#7ED321"
            inactive-color="rgba(0,19,13,0.40)"
            @change="handleChange($event, item)"
          ></el-switch>
          <i
            :class="item.selected ? 'selected-icon' : 'normal-icon'"
            @click="changeSelectStatus(item)"
          ></i>
        </div>
      </div>
      <div class="selected-detail" v-if="selectedSwitch">
        <div class="line"></div>
        <div class="detail-box">
          <!-- 重大危险源 -->
          <zdwxy
            v-if="selectedSwitch.label === '重大危险源'"
            :data="wxyData"
            @locationEntity="locationEntity"
          ></zdwxy>
          <!-- 风险区域 -->
          <fxqy
            v-else-if="selectedSwitch.label === '风险区域'"
            :data="fxqyData"
            @locationEntity="locationEntity"
          ></fxqy>
          <tszy
            v-else-if="selectedSwitch.label === '特殊作业'"
            :data="tszyData"
            @locationEntity="locationEntity"
          ></tszy>
          <yinhuan
            v-else-if="selectedSwitch.label === '安全隐患'"
            :data="yhData"
            @locationEntity="locationEntity"
          ></yinhuan>
          <!-- 区域人员统计 -->
          <person v-else-if="selectedSwitch.label === '人员'"></person>
          <!-- 电子围栏 -->
          <rail
            v-else-if="selectedSwitch.label === '电子围栏'"
            :data="selectedSwitch.elements"
            @locationEntity="locationEntity"
          ></rail>
          <!-- 通用 -->
          <normal
            v-else
            :data="normalData"
            @locationEntity="locationEntity"
            :layerId="layerID"
          ></normal>
        </div>
      </div>
      <div class="show-click-box" @click="openOrClose()"></div>
    </div>
    <div class="hide-box animated" v-else @click="openOrClose()"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getWXYList, getFXQYList } from "@/API/custom";
import { getBuildEntity } from "@/API/model";
import { getRTData } from "@/API/rtdata";
import { _locate } from "@/utils";
import BaseTableList from "@/views/components/base/BaseTableList";
import Normal from "./layerDetail/Normal";
import fxqy from "./layerDetail/fxqy";
import zdwxy from "./layerDetail/zdwxy";
import person from "./layerDetail/person";
import tszy from "./layerDetail/tszy";
import rail from "./layerDetail/rail";
import yinhuan from "./layerDetail/yinhuan";
import {
  addNewDatasource,
  setModelShow,
  flyToPerspective,
} from "@/utils/mapUtil";
import { getViewer } from "@/store/map/mapService";
import {
  Entity,
  Cartesian2,
  Cartesian3,
  Color,
  NearFarScalar,
  PropertyBag,
  PolylineDashMaterialProperty,
  HorizontalOrigin,
  VerticalOrigin,
  LabelStyle,
  PolygonHierarchy,
  ClassificationType,
  CallbackProperty,
} from "cesium";

export default {
  name: "LayerControl",
  components: {
    BaseTableList,
    Normal,
    fxqy,
    zdwxy,
    person,
    tszy,
    yinhuan,
    rail,
  },
  data() {
    return {
      show: false,
      detailShows: {
        common: false,
        zdwxy: false,
        fxqy: false,
        person: false,
        tszy: false,
        yh: false,
        rail: false,
      },
      layerID: "",
      normalData: [],
      wxyData: [],
      fxqyData: [],
      tszyData: [],
      tszyIconList: [
        {
          name: "动火",
          url: "/Resource/Portrait/2022/01/22/491de4cdf9cf453e986d96dbdacf4b0a.png",
        },
        {
          name: "高处",
          url: "/Resource/Portrait/2022/01/22/db968bc61b1e4d8ba702fbb604a8370b.png",
        },
        {
          name: "吊装",
          url: "/Resource/Portrait/2022/01/22/6697348332fe4bd38fc631c0bff86d87.png",
        },
        {
          name: "盲板",
          url: "/Resource/Portrait/2022/01/22/c4a29923a89d4508b8f3453c86aad70f.png",
        },
        {
          name: "断路",
          url: "/Resource/Portrait/2022/01/22/5d629d1ab246442db3ef40b0915ed343.png",
        },
        {
          name: "动土",
          url: "/Resource/Portrait/2022/01/22/3d94c3a5529b46498d624977845f7712.png",
        },
        {
          name: "受限空间",
          url: "/Resource/Portrait/2022/01/22/a76f621b5b614c1a89bdbdf80db8ca46.png",
        },
        {
          name: "通用",
          url: "/Resource/Portrait/2022/01/22/60b85f13a92f4ee1a03020ba562b5757.png",
        },
      ],
      yhData: [],
      railData: [],
      buildingInfo: [],
      buildingInfoLayerId: "",
      curRTTags: [],
    };
  },
  computed: {
    ...mapGetters([
      "switchConfigShow",
      "switchConfig",
      "rtTag",
      "rtData",
      "buildId",
      "buildInfo",
      "openLayer",
    ]),
    selectedSwitch() {
      return this.switchConfig.find((item) => item.selected);
    },
  },
  watch: {
    selectedSwitch: {
      handler(val) {
        if (val) {
          // console.log(val)
          console.log("切换图层数据列表", val);
          this.layerID = val.type;
          this.normalData = [];
          if (val.elements?.length) {
            this.$set(this, "normalData", val.elements);
          }
          if (["建筑名称", "名称标签", "灭火器"].includes(val.name)) {
            this.normalData = this.buildingInfo;
          }
        }
      },
      deep: true,
    },
    buildId: {
      handler(val) {
        const layer = this.switchConfig.find(
          (item) => item.label === "风险区域"
        );
        //console.log('图层侧边建筑变化', val, this.buildInfo, layer);
        if (layer?.show) {
          this.getFXQYList(undefined, true);
        }
      },
      deep: true,
    },
    switchConfig: {
      handler(newVal) {
        // console.log("Infomation", newVal);
      },
    },
    switchConfigShow: {
      handler(newVal) {
        this.show = newVal ? true : false;
      },
    },
    openLayer: {
      handler(newVal) {
        if (Array.isArray(newVal)) {
          newVal.forEach((layer) => {
            console.log("打开图层", layer);
            this.openLayerByName(layer);
          });
        }
      },
    },
  },
  created() {
    //从配置文件加载的图层
    setTimeout(() => {
      LAYER_CONFIG_LIST.forEach((layer) => {
        layer.label = layer.name;
        layer.type = layer.code;
        this.$store.dispatch("globalConfig/pushSwitchConfig", layer); //设置图层开关
      });
    }, 2000);
  },
  mounted() {
    this.buildingInfo = BUILDING_INFO;
  },
  methods: {
    showInfo() {
      return this.show && this.switchConfigShow;
    },
    openOrClose() {
      if (this.show) {
        this.show = false;
        this.$store.dispatch("globalConfig/setSwitchConfigShow", false);
      } else {
        this.show = true;
        this.$store.dispatch("globalConfig/setSwitchConfigShow", true);
      }
      console.log("开关状态", this.show, this.switchConfigShow);
      return this.show;
    },
    locationEntity(entityID) {
      // console.log(entityID)
      const viewer = getViewer();
      let datasource = viewer.dataSources._dataSources.find((t) => {
        return (
          t && (t.name == "layer_" + this.layerID || t.name == this.layerID)
        );
      });
      //console.log(datasource);
      if (datasource) {
        let target = datasource.entities.getById(entityID);
        // console.log(target)
        viewer.flyTo(target, {
          duration: 1.5,
          maximumHeight: 100.0,
          offset: {
            pitch: -0.6164714757322898,
            heading: 0.02675787352876391,
            range: 65,
          },
        });
      }
    },
    openLayerByName(layerName) {
      let layer = this.switchConfig.firstOrDefault((l) => {
        if (l.name === layerName) {
          return l;
        }
      });
      this.show = true;
      if (layer) {
        layer.show = true;
        layer.selected = false;
        this.handleChange(true, layer);
      }
      //this.changeSelectStatus(layer);
    },
    handleChange(val, layer) {
      this.buildCurrentRTTags();
      this.$emit("handleAlwaysShow", { layerId: layer.layerId, show: val }); //常驻显示的提示框
      console.log("图层开关", val, layer);
      const { type, name, layerId } = layer;
      if (
        [
          "防爆扩音",
          "埋地泄漏",
          "监控探头",
          "摄像头",
          "泄漏",
          "周界",
          "火灾",
          "风险识别",
          "集气站",
          "井场",
          "汇管",
          "井管",
          "站间支线",
        ].includes(name)
      ) {
        this.changeLayerDisplay(val, type);
      } else if (name == "重大危险源") {
        //console.log("重大危险源图层刷新");
        this.getWXYList(layerId, val);
      } else if (name === "风险区域") {
        this.getFXQYList(layerId, val);
      } else if (name === "特殊作业" && val) {
        this.getWFAll(layerId);
      } else if (name === "安全隐患" && val) {
        this.getYHAll(layerId);
      } else if (name === "建筑名称") {
        this.showBuildingInfo(layerId, val);
      } else if (name === "人员") {
        this.$emit("showPersonLayer", val);
      } else if (name === "电子围栏") {
        setModelShow(MODEL_ROOF_LIST, !val);
        this.changeLayerDisplay(val, type);
      } else if (name === "名称标签") {
        this.showBuildingInfoByBuildId(layerId, val);
      } else if (name === "灭火器") {
        //房屋掀顶
        setModelShow(MODEL_ROOF_LIST, !val);
      }
    },

    changeLayerDisplay(state, id) {
      const viewer = getViewer();
      const dataSource = viewer.dataSources.getByName("layer_" + id);
      if (dataSource.length) {
        const entities = dataSource[0].entities.values;
        console.log("选中的所有实体", entities);
        entities.forEach((item) => {
          item.show = state;
        });
        let newSwitchConfig = JSON.parse(JSON.stringify(this.switchConfig));
        let layer = _.find(newSwitchConfig, (item) => {
          return item.code === id;
        });
        if (!!layer) {
          layer.show = state;
          this.$store.dispatch("globalConfig/setSwitchConfig", newSwitchConfig);
        }
      }
    },
    changeSelectStatus(item) {
      item.selected = !item.selected;
      this.$store.dispatch("globalConfig/updateSwitchSelected", item);
    },
    transPosition(pointList = []) {
      return pointList.reduce((pre, cur) => {
        const { longitude, latitude } = this.buildInfo?.gpsCoordinate0;
        const { x, y } = _locate(cur.x, cur.y, { x: longitude, y: latitude });
        pre.push([x, y, +cur.z]);
        return pre;
      }, []);
    },
    async getWXYList(layerId, show) {
      try {
        let dataSource = addNewDatasource("zdwxy");
        dataSource.entities.removeAll();
        if (!show) return;
        let res = await getWXYList();
        // console.log(res)
        this.wxyData = res.data.content;
        this.wxyData.forEach((d) => {
          d.GPSPoints = this.transPosition([
            { x: d.location.x, y: d.location.y, z: 0 },
          ]);
          // console.log(d)
          dataSource.entities.add(
            new Entity({
              id: d.id,
              name: d.name,
              show: true,
              position: Cartesian3.fromDegrees(...d.GPSPoints[0]),
              billboard: {
                image:
                  BASE_URL +
                  "/Resource/Portrait/2022/01/08/55e6e806417241cd9db9d5c6551f321d.png",
                scale: 0.1, //固定值
                pixelOffset: new Cartesian2(0, -80),
              },
              polyline: {
                positions: Cartesian3.fromDegreesArrayHeights([
                  d.GPSPoints[0][0],
                  d.GPSPoints[0][1],
                  d.GPSPoints[0][2],
                  d.GPSPoints[0][0],
                  d.GPSPoints[0][1],
                  0,
                ]),
                width: 2,
                material: new PolylineDashMaterialProperty({
                  color: Color.CYAN,
                }),
              },
              properties: new PropertyBag({
                type: "zdwxy",
                details: d,
              }),
            })
          );
        });
      } catch (err) {
        console.log(err);
      }
    },

    async getFXQYList(layerId, show) {
      console.log("风险区域图层刷新", layerId);
      try {
        let dataSource = addNewDatasource("layer_fxqy");
        let dataSource2 = addNewDatasource("layer_" + layerId);
        dataSource.entities.removeAll();
        dataSource2.entities.removeAll();
        if (!show) {
          setModelShow(MODEL_ROOF_LIST, false);
          return;
        }
        setModelShow(MODEL_ROOF_LIST, false);

        let res = await getFXQYList({
          buildId: this.buildInfo?.positioningBuildId,
          riskLevelArray: ["306001", "306002", "306003", "306004"],
        });
        // console.log("FXQYInfomation", res);
        let tempdata = res.data.content;
        let fxqyList = new Array();
        if (show) {
          this.fxqyData = fxqyList;
        } else {
          this.fxqyData = [];
        }
        //遍历区域
        tempdata.forEach((a, i) => {
          //遍历围栏
          a.rails.forEach((r, ii) => {
            r.riskLevel = a.riskLevel;
            r.riskLevelStr = a.riskLevelStr;
            r.GPSPoints = new Array();
            //遍历坐标
            if (r.points) {
              r.points.forEach((p, iii) => {
                p.z = -1;
              });
              r.GPSPoints = this.transPosition(r.points);
              fxqyList.push(r);
              let color = "#ff0000";
              let fillColor = "#ff0000";
              switch (r.riskLevel) {
                case "306001":
                  color = "#ff0000";
                  fillColor = "#ff0000";
                  break;
                case "306002":
                  color = "#e09213";
                  fillColor = "#e09213";
                  break;
                case "306003":
                  color = "#d8c732";
                  fillColor = "#d8c732";
                  break;
                case "306004":
                  color = "#001aff";
                  fillColor = "#001aff";
                  break;
              }
              dataSource.entities.add(
                new Entity({
                  id: r.id,
                  name: r.railName,
                  show: true,
                  polygon: {
                    show: true,
                    hierarchy: new PolygonHierarchy(
                      Cartesian3.fromDegreesArrayHeights(
                        r.GPSPoints.flat(Infinity)
                      )
                    ),
                    material: Color.fromCssColorString(
                      fillColor || "#fff"
                    ).withAlpha(0.6),
                    classificationType: ClassificationType.BOTH,
                  },
                  properties: new PropertyBag({
                    type: "fxqy",
                    details: r,
                  }),
                })
              );
              dataSource2.entities.add(
                new Entity({
                  id: r.id,
                  name: r.railName,
                  show: true,
                  polyline: {
                    show: true,
                    positions: Cartesian3.fromDegreesArrayHeights(
                      r.GPSPoints.flat(Infinity)
                    ),
                    perPositionHeight: true,
                    outline: true,
                    outlineColor:
                      Color.fromCssColorString(color).withAlpha(0.5),
                    outlineWidth: 1,
                    extrudedHeight: -0.01,
                    material: Color.fromCssColorString(
                      fillColor || "#fff"
                    ).withAlpha(0.35),
                  },
                  properties: new PropertyBag({
                    type: "layer_" + layerId,
                    details: r,
                  }),
                })
              );
            }
          });
        });
        this.fxqyData = fxqyList;
      } catch (err) {
        console.log(err);
      }
    },
    async getWFAll(layerId) {
      try {
        this.tszyData = [];
        let res = await getRTData({ tags: ["udp.wf.fn.getAllTask"] });
        //console.log(res);
        let dataSource = addNewDatasource("layer_" + layerId);
        dataSource.entities.removeAll();

        res.data.forEach((d, i) => {
          let arr = JSON.parse(d.value);
          //console.log(arr);
          arr.forEach((dvalue) => {
            //let dvalue = JSON.parse(d.value)[0];
            dvalue.id = dvalue["编号"];
            this.tszyData.push(dvalue);
            if (dvalue.locationPoint) {
              let locationPoint = JSON.parse(dvalue.locationPoint);
              let icon = this.tszyIconList.firstOrDefault((i) => {
                if (dvalue.process_name.substring(0, 2) === i.name) {
                  return i;
                }
              });
              if (icon == null) {
                icon = this.tszyIconList[7];
              }
              dataSource.entities.add(
                new Entity({
                  id: dvalue["编号"],
                  name: dvalue.bizName,
                  show: true,
                  position: Cartesian3.fromDegrees(
                    locationPoint.x,
                    locationPoint.y,
                    locationPoint.z + 1
                  ),
                  billboard: {
                    image: BASE_URL + icon.url,
                    scale: 0.15, //固定值
                  },
                  properties: new PropertyBag({
                    type: "wf",
                    details: dvalue,
                  }),
                })
              );
            }
          });
        });
        // console.log(this.tszyData)
      } catch (err) {
        console.log(err);
      }
    },
    async getYHAll(layerId) {
      try {
        this.yhData = [];
        let res = await getRTData({ tags: ["udp.yh.fn.getAllTask_YH"] });
        // console.log(res)
        let dataSource = addNewDatasource("layer_" + layerId);
        dataSource.entities.removeAll();

        res.data.forEach((d, i) => {
          let arr = JSON.parse(d.value);
          arr.forEach((dvalue) => {
            //let dvalue = JSON.parse(d.value)[0];
            dvalue.id = dvalue["编号"];
            this.yhData.push(dvalue);
            if (dvalue.locationPoint) {
              let locationPoint = JSON.parse(dvalue.locationPoint);
              dataSource.entities.add(
                new Entity({
                  id: dvalue["编号"],
                  name: dvalue["隐患名称"],
                  show: true,
                  position: Cartesian3.fromDegrees(
                    locationPoint.x,
                    locationPoint.y,
                    locationPoint.z
                  ),
                  billboard: {
                    image:
                      BASE_URL +
                      "/Resource/Portrait/2022/01/16/15e3b945623745edbc6cad6d1a721cb7.png",
                    scale: 0.5, //固定值
                  },
                  properties: new Cesium.PropertyBag({
                    type: "wf",
                    details: dvalue,
                  }),
                })
              );
            }
          });
        });
        // console.log(this.tszyData)
      } catch (err) {
        console.log(err);
      }
    },
    showBuildingInfo(layerId, show) {
      this.buildingInfoLayerId = "layer_" + layerId;
      let dataSource = addNewDatasource(this.buildingInfoLayerId);
      if (show) {
        if (dataSource.entities.values.length == 0) {
          this.buildingInfo.forEach((d) => {
            dataSource.entities.add(
              new Entity({
                id: "buildingName_" + d.id,
                //name: d.name,
                position: Cartesian3.fromDegrees(d.x, d.y, d.z),
                label: {
                  text: d.name,
                  show: new CallbackProperty((time, result) => {
                    return this.buildingNameShowProperty(d.id);
                  }),
                  font: "18px Helvetica",
                  style: LabelStyle.FILL_AND_OUTLINE,
                  pixelOffset: new Cartesian2(0, -18),
                  fillColor: Color.WHITE,
                  outlineColor: Color.BLACK,
                  outlineWidth: 2,
                  horizontalOrigin: HorizontalOrigin.CENTER,
                  verticalOrigin: VerticalOrigin.TOP,
                  //scaleByDistance: new NearFarScalar(1, 2.6, 800, 0),
                },
                properties: new PropertyBag({
                  type: "buildingName",
                  details: d,
                }),
              })
            );
            dataSource.entities.add(
              new Entity({
                id: "buildingPerson_" + d.id,
                //name: d.name,
                position: Cartesian3.fromDegrees(d.x, d.y, d.z),
                label: {
                  text: new CallbackProperty((time, result) => {
                    return this.getPersonCount(d.id);
                  }),
                  show: new CallbackProperty((time, result) => {
                    return this.buildingNameShowProperty(d.id);
                  }),
                  font: "18px Helvetica",
                  style: LabelStyle.FILL,
                  pixelOffset: new Cartesian2(0, -42),
                  fillColor: Color.WHITE,
                  backgroundColor: Color.DARKBLUE, //Color.WHITE,    //背景颜色
                  showBackground: true, //是否显示背景颜色
                  outlineColor: Color.BLACK,
                  outlineWidth: 2,
                  horizontalOrigin: HorizontalOrigin.CENTER,
                  verticalOrigin: VerticalOrigin.TOP,
                  //scaleByDistance: new NearFarScalar(1, 2.6, 800, 0),
                },
                properties: new PropertyBag({
                  type: "buildingPerson",
                  details: d,
                }),
              })
            );
          });
        } else {
          dataSource.show = true;
        }
      } else {
        dataSource.show = false;
      }
    },
    showBuildingInfoByBuildId(layerId, show) {
      this.buildingInfoLayerId = "layer_" + layerId + "_" + this.buildId;
      let dataSource = addNewDatasource(this.buildingInfoLayerId);
      if (show) {
        if (dataSource.entities.values.length == 0) {
          if (
            !!this.buildId &&
            !!BuildLabels[this.buildId] &&
            !!BuildLabels[this.buildId].length
          ) {
            BuildLabels[this.buildId].forEach((d) => {
              // console.log(d)
              dataSource.entities.add(
                new Entity({
                  position: Cartesian3.fromDegrees(d.x, d.y, d.z),
                  label: {
                    text: d.name,
                    show,
                    font: "18px Helvetica",
                    style: LabelStyle.FILL_AND_OUTLINE,
                    pixelOffset: new Cartesian2(0, -20),
                    fillColor: Color.MEDIUMSPRINGGREEN,
                    outlineColor: Color.BLACK,
                    outlineWidth: 2,
                    horizontalOrigin: HorizontalOrigin.CENTER,
                    verticalOrigin: VerticalOrigin.TOP,
                    scaleByDistance: new NearFarScalar(1, 2, 500, 0.5),
                  },
                  properties: new PropertyBag({
                    type: "buildingName",
                    details: d,
                  }),
                })
              );
            });
          }
        } else {
          dataSource.show = true;
        }
      } else {
        dataSource.show = false;
      }
    },

    buildingNameShowProperty(id) {
      return this.$parent.building.curBuildingId != id;
    },
    getPersonCount(id) {
      return !!this.$parent.buildingPersonCount[id]
        ? this.$parent.buildingPersonCount[id].PersonCount.toString()
        : "0";
    },
    buildCurrentRTTags() {
      this.curRTTags = [];
      this.switchConfig.forEach((s) => {
        if (s.show) {
          if (!!this.rtTag["layer_" + s.layerId]) {
            this.curRTTags = _.concat(
              this.curRTTags,
              this.rtTag["layer_" + s.layerId]
            );
          }
        }
      });
      // console.log(this.curRTTags);
    },
    async getNormalRTData() {
      try {
        if (this.curRTTags.length) {
          let res = await getRTData({ tags: this.curRTTags });
          this.$store.dispatch("globalConfig/updateRTData", res.data);
        }
      } catch (err) {
        console.log(err);
      }
      setTimeout(() => {
        this.getNormalRTData();
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-container {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  box-sizing: border-box;

  .small-box {
    width: 188.156px /* 171/192 */;
    height: 645px /* 645/192 */;
    background-image: url(~@/assets/imgs/dialog/btn_leftsidebar_hlt@2x.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;
  }
  .big-box {
    width: 545.391px /* 507/192 */;
    height: 645px /* 645/192 */;
    background-image: url(~@/assets/imgs/dialog/btn_leftsidebar_hlt2@2x.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;

    .selected-detail {
      width: 384px /* 360/192 */;
      height: 100%;
      position: absolute;
      right: 0;

      .line {
        width: 1px /* 1/192 */;
        height: 628px /* 628/192 */;
        background-image: url(~@/assets/imgs/dialog/Line@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 8px /* 8/192 */ 10px /* 10/192 */;
        position: absolute;
      }
      .detail-box {
        width: 317.75px /* 264/192 */;
        height: 100%;
        margin-left: 27px;
        padding-top: 30px /* 30/192 */;
        .detail-search-box {
          // display: flex;
          padding: 15px /* 15/192 */ 0;
          .search-item {
            width: 100%;
            height: 28px /* 28/192 */;
            display: flex;
            align-items: center;
            margin-top: 15px /* 15/192 */;
            span {
              width: 70px /* 70/192 */;
              height: 28px /* 28/192 */;
              line-height: 28px /* 28/192 */;
              color: #fff;
              text-align: center;
              font-size: 14px /* 14/192 */;
            }
            .el-input {
              ::v-deep .el-input__inner {
                // width: 0.572917px/* 110/192 */;
                height: 28px /* 28/192 */;
                border-radius: 0;
                background: rgba(0, 0, 0, 0.4);
                border: 1px /* 1/192 */ solid #a8c1be;
                color: #fff;
                // padding-right: 0.182292px/* 35/192 */;
              }
            }
          }
          .search-btn-box {
            width: 100%;
            height: 28px /* 28/192 */;
            display: flex;
            justify-content: center;
            margin-top: 15px /* 15/192 */;
            .search-btn {
              width: 70px /* 70/192 */;
              height: 28px /* 28/192 */;
              line-height: 28px /* 28/192 */;
              text-align: center;
              font-size: 14px /* 14/192 */;
              color: #fff;
              background: rgba(0, 25, 22, 0.65);
              border: 1px /* 1/192 */ solid #cff3ef;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .show-click-box {
    width: 31px /* 31/192 */;
    height: 645px /* 645/192 */;
    position: absolute;
    right: 0;
    z-index: 1000;
    cursor: pointer;
  }
  .switch-box {
    width: 152px /* 140/192 */;
    height: 645px /* 645/192 */;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    padding-top: 30px /* 30/192 */;
    padding-left: 10px /* 10/192 */;
    .switch-row {
      width: 100%;
      height: 40px /* 40/192 */;
      line-height: 40px /* 40/192 */;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 13px;
      span {
        display: inline-block;
        width: 76.8px /* 50/192 */;
        color: #fff;
      }
      .el-switch {
        width: 30px /* 30/192 */;
        height: 14px /* 14/192 */;
        line-height: 14px /* 14/192 */;
        ::v-deep .el-switch__core {
          width: 30px !important/* 30/192 */;
          height: 14px /* 14/192 */;
          line-height: 14px /* 14/192 */;
        }
        ::v-deep .el-switch__core::after {
          width: 14px /* 14/192 */;
          height: 14px /* 14/192 */;
          margin-left: -14px /* 14/192 */;
          // top: -0.005208px/* 1/192 */;
          left: 14px /* 14/192 */;
          margin-top: -2px /* 2/192 */;
          margin-bottom: 2px /* 2/192 */;
        }
      }
      i {
        display: inline-block;
        width: 16px /* 16/192 */;
        height: 14px /* 14/192 */;
        cursor: pointer;
        &.normal-icon {
          background: url(~@/assets/imgs/dialog/icon_list_hlt@2x.png) no-repeat;
          background-size: 100% 100%;
        }
        &.selected-icon {
          background: url(~@/assets/imgs/dialog/icon_list_nor@2x.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      .el-switch.is-checked {
        ::v-deep .el-switch__core::after {
          width: 14px /* 14/192 */;
          height: 14px /* 14/192 */;
          left: 30px /* 30/192 */;
          margin-top: -2px /* 2/192 */;
          margin-bottom: 2px /* 2/192 */;
        }
      }
    }
  }

  .hide-box {
    width: 31px /* 31/192 */;
    height: 645px /* 645/192 */;
    background-image: url(~@/assets/imgs/dialog/btn_leftsidebar_nor@2x.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;
    cursor: pointer;
  }
}
</style>