bug修复

ZZJ

2022-01-26 c7298c0ad9c728f55618ad4f924f723f7d2d0a38

bug修复

 public/images/settings/°×É«Ò»¼¶icon/ÊÚȨ¹ÜÀí.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/ÊÚȨ¹ÜÀí.png

 src/components/treeMenu/index.vue

@@ -459,7 +459,7 @@
}

.tree-menu {

  // max-width: 350px;

  overflow-x: hidden;

  overflow-x: scroll;

  overflow-y: hidden;

  margin-bottom: 4px;

}


 src/pages/desktop/index/components/DFrame.vue

@@ -14,7 +14,9 @@
    }"
  >
    <div class="d-frame-title" v-drag="fullScreen" @click="frameClick">
      <div class="icon iconfont back" @click="back">&#xe718;</div>
      <div class="icon iconfont back" @click="back" v-if="isShowBack">
        &#xe718;
      </div>
      <div class="d-frame-title-operation">
        <i
          class="icon-minus d-frame-operation-minus"
@@ -81,6 +83,13 @@
  props: {
    data: Object,
  },
  created() {
    window.addEventListener("message", (e) => {
      if (e.data.msg === "showBack") {
        this.isShowBack = true;
      }
    });
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
@@ -97,6 +106,7 @@
        mouY: 0,
        resizeLock: false,
      },
      isShowBack: false,
    };
  },
  watch: {

 src/pages/search/index/App.vue

@@ -1,145 +1,141 @@
<template>
  <div class="column">
    <div class="column-left">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right">
      <right-side />
    </div>
    <card-window></card-window>
  </div>
</template>

<script>
import LeftNav from "@/components/LeftNav";
// import CameraVideo from "./components/Video.vue";
import RightSide from "./Searching"
import CardWindow from "@/components/cardWindow";

export default {
  name: "SearchPage",
  components: {
    LeftNav,
    RightSide,
    CardWindow
  },
  data() {
    return {
      screenHeight: 0,
    }
  },
  created() {
    // this.parseUrl();

  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight - 20;
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };

  },
  methods: {
    parseUrl() {

    }
  }
};
</script>

<style lang="scss" >
.left-tree-box .local-vedio-area .dev-vedio-list{
  height: calc(100vh - 130px);
}
.left-tree-box .el-tabs--border-card .el-tabs__header{
  display: block!important;
  margin-bottom: 10px;
}
.column {
  overflow: hidden;
  min-width: 1399px;
  height: 100%;
}
.column-left {
  background-color: #fff;
  position: relative;
  float: left;
  height: 100vh;
}
.column-right {
  height: 100vh;
  background-color: #eee;
  box-sizing: border-box;
  overflow: hidden;
}
.heigher-index {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  padding: 16px;
  padding-top: 8px;
  overflow-x: hidden;
}
.resize-bar {
  width: 338px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  opacity: 0;
  overflow: scroll;
  max-width: 500px; //设定最大拉伸长度
  min-width: 33px; //设定最小宽度
}
/* æ‹–拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #efefef;
  border-left: 1px solid #e0e0e0;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    // background: url(./resize.svg);
    background-size: 100% 100%;
  }
}
</style>
<template>

  <div class="column">

    <div class="column-left">

      <div class="resize-bar"></div>

      <div class="resize-line"></div>

      <div class="resize-save">

        <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav>

      </div>

    </div>

    <div class="column-right">

      <right-side />

    </div>

    <card-window></card-window>

  </div>

</template>



<script>

import LeftNav from "@/components/LeftNav";

// import CameraVideo from "./components/Video.vue";

import RightSide from "./Searching";

import CardWindow from "@/components/cardWindow";



export default {

  name: "SearchPage",

  components: {

    LeftNav,

    RightSide,

    CardWindow,

  },

  data() {

    return {

      screenHeight: 0,

    };

  },

  created() {

    // this.parseUrl();

  },

  mounted() {

    this.screenHeight = document.documentElement.clientHeight - 20;

    window.onresize = () => {

      return (() => {

        this.screenHeight = document.documentElement.clientHeight - 20;

      })();

    };

  },

  methods: {

    parseUrl() {},

  },

};

</script>



<style lang="scss" >

.left-tree-box .local-vedio-area .dev-vedio-list {

  height: calc(100vh - 130px);

}

.left-tree-box .el-tabs--border-card .el-tabs__header {

  display: block !important;

  margin-bottom: 10px;

}

.column {

  overflow: hidden;

  min-width: 1399px;

  height: 100%;

}

.column-left {

  background-color: #fff;

  position: relative;

  float: left;

  height: 100vh;

}

.column-right {

  height: 100vh;

  background-color: #eee;

  box-sizing: border-box;

  overflow: hidden;

}

.heigher-index {

  position: absolute;

  top: 0;

  z-index: 10;

  width: 100%;

  height: 100%;

}

.resize-save {

  position: absolute;

  top: 0;

  right: 5px;

  bottom: 0;

  left: 0;

  padding: 16px;

  padding-top: 8px;

  overflow-x: hidden;

}

.resize-bar {

  width: 338px;

  height: inherit;

  resize: horizontal;

  cursor: ew-resize;

  opacity: 0;

  overflow: scroll;

  max-width: 500px; //设定最大拉伸长度

  min-width: 33px; //设定最小宽度

}

/* æ‹–拽线 */

.resize-line {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  border-right: 2px solid #efefef;

  border-left: 1px solid #e0e0e0;

  pointer-events: none;

}

.resize-bar:hover ~ .resize-line,

.resize-bar:active ~ .resize-line {

  border-left: 1px dashed skyblue;

}

.resize-bar::-webkit-scrollbar {

  width: 200px;

  height: inherit;

}



/* Firefox只有下面一小块区域可以拉伸 */

@supports (-moz-user-select: none) {

  .resize-bar:hover ~ .resize-line,

  .resize-bar:active ~ .resize-line {

    border-left: 1px solid #bbb;

  }

  .resize-bar:hover ~ .resize-line::after,

  .resize-bar:active ~ .resize-line::after {

    content: "";

    position: absolute;

    width: 16px;

    height: 16px;

    bottom: 0;

    right: -8px;

    // background: url(./resize.svg);

    background-size: 100% 100%;

  }

}

</style>


 src/pages/search/index/Searching.vue

@@ -2,27 +2,42 @@
  <div class="searching-box">
    <div class="searching-right">
      <div class="searching-right-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="display: inline-block"
        >
          <el-breadcrumb-item>
            <span @click="uploadChange">检索</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="!VideoPhotoData.uploadType">全部</el-breadcrumb-item>
          <el-breadcrumb-item v-if="VideoPhotoData.uploadType">以图搜图</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!VideoPhotoData.uploadType"
            >全部</el-breadcrumb-item
          >
          <el-breadcrumb-item v-if="VideoPhotoData.uploadType"
            >以图搜图</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="searching-right-content">
        <div class="top">
          <el-tooltip content="以图搜图" placement="bottom" popper-class="atooltip">
          <el-tooltip
            content="以图搜图"
            placement="bottom"
            popper-class="atooltip"
          >
            <el-button
              @click="showUpload"
              type="primary"
              icon="el-icon-camera-solid"
              size="mini"
              circle
              :style="VideoPhotoData.uploadDiaplay ? 'margin-right: 20px;' : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'"
              :style="
                VideoPhotoData.uploadDiaplay
                  ? 'margin-right: 20px;'
                  : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'
              "
            ></el-button>
          </el-tooltip>
          <p class="p-label" style="width:16%">
          <p class="p-label" style="width: 16%">
            <b>标签：</b>
            <el-select
              v-model="tagValues"
@@ -30,13 +45,13 @@
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              style="width: calc(100% - 40px); min-width: 120px"
              placeholder="请选择"
              @change="tagChange"
            >
              <el-option
                v-for="item in VideoPhotoData.tabs"
                style="font-size:12px"
                style="font-size: 12px"
                :key="item.key"
                :label="item.title"
                :value="item.value"
@@ -44,7 +59,7 @@
              ></el-option>
            </el-select>
          </p>
          <p class="p-task" style="width:16%">
          <p class="p-task" style="width: 16%">
            <b>场景：</b>
            <el-select
              v-model="taskValues"
@@ -53,7 +68,7 @@
              :disabled="typeDisable"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              style="width: calc(100% - 40px); min-width: 120px"
              placeholder="请选择"
            >
              <!-- <el-option
@@ -66,15 +81,15 @@
              ></el-option>-->
              <el-option
                v-for="item in VideoPhotoData.tasks"
                style="font-size:12px"
                :key="item.id+'x'"
                style="font-size: 12px"
                :key="item.id + 'x'"
                :value="item.id"
                :label="item.isDelete ? item.name+'（已删除）' : item.name"
                :title="item.isDelete ? item.name+'（已删除）' : item.name"
                :label="item.isDelete ? item.name + '（已删除）' : item.name"
                :title="item.isDelete ? item.name + '（已删除）' : item.name"
              ></el-option>
            </el-select>
          </p>
          <p class="p-level" style="width:18%">
          <p class="p-level" style="width: 18%">
            <b>事件等级：</b>
            <el-select
              v-model="alarmValues"
@@ -83,7 +98,7 @@
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 64px);min-width: 120px;"
              style="width: calc(100% - 64px); min-width: 120px"
              placeholder="请选择"
            >
              <el-option
@@ -94,7 +109,7 @@
              ></el-option>
            </el-select>
          </p>
          <p class="p-date" style="width:19%;vertical-align: top;">
          <p class="p-date" style="width: 19%; vertical-align: top">
            <el-date-picker
              size="mini"
              v-model="searchTime"
@@ -102,40 +117,57 @@
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']"
              style="width:99%;min-width:200px"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 99%; min-width: 200px"
            ></el-date-picker>
          </p>
          <p class="p-input" style="width:19%">
          <p class="p-input" style="width: 19%">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;"
              style="
                width: calc(100% - 75px);
                min-width: 100px;
                margin-left: 10px;
                margin-right: 10px;
              "
              v-model="VideoPhotoData.inputValue"
              size="mini"
            ></el-input>
            <el-button type="primary" size="mini" @click="searchingBtn">搜索</el-button>
            <el-button type="primary" size="mini" @click="searchingBtn"
              >搜索</el-button
            >
          </p>
          <p class="p-clear">
            <b class="clear-searching" @click="clearSearch">重置</b>
          </p>
        </div>
        <div ref="mid" style="height:calc(100% - 50px);">
        <div ref="mid" style="height: calc(100% - 50px)">
          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
            <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
          </div>
          <div
            id="searchMid"
            class="mid"
            :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}"
            :style="{
              width: VideoPhotoData.uploadDiaplay
                ? 'calc(100% - 315px)'
                : '100%',
            }"
          >
            <div class="right-section" ref="scrollContain">
              <Card
                v-for="(item, index) in VideoPhotoData.cards"
                :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
                :class="
                  item.activeObject.id === VideoPhotoData.activeCard
                    ? 'my-active-card'
                    : ''
                "
                :key="index + 'u'"
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :outWidth="
                  VideoPhotoData.uploadDiaplay ? searchImgCardWidth : cardWidth
                "
                :data="item"
                :searchTime="searchTimeFormated"
                :showType="showType"
@@ -166,7 +198,7 @@
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        style="background: white; height: 475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
@@ -186,13 +218,21 @@
              <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-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>
                    >{{ item.title }}</el-checkbox
                  >
                </div>
              </el-checkbox-group>
            </div>
@@ -202,20 +242,32 @@
              <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-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>
                    >{{ 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>
            <el-button type="primary" @click="saveAddBase(item, index)"
              >保存</el-button
            >
            <el-button type="default" @click="closeWindow(index)"
              >取消</el-button
            >
          </div>
        </div>
      </hsc-window>
@@ -231,9 +283,9 @@
export default {
  components: {
    Card,
    UploadImg
    UploadImg,
  },
  data () {
  data() {
    return {
      cardWidth: "",
      center: "",
@@ -248,33 +300,33 @@
      taskValues: [],
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ],
      searchText: "",
      currentPage: 1,
    };
  },
  computed: {
    searchTimeFormated(){
      return this.format(this.searchTime)
    }
    searchTimeFormated() {
      return this.format(this.searchTime);
    },
  },
  created () {
  created() {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.TreeDataPool.fetchTreeData();
  },
  mounted () {
  mounted() {
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
      let list = this.TreeDataPool.localVedioList.filter(i => {
        return i.progress == 100
      })
      this.TreeDataPool.localVedioList = list
    })
      let scrollContain = this.$refs.scrollContain;
      this.VideoPhotoData.scrollContainDom = scrollContain;
      let list = this.TreeDataPool.localVedioList.filter((i) => {
        return i.progress == 100;
      });
      this.TreeDataPool.localVedioList = list;
    });
    window.addEventListener("resize", this.getHeight);
    this.getCenter();
    this.getHeight();
@@ -285,12 +337,12 @@
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }
      let start =  getUrlKey("start")
      let end =  getUrlKey("end")
    if (start&&end) {
      this.searchTime = [start,end]
     this.VideoPhotoData.searchTime = [start,end]
    }else{
    let start = getUrlKey("start");
    let end = getUrlKey("end");
    if (start && end) {
      this.searchTime = [start, end];
      this.VideoPhotoData.searchTime = [start, end];
    } else {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
    }
@@ -301,10 +353,10 @@
      this.VideoPhotoData.uploadDiaplay = true;
      this.VideoPhotoData.picUrl = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadImg = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.compTargetId = getUrlKey("targetId")
      this.VideoPhotoData.compTargetType = getUrlKey("compType")
      this.VideoPhotoData.size = 30
      this.VideoPhotoData.uploadType = true;
      this.VideoPhotoData.compTargetId = getUrlKey("targetId");
      this.VideoPhotoData.compTargetType = getUrlKey("compType");
      this.VideoPhotoData.size = 30;
      this.VideoPhotoData.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // æŸ¥æ‰¾æ­¤äºº
    } else {
@@ -318,13 +370,13 @@
    this.VideoPhotoData.queryTaskList();
    this.VideoPhotoData.queryDictionary();
    this.$nextTick(() => {
      bus.$on("changePage", page => {
      bus.$on("changePage", (page) => {
        this.currentPage = page;
        this.VideoPhotoData.page = page;
      });
    });
  },
  destroyed () {
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
    this.CardList.details = [];
    // this.TreeDataPool.treeActiveName = "camera";
@@ -339,13 +391,13 @@
    this.VideoPhotoData.selectWhites = [];
  },
  watch: {
    'TreeDataPool.treeActiveName' (n, o) {
      if (n && n == 'camera') {
    "TreeDataPool.treeActiveName"(n, o) {
      if (n && n == "camera") {
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    "TreeDataPool.showTreeBox" (value) {
    "TreeDataPool.showTreeBox"(value) {
      this.getHeight();
      if (this.VideoPhotoData.realSmallPath.length > 0) {
        this.VideoPhotoData.findPersonByPage();
@@ -365,38 +417,45 @@
        if (newVal !== oldVal) {
          this.VideoPhotoData.treeNodes = newVal;
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
            this.VideoPhotoData.findPersonByPage();
          } else {
            this.setLoadSearch(this.VideoPhotoData.querySearchList());

          }
        }
      },
      deep: true    //深度监听
      deep: true, //深度监听
    },
    "DataStackPool.selectedDir": {
      handler (nodes, oldNodes) {
      handler(nodes, oldNodes) {
        if (nodes !== oldNodes && nodes.id != "") {
          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
          this.VideoPhotoData.treeNodes = [nodes.id];
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
            this.VideoPhotoData.findPersonByPage();
          } else {
            // this.VideoPhotoData.querySearchList();
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true
      deep: true,
    },
    "VideoPhotoData.activeCard": function (value) {
      let card = this.$refs.scrollContain.getElementsByClassName("my-active-card");
      let card =
        this.$refs.scrollContain.getElementsByClassName("my-active-card");
      console.log(1);
      console.log(card);

      if (card.length > 0) {
        let cardHeight = card[0].clientHeight;
        let cardTop = card[0].offsetTop;
        let scrollTop = this.$refs.scrollContain.scrollTop;
        let divHeight = this.$refs.scrollContain.clientHeight;
        console.log(2);
        console.log(cardHeight);
        console.log(cardTop);
        console.log(scrollTop);
        console.log(divHeight);
        if (
          cardTop - cardHeight - scrollTop > divHeight ||
          cardTop - cardHeight - scrollTop < 0
@@ -414,17 +473,17 @@
      }
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite()
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite()
      this.blackAngWhite();
    },
    "VideoPhotoData.uploadDiaplay": function (value) {
      this.getHeight();
      if (value) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -437,15 +496,15 @@
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    }
    },
  },
  methods: {
    isShowUpload () {
    isShowUpload() {
      this.getHeight();
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -459,13 +518,13 @@
        this.VideoPhotoData.showType = "search";
      }
    },
    resizeWidth (w) {
    resizeWidth(w) {
      this.defaultWidth = w;
    },
    resizeHeight (h) {
    resizeHeight(h) {
      this.defaultHeight = h;
    },
    getHeight () {
    getHeight() {
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);
@@ -476,86 +535,90 @@
      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
    },
    uploadChange () {
    uploadChange() {
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus()
      this.VideoPhotoData.clearStatus();
    },
    blackAngWhite () {
    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);
        }
      }
    },
    saveAddBase (item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
    saveAddBase(item, index) {
      if (
        this.VideoPhotoData.selectBlacks.length === 0 &&
        this.VideoPhotoData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning"
        })
        return
          type: "warning",
        });
        return;
      }
      let res = this.VideoPhotoData.addBase(item)
      res.then(data => {
      let res = this.VideoPhotoData.addBase(item);
      res.then((data) => {
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success"
          })
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error"
          })
            type: "error",
          });
        }
        this.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = []
        this.VideoPhotoData.selectWhites = []
      })
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    getDetails (ev, index) {
    getDetails(ev, index) {
      //let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
      this.CardList.details = Array.from(
        new Set([...this.CardList.details, ...[obj]])
      );
      console.log(this.CardList.details);
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd (item) {
      this.CardList.addBaseList.push(item)
    toAdd(item) {
      this.CardList.addBaseList.push(item);
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch(_ => { });
        .catch((_) => {});
    },
    showUpload () {
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
      //初始化数据
      this.VideoPhotoData.clearStatus();
@@ -565,7 +628,7 @@
      // }
      //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
    },
    getDateInit () {
    getDateInit() {
      // è¦æ±‚ é»˜è®¤ä¸€ä¸ªæœˆ
      const end = new Date();
      const start = new Date();
@@ -578,16 +641,16 @@
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss")
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    format (array) {
    format(array) {
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    searchingBtn () {
    searchingBtn() {
      // let obj = document.getElementById('searchMid');
      // let load = this.$loading({
      //   target:obj,
@@ -597,10 +660,10 @@
      this.VideoPhotoData.page = 1;
      this.VideoPhotoData.queryTabs = this.tagValues;
      //处理搜索类型
      var tempArr = this.taskValues.map(task => task.split(','));
      var tempArr = this.taskValues.map((task) => task.split(","));
      var tasks = [];
      tempArr.forEach(arr => {
        tasks = tasks.concat(arr)
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr);
      });
      this.VideoPhotoData.queryTasks = tasks;

@@ -619,9 +682,9 @@
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    stringToNum () {
    stringToNum() {
      var arr = [];
      this.alarmValues.forEach(element => {
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1);
        }
@@ -643,7 +706,7 @@
      });
      return arr;
    },
    changePages (page) {
    changePages(page) {
      this.VideoPhotoData.page = page;
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false;
@@ -654,10 +717,10 @@
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    closeWindow (index) {
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    handleSizeChange (integer, integerSearchImg) {
    handleSizeChange(integer, integerSearchImg) {
      if (this.VideoPhotoData.uploadDiaplay) {
        this.VideoPhotoData.size = integerSearchImg * 10;
        //this.VideoPhotoData.findPersonByPage();
@@ -666,7 +729,7 @@
        //this.VideoPhotoData.querySearchList();
      }
    },
    sizeChange (size) {
    sizeChange(size) {
      if (this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.findPersonByPage();
@@ -677,10 +740,10 @@
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    clearSearch () {
      this.tagValues = []
      this.taskValues = []
      this.alarmValues = []
    clearSearch() {
      this.tagValues = [];
      this.taskValues = [];
      this.alarmValues = [];
      this.VideoPhotoData.queryTabs = [];
      this.VideoPhotoData.queryTasks = [];
      this.VideoPhotoData.queryAlarmlevel = [];
@@ -695,22 +758,22 @@
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    disabled (data) {
    disabled(data) {
      this.isDisabled = data;
    },
    getCenter () {
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    setLoadSearch (fn) {
    setLoadSearch(fn) {
      this.AuthData.setLoading("searchMid", this);
      fn.then(_ => {
      fn.then((_) => {
        this.AuthData.closeLoad();
      })
      });
    },
    tagChange (obj) {
    tagChange(obj) {
      if (obj.length > 0) {
        this.showType = "compare";
      } else {
@@ -720,8 +783,8 @@
      this.VideoPhotoData.queryTabs = obj;

      this.setLoadSearch(this.VideoPhotoData.querySearchList());
    }
  }
    },
  },
};
</script>

@@ -921,7 +984,7 @@
      width: 100%;
      height: 100%;
      .el-loading-spinner-search {
        background: url('/images/search/searchLoading.gif') no-repeat;
        background: url("/images/search/searchLoading.gif") no-repeat;
      }
    }
  }

 src/pages/settings/components/AuthorizationManagement.vue

New file
@@ -0,0 +1,10 @@
<template>

  <div class="AuthorizationManagement">AuthorizationManagement</div>

</template>



<script>

export default {};

</script>



<style>

</style>

 src/pages/settings/components/AuthorizationSetting.vue

New file
@@ -0,0 +1,10 @@
<template>

  <div class="AuthorizationSetting">AuthorizationSetting</div>

</template>



<script>

export default {};

</script>



<style>

</style>

 src/pages/settings/index/index.vue

@@ -605,6 +605,8 @@
      style="width: 100%"
      ref="view_6"
    ></deviceInfo>
    <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7">
    </Authorization>
  </div>
  <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
    <div
@@ -677,6 +679,7 @@
import deviceInfo from "../views/deviceInfo";
import keyboardLanguage from "../views/keyboardLanguage";
import generalSettings from "../views/generalSettings";
import Authorization from "../views/Authorization";
import { pad0, getUrlKey } from "@/api/utils";

export default {
@@ -689,6 +692,7 @@
    keyboardLanguage,
    generalSettings,
    deviceInfo,
    Authorization,
  },
  data() {
    var v2 = (rule, value, callback) => {
@@ -829,6 +833,13 @@
          blackIcon: "/images/settings/黑色一级icon/设备信息.png",
          whiteIcon: "/images/settings/白色一级icon/设备信息.png",
        },
        {
          name: "授权管理",
          icon: "\ue7e9;",
          imgUrl: "/images/settings/设备信息.png",
          blackIcon: "/images/settings/黑色一级icon/授权管理.png",
          whiteIcon: "/images/settings/白色一级icon/授权管理.png",
        },
      ],
      accountArr: [],
      jpgArr: [],
@@ -888,6 +899,13 @@
    };
  },
  created() {
    window.parent.postMessage(
      {
        msg: "showBack",
      },
      "*"
    );

    let color = localStorage.getItem("--colorCard");
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);
@@ -1479,20 +1497,21 @@
      }
    },
    parseTime() {
      [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
        "-"
      );
      [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
        ":"
      );
      [this.syncYrs, this.syncMonth, this.syncDay] =
        this.equipmentDate.split("-");
      [this.syncHour, this.syncMin, this.syncSec] =
        this.equipmentTime.split(":");
    },
  },
  computed: {
    activeUserRole() {
      if (this.activeAccountItem.sysRoles&&this.activeAccountItem.sysRoles.length) {
      if (
        this.activeAccountItem.sysRoles &&
        this.activeAccountItem.sysRoles.length
      ) {
        return this.activeAccountItem.sysRoles[0].name;
      }
      return "普通用户"
      return "普通用户";
    },
    curUserRole() {
      const info = JSON.parse(sessionStorage.getItem("userInfo"));

 src/pages/settings/views/Authorization.vue

New file
@@ -0,0 +1,94 @@
<template>

  <div class="all" ref="curPage">

    <div class="Authorization">

      <div class="AuthorizationCenter">

        <div

          class="menu-item"

          :class="activePage == i ? 'menu-item-active' : ''"

          @click="openRight(i)"

          v-for="(item, i) in menuArr"

          :key="i"

        >

          <span class="iconfont" :style="`font-size:${item.size}px;`">{{

            item.icon

          }}</span>

          <span class="title">{{ item.name }}</span>

        </div>

      </div>

      <div class="AuthorizationRight"></div>

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      activePage: 0,

      menuArr: [

        { name: "设备授权配置", icon: "\ue7e7", size: 28 },

        { name: "设备授权管理", icon: "\ue7e6", size: 28 },

      ],

    };

  },

  methods: {

    openRight(i) {

      this.activePage = i;

    },

  },

};

</script>



<style scoped lang="scss">

.Authorization {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

    height: 24px !important;

  }



  .AuthorizationCenter {

    height: 100%;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    background-color: #fbfaff;

    .menu-item {

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 16px;

      padding-left: 15px;

      cursor: pointer;

      display: flex;

      .iconfont {

        margin: 0 17px;

        font-size: 24px !important;

      }

      .title {

        font-size: 16px;

        font-weight: 700;

      }

    }

    .menu-item-active {

      background-color: var(--colorCard) !important;

      color: white !important;

    }

    .menu-item:hover {

      background-color: #f2f2f7;

    }

  }

}

</style>

 src/pages/settings/views/NetSettings.vue

@@ -79,7 +79,11 @@
            </div>

          </div>

        </div>

        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">

        <div

          class="wifi-detail"

          v-if="activePage == 1 && inWifiDetail"

          ref="ipvHolder"

        >

          <div class="title">无线网络</div>

          <div class="btns">

            <div class="cancel">删除</div>

@@ -89,11 +93,7 @@
          <div class="general-box">

            <div class="in-title">通用</div>



            <el-form

              :model="wifiForm"

              ref="wifiForm"

              class="join-form"

            >

            <el-form :model="wifiForm" ref="wifiForm" class="join-form">

              <el-form-item prop="name">

                <div class="p-title">名称</div>

                <!-- <div class="wifi-name">{{ 12123 }}</div> -->

@@ -116,22 +116,27 @@
            </el-form>

          </div>



          <switchBar

            :barName="`高级设置`"

            :value="isHighClass"

          ></switchBar>

          <switchBar :barName="`高级设置`" :value="isHighClass"></switchBar>



          <div class="general-box fold" :class="{'hidden':IPV4_hid}" >

            <div class="in-title">IPV4 
              <span class="icon iconfont icon-fold"

               @click="toggleFold('IPV4_hid')">&#xe757;</span>

          <div class="general-box fold" :class="{ hidden: IPV4_hid }">

            <div class="in-title">

              IPV4

              <span

                class="icon iconfont icon-fold"

                @click="toggleFold('IPV4_hid')"

                >&#xe757;</span

              >

            </div>



            <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small"

                :popper-append-to-body="false">

                <el-select

                  v-model="value"

                  placeholder="请选择"

                  size="small"

                  :popper-append-to-body="false"

                >

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -179,16 +184,29 @@
            </el-form>

          </div>



          <div class="general-box fold" :class="{'hidden':IPV6_hid}" ref="ipv6Holder">

            <div class="in-title">IPV6 
              <span class="icon iconfont icon-fold"

              @click="toggleFold('IPV6_hid')">&#xe757;</span>

          <div

            class="general-box fold"

            :class="{ hidden: IPV6_hid }"

            ref="ipv6Holder"

          >

            <div class="in-title">

              IPV6

              <span

                class="icon iconfont icon-fold"

                @click="toggleFold('IPV6_hid')"

                >&#xe757;</span

              >

            </div>



            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small" :popper-append-to-body="false">

                <el-select

                  v-model="value"

                  placeholder="请选择"

                  size="small"

                  :popper-append-to-body="false"

                >

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -217,9 +235,17 @@
                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>

                  </div>

                  <div class="ad">

                    <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>

                    <i

                      class="el-icon-circle-plus-outline"

                      @click="+ipv6Form.prefix++"

                    ></i>

                  </div>

                  <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>

                  <div class="ad">

                    <i

                      class="el-icon-refresh-left"

                      @click="ipv6Form.prefix = ''"

                    ></i>

                  </div>

                </div>

              </el-form-item>



@@ -330,9 +356,9 @@
            <div class="ok" @click="saveWire">保存</div>

          </div>

        </div>

        <WifiGateway  v-if="activePage == 3"></WifiGateway>

        <LoraGateway  v-if="activePage == 4"></LoraGateway>

        <MqttGateway  v-if="activePage == 5"></MqttGateway>

        <WifiGateway v-if="activePage == 3"></WifiGateway>

        <LoraGateway v-if="activePage == 4"></LoraGateway>

        <MqttGateway v-if="activePage == 5"></MqttGateway>

      </div>

    </div>

  </div>

@@ -352,9 +378,9 @@
import ipInput from "../components/IPInput";

import switchBar from "../components/switchBar";



import WifiGateway from '../components/WifiGateway'

import LoraGateway from '../components/LoraGateway'

import MqttGateway from '../components/MqttGateway'

import WifiGateway from "../components/WifiGateway";

import LoraGateway from "../components/LoraGateway";

import MqttGateway from "../components/MqttGateway";



export default {

  components: {

@@ -362,7 +388,7 @@
    switchBar,

    WifiGateway,

    LoraGateway,

    MqttGateway

    MqttGateway,

  },

  data() {

    const checkPwd = (rule, value, callback) => {

@@ -433,7 +459,7 @@
      ],

      value: "",

      IPV4_hid: false,

      IPV6_hid: false

      IPV6_hid: false,

    };

  },

  mounted() {

@@ -441,9 +467,9 @@
    this.fetchWireList();

  },

  methods: {

    minusPrefix(){

      debugger

      this.ipv6Form.prefix

    minusPrefix() {

      debugger;

      this.ipv6Form.prefix;

    },

    switchNetCard(item) {

      if (item.active) {

@@ -512,8 +538,8 @@
      if (i == 0) {

        this.ruleForm.deviceName = "";

        this.ruleForm.port = "";

        this.getCurServer()

      }      
        this.getCurServer();

      }

      if (i == 1) {

        this.inWifiDetail = false;

      }

@@ -575,16 +601,18 @@
      });

    },

    toggleFold(tog) {

    const demo = this.$refs.ipvHolder

    if(!(this.IPV4_hid&&!this.IPV6_hid)){

       setTimeout(() => {

       demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})

       }, 300);

    }

    this[tog] = !this[tog]

     
     
     }

      const demo = this.$refs.ipvHolder;

      if (!(this.IPV4_hid && !this.IPV6_hid)) {

        setTimeout(() => {

          demo.scrollIntoView({

            block: "end",

            inline: "nearest",

            behavior: "smooth",

          });

        }, 300);

      }

      this[tog] = !this[tog];

    },

  },

  computed: {

    showStatus() {

@@ -597,7 +625,7 @@
.all {

  width: 100%;

}

.wire{

.wire {

  width: 456px;

  margin: 0 auto;

}

@@ -727,10 +755,11 @@
      height: 48px;

      font-size: 16px;

      line-height: 48px;

      color: #4F4F4F;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 4px;

      color: #4f4f4f;

      font-weight: bold;

      background: #f2f2f7;

      border-radius: 8px;

      margin-bottom: 4px;

    }

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

@@ -757,7 +786,7 @@
        border: 2px solid #409eff !important;

      }

      .el-select-dropdown__item {

        color: #4F4F4F;

        color: #4f4f4f;

        height: 32px;

        font-size: 12px;

        line-height: 32px;

@@ -806,7 +835,7 @@
        width: 100%;

      }

      .el-select .el-input .el-select__caret {

        color: #4F4F4F;

        color: #4f4f4f;

        font-size: 14px;

        font-weight: 600;

      }

@@ -823,7 +852,7 @@
      }

      .switch-bar .name {

        font-size: 14px;

        color: #4F4F4F;

        color: #4f4f4f;

        font-weight: bold;

      }

      .wifi-option {

@@ -839,7 +868,7 @@
        border-radius: 8px;

        .name {

          font-size: 14px;

          color: #4F4F4F;

          color: #4f4f4f;

          font-weight: bold;

          .icon {

            color: #4e94ff;

@@ -877,7 +906,7 @@
        padding-bottom: 10px;

        margin-bottom: 20px;

        &.fold {

        height: 342px;

          height: 342px;

          .icon-fold {

            display: inline-block;

            font-size: 14px;

@@ -887,10 +916,10 @@
          }

        }

        &.hidden {

        height: 34px;

         .icon-fold {

           transform: rotate(180deg);

         }

          height: 34px;

          .icon-fold {

            transform: rotate(180deg);

          }

        }

        .el-form-item {

          margin-bottom: 0px;

@@ -900,7 +929,7 @@
          padding: 14px 20px;

          font-weight: bold;

          font-size: 14px;

          color: #4F4F4F;

          color: #4f4f4f;

        }

        .ip-input-container {

          max-width: none !important;

@@ -966,13 +995,15 @@
          font-size: 15px;

          font-weight: bold;

          font-size: 14px;

          color: #4F4F4F;

          color: #4f4f4f;

        }

        .right {

          display: flex;

          align-items: center;

          .el-switch__core {

            height: 14px;

            background-color: var(--colorCard) !important;

            border-color: var(--colorCard) !important;

          }

          .el-switch.is-checked .el-switch__core::after {

            left: 100%;

@@ -995,7 +1026,7 @@
            margin-right: 15px;

          }

          .good {

            color: #4e94ff;

            color: var(--colorCard);

            font-size: 16px;

          }

          .bad {


 src/pages/systemSettings/index/App.vue

@@ -8,16 +8,17 @@
import BasicSetting from "../components/BasicSetting";

export default {
  name: 'settings',
  name: "settings",
  components: {
    BasicSetting
    BasicSetting,
  },
  data() {
    return {
      activeName: "basic",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名"
    }
      loginName:
        JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
    };
  },
  computed: {
    isAdmin() {
@@ -29,7 +30,7 @@
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    }
    },
  },
  methods: {
    isShow(authority) {
@@ -43,18 +44,18 @@
    },
  },
  created() {
    if (this.isShow('videoSystem:base')) {
      this.activeName = "basic"
    } else if (this.isShow('videoSystem:permission')) {
      this.activeName = "user"
    } else if (this.isShow('videoSystem:broadcast')) {
      this.activeName = "radio"
    } else if (this.isShow('videoSystem:eventPush')) {
      this.activeName = "event"
    } else if (this.isShow('videoSystem:logManage')) {
      this.activeName = "log"
    } else if (this.isShow('videoSystem:sysManage')) {
      this.activeName = "system"
    if (this.isShow("videoSystem:base")) {
      this.activeName = "basic";
    } else if (this.isShow("videoSystem:permission")) {
      this.activeName = "user";
    } else if (this.isShow("videoSystem:broadcast")) {
      this.activeName = "radio";
    } else if (this.isShow("videoSystem:eventPush")) {
      this.activeName = "event";
    } else if (this.isShow("videoSystem:logManage")) {
      this.activeName = "log";
    } else if (this.isShow("videoSystem:sysManage")) {
      this.activeName = "system";
    }
  },
};

 src/pages/vindicate/index/App.vue

@@ -157,6 +157,13 @@
    };
  },
  created() {
    window.parent.postMessage(
      {
        msg: "showBack",
      },
      "*"
    );

    let color = localStorage.getItem("--colorCard");
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);

 src/pages/vindicate/views/updateSettings.vue

@@ -28,26 +28,41 @@


          <div class="button-group">

            <div class="bottom">

              <div class="top" :class="{ 'toggle':radio2 !== '检查更新' }"></div>

              <div class="label-left" :class="{ 'toggle':radio2 == '检查更新' }" @click="radio2 = '检查更新'">检查更新</div>

              <div class="label-right" :class="{ 'toggle':radio2 !== '检查更新' }" @click="radio2 = '上传更新'">上传更新</div>

              <div class="top" :class="{ toggle: radio2 !== '检查更新' }"></div>

              <div

                class="label-left"

                :class="{ toggle: radio2 == '检查更新' }"

                @click="radio2 = '检查更新'"

              >

                æ£€æŸ¥æ›´æ–°

              </div>

              <div

                class="label-right"

                :class="{ toggle: radio2 !== '检查更新' }"

                @click="radio2 = '上传更新'"

              >

                ä¸Šä¼ æ›´æ–°

              </div>

            </div>

          </div>



          <div class="update-center" v-if="radio2 == '检查更新'">

            <img v-if="!upgrading&&hasNewVersion||checking"

            <img

              v-if="(!upgrading && hasNewVersion) || checking"

              class="spin-bg"

              src="/images/vindicate/检测加载.png"

              :class="upgrading || checking ? 'spin-bg-rot' : ''"

              />

             <img v-if="upgrading&&hasNewVersion"

            />

            <img

              v-if="upgrading && hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/加载.png"

              /> 
            <img v-if="!checking&&!hasNewVersion"

            />

            <img

              v-if="!checking && !hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/已是最新版本.png"

              />

            />

            <div class="desc" v-if="checking && !upgrading">

              æ­£åœ¨æ£€æµ‹ç‰ˆæœ¬æ›´æ–°â€¦â€¦

            </div>

@@ -59,14 +74,16 @@
            <div class="desc desc-suc" v-if="!checking && !hasNewVersion">

              å½“前已经是最新版本

            </div>

            


            <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">

              {{verText}}

            <div

              class="text-desc"

              v-if="hasNewVersion && !checking && !upgrading"

            >

              {{ verText }}

            </div>



            <el-button

              v-if="hasNewVersion && !checking&&!upgrading"

              v-if="hasNewVersion && !checking && !upgrading"

              :loading="upgrading"

              type="primary"

              style="width: 150px"

@@ -76,50 +93,45 @@
            >

          </div>





          
          <div class="upload-center" v-if="radio2 == '上传更新'">

            <div class="upload-info"><img src="/images/vindicate/链接 1.png" style="width: 14px;"> ä¸Šä¼ å®‰è£…软件</div>

            <div class="upload-info">

              <img src="/images/vindicate/链接 1.png" style="width: 14px" />

              ä¸Šä¼ å®‰è£…软件

            </div>

            <div class="upload-top">



              <div class="upload-container">

               <div class="upload-fail " v-if="upStatus===0">

                 <i class="icon iconfont upload-icon">

                &#xe71c;

               </i>

               <p>上传失败，请重新上传。</p>

               </div>



               <div class="upload-success"  v-if="upStatus===1">

               <i class="icon iconfont upload-icon">

                &#xe71d;

               </i>

               <p>上传成功，请点击更新按钮开始更新。</p>

               </div>



               <el-upload

                ref="myUpload"

                class="upload-demo"

                drag

                action

                v-show="!shengjiing&&upStatus===''"

                :http-request="uploadPkg"

                :limit="1"

               >

                <i class="el-icon-upload"></i>

                <div

                  class="el-upload__text"

                  v-loading="upgrading"

                  element-loading-text="上传中，请稍后"

                  element-loading-spinner="el-icon-loading"

                >

                  å°† .zip æ›´æ–°æ–‡ä»¶æ‹–到此处，或 <em> ç‚¹å‡»ä¸Šä¼  </em>

                <div class="upload-fail" v-if="upStatus === 0">

                  <i class="icon iconfont upload-icon"> &#xe71c; </i>

                  <p>上传失败，请重新上传。</p>

                </div>

                <div class="el-upload__tip" slot="tip"></div>

              </el-upload>



                <div class="upload-success" v-if="upStatus === 1">

                  <i class="icon iconfont upload-icon"> &#xe71d; </i>

                  <p>上传成功，请点击更新按钮开始更新。</p>

                </div>



                <el-upload

                  ref="myUpload"

                  class="upload-demo"

                  drag

                  action

                  v-show="!shengjiing && upStatus === ''"

                  :http-request="uploadPkg"

                  :limit="1"

                >

                  <i class="el-icon-upload"></i>

                  <div

                    class="el-upload__text"

                    v-loading="upgrading"

                    element-loading-text="上传中，请稍后"

                    element-loading-spinner="el-icon-loading"

                  >

                    å°† .zip æ›´æ–°æ–‡ä»¶æ‹–到此处，或 <em> ç‚¹å‡»ä¸Šä¼  </em>

                  </div>

                  <div class="el-upload__tip" slot="tip"></div>

                </el-upload>

              </div>

            


              <span

                class="icon iconfont spin-bg"

                :class="shengjiing ? 'spin-bg-rot' : ''"

@@ -198,7 +210,8 @@
      activePage: 0,

      patchUpdateStatus: "",

      probeSum: 0,

      timer: null,verText:"",

      timer: null,

      verText: "",

      patchFile: {},

      fileAdded: false,

      curVersionName: "",

@@ -207,7 +220,7 @@
      checking: true,

      newVersionName: "",

      hasNewVersion: false,

      upStatus:'',

      upStatus: "",

      sysSetList: [

        { title: "自动清理软件包缓存", val: false, name: "sys_auto_clean" },

        { title: "更新提醒", val: false, name: "sys_update_notice" },

@@ -227,10 +240,10 @@
  },

  mounted() {

    const isAutoUpdate = getUrlKey("autoUpdate");

    if (isAutoUpdate==1) {

      this.checking = false

      this.upgradeNewVersion()

    }else{

    if (isAutoUpdate == 1) {

      this.checking = false;

      this.upgradeNewVersion();

    } else {

      this.fetchUpgradInfo();

    }

    this.fetchSettings();

@@ -261,7 +274,7 @@
        this.newVersionName = res.data.newVersion;

        this.curVersionName = res.data.curVersion;

        this.hasNewVersion = res.data.hasNewVersion;

        this.verText=res.data.newVersionInfo

        this.verText = res.data.newVersionInfo;



        if (!this.hasNewVersion) {

          this.upgrading = false;

@@ -287,21 +300,23 @@
      let param = new FormData();

      param.append("archive", params.file);

      this.upgrading = true;

      uploadUpgradePkg(param).then((res) => {

        this.upgrading = false;

        this.pkgID = res.data.id;

        this.upStatus = 1

        setTimeout(() => {

        this.upStatus =''

      }, 2000);

      }).catch(()=>{

        this.upgrading = false;

        this.$refs.myUpload.clearFiles()

        this.upStatus = 0

        setTimeout(() => {

        this.upStatus =''

      }, 2000);

      })

      uploadUpgradePkg(param)

        .then((res) => {

          this.upgrading = false;

          this.pkgID = res.data.id;

          this.upStatus = 1;

          setTimeout(() => {

            this.upStatus = "";

          }, 2000);

        })

        .catch(() => {

          this.upgrading = false;

          this.$refs.myUpload.clearFiles();

          this.upStatus = 0;

          setTimeout(() => {

            this.upStatus = "";

          }, 2000);

        });

    },

    upgrade() {

      this.shengjiing = true;

@@ -364,14 +379,13 @@
        }

      });

    },

    
  },

};

</script>

<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

  background-color: #fbfaff;

}

.update-set-content {

  height: 100%;

@@ -380,8 +394,8 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  border-top:4px solid rgb(242, 242, 247) ;

  border-left:4px solid rgb(242, 242, 247) ;

  border-top: 4px solid rgb(242, 242, 247);

  border-left: 4px solid rgb(242, 242, 247);

  .cluster-center {

    height: 100%;

    width: 300px;

@@ -396,7 +410,7 @@
      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 56px;

      box-sizing: border-box;   
      box-sizing: border-box;

      cursor: pointer;

      padding: 0 15px;

      display: flex;

@@ -412,21 +426,21 @@
        }

        .menu-text {

          font-size: 16px;

           font-weight: 700;

          font-weight: 700;

        }

      }

    }

    .menu-item-active {     
    .menu-item-active {

      background-color: var(--colorCard) !important;

       .iconfont {

          color: #fff !important;

        }

        .menu-text {

           color: #fff;

        }

      .iconfont {

        color: #fff !important;

      }

      .menu-text {

        color: #fff;

      }

    }

    .menu-item:hover {   
      background-color: #F2F2F7;

    .menu-item:hover {

      background-color: #f2f2f7;

    }

  }

  .cluster-right {

@@ -506,7 +520,7 @@
        .bottom {

          position: relative;

          height: 100%;

          background: #F2F2F7;

          background: #f2f2f7;

          border-radius: 20px;

          cursor: pointer;

          .top {

@@ -515,9 +529,9 @@
            left: 0;

            width: 84px;

            height: 28px;

            background: #4E94FF;

            background: var(--colorCard);

            border-radius: 20px;

            transition: all .2s linear;

            transition: all 0.2s linear;

            &.toggle {

              left: 84px;

            }

@@ -533,9 +547,9 @@
            line-height: 28px;

            font-weight: 700;

            color: #333333;

             &.toggle {

               color: #fff;

             }

            &.toggle {

              color: #fff;

            }

          }

          .label-right {

            position: absolute;

@@ -549,8 +563,8 @@
            font-weight: 700;

            color: #333333;

            &.toggle {

               color: #fff;

             }

              color: #fff;

            }

          }

        }

      }

@@ -564,10 +578,9 @@
      }



      .spin-bg {

       
       width: 60px;

        width: 60px;

        margin-top: 60px;

        margin-bottom:15px ;

        margin-bottom: 15px;

      }

      .spin-bg-rot {

        animation: spin 0.8s linear infinite;

@@ -595,25 +608,25 @@
          background: var(--colorCard) !important;

          border: none !important;

          &:hover {

          color: white !important;

            color: white !important;

          }

        }

        .text-desc{

        .text-desc {

          width: 90%;

          height: 150px;

          margin-top: 20px;

          background-color: #F2F2F7;

          background-color: #f2f2f7;

          padding: 20px 30px;

          color: #333;

          text-align: left;

          font-size: 12px;

          border-radius:8px ;

          border-radius: 8px;

        }

      }

      .upload-center {

        margin-top:44px ;

        margin-top: 44px;

        .upload-info {

          margin-bottom:20px ;

          margin-bottom: 20px;

          text-align: left;

          font-weight: bold;

          font-size: 14px;

@@ -626,16 +639,16 @@
          background-color: #fff;

          border-radius: 8px;



          .upload-fail .iconfont{

          .upload-fail .iconfont {

            color: rgb(254, 109, 104);

          }



          .upload-success .iconfont{

          .upload-success .iconfont {

            color: rgb(78, 148, 255);

          }

          
            
          .upload-success,.upload-fail {



          .upload-success,

          .upload-fail {

            position: absolute;

            z-index: 1;

            width: 100%;

@@ -654,7 +667,7 @@
          .upload-icon {

            display: block;

            margin-top: 32px;

            margin-bottom:42px ;

            margin-bottom: 42px;

            font-size: 50px;

          }

        }

@@ -682,8 +695,8 @@
            background: var(--colorCard) !important;

            border: none !important;

            &:hover {

            color: white !important;

          }

              color: white !important;

            }

          }

          .el-button--small {

            font-size: 14px;

@@ -697,25 +710,25 @@
          flex-direction: column;



          .el-upload {

          width: 340px !important;

          height: 117.87px !important;

          margin: 28px auto;

          .el-upload-dragger {

            width: 100% !important;

            height: 100% !important;

            i {

              display: none  !important;

            width: 340px !important;

            height: 117.87px !important;

            margin: 28px auto;

            .el-upload-dragger {

              width: 100% !important;

              height: 100% !important;

              i {

                display: none !important;

              }

              .el-upload__text {

                color: #828282 !important;

                margin-top: 52px !important;

                font-size: 14px !important;

              }

              .el-loading-text {

                font-size: 14px !important;

                color: #333333 !important;

              }

            }

            .el-upload__text {

              color: #828282  !important;

              margin-top: 52px !important;

              font-size: 14px !important;

            }

            .el-loading-text {

              font-size: 14px !important;

              color: #333333 !important;

            }

          }

          }



          .el-upload.el-upload--text .el-upload-dragger:hover {

@@ -730,13 +743,13 @@
            width: 150px;

            height: 40px;

            margin-top: 158px;

            margin-bottom:25px ;

            margin-bottom: 25px;

            background: var(--colorCard) !important;

            border: none !important;

            border-radius: 25px !important;

            &:hover {

            color: white !important;

          }

              color: white !important;

            }

          }

        }

        .up-text {

@@ -766,11 +779,11 @@
        display: flex;

        align-items: center;

        height: 50px;

        background-color: #F2F2F7;

        background-color: #f2f2f7;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 4px;

        padding-left:20px ;

        padding-left: 20px;

        .name {

          font-size: 14px;

          font-weight: 700;

@@ -780,10 +793,10 @@
        text-align: left;

        padding: 17px 0 17px 25px;

        font-size: 16px;

        color:#333;

        color: #333;

        font-weight: 700;

      }

      .el-switch{

      .el-switch {

        width: 40px;

        height: 14px;

        margin-right: 17px;

@@ -798,14 +811,14 @@
          width: 12px !important;

          height: 12px !important;

        }

      } 
      }



      .is-checked .el-switch__core{

       background-color: var(--colorCard)  !important;

       border: 1px solid var(--colorCard) !important;

       &::after {

        margin-left: 16px

       }

      .is-checked .el-switch__core {

        background-color: var(--colorCard) !important;

        border: 1px solid var(--colorCard) !important;

        &::after {

          margin-left: 16px;

        }

      }

    }



@@ -818,14 +831,12 @@
      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

       background: var(--colorCard) !important;

          border: none !important;

          &:hover {

          color: white !important;

          }

      background: var(--colorCard) !important;

      border: none !important;

      &:hover {

        color: white !important;

      }

    }

  }



}



</style>


 vue.config.js

@@ -93,7 +93,7 @@
      },

      "/data/api-v/app/findAllApp": {

        // target: '/',

        target: "http://localhost:8081/",

        target: "http://localhost:8080/",

        changeOrigin: true,

        pathRewrite: {

          "^/data/api-v/app/findAllApp": "apps.json",