fd_dwgz_zhyw_nx/src/App.vue

<template>
  <div
    v-if="!showSisView"
    id="screen"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`,
    }"
  >
    <div v-if="isLogined" class="main">
      <div class="header-body" v-if="hideHeard === '0'">
        <!-- <div class="header-title" @click="handleClickJump()"> -->
          <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
        <img v-if="$store.state.themeName === 'light'" src="./assets/light-projectLogo.png" alt="" /> -->
        <!-- <img src="./assets/logonx.png" alt="" /> -->
          <!-- <span
            :style="
              $store.state.themeName === 'dark'
                ? 'color:#fff; font-size:18px;font-family: SimHei'
                : 'color:#000'
            "
          >
            &gt;&gt;&nbsp;演示平台</span
          > -->
        <!-- </div> -->
        <div class="header-menu-body">
          <!-- <Header /> -->
          <tab-header />
        </div>
      </div>
      <div
        class="menu-body"
        :class="{ hover: isFixed ? true : isShowMenu }"
        @mouseenter="showMenu"
        @mouseleave="hideMenu"
        v-show="$store.state?.menuData?.length"
      >
        <Menu />
      </div>
      <!-- <div>
        <el-menu
          class="lightMenu"
          :class="$store.state.themeName === 'light' ? 'show' : 'hidden'"
          :collapse="true"
          text-color="#ffffff"
          active-text-color="#6262a2"
          background-color="#36348e"
          @select="selectMenu"
          v-if="hideMenus === '0' && $store.state.menuData.length"
        >
          <el-sub-menu
            :index="index"
            :title="item.text"
            v-for="(item, index) in menuData"
            :key="index"
          >
            <template #title>
              <router-link :to="item.path">
                <el-icon>
                  <SvgIcon :svgid="item.icon" />
                </el-icon>
              </router-link>
            </template>
            <el-menu-item-group
              v-for="(menu, idx) in item.children"
              :index="idx"
              :key="idx"
            >
              <router-link :to="menu.path">
                <el-menu-item :index="index + '-' + idx">{{
                  menu.text
                }}</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div> -->
      <div
        class="main-body"
        :style="{ paddingLeft: isFixed && menuLength > 0 ? '52px' : 0 }"
      >
        <router-view />
      </div>
      <!-- <alarmBadge /> -->
    </div>
    <div v-else class="login"><login-page @onLogin="login" /></div>
  </div>
</template>

<script>
import {
  alarm_history,
  fetchStationListAll,
} from "@/api/zhbj/index.js";
// 导入header.vue文件
import alarmBadge from "@/components/alarm-badge/index.vue";
import Menu from "@/views/layout/Menu.vue";
import Header from "@/views/layout/Header.vue";
import tabHeader from "@/views/layout/tabHeader.vue";
import LoginPage from "./views/layout/login-page.vue";
import { GetBoosterlist } from "@/api/factoryMonitor/index.js";
import { getApiWeatherstation } from "@/api/monthlyPerformanceAnalysis";
import { getAllStation } from "@/api/common.js";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import { GetDeviceTableData } from "@/api/zhbj/index.js";
import { ElNotification } from "element-plus";
import dayjs from "dayjs";
import $ from "jquery";
export default {
  components: {
    Menu,
    Header,
    tabHeader,
    LoginPage,
    alarmBadge,
    SvgIcon,
  },

  data() {
    return {
      isShowMenu: false,
      // 当前子系统
      root: "",
      //   isLogined: localStorage.getItem("loginState") || false,
      showSisView: false,
      memuCloseTimeout: null,
      menuData: [],
      hideMenus: "0",
      hideHeard: "0",
      style: {
        width: "1920",
        height: "1080",
        fontsize: "16px",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
      },
      alarmConfigArray: [],
      //请求参数
      requestAlarmHistoryParams: [
        {
          alarmType: "booststation",
          deviceType: "",
        },
        {
          alarmType: "inverter",
          deviceType: "",
        },
        {
          alarmType: "windturbine",
          deviceType: "",
        },
        {
          alarmType: "custom",
          deviceType: "inverter",
        },
        {
          alarmType: "custom",
          deviceType: "windturbine",
        },
      ],
      realList: [],
      dialogList: [],
      alarmList: []
    };
  },
  computed: {
    isLogined() {
      return this.$store.state.user?.loginState;
    },
    isFixed() {
      return this.$store.state?.isFixed;
    },
    menuLength() {
      return this.$store.state?.menuData?.length;
    },
  },
  async created() {
    await this.initWebSocket();
    this.getAlarmConfig();
    this.x = 80;
    this.y = 80;
    let requestResult = [];
    this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
      requestResult.push(this.getAlarmHistory(alarmType, deviceType));
    });

    Promise.all(requestResult)
      .then((promiseResult) => {
        this.alarmList = [];
        promiseResult.forEach(({ data }) => {
          data?.ls?.forEach((ele) => {
            this.pushALarmItem(ele);
          });
        });
        this.dialogList.sort((a, b) => {
          return b.ts - a.ts;
        });
        this.realList.sort((a, b) => {
          return b.ts - a.ts;
        });
        this.$store.commit("changeAlarmlist", this.alarmList);
        this.$store.commit("setWarning", this.dialogList);
        this.$store.commit("setWarningList", this.realList);
        // if (!this.socketLeaveFlag) {
        //   // 没有离开——重连
        //   // websocket重连
        //   this.socketReconnect1();
        // }
      })
      .catch(() => {
        requestResult.forEach((ele, index) => {
          ele
            .then(({ data }) => {
              data?.ls?.forEach((ele) => {
                this.pushALarmItem(ele);
              });
            })
            .catch((error) => {
              ElNotification({
                type: "error",
                title: "查询历史未处理报警请求出错！",
                dangerouslyUseHTMLString: true,
                message: `<div class="currentRequestErrorNotification">
                                <p><span>主要参数：</p>
                                <p style="color:var(--el-color-primary)"><span class="errorTitle">alarmType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].alarmType}"</span></p>
                                <p style="color:var(--el-color-primary)"><span class="errorTitle">deviceType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].deviceType}"</span></p>
                                <p style="color:var(--el-color-danger)"><span class="errorTitle">错误正文:</span><span class="errorDesc">${error}</span></p>
                             </div>`,
              });
              throw error;
            });
        });
      });
  },
  mounted() {
    let that = this;
    that.setScale();
    /*窗口改变事件*/
    $(window).resize(() => {
      that.setScale();
    });
  },
  unmounted() {
    console.log("离开标记", this.socketLeaveFlag);
  },
  methods: {
    //获取报警配置
    getAlarmConfig() {
      if (localStorage.getItem("alarmConfigArray")) {
        this.alarmConfigArray = JSON.parse(
          localStorage.getItem("alarmConfigArray")
        );
      } else {
        this.alarmConfigArray = [
          {
            id: "1",
            alarmLevel: 1,
            isAlart: false,
            isAlarmSound: false,
            isContinuousAlarm: false,
          },
          {
            id: "2",
            alarmLevel: 2,
            isAlart: false,
            isAlarmSound: false,
            isContinuousAlarm: false,
          },
          {
            id: "3",
            alarmLevel: 3,
            isAlart: false,
            isAlarmSound: false,
            isContinuousAlarm: false,
          },
          {
            id: "4",
            alarmLevel: 4,
            isAlart: true,
            isAlarmSound: true,
            isContinuousAlarm: false,
          },
          {
            id: "5",
            alarmLevel: 5,
            isAlart: true,
            isAlarmSound: true,
            isContinuousAlarm: true,
          },
        ];
        localStorage.setItem(
          "alarmConfigArray",
          JSON.stringify(this.alarmConfigArray)
        );
      }
    },
    //查历史报警
    getAlarmHistory(alarmType, deviceType) {
      let params = {
        pageNum: 1,
        pageSize: 50,
        alarmId: "",
        alarmType,
        deviceType,
        stationid: "",
        deviceid: "",
        modelId: "",
        components: "",
        description: "",
        isclose: false,
        // begin: dayjs().add(-1, "hour").format("YYYY-MM-DD HH:mm:ss"),
        // end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        begin: `${dayjs().add(-1, "hour").format("YYYY-MM-DD")} 00:00:00`,
        end: `${dayjs().format("YYYY-MM-DD")} 23:59:59`,
      };
      if (params.alarmType == "windturbine") {
        params.stationid = "";
      } else if (params.alarmType == "inverter") {
        params.stationid = "";
      }
      return alarm_history(params, 12000);
    },
    pushALarmItem(alarmItem, type) {
      const configItem = this.getConfigItem(alarmItem.rank);
      const alarmOption = {
        id: alarmItem.id ? alarmItem.id : alarmItem.tbname,
        lv: alarmItem.rank,
        modelId: alarmItem.modelId,
        lvName: this.getLvName(alarmItem),
        rank: alarmItem.rank,
        confirmed: alarmItem.confirmed,
        class: `animate__bounceInRight lv${alarmItem.rank}`,
        deviceId: alarmItem.deviceId,
        faultCause: alarmItem.faultCause,
        resolvent: alarmItem.resolvent,
        characteristic: alarmItem.characteristic,
        code: alarmItem.code,
        wpName: alarmItem.stationName
          ? alarmItem.stationName
          : alarmItem.wpName,
        stationId: alarmItem.stationId ? alarmItem.stationId : alarmItem.wpId,
        isClose: alarmItem.closeTime ? true : alarmItem.endts ? true : false,
        isCloseName: alarmItem.closeTime
          ? "已解除"
          : alarmItem.endts
          ? "已解除"
          : "未解除",
        alarmId: alarmItem.alarmId,
        alarmType: alarmItem.alarmType,
        alarmName: this.getAlarmName(alarmItem),
        description: alarmItem.description,
        deviceType: alarmItem.deviceType,
        oval: alarmItem.oval,
        triggerType: alarmItem.triggerType,
        ts: alarmItem.ts
          ? dayjs(alarmItem.ts).valueOf()
          : dayjs(alarmItem.updateTime).valueOf(),
        endts: alarmItem.endts
          ? dayjs(alarmItem.endts).format("YYYY-MM-DD HH:mm:ss")
          : null,
        closeTime: alarmItem.closeTime
          ? dayjs(alarmItem.closeTime).format("YYYY-MM-DD HH:mm:ss")
          : null,
        deviceName: alarmItem.deviceName
          ? alarmItem.deviceName
          : alarmItem.code,
        tsName: alarmItem.ts
          ? new Date(alarmItem.ts).formatDate("MM-dd hh:mm:ss")
          : new Date(alarmItem.updateTime).formatDate("MM-dd hh:mm:ss"),
        fullTsName: alarmItem.ts
          ? new Date(alarmItem.ts).formatDate("yyyy-MM-dd hh:mm:ss")
          : new Date(alarmItem.updateTime).formatDate("yyyy-MM-dd hh:mm:ss"),
      };
      if (
        alarmOption.alarmType == "booststation" &&
        alarmOption.deviceType != "custom"
      ) {
        if (
          configItem.isAlarmSound ||
          configItem.isAlart ||
          configItem.isContinuousAlarm
        ) {
          let a = {};
          a[`${alarmOption.stationId}`] =
            alarmOption.closeTime || alarmOption.confirmed ? false : true;
          this.alarmList.push(a);
          this.alarmList = [
            ...new Set(this.alarmList.map((t) => JSON.stringify(t))),
          ].map((s) => JSON.parse(s));
        }
      }
      if (
        configItem.isAlarmSound ||
        configItem.isAlart ||
        configItem.isContinuousAlarm
      ) {
        if (type && type == "ws") {
          this.dialogList.unshift(alarmOption);
        } else {
          this.dialogList.push(alarmOption);
        }
      }
      if (type && type == "ws") {
        this.realList.unshift(alarmOption);
      } else {
        this.realList.push(alarmOption);
      }

      //    && alarmOption.deviceType != "custom"
      this.playAudioEffect();
    },
    getAlarmName(alarmItem) {
      let alarmName = "";
      if (alarmItem.deviceType === "booststation") {
        alarmName = "升压站报警";
      } else if (alarmItem.deviceType === "inverter") {
        alarmName = "光伏报警";
      } else if (alarmItem.deviceType === "windturbine") {
        alarmName = "设备报警";
      } else if (alarmItem.deviceType === "station") {
        alarmName = "场站";
      }

      if (alarmItem.alarmType === "custom") {
        alarmName = "自定义报警";
      }
      return alarmName;
    },
    getLvName(alarmItem) {
      if (alarmItem.rank === 1) {
        return "低级";
      } else if (alarmItem.rank === 2) {
        return "低中级";
      } else if (alarmItem.rank === 3) {
        return "中级";
      } else if (alarmItem.rank === 4) {
        return "中高级";
      } else if (alarmItem.rank === 5) {
        return "高级";
      }
    },

    playAudioEffect() {
      const lv1Config = this.getConfigItem(1);
      let lv1Play = false;
      if (lv1Config.isAlarmSound) {
        lv1Play = this.dialogList.some((ele) => {
          return ele.lv === 1 && !ele.confirm;
        });
      }
      const lv2Config = this.getConfigItem(2);
      let lv2Play = false;
      if (lv2Config.isAlarmSound) {
        lv2Play = this.dialogList.some((ele) => {
          return ele.lv === 2 && !ele.confirm;
        });
      }
      const lv3Config = this.getConfigItem(3);
      let lv3Play = false;
      if (lv3Config.isAlarmSound) {
        lv3Play = this.dialogList.some((ele) => {
          return ele.lv === 3 && !ele.confirm;
        });
      }
      const lv4Config = this.getConfigItem(4);
      let lv4Play = false;
      if (lv4Config.isAlarmSound) {
        lv4Play = this.dialogList.some((ele) => {
          return ele.lv === 4 && !ele.confirm;
        });
      }
      const lv5Config = this.getConfigItem(5);
      let lv5Play = false;
      if (lv5Config.isAlarmSound) {
        lv5Play = this.dialogList.some((ele) => {
          return ele.lv === 5 && !ele.confirm;
        });
      }
      //   console.log(lv1Play, lv2Play, lv3Play, lv4Play, lv5Play);
      if (lv5Play && !this.seriousWarning) {
        this.seriousWarning = true;
        this.audioElement = new Audio();
        this.audioElement.src = "./static/sound/lv5.mp3";
        this.audioElement.loop = true;
        false && this.audioElement?.play();
      } else if (
        (lv1Play || lv2Play || lv3Play || lv4Play) &&
        !this.seriousWarning
      ) {
        this.audioElement = new Audio();
        this.audioElement.src = "./static/sound/lv4.mp3";
        this.audioElement.addEventListener("ended", () => {
          this.audioElement?.removeEventListener(
            "ended",
            this.stopPlayAudioEffect
          );
        });
        false && this.audioElement?.play();
      } else {
        if (!this.seriousWarning) {
          this.stopPlayAudioEffect();
        }
      }
    },
    getConfigItem(lv) {
      return (
        this.alarmConfigArray.find((ele) => {
          return ele.alarmLevel === lv;
        }) || {}
      );
    },
    stopPlayAudioEffect() {
      this.seriousWarning = false;
      if (this.audioElement) {
        this.audioElement.pause();
        this.audioElement.currentTime = 0;
        this.audioElement.loop = false;
      }
      this.audioElement = null;
    },
    async initWebSocket() {
      this.$ws.initWebSocket();
    },
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      const d = window.devicePixelRatio;
      //   let f = 16;
      //   if (d > 1) {
      //     f = 18;
      //   }
      return { x: w, y: h };
    },
    setScale() {
      let scale = this.getScale();
      this.style.transform =
        "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
    },
    // 切换子系统事件
    HeaderMenuClick(data) {
      this.root = data.id;
    },
    showMenu() {
      if (!this.isFixed) {
        this.isShowMenu = true;
        clearTimeout(this.memuCloseTimeout);
        this.memuCloseTimeout = null;
      }
    },
    hideMenu() {
      if (!this.isFixed) {
        this.memuCloseTimeout = setTimeout(() => {
          this.isShowMenu = false;
        }, 500);
      }
    },
    getBooster() {
      // GetBoosterlist().then((res) => {
      //   if (res.data && res.data.code == 200) {
      //     this.$store.commit("changeBooster", res.data.data);
      //   }
      // });
    },
    // 获取测风塔
    async getCftlist() {
      // const { data: datas } = await getApiWeatherstation();
      // this.$store.commit("changeCft", datas.data);
    },
    // 获取全部场站（不分风电光伏）
    async getAllStation() {
      const { data: datas } = await getAllStation();
      if (datas) {
        this.$store.commit("changeStationAll", datas);
      } else {
        this.$store.commit("changeStationAll", []);
      }
    },
    login() {
      this.$store.commit("user/SET_LOGINSTATE", true);
    },
  },

  watch: {
    "$store.state.menuData"(res) {
      this.menuData = res || [];
    },
    isLogined: {
      handler(res) {
        if (!res && this.socketObj) {
          // 离开标记
          this.socketLeaveFlag = true;
          // 关闭WebSocket
          this.socketObj.close();
        }
        if (res) {
          this.getBooster();
          this.getCftlist();
          this.getAllStation();
        }
      },
      immediate: true,
    },
    "$store.state.moudleName"(msg) {
      if (window.__MODE__.showModuleName && msg) {
        this.BASE.showMsg({
          type: this.$store.state.themeName === "dark" ? "success" : "warning",
          showClose: true,
          msg,
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "~@/assets/styles/main.less";
#screen {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
.alarmDeligo {
  z-index: 2003;
  position: relative;

  img {
    width: 43px;
    max-width: 43px;
    height: 43px;
    z-index: 3;
  }

  img:first-child {
    width: 53px;
    height: 57px;
    max-width: 53px;
    top: -7px;
    left: -5px;
    position: absolute;
    z-index: 3;
  }
}

* {
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: fade(@gray, 75);
    border-radius: 4px;
    outline: none;
    outline-offset: 0px;
    border: none;
  }
}

body {
  margin: 0;
  background: #fff;
  color: #fff;
  // background-image: url("./assets/background.png");
  background: rgb(4, 12, 11);
  background-size: cover;
  font-size: @fontsize;
  font-family: @defalut-font-family;
}
@menuWidth: 51.28px;
@headerHeight: 39px;
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  .header-body {
    z-index: 2;
    // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
    // flex: 0 0 100%;

    width: 100%;
    display: flex;
    flex-direction: row;
    height: @headerHeight;
    border-bottom: 1px solid #142b29;
    .header-title {
      padding-left: 20px;
      margin: auto;
      color: #fff;
    }
    .header-menu-body {
      flex-grow: 1;
    }
  }
  .menu-body {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 @menuWidth;
    width: @menuWidth;
    height: calc(100% - @headerHeight);
    // height: calc(100vh - 59px);
    top: @headerHeight;
    // top: 59px;
    background-color: fade(#192a26, 75%);
    z-index: 2002;
    opacity: 0;
    transition: opacity 0.2s;
    transition-timing-function: ease-in;
    // transform: translate(-@menuWidth);

    &:hover,
    &.hover {
      opacity: 1;
      transition: opacity 0.2s;
      transition-timing-function: ease-out;
      transform: translate(0);
    }
  }
  .main-body {
    flex: 0 0 100%;
    max-width: 100%;
    height: calc(100% - @headerHeight);
    // padding: 1.481vh;
    // transition: flex 0.1s, margin-left 0.1s;
    // transition-timing-function: ease-in-out;
    // &.show-menu {
    //   flex: 0 0 calc(100vw - @menuWidth);
    //   margin-left: @menuWidth;
    //   transition: flex 0.1s, margin-left 0.1s;
    //   transition-timing-function: ease-in-out;
    // }
  }
  .el-table__body tr.current-row > td {
    color: #fff;
    background: rgba(66, 66, 66, 0.66) !important;
  }

  .el-transfer-panel {
    width: 450px !important;
    height: 73vh;
    background-color: #111d1c !important;
    border: 1px solid #999999 !important;

    .el-transfer-panel__body {
      height: 100% !important;

      .el-transfer-panel__list {
        height: 100% !important;
      }
    }
  }
  .el-transfer-panel .el-transfer-panel__header {
    background-color: #111d1c !important;
    color: #05bb4c !important;

    .el-checkbox .el-checkbox__label {
      color: #05bb4c !important;
    }
  }
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover {
    background-color: #05bb4c;
    border-color: #05bb4c;
  }
}
.login {
  width: 100%;
  height: 100%;
  background: url("~@/assets/login-bg.png") no-repeat;
  background-size: cover;
  position: relative;
}
.el-badge {
  &.active {
    .el-badge__content--danger {
      opacity: 0 !important;
    }
  }
}
.el-badge__content--danger {
  background: #ff4e00 !important;
  border: none !important;
}
.el-badge__content.is-fixed {
  top: 7px !important;
  right: 14px !important;
  z-index: 2003 !important;
}

.trans {
  animation: circleProgess 3s linear infinite;
}

@keyframes circleProgess {
  0% {
    transform: rotateZ(360deg);
  }

  25% {
    transform: rotateZ(270deg);
  }

  50% {
    transform: rotateZ(180deg);
  }

  75% {
    transform: rotateZ(90deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}
.el-tree-node__content {
  height: 40px !important;
}
.el-tree-node__label {
  font-size: 14px !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #05bb4c !important;
}
.el-table__body tr.hover-row > td.el-table__cell {
  background-color: rgba(2, 2, 2) !important;
}
#appBody.light .el-table th.el-table__cell > .cell {
  height: 8.2vh !important;
}
.power-benchmarking-page
  .top
  .top-left
  .table.el-table
  thead
  tr:last-child
  th
  .cell {
  height: 116px !important;
}
* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}
input {
  -webkit-user-select: auto; /*webkit浏览器*/
}
textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
}
.gfSelect .el-input__suffix {
  display: none !important;
}
body .gfSelect .el-input__inner {
  background: rgba(83, 98, 104, 0);
  color: #ffffff;
  font-size: 16px;
}
.main-body {
  .query {
    display: flex;
    // justify-content: space-between;

    &.left {
      justify-content: flex-start;
    }

    .query-items {
      flex: 0 0 auto;
      display: flex;

      .query-item {
        flex: 0 0 auto;
        display: flex;
        margin: 0 1.4815vh;

        .el-input {
          &.placeholder-left {
            input {
              &::placeholder {
                text-align: left;
              }
            }
          }
        }
        .placeholder-left {
          .el-input {
            input {
              height: 33px !important;
              &::placeholder {
                text-align: left;
              }
            }
          }
        }

        .lable {
          flex: 0 0 auto;
          margin-right: 1.4815vh;
          line-height: 33px;
          color: @gray-l;
        }

        .search-input {
          position: relative;

          // input {
          //   box-sizing: border-box;
          //   flex: 0 0 200px;
          //   border: 0px solid @darkgray;
          //   color: @white;
          //   outline: unset;
          //   border-radius: 0%;
          //   padding-right: 40px;
          //   background: fade(#536268, 20);
          //   height: 33px;
          //   line-height: 33px;

          //   &::placeholder {
          //     font-size: 12px;
          //     text-align: right;
          //     color: @darkgray;
          //   }
          // }

          // .unit {
          //   position: absolute;
          //   right: 12px;
          //   top: 6px;
          //   line-height: 33px;
          //   margin: auto;
          // }
        }
      }
    }

    .query-actions {
      flex: 0 0 auto;
      margin-left: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .btn {
        cursor: pointer;
      }
    }
  }

  input {
    box-sizing: border-box;
    flex: 0 0 200px;
    border: 0px solid @darkgray;
    color: @white;
    outline: unset;
    border-radius: 0%;
    padding-right: 40px;
    background: fade(#536268, 20);
    height: 33px;
    line-height: 33px;

    &::placeholder {
      font-size: 12px;
      text-align: right;
      color: @darkgray;
    }
  }

  input[type="checkbox"] {
    position: relative;
    display: inline-block;
    appearance: none;
    width: 14px;
    height: 14px;
    outline: none;
    border: 1px solid @gray;
    background-color: #000;
    border-radius: 20%;
    margin: 0;
    padding: 0;

    &:checked {
      border-color: @green;
      background: @green;
    }

    &::after {
      display: inline-block;
      content: " ";
      position: absolute;
      left: 30%;
      top: 5%;
      width: 3px;
      height: 7px;
      border-color: #fff;
      border-style: solid;
      border-width: 0px 2px 2px 0px;
      transform: rotate(45deg);
      opacity: 0;
    }

    &:checked::after {
      content: "";
      opacity: 1;
      transition: opacity 0.3s ease-out;
    }
  }
}
</style>