guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

li

liujun0703-新项目开发
liy 2024-07-09 10:24:58 +08:00
parent 48ee0028ce
commit 21011c380d
6 changed files with 1626 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/views/emergen_cyrescue/resource_management/emergency_supplies/components/detail.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div>
<div class="app-container">
<div class="level-title">
<h1>应急救援物资</h1>
</div>
<div class="mb-20">
<table class="table-ui">
<tr>
<td class="tbg">物资名称</td>
<td>{{ form.SUPPLIES_NAME }}</td>
<td class="tbg">物资类别</td>
<td>{{ form.TYPE_NAME }}</td>
</tr>
<tr>
<td class="tbg">经度</td>
<td>{{ form.LONGITUDE }}</td>
<td class="tbg">纬度</td>
<td>{{ form.LATITUDE }}</td>
</tr>
<tr>
<td class="tbg">联系人</td>
<td>{{ form.CONTACT_PERSON }}</td>
<td class="tbg">联系人固定电话</td>
<td>{{ form.CONTACT_TELE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人移动电话</td>
<td>{{ form.CONTACT_MOBILE_PHONE }}</td>
<td class="tbg"/>
<td/>
</tr>
<tr>
<td class="tbg">企业物资名称</td>
<td>{{ form.COMPANY }}</td>
<td class="tbg">所属区域</td>
<td>{{ form.REGION_NAME }}</td>
</tr>
<tr>
<td class="tbg">所属单位</td>
<td>{{ form.AFFILIATEDUNIT_NAME }}</td>
<td class="tbg"/>
<td/>
</tr>
</table>
</div>
</div>
<div class="ui-height" />
<div class="ui-foot">
<el-button type="primary" @click="goBack">返回基本信息</el-button>
</div>
</div>
</template>
<script>
import { requestFN } from '@/utils/request'
export default {
data() {
return {
form: {
// 物资名称
SUPPLIES_NAME: '',
// 物资类别
TYPE: '',
// 经度
LONGITUDE: '',
// 纬度
LATITUDE: '',
// 联系人
CONTACT_PERSON: '',
// 联系人固定电话
CONTACT_TELE_PHONE: '',
// 联系人移动电话
CONTACT_MOBILE_PHONE: '',
// 详情地址
ADDRESS: '',
// 企业物资名称
COMPANY: '',
// 所属区域
REGION: '',
// 所属单位
AFFILIATEDUNIT: ''
},
Id: ''
}
},
created() {
if (this.$parent.CASE_ID) {
this.Id = this.$parent.CASE_ID
this.getDetail(this.Id)
}
},
methods: {
goBack() {
this.$parent.activeName = 'list'
},
//* ************************下载**********************
download(obj) {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.downloadUrl = config.fileUrl + obj.FILE_URL
const _this = this
setTimeout(function() {
window.open(_this.downloadUrl)
}, 200)
}).catch(() => {
})
},
//* **************************************
getDetail(id) {
const params = {
id: id
}
requestFN('/rescueSupplies/detail', params).then((response) => {
const data = response.data
console.log(data)
this.form = {
// 物资名称
SUPPLIES_NAME: data.SUPPLIES_NAME,
// 物资类别
TYPE: data.TYPE,
// 经度
LONGITUDE: data.LONGITUDE,
// 纬度
LATITUDE: data.LATITUDE,
// 联系人
CONTACT_PERSON: data.CONTACT_PERSON,
// 联系人固定电话
CONTACT_TELE_PHONE: data.CONTACT_TELE_PHONE,
// 联系人移动电话
CONTACT_MOBILE_PHONE: data.CONTACT_MOBILE_PHONE,
// 企业物资名称
COMPANY: data.COMPANY,
// 所属区域
REGION: data.REGION,
// 所属单位
AFFILIATEDUNIT: data.AFFILIATEDUNIT,
SUPPLIES_ID: data.SUPPLIES_ID,
REGION_NAME: data.REGION_NAME,
AFFILIATEDUNIT_NAME: data.AFFILIATEDUNIT_NAME,
TYPE_NAME: data.TYPE_NAME
}
}).catch((e) => {
console.error('获取详情数据失败', e)
})
}
}
}
</script>
<style lang="sass" scoped>
.table-ui
td
line-height: 34px
.tbg
width: 200px
.ui-foot
text-align: center
margin-top: 20px
</style>

618
src/views/emergen_cyrescue/resource_management/emergency_supplies/components/list.vue Normal file
View File

@ -0,0 +1,618 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
</div>
<el-table ref="multipleTable" :data="varList" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="SUPPLIES_NAME" label="物资名称" width="180" />
<el-table-column prop="TYPE_NAME" label="物资类别" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_PERSON" label="负责保管人" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_TELE_PHONE" label="负责保管人固定电话" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_MOBILE_PHONE" label="负责保管人移动电话" show-overflow-tooltip="true" />
<el-table-column prop="UPDATE_TIME_STRING" label="修改时间" show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="300">
<template slot-scope="{row}">
<el-button type="primary" icon="el-icon-document" size="mini" @click="goList('detail', row.SUPPLIES_ID, '1')">查看</el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row.SUPPLIES_ID)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.SUPPLIES_ID,row.SUPPLIES_NAME)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<template>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="makeAll('0')">删除</el-button>
</template>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
<el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='editUser'?'修改':'新增'" width="1000px">
<el-form ref="form" :rules="rules" :model="form" label-width="180px">
<el-form-item label="资源名称" prop="SUPPLIES_NAME">
<el-input v-model="form.SUPPLIES_NAME" placeholder="请输入资源名称..." />
</el-form-item>
<el-form-item label="物资类别" prop="TYPE">
<Treeselect
:options="yjrescueSuppliesData"
:normalizer="normalizer"
v-model="form.TYPE"
placeholder="请选择物资类别"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
<div style="display: flex">
<el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
<el-button style="margin-left:10px" @click="handleMap">
<span class="svg-container">
<svg-icon icon-class="international" />
</span>
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20"/>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="负责保管人" prop="CONTACT_PERSON">
<el-input v-model="form.CONTACT_PERSON" placeholder="请输入负责保管人..." />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责保管人固定电话" prop="CONTACT_OFFICE_PHONE">
<el-input v-model="form.CONTACT_TELE_PHONE" placeholder="请输入负责保管人固定电话..." />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="负责保管人移动电话" prop="CONTACT_PERSON">
<el-input v-model="form.CONTACT_MOBILE_PHONE" placeholder="请输入负责保管人移动电话..." />
</el-form-item>
</el-col>
<el-col :span="12"/>
</el-row>
<el-form-item label="企业名称" prop="REMARKS">
<el-input v-model="form.COMPANY" placeholder="请输入企业名称..." />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属区域" prop="ADMINISTRATIVE_REGION">
<Treeselect
:options="treeData"
:normalizer="normalizer"
v-model="form.REGION"
:disable-branch-nodes="true"
placeholder="请选择所属区域"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采集单位" prop="SUPERVISING_AGENCY">
<Treeselect
:options="DepartmentData"
v-model="form.AFFILIATEDUNIT"
placeholder="请选择采集单位"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormEdit = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<!-- 坐标选择 -->
<el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
<baidu-map
v-ISLOADing="ISLOADingMap"
:zoom="zoom"
:scroll-wheel-zoom="true"
:style="{height: clientHeight+'px'}"
@click="getClickInfo"
@ready="handler">
<bm-view style="width: 100%; height:100%; flex: 1" />
<bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
<div class="map-flex">
<div class="map-lable">关键词：</div>
<div style="flex:1;">
<el-autocomplete v-model="TYPEKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细设备类型" style="width:100%" @select="handleSelect" />
</div>
<!-- <el-input v-model="TYPEKeyword" style="width: 200px" placeholder="请输入内容" />-->
<!-- <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
</div>
</bm-control>
<!-- <bm-local-search :keyword="TYPEKeyword" :auto-viewport="true"/>-->
</baidu-map>
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import { Treeselect } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { upload } from '@/utils/upload'
export default {
components: { Treeselect, Pagination },
data() {
return {
// 地图相关
CORPINFO_ID: this.$parent.CORPINFO_ID,
clientHeight: 600,
ISLOADingMap: true,
listISLOADing: false,
buttonISLOADing: false,
BMap: '',
map: '',
showMap: false,
TYPEKeyword: '',
pointLngLat: '',
zoom: 10,
dialogFormMap: false,
LATITUDE: '',
LONGITUDE: '',
listQuery: {
page: 1,
limit: 10
},
total: 0,
varList: [],
KEYWORDS: '',
dialogFormEdit: false,
dialogFormShow: false,
dialogType: 'add',
form: {
// 名称
SUPPLIES_NAME: '',
// 设备类型
TYPE: '',
// 经度
LONGITUDE: '',
// 纬度
LATITUDE: '',
// 负责保管人
CONTACT_PERSON: '',
// 负责保管人固定电话
CONTACT_TELE_PHONE: '',
// 负责保管人移动电话
CONTACT_MOBILE_PHONE: '',
// 详情地址
ADDRESS: '',
// 企业名称
COMPANY: '',
// 所属区域
REGION: '',
// 采集单位
AFFILIATEDUNIT: ''
},
yjrescueSuppliesData: [],
treeData: [],
DepartmentData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
label: node.name,
children: node.nodes
}
},
FFILE: []
}
},
created() {
this.getList()
this.getyjrescueSuppliesDataList()
this.getDepartmentList()
this.getTreeList()
},
methods: {
// **********************文件上传*********************
handleEditChange(file) {
file.MATERIALS_ID = Math.random()
const is5M = file.size / 1024 / 1024 < 5
if (is5M) this.FFILE.push(file)
},
handleRemove(file, fileList) {
this.FFILE = fileList
},
upload(fun) {
const formData = new FormData()
for (let i = 0; i < this.FFILE.length; i++) {
if (this.FFILE[i].raw) {
formData.append('FFILE', this.FFILE[i].raw)
}
}
upload(
'/file/upload',
formData
).then((data) => {
fun(data.fileurl)
}).catch((e) => {
})
},
//* ****************************************
getDepartmentList() {
requestFN('/department/listAll').then((data) => {
this.DepartmentData = data.list.map(item => ({
id: item.department_ID,
label: item.name
}))
}).catch((e) => {
console.error('获取主管单位数据失败', e)
})
},
getTreeList() {
const params = {
PARENT_ID: '5a5d2809ed644aa6ba97a5240ff35484'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.treeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
getyjrescueSuppliesDataList() {
const params = {
PARENT_ID: '73e875a1123443b69956cf6761f943de'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.yjrescueSuppliesData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
//* **************地图相关*****************
// 地图相关
mapOpen() {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
// 关闭地图后调用
mapClose() {
this.setScrollTop(this.top)
this.top = 0
this.showMap = false
},
getScrollTop() {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
setScrollTop(top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top
} else if (document.body) {
document.body.scrollTop = top
}
}
},
// 地图初始化
handler({ BMap, map }) {
this.mapOpen()
this.BMap = BMap
this.map = map
this.ISLOADingMap = true
var geolocation = new BMap.Geolocation()
const myGeo = new BMap.Geocoder()
var $this = this
// 调用百度地图api 中的获取当前位置接口
geolocation.getCurrentPosition(function(r) {
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
if (result) {
$this.ISLOADingMap = false
$this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
$this.setCenter({ BMap, map })
}
})
})
},
// 搜索地图
querySearch(queryString, cb) {
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.TYPE + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
handleSelect(item) {
var { point } = item
this.map.clearOverlays() // 清除地图上所有覆盖物
this.map.centerAndZoom(point, this.zoom)
const marker = new this.BMap.Marker(point) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.enableDragging() // 可拖拽
this.LONGITUDE = point.lng
this.LATITUDE = point.lat
},
// 设置打开中心位置
setCenter({ BMap, map }) {
var lng = ''
var lat = ''
if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
lng = '119.525971'
lat = '39.894727'
} else {
lng = this.form.LONGITUDE
lat = this.form.LATITUDE
}
var point = new BMap.Point(lng, lat)
// var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
const zoom = map.getZoom()
setTimeout(() => {
map.centerAndZoom(point, zoom)
}, 0)
// var marker = new BMap.Marker(point) // 创建标注
// map.addOverlay(marker) // 将标注添加到地图中
},
handleMap() {
this.dialogFormMap = true
this.LATITUDE = this.form.LATITUDE
this.LONGITUDE = this.form.LONGITUDE
},
getClickInfo(e) {
this.LONGITUDE = e.point.lng
this.LATITUDE = e.point.lat
},
setPosition() {
this.dialogFormMap = false
this.form.LATITUDE = this.LATITUDE
this.form.LONGITUDE = this.LONGITUDE
},
//* ***********************************
goList(page, CASE_ID, ticketType) {
this.$parent.activeName = page
this.$parent.CASE_ID = CASE_ID
this.$parent.ticketType = ticketType
},
//* *******************列表查询******************************
getList() {
this.listISLOADing = true
requestFN(
'/rescueSupplies/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
name: this.KEYWORDS
}
).then((data) => {
this.listISLOADing = false
this.varList = data.varList
this.total = data.page.totalResult
})
.catch((e) => {
this.listISLOADing = false
})
},
//* ***************************数据保存**********************************
handleEdit(id) {
this.dialogFormEdit = true
this.dialogType = 'editUser'
this.getDetail(id) // 获取详情并回显
this.$refs.upISLOAD.clearFiles()
},
getDetail(id) {
const params = {
id: id
}
requestFN('/rescueSupplies/detail', params).then((response) => {
const data = response.data
console.log(data)
this.form = {
// 名称
SUPPLIES_NAME: data.SUPPLIES_NAME,
// 设备类型
TYPE: data.TYPE,
// 经度
LONGITUDE: data.LONGITUDE,
// 纬度
LATITUDE: data.LATITUDE,
// 负责保管人
CONTACT_PERSON: data.CONTACT_PERSON,
// 负责保管人固定电话
CONTACT_TELE_PHONE: data.CONTACT_TELE_PHONE,
// 负责保管人移动电话
CONTACT_MOBILE_PHONE: data.CONTACT_MOBILE_PHONE,
// 企业名称
COMPANY: data.COMPANY,
// 所属区域
REGION: data.REGION,
// 采集单位
AFFILIATEDUNIT: data.AFFILIATEDUNIT,
SUPPLIES_ID: data.SUPPLIES_ID
}
}).catch((e) => {
console.error('获取详情数据失败', e)
})
},
handleAdd() {
this.dialogFormEdit = true
this.form = {}
this.form.LONGITUDE = ''
this.form.LATITUDE = ''
this.dialogType = 'saveUser'
this.$refs.upISLOAD.clearFiles()
},
confirm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.FFILE.length > 0) {
this.upload((v) => {
this.form.FILE_URL = v
this.$refs.upload.clearFiles()
this.dataSave()
})
} else {
this.dataSave()
}
} else {
return false
}
})
},
dataSave() {
this.listISLOADing = true
requestFN(
'/rescueSupplies/save', this.form
).then((data) => {
this.listISLOADing = false
this.dialogFormEdit = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listISLOADing = false
})
},
//* *****************************删除********************************
handleDelete(id, name) {
this.$confirm('确定要删除[' + name + ']吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listISLOADing = true
requestFN(
'/rescueSupplies/delete',
{
id: id
}
).then((data) => {
if (data.result == 'success') {
this.listISLOADing = false
this.getList()
}
}).catch((e) => {
this.listISLOADing = false
})
}).catch(() => {
})
},
makeAll() {
const _selectData = this.$refs.multipleTable.selection
console.info('_selectData')
console.info(_selectData)
if (_selectData == null || _selectData.length == 0) {
this.$message({
message: '请选中要删除的项...',
type: 'error'
})
return false
}
const ids = _selectData.map((item, index) => {
return item.SUPPLIES_ID
}).join(',')
this.$confirm('确定要删除选中的数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listISLOADing = true
requestFN(
'/rescueSupplies/deleteAll',
{
ids: ids
}
).then(() => {
this.listISLOADing = false
this.varList = []
this.listQuery.page = 1
this.$refs.multipleTable.clearSelection()
this.getList()
}).catch((e) => {
this.listISLOADing = false
})
}).catch(() => {
})
},
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
}
}
}
</script>

19
src/views/emergen_cyrescue/resource_management/emergency_supplies/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div>
<list v-show="activeName=='list'" ref="list" />
<detail v-if="activeName=='detail'"/>
</div>
</template>
<script>
import list from './components/list.vue'
import detail from './components/detail.vue'
export default {
components: { list, detail },
data() {
return {
activeName: 'list',
CASE_ID: ''
}
}
}
</script>

176
src/views/emergen_cyrescue/resource_management/rescue_equipment/components/detail.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div>
<div class="app-container">
<div class="level-title">
<h1>应急救援装备</h1>
</div>
<div class="mb-20">
<table class="table-ui">
<tr>
<td class="tbg">装备名称</td>
<td>{{ form.EQUIP_NAME }}</td>
<td class="tbg">装备类别</td>
<td>{{ form.TYPE_NAME }}</td>
</tr>
<tr>
<td class="tbg">经度</td>
<td>{{ form.LONGITUDE }}</td>
<td class="tbg">纬度</td>
<td>{{ form.LATITUDE }}</td>
</tr>
<tr>
<td class="tbg">联系人</td>
<td>{{ form.CONTACT_PERSON }}</td>
<td class="tbg">联系人固定电话</td>
<td>{{ form.CONTACT_TELE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人移动电话</td>
<td>{{ form.CONTACT_MOBILE_PHONE }}</td>
<td class="tbg"/>
<td/>
</tr>
<tr>
<td class="tbg">企业名称</td>
<td>{{ form.COMPANY }}</td>
<td class="tbg">所属区域</td>
<td>{{ form.REGION_NAME }}</td>
</tr>
<tr>
<td class="tbg">采集单位</td>
<td>{{ form.AFFILIATEDUNIT_NAME }}</td>
<td class="tbg"/>
<td/>
</tr>
</table>
</div>
</div>
<div class="ui-height" />
<div class="ui-foot">
<el-button type="primary" @click="goBack">返回基本信息</el-button>
</div>
</div>
</template>
<script>
import { requestFN } from '@/utils/request'
export default {
data() {
return {
form: {
// 装备名称
EQUIP_NAME: '',
// 装备类别
TYPE: '',
// 经度
LONGITUDE: '',
// 纬度
LATITUDE: '',
// 联系人
CONTACT_PERSON: '',
// 联系人固定电话
CONTACT_TELE_PHONE: '',
// 联系人移动电话
CONTACT_MOBILE_PHONE: '',
// 详情地址
ADDRESS: '',
// 企业装备名称
COMPANY: '',
// 所属区域
REGION: '',
// 采集单位
AFFILIATEDUNIT: ''
},
Id: ''
}
},
created() {
if (this.$parent.CASE_ID) {
this.Id = this.$parent.CASE_ID
this.getDetail(this.Id)
}
},
methods: {
goBack() {
this.$parent.activeName = 'list'
},
//* ************************下载**********************
download(obj) {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.downloadUrl = config.fileUrl + obj.FILE_URL
const _this = this
setTimeout(function() {
window.open(_this.downloadUrl)
}, 200)
}).catch(() => {
})
},
//* **************************************
getDetail(id) {
const params = {
id: id
}
requestFN('/rescueEquip/detail', params).then((response) => {
const data = response.data
console.log(data)
this.form = {
// 装备名称
EQUIP_NAME: data.EQUIP_NAME,
// 装备类别
TYPE: data.TYPE,
// 经度
LONGITUDE: data.LONGITUDE,
// 纬度
LATITUDE: data.LATITUDE,
// 联系人
CONTACT_PERSON: data.CONTACT_PERSON,
// 联系人固定电话
CONTACT_TELE_PHONE: data.CONTACT_TELE_PHONE,
// 联系人移动电话
CONTACT_MOBILE_PHONE: data.CONTACT_MOBILE_PHONE,
// 企业装备名称
COMPANY: data.COMPANY,
// 所属区域
REGION: data.REGION,
// 采集单位
AFFILIATEDUNIT: data.AFFILIATEDUNIT,
EQUIP_ID: data.EQUIP_ID,
REGION_NAME: data.REGION_NAME,
AFFILIATEDUNIT_NAME: data.AFFILIATEDUNIT_NAME,
TYPE_NAME: data.TYPE_NAME
}
}).catch((e) => {
console.error('获取详情数据失败', e)
})
}
}
}
</script>
<style lang="sass" scoped>
.table-ui
td
line-height: 34px
.tbg
width: 200px
.ui-foot
text-align: center
margin-top: 20px
</style>

618
src/views/emergen_cyrescue/resource_management/rescue_equipment/components/list.vue Normal file
View File

@ -0,0 +1,618 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
</div>
<el-table ref="multipleTable" :data="varList" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="EQUIP_NAME" label="装备名称" width="180" />
<el-table-column prop="TYPE_NAME" label="装备类别" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_PERSON" label="负责保管人" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_TELE_PHONE" label="负责保管人固定电话" show-overflow-tooltip="true" />
<el-table-column prop="CONTACT_MOBILE_PHONE" label="负责保管人移动电话" show-overflow-tooltip="true" />
<el-table-column prop="UPDATE_TIME_STRING" label="修改时间" show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="300">
<template slot-scope="{row}">
<el-button type="primary" icon="el-icon-document" size="mini" @click="goList('detail', row.EQUIP_ID, '1')">查看</el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row.EQUIP_ID)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.EQUIP_ID,row.EQUIP_NAME)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<template>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="makeAll('0')">删除</el-button>
</template>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
<el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='editUser'?'修改':'新增'" width="1000px">
<el-form ref="form" :rules="rules" :model="form" label-width="180px">
<el-form-item label="资源名称" prop="EQUIP_NAME">
<el-input v-model="form.EQUIP_NAME" placeholder="请输入资源名称..." />
</el-form-item>
<el-form-item label="装备类别" prop="TYPE">
<Treeselect
:options="yjrescueEquipData"
:normalizer="normalizer"
v-model="form.TYPE"
placeholder="请选择装备类别"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
<div style="display: flex">
<el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
<el-button style="margin-left:10px" @click="handleMap">
<span class="svg-container">
<svg-icon icon-class="international" />
</span>
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20"/>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="负责保管人" prop="CONTACT_PERSON">
<el-input v-model="form.CONTACT_PERSON" placeholder="请输入负责保管人..." />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责保管人固定电话" prop="CONTACT_OFFICE_PHONE">
<el-input v-model="form.CONTACT_TELE_PHONE" placeholder="请输入负责保管人固定电话..." />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="负责保管人移动电话" prop="CONTACT_PERSON">
<el-input v-model="form.CONTACT_MOBILE_PHONE" placeholder="请输入负责保管人移动电话..." />
</el-form-item>
</el-col>
<el-col :span="12"/>
</el-row>
<el-form-item label="企业名称" prop="REMARKS">
<el-input v-model="form.COMPANY" placeholder="请输入企业名称..." />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属区域" prop="ADMINISTRATIVE_REGION">
<Treeselect
:options="treeData"
:normalizer="normalizer"
v-model="form.REGION"
:disable-branch-nodes="true"
placeholder="请选择所属区域"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属单位" prop="SUPERVISING_AGENCY">
<Treeselect
:options="DepartmentData"
v-model="form.AFFILIATEDUNIT"
placeholder="请选择所属单位"
no-options-text="暂无数据"
no-children-text="暂无数据"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormEdit = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<!-- 坐标选择 -->
<el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
<baidu-map
v-ISLOADing="ISLOADingMap"
:zoom="zoom"
:scroll-wheel-zoom="true"
:style="{height: clientHeight+'px'}"
@click="getClickInfo"
@ready="handler">
<bm-view style="width: 100%; height:100%; flex: 1" />
<bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
<div class="map-flex">
<div class="map-lable">关键词：</div>
<div style="flex:1;">
<el-autocomplete v-model="TYPEKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细设备类型" style="width:100%" @select="handleSelect" />
</div>
<!-- <el-input v-model="TYPEKeyword" style="width: 200px" placeholder="请输入内容" />-->
<!-- <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
</div>
</bm-control>
<!-- <bm-local-search :keyword="TYPEKeyword" :auto-viewport="true"/>-->
</baidu-map>
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import { Treeselect } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { upload } from '@/utils/upload'
export default {
components: { Treeselect, Pagination },
data() {
return {
// 地图相关
CORPINFO_ID: this.$parent.CORPINFO_ID,
clientHeight: 600,
ISLOADingMap: true,
listISLOADing: false,
buttonISLOADing: false,
BMap: '',
map: '',
showMap: false,
TYPEKeyword: '',
pointLngLat: '',
zoom: 10,
dialogFormMap: false,
LATITUDE: '',
LONGITUDE: '',
listQuery: {
page: 1,
limit: 10
},
total: 0,
varList: [],
KEYWORDS: '',
dialogFormEdit: false,
dialogFormShow: false,
dialogType: 'add',
form: {
// 名称
EQUIP_NAME: '',
// 设备类型
TYPE: '',
// 经度
LONGITUDE: '',
// 纬度
LATITUDE: '',
// 负责保管人
CONTACT_PERSON: '',
// 负责保管人固定电话
CONTACT_TELE_PHONE: '',
// 负责保管人移动电话
CONTACT_MOBILE_PHONE: '',
// 详情地址
ADDRESS: '',
// 企业名称
COMPANY: '',
// 所属区域
REGION: '',
// 所属单位
AFFILIATEDUNIT: ''
},
yjrescueEquipData: [],
treeData: [],
DepartmentData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
label: node.name,
children: node.nodes
}
},
FFILE: []
}
},
created() {
this.getList()
this.getyjrescueEquipDataList()
this.getDepartmentList()
this.getTreeList()
},
methods: {
// **********************文件上传*********************
handleEditChange(file) {
file.MATERIALS_ID = Math.random()
const is5M = file.size / 1024 / 1024 < 5
if (is5M) this.FFILE.push(file)
},
handleRemove(file, fileList) {
this.FFILE = fileList
},
upload(fun) {
const formData = new FormData()
for (let i = 0; i < this.FFILE.length; i++) {
if (this.FFILE[i].raw) {
formData.append('FFILE', this.FFILE[i].raw)
}
}
upload(
'/file/upload',
formData
).then((data) => {
fun(data.fileurl)
}).catch((e) => {
})
},
//* ****************************************
getDepartmentList() {
requestFN('/department/listAll').then((data) => {
this.DepartmentData = data.list.map(item => ({
id: item.department_ID,
label: item.name
}))
}).catch((e) => {
console.error('获取主管单位数据失败', e)
})
},
getTreeList() {
const params = {
PARENT_ID: '5a5d2809ed644aa6ba97a5240ff35484'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.treeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
getyjrescueEquipDataList() {
const params = {
PARENT_ID: '73e875a1123443b69956cf6761f943de'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.yjrescueEquipData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
//* **************地图相关*****************
// 地图相关
mapOpen() {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
// 关闭地图后调用
mapClose() {
this.setScrollTop(this.top)
this.top = 0
this.showMap = false
},
getScrollTop() {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
setScrollTop(top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top
} else if (document.body) {
document.body.scrollTop = top
}
}
},
// 地图初始化
handler({ BMap, map }) {
this.mapOpen()
this.BMap = BMap
this.map = map
this.ISLOADingMap = true
var geolocation = new BMap.Geolocation()
const myGeo = new BMap.Geocoder()
var $this = this
// 调用百度地图api 中的获取当前位置接口
geolocation.getCurrentPosition(function(r) {
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
if (result) {
$this.ISLOADingMap = false
$this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
$this.setCenter({ BMap, map })
}
})
})
},
// 搜索地图
querySearch(queryString, cb) {
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.TYPE + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
handleSelect(item) {
var { point } = item
this.map.clearOverlays() // 清除地图上所有覆盖物
this.map.centerAndZoom(point, this.zoom)
const marker = new this.BMap.Marker(point) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.enableDragging() // 可拖拽
this.LONGITUDE = point.lng
this.LATITUDE = point.lat
},
// 设置打开中心位置
setCenter({ BMap, map }) {
var lng = ''
var lat = ''
if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
lng = '119.525971'
lat = '39.894727'
} else {
lng = this.form.LONGITUDE
lat = this.form.LATITUDE
}
var point = new BMap.Point(lng, lat)
// var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
const zoom = map.getZoom()
setTimeout(() => {
map.centerAndZoom(point, zoom)
}, 0)
// var marker = new BMap.Marker(point) // 创建标注
// map.addOverlay(marker) // 将标注添加到地图中
},
handleMap() {
this.dialogFormMap = true
this.LATITUDE = this.form.LATITUDE
this.LONGITUDE = this.form.LONGITUDE
},
getClickInfo(e) {
this.LONGITUDE = e.point.lng
this.LATITUDE = e.point.lat
},
setPosition() {
this.dialogFormMap = false
this.form.LATITUDE = this.LATITUDE
this.form.LONGITUDE = this.LONGITUDE
},
//* ***********************************
goList(page, CASE_ID, ticketType) {
this.$parent.activeName = page
this.$parent.CASE_ID = CASE_ID
this.$parent.ticketType = ticketType
},
//* *******************列表查询******************************
getList() {
this.listISLOADing = true
requestFN(
'/rescueEquip/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
name: this.KEYWORDS
}
).then((data) => {
this.listISLOADing = false
this.varList = data.varList
this.total = data.page.totalResult
})
.catch((e) => {
this.listISLOADing = false
})
},
//* ***************************数据保存**********************************
handleEdit(id) {
this.dialogFormEdit = true
this.dialogType = 'editUser'
this.getDetail(id) // 获取详情并回显
this.$refs.upISLOAD.clearFiles()
},
getDetail(id) {
const params = {
id: id
}
requestFN('/rescueEquip/detail', params).then((response) => {
const data = response.data
console.log(data)
this.form = {
// 名称
EQUIP_NAME: data.EQUIP_NAME,
// 设备类型
TYPE: data.TYPE,
// 经度
LONGITUDE: data.LONGITUDE,
// 纬度
LATITUDE: data.LATITUDE,
// 负责保管人
CONTACT_PERSON: data.CONTACT_PERSON,
// 负责保管人固定电话
CONTACT_TELE_PHONE: data.CONTACT_TELE_PHONE,
// 负责保管人移动电话
CONTACT_MOBILE_PHONE: data.CONTACT_MOBILE_PHONE,
// 企业名称
COMPANY: data.COMPANY,
// 所属区域
REGION: data.REGION,
// 所属单位
AFFILIATEDUNIT: data.AFFILIATEDUNIT,
EQUIP_ID: data.EQUIP_ID
}
}).catch((e) => {
console.error('获取详情数据失败', e)
})
},
handleAdd() {
this.dialogFormEdit = true
this.form = {}
this.form.LONGITUDE = ''
this.form.LATITUDE = ''
this.dialogType = 'saveUser'
this.$refs.upISLOAD.clearFiles()
},
confirm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.FFILE.length > 0) {
this.upload((v) => {
this.form.FILE_URL = v
this.$refs.upload.clearFiles()
this.dataSave()
})
} else {
this.dataSave()
}
} else {
return false
}
})
},
dataSave() {
this.listISLOADing = true
requestFN(
'/rescueEquip/save', this.form
).then((data) => {
this.listISLOADing = false
this.dialogFormEdit = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listISLOADing = false
})
},
//* *****************************删除********************************
handleDelete(id, name) {
this.$confirm('确定要删除[' + name + ']吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listISLOADing = true
requestFN(
'/rescueEquip/delete',
{
id: id
}
).then((data) => {
if (data.result == 'success') {
this.listISLOADing = false
this.getList()
}
}).catch((e) => {
this.listISLOADing = false
})
}).catch(() => {
})
},
makeAll() {
const _selectData = this.$refs.multipleTable.selection
console.info('_selectData')
console.info(_selectData)
if (_selectData == null || _selectData.length == 0) {
this.$message({
message: '请选中要删除的项...',
type: 'error'
})
return false
}
const ids = _selectData.map((item, index) => {
return item.EQUIP_ID
}).join(',')
this.$confirm('确定要删除选中的数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listISLOADing = true
requestFN(
'/rescueEquip/deleteAll',
{
ids: ids
}
).then(() => {
this.listISLOADing = false
this.varList = []
this.listQuery.page = 1
this.$refs.multipleTable.clearSelection()
this.getList()
}).catch((e) => {
this.listISLOADing = false
})
}).catch(() => {
})
},
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
}
}
}
</script>

19
src/views/emergen_cyrescue/resource_management/rescue_equipment/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div>
<list v-show="activeName=='list'" ref="list" />
<detail v-if="activeName=='detail'"/>
</div>
</template>
<script>
import list from './components/list.vue'
import detail from './components/detail.vue'
export default {
components: { list, detail },
data() {
return {
activeName: 'list',
CASE_ID: ''
}
}
}
</script>