From db5872786c1e1697a59af41386136ee002bb68ad Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 30 六月 2023 17:17:12 +0800 Subject: [PATCH] 修改为汇丰默认图标,修改处理率计算方式 --- src/views/dataPush/components/point.vue | 215 +++++++++++++++++++++++++---------------------------- 1 files changed, 100 insertions(+), 115 deletions(-) diff --git a/src/views/dataPush/components/point.vue b/src/views/dataPush/components/point.vue index 9b502a5..b73a00f 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,41 +17,39 @@ <span class="iconfont"></span> <span>娣诲姞鐐逛綅</span> </div> - <div class="switchBox"> - <el-switch - v-model="value1" - width="60" - @change="changeAll($event)" - active-text="鎬荤偣浣嶅紑" - inactive-text="鎬荤偣浣嶅叧" - > - </el-switch> - </div> </div> - + <div class="switchBox"> + <span style="margin-right:10px">寮�鍚笂鎶�</span> + <el-switch v-model="value1" active-color="#0065ff" @change="changeAll($event)"> </el-switch> + </div> <div class="table-area"> <el-table - id="multipleTable" - ref="multipleTable" + v-loading="tbLoading" + id="pointTable" + ref="pointTable" :data="dataList" :fit="true" - :default-sort="{ prop: 'createTime', order: 'descending' }" + :default-sort="{ prop: 'companyCode', order: 'ascending' }" > <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="浼佷笟缂栫爜" width="130px" show-overflow-tooltip></el-table-column> - <el-table-column prop="scenes" label="鎺ㄩ�佸満鏅�" show-overflow-tooltip></el-table-column> + <el-table-column + prop="channelCode" + label="鎶ヨ閫氶亾缂栫爜" + min-width="250px" + show-overflow-tooltip + ></el-table-column> + <el-table-column prop="companyCode" label="浼佷笟缂栫爜" width="150px" show-overflow-tooltip> + <template slot-scope="scope"> + {{ scope.row.companyCode | fillCompanyCode(companyCodeOptions) }} + </template> + </el-table-column> + <el-table-column prop="scenes" label="鎺ㄩ�佸満鏅�" min-width="100px" 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> + <el-table-column prop="Enable" label="寮�鍏�" width="60px" 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> @@ -89,7 +86,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> @@ -97,7 +94,10 @@ <el-input v-model="ruleForm.ChannelCode" placeholder="璇疯緭鍏ユ姤璀﹂�氶亾缂栫爜" style="width: 350px"></el-input> </el-form-item> <el-form-item label="浼佷笟缂栫爜" prop="CompanyCode"> - <el-input v-model="ruleForm.CompanyCode" placeholder="璇疯緭鍏ヤ紒涓氱紪鐮�" style="width: 350px"></el-input> + <el-select style="width: 350px" v-model="ruleForm.CompanyCode" placeholder="璇烽�夋嫨"> + <el-option v-for="item in companyCodeOptions" :key="item.value" :label="item.label" :value="item.value"> + </el-option> + </el-select> </el-form-item> <el-form-item label="鎺ㄩ�佸満鏅�" prop="Sceneslist"> <el-select multiple style="width: 350px" v-model="ruleForm.Sceneslist" filterable placeholder="璇烽�夋嫨"> @@ -115,7 +115,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 }" > @@ -131,7 +131,7 @@ :picker-options="{ start: ruleForm.StartTime ? ruleForm.StartTime : '00:00', step: '00:30', - end: '23:30', + end: '24:00', minTime: ruleForm.StartTime }" > @@ -150,63 +150,28 @@ <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 "./point.scss" +import { traverse } from "./point/point" +import "./point/point.scss" + export default { + filters: { + fillCompanyCode(key, opts) { + let obj = opts.find((t) => t.value == key) + return obj ? obj.label : key + } + }, data() { return { + tbLoading: false, + activeColor: "", + inactiveColor: "#f0f3f5", value1: false, query: {}, inputText: "", //杈撳叆妗嗗唴瀹� cameraOptions: [], - scene_nameOptions: [ - { - value: "鏄庣伀", - label: "鏄庣伀" - }, - { - value: "鐑熼浘", - label: "鐑熼浘" - }, - { - value: "缈昏秺鍥存爮", - label: "缈昏秺鍥存爮" - }, - { - value: "鍖哄煙鍏ヤ镜", - label: "鍖哄煙鍏ヤ镜" - }, - { - value: "浜哄憳绂诲矖", - label: "浜哄憳绂诲矖" - }, - { - value: "浜哄憳鑱氶泦", - label: "浜哄憳鑱氶泦" - }, - { - value: "鎵撶數璇�", - label: "鎵撶數璇�" - }, - { - value: "鎶界儫", - label: "鎶界儫" - }, - { - value: "鏈僵鎴村畨鍏ㄥ附", - label: "鏈僵鎴村畨鍏ㄥ附" - }, - { - value: "鏈┛宸ヨ", - label: "鏈┛宸ヨ" - }, - { - value: "鐫″矖", - label: "鐫″矖" - } - ], + scene_nameOptions: [], isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥 ruleForm: { CameraName: "", // 鎽勫儚鏈哄悕绉� @@ -227,7 +192,7 @@ 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,8 +200,26 @@ EndTime: [{ type: "string", required: true, message: "璇烽�夋嫨缁撴潫鏃堕棿", trigger: "change" }] }, page: 1, - size: 10, //鍒嗛〉鐩稿叧 - total: 0 //鎬绘暟, + size: 20, //鍒嗛〉鐩稿叧 + total: 0, //鎬绘暟 + companyCodeOptions: [ + { + value: "370300010", + label: "370300010/姹囦赴" + }, + { + value: "370300450", + label: "370300450/娴风泭" + }, + { + value: "370300440", + label: "370300440/閲戞眹涓�" + }, + { + value: "370300480", + label: "370300480/涓眹" + } + ] } }, async created() { @@ -245,12 +228,12 @@ let res = await camerasList(query) this.dataList = res.data this.total = res.total - this.aaaaa() + this.scene_nameOptions = this.Constants.sceneNameOptions + this.pageInit() }, methods: { async changeAll(val) { - console.log(val) let enable val ? (enable = 1) : (enable = 0) let rsp = await camerasSwitch({ enable: enable }) @@ -259,11 +242,10 @@ type: "success", message: "鎴愬姛!" }) - this.checkCamerasList() + // this.checkCamerasList() } }, changeSwitch(val, row) { - console.log(val, row, "val, rowval, row") let params = { CameraName: row.cameraName, ChannelCode: row.channelCode, @@ -279,7 +261,6 @@ id: row.id } camerasUpdate(params).then((res) => { - console.log(res, "res") if (res && res.success) { this.$message({ type: "success", @@ -289,7 +270,6 @@ }) }, editCameras(row) { - console.log(row, "row") this.tip = 2 this.isShowAdd = true this.resetUser() @@ -306,13 +286,12 @@ this.ruleForm.updatedAt = row.updatedAt this.ruleForm.id = row.id }, - async aaaaa() { + async pageInit() { // 杩涘叆椤甸潰鍓嶇殑鍒濆鍖� 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() @@ -322,7 +301,6 @@ clusterId = clusterReq.data.clusterList[0].cluster_id } } - console.log(clusterId) let camereReq = await getLocalCameraTree({ clusterId: clusterId }) // 杩欎釜鏄� 娣诲姞鏃剁殑鐐逛綅 鏄粠鎽勫儚鏈洪〉闈� 鏉ョ殑 let array = [] @@ -339,7 +317,6 @@ 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, @@ -354,8 +331,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", @@ -367,7 +344,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, @@ -379,9 +355,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", @@ -399,12 +374,12 @@ }, handleSizeChange(size) { this.size = size - this.checkCamerasList() + this.checkCamerasList(1) }, //鍒嗛〉鍔熻兘 refrash(page) { this.page = page - this.checkCamerasList() + this.checkCamerasList(1) }, delCameras(row) { this.$confirm("纭瑕佸垹闄よ鐐逛綅鍚�, 鏄惁缁х画?", "鎻愮ず", { @@ -423,6 +398,7 @@ }) }, async checkCamerasList(val) { + this.tbLoading = true if (val === 1) { let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText } this.query = query @@ -434,6 +410,10 @@ this.dataList = res.data this.total = res.total } + + setTimeout(() => { + this.tbLoading = false + }, 300) }, resetUser() { // this.ruleForm. = { @@ -443,15 +423,6 @@ this.ruleForm.Sceneslist = [] this.ruleForm.StartTime = "" this.ruleForm.EndTime = "" - - // Scenes: "", - // CameraId: "", // 鎽勫儚鏈篿d - // Level: "", - // Enable: false, - // createdAt: "", - // updatedAt: "", - // id: "" - // } }, goback() { this.isShowAdd = false @@ -460,10 +431,6 @@ } </script> -// -<style scoped lang="scss"> -// -</style> <style scoped lang="scss"> .sub-account { padding: 20px; @@ -629,10 +596,7 @@ margin: 20px 0; text-align: center; justify-content: space-between; - .switchBox { - display: flex; - align-items: center; - } + .add { margin-right: 20px; width: 126px; @@ -659,7 +623,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; @@ -783,4 +755,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