|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="96px">
|
|
|
+ <el-form-item label="事件名称" prop="eventName">
|
|
|
+ <el-input v-model="queryParams.eventName" placeholder="请输入事件名称" clearable style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上报时间" prop="day">
|
|
|
+ <el-date-picker v-model="queryParams.day" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="loading" :data="eventcatalogueList">
|
|
|
+ <el-table-column type="selection" align="center" width="50"/>
|
|
|
+ <!--<el-table-column label="事件编号" align="center" prop="eventCode" width="150"/>-->
|
|
|
+ <el-table-column label="事件名称" align="center" prop="eventName"/>
|
|
|
+ <el-table-column label="事件图片" align="center" prop="picturePathList">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ v-for="(itemfile,indexfile) in scope.row.picturePathList"
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="itemfile"
|
|
|
+ :preview-src-list="scope.row.picturePathList"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-s-flag"
|
|
|
+ @click="updateCentereventTEventcatalogueStatus('qr',scope.row)">
|
|
|
+ 确认
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-question"
|
|
|
+ @click="updateCentereventTEventcatalogueStatus('wb',scope.row)">
|
|
|
+ 误报
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-warning"
|
|
|
+ @click="updateCentereventTEventcatalogueStatus('cf',scope.row)">
|
|
|
+ 重复
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-document" @click="handleEventLog(scope.row)">事件日志
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"/>
|
|
|
+ <!-- 事件日志列表 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="openLogSee" width="900px" append-to-body>
|
|
|
+ <div class="block">
|
|
|
+ <el-timeline :reverse="reverse">
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(activity, index) in activities"
|
|
|
+ :key="index"
|
|
|
+ :timestamp="activity.createTime" placement="top">
|
|
|
+ <div>
|
|
|
+ <span>{{ activity.createName }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ activity.logContent }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <router-link to="#"
|
|
|
+ @click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
|
|
|
+ v-for="(itemfile,indexfile) in activity.fileVOs">
|
|
|
+ <el-image :src="itemfile.fileUrl" v-if="itemfile.fileType=='image'"
|
|
|
+ :preview-src-list="assetTypeAnImage(activity.fileVOs)"
|
|
|
+ style="width:3rem; height:3rem;margin: 2px;"
|
|
|
+ :title="itemfile.fileName">
|
|
|
+ </el-image>
|
|
|
+ <img v-else-if="itemfile.fileType=='video'"
|
|
|
+ style="width:3rem; height:3rem;margin: 2px;"
|
|
|
+ :src="require('@/assets/fileTypeImage/mp4.png')"
|
|
|
+ :title="itemfile.fileName">
|
|
|
+ <img v-else
|
|
|
+ style="width:3rem; height:3rem;margin: 2px;"
|
|
|
+ :src="require('@/assets/fileTypeImage/file.png')"
|
|
|
+ :title="itemfile.fileName">
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 图片,视频预览 -->
|
|
|
+ <el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" customClass="customWidthMp4">
|
|
|
+ <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listAll,
|
|
|
+ updateCentereventTEventcatalogueStatus
|
|
|
+} from "@/api/event/eventhandling/eventhandling";
|
|
|
+import {
|
|
|
+ listcentereventtfirelog,
|
|
|
+} from "@/api/event/eventcatalogue/eventcatalogue";
|
|
|
+import Cookies from 'js-cookie';
|
|
|
+import {checkLat, checkLon} from "@/api/rules/rules";
|
|
|
+import TcPlayer from '@/components/TcPlayer'; // 视频预览
|
|
|
+export default {
|
|
|
+ name: "Eventcatalogue",
|
|
|
+ components: {TcPlayer},
|
|
|
+ dicts: [],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sendDeptId: null,//签收部门/发起部门
|
|
|
+ sendDeptName: null,//签收部门/发起部门
|
|
|
+ sendEventType: null,//事件类型
|
|
|
+ sendHuoZaiBanJing: 0,//火灾报告
|
|
|
+ sendGuanLianYuAn: null,//关联预案
|
|
|
+ eventTypeList: [],//事件类型列表
|
|
|
+ deptOptions: [],//签收部门
|
|
|
+ deptOptionsLiandong: [],//联动部门
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 显示新增按钮
|
|
|
+ addBtn: false,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 事件目录表格数据
|
|
|
+ eventcatalogueList: [],
|
|
|
+ eventCode: null,
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ openSee: false,
|
|
|
+ detailSee: true,
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ fileNames: [],
|
|
|
+ openLogSee: false,
|
|
|
+ reverse: false,
|
|
|
+ activities: [],
|
|
|
+ showTcPlayer: false,//视频预览弹窗
|
|
|
+ playVideo: '',//视频预览地址
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ eventName: undefined,
|
|
|
+ day: this.getNowTime(),
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickFile(fileUrl, fileName, fileType) {
|
|
|
+ if (fileType == 'image') {
|
|
|
+ return
|
|
|
+ } else if (fileType == 'video') {
|
|
|
+ this.showTcPlayer = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.playVideo = fileUrl
|
|
|
+ }, 500)
|
|
|
+ } else {
|
|
|
+ let a = document.createElement('a')
|
|
|
+ a.download = fileName
|
|
|
+ a.href = fileUrl
|
|
|
+ a.target = '_blank'
|
|
|
+ a.click()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 返回图片列表
|
|
|
+ assetTypeAnImage(filePath) {
|
|
|
+ let imageList = []
|
|
|
+ if (filePath != null && filePath.length > 0) {
|
|
|
+ for (let i = 0; i < filePath.length; i++) {
|
|
|
+ if (filePath[i].fileType == 'image') {
|
|
|
+ imageList.push(filePath[i].fileUrl)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return imageList
|
|
|
+ },
|
|
|
+ getNowTime() {
|
|
|
+ var now = new Date();
|
|
|
+ var year1 = now.getFullYear(); //得到年份
|
|
|
+ var month1 = now.getMonth(); //得到月份
|
|
|
+ var date1 = now.getDate(); //得到日期
|
|
|
+ month1 = month1 + 1;
|
|
|
+ month1 = month1.toString().padStart(2, "0");
|
|
|
+ date1 = date1.toString().padStart(2, "0");
|
|
|
+ now.setTime(now.getTime() + 24 * 60 * 60 * 1000); //得到明日
|
|
|
+ return `${year1}-${month1}-${date1}`;
|
|
|
+ },
|
|
|
+ /** 查询事件目录列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listAll(this.queryParams).then(response => {
|
|
|
+ this.eventcatalogueList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.openSee = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ dataStatus: "0",
|
|
|
+ eventName: undefined,
|
|
|
+ eventDescription: undefined,
|
|
|
+ eventType: undefined,
|
|
|
+ eventTypeXl: undefined,
|
|
|
+ hgjDeptId: undefined,
|
|
|
+ hgjDeptName: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ deptName: undefined,
|
|
|
+ longitude: undefined,
|
|
|
+ latitude: undefined,
|
|
|
+ fireRadius: undefined,
|
|
|
+ reserve: undefined,
|
|
|
+ address: undefined,
|
|
|
+ fileUrl: undefined,
|
|
|
+ fileName: undefined,
|
|
|
+ eventTypeXlName: undefined,
|
|
|
+ attach: []
|
|
|
+ };
|
|
|
+ this.fileNames = [];
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.queryParams.day = this.getNowTime();
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 详情日志按钮操作 */
|
|
|
+ handleEventLog(row) {
|
|
|
+ this.reset();
|
|
|
+ this.eventCode = row.eventCode;
|
|
|
+ listcentereventtfirelog({eventCode: this.eventCode}).then(res => {
|
|
|
+ this.openLogSee = true;
|
|
|
+ this.title = "事件日志列表";
|
|
|
+ this.activities = res.data.eventlog;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async updateCentereventTEventcatalogueStatus(eventStatus, row) {
|
|
|
+ let that = this
|
|
|
+
|
|
|
+ that.sendDeptId = Cookies.get("deptId")
|
|
|
+ //事件处理流程
|
|
|
+ let param = {
|
|
|
+ eventCode: row.eventCode,
|
|
|
+ eventStatus: eventStatus,
|
|
|
+ eventType: null,
|
|
|
+ id: row.eventId,
|
|
|
+ czlx: '',
|
|
|
+ version: row.version,
|
|
|
+ cameraCode: row.cameraCode,
|
|
|
+ fireRadius: 0,
|
|
|
+ reserve: null,
|
|
|
+ address: row.address,
|
|
|
+ }
|
|
|
+ updateCentereventTEventcatalogueStatus(param).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.$message.success(`处理成功!`)
|
|
|
+ this.getList()
|
|
|
+ } else if (res.code == 304) {
|
|
|
+ this.$message.warning(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.attachment-item {
|
|
|
+ display: inline; /* 将样式改成行内元素 */
|
|
|
+ margin-right: 10px; /* 调整附件项之间的间距 */
|
|
|
+}
|
|
|
+</style>
|