From 2ec95b3d2fd484b44d5274054bcbd78307a76ef8 Mon Sep 17 00:00:00 2001 From: mark <mark18340872469@163.com> Date: 星期五, 30 九月 2022 14:04:12 +0800 Subject: [PATCH] 报警推送日志 --- src/api/report.ts | 15 + src/views/dataPush/components/point.vue | 58 +++--- src/views/dataPush/components/alarmPush.vue | 401 ++++++++++++++++++++++++++++++++++++++++++++ src/views/dataPush/components/dataPush.vue | 20 +- src/views/dataPush/components/point/point.scss | 0 src/views/dataPush/components/point/point.js | 0 6 files changed, 452 insertions(+), 42 deletions(-) diff --git a/src/api/report.ts b/src/api/report.ts index 782d199..f949b4d 100644 --- a/src/api/report.ts +++ b/src/api/report.ts @@ -140,7 +140,7 @@ params: query }) } -// 鎬诲紑鍏� +// 鎬诲紑鍏崇殑鏀瑰彉 export const camerasSwitch = (query: any) => { return request({ url: "/api-a/v1/cameras/switch", @@ -148,10 +148,21 @@ params: query }) } - +// 鎬诲紑鍏崇殑鐘舵�� export const camerasConfig = () => { return request({ url: "/api-a/v1/cameras/config", method: "get" }) } +/** + * + * 鎶ヨ鎺ㄩ�佹棩蹇� + */ +export const camerasReportLog = (query: any) => { + return request({ + url: "/api-a/v1/cameras/reportLog", + method: "get", + params: query + }) +} diff --git a/src/views/dataPush/components/alarmPush.vue b/src/views/dataPush/components/alarmPush.vue new file mode 100644 index 0000000..897efc8 --- /dev/null +++ b/src/views/dataPush/components/alarmPush.vue @@ -0,0 +1,401 @@ +<template> + <div class="sub-account"> + <div class="table-area"> + <el-table + id="multipleTable" + ref="multipleTable" + :data="dataList" + :fit="true" + :default-sort="{ prop: 'createTime', order: 'descending' }" + > + <el-table-column prop="alarmDate" label="鎶ヨ鏃ユ湡" show-overflow-tooltip></el-table-column> + <el-table-column prop="channelName" label="璁惧鐨勭湡瀹炴姤璀﹂�氶亾鍚嶇О" show-overflow-tooltip></el-table-column> + <el-table-column prop="alarmType" label="鎶ヨ绫诲瀷" show-overflow-tooltip></el-table-column> + <el-table-column prop="alarmAction" label="鎶ヨ鍔ㄤ綔" show-overflow-tooltip></el-table-column> + <el-table-column prop="channelCode" label="璁惧鐨勭湡瀹炴姤璀﹂�氶亾缂栫爜" show-overflow-tooltip></el-table-column> + <el-table-column prop="alarmImage" label="鎶ヨ/閿�璀﹀浘鐗噓rl" show-overflow-tooltip></el-table-column> + <el-table-column prop="state" label="涓婃姤缁撴灉" show-overflow-tooltip> + <template slot-scope="scope"> + <div v-if="scope.row.state == 0" class="status green">澶辫触</div> + <div v-else class="status">鎴愬姛</div> + </template> + </el-table-column> + <el-table-column prop="resultMsg" label="涓婃姤杩斿洖淇℃伅" show-overflow-tooltip></el-table-column> + + <!-- <el-table-column label="鎿嶄綔" align="center" width="100px"> + <template slot-scope="scope"> + <span class="iconfont option" @click="editUser(scope.row)">缂栬緫</span> + <span class="iconfont option" style="color:red" @click="delUser(scope.row)">鍒犻櫎</span> + </template> + </el-table-column> --> + </el-table> + <div> + <el-pagination + @current-change="refrash" + @size-change="handleSizeChange" + :current-page="page" + :page-size="size" + layout="total, sizes, prev, pager, next, jumper" + :page-sizes="[5, 10, 15, 20, 25]" + :total="total" + background + ></el-pagination> + </div> + </div> + </div> +</template> + +<script> +import { camerasReportLog } from "@/api/report" + +export default { + data() { + return { + dataList: [], + page: 1, + size: 10, //鍒嗛〉鐩稿叧 + total: 0 //鎬绘暟, + } + }, + async created() { + this.lookUp() + // GET /api-a/v1/cameras/reportLog + // 鍒嗛〉鏌ヨ涓婃姤鏃ュ織 + // alarmDate string // 鎶ヨ鏃ユ湡 + // channelName string // 璁惧鐨勭湡瀹炴姤璀﹂�氶亾鍚嶇О + // alarmType string // 鎶ヨ绫诲瀷 + // alarmAction string // 鎶ヨ鍔ㄤ綔 + // channelCode string // 璁惧鐨勭湡瀹炴姤璀﹂�氶亾缂栫爜 + // alarmImage string // 鎶ヨ/閿�璀﹀浘鐗噓rl A閾炬帴 + // state int // 涓婃姤缁撴灉, 0 澶辫触 1 鎴愬姛 + // resultMsg string // 涓婃姤杩斿洖淇℃伅 + }, + mounted() {}, + methods: { + handleSizeChange(size) { + this.size = size + this.lookUp() + }, + //鍒嗛〉鍔熻兘 + refrash(page) { + this.page = page + this.lookUp() + }, + + async lookUp() { + let res = await camerasReportLog({ pageIndex: this.page, pageSize: this.size }) + this.dataList = res.data + this.total = res.total + } + } +} +</script> + +<style scoped lang="scss"> +.sub-account { + padding: 20px; + .head-name { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #3d3d3d; + border-left: 4px solid #0065ff; + padding-left: 10px; + } + .add-title { + font-weight: 700; + font-size: 16px; + cursor: pointer; + line-height: 22px; + color: #3d3d3d; + margin-bottom: 30px; + .iconfont { + margin-right: 10px; + } + } + .add-ruleForm::v-deep { + .el-input__inner { + color: #3d3d3d; + border-radius: 4px; + border-color: #c0c5cc; + height: 32px; + line-height: 32px; + border-color: #c0c5cc; + } + .user-tree { + .el-form-item__label:before { + content: "*"; + color: #f52323; + margin-right: 4px; + } + .el-form-item__content { + display: flex; + .tree-box { + .t { + height: 32px; + background: #f0f5fa; + border-radius: 3px 3px 0px 0px; + line-height: 32px; + text-align: center; + border-bottom: 1px solid #c0c5cc; + } + width: 336px; + height: 480px; + border: 1px solid #c0c5cc; + margin-right: 20px; + box-sizing: border-box; + } + } + } + } + .searchBtn { + width: 50px; + height: 25px; + line-height: 25px; + font-size: 14px; + text-align: center; + color: #fff; + background: #0065ff; + margin-right: 20px; + } + .right { + display: flex; + } + .resetBtn { + width: 50px; + height: 25px; + line-height: 25px; + font-size: 14px; + text-align: center; + color: #0065ff; + box-sizing: border-box; + border: 1px solid #0065ff; + } + .search { + display: flex; + font-size: 14px; + border-bottom: 1px solid #e9ebee; + margin-top: 30px; + padding-bottom: 20px; + .left, + .right, + .id, + .time, + .cluster { + display: flex; + align-items: center; + .el-select { + width: auto; + } + } + + .id .el-input ::v-deep { + width: 200px; + } + + .cluster::v-deep .el-input { + width: 300px; + + margin-left: 10px; + margin-right: 20px; + .el-input__icon { + line-height: 32px; + } + input { + border-radius: 0; + + &::-webkit-input-placeholder { + color: #999; + } + + &:focus { + border-color: #0065ff; + } + } + } + + .el-input ::v-deep { + width: 200px; + margin-left: 10px; + margin-right: 20px; + height: 32px; + line-height: 32px; + input { + border-radius: 0; + height: 32px; + line-height: 32px; + &::-webkit-input-placeholder { + color: #999; + } + + &:focus { + border-color: #0065ff; + } + } + } + + .el-date-editor { + width: 318px; + height: 40px; + margin-left: 10px; + margin-right: 20px; + border-radius: 0; + + &::-webkit-input-placeholder { + color: #999; + } + + &.is-active { + border-color: #0065ff; + } + } + } + + .btns { + display: flex; + margin: 20px 0; + text-align: center; + .add { + margin-right: 20px; + width: 126px; + height: 32px; + background: #0065ff; + color: #fff; + span { + margin-right: 5px; + line-height: 32px; + font-size: 14px; + } + } + + .export { + width: 126px; + height: 32px; + border: 1px solid #0065ff; + color: #0065ff; + box-sizing: border-box; + span { + margin-right: 5px; + line-height: 32px; + font-size: 14px; + } + } + } + + .el-table ::v-deep { + background-color: rgb(233, 235, 238); + padding: 1px; + + &::after { + display: none; + } + + td.index .cell { + padding-left: 16px; + padding-right: 4px; + } + + .has-gutter tr th { + background: #f0f3f5; + font-size: 16px; + color: #3d3d3d; + font-weight: 700; + } + + td .cell { + color: #3d3d3d; + } + + tr:hover > td.el-table__cell { + background-color: #fff; + } + + .el-table__row--striped .el-table__cell { + background-color: #f0f5fa !important; + } + tr:hover > td.el-table__cell { + background-color: #fff; + } + + .el-table__row--striped .el-table__cell { + background-color: #f0f5fa !important; + } + + .status { + color: #ff4b33; + + &.green { + color: #36b24a; + } + } + + .option { + margin-right: 10px; + font-size: 14px; + color: rgb(0, 101, 255); + cursor: pointer; + } + } + + .el-pagination ::v-deep { + margin-top: 30px; + text-align: center; + height: 24px; + .el-pagination__sizes { + margin-right: 0; + } + + button { + margin: 0; + background-color: #fff; + border: 1px solid #c0c5cc; + border-radius: 2px; + } + + .number { + background-color: #fff; + + &:not(.disabled):hover { + color: #0065ff; + } + + &:not(.disabled).active { + background-color: #0065ff; + color: #fff; + } + } + + .el-input .el-input__inner { + padding-left: 0; + + &:hover, + &:focus { + border-color: #0065ff; + } + } + } + + .el-select ::v-deep { + .el-select__tags-text { + color: #3d3d3d; + } + } +} +</style> + +<style> +.el-date-table td.start-date span, +.el-date-table td.end-date span { + background-color: #0065ff; +} + +.el-button--text span { + color: #0065ff; +} + +.el-button.is-plain:hover, +.el-button.is-plain:focus { + color: #0065ff; + border-color: #0065ff; +} +</style> diff --git a/src/views/dataPush/components/dataPush.vue b/src/views/dataPush/components/dataPush.vue index 35aca91..586205c 100644 --- a/src/views/dataPush/components/dataPush.vue +++ b/src/views/dataPush/components/dataPush.vue @@ -1,20 +1,18 @@ <template> <div style="padding: 20px;"> <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane name="first"> + <el-tab-pane name="device"> <span slot="label"><i class="el-icon-s-home"></i> 璁惧淇℃伅缁存姢</span> <device></device> </el-tab-pane> - <!-- <el-tab-pane label="璁惧淇℃伅缁存姢" name="first"> - <device></device> - </el-tab-pane> --> - <el-tab-pane name="second"> + <el-tab-pane name="point"> <span slot="label"><i class="el-icon-s-platform"></i> 鐐逛綅淇℃伅缁存姢</span> <point></point> </el-tab-pane> - <!-- <el-tab-pane label="鐐逛綅淇℃伅缁存姢" name="second"> - <point></point> - </el-tab-pane> --> + <el-tab-pane name="alarmPush"> + <span slot="label"><i class="el-icon-phone"></i> 鎶ヨ鎺ㄩ�佹棩蹇�</span> + <alarmPush></alarmPush> + </el-tab-pane> </el-tabs> </div> </template> @@ -22,15 +20,17 @@ <script> import device from "./device.vue" import point from "./point.vue" +import alarmPush from "./alarmPush.vue" export default { components: { device, - point + point, + alarmPush }, data() { return { - activeName: "first" + activeName: "device" } }, created() {}, diff --git a/src/views/dataPush/components/point.vue b/src/views/dataPush/components/point.vue index 9b502a5..9eff25f 100644 --- a/src/views/dataPush/components/point.vue +++ b/src/views/dataPush/components/point.vue @@ -10,7 +10,6 @@ <div class="right"> <div class="button searchBtn" @click="checkCamerasList(1)">鎼滅储</div> - <!-- <div class="button resetBtn" @click="reset">閲嶇疆</div> --> </div> </div> <div class="btns"> @@ -19,13 +18,16 @@ <span>娣诲姞鐐逛綅</span> </div> <div class="switchBox"> + 鎬荤偣浣嶅紑鍏� <el-switch v-model="value1" width="60" + active-color="#13ce66" + inactive-color="#f0f3f5" @change="changeAll($event)" - active-text="鎬荤偣浣嶅紑" - inactive-text="鎬荤偣浣嶅叧" > + <!-- active-text="鎬荤偣浣嶅紑" + inactive-text="鎬荤偣浣嶅叧" --> </el-switch> </div> </div> @@ -89,7 +91,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> @@ -150,13 +152,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 "./point.scss" +import { traverse } from "./point/point" +import "./point/point.scss" + export default { data() { return { + activeColor: "", + inactiveColor: "#f0f3f5", value1: false, query: {}, inputText: "", //杈撳叆妗嗗唴瀹� @@ -239,6 +244,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 @@ -250,7 +269,6 @@ methods: { async changeAll(val) { - console.log(val) let enable val ? (enable = 1) : (enable = 0) let rsp = await camerasSwitch({ enable: enable }) @@ -263,7 +281,6 @@ } }, changeSwitch(val, row) { - console.log(val, row, "val, rowval, row") let params = { CameraName: row.cameraName, ChannelCode: row.channelCode, @@ -279,7 +296,6 @@ id: row.id } camerasUpdate(params).then((res) => { - console.log(res, "res") if (res && res.success) { this.$message({ type: "success", @@ -289,7 +305,6 @@ }) }, editCameras(row) { - console.log(row, "row") this.tip = 2 this.isShowAdd = true this.resetUser() @@ -312,7 +327,6 @@ // 鎬诲紑鍏� 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 +336,6 @@ clusterId = clusterReq.data.clusterList[0].cluster_id } } - console.log(clusterId) let camereReq = await getLocalCameraTree({ clusterId: clusterId }) // 杩欎釜鏄� 娣诲姞鏃剁殑鐐逛綅 鏄粠鎽勫儚鏈洪〉闈� 鏉ョ殑 let array = [] @@ -339,7 +352,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 +366,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 +379,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 +390,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", @@ -443,15 +453,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 +461,7 @@ } </script> -// -<style scoped lang="scss"> -// -</style> +<style scoped lang="scss"></style> <style scoped lang="scss"> .sub-account { padding: 20px; diff --git a/src/views/dataPush/components/point.js b/src/views/dataPush/components/point/point.js similarity index 100% rename from src/views/dataPush/components/point.js rename to src/views/dataPush/components/point/point.js diff --git a/src/views/dataPush/components/point.scss b/src/views/dataPush/components/point/point.scss similarity index 100% rename from src/views/dataPush/components/point.scss rename to src/views/dataPush/components/point/point.scss -- Gitblit v1.8.0