风险分布图增加三人以上分布图和人员聚集场所分布图

main
zhaoyu 2023-12-19 15:28:10 +08:00
parent be3448012a
commit 755928c217
2 changed files with 700 additions and 0 deletions

View File

@ -0,0 +1,350 @@
<template>
<div class="app-container">
<el-form label-width="60px">
<el-row>
<el-col :span="4">
<el-form-item label="文件名">
<el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
v-loading="listLoading"
ref="multipleTable"
:data="varList"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="NAME" label="文件名" />
<el-table-column prop="imgPatn" label="图片" >
<template slot-scope="{row}">
<el-tooltip placement="top">
<template slot="content">
<viewer>
<img :src="config.fileUrl + row.FILEPATH" width="100" height="100">
</viewer>
</template>
<el-tag>预览</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="500">
<template slot-scope="{row}">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="downloadFile(row.RISKWARNING_ID)"></el-button>
<el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.RISKWARNING_ID)"></el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd"></el-button>
<el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="batchDel"></el-button>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
<el-dialog :visible.sync="dialogForm" title="上传文件" width="600px">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
<el-form-item label="文件名" prop="NAME">
<el-input v-model="form.NAME" placeholder="这里输入名称..." />
</el-form-item>
<el-form-item label="附件">
<el-upload
ref="upload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChangeIMG"
:before-upload="beforeFileUpload"
:auto-upload="false"
:limit="1"
:class="{hide:hideUpload}"
action="#"
accept=".jpg,.jpeg,.png"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogForm = false"> </el-button>
<el-button type="primary" @click="upload"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // el-pagination
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import { upload } from '@/utils/upload'
export default {
components: { Pagination },
directives: { waves },
data() {
return {
config: config,
listLoading: true,
dialogForm: false,
dialogImageUrl: '',
dialogVisible: false,
add: true,
del: true,
edit: true,
listQuery: {
page: 1,
limit: 20
},
total: 0,
KEYWORDS: '',
dates: [],
varList: [],
hideUpload: false,
form: {
NAME: '', //
FFILE: []
},
rules: {
NAME: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getList()
},
methods: {
getRowKey(row) {
return row.RISKWARNING_ID
},
//
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
},
//
getList() {
this.listLoading = true
requestFN(
'/riskwarning/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
KEYWORDS: this.KEYWORDS,
TYPE: '4'
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
this.hasButton()
}).catch((e) => {
this.listLoading = false
})
},
//
handleAdd() {
this.hideUpload = false
this.resetForm()
if (this.$refs.upload) {
this.$refs.upload.clearFiles()
}
this.dialogForm = true
},
beforeFileUpload(file) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
return false
} else {
this.form.FFILE = file
}
},
handlePictureCardPreview(file, fileList) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleChangeIMG(file, fileList) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.raw.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
fileList.pop()
}
this.hideUpload = fileList.length >= 1
},
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= 1
},
//
upload() {
this.$refs.form.validate(valid => {
if (this.$refs.upload.uploadFiles.length < 1) {
this.$message({
message: '请上传图片',
type: 'error'
})
return false
}
this.$refs.upload.submit()
const loading = this.$loading({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const formData = new FormData()
Object.keys(this.form).map(key => {
formData.append(key, this.form[key])
})
formData.append('TYPE', '4')
upload(
'/riskwarning/add',
formData
).then((data) => {
this.dialogForm = false
this.getList()
loading.close()
}).catch((e) => {
loading.close()
})
})
},
downloadFile(RISKWARNING_ID) {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
// '/mfolder/download?RISKWARNING_ID=' + RISKWARNING_ID,
window.location.href = config.httpurl + 'riskwarning/goDownload?RISKWARNING_ID=' + RISKWARNING_ID
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
handleDelete(id) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'/riskwarning/delete',
{
RISKWARNING_ID: id
}
).then(() => {
this.$message({
message: '删除成功',
type: 'success'
})
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
batchDel() {
const _selectData = this.$refs.multipleTable.selection
if (_selectData == null || _selectData.length == 0) {
this.$message({
message: '请选中要删除的项...',
type: 'error'
})
return false
}
const ids = _selectData.map((item, index) => {
return item.RISKWARNING_ID
}).join(',')
this.$confirm('确定要删除选中的数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'/riskwarning/deleteAll',
{
DATA_IDS: ids
}
).then(() => {
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.$refs.multipleTable.clearSelection()
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
//
hasButton: function() {
var keys = 'riskwarning:add,riskwarning:del,riskwarning:edit,toExcel'
requestFN(
'/head/hasButton',
{
keys: keys
}
).then((data) => {
this.add = data.riskwarningfhadminadd //
this.del = data.riskwarningfhadmindel //
this.edit = data.riskwarningfhadminedit //
}).catch((e) => {
this.listLoading = false
})
},
goKeyReset() {
this.KEYWORDS = ''
this.getList()
},
resetForm() {
this.form = {
NAME: '', //
FFILE: []
}
}
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>

View File

@ -0,0 +1,350 @@
<template>
<div class="app-container">
<el-form label-width="60px">
<el-row>
<el-col :span="4">
<el-form-item label="文件名">
<el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
v-loading="listLoading"
ref="multipleTable"
:data="varList"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="NAME" label="文件名" />
<el-table-column prop="imgPatn" label="图片" >
<template slot-scope="{row}">
<el-tooltip placement="top">
<template slot="content">
<viewer>
<img :src="config.fileUrl + row.FILEPATH" width="100" height="100">
</viewer>
</template>
<el-tag>预览</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="500">
<template slot-scope="{row}">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="downloadFile(row.RISKWARNING_ID)"></el-button>
<el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.RISKWARNING_ID)"></el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd"></el-button>
<el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="batchDel"></el-button>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
<el-dialog :visible.sync="dialogForm" title="上传文件" width="600px">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
<el-form-item label="文件名" prop="NAME">
<el-input v-model="form.NAME" placeholder="这里输入名称..." />
</el-form-item>
<el-form-item label="附件">
<el-upload
ref="upload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChangeIMG"
:before-upload="beforeFileUpload"
:auto-upload="false"
:limit="1"
:class="{hide:hideUpload}"
action="#"
accept=".jpg,.jpeg,.png"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogForm = false"> </el-button>
<el-button type="primary" @click="upload"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // el-pagination
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import { upload } from '@/utils/upload'
export default {
components: { Pagination },
directives: { waves },
data() {
return {
config: config,
listLoading: true,
dialogForm: false,
dialogImageUrl: '',
dialogVisible: false,
add: true,
del: true,
edit: true,
listQuery: {
page: 1,
limit: 20
},
total: 0,
KEYWORDS: '',
dates: [],
varList: [],
hideUpload: false,
form: {
NAME: '', //
FFILE: []
},
rules: {
NAME: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getList()
},
methods: {
getRowKey(row) {
return row.RISKWARNING_ID
},
//
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
},
//
getList() {
this.listLoading = true
requestFN(
'/riskwarning/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
KEYWORDS: this.KEYWORDS,
TYPE: '3'
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
this.hasButton()
}).catch((e) => {
this.listLoading = false
})
},
//
handleAdd() {
this.hideUpload = false
this.resetForm()
if (this.$refs.upload) {
this.$refs.upload.clearFiles()
}
this.dialogForm = true
},
beforeFileUpload(file) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
return false
} else {
this.form.FFILE = file
}
},
handlePictureCardPreview(file, fileList) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleChangeIMG(file, fileList) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.raw.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
fileList.pop()
}
this.hideUpload = fileList.length >= 1
},
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= 1
},
//
upload() {
this.$refs.form.validate(valid => {
if (this.$refs.upload.uploadFiles.length < 1) {
this.$message({
message: '请上传图片',
type: 'error'
})
return false
}
this.$refs.upload.submit()
const loading = this.$loading({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const formData = new FormData()
Object.keys(this.form).map(key => {
formData.append(key, this.form[key])
})
formData.append('TYPE', '3')
upload(
'/riskwarning/add',
formData
).then((data) => {
this.dialogForm = false
this.getList()
loading.close()
}).catch((e) => {
loading.close()
})
})
},
downloadFile(RISKWARNING_ID) {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
// '/mfolder/download?RISKWARNING_ID=' + RISKWARNING_ID,
window.location.href = config.httpurl + 'riskwarning/goDownload?RISKWARNING_ID=' + RISKWARNING_ID
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
handleDelete(id) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'/riskwarning/delete',
{
RISKWARNING_ID: id
}
).then(() => {
this.$message({
message: '删除成功',
type: 'success'
})
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
batchDel() {
const _selectData = this.$refs.multipleTable.selection
if (_selectData == null || _selectData.length == 0) {
this.$message({
message: '请选中要删除的项...',
type: 'error'
})
return false
}
const ids = _selectData.map((item, index) => {
return item.RISKWARNING_ID
}).join(',')
this.$confirm('确定要删除选中的数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'/riskwarning/deleteAll',
{
DATA_IDS: ids
}
).then(() => {
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.$refs.multipleTable.clearSelection()
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
//
hasButton: function() {
var keys = 'riskwarning:add,riskwarning:del,riskwarning:edit,toExcel'
requestFN(
'/head/hasButton',
{
keys: keys
}
).then((data) => {
this.add = data.riskwarningfhadminadd //
this.del = data.riskwarningfhadmindel //
this.edit = data.riskwarningfhadminedit //
}).catch((e) => {
this.listLoading = false
})
},
goKeyReset() {
this.KEYWORDS = ''
this.getList()
},
resetForm() {
this.form = {
NAME: '', //
FFILE: []
}
}
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>