统计查询切换tab

ZZJ

2022-05-31 337cef48da80230fcd1a4386d8927fb7e33a223b

统计查询切换tab

 smartAi.rar

Binary files differ

 src/Pool/VideoPhotoData.ts

@@ -47,6 +47,7 @@
  public scrollContainDom: any = '';
  public uploadDiaplay: boolean = false;
  public uploadType: boolean = false;
  public dataSource: string = 'camera';

  constructor() {
    this.cards = [];
@@ -59,6 +60,7 @@
    this.tabs = [];
    this.tasks = [];
    this.treeNodes = [];
    this.dataSource = 'camera'
  }

  clearStatus() {
@@ -82,7 +84,8 @@
      inputValue: this.inputValue,
      tabs: this.queryTabs,
      tasks: this.queryTasks,
      treeNodes: this.treeNodes
      treeNodes: this.treeNodes,
      dataSource:this.dataSource
    }
    if (this.searchFrom == 'cluster') {
      param.isAll = true

 src/pages/desktop/index/App.vue

@@ -103,11 +103,11 @@
    });
  },
  methods: {
    quit(){
      this.$refs.tools.toLogout()
    quit() {
      this.$refs.tools.toLogout();
    },
    onJumpToDock(name){
      this.$refs.dock_model.onJumpToDock(name)
    onJumpToDock(name) {
      this.$refs.dock_model.onJumpToDock(name);
    },
    onChangeBg(v) {
      document.getElementById("app").style.backgroundImage = "url(" + v + ")";

 src/pages/search/index/Searching.vue

@@ -2,17 +2,28 @@
  <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"
@@ -123,7 +134,9 @@
              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>
@@ -137,16 +150,24 @@
            id="searchMid"
            class="mid"
            :style="{
              width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'
              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"
@@ -197,11 +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 :label="item.value" :title="item.title" :disabled="item.disabled">{{
                    item.title
                  }}</el-checkbox>
              <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>
@@ -211,18 +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 :label="item.value" :title="item.title" :disabled="item.disabled">{{
                    item.title
                  }}</el-checkbox>
              <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>
            <el-button type="primary" @click="saveAddBase(item, index)"
              >保存</el-button
            >
            <el-button type="default" @click="closeWindow(index)"
              >取消</el-button
            >
          </div>
        </div>
      </hsc-window>
@@ -231,14 +276,14 @@
</template>

<script>
import Card from "@/components/subComponents/Card"
import UploadImg from "@/components/searching/UploadImg"
import bus from "./main"
import { getUrlKey } from "@/api/utils"
import Card from "@/components/subComponents/Card";
import UploadImg from "@/components/searching/UploadImg";
import bus from "./main";
import { getUrlKey } from "@/api/utils";
export default {
  components: {
    Card,
    UploadImg
    UploadImg,
  },
  data() {
    return {
@@ -253,109 +298,116 @@
      tagValues: [],
      alarmValues: [],
      taskValues: [],
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ],
      searchText: "",
      currentPage: 1
    }
      currentPage: 1,
    };
  },
  computed: {
    searchTimeFormated() {
      return this.format(this.searchTime)
    }
      return this.format(this.searchTime);
    },
  },
  created() {
    this.TreeDataPool.readonly = true
    this.TreeDataPool.gbReadonly = true
    this.TreeDataPool.multiple = true
    this.TreeDataPool.clean()
    this.TreeDataPool.fetchTreeData()
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.TreeDataPool.fetchTreeData();
  },
  mounted() {
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
      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()
    this.blackAngWhite()
    });
    window.addEventListener("resize", this.getHeight);
    this.getCenter();
    this.getHeight();
    this.blackAngWhite();
    // 视频监控任务跳转 屏蔽 20200730
    // if (this.$route.query.from === "video") {
    //   this.VideoPhotoData.queryTasks = this.taskValues = [
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }
    let start = getUrlKey("start")
    let end = getUrlKey("end")
    let start = getUrlKey("start");
    let end = getUrlKey("end");
    if (start && end) {
      this.searchTime = [start, end]
      this.VideoPhotoData.searchTime = [start, end]
      this.searchTime = [start, end];
      this.VideoPhotoData.searchTime = [start, end];
    } else {
      this.searchTime = this.getDateInit()
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
    }

    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {
    if (getUrlKey("showType")) {
      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.compareTabs = ["esData"]
      this.VideoPhotoData.findPerson2() // 查找此人
      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.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // 查找此人
    } else {
      this.searchTime = this.getDateInit()
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
      // this.VideoPhotoData.querySearchList();
      this.setLoadSearch(this.VideoPhotoData.querySearchList())
      this.setLoadSearch(this.VideoPhotoData.querySearchList());
    }

    this.VideoPhotoData.queryTagList()
    this.VideoPhotoData.queryTaskList()
    this.VideoPhotoData.queryDictionary()
    this.VideoPhotoData.queryTagList();
    this.VideoPhotoData.queryTaskList();
    this.VideoPhotoData.queryDictionary();
    this.$nextTick(() => {
      bus.$on("changePage", (page) => {
        this.currentPage = page
        this.VideoPhotoData.page = page
      })
    })
        this.currentPage = page;
        this.VideoPhotoData.page = page;
      });
    });
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight)
    this.CardList.details = []
    window.removeEventListener("resize", this.getHeight);
    this.CardList.details = [];
    // this.TreeDataPool.treeActiveName = "camera";
    this.VideoPhotoData.queryAlarmlevel = []
    this.VideoPhotoData.inputValue = ""
    this.VideoPhotoData.queryTabs = []
    this.VideoPhotoData.queryTasks = []
    this.VideoPhotoData.treeNodes = []
    this.VideoPhotoData.queryAlarmlevel = [];
    this.VideoPhotoData.inputValue = "";
    this.VideoPhotoData.queryTabs = [];
    this.VideoPhotoData.queryTasks = [];
    this.VideoPhotoData.treeNodes = [];

    this.CardList.addBaseList = []
    this.VideoPhotoData.selectBlacks = []
    this.VideoPhotoData.selectWhites = []
    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
  },
  watch: {
    "TreeDataPool.treeActiveName"(n, o) {
      if (n && n == "camera") {
        this.VideoPhotoData.treeNodes = []
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.VideoPhotoData.dataSource = "camera";
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        this.VideoPhotoData.dataSource = "stack";
      }
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getHeight()
      console.log(2);
      this.getHeight();
      if (this.VideoPhotoData.realSmallPath.length > 0) {
        this.VideoPhotoData.findPersonByPage()
        this.VideoPhotoData.findPersonByPage();
      } else {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
@@ -365,199 +417,211 @@
    //   }
    // },
    "TreeDataPool.selectedNodes": {
      handler: function(newVal, oldVal) {
      handler: function (newVal, oldVal) {
        console.log(3);

        if (newVal !== oldVal) {
          this.VideoPhotoData.treeNodes = newVal
          this.VideoPhotoData.treeNodes = newVal;
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
            this.VideoPhotoData.findPersonByPage();
          } else {
            this.setLoadSearch(this.VideoPhotoData.querySearchList())
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true //深度监听
      deep: true, //深度监听
    },
    "DataStackPool.selectedDir": {
      handler(nodes, oldNodes) {
        console.log(4);
        if (nodes !== oldNodes && nodes.id != "") {
          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
          this.VideoPhotoData.treeNodes = [nodes.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())
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true
      deep: true,
    },
    "VideoPhotoData.activeCard": function(value) {
      let card = this.$refs.scrollContain.getElementsByClassName("my-active-card")
    "VideoPhotoData.activeCard": function (value) {
      let card =
        this.$refs.scrollContain.getElementsByClassName("my-active-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
        if (cardTop - cardHeight - scrollTop > divHeight || cardTop - cardHeight - scrollTop < 0)
          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight)
        let cardHeight = card[0].clientHeight;
        let cardTop = card[0].offsetTop;
        let scrollTop = this.$refs.scrollContain.scrollTop;
        let divHeight = this.$refs.scrollContain.clientHeight;
        if (
          cardTop - cardHeight - scrollTop > divHeight ||
          cardTop - cardHeight - scrollTop < 0
        )
          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
      }
    },
    "VideoPhotoData.uploadType": function(value) {
    "VideoPhotoData.uploadType": function (value) {
      if (value) {
        this.typeDisable = true
        this.disabled = true
        this.typeDisable = true;
        this.disabled = true;
      } else {
        this.typeDisable = false
        this.VideoPhotoData.querySearchList()
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
      }
    },
    "VideoPhotoData.selectBlacks": function(value) {
      this.blackAngWhite()
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function(value) {
      this.blackAngWhite()
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    },
    "VideoPhotoData.uploadDiaplay": function(value) {
      this.getHeight()
    "VideoPhotoData.uploadDiaplay": function (value) {
      this.getHeight();
      if (value) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search"
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false
          this.isDisabled = false;
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic"
          this.VideoPhotoData.showType = "findByPic";
        }
      } else {
        this.VideoPhotoData.uploadType = false
        this.VideoPhotoData.showType = "search"
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    }
    },
  },
  methods: {
    isShowUpload() {
      this.getHeight()
      this.getHeight();
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search"
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false
          this.isDisabled = false;
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic"
          this.VideoPhotoData.showType = "findByPic";
        }
      } else {
        this.VideoPhotoData.uploadType = false
        this.VideoPhotoData.showType = "search"
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w
      this.defaultWidth = w;
    },
    resizeHeight(h) {
      this.defaultHeight = h
      this.defaultHeight = h;
    },
    getHeight() {
      let w = this.$refs.mid.offsetWidth
      let integer = parseInt(w / 330)
      let integerSearchImg = parseInt((w - 300) / 325)
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);

      // 取消size修改
      // this.handleSizeChange(integer, integerSearchImg);

      this.cardWidth = `calc(${100 / integer}% - 20px)`
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`
      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
    },
    uploadChange() {
      this.VideoPhotoData.uploadDiaplay = false
      this.VideoPhotoData.clearStatus()
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus();
    },
    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.$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.$set(this.VideoPhotoData.blackList[i], "disabled", false);
        }
      }
    },
    saveAddBase(item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
      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)
      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.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    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]]))
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
      this.CardList.details = Array.from(
        new Set([...this.CardList.details, ...[obj]])
      );
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item)
      this.CardList.addBaseList.push(item);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done()
          done();
        })
        .catch((_) => {})
        .catch((_) => {});
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
      //初始化数据
      this.VideoPhotoData.clearStatus()
      this.CardList.details = []
      this.VideoPhotoData.clearStatus();
      this.CardList.details = [];
      // if (this.VideoPhotoData.uploadDiaplay) {

      // }
@@ -565,153 +629,156 @@
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      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")]
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      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"),
      ];
    },
    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() {
      this.VideoPhotoData.page = 1
      this.VideoPhotoData.queryTabs = this.tagValues
      this.VideoPhotoData.page = 1;
      this.VideoPhotoData.queryTabs = this.tagValues;
      //处理搜索类型
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []
      var tempArr = this.taskValues.map((task) => task.split(","));
      var tasks = [];
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks
        tasks = tasks.concat(arr);
      });
      this.VideoPhotoData.queryTasks = tasks;

      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()
      this.VideoPhotoData.searchTime = this.format(this.searchTime)
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      //this.VideoPhotoData.inputValue = this.searchText;
      this.VideoPhotoData.showType = this.showType
      this.VideoPhotoData.showType = this.showType;
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false
        this.VideoPhotoData.uploadDiaplay = false;
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    stringToNum() {
      var arr = []
      var arr = [];
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1)
          arr.push(-1);
        }
        if (element == "1") {
          arr.push(1)
          arr.push(1);
        }
        if (element == "2") {
          arr.push(2)
          arr.push(2);
        }
        if (element == "3") {
          arr.push(3)
          arr.push(3);
        }
        if (element == "4") {
          arr.push(4)
          arr.push(4);
        }
        if (element == "5") {
          arr.push(5)
          arr.push(5);
        }
      })
      return arr
      });
      return arr;
    },
    changePages(page) {
      this.VideoPhotoData.page = page
      this.VideoPhotoData.page = page;
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false
        this.VideoPhotoData.uploadDiaplay = false;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1)
      this.CardList.addBaseList.splice(index, 1);
    },
    handleSizeChange(integer, integerSearchImg) {
      if (this.VideoPhotoData.uploadDiaplay) {
        this.VideoPhotoData.size = integerSearchImg * 10
        this.VideoPhotoData.size = integerSearchImg * 10;
        //this.VideoPhotoData.findPersonByPage();
      } else {
        this.VideoPhotoData.size = integer * 10
        this.VideoPhotoData.size = integer * 10;
        //this.VideoPhotoData.querySearchList();
      }
    },
    sizeChange(size) {
      if (this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.size = size
        this.VideoPhotoData.findPersonByPage()
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.findPersonByPage();
      } else {
        this.VideoPhotoData.uploadDiaplay = false
        this.VideoPhotoData.size = size
        this.VideoPhotoData.uploadDiaplay = false;
        this.VideoPhotoData.size = size;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    clearSearch() {
      this.tagValues = []
      this.taskValues = []
      this.alarmValues = []
      this.VideoPhotoData.queryTabs = []
      this.VideoPhotoData.queryTasks = []
      this.VideoPhotoData.queryAlarmlevel = []
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.VideoPhotoData.inputValue = ""
      this.searchTime = this.getDateInit()
      this.tagValues = [];
      this.taskValues = [];
      this.alarmValues = [];
      this.VideoPhotoData.queryTabs = [];
      this.VideoPhotoData.queryTasks = [];
      this.VideoPhotoData.queryAlarmlevel = [];
      this.VideoPhotoData.searchTime = this.getDateInit();
      this.VideoPhotoData.inputValue = "";
      this.searchTime = this.getDateInit();
      if (!this.VideoPhotoData.uploadType) {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    disabled(data) {
      this.isDisabled = data
      this.isDisabled = data;
    },
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
      }
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    setLoadSearch(fn) {
      this.AuthData.setLoading("searchMid", this)
      this.AuthData.setLoading("searchMid", this);
      fn.then((_) => {
        this.AuthData.closeLoad()
      })
        this.AuthData.closeLoad();
      });
    },
    tagChange(obj) {
      if (obj.length > 0) {
        this.showType = "compare"
        this.showType = "compare";
      } else {
        this.showType = "search"
        this.showType = "search";
      }

      this.VideoPhotoData.queryTabs = obj
      this.VideoPhotoData.queryTabs = obj;

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

<style lang="scss">

 src/pages/settings/views/NetSettings.vue

@@ -20,15 +20,28 @@
      <div class="net-right" v-loading="configLoading">

        <div class="net-set" v-if="activePage == 0">

          <div class="title">网络设置</div>

          <el-form :model="ruleForm" :rules="rules" ref="joinForm" class="join-form">

          <el-form

            :model="ruleForm"

            :rules="rules"

            ref="joinForm"

            class="join-form"

          >

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

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

              <el-input v-model="ruleForm.deviceName" size="small" placeholder="必填"></el-input>

              <el-input

                v-model="ruleForm.deviceName"

                size="small"

                placeholder="必填"

              ></el-input>

            </el-form-item>



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

              <div class="p-title">端口</div>

              <el-input v-model="ruleForm.port" placeholder="选填，外部访问的端口" size="small"></el-input>

              <el-input

                v-model="ruleForm.port"

                placeholder="选填，外部访问的端口"

                size="small"

              ></el-input>

            </el-form-item>

          </el-form>

          <!-- <div class="save-btn" @click="saveServerName">保存</div> -->

@@ -40,22 +53,37 @@
        <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">

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



          <switchBar :barName="`无线网卡`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>

          <switchBar

            :barName="`无线网卡`"

            @switchChange="wifiControl"

            :value="isOpenWifi"

          ></switchBar>



          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">

            <div class="name">

              <span class="icon iconfont" v-if="item.isConnected">&#xe676;</span>

              <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span>

              <span class="icon iconfont" v-if="item.isConnected"

                >&#xe676;</span

              >

              <span

                :style="!item.isConnected ? { 'margin-left': '24px' } : {}"

                >{{ item.name }}</span

              >

            </div>



            <div class="more-detail">

              <span class="icon iconfont lock">&#xe726;</span>

              <span class="icon iconfont signal">&#xe6e5;</span>

              <span class="icon iconfont more-icon" @click="checkWifi(item)">&#xe640;</span>

              <span class="icon iconfont more-icon" @click="checkWifi(item)"

                >&#xe640;</span

              >

            </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>

@@ -69,12 +97,21 @@
              <el-form-item prop="name">

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

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

                <el-input v-model="wifiForm.name" placeholder="" size="small"></el-input>

                <el-input

                  v-model="wifiForm.name"

                  placeholder=""

                  size="small"

                ></el-input>

              </el-form-item>



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

                <div class="p-title">密码</div>

                <el-input v-model="wifiForm.password" placeholder="请输入密码" size="small" show-password></el-input>

                <el-input

                  v-model="wifiForm.password"

                  placeholder="请输入密码"

                  size="small"

                  show-password

                ></el-input>

              </el-form-item>

            </el-form>

          </div>

@@ -84,13 +121,22 @@
          <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>

              <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"

@@ -101,38 +147,66 @@
              </el-form-item>

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

                <div class="p-title">IP</div>

                <ip-input :ip="ipv4Form.ip" @on-blur="ipv4Form.ip = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv4Form.ip"

                  @on-blur="ipv4Form.ip = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">子网掩码</div>

                <ip-input :ip="ipv4Form.subMask" @on-blur="ipv4Form.subMask = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv4Form.subMask"

                  @on-blur="ipv4Form.subMask = arguments[0]"

                ></ip-input>

              </el-form-item>



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

                <div class="p-title">网关</div>

                <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv4Form.gateway"

                  @on-blur="ipv4Form.gateway = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">首选DNS</div>

                <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv4Form.dns1"

                  @on-blur="ipv4Form.dns1 = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">备用DNS</div>

                <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv4Form.dns2"

                  @on-blur="ipv4Form.dns2 = arguments[0]"

                ></ip-input>

              </el-form-item>

            </el-form>

          </div>



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

          <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>

              <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"

@@ -143,36 +217,58 @@
              </el-form-item>

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

                <div class="p-title">IP</div>

                <ip-input :ip="ipv6Form.ip" @on-blur="ipv6Form.ip = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv6Form.ip"

                  @on-blur="ipv6Form.ip = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">前缀</div>

                <div style="display: flex; width: 100%">

                  <el-input v-model="ipv6Form.prefix" placeholder size="small"></el-input>

                  <el-input

                    v-model="ipv6Form.prefix"

                    placeholder

                    size="small"

                  ></el-input>



                  <div class="ad">

                    <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>

                    <i

                      class="el-icon-refresh-left"

                      @click="ipv6Form.prefix = ''"

                    ></i>

                  </div>

                </div>

              </el-form-item>



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

                <div class="p-title">网关</div>

                <ip-input :ip="ipv6Form.gateway" @on-blur="ipv6Form.gateway = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv6Form.gateway"

                  @on-blur="ipv6Form.gateway = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">首选DNS</div>

                <ip-input :ip="ipv6Form.dns1" @on-blur="ipv6Form.dns1 = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv6Form.dns1"

                  @on-blur="ipv6Form.dns1 = arguments[0]"

                ></ip-input>

              </el-form-item>

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

                <div class="p-title">备用DNS</div>

                <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input>

                <ip-input

                  :ip="ipv6Form.dns2"

                  @on-blur="ipv6Form.dns2 = arguments[0]"

                ></ip-input>

              </el-form-item>

            </el-form>

          </div>

@@ -185,12 +281,25 @@


        <div class="wire" v-if="activePage == 2 && !inWireDetail">

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

          <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">

          <div

            class="wire-bar"

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

            :key="i"

            @click.self="checkWire(item)"

          >

            <div class="name">{{ "网络" + item.index }}</div>



            <div class="right">

              <span class="icon iconfont good" v-if="item.lower_up && item.active">&#xe6f1;</span>

              <span class="icon iconfont bad" v-if="!item.lower_up && item.active">&#xe6e6;</span>

              <span

                class="icon iconfont good"

                v-if="item.lower_up && item.active"

                >&#xe6f1;</span

              >

              <span

                class="icon iconfont bad"

                v-if="!item.lower_up && item.active"

                >&#xe6e6;</span

              >

              <el-switch

                v-model="item.active"

                active-color="#4E94FF"

@@ -213,20 +322,32 @@
            </el-form-item>

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

              <div class="p-title">IP</div>

              <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

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

              <div class="p-title">子网掩码</div>

              <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>



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

              <div class="p-title">网关</div>

              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>

              <ip-input

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

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

              <div class="p-title">DNS</div>

              <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>



@@ -251,17 +372,17 @@
  getNetWorkCardInfo,

  getDevInfo,

  downNetCard,

  upNetCard

} from "@/api/system"

  upNetCard,

} from "@/api/system";



import ipInput from "../components/IPInput"

import switchBar from "../components/switchBar"

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";



import { isIPv4 } from "@/scripts/validate"

import { isIPv4 } from "@/scripts/validate";



export default {

  components: {

@@ -269,36 +390,36 @@
    switchBar,

    WifiGateway,

    LoraGateway,

    MqttGateway

    MqttGateway,

  },

  data() {

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

      if (!value) {

        return callback(new Error("密码不能为空"))

        return callback(new Error("密码不能为空"));

      }

      setTimeout(() => {

        if (value.length != 6) {

          callback(new Error("密码应为6位!"))

          callback(new Error("密码应为6位!"));

        } else {

          callback()

          callback();

        }

      }, 1000)

    }

      }, 1000);

    };

    return {

      isHighClass: false,

      ruleForm: {

        deviceName: "",

        port: ""

        port: "",

      },

      wifiForm: {

        name: "",

        password: ""

        password: "",

      },

      wireArr: [],

      inWifiDetail: false,

      wifiList: [

        { name: "无线网络1", isConnected: false },

        { name: "无线网络2", isConnected: true }

        { name: "无线网络2", isConnected: true },

      ],

      isOpenWifi: false,

      inWireDetail: false,

@@ -306,7 +427,7 @@
        dns: "",

        subMask: "",

        gateway: "",

        ip: ""

        ip: "",

      },

      originalConfig: {},

      wireFormRules: {

@@ -314,41 +435,43 @@
          {

            required: true,

            message: "请输入IP地址",

            trigger: "change"

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" }

          { validator: isIPv4, trigger: "change" },

        ],



        gateway: [

          {

            required: true,

            message: "请输入网关",

            trigger: "change"

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" }

          { validator: isIPv4, trigger: "change" },

        ],

        dns: [

          {

            required: true,

            message: "请输入dns地址",

            trigger: "change"

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" }

          { validator: isIPv4, trigger: "change" },

        ],



        subMask: [

          {

            required: true,

            message: "请输入子网掩码",

            trigger: "change"

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" }

        ]

          { validator: isIPv4, trigger: "change" },

        ],

      },

      activePage: 0,

      activeWireItem: {},

      rules: {

        deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }]

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

        ],

      },

      ipv4Form: {},

      ipv6Form: {},

@@ -359,108 +482,108 @@
        { name: "有线网络", icon: "\ue73b" },

        { name: "WiFi网关", icon: "\ue73b" },

        { name: "LORA网关", icon: "\ue73b" },

        { name: "MQTT网关", icon: "\ue73b" }

        { name: "MQTT网关", icon: "\ue73b" },

      ],

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "自动"

          label: "自动",

        },

        {

          value: "选项2",

          label: "手动"

        }

          label: "手动",

        },

      ],

      value: "",

      IPV4_hid: false,

      IPV6_hid: false,

      configLoading: false

    }

      configLoading: false,

    };

  },

  mounted() {

    this.getCurServer()

    this.fetchWireList()

    this.getCurServer();

    this.fetchWireList();

  },

  methods: {

    minusPrefix() {

      debugger

      this.ipv6Form.prefix

      debugger;

      this.ipv6Form.prefix;

    },

    switchNetCard(item) {

      if (item.active) {

        upNetCard({ ifname: item.name }).then(

          (res) => {

            if (res.success) {

              this.$message.success(res.data)

              this.fetchWireList()

              this.$message.success(res.data);

              this.fetchWireList();

            }

          },

          (err) => {

            item.active = false

            this.$message.error(err.msg)

            item.active = false;

            this.$message.error(err.msg);

          }

        )

        );

      } else {

        downNetCard({ ifname: item.name }).then(

          (res) => {

            if (res.success) {

              this.$message.success(res.data)

              this.fetchWireList()

              this.$message.success(res.data);

              this.fetchWireList();

            }

          },

          (err) => {

            item.active = true

            this.$message.error(err.msg)

            item.active = true;

            this.$message.error(err.msg);

          }

        )

        );

      }

    },

    getCurServer() {

      getDevInfo().then((res) => {

        this.ruleForm.deviceName = res.data.server_name

        this.ruleForm.port = res.data.server_port

      })

        this.ruleForm.deviceName = res.data.server_name;

        this.ruleForm.port = res.data.server_port;

      });

    },

    fetchWireList() {

      getWireList().then((res) => {

        if (res && res.success) {

          this.wireArr = res.data

          this.wireArr = res.data;

          this.wireArr.forEach((x) => {

            let t = x.flags.split("|")[0] == "up"

            this.$set(x, "active", t)

          })

            let t = x.flags.split("|")[0] == "up";

            this.$set(x, "active", t);

          });

        }

      })

      });

    },

    cancelSaveWire() {

      this.inWireDetail = false

      this.wireForm.ip = ""

      this.wireForm.gateway = ""

      this.wireForm.dns = ""

      this.wireForm.subMask = ""

      this.originalConfig = this.wireForm

      this.inWireDetail = false;

      this.wireForm.ip = "";

      this.wireForm.gateway = "";

      this.wireForm.dns = "";

      this.wireForm.subMask = "";

      this.originalConfig = this.wireForm;

    },

    saveServerName() {

      setServerName({

        server_name: this.ruleForm.deviceName,

        server_port: this.ruleForm.port

        server_port: this.ruleForm.port,

      }).then((res) => {

        if (res && res.success) {

          this.$message.success(res.data)

          this.$message.success(res.data);

        }

      })

      });

    },

    openRight(i) {

      if (i == 0) {

        this.ruleForm.deviceName = ""

        this.ruleForm.port = ""

        this.getCurServer()

        this.ruleForm.deviceName = "";

        this.ruleForm.port = "";

        this.getCurServer();

      }

      if (i == 1) {

        this.inWifiDetail = false

        this.inWifiDetail = false;

      }

      this.activePage = i

      this.activePage = i;

    },

    saveWire(ifname) {

      this.$refs["wireForm"].validate((valid) => {

@@ -470,20 +593,24 @@
            gateway: this.wireForm.gateway,

            dns: this.wireForm.dns,

            subMask: this.wireForm.subMask,

            ifname: this.activeWireItem.name

          }

            ifname: this.activeWireItem.name,

          };



          let newUri = location.protocol + "//" + data.ip + (location.port == 80 ? "" : ":" + location.port)

          let newUri =

            location.protocol +

            "//" +

            data.ip +

            (location.port == 80 ? "" : ":" + location.port);



          this.$confirm("确认需要修改服务器配置吗？", {

            center: true,

            cancelButtonClass: "comfirm-class-cancle",

            confirmButtonClass: "comfirm-class-sure"

            confirmButtonClass: "comfirm-class-sure",

          })

            .then(() => {

              this.configLoading = true

              this.configLoading = true;

              if (this.wireForm.ip !== this.originalConfig.ip) {

                this.configLoading = false

                this.configLoading = false;

                var changeIPTimer = setTimeout(() => {

                  this.$alert(

                    '<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' +

@@ -494,99 +621,99 @@
                    "提示",

                    {

                      dangerouslyUseHTMLString: true,

                      customClass: "noticeBox"

                      customClass: "noticeBox",

                    }

                  )

                }, 10000)

                  );

                }, 10000);

              }



              setNetWorkCard(data)

                .then((rsp) => {

                  this.configLoading = false

                  this.configLoading = false;

                  if (rsp && rsp.success) {

                    this.$notify({

                      type: "success",

                      message: "服务器配置成功"

                    })

                      message: "服务器配置成功",

                    });

                  }

                })

                .catch((err) => {

                  clearTimeout(changeIPTimer)

                  this.configLoading = false

                  clearTimeout(changeIPTimer);

                  this.configLoading = false;

                  this.$notify({

                    type: "error",

                    message: "保存失败"

                  })

                })

                    message: "保存失败",

                  });

                });

              this.$message({

                message: "操作完成,请稍后",

                type: "success"

              })

                type: "success",

              });

            })

            .catch((err) => {})

            .catch((err) => {});

        } else {

          return false

          return false;

        }

      })

      });

    },

    wifiControl(val) {},

    checkWifi() {

      this.inWifiDetail = true

      this.inWifiDetail = true;

    },

    openWireDetail(item) {

      this.inWireDetail = true

      this.activeWireItem = item

      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

        ifname: item.name

        ifname: item.name,

      }).then(

        (res) => {

          if (res && res.success) {

            this.wireForm.ip = res.data.ip

            this.wireForm.gateway = res.data.gateway

            this.wireForm.dns = res.data.dns

            this.wireForm.subMask = res.data.subMask

            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm))

            this.wireForm.ip = res.data.ip;

            this.wireForm.gateway = res.data.gateway;

            this.wireForm.dns = res.data.dns;

            this.wireForm.subMask = res.data.subMask;

            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm));

          }

        },

        (err) => {

          this.$message.error("查找不到数据: " + err.msg)

          this.$message.error("查找不到数据: " + err.msg);

        }

      )

      );

    },

    checkWire(item) {

      if (item.addrs) {

        this.openWireDetail(item)

        return

        this.openWireDetail(item);

        return;

      }

      this.$confirm("您还未配置网络信息，是否现在配置？", "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

        customClass: "confirmBox"

        customClass: "confirmBox",

      }).then(() => {

        this.openWireDetail(item)

      })

        this.openWireDetail(item);

      });

    },

    toggleFold(tog) {

      const demo = this.$refs.ipvHolder

      const demo = this.$refs.ipvHolder;

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

        setTimeout(() => {

          demo.scrollIntoView({

            block: "end",

            inline: "nearest",

            behavior: "smooth"

          })

        }, 300)

            behavior: "smooth",

          });

        }, 300);

      }

      this[tog] = !this[tog]

    }

      this[tog] = !this[tog];

    },

  },

  computed: {

    showStatus() {

      return this.wireArr.some((item) => item.lower_up == true)

    }

  }

}

      return this.wireArr.some((item) => item.lower_up == true);

    },

  },

};

</script>

<style lang="scss">

.all {

@@ -728,8 +855,11 @@
      border-radius: 8px;

      margin-bottom: 4px;

    }

    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {

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

      > .el-form-item__label:before,

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

      .el-form-item__label-wrap

      > .el-form-item__label:before {

      display: none;

    }

    .el-select {


 vue.config.js

@@ -120,8 +120,8 @@
        changeOrigin: true,

      },

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

        target: "/",

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

        // target: '/',

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

        changeOrigin: true,

        pathRewrite: {

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