智慧监控页面增加

李旭东

2023-11-08 58e841720c0b1f56ba15a1f1ecdb26c8158c4db1

智慧监控页面增加

 web/src/api/modules/safety.js

@@ -277,5 +277,16 @@
      delete: params =>

        axios.get('/secure/tRegionWarranty/delete', { params }),

    }

  }

  },





  /**

   * 安全管理模块 - 智慧监控

  */

 // 查询智慧监控信息列表

 searchWisdomVideoList: (params) =>

  axios.post('/materials/helmet/dataAIList', params), 
  // 获取全部预警消息类型

  getAllWaringData: () =>

    axios.get('/materials/helmet/dataAIType'),

}

 web/src/views/SecureManage/WisdomVideo.vue

对比新文件
@@ -0,0 +1,180 @@
<template>
  <div class="main">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">时间范围：</span>
        <el-date-picker
          v-model="timeData"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>
      <div class="header_item">
        <span class="header_label">预警消息类型：</span>
        <el-select v-model="messageId" clearable placeholder="请选择预警消息类型">
          <el-option
            v-for="item in messageData"
            :key="item.type"
            :label="item.typeName"
            :value="item.type">
          </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchWisdomVideoList(true)">查询</el-button>
        <el-button class="search_btn" icon="el-icon-message" v-if="showButton('insert')" @click="asyncConfig = true;">短信设置</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="wisdomVideoList"
        height="100%">
        <el-table-column label="序号" width="55" align="center">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="signTime" label="预警时间" align="center" width="200"></el-table-column>
        <el-table-column prop="boxName" label="盒子的名称" align="center" width="200"></el-table-column>
        <el-table-column prop="deviceName" label="摄像头的名称" align="center" width="200"></el-table-column>
        <el-table-column prop="type" label="预警消息类型" align="center" width="200"></el-table-column>
        <el-table-column prop="typeName" label="预警消息名称" align="center"></el-table-column>
        <el-table-column prop="useYearMonth" label="抓拍大图" align="center"></el-table-column>
        <el-table-column prop="signTime" label="抓拍时间" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="main_footer">
      <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      class="prop_dialog"
      title="短信设置"
      :visible.sync="asyncConfig"
      width="35%">
      <el-form ref="form" :model="formConfig" :rules="rulesConfig" label-width="auto" class="rule_form">
        <el-form-item label="短信内容：" prop="content">
          <el-input
            type="textarea"
            v-model="formConfig.content"
            clearable 
            placeholder="请输入短信息内容">
          </el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            v-model="formConfig.remark"
            clearable 
            placeholder="请输入短信息内容">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="asyncConfig = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncConfig = false">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { buttonPinia } from '../../pinia';
  export default {
    data() {
      return {
        timeData: '',
        messageId: '',
        messageData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        loading: false,
        wisdomVideoList: [],
        asyncConfig: false,
        formConfig: {},
        rulesConfig: {
          content: [{
            required: true,
            message: '请输入短信信息',
            trigger: 'blur'
          }]
        },
        personnelData: [],
      }
    },
    mounted() {
      this.searchWisdomVideoList(true);
      this.getAllWaringData();
    },
    methods: {
      // 获取预警消息类型
      async getAllWaringData() {
        const { data } = await this.$api.Safety.getAllWaringData();
        this.messageData = data;
      },
      // 查询智慧监控信息
      searchWisdomVideoList(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        this.loading = true;
        this.wisdomVideoList = [];
        this.$api.Safety.searchWisdomVideoList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.messageId,
          strTime: this.timeData ? this.timeData[0] : '',
          endTime: this.timeData ? this.timeData[1] : ''
        }).then((res) => {
          if(res.success) {
            this.total = res.data.total;
            this.wisdomVideoList = res.data.list;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      },      
      // 切换页数
      changePageNum(page) {
        this.pageNum = page;
        this.searchWisdomVideoList();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchWisdomVideoList();
      }
    },
    watch: {
      asyncConfig(bol) {
        if(!bol) {
          this.formConfig = {};
          this.$refs.form.resetFields();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@/style/layout-main.scss';
</style>