报警推送日志

mark

2022-09-30 2ec95b3d2fd484b44d5274054bcbd78307a76ef8

报警推送日志

 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
  })
}

 src/views/dataPush/components/alarmPush.vue

New file
@@ -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="报警/销警图片url" 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 // 报警/销警图片url  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>

 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() {},

 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: "", // 摄像机id
      //   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;

 src/views/dataPush/components/point/point.js

 src/views/dataPush/components/point/point.scss