From 1e4a3f702623a46bcd53dbc96e235d51e0edb155 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 05 八月 2022 04:13:02 +0800 Subject: [PATCH] 管理中心添加分析 --- src/api/es.ts | 70 + src/views/manageCenter/index.vue | 1064 +++++++++++--------------- src/package.json | 5 src/views/login/components/loginForm.vue | 215 ++--- src/views/search/Searching.vue | 654 +++++++--------- src/Pool/VideoPhotoData.ts | 247 +++--- src/main.ts | 57 7 files changed, 1,065 insertions(+), 1,247 deletions(-) diff --git a/src/Pool/VideoPhotoData.ts b/src/Pool/VideoPhotoData.ts index 08ad20c..f6f7cab 100644 --- a/src/Pool/VideoPhotoData.ts +++ b/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) // 鍙厑璁告瘡涓猚ard娓叉煋涓�寮犲浘鐗� // 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" }) diff --git a/src/api/es.ts b/src/api/es.ts index d087a4d..f80f325 100644 --- a/src/api/es.ts +++ b/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; //鎽勫儚鏈篿d闆嗗悎 + 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"閫夋嫨鍏ㄩ儴锛堥〉闈腑閫夋嫨鍏ㄩ儴锛夌洿鎺ヤ紶绌烘垨涓嶄紶锛屾棩鏈熶负鏁扮粍锛岀涓�涓负寮�濮嬫椂闂达紝绗簩涓负缁撴潫鏃堕棿銆� + +杈撳嚭涓篵ase64 + +{ + "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 }) diff --git a/src/main.ts b/src/main.ts index 5f1a66d..886fb18 100644 --- a/src/main.ts +++ b/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") diff --git a/src/package.json b/src/package.json new file mode 100644 index 0000000..7a80288 --- /dev/null +++ b/src/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "js-base64": "^3.7.2" + } +} diff --git a/src/views/login/components/loginForm.vue b/src/views/login/components/loginForm.vue index ca53a63..a4b4e5a 100644 --- a/src/views/login/components/loginForm.vue +++ b/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"></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"></span>鎵嬫満鍙锋湭娉ㄥ唽,鎮ㄥ彲浠�<span class="colorBlue toRegister">鍘绘敞鍐�</span>'; + '<span class="iconfont error"></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"></span>楠岃瘉鐮佷笉姝g‘锛岃閲嶆柊杈撳叆'; + '<span class="iconfont error"></span>楠岃瘉鐮佷笉姝g‘锛岃閲嶆柊杈撳叆' } 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"></span>鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎'; + '<span class="iconfont error"></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> \ No newline at end of file +</style> diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue index b629803..61c89a1 100644 --- a/src/views/manageCenter/index.vue +++ b/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"> 2</div> + {{ warningTotal }} + <div class="upIcon iconfont"></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"> 2</div> + {{ warningChecked }} + <div class="upIcon iconfont"></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"> 2</div> + {{ warningSolved }} + <div class="downIcon iconfont"></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"> 2</div> + {{ warningManage }} + <div class="downIcon iconfont"></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"> 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"> 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 { diff --git a/src/views/search/Searching.vue b/src/views/search/Searching.vue index 52a08f4..bdf982c 100644 --- a/src/views/search/Searching.vue +++ b/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"></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" ></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"></span> + 瀵煎嚭鏁版嵁 + </div> + </div> --> + <b class="clear-searching"> <span class="iconfont"></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: { + // 閮ㄩ棬: "", + // 鍛婅鏍囪: "", + // 鏁存敼鎻忚堪: "", + 鎽勫儚鏈篒D: "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", + 妫�娴嬪尯鍩焛d: { + 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; -- Gitblit v1.8.0