From 351e360c9f5a9b59b22a668360b5cfbb3af3e853 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 11 十月 2022 11:02:54 +0800
Subject: [PATCH] 优化用户管理表单查询交互
---
src/views/dataPush/components/point.vue | 142 +++++++++++++++++++++++++----------------------
1 files changed, 75 insertions(+), 67 deletions(-)
diff --git a/src/views/dataPush/components/point.vue b/src/views/dataPush/components/point.vue
index c020b0e..9b9be52 100644
--- a/src/views/dataPush/components/point.vue
+++ b/src/views/dataPush/components/point.vue
@@ -3,14 +3,13 @@
<div class="search">
<div class="left">
<div class="id">
- 鐐逛綅鍚嶇О
+ 鐐逛綅鍚嶇О/浼佷笟缂栫爜/鍦烘櫙
<el-input v-model="inputText" placeholder="璇疯緭鍏�" clearable></el-input>
</div>
</div>
<div class="right">
<div class="button searchBtn" @click="checkCamerasList(1)">鎼滅储</div>
- <!-- <div class="button resetBtn" @click="reset">閲嶇疆</div> -->
</div>
</div>
<div class="btns">
@@ -18,35 +17,31 @@
<span class="iconfont"></span>
<span>娣诲姞鐐逛綅</span>
</div>
- <div class="switchBox">
- <el-switch v-model="value1" @change="changeAll($event)" active-text="鎬荤偣浣嶅紑" inactive-text="鎬荤偣浣嶅叧">
- </el-switch>
- </div>
</div>
-
+ <div class="switchBox">
+ 寮�鍚笂鎶�
+ <el-table-column prop="Enable" label="寮�鍏�" width="70px" show-overflow-tooltip>
+ <el-switch v-model="value1" active-color="#0065ff" @change="changeAll($event)"> </el-switch>
+ </el-table-column>
+ </div>
<div class="table-area">
<el-table
id="multipleTable"
ref="multipleTable"
:data="dataList"
:fit="true"
- :default-sort="{ prop: 'createTime', order: 'descending' }"
+ :default-sort="{ prop: 'companyCode', order: 'ascending' }"
>
- <el-table-column prop="cameraName" label="鐐逛綅鍚嶇О" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="cameraName" label="鐐逛綅鍚嶇О" width="130px" show-overflow-tooltip></el-table-column>
<el-table-column prop="channelCode" label="鎶ヨ閫氶亾缂栫爜" show-overflow-tooltip></el-table-column>
- <el-table-column prop="companyCode" label="浼佷笟缂栫爜" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="companyCode" label="浼佷笟缂栫爜" width="130px" show-overflow-tooltip></el-table-column>
<el-table-column prop="scenes" label="鎺ㄩ�佸満鏅�" show-overflow-tooltip></el-table-column>
<el-table-column prop="updatedAt" label="鎺ㄩ�佹椂闂�" width="100px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.startTime }}-{{ scope.row.endTime }}</template>
</el-table-column>
<el-table-column prop="Enable" label="寮�鍏�" width="70px" show-overflow-tooltip>
<template slot-scope="scope">
- <el-switch
- v-model="scope.row.enable"
- @change="changeSwitch($event, scope.row)"
- active-color="#13ce66"
- inactive-color="#f0f3f5"
- >
+ <el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" active-color="#0065ff">
</el-switch>
</template>
</el-table-column>
@@ -83,7 +78,7 @@
class="add-ruleForm"
>
<el-form-item label="鐐逛綅鍚嶇О" prop="CameraName">
- <el-select style="width: 350px" v-model="ruleForm.CameraName" placeholder="璇烽�夋嫨">
+ <el-select filterable style="width: 350px" v-model="ruleForm.CameraName" placeholder="璇烽�夋嫨">
<el-option v-for="item in cameraOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
</el-select>
</el-form-item>
@@ -109,7 +104,7 @@
:picker-options="{
start: '00:00',
step: '00:30',
- end: ruleForm.EndTime ? ruleForm.EndTime : '23:30',
+ end: ruleForm.EndTime ? ruleForm.EndTime : '24:00',
maxTime: ruleForm.EndTime
}"
>
@@ -125,7 +120,7 @@
:picker-options="{
start: ruleForm.StartTime ? ruleForm.StartTime : '00:00',
step: '00:30',
- end: '23:30',
+ end: '24:00',
minTime: ruleForm.StartTime
}"
>
@@ -135,7 +130,7 @@
</el-form-item>
</el-form>
<div class="right">
- <div class="button searchBtn" @click="saveUser">淇濆瓨</div>
+ <div class="button searchBtn" @click="save">淇濆瓨</div>
<div class="button resetBtn" @click="resetUser">閲嶇疆</div>
<div class="button resetBtn" style="margin-left:20px" @click="goback">杩斿洖</div>
</div>
@@ -144,13 +139,16 @@
<script>
import { getLocalCameraTree } from "@/api/area"
-import { traverse } from "./point"
import { getClusterDevList } from "@/api/clusterManage"
import { camerasList, camerasCreate, camerasConfig, camerasSwitch, camerasUpdate, camerasDelete } from "@/api/report"
+import { traverse } from "./point/point"
+import "./point/point.scss"
export default {
data() {
return {
+ activeColor: "",
+ inactiveColor: "#f0f3f5",
value1: false,
query: {},
inputText: "", //杈撳叆妗嗗唴瀹�
@@ -193,8 +191,8 @@
label: "鏈僵鎴村畨鍏ㄥ附"
},
{
- value: "鏈┛鐫�宸ヤ綔鏈�",
- label: "鏈┛鐫�宸ヤ綔鏈�"
+ value: "鏈┛宸ヨ",
+ label: "鏈┛宸ヨ"
},
{
value: "鐫″矖",
@@ -218,12 +216,10 @@
updatedAt: "",
id: ""
},
-
dataList: [],
-
tip: 1, // 鍖哄垎淇濆瓨杩樻槸缂栬緫 浣嗘槸鐜板湪娌℃湁缂栬緫
rules: {
- CameraName: [{ required: true, message: "璇烽�夋嫨璁惧鍚嶇О", trigger: "change" }],
+ CameraName: [{ required: true, message: "璇烽�夋嫨鐐逛綅鍚嶇О", trigger: "change" }],
ChannelCode: [{ required: true, message: "璇疯緭鍏ユ姤璀﹂�氶亾缂栫爜", trigger: "blur" }],
CompanyCode: [{ required: true, message: "璇疯緭鍏ヤ紒涓氱紪鐮�", trigger: "blur" }],
Sceneslist: [{ type: "array", required: true, message: "璇烽�夋嫨鎺ㄩ�佸満鏅�", trigger: "change" }],
@@ -235,6 +231,20 @@
total: 0 //鎬绘暟,
}
},
+ // computed: {
+ // // activeColor() {
+ // // return this.value1 ? "#13ce66" : "#f0f3f5"
+ // // }
+ // },
+ // watch: {
+ // value1: {
+ // handler(newVal, oldVal) {
+ // console.log(newVal, oldVal, "newVal, oldVal")
+ // newVal ? (this.activeColor = "#13ce66") : (this.activeColor = "#f0f3f5")
+ // },
+ // deep: true
+ // }
+ // },
async created() {
let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
this.query = query
@@ -244,11 +254,8 @@
this.aaaaa()
},
- // const rsp: any = await getLocalCameraTree(params)
- // console.log(rsp, "rsp")
methods: {
async changeAll(val) {
- console.log(val)
let enable
val ? (enable = 1) : (enable = 0)
let rsp = await camerasSwitch({ enable: enable })
@@ -261,7 +268,6 @@
}
},
changeSwitch(val, row) {
- console.log(val, row, "val, rowval, row")
let params = {
CameraName: row.cameraName,
ChannelCode: row.channelCode,
@@ -277,7 +283,6 @@
id: row.id
}
camerasUpdate(params).then((res) => {
- console.log(res, "res")
if (res && res.success) {
this.$message({
type: "success",
@@ -287,7 +292,6 @@
})
},
editCameras(row) {
- console.log(row, "row")
this.tip = 2
this.isShowAdd = true
this.resetUser()
@@ -305,20 +309,22 @@
this.ruleForm.id = row.id
},
async aaaaa() {
+ // 杩涘叆椤甸潰鍓嶇殑鍒濆鍖�
let res = await camerasConfig()
+ // 鎬诲紑鍏�
if (res && res.success) {
res.data.enable === 0 ? (this.value1 = false) : (this.value1 = true)
- console.log(this.value1)
}
let clusterId = ""
let clusterReq = await getClusterDevList()
+ // 鏌ヨ
if (clusterReq && clusterReq.success) {
if (clusterReq.data.clusterList.length > 0) {
clusterId = clusterReq.data.clusterList[0].cluster_id
}
}
- console.log(clusterId)
let camereReq = await getLocalCameraTree({ clusterId: clusterId })
+ // 杩欎釜鏄� 娣诲姞鏃剁殑鐐逛綅 鏄粠鎽勫儚鏈洪〉闈� 鏉ョ殑
let array = []
this.cameraOptions = traverse(camereReq.data.treeMenu, array)
},
@@ -327,12 +333,12 @@
this.tip = 1
this.resetUser()
}, //y
- saveUser() {
+ save() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
if (this.tip !== 1) {
+ // tip1 鏄坊鍔� 鍏朵粬鏄紪杈�
let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
- console.log(obj, "dddddddd")
let params = {
CameraName: this.ruleForm.CameraName,
ChannelCode: this.ruleForm.ChannelCode,
@@ -347,8 +353,8 @@
updatedAt: this.ruleForm.updatedAt,
id: this.ruleForm.id
}
+ // 缂栬緫
camerasUpdate(params).then((res) => {
- console.log(res, "res")
if (res && res.success) {
this.$message({
type: "success",
@@ -360,7 +366,6 @@
})
} else {
let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
- console.log(obj, "dddddddd")
let params = {
CameraName: this.ruleForm.CameraName,
ChannelCode: this.ruleForm.ChannelCode,
@@ -372,9 +377,8 @@
Level: this.ruleForm.Level,
Enable: this.ruleForm.Enable
}
- console.log(params, "paramsv")
+ // 鏂板缓
camerasCreate(params).then((res) => {
- console.log(res, "res")
if (res && res.success) {
this.$message({
type: "success",
@@ -436,15 +440,6 @@
this.ruleForm.Sceneslist = []
this.ruleForm.StartTime = ""
this.ruleForm.EndTime = ""
-
- // Scenes: "",
- // CameraId: "", // 鎽勫儚鏈篿d
- // Level: "",
- // Enable: false,
- // createdAt: "",
- // updatedAt: "",
- // id: ""
- // }
},
goback() {
this.isShowAdd = false
@@ -453,19 +448,6 @@
}
</script>
-//
-<style scoped lang="scss">
-// /deep/ .el-switch .is-checked {
-// .el-switch__core {
-// height: 32px !important;
-// }
-// .el-switch__core::after {
-// height: 30px !important;
-// width: 30px !important;
-// }
-// }
-//
-</style>
<style scoped lang="scss">
.sub-account {
padding: 20px;
@@ -627,13 +609,11 @@
}
.btns {
- .switchBox {
- display: flex;
- align-items: center;
- }
display: flex;
margin: 20px 0;
text-align: center;
+ justify-content: space-between;
+
.add {
margin-right: 20px;
width: 126px;
@@ -660,7 +640,15 @@
}
}
}
-
+ .switchBox {
+ display: flex;
+ align-items: center;
+ float: right;
+ position: absolute;
+ right: 20px;
+ top: 130px;
+ font-size: 14px;
+ }
.el-table ::v-deep {
background-color: rgb(233, 235, 238);
padding: 1px;
@@ -763,6 +751,13 @@
</style>
<style>
+/* .el-switch__core {
+ height: 32px !important;
+}
+.el-switch__core::after {
+ height: 30px !important;
+ width: 30px !important;
+} */
.el-date-table td.start-date span,
.el-date-table td.end-date span {
background-color: #0065ff;
@@ -777,4 +772,17 @@
color: #0065ff;
border-color: #0065ff;
}
+
+/* .el-switch__core {
+ width: 40px !important;
+ height: 20px;
+}
+.el-switch__core::after {
+ width: 16px;
+ height: 16px;
+ margin-top: -1px;
+}
+.el-switch.is-checked .el-switch__core::after {
+ margin-left: -17px;
+} */
</style>
--
Gitblit v1.8.0