From ca3145442e5b65e9daefb5e3bce09e220eead265 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期一, 26 九月 2022 18:47:56 +0800
Subject: [PATCH] 摄像机管理 时间段 过滤
---
src/views/equipmentManagement/equipmentList/components/AddBox.vue | 261 ++++++++++++++++++++-------------------------------
1 files changed, 103 insertions(+), 158 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/AddBox.vue b/src/views/equipmentManagement/equipmentList/components/AddBox.vue
index 24e66fe..dc7f034 100644
--- a/src/views/equipmentManagement/equipmentList/components/AddBox.vue
+++ b/src/views/equipmentManagement/equipmentList/components/AddBox.vue
@@ -5,10 +5,7 @@
<div class="close iconfont" @click="close()"></div>
<div class="search">
- <el-input
- v-model="searchContent"
- placeholder="璇疯緭鍏ラ泦缇P/闆嗙兢鍚嶇О/璁惧IP/璁惧鍚嶇О"
- ></el-input>
+ <el-input v-model="searchContent" placeholder="璇疯緭鍏ラ泦缇P/闆嗙兢鍚嶇О/璁惧IP/璁惧鍚嶇О"></el-input>
<div class="button" @click="searchCluster">鎼滅储闆嗙兢</div>
<div class="button" @click="searchDevice">鎼滅储璁惧</div>
</div>
@@ -16,118 +13,58 @@
<div class="clusterList">
<div class="tableList" v-if="listType == 'cluster'">
<div class="header">
- <div
- class="label"
- v-for="(item, index) in clusterHeader"
- :key="index"
- >
+ <div class="label" v-for="(item, index) in clusterHeader" :key="index">
{{ item }}
</div>
</div>
<div class="body" v-if="listType == 'cluster'">
- <div class="row" v-for="(item, index) in clusterList" :key="index">
- <div class="content">
- <div class="rowItem index">{{ index + 1 }}</div>
- <div class="rowItem name">{{ item.clusterName }}</div>
- <div class="rowItem ip">{{ item.virtualIp }}</div>
- <div class="rowItem status">
- <div v-if="!item.canAdd" class="status green">宸叉坊鍔�</div>
- <div v-else class="status">鏈坊鍔�</div>
+ <template v-if="clusterList.length > 0">
+ <div class="row" v-for="(item, index) in clusterList" :key="index">
+ <div class="content">
+ <div class="rowItem index">{{ index + 1 }}</div>
+ <div class="rowItem name">{{ item.clusterName }}</div>
+ <div class="rowItem ip">{{ item.virtualIp }}</div>
+ <div class="rowItem status">
+ <div v-if="!item.canAdd" class="status green">宸叉坊鍔�</div>
+ <div v-else class="status">鏈坊鍔�</div>
+ </div>
+ <div class="rowItem options">
+ <!-- 娣诲姞 -->
+ <span v-if="!item.canAdd">-</span>
+ <template v-else>
+ <span class="iconfont option" @click="showBox('cluster', item.clusterId)"></span>
+ <!-- 闆嗙兢璇︽儏 -->
+ <span class="iconfont option" @click="showChildrenLIst(index, item.clusterId)"></span>
+ </template>
+ </div>
</div>
- <div class="rowItem options">
- <!-- 娣诲姞 -->
- <span v-if="!item.canAdd">-</span>
- <template v-else>
- <span
- class="iconfont option"
- @click="showBox('cluster', item.clusterId)"
- ></span
- >
- <!-- 闆嗙兢璇︽儏 -->
- <span
- class="iconfont option"
- @click="showChildrenLIst(index, item.clusterId)"
- ></span
- >
- </template>
+
+ <div class="overList" :class="{ isShow: showClusterChild == index }">
+ <el-table :data="overList" :fit="true" header-row-class-name="overList-head">
+ <el-table-column label="搴忓彿" type="index" width="146" class-name="index "> </el-table-column>
+ <el-table-column prop="dev_id" label="璁惧ID"></el-table-column>
+
+ <el-table-column prop="dev_ip" label="璁惧IP" width="146"></el-table-column>
+
+ <el-table-column prop="dev_name" label="璁惧鍚嶇О" width="240"></el-table-column>
+ </el-table>
+
+ <div class="iconfont" @click="showClusterChild = null">
+ 
+ </div>
</div>
</div>
-
- <div
- class="overList"
- :class="{ isShow: showClusterChild == index }"
- >
- <el-table
- :data="overList"
- :fit="true"
- header-row-class-name="overList-head"
- >
- <el-table-column
- label="搴忓彿"
- type="index"
- width="146"
- class-name="index "
- >
- </el-table-column>
- <el-table-column
- prop="dev_id"
- label="璁惧ID"
- width="146"
- ></el-table-column>
-
- <el-table-column
- prop="dev_ip"
- label="璁惧IP"
- width="146"
- ></el-table-column>
-
- <el-table-column
- prop="dev_name"
- label="璁惧鍚嶇О"
- width="240"
- ></el-table-column>
- </el-table>
-
- <div class="iconfont" @click="showClusterChild = null">
- 
- </div>
- </div>
- </div>
+ </template>
+ <div class="empty" v-else>鏆傛棤鏁版嵁</div>
</div>
</div>
- <el-table
- :data="equipmentList"
- :fit="true"
- v-if="listType == 'equipment'"
- >
- <el-table-column
- label="搴忓彿"
- type="index"
- width="72"
- class-name="index"
- >
- </el-table-column>
- <el-table-column
- prop="devId"
- label="璁惧ID"
- width="107"
- ></el-table-column>
- <el-table-column
- prop="devName"
- label="璁惧鍚嶇О"
- width="107"
- ></el-table-column>
- <el-table-column
- prop="devIp"
- label="璁惧IP"
- width="107"
- ></el-table-column>
- <el-table-column
- prop="clusterName"
- label="鎵�灞為泦缇�"
- width="107"
- ></el-table-column>
+ <el-table :data="equipmentList" :fit="true" v-if="listType == 'equipment'">
+ <el-table-column label="搴忓彿" type="index" width="72" class-name="index"> </el-table-column>
+ <el-table-column prop="devId" label="璁惧ID"></el-table-column>
+ <el-table-column prop="devName" label="璁惧鍚嶇О" width="107"></el-table-column>
+ <el-table-column prop="devIp" label="璁惧IP" width="107"></el-table-column>
+ <el-table-column prop="clusterName" label="鎵�灞為泦缇�" width="107"></el-table-column>
<el-table-column label="鐘舵��" width="107">
<template slot-scope="scope">
<div v-if="!scope.row.canAdd" class="status green">宸叉坊鍔�</div>
@@ -140,10 +77,7 @@
<div class="options" v-if="scope">
<!-- 娣诲姞 -->
<span v-if="!scope.row.canAdd">-</span>
- <span
- v-else
- class="iconfont option"
- @click="showBox('dev', scope.row.devId, scope.row.clusterId)"
+ <span v-else class="iconfont option" @click="showBox('dev', scope.row.devId, scope.row.clusterId)"
></span
>
</div>
@@ -156,8 +90,7 @@
<div class="title">鐢宠娣诲姞璁惧</div>
<div class="des">
<span class="iconfont"></span>
- 濡傝澶囧凡鍔犲叆闆嗙兢锛屾坊鍔犵鐞嗗悗闆嗙兢涓嬫墍鏈夎澶囧皢鍦ㄨ澶囩鐞�
- 椤甸潰鏄剧ず锛屽苟鏀寔淇℃伅鏌ョ湅鍙婄鐞嗐��
+ 濡傝澶囧凡鍔犲叆闆嗙兢锛屾坊鍔犵鐞嗗悗闆嗙兢涓嬫墍鏈夎澶囧皢鍦ㄨ澶囩鐞� 椤甸潰鏄剧ず锛屽苟鏀寔淇℃伅鏌ョ湅鍙婄鐞嗐��
</div>
<div class="ask">瀵嗛挜淇℃伅璇疯闂澶囩鐞嗕汉鍛�</div>
<el-input v-model="auth_password"></el-input>
@@ -170,13 +103,7 @@
</template>
<script>
-import {
- findDeviceListAll,
- findClustersBySearch,
- getDevicesByCluster,
- addCluster,
- addDeviceToUser,
-} from "@/api/device";
+import { findDeviceListAll, findClustersBySearch, getDevicesByCluster, addCluster, addDeviceToUser } from "@/api/device"
export default {
data() {
@@ -190,41 +117,41 @@
equipmentList: [],
overList: [],
auth_password: "", //鎺堟潈绉橀挜
- addObj: {},
- };
+ addObj: {}
+ }
},
methods: {
close() {
- this.$emit("close");
+ this.$emit("close")
},
async showChildrenLIst(index, id) {
if (this.showClusterChild === index) {
- this.showClusterChild = null;
- return;
+ this.showClusterChild = null
+ return
} else if (!index) {
- this.showClusterChild = index;
+ this.showClusterChild = index
}
- this.showClusterChild = null;
+ this.showClusterChild = null
setTimeout(() => {
- this.showClusterChild = index;
- }, 400);
+ this.showClusterChild = index
+ }, 400)
const res = await getDevicesByCluster({
- clusterId: id,
- });
+ clusterId: id
+ })
if (res && res.success) {
- this.overList = res.data.list;
+ this.overList = res.data.list
}
},
async getCluster() {
const res = await findClustersBySearch({
InputText: this.searchContent,
Page: 1,
- Size: 10000,
- });
+ Size: 10000
+ })
if (res && res.success) {
- this.clusterList = res.data.list;
+ this.clusterList = res.data.list
}
},
@@ -232,48 +159,57 @@
const res = await findDeviceListAll({
InputText: this.searchContent,
Page: 1,
- Size: 10000,
- });
+ Size: 10000
+ })
if (res && res.success) {
- this.equipmentList = res.data.list;
+ this.equipmentList = res.data.list
}
},
searchCluster() {
- this.getCluster();
- this.listType = "cluster";
+ this.getCluster()
+ this.listType = "cluster"
},
searchDevice() {
- this.getDevice();
- this.listType = "equipment";
+ this.getDevice()
+ this.listType = "equipment"
},
async submit() {
+ let res = {}
if (this.addObj.type == "cluster") {
- const res = await addCluster({
- clusterPwd: this.auth_password,
- clusterId: this.addObj.id,
- });
+ res = await addCluster({
+ authPwd: this.auth_password,
+ clusterId: this.addObj.id
+ })
} else {
- const res = await addDeviceToUser({
- clusterPwd: this.auth_password,
+ res = await addDeviceToUser({
+ authPwd: this.auth_password,
deviceId: this.addObj.id,
- clusterId: this.addObj.cid,
- });
+ clusterId: this.addObj.cid
+ })
+ }
+
+ if (res && res.success) {
+ this.$notify({
+ type: "success",
+ message: "娣诲姞鎴愬姛"
+ })
+ this.close()
}
},
showBox(type, id, cid) {
- console.log(cid);
- this.showPasswordBox = true;
+ this.auth_password = ""
+ this.showPasswordBox = true
this.addObj = {
type,
id,
- cid,
- };
- },
- },
-};
+ cid
+ }
+ }
+ }
+}
</script>
<style lang="scss" scoped>
@@ -337,6 +273,15 @@
.clusterList {
max-height: 507px;
overflow-y: overlay;
+
+ .empty {
+ height: 60px;
+ background-color: rgb(233, 235, 238);
+ line-height: 60px;
+ color: #909399;
+ font-size: 14px;
+ text-align: center;
+ }
}
.tableList {
@@ -548,7 +493,7 @@
.btns {
margin-top: 40px;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
text-align: center;
line-height: 32px;
font-size: 14px;
@@ -572,4 +517,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0