管理中心添加分析

zhangzengfei

2022-08-05 1e4a3f702623a46bcd53dbc96e235d51e0edb155

管理中心添加分析

 src/Pool/VideoPhotoData.ts

@@ -6,69 +6,69 @@
  findPersonByPic,
  findPerson,
  addToBase
} from "@/api/search";
} from "@/api/search"
export default class VideoPhotoData {
  public searchFrom: string = 'search';
  public preCards: Array<object> = [];
  public cards: Array<object> = [];
  public persons: Array<object> = [];
  public searchFrom: string = "search"
  public preCards: Array<object> = []
  public cards: Array<object> = []
  public persons: Array<object> = []
  public activeName: string = "pic"
  public page: number = 1;
  public size: number;
  public pageSizeOption: Array<number>;
  public alarmlevel: Array<object>;
  public dictionary: object = {};
  public monitorLevel: Array<object> = [];
  public queryAlarmlevel: Array<string> = [];
  public inputValue: string;
  public searchTime: Array<string>;
  public showType: string;
  public tabs: Array<object>;
  public blackList: Array<object> = [];
  public selectBlacks: Array<object> = [];
  public whiteList: Array<object> = [];
  public selectWhites: Array<object> = [];
  public queryTabs: Array<string> = [];
  public compareTabs: Array<string> = [];
  public tasks: Array<object>;
  public queryTasks: Array<string> = [];
  public treeNodes: Array<string>;
  public total: number = 0;
  public tabsForUploadImg: Array<object> = [];
  public picUrl: string = "";
  public threshold: number = 60;
  public activeCard: number | string = "";
  public uploadImg: any = "";
  public captureId: string = "";
  public compareNum: string = "";
  public compTargetId: string = "";
  public compTargetType: string = "1";
  public rightSectionDisplay: boolean = false;
  public scrollContainDom: any = '';
  public uploadDiaplay: boolean = false;
  public uploadType: boolean = false;
  public page: number = 1
  public size: number
  public pageSizeOption: Array<number>
  public alarmlevel: Array<object>
  public dictionary: object = {}
  public monitorLevel: Array<object> = []
  public queryAlarmlevel: Array<string> = []
  public inputValue: string
  public searchTime: Array<string>
  public showType: string
  public tabs: Array<object>
  public blackList: Array<object> = []
  public selectBlacks: Array<object> = []
  public whiteList: Array<object> = []
  public selectWhites: Array<object> = []
  public queryTabs: Array<string> = []
  public compareTabs: Array<string> = []
  public tasks: Array<object>
  public queryTasks: Array<string> = []
  public treeNodes: Array<string>
  public total: number = 0
  public tabsForUploadImg: Array<object> = []
  public picUrl: string = ""
  public threshold: number = 60
  public activeCard: number | string = ""
  public uploadImg: any = ""
  public captureId: string = ""
  public compareNum: string = ""
  public compTargetId: string = ""
  public compTargetType: string = "1"
  public rightSectionDisplay: boolean = false
  public scrollContainDom: any = ""
  public uploadDiaplay: boolean = false
  public uploadType: boolean = false

  constructor() {
    this.cards = [];
    this.size = 60;
    this.pageSizeOption = [30, 60, 120]
    this.alarmlevel = [];
    this.inputValue = "";
    this.searchTime = [];
    this.showType = "search";
    this.tabs = [];
    this.tasks = [];
    this.treeNodes = [];
    this.cards = []
    this.size = 60
    this.pageSizeOption = [30, 60, 120, 1200]
    this.alarmlevel = []
    this.inputValue = ""
    this.searchTime = []
    this.showType = "search"
    this.tabs = []
    this.tasks = []
    this.treeNodes = []
  }

  clearStatus() {
    //this.cards = [];
    this.page = 1;
    this.size = 60;
    this.page = 1
    this.size = 60
    this.pageSizeOption = [30, 60, 120]
    this.alarmlevel = [];
    this.inputValue = "";
    this.showType = "search";
    this.alarmlevel = []
    this.inputValue = ""
    this.showType = "search"
  }

  async querySearchList() {
@@ -85,34 +85,33 @@
      treeNodes: this.treeNodes,
      dataSource: "camera"
    }
    if (this.searchFrom == 'cluster') {
    if (this.searchFrom == "cluster") {
      param.isAll = true
    }
    const rsp: any = await getSearchList(param);
    const rsp: any = await getSearchList(param)
    if (rsp && rsp.success) {
      this.cards.length = 0 // 清两次，第一次是为了点完之后不会出现之前数据的残影，这次是为了防止因为异步问题两次请求会出现双倍数据的问题
      this.preCards.length = 0
      if (rsp.data.datalist) {
        rsp.data.datalist.forEach(element => {
        rsp.data.datalist.forEach((element) => {
          if (element.activeObject.targetInfo && element.activeObject.targetInfo.length === 0) {
            element.activeObject.targetInfo = null
          }

    if(element.activeObject.targetInfo&&element.activeObject.targetInfo.length === 0) {
      element.activeObject.targetInfo = null
    }
    
    if(element.list[0].targetInfo&&element.list[0].targetInfo.length === 0) {
      element.list[0].targetInfo = null
    }
          if (element.list[0].targetInfo && element.list[0].targetInfo.length === 0) {
            element.list[0].targetInfo = null
          }

          element.ownerPage = this.page
          this.cards.push(element as any);
          this.cards.push(element as any)
          // 只允许每个card渲染一张图片
          // var obj = {activeObject: element.activeObject,ownerPage: element.ownerPage,list: [],length: element.list.length}
          // obj.list.push(element.activeObject)
          // this.preCards.push(obj)
        });
        })
      }
      //console.log("cards的数量",this.cards)
      this.total = rsp.data.total;
      this.total = rsp.data.total
    }
  }

@@ -131,17 +130,17 @@
      threshold: this.threshold,
      isAll: this.searchFrom == "cluster" ? true : false
    }
    const rsp: any = await findPersonByPic(param);
    const rsp: any = await findPersonByPic(param)
    if (rsp && rsp.success) {
      rsp.data.totalList.forEach(element => {
      rsp.data.totalList.forEach((element) => {
        var obj = {
          activeObject: (element as any),
          activeObject: element as any,
          list: []
        }
        element.ownerPage = this.page
        obj.list.push((element as any))
        obj.list.push(element as any)
        this.cards.push(obj)
      });
      })
      // console.log("以图搜图查回来的人",this.persons)
      this.total = rsp.data.total
      this.compareNum = rsp.data.compareNum
@@ -181,20 +180,20 @@
        compTargetId: this.compTargetId,
        compTargetType: compType,
        databases: this.compareTabs,
        threshold: this.threshold,
        threshold: this.threshold
      }
    }
    const rsp: any = await findPersonByPic(param);
    const rsp: any = await findPersonByPic(param)
    if (rsp && rsp.success) {
      rsp.data.totalList.forEach(element => {
      rsp.data.totalList.forEach((element) => {
        var obj = {
          activeObject: (element as any),
          activeObject: element as any,
          list: []
        }
        element.ownerPage = this.page
        obj.list.push((element as any))
        obj.list.push(element as any)
        this.cards.push(obj)
      });
      })
      this.total = rsp.data.total
      this.compareNum = rsp.data.compareNum
    }
@@ -215,65 +214,73 @@
      threshold: this.threshold,
      isAll: this.searchFrom == "cluster" ? true : false
    }
    const rsp: any = await findPerson(param);
    const rsp: any = await findPerson(param)
    if (rsp && rsp.success) {
      rsp.data.totalList.forEach(element => {
      rsp.data.totalList.forEach((element) => {
        var obj = {
          activeObject: (element as any),
          activeObject: element as any,
          list: []
        }
        element.ownerPage = this.page
        obj.list.push((element as any))
        obj.list.push(element as any)
        this.cards.push(obj)
      });
      })
      this.total = rsp.data.total
      // console.log("findPersonByPage---", this.total, this.persons)
    }
  }
  async queryTagList() {
    const rsp: any = await getTagList({});
    const rsp: any = await getTagList({})
    this.tabsForUploadImg.splice(0, this.tabsForUploadImg.length)
    if (rsp && rsp.success) {
      var arr1 = new Array
      arr1 = rsp.data&&rsp.data.tags.filter(i => {
        if (i.status === 1) {
          i.title = i.title + '(已删除)'
          return i
        }
      });
      this.tabs = rsp.data&&rsp.data.tags.filter(function (i) {
        if (i.status !== 1) {
          return i
        }
      })
      var arr1 = new Array()
      arr1 =
        rsp.data &&
        rsp.data.tags.filter((i) => {
          if (i.status === 1) {
            i.title = i.title + "(已删除)"
            return i
          }
        })
      this.tabs =
        rsp.data &&
        rsp.data.tags.filter(function(i) {
          if (i.status !== 1) {
            return i
          }
        })
      this.tabs.push(...arr1)
      this.tabsForUploadImg.push({ key: "esData", title: "抓拍库" });
      rsp.data.tags.forEach(element => {
        this.tabsForUploadImg.push(element as any);
      });
      this.tabsForUploadImg.push({ key: "esData", title: "抓拍库" })
      rsp.data.tags.forEach((element) => {
        this.tabsForUploadImg.push(element as any)
      })
      // 放置黑白名单 0为白名单
      this.blackList.length = 0
      this.whiteList.length = 0
      var josn = JSON.stringify(rsp)
      var resp = JSON.parse(josn)
      resp.data.tags.forEach(i => {
        if (i.status === 0 && i.bwType === "0") { //白名单
          if (i.analyServerId === "") { //同步库
            i.title = i.title + '(同步库)'
      resp.data.tags.forEach((i) => {
        if (i.status === 0 && i.bwType === "0") {
          //白名单
          if (i.analyServerId === "") {
            //同步库
            i.title = i.title + "(同步库)"
            this.whiteList.push(i)
          } else {
            this.whiteList.push(i)
          }
        }
        if (i.status === 0 && i.bwType === "1") { //黑名单
          if (i.analyServerId === "") { //同步库
            i.title = i.title + '(同步库)'
        if (i.status === 0 && i.bwType === "1") {
          //黑名单
          if (i.analyServerId === "") {
            //同步库
            i.title = i.title + "(同步库)"
            this.blackList.push(i)
          } else {
            this.blackList.push(i)
          }
        }
      });
      })
    } else {
      // this.$notify({
      //   title: "失败",
@@ -284,36 +291,36 @@
  }

  async queryTaskList() {
    let params: any = {};
    if (this.searchFrom == 'cluster') {
    let params: any = {}
    if (this.searchFrom == "cluster") {
      params.isPlatform = 1
    }
    console.log(params)
    const rsp: any = await getTaskList(params);
    const rsp: any = await getTaskList(params)
    if (rsp && rsp.success) {
      // this.tasks.splice(0, this.tasks.length)
      // rsp.data.forEach(element => {
      //   this.tasks.push((element as any).task);
      // });
      let taskNames = [];
      this.tasks = [];
      let taskNames = []
      this.tasks = []
      rsp.data.aggs.forEach((d: any) => {
        if (taskNames.indexOf(d.name) < 0) {
          taskNames.push(d.name);
          taskNames.push(d.name)
          this.tasks.push(d)
        } else {
          let repeatOne = this.tasks.find((one: any) => one.name == d.name);
          repeatOne['id'] += `,${d.id}`;
          repeatOne['isDelete'] = repeatOne['isDelete'] && d.isDelete
          let repeatOne = this.tasks.find((one: any) => one.name == d.name)
          repeatOne["id"] += `,${d.id}`
          repeatOne["isDelete"] = repeatOne["isDelete"] && d.isDelete
        }
      });
      })
    }
  }

  async queryDictionary() {
    const rsp: any = await getAlarmLevel({});
    const rsp: any = await getAlarmLevel({})
    if (rsp && rsp.success) {
      this.dictionary = rsp.data;
      this.dictionary = rsp.data
      // console.log("字典是：", this.dictionary)

      //this.dictionary['ALARMLEVEL'].unshift({ name: '撤防', value: "-1" })

 src/api/es.ts

@@ -1,22 +1,82 @@
import request from "@/scripts/httpRequest";
import request from "@/scripts/httpRequest"

/*输入    

    repeated string taskNames = 1;      //场景名称集合 
    repeated string treeNodes = 2;      //摄像机id集合
    repeated string searchTime = 3;     //时间
    string alarmLevel = 5;              //报警级别

{
    "taskNames": [
        "场景多算法",
        "场景1"
    ],
    "treeNodes": [
        "29aeffc7-d51a-447b-ae30-5916690f40e4"
    ],
    "searchTime": [
        "2022-07-28 00:00:00",
        "2022-08-03 23:59:59"
    ],
    "alarmLevel": "一级"
}

以上"taskNames"，"treeNodes"，"alarmLevel"选择全部（页面中选择全部）直接传空或不传，日期为数组，第一个为开始时间，第二个为结束时间。

输出为base64

{
    "code": 200,
    "data": {
        "warningRate": "eyJidWNrZXRzIjpbeyJkb2NfY291bnQiOjQsImtleSI6M30seyJkb2NfY291bnQiOjMsImtleSI6Mn0seyJkb2NfY291bnQiOjEsImtleSI6MX1dLCJ0b3RhbCI6MzI1N30=",
        "warningTable": "W3siZG9jX2NvdW50Ijo4MDEsImtleSI6MTY1OTM5ODQwMDAwMCwia2V5X2FzX3N0cmluZyI6IjIwMjItMDgtMDIifSx7ImRvY19jb3VudCI6MjQ1Niwia2V5IjoxNjU5NDg0ODAwMDAwLCJrZXlfYXNfc3RyaW5nIjoiMjAyMi0wOC0wMyJ9XQ==",
        "warningStatics": "W3siZG9jX2NvdW50IjozLCJrZXkiOjE2NTk0ODQ4MDAwMDAsImtleV9hc19zdHJpbmciOiIyMDIyLTA4LTAzIn1d",
        "warningChartRate": "W3siZG9jX2NvdW50IjozMjM4LCJrZXkiOiLlnLrmma/lpJrnrpfms5UifSx7ImRvY19jb3VudCI6MTksImtleSI6IuWcuuaZrzEifV0="
    },
    "msg": "请求处理成功",
    "success": true
}

    bytes warningRate = 1;         //排查率，整改率，处理率 所需数据 key 1=误报数据,2=已整改,3=未整改 doc_count=数量 total=总量 
    bytes warningTable = 2;        //告警数量趋势所需数据 "key_as_string" 按日期‘天’分桶   doc_count“数量”
    bytes warningStatics = 3;      //整改数量统计所需数据 "key_as_string" 按日期‘天’分桶   doc_count“数量”
    bytes warningChartRate = 4;    //告警类型占比所需数据 

"warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}                                                                            
//key 1=误报数据,2=已整改,3=未整改 doc_count=数量 total=总量  

"warningTable": [{"doc_count":801,"key":1659398400000,"key_as_string":"2022-08-02"},{"doc_count":2456,"key":1659484800000,"key_as_string":"2022-08-03"}]     
//"key_as_string" 按日期‘天’分桶   doc_count“数量”

"warningStatics": [{"doc_count":3,"key":1659484800000,"key_as_string":"2022-08-03"}                               //"key_as_string" 按日期‘天’分桶   doc_count“数量”

"warningChartRate": [{"doc_count":3238,"key":"场景多算法"},{"doc_count":19,"key":"场景1"}]                        //key=报警类型   doc_count“数量” */
export const analysisReport = (data: any) => {
  return request({
    url: "/cloud/api-s/es/analysisReport",
    method: "post",
    data
  })
}

export const findTagList = () => {
  return request({
    url: "/data/api-v/es/tagList",
    method: "post"
  });
};
  })
}

export const findBaseByRuleEditor = () => {
  return request({
    url: '/data/api-v/dbtable/findAllDbTablesByCurServer',
    url: "/data/api-v/dbtable/findAllDbTablesByCurServer",
    method: "get"
  })
}

export const getCameraFaceData = (data: any) => {
  return request({
    url: '/data/api-v/customer/behavior',
    url: "/data/api-v/customer/behavior",
    method: "post",
    data
  })

 src/main.ts

@@ -1,41 +1,40 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";
import moment from "moment"; //导入文件
import Mixin from "./mixins";
import numeral from 'numeral';
import preview from "vue-photo-preview";
import "vue-photo-preview/dist/skin.css";
  import * as VueWindow from "@hscmap/vue-window";
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import "./plugins/element.js"
import moment from "moment" //导入文件
import Mixin from "./mixins"
import numeral from "numeral"
import preview from "vue-photo-preview"
import "vue-photo-preview/dist/skin.css"
import * as VueWindow from "@hscmap/vue-window"

import VueAwesomeSwiper from "vue-awesome-swiper";
import ToggleButton from 'vue-js-toggle-button';
import {ImageShow,PwInput} from './scripts/component.js'
import VueAwesomeSwiper from "vue-awesome-swiper"
import ToggleButton from "vue-js-toggle-button"
import { ImageShow, PwInput } from "./scripts/component.js"

import "swiper/dist/css/swiper.css";
import './assets/css/element-variables.scss'
import 'vue2-animate/dist/vue2-animate.min.css'
import "swiper/dist/css/swiper.css"
import "./assets/css/element-variables.scss"
import "vue2-animate/dist/vue2-animate.min.css"

import JsonExcel from "vue-json-excel"


Vue.prototype.$moment = moment; //赋值使用
Vue.prototype.numeral = numeral;
Vue.config.productionTip = false;
Vue.mixin(Mixin);
Vue.use(preview);
  Vue.use(VueWindow);
Vue.use(VueAwesomeSwiper as any);
Vue.prototype.$moment = moment //赋值使用
Vue.prototype.numeral = numeral
Vue.config.productionTip = false
Vue.mixin(Mixin)
Vue.use(preview)
Vue.use(VueWindow)
Vue.use(VueAwesomeSwiper as any)
Vue.use(ToggleButton)
Vue.use(ImageShow)
Vue.use(PwInput)



Vue.component("downloadExcel", JsonExcel)

export default Vue.prototype.bus = new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
  render: (h) => h(App)
}).$mount("#app")

 src/package.json

New file
@@ -0,0 +1,5 @@
{
  "dependencies": {
    "js-base64": "^3.7.2"
  }
}

 src/views/login/components/loginForm.vue

@@ -11,10 +11,7 @@
            class="demo-ruleForm"
          >
            <el-form-item prop="loginName">
              <el-input
                v-model.trim="user.loginName"
                placeholder="请输入手机号 / 用户名"
              >
              <el-input v-model.trim="user.loginName" placeholder="请输入手机号 / 用户名">
                <i slot="prefix" class="iconfont">&#xe603;</i>
              </el-input>
            </el-form-item>
@@ -42,9 +39,7 @@
              <el-link class="cursor-register" target="_blank">
                <router-link to="/Register">注册</router-link>
              </el-link>
              <el-link class="cursor-pointer" type="primary" @click="forget"
                >忘记密码</el-link
              >
              <el-link class="cursor-pointer" type="primary" @click="forget">忘记密码</el-link>
            </div>
          </el-form>
        </el-tab-pane>
@@ -72,12 +67,9 @@
              >
                <i slot="prefix" class="iconfont icon-yanzhengma"></i>
              </el-input>
              <el-button
                class="code-btn"
                :disabled="codeDisabled"
                @click="getCode('phoneLogin')"
                >{{ codeMsg }}</el-button
              >
              <el-button class="code-btn" :disabled="codeDisabled" @click="getCode('phoneLogin')">{{
                codeMsg
              }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
@@ -92,9 +84,7 @@
              <el-link class="cursor-register" target="_blank">
                <router-link to="/Register">注册</router-link>
              </el-link>
              <el-link class="cursor-pointer" type="primary" @click="forget"
                >忘记密码</el-link
              >
              <el-link class="cursor-pointer" type="primary" @click="forget">忘记密码</el-link>
            </div>
          </el-form>
        </el-tab-pane>
@@ -104,18 +94,13 @@
</template>

<script>
import {
  tologin,
  getLoginUserData,
  makeVerifyCode,
  getMenuPermission,
} from "@/api/login";
import { isPhone } from "@/scripts/validate";
import { tologin, getLoginUserData, makeVerifyCode, getMenuPermission } from "@/api/login"
import { isPhone } from "@/scripts/validate"

export default {
  name: "login-pgae",
  metaInfo: {
    title: "登录页",
    title: "登录页"
  },
  data: () => ({
    activeName: "first",
@@ -130,32 +115,28 @@
    user: {
      loginName: "",
      password: "",
      rememberMe: false,
      rememberMe: false
    },
    phone: {
      phoneNum: "",
      verifyCode: "",
      verifyCode: ""
    },
    nullRule: {},
    userRules: {
      loginName: [
        { required: true, message: "请输入用户名", trigger: "change" },
      ],
      password: [{ required: true, message: "请输入密码", trigger: "change" }],
      loginName: [{ required: true, message: "请输入用户名", trigger: "change" }],
      password: [{ required: true, message: "请输入密码", trigger: "change" }]
    },
    phoneCodeRule: {
      phoneNum: [{ validator: isPhone, trigger: "change" }],
      verifyCode: [
        { required: true, message: "请输入验证码", trigger: "change" },
      ],
      verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }]
    },
    loading: "",
    vLoading: false,
    vLoading: false
  }),

  methods: {
    phoneLogin() {
      this.nullRule = this.phoneCodeRule;
      this.nullRule = this.phoneCodeRule
      this.$nextTick(() => {
        this.$refs["phoneLogin"].validate((valid) => {
          if (valid) {
@@ -163,23 +144,23 @@
              //       lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
              background: "rgba(0, 0, 0, 0.7)"
            })
            let param = {
              phoneNum: this.phone.phoneNum,
              verifyCode: this.phone.verifyCode,
            };
            this.testLogin(param);
              verifyCode: this.phone.verifyCode
            }
            this.testLogin(param)
            // return false
          } else {
            this.nullRule = {};
            this.nullRule = {}
          }
        });
        this.nullRule = {};
      });
        })
        this.nullRule = {}
      })
    },
    userLogin() {
      this.nullRule = this.userRules;
      this.nullRule = this.userRules
      this.$nextTick(() => {
        this.$refs["userLogin"].validate((valid) => {
          if (valid) {
@@ -187,32 +168,32 @@
              //     lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
              background: "rgba(0, 0, 0, 0.7)"
            })
            let param = {
              username: this.user.loginName,
              password: this.user.password,
            };
            this.testLogin(param);
              password: this.user.password
            }
            this.testLogin(param)
            // return false
          } else {
            this.nullRule = {};
            this.nullRule = {}
          }
        });
        this.nullRule = {};
      });
        })
        this.nullRule = {}
      })
    },
    getValidStr() {
      if (this.countdown > 0 && this.countdown <= 60) {
        this.countdown--;
        this.countdown--
        if (this.countdown !== 0) {
          this.codeMsg = `${this.countdown}s`;
          this.codeMsg = `${this.countdown}s`
        } else {
          clearInterval(this.timer);
          this.codeMsg = "获取验证码";
          this.countdown = 60;
          this.timer = null;
          this.codeDisabled = false;
          clearInterval(this.timer)
          this.codeMsg = "获取验证码"
          this.countdown = 60
          this.timer = null
          this.codeDisabled = false
        }
      }
    },
@@ -233,86 +214,82 @@

      this.$refs[formName].validateField("phoneNum", (res) => {
        if (res) {
          document.querySelector(".phoneNum .el-input__inner").focus();
          document.querySelector(".phoneNum .el-input__inner").focus()
        }
        if (!this.timer && !res) {
          this.codeDisabled = true;
          this.getValidStr();
          this.timer = setInterval(this.getValidStr, 1000);
          this.codeDisabled = true
          this.getValidStr()
          this.timer = setInterval(this.getValidStr, 1000)
          makeVerifyCode({ phoneNum: this.phone.phoneNum, type: 0 })
            .then(() => {
              this.gotCode = true;
              this.gotCode = true
            })
            .catch((err) => {
              console.log(this.$refs[formName].fields);
              this.$refs[formName].fields[0].validateState = "error";
              console.log(this.$refs[formName].fields)
              this.$refs[formName].fields[0].validateState = "error"
              setTimeout(() => {
                if (document.querySelector(".el-form-item__error")) {
                  document.querySelector(".el-form-item__error").innerHTML =
                    '<span class="iconfont error">&#xe600;</span>手机号未注册,您可以<span class="colorBlue toRegister">去注册</span>';
                    '<span class="iconfont error">&#xe600;</span>手机号未注册,您可以<span class="colorBlue toRegister">去注册</span>'
                  this.$nextTick(() => {
                    document
                      .querySelector(".toRegister")
                      .addEventListener("click", () => {
                        this.$router.push("/register");
                      });
                  });
                    document.querySelector(".toRegister").addEventListener("click", () => {
                      this.$router.push("/register")
                    })
                  })
                } else {
                  this.$refs[formName].fields[0].validateMessage = err.data.msg;
                  this.$refs[formName].fields[0].validateMessage = err.data.msg
                }
                document.querySelector(".phoneNum .el-input__inner").focus();
              }, 100);
            });
                document.querySelector(".phoneNum .el-input__inner").focus()
              }, 100)
            })
        }
      });
      })
    },
    async testLogin(param) {
      tologin(param)
        .then((res) => {
          const data = res.data;
          const data = res.data
          const loginedInfo = {
            access_token: data.token_type + " " + data.access_token,
            refresh_token: data.refresh_token,
          };
          sessionStorage.setItem("expires_in", data.expires_in);
          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
            refresh_token: data.refresh_token
          }
          sessionStorage.setItem("expires_in", data.expires_in)
          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))

          getMenuPermission().then((rep) => {
            data.userInfo.permissions = rep.data.permissions;
            sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
            this.$router.push("/");
          });
          this.loading.close();
            data.userInfo.permissions = rep.data.permissions
            sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo))
            this.$router.push("/manageCenter")
          })
          this.loading.close()
        })
        .catch((err) => {
          this.loading.close();
          this.loading.close()

          if (err.data && err.data.msg == "验证码有误") {
            this.$refs["phoneLogin"].fields[1].validateState = "error";
            this.$refs["phoneLogin"].fields[1].validateState = "error"

            setTimeout(() => {
              if (document.querySelector(".el-form-item__error")) {
                document.querySelector(".el-form-item__error").innerHTML =
                  '<span class="iconfont error">&#xe600;</span>验证码不正确，请重新输入';
                  '<span class="iconfont error">&#xe600;</span>验证码不正确，请重新输入'
              } else {
                this.$refs["phoneLogin"].fields[1].validateMessage =
                  err.data.msg;
                this.$refs["phoneLogin"].fields[1].validateMessage = err.data.msg
              }
              document.querySelector(".phoneNum .el-input__inner").focus();
            }, 100);
              document.querySelector(".phoneNum .el-input__inner").focus()
            }, 100)
          } else if (err.data.msg == "用户名或密码有误") {
            this.$refs["userLogin"].fields[1].validateState = "error";
            this.$refs["userLogin"].fields[1].validateState = "error"

            setTimeout(() => {
              if (document.querySelector(".el-form-item__error")) {
                document.querySelector(".el-form-item__error").innerHTML =
                  '<span class="iconfont error">&#xe600;</span>用户名或密码有误';
                  '<span class="iconfont error">&#xe600;</span>用户名或密码有误'
              } else {
                this.$refs["userLogin"].fields[1].validateMessage =
                  err.data.msg;
                this.$refs["userLogin"].fields[1].validateMessage = err.data.msg
              }
              document.querySelector(".phoneNum .el-input__inner").focus();
            }, 100);
              document.querySelector(".phoneNum .el-input__inner").focus()
            }, 100)
          }

          //   this.$notify({
@@ -323,29 +300,29 @@
          //     offset: 57,
          //   });
          // this.$refs.pwd.focus();
        });
        })
      // this.loading = false
    },
    forget() {
      this.$router.push({
        path: "/Register",
        query: {
          isReset: true,
        },
      });
          isReset: true
        }
      })
    },
    async getLoginUserData() {
      let json = await getLoginUserData();
      let json = await getLoginUserData()
      if (!json.error) {
        // this.loading.close()
        sessionStorage.setItem("userInfo", JSON.stringify(json));
        sessionStorage.setItem("userInfo", JSON.stringify(json))
        this.$notify({
          title: "提示",
          type: "success",
          message: "登录成功！",
          duration: 2500,
          offset: 57,
        });
          offset: 57
        })
        /* 判断当前是否在登录页，如果在登录页 */
        // if (window.location.href.indexOf('/login') !== -1) {
        //   router.push({
@@ -356,21 +333,21 @@
        //   })
        // }
        // await this.getMenuList();
        this.$router.push("/Layout/ProductCenter");
        return json;
        this.$router.push("/Layout/ProductCenter")
        return json
      } else {
        this.$notify({
          title: "提示",
          type: "error",
          message: "登录失败！",
          duration: 2500,
          offset: 57,
        });
          offset: 57
        })
        // this.loading.close()
      }
    },
  },
};
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -548,4 +525,4 @@
    }
  }
}
</style>
</style>

 src/views/manageCenter/index.vue

@@ -22,42 +22,118 @@
        </div>
      </div>

      <!--  <div class="equipmentInfo">
      <div class="heart">
        <div class="products">
          <div class="title">统计分析</div>
          <div class="productList">
            <p class="p-statis" style=" vertical-align: top">
              <span>时间：</span>
              <el-date-picker
                size="mini"
                v-model="searchTime"
                @change="searchHandler"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </p>
            <!-- <p class="p-statis" style="margin-left: 10px">
              <b style="width: 60px">场景：</b>
              <el-select
                v-model="taskValues"
                multiple
                @change="searchingBtn"
                :disabled="typeDisable"
                collapse-tags
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in VideoPhotoData.tasks"
                  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"
                ></el-option>
              </el-select>
            </p> -->

            <p class="p-statis" style="margin-left: 20px">
              <span>部门：</span>
              <el-cascader
                size="mini"
                style="width:400px"
                v-model="searchTree"
                :options="menuTree"
                :props="{ value: 'id', label: 'name', checkStrictly: true }"
                collapse-tags
                clearable
                @change="handleTreeChange"
              ></el-cascader>
            </p>
            <p class="p-statis" style="margin-left: 20px">
              <span>等级：</span>
              <el-select
                v-model="alarmValues"
                clearable
                collapse-tags
                size="mini"
                style="width:140px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </p>
            <p class="p-statis" style="">
              <el-button type="primary" size="mini" @click="searchHandler">搜索</el-button>
            </p>
          </div>
        </div>
      </div>

      <div class="equipmentInfo">
        <div class="equipmentCard">
          <div class="label">设备总量</div>
          <div class="label">预警总量</div>
          <div class="number">
            34
            <div class="upIcon iconfont">&#xe62e; 2</div>
            {{ warningTotal }}
            <div class="upIcon iconfont">&#xe62e;</div>
          </div>

          <img src="/images/manageCenter/total2.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">摄像机总数</div>
          <div class="label">排查数量</div>
          <div class="number">
            23
            <div class="upIcon iconfont">&#xe62e; 2</div>
            {{ warningChecked }}
            <div class="upIcon iconfont">&#xe62e;</div>
          </div>

          <img src="/images/manageCenter/total3.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">算法总数</div>
          <div class="label">整改数量</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
            {{ warningSolved }}
            <div class="downIcon iconfont">&#xe651;</div>
          </div>

          <img src="/images/manageCenter/total4.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">任务总数</div>
          <div class="label">处理率</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
            {{ warningManage }}
            <div class="downIcon iconfont">&#xe651;</div>
          </div>

          <img src="/images/manageCenter/total1.png" alt="" />
@@ -65,169 +141,81 @@
      </div>

      <div class="equipmentStatus">
        <div class="left">
          <div class="title">设备运行状态监测</div>
          <div class="control">
            <div
              class="label"
              @click="select('day', 'selectBar')"
              :class="{ active: selectBar === 'day' }"
            >
        <div class="bar-chart">
          <div class="title">预警数量趋势</div>
          <!-- <div class="control">
            <div class="label" @click="select('day', 'selectBar')" :class="{ active: selectBar === 'day' }">
              今日
            </div>
            <div
              class="label"
              @click="select('week', 'selectBar')"
              :class="{ active: selectBar === 'week' }"
            >
            <div class="label" @click="select('week', 'selectBar')" :class="{ active: selectBar === 'week' }">
              本周
            </div>
            <div
              class="label"
              @click="select('month', 'selectBar')"
              :class="{ active: selectBar === 'month' }"
            >
            <div class="label" @click="select('month', 'selectBar')" :class="{ active: selectBar === 'month' }">
              本月
            </div>
          </div>
          </div> -->
          <div id="bar"></div>
        </div>

        <div class="right">
          <div class="title">设备离线时长排行</div>
          <div class="timeList scroll">
            <div
              class="timeItem"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <div class="index">
                {{ index / 10 >= 1 ? index : `0${index}` }}.
              </div>
              <div class="name">
                {{ item.name }}
              </div>
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- <div class="performence">
        <div class="title">设备运行状态监测</div>
        <div class="control">
          <div
            class="label"
            @click="select('day', 'selectForm')"
            :class="{ active: selectForm === 'day' }"
          >
            今日
          </div>
          <div
            class="label"
            @click="select('week', 'selectForm')"
            :class="{ active: selectForm === 'week' }"
          >
            本周
          </div>
          <div
            class="label"
            @click="select('month', 'selectForm')"
            :class="{ active: selectForm === 'month' }"
          >
            本月
          </div>
        </div>
        <div class="table-area">
          <el-table
            id="table"
            ref="table"
            tooltip-effect="dark"
            :data="dataList"
            :fit="true"
            :stripe="true"
            class="gutter"
          >
            <el-table-column label="序号" class-name="index">
              <template slot-scope="scope">{{
                scope.$index + 1 + (page - 1) * size
              }}</template>
            </el-table-column>

            <el-table-column
              prop="name"
              label="设备名称"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="id"
              label="设备ID"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="mem"
              label="内存"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="gpu"
              label="算力"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="cpu"
              label="cpu"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="dist"
              label="硬盘"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <el-pagination
            @current-change="refrash"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25]"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
 -->
      <div class="map">
        <div class="title">设备地图分布</div>
        <div id="mapChart"></div>
      </div>

      <!--  <div class="hashRate">
      <div class="hashRate">
        <div class="left">
          <div class="title">算法预警数据占比:</div>
          <div class="title">预警数据占比:</div>
          <div class="info">
            <div class="item">
              <div class="label">今日平均算力:</div>
              <div class="data">45</div>
            <div class="equipmentInfo" style="margin-top:25px">
              <div class="equipmentCard">
                <div class="label">整改总量</div>
                <div class="number">
                  {{ solvedTotal }}
                  <!-- <div class="upIcon iconfont">&#xe62e; 2</div> -->
                </div>

                <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
              </div>
              <div class="equipmentCard">
                <div class="label">日均次数</div>
                <div class="number">
                  {{ solvedPre }}
                  <!-- <div class="upIcon iconfont">&#xe62e; 2</div> -->
                </div>

                <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
              </div>
            </div>
            <div class="item">
              <div class="label">设备总量:</div>
              <div class="data">92</div>

            <div class="table-area">
              <el-table
                id="table"
                ref="table"
                tooltip-effect="dark"
                :data="tableDataList"
                :fit="true"
                :stripe="true"
                :max-height="350"
                class="gutter"
              >
                <el-table-column prop="date" label="日期" show-overflow-tooltip></el-table-column>

                <el-table-column prop="count" align="center" label="整改数量" show-overflow-tooltip></el-table-column>
              </el-table>
              <el-pagination
                @current-change="refrash"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 15, 20, 25]"
                :total="solvedTotal"
                background
              ></el-pagination>
            </div>
          </div>
          <div id="scatterChart"></div>
        </div>
        <div class="right">
          <div class="title">算法预警数据占比</div>
          <div id="pieChart"></div>
        </div>
      </div> -->
      </div>
    </div>

    <!-- 页尾 -->
@@ -240,23 +228,45 @@
import Footer from "@/components/Footer"
import * as echarts from "echarts"
import "echarts/map/js/china.js"
import * as Base64 from "js-base64"

import { analysisReport } from "@/api/es"
import { getLocalCameraTree } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"

export default {
  components: {
    IndexHeader,
    Footer
  },
  created() {
    this.getInfo()
  },
  mounted() {
    //  this.initBar();
    this.initMap()
    //  this.initScatter();
    //   this.initPie();
  computed: {
    solvedPre() {
      if (this.solvedTotal == 0 || this.tableDataList.length == 0) {
        return 0
      }
      return parseInt(this.solvedTotal / this.tableDataList.length)
    },
    warningManage() {
      if (this.warningChecked == 0 || this.warningTotal == 0) {
        return 0
      }
      return parseInt(this.warningChecked / this.warningTotal) * 100 + "%"
    }
  },
  data() {
    return {
      lineChart: {},
      pieChart: {},
      searchTree: "",
      selectedOrg: "",
      selectNodes: [],
      searchTime: [
        this.$moment()
          .subtract(6, "days")
          .format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      alarmValues: "",
      userName: "",
      timeMsg: "",
      selectBar: "day",
@@ -287,60 +297,48 @@
        },

        {
          name: "告警管理",
          name: "推送管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/report",
          path: "/report",
          permission: "statisticMng"
        }
      ],
      timeList: [
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" }
      cameraTree: [],
      menuTree: [],
      levelOptions: [
        { id: 0, value: "", label: "全部" },
        { id: 1, value: "一级", label: "一级" },
        { id: 2, value: "二级", label: "二级" },
        { id: 3, value: "三级", label: "三级" },
        { id: 4, value: "四级", label: "四级" },
        { id: 5, value: "五级", label: "五级" }
      ],
      barOption: {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          containLabel: true
        },
        legend: {
          x: "right",
          y: "top",
          itemHeight: 12,
          itemWidth: 12,
          itemHeight: 2,
          itemWidth: 2,
          icon: "circle"
        },
        tooltip: {},
        dataset: {
          source: [
            ["status", "在线", "离线"],
            ["00:00", 750, 130],
            ["02:00", 650, 230],
            ["04:00", 750, 130],
            ["06:00", 550, 330],
            ["08:00", 750, 130],
            ["10:00", 700, 180],
            ["12:00", 850, 30],
            ["14:00", 750, 130],
            ["16:00", 850, 30],
            ["18:00", 980, 0],
            ["20:00", 750, 130],
            ["22:00", 750, 130]
          ]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#666"
          }
          },
          data: []
        },
        yAxis: {
          axisTick: {
@@ -366,7 +364,20 @@
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            type: "line",
            data: [],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0066FF"
                },
                {
                  offset: 1,
                  color: "rgba(0, 102, 255, 0.25)"
                }
              ])
            },
            color: {
              type: "linear",
              x: 0.02,
@@ -376,8 +387,8 @@
              colorStops: [
                {
                  offset: 0,
                  color: "#0066FF", // 0% 处的颜色
                  radius: ["50%", "80%"]
                  color: "#0066FF" // 0% 处的颜色
                  // radius: ["50%", "80%"]
                },
                {
                  offset: 1,
@@ -393,312 +404,18 @@
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          },
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0.02,
              y: 0.02,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF4B33", // 0% 处的颜色
                  radius: ["50%", "80%"]
                },
                {
                  offset: 1,
                  color: "rgba(255,75,51,0.25)" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          }
        ]
      },
      mapOption: {
        visualMap: {
          left: "right",
          min: 0,
          max: 10,
          inRange: {
            color: ["#FCFDFF", "#0065FF"]
          },
          itemWidth: 56,
          itemHeight: 200,
          text: ["10", "0"],
          calculable: false
        },
        geo: {
          //中国地图设置
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          }
        },
        tooltip: {
          //显示悬浮窗口
          trigger: "item", //使用这个函数返回悬浮内容
          backgroundColor: "#FFFFFF",
          textStyle: {
            color: "#0064FF",
            fontSize: "14"
          },
          formatter: function(params) {
            const msg = params.data.name + ":" + params.data.value
            return msg
          }
        },

        series: [
          {
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "南海诸岛",
                value: 0,
                eventTotal: 100,
                specialImportant: 10,
                import: 10,
                compare: 10,
                common: 40,
                specail: 20
              },
              {
                name: "北京",
                value: 0
              },
              {
                name: "天津",
                value: 0
              },
              {
                name: "上海",
                value: 0
              },
              {
                name: "重庆",
                value: 0
              },
              {
                name: "河北",
                value: 0
              },
              {
                name: "河南",
                value: 0
              },
              {
                name: "云南",
                value: 0
              },
              {
                name: "辽宁",
                value: 0
              },
              {
                name: "黑龙江",
                value: 0
              },
              {
                name: "湖南",
                value: 0
              },
              {
                name: "安徽",
                value: 0
              },
              {
                name: "山东",
                value: 4
              },
              {
                name: "新疆",
                value: 0
              },
              {
                name: "江苏",
                value: 0
              },
              {
                name: "浙江",
                value: 0
              },
              {
                name: "江西",
                value: 0
              },
              {
                name: "湖北",
                value: 0
              },
              {
                name: "广西",
                value: 0
              },
              {
                name: "甘肃",
                value: 0
              },
              {
                name: "山西",
                value: 0
              },
              {
                name: "内蒙古",
                value: 0
              },
              {
                name: "陕西",
                value: 0
              },
              {
                name: "吉林",
                value: 0
              },
              {
                name: "福建",
                value: 0
              },
              {
                name: "贵州",
                value: 0
              },
              {
                name: "广东",
                value: 0
              },
              {
                name: "青海",
                value: 0
              },
              {
                name: "西藏",
                value: 0
              },
              {
                name: "四川",
                value: 0
              },
              {
                name: "宁夏",
                value: 0
              },
              {
                name: "海南",
                value: 0
              },
              {
                name: "台湾",
                value: 0
              },
              {
                name: "香港",
                value: 0
              },
              {
                name: "澳门",
                value: 0
              }
            ]
          }
        ]
      },
      scatterOption: {
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true //隐藏或显示
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true //隐藏或显示
          }
        },

        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            color: "rgba(0, 101, 255, 0.5)",
            type: "scatter"
          }
        ]
      },
      pieOption: {
        legend: {
          top: "bottom"
        },
        color: [
          "rgb(54, 60, 231)",
          "rgb(54, 178, 74)",
          "rgb(255, 178, 36)",
          "rgb(0, 190, 231)",
          "rgb(240, 190, 231)",
          "rgb(255, 124, 31)",
          "rgb(165, 96, 255)"
        ],
@@ -706,95 +423,213 @@
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [35, 120],
            radius: [20, 160],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 22.45, name: "离岗" },
              { value: 20.2, name: "人脸识别" },
              { value: 17.96, name: "车辆识别" },
              { value: 15.71, name: "睡岗" },
              { value: 12.86, name: "安全帽检测" },
              { value: 10.82, name: "个体静止" }
            ]
            label: {
              show: false
            },
            data: []
          }
        ]
      },
      dataList: [
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        }
      ],
      tableDataList: [],
      page: 1,
      size: 5,
      total: 30
      solvedTotal: 0,
      warningTotal: 0,
      warningChecked: 0,
      warningSolved: 0
    }
  },
  created() {
    this.getInfo()
  },
  mounted() {
    this.searchHandler()
    this.initBar()
    this.initPie()
    this.getCameras()
  },
  methods: {
    async getCameras() {
      let clusterId = ""
      let clusterReq = await getClusterDevList()
      if (clusterReq && clusterReq.success) {
        if (clusterReq.data.clusterList.length > 0) {
          clusterId = clusterReq.data.clusterList[0].cluster_id
        }
      }
      let camereReq = await getLocalCameraTree({ clusterId: clusterId })
      if (camereReq && camereReq.success) {
        this.cameraTree = camereReq.data.treeMenu
        let tmpTree = JSON.parse(JSON.stringify(camereReq.data.treeMenu))
        for (let i = 0; i < tmpTree.length; i++) this.clearNode(tmpTree[i])
        this.menuTree = tmpTree
      }
    },
    clearNode(tree) {
      if (tree.children) {
        tree.children = tree.children.filter((item) => {
          return item.type == "MENU"
        })
      }
      if (tree.children && tree.children.length > 0) {
        for (let i = 0; i < tree.children.length; i++) this.clearNode(tree.children[i])
      } else {
        delete tree.children
      }
    },
    collSelectedNodes() {
      let selectedNodeId = this.selectedOrg
      let selectedNode = {}
      let orgNodeIds = []

      if (this.selectedOrg == "") {
        return orgNodeIds
      }

      function findNode(node) {
        if (node.id == selectedNodeId) {
          selectedNode = node

          return
        }

        if (node.children) {
          node.children.forEach((n) => {
            findNode(n)
          })
        }
      }

      function collNode(node) {
        if (node.type != "MENU") {
          orgNodeIds.push(node.id)
          return
        }

        if (node.children) {
          node.children.forEach((n) => {
            collNode(n)
          })
        }
      }

      this.cameraTree.forEach((n) => {
        findNode(n)
      })

      collNode(selectedNode)

      return orgNodeIds
    },
    searchHandler() {
      let query = {
        treeNodes: this.collSelectedNodes(),
        searchTime: this.format(this.searchTime),
        alarmLevel: this.alarmValues
      }

      analysisReport(query).then((rsp) => {
        if (rsp && rsp.success) {
          this.decodeWarningRate(rsp.data.warningRate)
          this.decodeWarningChartRate(rsp.data.warningChartRate)
          this.decodeWarningStatics(rsp.data.warningTable)
          this.decodeWarningTable(rsp.data.warningStatics)
        }
      })
    },
    decodeWarningTable(b64data) {
      this.solvedTotal = 0
      this.tableDataList = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          decodeResult = []
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.solvedTotal = this.solvedTotal + element.doc_count
              this.tableDataList.push({ date: element.key_as_string, count: element.doc_count })
            })
          }
        }
      }
    },
    // 折线图
    decodeWarningStatics(b64data) {
      this.lineChart.clear()
      this.barOption.xAxis.data = []
      this.barOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.barOption.xAxis.data.push(element.key_as_string)
              this.barOption.series[0].data.push(element.doc_count)
            })
          }
        }
      }

      this.lineChart.setOption(this.barOption)
    },
    // 饼图
    decodeWarningChartRate(b64data) {
      this.pieChart.clear()
      this.pieOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.pieOption.series[0].data.push({ value: element.doc_count, name: element.key })
            })
          }
        }
      }
      this.pieChart.setOption(this.pieOption)
    },
    // "warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}
    //key 1=误报数据,2=已整改,3=未整改,4=已排查 doc_count=数量 total=总量
    decodeWarningRate(b64data) {
      if (b64data) {
        this.warningTotal = 0
        this.warningSolved = 0
        this.warningChecked = 0

        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult && decodeResult.total > 0) {
            this.warningTotal = decodeResult.total
            decodeResult.buckets.forEach((element) => {
              switch (element.key) {
                case 2:
                  this.warningSolved += element.doc_count
                  break
                case 4:
                  this.warningChecked += element.doc_count
                  break
                default:
                  break
              }
            })
          }
          // console.log("WarningRate:", decodeResult)
        }
      }
    },
    handleTreeChange(value) {
      this.selectedOrg = value[value.length - 1]
    },
    getInfo() {
      if (sessionStorage.getItem("userInfo")) {
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
@@ -841,23 +676,14 @@
    },
    initBar() {
      let bartDom = document.getElementById("bar")
      let myChart = echarts.init(bartDom)
      myChart.setOption(this.barOption)
      this.lineChart = echarts.init(bartDom)
      this.lineChart.setOption(this.barOption)
    },
    initMap() {
      let mapDom = document.getElementById("mapChart")
      let myChart = echarts.init(mapDom)
      myChart.setOption(this.mapOption)
    },
    initScatter() {
      let scatterDom = document.getElementById("scatterChart")
      let myChart = echarts.init(scatterDom)
      myChart.setOption(this.scatterOption)
    },

    initPie() {
      let pieDom = document.getElementById("pieChart")
      let myChart = echarts.init(pieDom)
      myChart.setOption(this.pieOption)
      this.pieChart = echarts.init(pieDom)
      this.pieChart.setOption(this.pieOption)
    },
    jump(route) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
@@ -879,7 +705,16 @@
      }
    },
    refrash() {},
    handleSizeChange() {}
    handleSizeChange() {},
    format(array) {
      if (!array || array.length === 0) {
        return []
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
      ]
    }
  }
}
</script>
@@ -890,6 +725,15 @@
  min-width: 1346px;
  background-color: rgb(243, 245, 248);

  .p-statis {
    display: flex;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    b:hover {
      color: #2249b4;
    }
  }
  .title {
    margin-bottom: 20px;
    box-sizing: border-box;
@@ -1056,12 +900,12 @@
    margin: 24px 0;
    height: 466px;

    .left {
    .bar-chart {
      box-sizing: border-box;
      position: relative;
      padding: 20px;
      background-color: #fff;
      width: 845px;
      width: 100%;
      height: 466px;

      #bar {
@@ -1075,38 +919,6 @@
      width: 411px;
      height: 466px;
      background: #ffffff;

      .timeList {
        height: 392px;
        overflow-y: auto;

        .timeItem {
          margin-bottom: 24px;
          display: flex;
          align-items: center;
          height: 32px;
          border-radius: 16px;
          background: rgb(249, 251, 253);
          font-size: 14px;

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            background: #eff4f9;
          }

          .index {
            margin: 0 35px 0 20px;
            font-size: 16px;
            color: #0064ff;
          }

          .time {
            margin-left: 50px;
            color: #999;
          }
        }
      }
    }
  }

@@ -1189,6 +1001,12 @@
      #scatterChart {
        height: 500px;
      }

      .table-area {
        margin-top: 10px;
        margin-bottom: 5px;
        width: 700px;
      }
    }

    .right {

 src/views/search/Searching.vue

@@ -2,28 +2,17 @@
  <div class="searching-box" @click="showDownBox = false">
    <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"
@@ -134,27 +123,13 @@
              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>

          <div class="btnArea">
            <div class="button light" @click.stop="showDownBox = !showDownBox">
              <span class="iconfont">&#xe643;</span>
              导出数据
            </div>

            <div class="downBox" v-if="showDownBox">
              <div class="downItem">导出全部数据</div>
              <div class="downItem">导出筛选数据</div>
            </div>
          </div>

          <p class="p-clear">
            <b class="clear-searching" @click="clearSearch">重置</b>
          </p>
          <el-tooltip
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="配置存储路径"
@@ -163,7 +138,25 @@
            <span @click="showSetBox = true" class="iconfont setIcon"
              >&#xe652;</span
            >
          </el-tooltip>
          </el-tooltip> -->
          <p class="p-clear">
            <download-excel
              class="export-excel-wrapper"
              :data="VideoPhotoData.cards"
              :fields="json_fields"
              :name="'视频分析报警统计' + searchTimeFormated + '.xls'"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
              <!-- <div class="btnArea">
                <div class="button light">
                  <span class="iconfont">&#xe643;</span>
                  导出数据
                </div>
              </div> -->
              <b class="clear-searching"> <span class="iconfont">&#xe643;</span> 导出数据</b>
            </download-excel>
          </p>
        </div>
        <div ref="mid" style="height: calc(100% - 50px)">
          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
@@ -173,24 +166,16 @@
            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"
@@ -241,21 +226,11 @@
              <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>
@@ -265,21 +240,11 @@
              <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>
@@ -296,17 +261,17 @@
</template>

<script>
import Card from "./components/Card";
import UploadImg from "./components/UploadImg";
import bus from "@/main";
import { getUrlKey } from "@/api/utils.ts";
import SetBox from "@/views/search/components/SetBox";
import Card from "./components/Card"
import UploadImg from "./components/UploadImg"
import bus from "@/main"
import { getUrlKey } from "@/api/utils.ts"
import SetBox from "@/views/search/components/SetBox"
export default {
  name: "RightSide",
  components: {
    Card,
    UploadImg,
    SetBox,
    SetBox
  },
  data() {
    return {
@@ -322,115 +287,150 @@
      alarmValues: [],
      taskValues: [],
      showDownBox: false,
      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,
      showSetBox: false,
    };
      json_fields: {
        // 部门: "",
        // 告警标记: "",
        // 整改描述: "",
        摄像机ID: "activeObject.cameraId",
        摄像机名称: "activeObject.cameraName",
        摄像机地址: "activeObject.cameraAddr",
        场景ID: "activeObject.taskId",
        场景名称: "activeObject.taskName",
        事件等级: {
          field: "activeObject.alarmRules",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].alarmLevel : ""
          }
        },
        设备ID: "activeObject.analyServerId",
        设备IP: "activeObject.analyServerIp",
        设备名称: "activeObject.analyServerName",
        抓拍时间: "activeObject.picDate",
        更新时间: "activeObject.likeDate",
        抓拍全景图地址: "activeObject.picMaxUrl",
        录像地址: "activeObject.videoUrl",
        检测区域id: {
          field: "activeObject.targetInfo",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].areaId : ""
          }
        },
        检测区域名称: {
          field: "activeObject.targetInfo",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].areaName : ""
          }
        }
      }
    }
  },
  computed: {
    searchTimeFormated() {
      return this.format(this.searchTime);
    },
      return this.format(this.searchTime)
    }
  },
  created() {
    this.VideoPhotoData.activeCard = "";
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.VideoPhotoData.activeCard = ""
    this.TreeDataPool.readonly = true
    this.TreeDataPool.gbReadonly = true
    this.TreeDataPool.multiple = true
    this.TreeDataPool.clean()
  },
  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 &&
        this.TreeDataPool.localVedioList.filter((i) => {
          return i.progress == 100;
        });
      this.TreeDataPool.localVedioList = list;
    });
    window.addEventListener("resize", this.getHeight);
    this.getCenter();
    this.getHeight();
    this.blackAngWhite();
          return i.progress == 100
        })
      this.TreeDataPool.localVedioList = list
    })
    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) {
      if (n && n == "camera") {
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.VideoPhotoData.treeNodes = []
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      }
    },
    "TreeDataPool.showTreeBox"() {
      this.getHeight();
      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) {
@@ -440,206 +440,181 @@
    //   }
    // },
    "TreeDataPool.selectedNodes": {
      handler: function (newVal, oldVal) {
      handler: function(newVal, oldVal) {
        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) {
        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 () {
      let card =
        this.$refs.scrollContain.getElementsByClassName("my-active-card");
      console.log("------");
      console.log(card);
    "VideoPhotoData.activeCard": function() {
      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;
        console.log(2);
        console.log(cardHeight);
        console.log(cardTop);
        console.log(scrollTop);
        console.log(divHeight);
        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 () {
      this.blackAngWhite();
    "VideoPhotoData.selectBlacks": function() {
      this.blackAngWhite()
    },
    "VideoPhotoData.selectWhites": function () {
      this.blackAngWhite();
    "VideoPhotoData.selectWhites": function() {
      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 &&
        this.VideoPhotoData.selectBlacks.length > 0
      ) {
      if (this.VideoPhotoData.selectBlacks && 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 &&
        this.VideoPhotoData.selectBlacks.length == 0
      ) {
      if (this.VideoPhotoData.selectBlacks && 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 &&
        this.VideoPhotoData.selectWhites.length > 0
      ) {
      if (this.VideoPhotoData.selectWhites && 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 &&
        this.VideoPhotoData.selectWhites.length == 0
      ) {
      if (this.VideoPhotoData.selectWhites && 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.datalist = this.VideoPhotoData.cards
      let obj = this.CardList.datalist[index]
      /*  try {
        this.CardList.details = Array.from(
          new Set([...this.CardList.details, ...[obj]])
@@ -647,27 +622,26 @@
      } catch (error) {
        console.log(error);
      } */
      this.CardList.details = [];
      this.CardList.details.push(obj);
      this.CardList.details = []
      this.CardList.details.push(obj)
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id;
      console.log(this.VideoPhotoData.activeCard);
      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) {

      // }
@@ -675,186 +649,164 @@
    },
    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) {
      if (!array || array.length === 0) {
        return [];
        return []
      }
      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() {
      if (!this.searchTime) {
        this.searchTime = [];
        this.searchTime = []
      }
      // let obj = document.getElementById('searchMid');
      // let load = this.$loading({
      //   target:obj,
      // })
      // load.close();
      // this.AuthData.loading = true
      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 = [];
      console.log("1");
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []

      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr);
      });
      this.VideoPhotoData.queryTasks = tasks;
      console.log("2");
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks

      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
      console.log("3");
      console.log(this.searchTime);
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()

      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      console.log(this.VideoPhotoData.searchTime);
      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.page = this.currentPage;
        // this.VideoPhotoData.querySearchList();
        console.log("4");
        this.VideoPhotoData.uploadDiaplay = false

        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      } else {
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.findPersonByPage();
        console.log("5");

        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
      }
      console.log("cards", this.VideoPhotoData.cards)
    },
    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.tagValues = []
      this.taskValues = []
      this.alarmValues = []
      this.VideoPhotoData.queryTabs = []
      this.VideoPhotoData.queryTasks = []
      this.VideoPhotoData.queryAlarmlevel = []
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.VideoPhotoData.inputValue = ""

      console.log(this.searchTime);

      this.searchTime = this.getDateInit();
      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" >
<style lang="scss">
.searching-box {
  width: 100%;
  height: 100% !important;
@@ -1100,8 +1052,8 @@
    width: 100px;
    z-index: 10;
    padding: 10px;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05),
      0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
      0px 2px 4px -1px rgba(0, 0, 0, 0.12);

    .downItem {
      text-align: center;