From 9b6707a857d91aac00ca840661eb4998eabd7e4f Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期三, 21 十月 2020 17:40:36 +0800 Subject: [PATCH] 调整增加底库form的样式, 国标刷新按钮增加loading --- src/components/LeftNav.vue | 73 ++++++++++++++++++------------------ src/pages/library/components/addBase.vue | 31 ++++++++------- 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index 5322b01..94dbe0d 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -126,7 +126,8 @@ <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly"> <el-tooltip content="鍒锋柊" placement="top" popper-class="atooltip"> <button @click="refreshGB"> - <i class="el-icon-refresh" style="font-size:16px"></i> + <i v-if="loadingGBTree" class="el-icon-loading" style="font-size:16px"></i> + <i v-else class="el-icon-refresh" style="font-size:16px"></i> </button> </el-tooltip> </div> @@ -334,17 +335,17 @@ }, computed: { - showTab () { + showTab() { return true; }, - showCam () { + showCam() { return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)); }, - showCluster () { + showCluster() { return this.appName === "Cluster"; }, // 鏁版嵁鏍堥厤缃繀椤绘樉绀恒�� 妫�绱㈤�氳繃鏉冮檺鎺у埗鏄剧ず, 鏈畨瑁呮暟鎹爤涔熶笉鏄剧ず - showDataStack () { + showDataStack() { if (this.appName === "DataStack") { return true; } @@ -364,10 +365,10 @@ return false; }, - showLock () { + showLock() { return this.edit; }, - openeds () { + openeds() { let arry = []; for (let i = 0; i < this.TreeDataPool.openeds.length; i++) { if (this.TreeDataPool.openeds[i]) { @@ -378,7 +379,7 @@ } return arry; }, - isAdmin () { + isAdmin() { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" @@ -389,7 +390,7 @@ return false; } }, - data () { + data() { return { cameraAuth: "videoMonitor:camera", dataStack: "videoMonitor:dataStack", @@ -444,7 +445,7 @@ menuLoading: false }; }, - created () { + created() { console.log(this.appName) console.log(this.showCam) if (this.showCam) { @@ -462,44 +463,44 @@ } }, methods: { - searchAreaData () { + searchAreaData() { this.TreeDataPool.fetchTreeData(); }, - searchDataStack () { + searchDataStack() { this.DataStackPool.fetchFiles(); }, - searchClusterData () { + searchClusterData() { this.TreeDataPool.fetchClusterTree(); }, - lockSwitch () { + lockSwitch() { this.TreeDataPool.readonly = !this.TreeDataPool.readonly; }, - gbLockSwitch () { + gbLockSwitch() { this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly; }, - dataStackLockSwitch () { + dataStackLockSwitch() { this.DataStackPool.readonly = !this.DataStackPool.readonly; }, - closeTree () { + closeTree() { this.TreeDataPool.showTreeBox = false; bus.$emit('refreshCompareImg') }, - addNode (event) { + addNode(event) { this.$refs.tree.addNode(event, { id: 0 }); }, - addCamera (node) { + addCamera(node) { bus.$emit("addCameraOnTree", node); }, - addDir (node) { + addDir(node) { bus.$emit("addDirOnTree", node); }, - menuOpen (index) { + menuOpen(index) { this.TreeDataPool.openeds[index] = true; }, - menuClose (index) { + menuClose(index) { this.TreeDataPool.openeds[index] = false; }, - refreshGB () { + refreshGB() { // 闃叉閲嶅鍒锋柊 if (this.loadingGBTree) { return; @@ -513,7 +514,7 @@ this.loadingGBTree = false; }, 1000 * 60); }, - querySearchAsync (type) { + querySearchAsync(type) { clearTimeout(this.timeout); this.timeout = setTimeout(() => { if (type === "camera") { @@ -524,7 +525,7 @@ } }, 500); }, - handleClick (event) { + handleClick(event) { if (event.name == 'dataStack') { this.DataStackPool.fetchFiles(); this.DataStackPool.clean(); @@ -533,7 +534,7 @@ this.TreeDataPool.treeActiveName = event.name console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName) }, - async changeEnable () { + async changeEnable() { if (this.PollData.localVideo === 0) { this.$notify({ title: "澶辫触", @@ -549,13 +550,13 @@ console.log(res, '鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�') } }, - getCheckedFiles () { + getCheckedFiles() { let list1 = this.TreeDataPool.localVedioList.filter(i => { return i.checkStatus }) return list1 }, - async stopVedio (status) { + async stopVedio(status) { // let list1 = this.getCheckedFiles(); if (this.TreeDataPool.checkedLocalVedio.length == 0) { this.$notify({ @@ -578,7 +579,7 @@ console.log(res, '寮�鍚殏鍋滃弬鏁�') } }, - async deleteLocalFiles () { + async deleteLocalFiles() { let list1 = this.getCheckedFiles(); console.log(list1, '宸插嬀閫夌殑瑙嗛') if (list1.length == 0) { @@ -600,16 +601,16 @@ } }, - refrash (current, pageSize) { + refrash(current, pageSize) { this.TreeDataPool.localCurrentPage = current; }, - importCameras (area) { + importCameras(area) { this.importAreaId = area this.$refs["import-btn"].click() }, - async uploadFile (params) { + async uploadFile(params) { const _file = params.file; const fileReader = new FileReader(); fileReader.onload = (ev) => { @@ -667,14 +668,14 @@ }; fileReader.readAsBinaryString(_file); }, - exceed () { + exceed() { this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢"); }, //鍒犻櫎鏂囦欢 - remove () { + remove() { }, - newCamera () { + newCamera() { return { latitude: 0, rtsp: "", @@ -950,7 +951,7 @@ color: #606266; } } -.flex-box{ +.flex-box { display: flex; } </style> \ No newline at end of file diff --git a/src/pages/library/components/addBase.vue b/src/pages/library/components/addBase.vue index 1902648..0cff106 100644 --- a/src/pages/library/components/addBase.vue +++ b/src/pages/library/components/addBase.vue @@ -5,7 +5,7 @@ :model="form" :rules="rules" label-width="150px" - class="mt50" + class="add-base-form" label-position="left" > <el-row> @@ -75,7 +75,7 @@ required prop="startTime" > - <el-col :span="11" class=""> + <el-col :span="11" class> <el-date-picker size="small" type="datetime" @@ -121,7 +121,7 @@ </el-radio-group> </el-form-item> </el-col> - </el-row> --> + </el-row>--> <el-row> <el-col :span="6" :offset="15"> <el-form-item style="margin-top:50px;text-align:right;" label-width="0px"> @@ -193,7 +193,7 @@ baseObject: function (newVal, oldVal) { this.foreverChecked = false this.form = newVal - console.log(this.form,'baseObject') + console.log(this.form, 'baseObject') if (!newVal.endTime || newVal.endTime === undefined || newVal.endTime === null) { this.form.isForever = '1' this.foreverChecked = true @@ -249,7 +249,7 @@ tableName: this.form.tableName, startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss'), tableType: this.form.tableType, - isForever: this.foreverChecked ? '1':'0', + isForever: this.foreverChecked ? '1' : '0', id: this.form.id, endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD HH:mm:ss') : '', bwType: this.form.bwType, @@ -283,7 +283,7 @@ tableName: this.form.tableName, startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD 00:00:00'), tableType: this.form.tableType, - isForever: this.foreverChecked ? '1':'0', + isForever: this.foreverChecked ? '1' : '0', id: this.form.id, endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD 23:59:59') : '', bwType: this.form.bwType, @@ -309,7 +309,7 @@ }) } }, - onCancle(){ + onCancle() { this.$emit('closeAdd') }, forever(value) { @@ -319,14 +319,14 @@ }, init() { console.log('娣诲姞搴曞簱琛ㄥ崟鏀跺埌鐨勬暟鎹�', this.baseObject, this.type) - if(Object.keys(this.baseObject).length > 3){ + if (Object.keys(this.baseObject).length > 3) { this.form = this.baseObject if (!this.form.endTime) { this.foreverChecked = true } else { this.foreverChecked = false } - }else{ + } else { this.$refs.baseForm.resetFields() } }, @@ -386,6 +386,9 @@ } </script> <style lang="scss"> +.add-base-form { + margin-top: 50px; +} .el-radio__inner { border: 1px solid #dcdfe6; border-radius: 100%; @@ -447,15 +450,15 @@ line-height: 40px; outline: none; padding: 0 0 0 15px; - -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); - transition: border-color .2s cubic-bezier(.645,.045,.355,1); + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; } .el-input--prefix .el-input__inner { padding-left: 22px; } .el-input--suffix .el-input__inner { - padding-right: 0; + padding-right: 0; } .el-input__prefix { position: absolute; @@ -463,7 +466,7 @@ left: 0px; top: 0; text-align: center; - color: #C0C4CC; + color: #c0c4cc; -webkit-transition: all 0.3s; transition: all 0.3s; } @@ -473,7 +476,7 @@ right: -2px; top: 0; text-align: center; - color: #C0C4CC; + color: #c0c4cc; -webkit-transition: all 0.3s; transition: all 0.3s; pointer-events: none; -- Gitblit v1.8.0