<template> <app-container> <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData(false)" @clear="clearInput"> <!--一般查询条件--> <search-item> <el-select v-model="listQuery.level" size="small" placeholder="危险级别" style="width: 150px" clearable @change="fetchData(false)"> <el-option v-for="item in levelList" :key="item.code" :label="item.name" :value="item.code" /> </el-select> </search-item> <search-item> <el-select v-model="listQuery.type" size="small" placeholder="事件类别" style="width: 150px" clearable @change="fetchData(false)"> <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code"/> </el-select> </search-item> <search-item> <el-select v-model="listQuery.status" size="small" placeholder="事件状态" style="width: 150px" clearable @change="fetchData(false)"> <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </search-item> <search-item> <el-select v-model="listQuery.position" size="small" placeholder="所在区域" style="width: 150px" clearable @change="fetchData(false)"> <el-option v-for="item in positionList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </search-item> <search-item> <el-select v-model="listQuery.area" size="small" placeholder="楼层" style="width: 150px" clearable @change="fetchData(false)"> <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </search-item> <search-item> <el-input v-model.trim="listQuery.description" size="small" placeholder="事件描述" @change="fetchData(false)"/> </search-item> <search-item> <el-date-picker v-model="timeRange" type="datetimerange" size="small" @change="fetchData(false)" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="事件开始时间" end-placeholder="事件结束时间" /> </search-item> </search-area> <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage" @selectionChange="handleSelectionChange"> <template slot="btns"> <el-button size="small" class="edit_btn" icon="el-icon-s-claim" @click="clear()"> 一键解决 </el-button> <download-template :filename="filename" /> <el-upload :limit="1" :show-file-list="false" :http-request="uploadFile" :file-list="fileList" action="string" style="float:right; margin:0 3px;" accept=".xls,.xlsx" > <el-button slot="trigger" size="small" icon="el-icon-folder-add"> 批量导入 </el-button> </el-upload> </template> <template slot="columns"> <el-table-column label="危险级别" align="center" width="80" show-overflow-tooltip> <template slot-scope="scope"> <span :class="checkCell(scope.row)"> {{ scope.row.levelName }}</span> </template> </el-table-column> <el-table-column label="事件照片" align="center" width="120"> <template slot-scope="scope"> <el-image :src="scope.row.eventPicture ? `${scope.row.eventPicture}`: defaultPhoto" :preview-src-list="srcList" width="50" height="50" style="width: 50px; height: 50px;margin-top: 10px" @error="errorImg"/> </template> </el-table-column> <el-table-column label="操作" align="center" width="130"> <template slot-scope="scope"> <el-select v-model="scope.row.status" size="small" placeholder="事件状态" @change="edit(scope.row)"> <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </template> </el-table-column> </template> </normal-table> </app-container> </template> <script> import { getDictByCode } from '@/api/system/dict' import DownloadTemplate from '@/components/DownloadTemplate/index' import NormalTable from '@/components/NormalTable' import AppContainer from '@/components/layout/AppContainer' import SearchArea from '@/components/SearchArea/SearchArea' import SearchItem from '@/components/SearchArea/SearchItem' import { getCaseLevelList, getCaseTypeList, getCaseListPage, updateCase, batchImportCase, oneClickSolved } from '@/api/case' export default { name: 'CaseList', components: { SearchItem, SearchArea, AppContainer, NormalTable, DownloadTemplate }, data() { return { defaultPhoto: require('@/assets/global_images/photo_error.png'), errorImg: require('@/assets/global_images/photo_error.png'), positionList: [], srcList: [], areaList: [], listQuery: { level: '', type: '', status: '', description: '', position: '', area: '', drawNo: '', happenStartTime: '', happenEndTime: '', offset: 1, limit: 20 }, // 筛选条件 columns: [ { text: '事件描述', value: 'description', align: 'center', width: 150 }, { text: '事件类别', value: 'typeName', align: 'center', width: 120 }, { text: '识别设备', value: 'devName', align: 'center', width: 120 }, { text: '事件位置', value: 'detailLocation', align: 'center' }, { text: '区域', value: 'areaFullName', align: 'center', width: 120 }, { text: '是否为重点区域', value: 'isKeyAreaName', align: 'center', width: 120 }, { text: '发生时间', value: 'happenTime', align: 'center', width: 150 } ], // 显示列 levelList: [], typeList: [], statusList: [], dialogFormVisible: false, // 是否显示编辑框 timeRange: [], // 时间范围 multipleSelection: [], // 多选选中项 list: [], // 列表数据 total: 0, // 数据总数 listLoading: true, // 列表加载动画 filename: 'CaseInfoTemp.xlsx', fileList: [], tableOption: { head: { show: true, // 是否需要标题栏, text: '数据列表' // 标题名称 }, options: { needIndex: true // 是否需要序号列 }, toolsOption: { selectColumns: false, // 是否需要筛选列 refresh: false, // 是否需要刷新按钮 needCheckBox: false } } // 表格属性 } }, watch: { timeRange(val) { if (val && val.length > 0) { this.listQuery.happenStartTime = val[0] this.listQuery.happenEndTime = val[1] } else { this.listQuery.happenStartTime = '' this.listQuery.happenEndTime = '' } } }, created() { this.fetchOptions() this.fetchData() }, methods: { checkCell(val) { switch (val.levelName) { case '重大': return 'hard-state' case '较大': return 'medium-state' default: return 'low-state' } }, fetchOptions() { getDictByCode('caseStatus').then(response => { if (response.code === 200) { this.statusList = response.data } }) getDictByCode('devicePosition').then(response => { if (response.code === 200) { this.positionList = response.data } }) getDictByCode('deviceArea').then(response => { if (response.code === 200) { this.areaList = response.data } }) getCaseTypeList().then(response => { if (response.code === 200) { this.typeList = response.data } }) getCaseLevelList().then(response => { if (response.code === 200) { this.levelList = response.data } }) }, clear() { this.$confirm('是否确认一键解决所有事件?', '提示', { confirmButtonText: '是', cancelButtonText: '否', type: 'info' }).then(() => { // 选是 oneClickSolved().then(response => { if (response.code === 200) { this.$message.success('所有事件一键已解决') this.fetchData() } }) }).catch(() => { // 选否,关闭窗口,并刷新页面 }) }, uploadFile(param) { // 判断文件大小是否符合要求 const _file = param.file const isLt5M = _file.size / 1024 / 1024 < 5 if (!isLt5M) { this.$message.error('请上传5M以下的excel文件') return false } // 全屏加载动画 const loading = this.$loading({ lock: true, text: '导入中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) // 发起导入请求 batchImportCase(_file).then(res => { loading.close() // 关闭加载动画 if (res.code === 200) { this.$message.success('导入成功') this.fetchData(false) } else { this.$message.error(res.message) } }).catch(() => { loading.close() // 关闭加载动画 }) this.fileList = [] }, fetchData(isNowPage = true) { this.listLoading = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 this.listQuery.offset = 1 } getCaseListPage(this.listQuery).then(response => { if (response.code === 200) { this.list = response.data.rows.map(item => { item.areaFullName = item.positionName + item.areaName return item }) this.srcList = response.data.rows.map(item => item.eventPicture) this.total = parseInt(response.data.total) this.listLoading = false } }) }, // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 changePage(val) { if (val && val.size) { this.listQuery.limit = val.size } if (val && val.page) { this.listQuery.offset = val.page } this.fetchData() }, edit(row) { this.$confirm( '确定要修改该事件状态吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { console.log(row.status) const data = { id: row.id, status: row.status } updateCase(data).then(response => { if (response.code === 200) { this.$message.success('修改成功') this.fetchData() } }) }) }, handleSelectionChange(val) { this.multipleSelection = val }, clearInput() { this.listQuery = { level: '', type: '', status: '', description: '', position: '', area: '', drawNo: '', happenStartTime: '', happenEndTime: '', offset: 1, limit: 20 } this.timeRange = [] this.fetchData() } } } </script> <style scoped> .hard-state{ color:red; font-weight: bold; } .medium-state{ color: #ea9700; font-weight: bold; } .low-state{ color: #409EFF; font-weight: bold; } </style>