| | |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | v-model="validTime" |
| | | type="daterange" |
| | | :default-time="['00:00:00','23:59:59']" |
| | | :default-time="['00:00:00', '23:59:59']" |
| | | range-separator="-" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | > |
| | | </el-date-picker> |
| | | </div> |
| | | <div class="basic_search" style="margin-right: 10px;padding-top: 10px"> |
| | | <div |
| | | class="basic_search" |
| | | style="margin-right: 10px;padding-top: 10px" |
| | | > |
| | | <span>状态:</span> |
| | | <el-select v-model="listQuery.filter.alarmStatus" clearable filterable> |
| | | <el-select |
| | | v-model="listQuery.filter.alarmStatus" |
| | | clearable |
| | | filterable |
| | | > |
| | | <el-option key="0" label="全部" value=""></el-option> |
| | | <el-option key="1" label="未销警" :value="0"></el-option> |
| | | <el-option key="2" label="已销警" :value="1"></el-option> |
| | | <el-option |
| | | key="1" |
| | | label="未销警" |
| | | :value="0" |
| | | ></el-option> |
| | | <el-option |
| | | key="2" |
| | | label="已销警" |
| | | :value="1" |
| | | ></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="basic_search" style="margin-right: 10px;padding-top: 10px"> |
| | | <div |
| | | class="basic_search" |
| | | style="margin-right: 10px;padding-top: 10px" |
| | | > |
| | | <span>报警类型:</span> |
| | | <el-select v-model="listQuery.filter.algoModel" clearable filterable> |
| | | <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value"></el-option> |
| | | <el-select |
| | | v-model="listQuery.filter.algoModel" |
| | | clearable |
| | | filterable |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in typeList" |
| | | :key="index" |
| | | :label="item.name" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="basic_search"> |
| | | <span>企业名称:</span> |
| | | <el-input v-model.trim="listQuery.filter.companyName" style="width: 300px"/> |
| | | <el-input |
| | | v-model.trim="listQuery.filter.companyName" |
| | | style="width: 300px" |
| | | /> |
| | | </div> |
| | | <div class="basic_search" style="margin-right: 10px"> |
| | | <el-button style="margin-left: 10px;" type="primary" @click="reset()">重置</el-button> |
| | | <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="search()">查询</el-button> |
| | | <el-button |
| | | style="margin-left: 10px;" |
| | | type="primary" |
| | | @click="reset()" |
| | | >重置</el-button |
| | | > |
| | | <el-button |
| | | style="margin-left: 10px;" |
| | | type="primary" |
| | | icon="el-icon-search" |
| | | @click="search()" |
| | | >查询</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | highlight-current-row |
| | | style="width: 100%;" |
| | | > |
| | | <el-table-column label="序号" type="index" align="center"></el-table-column> |
| | | <el-table-column label="企业" prop="companyName" align="center"></el-table-column> |
| | | <el-table-column label="仓库" prop="storeName" align="center"></el-table-column> |
| | | <el-table-column label="库房" prop="storeroomName" align="center"></el-table-column> |
| | | <el-table-column label="报警类型" prop="algoModel" align="center"> |
| | | <el-table-column |
| | | label="序号" |
| | | type="index" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="企业" |
| | | prop="companyName" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="仓库" |
| | | prop="storeName" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="库房" |
| | | prop="storeroomName" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="报警类型" |
| | | prop="algoModel" |
| | | align="center" |
| | | > |
| | | <template slot-scope="scope"> |
| | | {{ getTypeName(scope.row.algoModel) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="报警状态" prop="alarmStatus" align="center"> |
| | | <el-table-column |
| | | label="报警状态" |
| | | prop="alarmStatus" |
| | | align="center" |
| | | > |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.alarmStatus == 1?'已销警':'未销警' }} |
| | | {{ scope.row.alarmStatus == 1 ? "已销警" : "未销警" }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="报警图片" prop="alarmFile" align="center"> |
| | | <el-table-column |
| | | label="报警图片" |
| | | prop="alarmFile" |
| | | align="center" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-image style="width: 100px; height: 100px" :preview-src-list="[scope.row.alarmFile]" :src="scope.row.alarmFile" fit="cover"></el-image> |
| | | <el-image v-if="scope.row.alarmFile" |
| | | style="width: 100px; height: 100px" |
| | | :preview-src-list="[scope.row.alarmFile]" |
| | | :src="scope.row.alarmFile" |
| | | fit="cover" |
| | | ></el-image> |
| | | <span v-else>未传图片</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="报警时间" prop="warningDate" align="center"></el-table-column> |
| | | <el-table-column label="销警时间" prop="clearDate" align="center"></el-table-column> |
| | | <!-- <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-button type="text" @click="clearWarning(scope.row.id)">销警</el-button>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | label="报警时间" |
| | | prop="warningDate" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="销警时间" |
| | | prop="clearDate" |
| | | align="center" |
| | | ></el-table-column> |
| | | <!-- <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-button type="text" @click="clearWarning(scope.row.id)">销警</el-button>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | <br> |
| | | <br /> |
| | | <div style="display: flex;justify-content: right"> |
| | | <el-pagination |
| | | v-show="recordTotal>0" |
| | | v-show="recordTotal > 0" |
| | | :current-page="currentPage" |
| | | :page-sizes="[10, 20, 30, 50]" |
| | | :page-size="listQuery.pageSize" |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {computePageCount} from "../../../utils"; |
| | | import {regionPifaBox} from "../../../api/stock" |
| | | import warningInfoDialog from "./components/warningInfoDialog" |
| | | import {editAlarmInfo, getOriginalAlarm, getOriginalPerson} from "../../../api/monitorAlert"; |
| | | import { computePageCount } from "../../../utils"; |
| | | import { regionPifaBox } from "../../../api/stock"; |
| | | import warningInfoDialog from "./components/warningInfoDialog"; |
| | | import { |
| | | editAlarmInfo, |
| | | getOriginalAlarm, |
| | | getOriginalPerson |
| | | } from "../../../api/monitorAlert"; |
| | | |
| | | export default { |
| | | name: "warningInfo", |
| | | components: { warningInfoDialog }, |
| | | data() { |
| | | return { |
| | | tableKey: '', |
| | | tableKey: "", |
| | | recordTotal: 0, |
| | | currentPage: 1, |
| | | validTime: [], |
| | | dataList: [], |
| | | listQuery: { |
| | | filter:{ |
| | | alarmStartTime: '', |
| | | alarmEndTime: '', |
| | | filter: { |
| | | alarmStartTime: "", |
| | | alarmEndTime: "", |
| | | alarmStatus: null, |
| | | companyCode: '', |
| | | companyName: '', |
| | | algoModel: '' |
| | | companyCode: "", |
| | | companyName: "", |
| | | algoModel: "" |
| | | }, |
| | | pageIndex:1, |
| | | pageSize:10 |
| | | pageIndex: 1, |
| | | pageSize: 10 |
| | | }, |
| | | typeList: [ |
| | | { |
| | | name: '吸烟检测', |
| | | value: 'SmokingAlarm' |
| | | name: "吸烟检测", |
| | | value: "SmokingAlarm" |
| | | }, |
| | | { |
| | | name: '逃生通道堵塞', |
| | | value: 'ChannelBlockageDetection' |
| | | name: "逃生通道堵塞", |
| | | value: "ChannelBlockageDetection" |
| | | }, |
| | | { |
| | | name: '区域入侵', |
| | | value: 'FieldDetectorObjectsInside' |
| | | name: "区域入侵", |
| | | value: "FieldDetectorObjectsInside" |
| | | }, |
| | | { |
| | | name: '人员数量超限', |
| | | value: 'CrowdDensityCriticalAlarm' |
| | | name: "人员数量超限", |
| | | value: "CrowdDensityCriticalAlarm" |
| | | }, |
| | | { |
| | | name: '明火检测', |
| | | value: 'FireDetection' |
| | | name: "明火检测", |
| | | value: "firedetection" |
| | | }, |
| | | { |
| | | name: '预置标记检测', |
| | | value: 'PresetMarkerDetection' |
| | | name: "预置标记检测", |
| | | value: "PresetMarkerDetection" |
| | | } |
| | | ] |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getDataList() |
| | | this.getDataList(); |
| | | }, |
| | | mounted() { |
| | | }, |
| | | mounted() {}, |
| | | watch: {}, |
| | | methods: { |
| | | openDialog(type,data){ |
| | | this.$refs.warningInfoRef.open(type,data) |
| | | openDialog(type, data) { |
| | | this.$refs.warningInfoRef.open(type, data); |
| | | }, |
| | | clearWarning(id){ |
| | | this.$confirm('确定执行销警操作?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(async() => { |
| | | let res = await editAlarmInfo({id: id}) |
| | | if (res.data.code === "200") { |
| | | clearWarning(id) { |
| | | this.$confirm("确定执行销警操作?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(async () => { |
| | | let res = await editAlarmInfo({ id: id }); |
| | | if (res.data.code === "200") { |
| | | this.$message({ |
| | | type: "success", |
| | | message: res.data.message |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | type: "warning", |
| | | message: res.data.message |
| | | }); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: res.data.message |
| | | }) |
| | | } else { |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: res.data.message |
| | | }) |
| | | } |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消' |
| | | type: "info", |
| | | message: "已取消" |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | getTypeName(type){ |
| | | return this.typeList.find(i=>i.value == type).name |
| | | getTypeName(type) { |
| | | const node = this.typeList.find(i => i.value == type); |
| | | if (node) { |
| | | return node.name; |
| | | } else { |
| | | return ""; |
| | | } |
| | | }, |
| | | async getDataList() { |
| | | if(this.validTime.length>0){ |
| | | this.listQuery.filter.alarmStartTime = this.validTime[0] |
| | | this.listQuery.filter.alarmEndTime = this.validTime[1] |
| | | if (this.validTime.length > 0) { |
| | | this.listQuery.filter.alarmStartTime = this.validTime[0]; |
| | | this.listQuery.filter.alarmEndTime = this.validTime[1]; |
| | | } |
| | | let res = await getOriginalAlarm(this.listQuery) |
| | | let res = await getOriginalAlarm(this.listQuery); |
| | | if (res.data.code === "200") { |
| | | const data = res.data.result |
| | | if(Array.isArray(data.records)){ |
| | | const data = res.data.result; |
| | | if (Array.isArray(data.records)) { |
| | | this.dataList = data.records.map(item => { |
| | | return { |
| | | ...item, |
| | | alarmFile: process.env.IMG_API + item.alarmFile |
| | | } |
| | | }) |
| | | this.recordTotal = data.total |
| | | this.currentPage = data.current |
| | | }else{ |
| | | this.dataList = [] |
| | | return { |
| | | ...item, |
| | | alarmFile: item.alarmFile?process.env.IMG_API + item.alarmFile:null |
| | | }; |
| | | }); |
| | | this.recordTotal = data.total; |
| | | this.currentPage = data.current; |
| | | } else { |
| | | this.dataList = []; |
| | | } |
| | | } else { |
| | | this.$message({ |
| | | type: 'warning', |
| | | type: "warning", |
| | | message: res.data.message |
| | | }) |
| | | }); |
| | | } |
| | | }, |
| | | handleSizeChange: function(val) { |
| | | this.listQuery.pageSize = val |
| | | this.getDataList() |
| | | this.listQuery.pageSize = val; |
| | | this.getDataList(); |
| | | }, |
| | | handleCurrentChange: function(val) { |
| | | this.listQuery.pageIndex = val |
| | | this.getDataList() |
| | | this.listQuery.pageIndex = val; |
| | | this.getDataList(); |
| | | }, |
| | | reset(){ |
| | | reset() { |
| | | this.listQuery = { |
| | | filter:{ |
| | | alarmStartTime: '', |
| | | alarmEndTime: '', |
| | | filter: { |
| | | alarmStartTime: "", |
| | | alarmEndTime: "", |
| | | alarmStatus: null, |
| | | companyCode: '', |
| | | companyName: '', |
| | | algoModel: '' |
| | | companyCode: "", |
| | | companyName: "", |
| | | algoModel: "" |
| | | }, |
| | | pageIndex:1, |
| | | pageSize:10 |
| | | } |
| | | this.validTime = [] |
| | | this.getDataList() |
| | | pageIndex: 1, |
| | | pageSize: 10 |
| | | }; |
| | | this.validTime = []; |
| | | this.getDataList(); |
| | | }, |
| | | search(){ |
| | | this.listQuery.pageIndex = 1 |
| | | this.getDataList() |
| | | search() { |
| | | this.listQuery.pageIndex = 1; |
| | | this.getDataList(); |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |