From 0dbf19e9f92f5cb1d5ca9a06fd268d3b16e466e3 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 07 十二月 2022 15:22:01 +0800
Subject: [PATCH] 完善断流监控,集群和设备详情的查询
---
src/views/dataPush/components/point.vue | 358 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 275 insertions(+), 83 deletions(-)
diff --git a/src/views/dataPush/components/point.vue b/src/views/dataPush/components/point.vue
index f1d5c5b..fb05840 100644
--- a/src/views/dataPush/components/point.vue
+++ b/src/views/dataPush/components/point.vue
@@ -1,30 +1,62 @@
<template>
<div class="sub-account" v-if="!isShowAdd">
+ <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>
+ </div>
<div class="btns">
<div class="button add" @click="addPoint">
<span class="iconfont"></span>
<span>娣诲姞鐐逛綅</span>
</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="鐐逛綅鍚嶇О" 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="scenes" label="鎺ㄩ�佸満鏅�" show-overflow-tooltip></el-table-column>
- <el-table-column prop="updatedAt" label="鎺ㄩ�佹椂闂�" show-overflow-tooltip>
+ <el-table-column prop="cameraName" label="鐐逛綅鍚嶇О" width="130px" 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="60px" show-overflow-tooltip>
+ <template slot-scope="scope">
+ <el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" active-color="#0065ff">
+ </el-switch>
+ </template>
</el-table-column>
<el-table-column label="鎿嶄綔" align="center" width="100px">
<template slot-scope="scope">
+ <span class="iconfont option" @click="editCameras(scope.row)">缂栬緫</span>
<span class="iconfont option" style="color:red" @click="delCameras(scope.row)">鍒犻櫎</span>
</template>
</el-table-column>
@@ -50,11 +82,11 @@
:rules="rules"
:label-position="'left'"
ref="ruleForm"
- label-width="100px"
+ label-width="120px"
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>
@@ -62,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="璇烽�夋嫨">
@@ -70,7 +105,7 @@
</el-option>
</el-select>
</el-form-item>
- <el-form-item label="鎺ㄩ�佹椂闂�">
+ <el-form-item label="鎺ㄩ�佹椂闂�" required>
<el-col :span="12" style="width: 175px">
<el-form-item prop="StartTime">
<el-time-select
@@ -80,7 +115,8 @@
:picker-options="{
start: '00:00',
step: '00:30',
- end: '23:30'
+ end: ruleForm.EndTime ? ruleForm.EndTime : '24:00',
+ maxTime: ruleForm.EndTime
}"
>
</el-time-select>
@@ -93,9 +129,10 @@
placeholder="缁撴潫鏃堕棿"
v-model="ruleForm.EndTime"
:picker-options="{
- start: '00:00',
+ start: ruleForm.StartTime ? ruleForm.StartTime : '00:00',
step: '00:30',
- end: '23:30'
+ end: '24:00',
+ minTime: ruleForm.StartTime
}"
>
</el-time-select>
@@ -104,7 +141,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>
@@ -114,11 +151,25 @@
<script>
import { getLocalCameraTree } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"
-import { camerasList, camerasCreate, camerasDelete } from "@/api/report"
+import { camerasList, camerasCreate, camerasConfig, camerasSwitch, camerasUpdate, camerasDelete } from "@/api/report"
+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: [
{
@@ -136,10 +187,6 @@
{
value: "鍖哄煙鍏ヤ镜",
label: "鍖哄煙鍏ヤ镜"
- },
- {
- value: "浜哄憳鎾ょ",
- label: "浜哄憳鎾ょ"
},
{
value: "浜哄憳绂诲矖",
@@ -162,8 +209,8 @@
label: "鏈僵鎴村畨鍏ㄥ附"
},
{
- value: "鏈┛鐫�宸ヤ綔鏈�",
- label: "鏈┛鐫�宸ヤ綔鏈�"
+ value: "鏈┛宸ヨ",
+ label: "鏈┛宸ヨ"
},
{
value: "鐫″矖",
@@ -182,14 +229,15 @@
CameraId: "", // 鎽勫儚鏈篿d
Level: "",
- Enable: true
+ Enable: false,
+ createdAt: "",
+ 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" }],
@@ -197,70 +245,172 @@
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/涓眹"
+ }
+ ]
}
},
- created() {
- this.checkCamerasList()
+ async created() {
+ let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
+ this.query = query
+ let res = await camerasList(query)
+ this.dataList = res.data
+ this.total = res.total
this.aaaaa()
},
- // const rsp: any = await getLocalCameraTree(params)
- // console.log(rsp, "rsp")
methods: {
+ async changeAll(val) {
+ let enable
+ val ? (enable = 1) : (enable = 0)
+ let rsp = await camerasSwitch({ enable: enable })
+ if (rsp && rsp.success) {
+ this.$message({
+ type: "success",
+ message: "鎴愬姛!"
+ })
+ // this.checkCamerasList()
+ }
+ },
+ changeSwitch(val, row) {
+ let params = {
+ CameraName: row.cameraName,
+ ChannelCode: row.channelCode,
+ CompanyCode: row.companyCode,
+ Scenes: row.scenes,
+ StartTime: row.startTime,
+ EndTime: row.endTime,
+ CameraId: row.cameraId, //
+ Level: row.level,
+ Enable: val,
+ createdAt: row.createdAt,
+ updatedAt: row.updatedAt,
+ id: row.id
+ }
+ camerasUpdate(params).then((res) => {
+ if (res && res.success) {
+ this.$message({
+ type: "success",
+ message: res.msg
+ })
+ }
+ })
+ },
+ editCameras(row) {
+ this.tip = 2
+ this.isShowAdd = true
+ this.resetUser()
+ this.ruleForm.StartTime = row.startTime
+ this.ruleForm.EndTime = row.endTime
+ this.ruleForm.CameraName = row.cameraName
+ this.ruleForm.ChannelCode = row.channelCode
+ this.ruleForm.CompanyCode = row.companyCode
+ this.ruleForm.Sceneslist = row.scenes.split(",")
+
+ this.ruleForm.Level = row.level
+ this.ruleForm.Enable = row.enable
+ this.ruleForm.createdAt = row.createdAt
+ this.ruleForm.updatedAt = row.updatedAt
+ 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)
+ }
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 })
- console.log(camereReq.data.treeMenu, "camereReqcamereReqcamereReq")
- let array = camereReq.data.treeMenu
- for (let i = 0; i < array.length; i++) {
- console.log(array[i].children, "11111111")
- for (let j = 0; j < array[i].children.length; j++) {
- this.cameraOptions.push(array[i].children[j])
- }
- }
- console.log(this.cameraOptions, "arrrrrrrrrrrrrrrr")
+ // 杩欎釜鏄� 娣诲姞鏃剁殑鐐逛綅 鏄粠鎽勫儚鏈洪〉闈� 鏉ョ殑
+ let array = []
+ this.cameraOptions = traverse(camereReq.data.treeMenu, array)
},
addPoint() {
this.isShowAdd = true
this.tip = 1
this.resetUser()
}, //y
- saveUser() {
+ save() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
- 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,
- CompanyCode: this.ruleForm.CompanyCode,
- Scenes: this.ruleForm.Sceneslist.toString(),
- StartTime: this.ruleForm.StartTime,
- EndTime: this.ruleForm.EndTime,
- CameraId: obj.id, //
- 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",
- message: res.msg
- })
- this.goback()
+ if (this.tip !== 1) {
+ // tip1 鏄坊鍔� 鍏朵粬鏄紪杈�
+ let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
+ let params = {
+ CameraName: this.ruleForm.CameraName,
+ ChannelCode: this.ruleForm.ChannelCode,
+ CompanyCode: this.ruleForm.CompanyCode,
+ Scenes: this.ruleForm.Sceneslist.toString(),
+ StartTime: this.ruleForm.StartTime,
+ EndTime: this.ruleForm.EndTime,
+ CameraId: obj.id, //
+ Level: this.ruleForm.Level,
+ Enable: this.ruleForm.Enable,
+ createdAt: this.ruleForm.createdAt,
+ updatedAt: this.ruleForm.updatedAt,
+ id: this.ruleForm.id
}
- })
+ // 缂栬緫
+ camerasUpdate(params).then((res) => {
+ if (res && res.success) {
+ this.$message({
+ type: "success",
+ message: res.msg
+ })
+ this.goback()
+ this.checkCamerasList()
+ }
+ })
+ } else {
+ let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
+ let params = {
+ CameraName: this.ruleForm.CameraName,
+ ChannelCode: this.ruleForm.ChannelCode,
+ CompanyCode: this.ruleForm.CompanyCode,
+ Scenes: this.ruleForm.Sceneslist.toString(),
+ StartTime: this.ruleForm.StartTime,
+ EndTime: this.ruleForm.EndTime,
+ CameraId: obj.id, //
+ Level: this.ruleForm.Level,
+ Enable: this.ruleForm.Enable
+ }
+ // 鏂板缓
+ camerasCreate(params).then((res) => {
+ if (res && res.success) {
+ this.$message({
+ type: "success",
+ message: res.msg
+ })
+ this.goback()
+ this.checkCamerasList()
+ }
+ })
+ }
} else {
return false
}
@@ -268,12 +418,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("纭瑕佸垹闄よ鐐逛綅鍚�, 鏄惁缁х画?", "鎻愮ず", {
@@ -291,20 +441,32 @@
this.checkCamerasList()
})
},
- async checkCamerasList() {
- let res = await camerasList({ pageIndex: this.page, pageSize: this.size })
- this.dataList = res.data
- this.total = res.total
+ async checkCamerasList(val) {
+ this.tbLoading = true
+ if (val === 1) {
+ let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
+ this.query = query
+ let res = await camerasList(query)
+ this.dataList = res.data
+ this.total = res.total
+ } else {
+ let res = await camerasList(this.query)
+ this.dataList = res.data
+ this.total = res.total
+ }
+
+ setTimeout(() => {
+ this.tbLoading = false
+ }, 300)
},
resetUser() {
- this.ruleForm = {
- CameraName: "",
- ChannelCode: "",
- CompanyCode: "",
- Sceneslist: [],
- StartTime: "",
- EndTime: ""
- }
+ // this.ruleForm. = {
+ this.ruleForm.CameraName = ""
+ this.ruleForm.ChannelCode = ""
+ this.ruleForm.CompanyCode = ""
+ this.ruleForm.Sceneslist = []
+ this.ruleForm.StartTime = ""
+ this.ruleForm.EndTime = ""
},
goback() {
this.isShowAdd = false
@@ -477,6 +639,8 @@
display: flex;
margin: 20px 0;
text-align: center;
+ justify-content: space-between;
+
.add {
margin-right: 20px;
width: 126px;
@@ -503,7 +667,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;
@@ -606,6 +778,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;
@@ -620,4 +799,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