消防器材功能迁移至企业端
parent
e8cbeaf287
commit
9d863aca1a
|
|
@ -0,0 +1,831 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="rightCont">
|
||||
<el-form label-width="50px">
|
||||
<el-col :span="5">
|
||||
<el-form-item label="名称：" label-width="110px">
|
||||
<el-input v-model="form.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column type="index" label="序号" width="55" align="center"/>
|
||||
<el-table-column prop="FIRERESOURCES_NAME" label="名称"/>
|
||||
<el-table-column prop="FIRERESOURCES_TYPENAME" label="消防资源类型"/>
|
||||
<el-table-column prop="LONGTITUDE" label="消防资源经纬度">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGTITUDE }} -- {{ row.LATITUDE }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="DESCR" label="消防资源描述"/>-->
|
||||
<el-table-column prop="CREATIME" label="创建时间"/>
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button
|
||||
v-show="edit"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
@click="handleEdit(row)">修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="del"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
@click="handleDelete(row.FIRERESOURCES_ID,row.FIRERESOURCES_NAME)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
</div>
|
||||
<pagination
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList()"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="addForm.dialogVisible"
|
||||
:title="addForm.dialogType === 'add' ? '新增' : '编辑'"
|
||||
width="60%">
|
||||
<el-form
|
||||
ref="addForm"
|
||||
:rules="addForm.rules"
|
||||
:model="addForm.info"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="padding:10px 10px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="名称：" class="is-required">
|
||||
<el-input v-model="addForm.info.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="状态：" class="is-required">
|
||||
<el-select v-model="addForm.info.STATE" placeholder="请选择" style="width: 205px">
|
||||
<el-option
|
||||
v-for="item in stateData"
|
||||
:key="item.NAME"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经纬度：" class="is-required">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="消防控制室图片：" class="is-required">
|
||||
<div class="disContent">
|
||||
<el-upload
|
||||
:auto-upload="false"
|
||||
:file-list="firekzsImgs"
|
||||
:on-change="handleEditChange"
|
||||
:on-exceed="overFlow"
|
||||
:limit="5"
|
||||
action="#"
|
||||
multiple
|
||||
accept=".jpg,.png"
|
||||
list-type="picture-card">
|
||||
<i slot="default" class="el-icon-plus"/>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img
|
||||
v-if="file.FILEPATH"
|
||||
:src="config.fileUrl + file.FILEPATH"
|
||||
class="el-upload-list__item-thumbnail"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:src="file.url"
|
||||
class="el-upload-list__item-thumbnail"
|
||||
alt=""
|
||||
>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<i class="el-icon-zoom-in"/>
|
||||
</span>
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<i class="el-icon-delete"/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
</el-dialog>
|
||||
<div style="margin-top: 10px">
|
||||
限制上传数量:{{ firekzsImgs.length + '/' + '5' }}
|
||||
</div>
|
||||
<div>
|
||||
只能上传jpg/png文件，单张且不超过5mb
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="添加设备：">
|
||||
<el-button type="primary" @click="addDescribe">新增一个设备</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div v-for="(item) in describeList" :key="item.index">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="设备名称：" prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.name" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="型号：" prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.model" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="设备数量：" prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.number" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="设备位置：" prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.place" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
<el-button v-if="describeList.length > 1" style="margin-left: 160px" type="danger" @click="removeDescribe()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="添加人员：">
|
||||
<el-button type="primary" @click="addrenyuan">新增一名人员</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div v-for="(item) in renyuanList" :key="item.index">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="人员姓名: " prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.name" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="人员手机号: " prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.phone" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="人员值班情况: " prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.remake" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
<el-button v-if="renyuanList.length > 1" style="margin-left: 160px" type="danger" @click="removeRenyuan()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="addForm.dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">提 交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
|
||||
<div id="map"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<span>经度：</span>
|
||||
<el-input v-model="LONGTITUDE" 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 { upload } from '@/utils/upload'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
import SelectTree from '@/components/SelectTree'
|
||||
import TiandiMap from '@/components/TianMap/TiandiMap'
|
||||
|
||||
export default {
|
||||
components: { Pagination, SelectTree, TiandiMap },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
dialogFormMap: false,
|
||||
map: null,
|
||||
corpList: [],
|
||||
config: config,
|
||||
firekzsImgs: [],
|
||||
waitForDeleteImgs: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
marker: null,
|
||||
describeList: [
|
||||
{
|
||||
name: '',
|
||||
model: '',
|
||||
number: '',
|
||||
place: ''
|
||||
}
|
||||
],
|
||||
renyuanList: [
|
||||
{
|
||||
name: '',
|
||||
phone: '',
|
||||
remake: ''
|
||||
}
|
||||
],
|
||||
addBtnType: true,
|
||||
FIRE_RESOURCES_TYPE: '',
|
||||
listLoading: true,
|
||||
add: false,
|
||||
del: false,
|
||||
edit: false,
|
||||
form: {
|
||||
FIRERESOURCES_NAME: '',
|
||||
FIRERESOURCES_TYPE: 'xfkzs01'
|
||||
},
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
FIRERESOURCES_NAME: [{ required: false, message: '不可为空', trigger: 'blur' }],
|
||||
FIRERESOURCES_TYPE: [{ required: false, message: '不可为空', trigger: 'blur' }],
|
||||
LONGTITUDEANDLATITUDE: [{ required: false, message: '请选择经纬度', trigger: 'blur' }],
|
||||
CORPINFO_ID: [{ required: false, message: '请选择分公司', trigger: 'blur' }],
|
||||
STATE: [{ required: false, message: '请选择状态', trigger: 'blur' }],
|
||||
DESCR: [{ required: false, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: 'xfkzs01', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
keySelect: {
|
||||
FIRE_DEVICE_TYPE_ID: ''
|
||||
},
|
||||
treeData: [],
|
||||
typeData: [],
|
||||
stateData: [
|
||||
{
|
||||
NAME: '正常',
|
||||
BIANMA: 0
|
||||
}, {
|
||||
NAME: '异常',
|
||||
BIANMA: 1
|
||||
}
|
||||
],
|
||||
varRegionList: [],
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
ls: [],
|
||||
dates: [],
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
// 树形菜单
|
||||
filterText: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
console.log(val)
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
// this.getDeviceType()
|
||||
this.getDict()
|
||||
this.getTreeData()
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file) {
|
||||
if (file.IMGFILES_ID) {
|
||||
// 已经上传过的 现在删除 记录这个id
|
||||
this.waitForDeleteImgs.push(file.IMGFILES_ID)
|
||||
this.firekzsImgs = this.firekzsImgs.filter(x => x.IMGFILES_ID != file.IMGFILES_ID)
|
||||
} else {
|
||||
this.firekzsImgs = this.firekzsImgs.filter(x => x.MATERIALS_ID != file.MATERIALS_ID)
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
if (file.url) {
|
||||
this.dialogImageUrl = file.url
|
||||
}
|
||||
if (file.FILEPATH) {
|
||||
this.dialogImageUrl = config.fileUrl + file.FILEPATH
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
overFlow(files, fileList) {
|
||||
this.$message.warning('最多上传5张图片')
|
||||
},
|
||||
handleEditChange(file, fileList) {
|
||||
file.MATERIALS_ID = Math.random()
|
||||
const is5M = file.size / 1024 / 1024 < 5
|
||||
if (is5M) this.firekzsImgs.push(file)
|
||||
},
|
||||
addDescribe() {
|
||||
this.describeList.push(
|
||||
{
|
||||
name: '',
|
||||
model: '',
|
||||
number: '',
|
||||
place: ''
|
||||
}
|
||||
)
|
||||
},
|
||||
addrenyuan() {
|
||||
this.renyuanList.push(
|
||||
{
|
||||
name: '',
|
||||
phone: '',
|
||||
remake: ''
|
||||
}
|
||||
)
|
||||
},
|
||||
removeDescribe() {
|
||||
this.describeList.splice(this.describeList.length - 1, 1)
|
||||
},
|
||||
removeRenyuan() {
|
||||
this.renyuanList.splice(this.renyuanList.length - 1, 1)
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.LATITUDE + '--' + this.LONGTITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
initTDT() {
|
||||
console.log(window)
|
||||
console.log(window.T)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.T) {
|
||||
console.log('天地图初始化成功...')
|
||||
resolve(window.T)
|
||||
reject('error')
|
||||
} else {
|
||||
console.info(999999999)
|
||||
}
|
||||
}).then(T => {
|
||||
window.T = T
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化地图
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 纬度
|
||||
* @param {*} zoom 缩放比例(1~18)
|
||||
*/
|
||||
initMap(lng, lat, zoom) {
|
||||
this.initTDT().then((T) => {
|
||||
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
|
||||
// 创建自定义图层对象
|
||||
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
|
||||
// 初始化地图对象
|
||||
this.map = new window.T.Map('map')
|
||||
this.initCenter(lng, lat, zoom)
|
||||
})
|
||||
},
|
||||
initCenter(lng, lat, zoom) {
|
||||
// 设置显示地图的中心点和级别
|
||||
if (!this.LONGTITUDE && !this.LATITUDE) {
|
||||
this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
|
||||
console.log(123)
|
||||
} else {
|
||||
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = lng
|
||||
this.LATITUDE = lat
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
}
|
||||
// 创建卫星和路网的混合视图
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP)
|
||||
// 允许鼠标滚轮缩放地图
|
||||
this.map.enableScrollWheelZoom()
|
||||
// 允许鼠标移动地图
|
||||
this.map.enableInertia()
|
||||
// 向地图上添加标注
|
||||
this.map.addEventListener('click', this.MapClick)
|
||||
},
|
||||
MapClick(event) {
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = event.lnglat.getLng()
|
||||
this.LATITUDE = event.lnglat.getLat()
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
},
|
||||
handleMap() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
console.log(!this.map)
|
||||
if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (this.addForm.info.FIRERESOURCES_NAME === '') {
|
||||
this.$message({
|
||||
message: '名称不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.STATE === '') {
|
||||
this.$message({
|
||||
message: '请检查状态不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.CORPINFO_ID === '') {
|
||||
this.$message({
|
||||
message: '请检查所属分公司不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.LONGTITUDEANDLATITUDE === '') {
|
||||
this.$message({
|
||||
message: '请检查经纬度不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// if (this.describeList.length > 0) {
|
||||
for (var i = 0; i < this.describeList.length; i++) {
|
||||
// name: '',
|
||||
// model: '',
|
||||
// number: '',
|
||||
// place: ''
|
||||
if (this.describeList[i].name === '') {
|
||||
this.$message({
|
||||
message: '请检查设备设备名称不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].model === '') {
|
||||
this.$message({
|
||||
message: '请检查设备型号不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].number === '') {
|
||||
this.$message({
|
||||
message: '请检查设备数量不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].place === '') {
|
||||
this.$message({
|
||||
message: '请检查设备位置不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
for (var k = 0; k < this.renyuanList.length; k++) {
|
||||
if (this.renyuanList[k].name === '') {
|
||||
this.$message({
|
||||
message: '请检查人员姓名不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.renyuanList[k].phone === '') {
|
||||
this.$message({
|
||||
message: '请检查人员手机号不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.renyuanList[k].remake === '') {
|
||||
this.$message({
|
||||
message: '请检查人员值班情况不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
// }
|
||||
if (!this.firekzsImgs.length > 0) {
|
||||
this.$message.warning('最少上传一张照片')
|
||||
return
|
||||
}
|
||||
var strJson = {
|
||||
'DESCR': this.describeList,
|
||||
'RenYuan': this.renyuanList
|
||||
}
|
||||
this.addForm.info.DESCR = JSON.stringify(strJson)
|
||||
this.addForm.info.LATITUDE = this.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = this.LONGTITUDE
|
||||
if (valid) {
|
||||
const formData = new FormData()
|
||||
Object.keys(this.addForm.info).map(key => {
|
||||
formData.append(key, this.addForm.info[key])
|
||||
})
|
||||
if (this.waitForDeleteImgs.length > 0) {
|
||||
formData.append('DELETE_IDS', this.waitForDeleteImgs.join(','))
|
||||
}
|
||||
for (let i = 0; i < this.firekzsImgs.length; i++) {
|
||||
if (this.firekzsImgs[i].raw) {
|
||||
formData.append('FFILE', this.firekzsImgs[i].raw)
|
||||
}
|
||||
}
|
||||
upload(
|
||||
'/fireResources/' + this.addForm.dialogType, formData
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
this.$message.warning('保存失败')
|
||||
console.log(e)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
getTreeData() {
|
||||
requestFN(
|
||||
'/department/listTree',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = JSON.parse(data.zTreeNodes)
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.getpic(row.FIRERESOURCES_ID)
|
||||
this.addForm.info.FIRERESOURCES_ID = row.FIRERESOURCES_ID
|
||||
this.addForm.info.FIRERESOURCES_NAME = row.FIRERESOURCES_NAME
|
||||
this.addForm.info.FIRERESOURCES_TYPE = row.FIRERESOURCES_TYPE
|
||||
this.addForm.info.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = row.LONGTITUDE
|
||||
this.addForm.info.STATE = row.STATE
|
||||
this.addForm.info.CORPINFO_ID = row.CORPINFO_ID
|
||||
this.LONGTITUDE = row.LONGTITUDE
|
||||
this.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = row.LATITUDE + '--' + row.LONGTITUDE
|
||||
this.describeList = []
|
||||
this.renyuanList = []
|
||||
if (row.DESCR) {
|
||||
var strJson = JSON.parse(row.DESCR)
|
||||
console.log(strJson)
|
||||
this.describeList = strJson.DESCR
|
||||
this.renyuanList = strJson.RenYuan
|
||||
}
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
getpic(ID) {
|
||||
requestFN(
|
||||
'imgfiles/listImgs',
|
||||
{
|
||||
FOREIGN_KEY: ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.firekzsImgs = data.imgs
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.FIRE_DEVICE_ID
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.describeList = [
|
||||
{
|
||||
name: '',
|
||||
model: '',
|
||||
number: '',
|
||||
place: ''
|
||||
}
|
||||
]
|
||||
this.renyuanList = [
|
||||
{
|
||||
name: '',
|
||||
phone: '',
|
||||
remake: ''
|
||||
}
|
||||
]
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
resetAddForm() {
|
||||
this.waitForDeleteImgs = []
|
||||
this.firekzsImgs = []
|
||||
this.LATITUDE = ''
|
||||
this.LONGTITUDE = ''
|
||||
this.addForm.info = {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: 'xfkzs01', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
requestFN(
|
||||
'/fireResources/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
FIRERESOURCES_NAME: this.form.FIRERESOURCES_NAME,
|
||||
FIRERESOURCES_TYPE: this.form.FIRERESOURCES_TYPE
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.form.FIRERESOURCES_NAME = ''
|
||||
this.getList()
|
||||
},
|
||||
getDict() {
|
||||
// requestFN(
|
||||
// '/corpinfo/getSelectByCorpInfo',
|
||||
// {}
|
||||
// ).then((data) => {
|
||||
// this.corpList = JSON.parse(data.corpInfoJson)
|
||||
// }).catch((e) => {
|
||||
// })
|
||||
requestFN(
|
||||
'dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
|
||||
}
|
||||
).then((data) => {
|
||||
this.typeData = data.list
|
||||
})
|
||||
.catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleDelete(id, name) {
|
||||
this.$confirm('确定要删除编号为[' + name + ']的消防资源吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fireResources/delete',
|
||||
{
|
||||
FIRERESOURCES_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(() => {
|
||||
})
|
||||
},
|
||||
|
||||
hasButton: function() {
|
||||
var keys = 'fireresources:add,fireresources:del,fireresources:edit,toExcel'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.fireresourcesfhadminadd // 新增权限
|
||||
this.del = data.fireresourcesfhadmindel // 删除权限
|
||||
this.edit = data.fireresourcesfhadminedit // 修改权限
|
||||
this.toExcel = data.toExcel // 导出到excel权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.returnBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex; /**/
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<!-- <component :is="activeName" />-->
|
||||
<div>
|
||||
<List v-show="activeName=='List'" ref="list" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
List: List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeName(val) {
|
||||
if (val == 'List') {
|
||||
this.$refs.list.getList()
|
||||
this.$refs.list.getTreeList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,781 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="rightCont">
|
||||
<el-form label-width="50px">
|
||||
<el-col :span="5">
|
||||
<el-form-item label="名称：" label-width="110px">
|
||||
<el-input v-model="form.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column type="index" label="序号" width="55" align="center"/>
|
||||
<el-table-column prop="FIRERESOURCES_NAME" label="名称"/>
|
||||
<el-table-column prop="FIRERESOURCES_TYPENAME" label="消防资源类型"/>
|
||||
<el-table-column prop="LONGTITUDE" label="消防资源经纬度">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGTITUDE }} -- {{ row.LATITUDE }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="DESCR" label="消防资源描述"/>-->
|
||||
<el-table-column prop="CREATIME" label="创建时间"/>
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button
|
||||
v-show="edit"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
@click="handleEdit(row)">修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="del"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
@click="handleDelete(row.FIRERESOURCES_ID,row.FIRERESOURCES_NAME)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
</div>
|
||||
<pagination
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList()"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="addForm.dialogVisible"
|
||||
:title="addForm.dialogType === 'add' ? '新增' : '编辑'"
|
||||
width="60%">
|
||||
<el-form
|
||||
ref="addForm"
|
||||
:rules="addForm.rules"
|
||||
:model="addForm.info"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="padding:10px 10px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="名称：" class="is-required">
|
||||
<el-input v-model="addForm.info.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="状态：" class="is-required">
|
||||
<el-select v-model="addForm.info.STATE" placeholder="请选择" style="width: 205px">
|
||||
<el-option
|
||||
v-for="item in stateData"
|
||||
:key="item.NAME"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="消防泵房图片：" class="is-required">
|
||||
<div class="disContent">
|
||||
<el-upload
|
||||
:auto-upload="false"
|
||||
:file-list="firekzsImgs"
|
||||
:on-change="handleEditChange"
|
||||
:on-exceed="overFlow"
|
||||
:limit="5"
|
||||
action="#"
|
||||
multiple
|
||||
accept=".jpg,.png"
|
||||
list-type="picture-card">
|
||||
<i slot="default" class="el-icon-plus"/>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img
|
||||
v-if="file.FILEPATH"
|
||||
:src="config.fileUrl + file.FILEPATH"
|
||||
class="el-upload-list__item-thumbnail"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:src="file.url"
|
||||
class="el-upload-list__item-thumbnail"
|
||||
alt=""
|
||||
>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<i class="el-icon-zoom-in"/>
|
||||
</span>
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<i class="el-icon-delete"/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
</el-dialog>
|
||||
<div style="margin-top: 10px">
|
||||
限制上传数量:{{ firekzsImgs.length +'/'+'5' }}
|
||||
</div>
|
||||
<div>
|
||||
只能上传jpg/png文件，单张且不超过5mb
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经纬度：" prop="LONGTITUDEANDLATITUDE">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="添加设备：">
|
||||
<el-button type="primary" @click="addDescribe">新增设备</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row >
|
||||
<div v-for="(item) in describeList" :key="item.index" >
|
||||
<el-col :span="8">
|
||||
<el-form-item label="泵房编号：" prop="LABEL" class="is-required">
|
||||
<el-input v-model="item.code" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="名称：" prop="LABEL" class="is-required" >
|
||||
<el-input v-model="item.name" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="水泵分类：" prop="LABEL" class="is-required" >
|
||||
<el-input v-model="item.type" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="负责单位：" prop="LABEL" class="is-required" >
|
||||
<el-input v-model="item.corp" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="具体位置" prop="LABEL" class="is-required" >
|
||||
<el-input v-model="item.palce" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备参数和规格" prop="LABEL" class="is-required" >
|
||||
<el-input v-model="item.ramake" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
<el-button v-if="describeList.length > 1" style="margin-left: 160px" type="danger" @click="removeDescribe()">删除</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div
|
||||
v-loading="diaLoading"
|
||||
slot="footer"
|
||||
class="dialog-footer">
|
||||
<el-button @click="addForm.dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">提 交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
|
||||
<div id="map"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<span>经度：</span>
|
||||
<el-input v-model="LONGTITUDE" 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 { upload } from '@/utils/upload'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
import SelectTree from '@/components/SelectTree'
|
||||
import TiandiMap from '../../../../components/TianMap/TiandiMap'
|
||||
|
||||
export default {
|
||||
components: { Pagination, SelectTree, TiandiMap },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
config: config,
|
||||
firekzsImgs: [],
|
||||
waitForDeleteImgs: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogFormMap: false,
|
||||
map: null,
|
||||
corpList: [],
|
||||
marker: null,
|
||||
describeList: [
|
||||
{
|
||||
code: '',
|
||||
palce: '',
|
||||
name: '',
|
||||
type: '',
|
||||
corp: '',
|
||||
ramake: ''
|
||||
}
|
||||
],
|
||||
addBtnType: true,
|
||||
FIRE_RESOURCES_TYPE: '',
|
||||
listLoading: true,
|
||||
add: false,
|
||||
del: false,
|
||||
edit: false,
|
||||
form: {
|
||||
FIRERESOURCES_NAME: '',
|
||||
FIRERESOURCES_TYPE: 'xfbf01'
|
||||
},
|
||||
diaLoading: false,
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
FIRERESOURCES_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
FIRERESOURCES_TYPE: [{ required: true, message: '请选择消防资源类型', trigger: 'blur' }],
|
||||
LONGTITUDEANDLATITUDE: [{ required: true, message: '请经纬度不可为空', trigger: 'blur' }],
|
||||
CORPINFO_ID: [{ required: true, message: '请选择分公司', trigger: 'blur' }],
|
||||
STATE: [{ required: true, message: '请选择状态', trigger: 'blur' }],
|
||||
DESCR: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: 'xfbf01', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
keySelect: {
|
||||
FIRE_DEVICE_TYPE_ID: ''
|
||||
},
|
||||
treeData: [],
|
||||
typeData: [],
|
||||
stateData: [
|
||||
{
|
||||
NAME: '正常',
|
||||
BIANMA: 0
|
||||
}, {
|
||||
NAME: '异常',
|
||||
BIANMA: 1
|
||||
}
|
||||
],
|
||||
varRegionList: [],
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
ls: [],
|
||||
dates: [],
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
// 树形菜单
|
||||
filterText: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
console.log(val)
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
// this.getDeviceType()
|
||||
this.getDict()
|
||||
this.getTreeData()
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file) {
|
||||
if (file.IMGFILES_ID) {
|
||||
// 已经上传过的 现在删除 记录这个id
|
||||
this.waitForDeleteImgs.push(file.IMGFILES_ID)
|
||||
this.firekzsImgs = this.firekzsImgs.filter(x => x.IMGFILES_ID != file.IMGFILES_ID)
|
||||
} else {
|
||||
this.firekzsImgs = this.firekzsImgs.filter(x => x.MATERIALS_ID != file.MATERIALS_ID)
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
if (file.url) {
|
||||
this.dialogImageUrl = file.url
|
||||
}
|
||||
if (file.FILEPATH) {
|
||||
this.dialogImageUrl = config.fileUrl + file.FILEPATH
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
overFlow(files, fileList) {
|
||||
this.$message.warning('最多上传5张图片')
|
||||
},
|
||||
handleEditChange(file, fileList) {
|
||||
file.MATERIALS_ID = Math.random()
|
||||
const is5M = file.size / 1024 / 1024 < 5
|
||||
if (is5M) this.firekzsImgs.push(file)
|
||||
},
|
||||
getpic(ID) {
|
||||
requestFN(
|
||||
'imgfiles/listImgs',
|
||||
{
|
||||
FOREIGN_KEY: ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.firekzsImgs = data.imgs
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
addDescribe() {
|
||||
this.describeList.push(
|
||||
{
|
||||
code: '',
|
||||
palce: '',
|
||||
name: '',
|
||||
type: '',
|
||||
corp: '',
|
||||
ramake: ''
|
||||
}
|
||||
)
|
||||
},
|
||||
removeDescribe(index) {
|
||||
this.describeList.splice(this.describeList.length - 1, 1)
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.LATITUDE + '--' + this.LONGTITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
initTDT() {
|
||||
console.log(window)
|
||||
console.log(window.T)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.T) {
|
||||
console.log('天地图初始化成功...')
|
||||
resolve(window.T)
|
||||
reject('error')
|
||||
} else {
|
||||
console.info(999999999)
|
||||
}
|
||||
}).then(T => {
|
||||
window.T = T
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化地图
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 纬度
|
||||
* @param {*} zoom 缩放比例(1~18)
|
||||
*/
|
||||
initMap(lng, lat, zoom) {
|
||||
this.initTDT().then((T) => {
|
||||
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
|
||||
// 创建自定义图层对象
|
||||
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
|
||||
// 初始化地图对象
|
||||
this.map = new window.T.Map('map')
|
||||
this.initCenter(lng, lat, zoom)
|
||||
})
|
||||
},
|
||||
initCenter(lng, lat, zoom) {
|
||||
// 设置显示地图的中心点和级别
|
||||
if (!this.LONGTITUDE && !this.LATITUDE) {
|
||||
this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
|
||||
console.log(123)
|
||||
} else {
|
||||
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = lng
|
||||
this.LATITUDE = lat
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
}
|
||||
// 创建卫星和路网的混合视图
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP)
|
||||
// 允许鼠标滚轮缩放地图
|
||||
this.map.enableScrollWheelZoom()
|
||||
// 允许鼠标移动地图
|
||||
this.map.enableInertia()
|
||||
// 向地图上添加标注
|
||||
this.map.addEventListener('click', this.MapClick)
|
||||
},
|
||||
MapClick(event) {
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = event.lnglat.getLng()
|
||||
this.LATITUDE = event.lnglat.getLat()
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
},
|
||||
handleMap() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
console.log(!this.map)
|
||||
if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (this.addForm.info.FIRERESOURCES_NAME === '') {
|
||||
this.$message({
|
||||
message: '名称不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.STATE === '') {
|
||||
this.$message({
|
||||
message: '请检查状态不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.CORPINFO_ID === '') {
|
||||
this.$message({
|
||||
message: '请检查所属分公司不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.addForm.info.LONGTITUDEANDLATITUDE === '') {
|
||||
this.$message({
|
||||
message: '请检查经纬度不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList.length > 0) {
|
||||
// code: '',
|
||||
// palce: '',
|
||||
// name: '',
|
||||
// type: '',
|
||||
// corp: '',
|
||||
// ramake: ''
|
||||
for (var i = 0; i < this.describeList.length; i++) {
|
||||
if (this.describeList[i].code === '') {
|
||||
this.$message({
|
||||
message: '泵房编号不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].palce === '') {
|
||||
this.$message({
|
||||
message: '具体位置不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].name === '') {
|
||||
this.$message({
|
||||
message: '名称不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].type === '') {
|
||||
this.$message({
|
||||
message: '水泵分类不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].corp === '') {
|
||||
this.$message({
|
||||
message: '负责单位不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].ramake === '') {
|
||||
this.$message({
|
||||
message: '设备参数和规格不可为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.firekzsImgs.length > 0) {
|
||||
this.$message.warning('最少上传一张照片')
|
||||
return
|
||||
}
|
||||
this.addForm.info.DESCR = JSON.stringify(this.describeList)
|
||||
this.addForm.info.LATITUDE = this.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = this.LONGTITUDE
|
||||
if (valid) {
|
||||
this.diaLoading = true
|
||||
const formData = new FormData()
|
||||
Object.keys(this.addForm.info).map(key => {
|
||||
formData.append(key, this.addForm.info[key])
|
||||
})
|
||||
if (this.waitForDeleteImgs.length > 0) {
|
||||
formData.append('DELETE_IDS', this.waitForDeleteImgs.join(','))
|
||||
}
|
||||
for (let i = 0; i < this.firekzsImgs.length; i++) {
|
||||
if (this.firekzsImgs[i].raw) {
|
||||
formData.append('FFILE', this.firekzsImgs[i].raw)
|
||||
}
|
||||
}
|
||||
upload(
|
||||
'/fireResources/' + this.addForm.dialogType, formData
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.diaLoading = false
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
this.diaLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
getTreeData() {
|
||||
requestFN(
|
||||
'/department/listTree',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = JSON.parse(data.zTreeNodes)
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.getpic(row.FIRERESOURCES_ID)
|
||||
this.addForm.info.FIRERESOURCES_ID = row.FIRERESOURCES_ID
|
||||
this.addForm.info.FIRERESOURCES_NAME = row.FIRERESOURCES_NAME
|
||||
this.addForm.info.FIRERESOURCES_TYPE = row.FIRERESOURCES_TYPE
|
||||
this.addForm.info.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = row.LONGTITUDE
|
||||
this.addForm.info.STATE = row.STATE
|
||||
this.addForm.info.CORPINFO_ID = row.CORPINFO_ID
|
||||
this.LONGTITUDE = row.LONGTITUDE
|
||||
this.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = row.LATITUDE + '--' + row.LONGTITUDE
|
||||
this.describeList = []
|
||||
if (row.DESCR) {
|
||||
this.describeList = JSON.parse(row.DESCR)
|
||||
}
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.FIRE_DEVICE_ID
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.describeList = [
|
||||
{
|
||||
code: '',
|
||||
palce: '',
|
||||
name: '',
|
||||
type: '',
|
||||
corp: '',
|
||||
ramake: ''
|
||||
}
|
||||
]
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
resetAddForm() {
|
||||
this.waitForDeleteImgs = []
|
||||
this.firekzsImgs = []
|
||||
this.LATITUDE = ''
|
||||
this.LONGTITUDE = ''
|
||||
this.addForm.info = {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: 'xfbf01', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
requestFN(
|
||||
'/fireResources/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
FIRERESOURCES_NAME: this.form.FIRERESOURCES_NAME,
|
||||
FIRERESOURCES_TYPE: this.form.FIRERESOURCES_TYPE
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.form.FIRERESOURCES_NAME = ''
|
||||
|
||||
this.getList()
|
||||
},
|
||||
getDict() {
|
||||
// requestFN(
|
||||
// '/corpinfo/getSelectByCorpInfo',
|
||||
// {
|
||||
// }
|
||||
// ).then((data) => {
|
||||
// this.corpList = JSON.parse(data.corpInfoJson)
|
||||
// }).catch((e) => {
|
||||
// })
|
||||
requestFN(
|
||||
'dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
|
||||
}
|
||||
).then((data) => {
|
||||
this.typeData = data.list
|
||||
})
|
||||
.catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleDelete(id, name) {
|
||||
this.$confirm('确定要删除编号为[' + name + ']的消防资源吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fireResources/delete',
|
||||
{
|
||||
FIRERESOURCES_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(() => {
|
||||
})
|
||||
},
|
||||
|
||||
hasButton: function() {
|
||||
var keys = 'fireresources:add,fireresources:del,fireresources:edit,toExcel'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.fireresourcesfhadminadd // 新增权限
|
||||
this.del = data.fireresourcesfhadmindel // 删除权限
|
||||
this.edit = data.fireresourcesfhadminedit // 修改权限
|
||||
this.toExcel = data.toExcel // 导出到excel权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.returnBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex; /**/
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<!-- <component :is="activeName" />-->
|
||||
<div>
|
||||
<List v-show="activeName=='List'" ref="list" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
List: List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeName(val) {
|
||||
if (val == 'List') {
|
||||
this.$refs.list.getList()
|
||||
this.$refs.list.getTreeList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,585 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="rightCont">
|
||||
<el-form label-width="50px">
|
||||
<el-col :span="5">
|
||||
<el-form-item label="名称：" label-width="110px">
|
||||
<el-input v-model="form.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="消防资源类型" label-width="110px">
|
||||
<el-select v-model="form.FIRERESOURCES_TYPE" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in typeData"
|
||||
:key="item.NAME"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column type="index" label="序号" width="55" align="center"/>
|
||||
<el-table-column prop="FIRERESOURCES_NAME" label="名称"/>
|
||||
<el-table-column prop="FIRERESOURCES_TYPENAME" label="消防资源类型"/>
|
||||
<el-table-column prop="LONGTITUDE" label="消防资源经纬度">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGTITUDE }} -- {{ row.LATITUDE }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="DESCR" label="消防资源描述"/>-->
|
||||
<el-table-column prop="CREATIME" label="创建时间"/>
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button
|
||||
v-show="edit"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
@click="handleEdit(row)">修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="del"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
@click="handleDelete(row.FIRERESOURCES_ID,row.FIRERESOURCES_NAME)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
</div>
|
||||
<pagination
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList(FIRE_DEVICE_ID)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="addForm.dialogVisible"
|
||||
:title="addForm.dialogType === 'add' ? '新增' : '编辑'"
|
||||
width="50%">
|
||||
<el-form
|
||||
ref="addForm"
|
||||
:rules="addForm.rules"
|
||||
:model="addForm.info"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="padding:10px 10px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="名称：" prop="FIRERESOURCES_NAME">
|
||||
<el-input v-model="addForm.info.FIRERESOURCES_NAME" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="消防资源类型：" prop="FIRERESOURCES_TYPE">
|
||||
<el-select v-model="addForm.info.FIRERESOURCES_TYPE" placeholder="请选择" style="width: 205px">
|
||||
<el-option
|
||||
v-for="item in typeData"
|
||||
:key="item.NAME"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-form-item label="状态：" prop="STATE">
|
||||
<el-select v-model="addForm.info.STATE" placeholder="请选择" style="width: 205px">
|
||||
<el-option
|
||||
v-for="item in stateData"
|
||||
:key="item.NAME"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经纬度：" prop="LONGTITUDEANDLATITUDE">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="添加设备：">
|
||||
<el-button type="primary" @click="addDescribe">新增一行</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-for="(item,index) in describeList" :key="item.index">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="属性：" prop="LABEL">
|
||||
<el-input v-model="item.label" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" style="margin-left:30px ;">
|
||||
<el-form-item label="值：" prop="VALUE">
|
||||
<el-input v-model="item.value" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button style="margin-left: 160px" type="danger" @click="removeDescribe(index)">删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="addForm.dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">提 交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
|
||||
<div id="map"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<span>经度：</span>
|
||||
<el-input v-model="LONGTITUDE" 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 waves from '@/directive/waves' // waves directive
|
||||
import SelectTree from '@/components/SelectTree'
|
||||
import TiandiMap from '../../../../components/TianMap/TiandiMap'
|
||||
|
||||
export default {
|
||||
components: { Pagination, SelectTree, TiandiMap },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
dialogFormMap: false,
|
||||
map: null,
|
||||
corpList: [],
|
||||
marker: null,
|
||||
describeList: [],
|
||||
addBtnType: true,
|
||||
FIRE_RESOURCES_TYPE: '',
|
||||
listLoading: true,
|
||||
add: false,
|
||||
del: false,
|
||||
edit: false,
|
||||
form: {
|
||||
FIRERESOURCES_NAME: '',
|
||||
FIRERESOURCES_TYPE: ''
|
||||
},
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
FIRERESOURCES_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
FIRERESOURCES_TYPE: [{ required: true, message: '请选择消防资源类型', trigger: 'blur' }],
|
||||
LONGTITUDEANDLATITUDE: [{ required: true, message: '请经纬度不可为空', trigger: 'blur' }],
|
||||
CORPINFO_ID: [{ required: true, message: '请选择分公司', trigger: 'blur' }],
|
||||
STATE: [{ required: true, message: '请选择状态', trigger: 'blur' }],
|
||||
DESCR: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: '', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
keySelect: {
|
||||
FIRE_DEVICE_TYPE_ID: ''
|
||||
},
|
||||
treeData: [],
|
||||
typeData: [],
|
||||
stateData: [
|
||||
{
|
||||
NAME: '正常',
|
||||
BIANMA: 0
|
||||
}, {
|
||||
NAME: '异常',
|
||||
BIANMA: 1
|
||||
}
|
||||
],
|
||||
varRegionList: [],
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
ls: [],
|
||||
dates: [],
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
FIRE_POINT_NAME: '',
|
||||
FIRE_POINT_CODE: '',
|
||||
// 树形菜单
|
||||
filterText: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
console.log(val)
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
// this.getDeviceType()
|
||||
this.getDict()
|
||||
this.getTreeData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
addDescribe() {
|
||||
this.describeList.push({
|
||||
label: '',
|
||||
value: ''
|
||||
})
|
||||
},
|
||||
removeDescribe(index) {
|
||||
this.describeList.splice(index, 1)
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.LATITUDE + '--' + this.LONGTITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
initTDT() {
|
||||
console.log(window)
|
||||
console.log(window.T)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.T) {
|
||||
console.log('天地图初始化成功...')
|
||||
resolve(window.T)
|
||||
reject('error')
|
||||
} else {
|
||||
console.info(999999999)
|
||||
}
|
||||
}).then(T => {
|
||||
window.T = T
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化地图
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 纬度
|
||||
* @param {*} zoom 缩放比例(1~18)
|
||||
*/
|
||||
initMap(lng, lat, zoom) {
|
||||
this.initTDT().then((T) => {
|
||||
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
|
||||
// 创建自定义图层对象
|
||||
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
|
||||
// 初始化地图对象
|
||||
this.map = new window.T.Map('map')
|
||||
this.initCenter(lng, lat, zoom)
|
||||
})
|
||||
},
|
||||
initCenter(lng, lat, zoom) {
|
||||
// 设置显示地图的中心点和级别
|
||||
if (!this.LONGTITUDE && !this.LATITUDE) {
|
||||
this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
|
||||
console.log(123)
|
||||
} else {
|
||||
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = lng
|
||||
this.LATITUDE = lat
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
}
|
||||
// 创建卫星和路网的混合视图
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP)
|
||||
// 允许鼠标滚轮缩放地图
|
||||
this.map.enableScrollWheelZoom()
|
||||
// 允许鼠标移动地图
|
||||
this.map.enableInertia()
|
||||
// 向地图上添加标注
|
||||
this.map.addEventListener('click', this.MapClick)
|
||||
},
|
||||
MapClick(event) {
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.LONGTITUDE = event.lnglat.getLng()
|
||||
this.LATITUDE = event.lnglat.getLat()
|
||||
this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
|
||||
// 向地图上添加标注
|
||||
this.map.addOverLay(this.marker)
|
||||
},
|
||||
handleMap() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
console.log(!this.map)
|
||||
if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (this.describeList.length > 0) {
|
||||
console.log('this.describeList.length > 0')
|
||||
for (var i = 0; i < this.describeList.length; i++) {
|
||||
if (this.describeList[i].label === '') {
|
||||
this.$message({
|
||||
message: '第' + (i + 1) + '行请填写属性',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.describeList[i].value === '') {
|
||||
this.$message({
|
||||
message: '第' + (i + 1) + '行请填写值',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.addForm.info.DESCR = JSON.stringify(this.describeList)
|
||||
this.addForm.info.LATITUDE = this.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = this.LONGTITUDE
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/fireResources/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
getTreeData() {
|
||||
requestFN(
|
||||
'/department/listTree',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = JSON.parse(data.zTreeNodes)
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info.FIRERESOURCES_ID = row.FIRERESOURCES_ID
|
||||
this.addForm.info.FIRERESOURCES_NAME = row.FIRERESOURCES_NAME
|
||||
this.addForm.info.FIRERESOURCES_TYPE = row.FIRERESOURCES_TYPE
|
||||
this.addForm.info.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDE = row.LONGTITUDE
|
||||
this.addForm.info.STATE = row.STATE
|
||||
this.addForm.info.CORPINFO_ID = row.CORPINFO_ID
|
||||
this.LONGTITUDE = row.LONGTITUDE
|
||||
this.LATITUDE = row.LATITUDE
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = row.LATITUDE + '--' + row.LONGTITUDE
|
||||
this.describeList = []
|
||||
if (row.DESCR) {
|
||||
this.describeList = JSON.parse(row.DESCR)
|
||||
}
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.FIRE_DEVICE_ID
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.describeList = []
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
resetAddForm() {
|
||||
this.LATITUDE = ''
|
||||
this.LONGTITUDE = ''
|
||||
this.addForm.info = {
|
||||
FIRERESOURCES_ID: '', // 主键
|
||||
FIRERESOURCES_NAME: '', // 名称
|
||||
FIRERESOURCES_TYPE: '', // 消防资源类别
|
||||
STATE: '', // 状态
|
||||
CORPINFO_ID: '', // 状态
|
||||
LONGTITUDE: '', // 经度
|
||||
LATITUDE: '', // 纬度
|
||||
LONGTITUDEANDLATITUDE: '', // 经纬度
|
||||
DESCR: '' // 描述
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
getList(pid) {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
this.FIRE_POINT_ID = pid
|
||||
requestFN(
|
||||
'/fireResources/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
FIRERESOURCES_NAME: this.form.FIRERESOURCES_NAME,
|
||||
FIRERESOURCES_TYPE: this.form.FIRERESOURCES_TYPE
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.form.FIRERESOURCES_NAME = ''
|
||||
|
||||
this.getList()
|
||||
},
|
||||
getDict() {
|
||||
// requestFN(
|
||||
// '/corpinfo/getSelectByCorpInfo',
|
||||
// {
|
||||
// }
|
||||
// ).then((data) => {
|
||||
// this.corpList = JSON.parse(data.corpInfoJson)
|
||||
// }).catch((e) => {
|
||||
// })
|
||||
requestFN(
|
||||
'dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
|
||||
}
|
||||
).then((data) => {
|
||||
this.typeData = data.list
|
||||
})
|
||||
.catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleDelete(id, name) {
|
||||
this.$confirm('确定要删除编号为[' + name + ']的消防资源吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fireResources/delete',
|
||||
{
|
||||
FIRERESOURCES_ID: id
|
||||
}
|
||||
).then(() => {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList(this.FIRE_POINT_ID)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
hasButton: function() {
|
||||
var keys = 'fireresources:add,fireresources:del,fireresources:edit,toExcel'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.fireresourcesfhadminadd // 新增权限
|
||||
this.del = data.fireresourcesfhadmindel // 删除权限
|
||||
this.edit = data.fireresourcesfhadminedit // 修改权限
|
||||
this.toExcel = data.toExcel // 导出到excel权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.returnBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex; /**/
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<!-- <component :is="activeName" />-->
|
||||
<div>
|
||||
<List v-show="activeName=='List'" ref="list" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
List: List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeName(val) {
|
||||
if (val == 'List') {
|
||||
this.$refs.list.getList()
|
||||
this.$refs.list.getTreeList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue