修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/cameraVideo/index/Video.vue

@@ -1,128 +1,80 @@
<template>
  <div style="width:100%; height: 100%;">
    <div class="monitoring-right" ref="videoRight">
      <div class="monitoring-video" ref="monitorVideo">
        <div class="monitoring-video-guid">
          <span
            :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
            @click="setGuid(1)"
          ></span>
          <span
            :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
            @click="setGuid(2)"
          ></span>
          <span
            :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
            @click="setGuid(3)"
          ></span>
          <el-tooltip
            v-show="true"
            :content="`${track ? '关闭追踪': '开启追踪'}`"
            placement="bottom"
            popper-class="atooltip"
          >
      <div class="main-top">
        <div class="monitoring-video" ref="monitorVideo">
          <div class="monitoring-video-guid">
            <span
              :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
              @click="handleTrack"
              :class="guid === 1 ? 'iconfont icongongge1 activegongge' : 'iconfont icongongge1'"
              @click="setGuid(1)"
            ></span>
          </el-tooltip>
            <span
              :class="guid === 2 ? 'iconfont icongongge activegongge' : 'iconfont icongongge'"
              @click="setGuid(2)"
            ></span>
            <span
              :class="guid === 3 ? 'iconfont icongongge2 activegongge' : 'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip
              v-if="TreeDataPool.selectedNode.id"
              :content="`${showArea ? '隐藏区域' : '查看区域'}`"
              placement="bottom"
              popper-class="atooltip"
            >
              <span :class="showArea ? 'activegongge' : ''" class="iconfont iconquyu" @click="toggleShowArea"></span>
            </el-tooltip>
            <!-- <span
              v-if="TreeDataPool.selectedNode.id"
              class="area-trigger"
              @click="toggleShowArea"
            >{{showArea?'隐藏区域':'查看区域'}}</span> -->
            <!-- <el-tooltip
              v-show="true"
              :content="`${track ? '关闭追踪': '开启追踪'}`"
              placement="bottom"
              popper-class="atooltip"
            >
              <span
                :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
                @click="handleTrack"
              ></span>
            </el-tooltip>-->
          </div>
          <div class="fixedRatioBox">
            <div :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'" v-if="visibilityState">
              <VideoItem
                v-for="(item, index) in TreeDataPool.videoArr"
                :key="index"
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                :class="[
                  TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
                  guid === 1 ? 'onlyActiveItem' : ''
                ]"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>
          </div>
        </div>
        <div
          :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
          style="width: 100%; height: calc(100% - 52px);"
          v-if="visibilityState"
        >
          <video-item
            v-for="(item, index) in TreeDataPool.videoArr"
            :key="index"
            :videoGuid="guid"
            :videoIndex="index"
            :videoItem="item"
            :class="[
              TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
              guid === 1 ? 'onlyActiveItem' : ''
            ]"
            @click="videoItemClick(index)"
          ></video-item>
        <div class="monitoring-task" ref="monitorTask">
          <VideoTask ref="taskview" @addToBase="toAdd"></VideoTask>
        </div>
      </div>
      <div class="monitoring-task" ref="monitorTask">
        <video-task ref="taskview" @addToBase="toAdd"></video-task>
      </div>
      <div class="monitoring-photo">
        <video-photo ref="photoview" @addToBase="toAdd"></video-photo>
      </div>
    </div>
    <hsc-window-style-metal class="windown-model">
      <hsc-window
        v-for="(item, index) in CardList.addBaseList"
        :closeButton="true"
        @closebuttonclick="closeWindow(index)"
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
        positionHint="center"
        :isScrollable="true"
        :minWidth="662"
        :minHeight="479"
        :maxWidth="10000"
        :maxHeight="7000"
        :height="defaultHeight"
        :width="defaultWidth"
      >
        <div class="addToBase">
          <div class="topLabel">加入底库</div>
          <div class="items">
            <div class="lable">
              <p>黑名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="items">
            <div class="lable">
              <p>白名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="buttons">
            <el-button type="primary" @click="saveAddBase(item, index)">保存</el-button>
            <el-button type="default" @click="closeWindow(index)">取消</el-button>
          </div>
        </div>
      </hsc-window>
    </hsc-window-style-metal>
  </div>
</template>

<script>
import VideoItem from "../components/VideoItem";
import VideoTask from "../components/VideoTask";
import VideoPhoto from "../components/VideoPhoto";
import { getCameraPlayList } from "@/api/trackCamera";
import VideoItem from "../components/VideoItem"
import VideoTask from "../components/VideoTask"
import VideoPhoto from "../components/VideoPhoto"
import { getCameraPlayList } from "@/api/trackCamera"

export default {
  name: "Video",
@@ -142,73 +94,63 @@
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
      websocket: null,
      visibilityState: true
    };
      visibilityState: true,
      showArea: false
    }
  },
  created() {
    console.log("befor created")
    // this.TreeDataPool.clean();
    // this.TreeDataPool.fetchTreeData();
    // this.guid = sessionStorage.guid ? Number(sessionStorage.guid) : this.guid;
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
      ? Number(sessionStorage.activeIndex)
      : this.TreeDataPool.activeVideoIndex;
    this.getActiveIndex();
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = false;

    console.log("created")
      : this.TreeDataPool.activeVideoIndex
    this.getActiveIndex()
    this.TreeDataPool.readonly = true
    this.TreeDataPool.gbReadonly = true
    this.TreeDataPool.multiple = false
  },
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    document.addEventListener("visibilitychange", this.visibilitychange, false)
    this.$nextTick(() => {
      window.addEventListener("resize", this.getRightWidth);
      this.getRightWidth();
      window.addEventListener("resize", this.resizeMonitorTask)
      //this.getRightWidth();
      this.resizeMonitorTask()
    })
    this.getCenter();
    this.blackAngWhite();
    this.VideoPhotoData.queryTagList();

    let list = this.TreeDataPool.localVedioList.filter(i => {
      return i.progress == 100;
    })
    // console.log(list, '已完成的本地视频', this.TreeDataPool.localVedioList)
    this.TreeDataPool.localVedioList = list;
    this.getCenter()
    this.blackAngWhite()
    this.VideoPhotoData.queryTagList()
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    window.clearInterval(this.trackTimer);
    window.removeEventListener("resize", this.getRightWidth)
    this.CardList.details = []
    window.clearInterval(this.trackTimer)
    if (this.websocket) {
      this.websocket.close();
      this.websocket.close()
    }
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      console.log('newArry',newArry)
      const cameras = this.filterNodes(newArry);
      this.getActiveIndex();
      this.$refs.taskview.showTasks(cameras);
      this.$refs.photoview.showCapture(cameras);
    "TreeDataPool.videoArr": function(newArry) {
      console.log("newArry", newArry)
      const cameras = this.filterNodes(newArry)
      this.getActiveIndex()
      this.$refs.taskview.showTasks(cameras)
      this.$refs.photoview.showCapture(cameras)
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite();
    "VideoPhotoData.selectBlacks": function(value) {
      this.blackAngWhite()
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    "VideoPhotoData.selectWhites": function(value) {
      this.blackAngWhite()
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getRightWidth();
      this.getRightWidth()
    }
  },
  methods: {
    handleTrack() {
      this.track = !this.track;
      this.track = !this.track
      if (!this.track) {
        window.clearInterval(this.trackTimer);
        this.websocket.close();
        return;
        window.clearInterval(this.trackTimer)
        this.websocket.close()
        return
      }

      this.$notify({
@@ -222,16 +164,16 @@
      if (!useWebSocket) {
        this.trackTimer = window.setInterval(() => {
          _this.tracking()
        }, 5 * 1000);
        }, 5 * 1000)
      } else {
        this.initTrackWebsocket()
        this.trackTimer = window.setInterval(() => {
          _this.videoItemMonitor()
        }, 1 * 1000);
        }, 1 * 1000)
      }
    },
    videoItemMonitor() {
      this.websocket.send("ping");
      this.websocket.send("ping")

      let cache = this.traceCache
      // 遍历当期播放的摄像机, 按秒递减摄像机人员存在时间，为0时删除，摄像机人员为空时关闭
@@ -243,18 +185,17 @@
          for (var person in cache[camera]) {
            cache[camera][person]--
            if (cache[camera][person] < 0) {
              delete (cache[camera][person])
              delete cache[camera][person]
            }
          }

        } else {
          delete (cache[camera])
          delete cache[camera]
          this.closePlayer(camera)
        }
      }
    },
    initTrackWebsocket() {
      if (typeof (WebSocket) === "undefined") {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
@@ -264,21 +205,21 @@
        this.websocket.onmessage = this.recvieTrackMessage
      }
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocket.send("sub")
    },
    tracking() {
      getCameraPlayList().then(data => {
      getCameraPlayList().then((data) => {
        if (data && data.length) {
          data.forEach(ins => {
          data.forEach((ins) => {
            let newCamera = this.TreeDataPool.getCameraInfoById(ins.NewCameraId)
            if (!newCamera) {
              console.log("未查找到摄像机：", ins.NewCameraId);
              console.log("未查找到摄像机：", ins.NewCameraId)
              return
            }
            if (ins.IsNew) {
              this.newPlayerInViewBox(newCamera)

            } else {
              this.replacePlayer(newCamera, ins.OldCameraId)
            }
@@ -312,12 +253,12 @@
          // 找到上一个摄像机, 判断摄像机里是否还有其他人, 有:新开播放器 没有:切换
          console.log("last camera:", cam, Object.keys(cache[cam]).length)
          if (Object.keys(cache[cam]).length > 2) {
            delete (cache[cam][person])
            delete cache[cam][person]
            this.newPlayerInViewBox(camera)
            return
          } else {
            this.replacePlayer(camera, cam)
            delete (cache[cam])
            delete cache[cam]
            return
          }
        }
@@ -329,16 +270,13 @@
    newPlayerInViewBox(id) {
      // 新增播放窗口
      let camera = this.TreeDataPool.getCameraInfoById(id)
      let emptyIndex = -1;
      let exist = false;
      let emptyIndex = -1
      let exist = false
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
        if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
          if (emptyIndex === -1) {
            emptyIndex = i;
            emptyIndex = i
          }
        } else {
          if (this.TreeDataPool.videoArr[i].id === camera.id) {
@@ -347,7 +285,7 @@
        }
      }
      if (!exist && emptyIndex !== -1) {
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this)
      }
    },
    replacePlayer(id, oldCameraId) {
@@ -359,9 +297,10 @@
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== "") {
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
            this.TreeDataPool.setVideoArr(i, camera, this);
            this.TreeDataPool.setVideoArr(i, camera, this)
            return true
          }
        }
@@ -375,9 +314,10 @@
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== "") {
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === id) {
            this.TreeDataPool.setVideoArr(i, undefined, this);
            this.TreeDataPool.setVideoArr(i, undefined, this)
            return true
          }
        }
@@ -386,60 +326,68 @@
    visibilitychange() {
      switch (document.visibilityState) {
        case "hidden":
          this.visibilityState = false;
          break;
          this.visibilityState = false
          break
        case "visible":
          this.visibilityState = true;
          break;
          this.visibilityState = true
          break
      }
    },
    blackAngWhite() {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = true
          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true)
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", true)
        }
      }
      if (this.VideoPhotoData.selectBlacks.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = false
          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false)
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", false)
        }
      }
      if (this.VideoPhotoData.selectWhites.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          // this.VideoPhotoData.blackList[i].disabled = true   
          this.$set(this.VideoPhotoData.blackList[i], 'disabled', true)
          // this.VideoPhotoData.blackList[i].disabled = true
          this.$set(this.VideoPhotoData.blackList[i], "disabled", true)
        }
      }
      if (this.VideoPhotoData.selectWhites.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          //this.VideoPhotoData.blackList[i].disabled = false          
          this.$set(this.VideoPhotoData.blackList[i], 'disabled', false)
          //this.VideoPhotoData.blackList[i].disabled = false
          this.$set(this.VideoPhotoData.blackList[i], "disabled", false)
        }
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
      this.CardList.addBaseList.splice(index, 1)
    },
    getVideoHeight() {
      let h = this.$refs.monitorVideo.offsetHeight
      this.$refs.monitorTask.style.height = h + "px"
    },
    resizeMonitorTask() {
      this.getRightWidth()
      this.getVideoHeight()
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      let w = this.$refs.videoRight.offsetWidth
      // console.log("w是：", w,this.$refs.monitorVideo.offsetWidth);
      this.$refs.monitorTask.style.width = (w - this.$refs.monitorVideo.offsetWidth - 40) + 'px'
      this.$refs.monitorTask.style.width = w - this.$refs.monitorVideo.offsetWidth - 40 + "px"
      // console.log("右侧任务的宽度：", this.$refs.monitorTask.style.width)
    },
    filterNodes(selectArry) {
      let nodes = [];
      selectArry.forEach(i => {
      let nodes = []
      selectArry.forEach((i) => {
        if (i && nodes.indexOf(i.id) < 0) {
          nodes.push(i.id);
          nodes.push(i.id)
        }
      });
      return nodes;
      })
      return nodes
    },
    videoItemClick(index) {
      this.TreeDataPool.activeVideoIndex = index;
      this.TreeDataPool.activeForceChoose = true;
      this.TreeDataPool.activeVideoIndex = index
      this.TreeDataPool.activeForceChoose = true
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item)
@@ -448,13 +396,13 @@
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
      };
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w;
      this.defaultWidth = w
    },
    resizeHeight(h) {
      this.defaultHeight = h;
      this.defaultHeight = h
    },
    saveAddBase(item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
@@ -466,7 +414,7 @@
        return
      }
      let res = this.VideoPhotoData.addBase(item)
      res.then(data => {
      res.then((data) => {
        console.log("then", data)
        if (data.success) {
          this.$notify({
@@ -481,91 +429,87 @@
            type: "error"
          })
        }
        this.CardList.addBaseList.splice(index, 1);
        this.CardList.addBaseList.splice(index, 1)
        this.VideoPhotoData.selectBlacks = []
        this.VideoPhotoData.selectWhites = []
      })
    },
    getActiveIndex() {
      this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2);
      let nullVideoIndex = "";
      this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2)
      let nullVideoIndex = ""
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
          nullVideoIndex = i;
        if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
          nullVideoIndex = i
        } else {
          nullVideoIndex = "";
          nullVideoIndex = ""
        }
      }
      if (
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <
        this.TreeDataPool.videoArr.length - 1
        this.TreeDataPool.activeVideoIndex < this.TreeDataPool.videoArr.length - 1
      ) {
        return this.TreeDataPool.activeVideoIndex;
        return this.TreeDataPool.activeVideoIndex
      } else {
        if (nullVideoIndex === "") {
          this.TreeDataPool.activeVideoIndex =
            this.TreeDataPool.videoArr.length - 1;
          this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1
        } else {
          this.TreeDataPool.activeVideoIndex = nullVideoIndex;
          this.TreeDataPool.activeVideoIndex = nullVideoIndex
        }
      }
    },
    setGuid(value) {
      clearTimeout(this.trackTimer);
      clearTimeout(this.trackTimer)

      if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
        // eslint-disable-next-line
        for (
          let i = this.TreeDataPool.activeVideoIndex - 1;
          i < this.TreeDataPool.videoArr.length;
          i++
        ) {
        for (let i = this.TreeDataPool.activeVideoIndex - 1; i < this.TreeDataPool.videoArr.length; i++) {
          // eslint-disable-next-line
          if (
            this.TreeDataPool.videoArr[i] &&
            this.TreeDataPool.videoArr[i]["isPlaying"]
          ) {
            this.TreeDataPool.videoArr[i]["isPlaying"] = false;
          if (this.TreeDataPool.videoArr[i] && this.TreeDataPool.videoArr[i]["isPlaying"]) {
            this.TreeDataPool.videoArr[i]["isPlaying"] = false
          }
        }
      }
      this.guid = value;
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
      this.guid = value
      sessionStorage.guid = this.guid
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex
      this.getActiveIndex()
    },
    toggleShowArea() {
      this.showArea = !this.showArea
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
    window.removeEventListener("resize", this.getRightWidth)
    this.CardList.details = []
    this.CardList.addBaseList = []
    this.VideoPhotoData.selectBlacks = []
    this.VideoPhotoData.selectWhites = []
    //this.TreeDataPool.treeActiveName = "camera";
  }
};
}
</script>

<style lang="scss">
.monitoring-right {
  width: 100%;
  height: 100%;
  min-width: 1243px;
  min-width: 981px;
  //float: right;
  box-sizing: border-box;
  padding: 10px;
  background-color: #e9ebf2;
  .main-top {
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }
  .monitoring-video {
    width: 70.5%;
    min-width: 740px;
    max-width: 1208px;
    height: 75%;
    float: left;
    height: 98%;
    //float: left;
    box-sizing: border-box;
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
@@ -604,16 +548,26 @@
        padding-left: 12px;
        cursor: pointer;
      }
      .area-trigger {
        font-size: 16px;
      }
    }
    .fixedRatioBox {
      padding-top: 56.3%;
      box-sizing: border-box;
      position: relative;
      > div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
    }
  }
  .monitoring-task {
    // @media screen and (max-width: 1700px){

    // }
    //width: calc(29.5% - 10px);
    width: calc(34% - 10px);
    //width: auto;
    height: 73%;
    background-color: #fff;
    float: left;
    margin: 0px 0px 0px 10px;
@@ -626,15 +580,90 @@

  .monitoring-photo {
    width: 100%;
    height: calc(25% + 10px);
    height: calc(25% + 32px);
    background-color: #fff;
    float: left;
    padding: 10px;
    margin-top: -10px;
    //margin-top: -10px;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
  }
}
.titlebar {
  height: 10px !important;
  background: #fff !important;
  .button {
    position: absolute;
    font-size: 25px !important;
    right: 10px;
    top: 10px;
    z-index: 3;
  }
}
.addToBase {
  width: 98%;
  height: 430px;
  position: relative;
  .topLabel {
    margin-top: 20px;
    height: 40px;
    border-bottom: 1px solid #eee;
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 600;
    line-height: 1rem;
    color: #222222;
    text-align: left;
    margin-left: 15px;
  }
  .items {
    width: 100%;
    height: auto;
    max-height: 35%;
    overflow-y: auto;
    margin: 20px 0px;
    .lable {
      width: 15%;
      margin-top: 10px;
      float: left;
      //font-family: PingFangSC-Medium;
      font-size: 14px;
      font-weight: 600;
    }
    .baseList {
      width: 85%;
      height: 100%;
      float: left;

      // display: flex;
      // justify-content: flex-start;
      .base {
        //flex-wrap: wrap;
        width: calc(33% - 10px);
        padding: 0px 5px;
        line-height: 30px;
        float: left;
        text-align: left;
        font-size: 12px !important;
        .el-checkbox {
          width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .el-checkbox__label {
            display: inline !important;
          }
        }
      }
    }
  }
  .buttons {
    position: absolute;
    right: 0px;
    bottom: 15px;
  }
}
</style>