709 lines
25 KiB
Vue
709 lines
25 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="level-title">
|
||
<h1>{{ this.$parent.firePointId === '' ? "新增" : "修改" }}</h1>
|
||
</div>
|
||
<div>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="180px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="消防区域名称：" prop="fireRegionId">
|
||
<el-select v-model="form.fireRegionId" placeholder="请选择" class="filter-item" style="width: 100%;">
|
||
<el-option
|
||
v-for="item in varRegionList"
|
||
:key="item.fireRegionId"
|
||
:label="item.fireRegionName"
|
||
:value="item.fireRegionId"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="负责部门：" prop="departmentId">
|
||
<el-select v-model="form.departmentId" placeholder="请选择负责部门" style="width: 100%;">
|
||
<el-option
|
||
v-for="item in departmentList"
|
||
:key="item.departmentId"
|
||
:label="item.departmentName"
|
||
:value="item.departmentId"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="负责人：" prop="USER_ID">
|
||
<el-select v-model="form.userId" placeholder="请选择人员" class="filter-item" style="width: 100%;">
|
||
<el-option v-for="item in varList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="消防点位名称：" prop="firePointName">
|
||
<el-input v-model="form.firePointName" placeholder="请输入内容"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="消防点位编码：" prop="firePointCode">
|
||
<el-input v-model="form.firePointCode" placeholder="请输入内容"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="经纬度：" prop="longitudeAndLatitude">
|
||
<el-input v-model="form.longitudeAndLatitude" 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="消防点位图片 ">
|
||
<div class="disContent">
|
||
<el-upload
|
||
:auto-upload="false"
|
||
:file-list="firefightingImgs"
|
||
: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">
|
||
限制上传数量:{{ firefightingImgs.length +'/'+'5' }}
|
||
</div>
|
||
<div>
|
||
只能上传jpg/png文件，单张且不超过5mb
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
|
||
<div id="cesiumContainer"/>
|
||
<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 class="ui-foot">
|
||
<el-button type="success" @click="confirm">保 存</el-button>
|
||
<el-button plain type="info" @click="goBack">返 回</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Pagination from '@/components/Pagination'
|
||
import { requestFN } from '@/utils/request'
|
||
import { upload } from '@/utils/upload'
|
||
import SelectTree from '@/components/SelectTree'
|
||
import waves from '@/directive/waves'
|
||
import TiandiMap from '@/components/TianMap/TiandiMap.vue'
|
||
import RyDragEntity from '../../../map/js/ry_dragentity'
|
||
import DragEntity from '../../../map/js/dragentity'
|
||
|
||
let viewer = null
|
||
let drag = null
|
||
// eslint-disable-next-line no-unused-vars
|
||
let ry_drag = null
|
||
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
|
||
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
||
const Cesium = window.Cesium
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
|
||
|
||
export default {
|
||
components: { Pagination, SelectTree, TiandiMap },
|
||
directives: { waves },
|
||
data() {
|
||
return {
|
||
config: config,
|
||
firefightingImgs: [],
|
||
waitForDeleteImgs: [],
|
||
dialogVisible: false,
|
||
dialogImageUrl: '',
|
||
dialogFormMap: false,
|
||
map: null,
|
||
longitude: '',
|
||
latitude: '',
|
||
SORTINDEX: '',
|
||
departmentList: [],
|
||
form: {
|
||
firePointId: '',
|
||
firePointName: '',
|
||
firePointCode: '',
|
||
longitudeAndLatitude: '',
|
||
longitude: '',
|
||
latitude: '',
|
||
POST_ID: '',
|
||
fireRegionId: '',
|
||
departmentId: '',
|
||
userId: ''
|
||
},
|
||
rules: {
|
||
fireRegionId: [{ required: true, message: '消防区域不为空', trigger: 'blur' }],
|
||
firePointName: [{ required: true, message: '消防点位不为空', trigger: 'blur' }],
|
||
firePointCode: [{ required: true, message: '消防点位编码不为空', trigger: 'blur' }],
|
||
departmentId: [{ required: true, message: '请选责任部门', trigger: 'blur' }],
|
||
longitudeAndLatitude: [{ required: false, message: '请选经纬度', trigger: 'blur' }],
|
||
userId: [{ required: true, message: '请选责任人', trigger: 'blur' }]
|
||
},
|
||
varList: [],
|
||
varRegionList: [],
|
||
deForm: {
|
||
departmentId: '',
|
||
departmentName: ''
|
||
},
|
||
corpInfo: {
|
||
CORP_INFO_ID: '',
|
||
longitude: '',
|
||
latitude: ''
|
||
},
|
||
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||
poinEntity: {},
|
||
dichitype: 0
|
||
}
|
||
},
|
||
watch: {
|
||
'form.fireRegionId': {
|
||
handler(newVal, oldVal) {
|
||
if (oldVal) this.form.userId = ''
|
||
this.form.departmentId = ''
|
||
this.varList = []
|
||
this.getFireRegionInfo(newVal)
|
||
},
|
||
immediate: false
|
||
}
|
||
},
|
||
async created() {
|
||
this.FIRE_POINT_ID = this.$parent.firePointId
|
||
await this.getFireRegion()
|
||
if (this.FIRE_POINT_ID) {
|
||
this.getDicListByPID()
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initCorpInfo()
|
||
},
|
||
methods: {
|
||
initCorpInfo() {
|
||
requestFN(
|
||
'/map/getCorpInfo', {}
|
||
).then((data) => {
|
||
this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
|
||
this.corpInfo.latitude = data.info.latitude
|
||
this.corpInfo.longitude = data.info.longitude
|
||
this.initMap2()
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
})
|
||
},
|
||
initMap2() {
|
||
console.info(viewer)
|
||
if (this.dichitype === 2) {
|
||
return
|
||
}
|
||
viewer = new Cesium.Viewer('cesiumContainer', {
|
||
animation: false, // 动画
|
||
homeButton: true, // home键
|
||
geocoder: true, // 地址编码
|
||
baseLayerPicker: false, // 图层选择控件
|
||
timeline: false, // 时间轴
|
||
fullscreenButton: true, // 全屏显示
|
||
infoBox: true, // 点击要素之后浮窗
|
||
sceneModePicker: true, // 投影方式 三维/二维
|
||
navigationInstructionsInitiallyVisible: false, // 导航指令
|
||
navigationHelpButton: false, // 帮助信息
|
||
selectionIndicator: false, // 选择
|
||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||
// 影像底图
|
||
url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
|
||
subdomains: subdomains,
|
||
layer: 'tdtImgLayer',
|
||
style: 'default',
|
||
format: 'image/jpeg',
|
||
tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
|
||
show: true
|
||
})
|
||
})
|
||
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
|
||
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
||
// 影像注记
|
||
url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk,
|
||
subdomains: subdomains,
|
||
layer: 'tdtCiaLayer',
|
||
style: 'default',
|
||
format: 'image/jpeg',
|
||
tileMatrixSetID: 'GoogleMapsCompatible',
|
||
show: true
|
||
}))
|
||
drag = new DragEntity({
|
||
viewer
|
||
})
|
||
// 根据不同的公司将信息加载到地图上
|
||
this.initInfo()
|
||
this.leftDownAction()
|
||
console.log(this.latitude)
|
||
if (this.latitude) {
|
||
console.log('latitude')
|
||
this.dfdfd(this.longitude, this.latitude)
|
||
}
|
||
|
||
this.loadTilesetHandler()
|
||
ry_drag = new RyDragEntity({
|
||
viewer
|
||
})
|
||
this.dichitype = 2
|
||
},
|
||
leftDownAction() {
|
||
// 去掉entity的点击事件 start
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
// 去掉entity的点击事件 end
|
||
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
||
this.handler.setInputAction(movement => {
|
||
// eslint-disable-next-line no-unused-vars
|
||
var cartesian = this.getCatesian3FromPX(movement.position)
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
},
|
||
getCatesian3FromPX: function(px) {
|
||
if (viewer && px) {
|
||
var picks = viewer.scene.drillPick(px)
|
||
var cartesian = null
|
||
// eslint-disable-next-line one-var
|
||
var isOn3dtiles = false,
|
||
isOnTerrain = false
|
||
// drillPick
|
||
for (const i in picks) {
|
||
const pick = picks[i]
|
||
|
||
if (
|
||
(pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
|
||
(pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
|
||
(pick && pick.primitive instanceof Cesium.Model)
|
||
) {
|
||
// 模型上拾取
|
||
isOn3dtiles = true
|
||
}
|
||
// 3dtilset
|
||
if (isOn3dtiles) {
|
||
viewer.scene.pick(px) // pick
|
||
cartesian = viewer.scene.pickPosition(px)
|
||
if (cartesian) {
|
||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
|
||
if (cartographic.height < 0) cartographic.height = 0
|
||
// eslint-disable-next-line prefer-const,one-var
|
||
let lon = Cesium.Math.toDegrees(cartographic.longitude),
|
||
// eslint-disable-next-line prefer-const
|
||
lat = Cesium.Math.toDegrees(cartographic.latitude),
|
||
// eslint-disable-next-line prefer-const
|
||
height = cartographic.height
|
||
cartesian = this.transformWGS84ToCartesian({
|
||
lng: lon,
|
||
lat: lat,
|
||
alt: height
|
||
})
|
||
}
|
||
}
|
||
}
|
||
// 地形
|
||
const boolTerrain =
|
||
viewer.terrainProvider instanceof
|
||
Cesium.EllipsoidTerrainProvider
|
||
// Terrain
|
||
if (!isOn3dtiles && !boolTerrain) {
|
||
var ray = viewer.scene.camera.getPickRay(px)
|
||
if (!ray) return null
|
||
cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
||
isOnTerrain = true
|
||
}
|
||
// 地球
|
||
if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
|
||
cartesian = viewer.scene.camera.pickEllipsoid(
|
||
px,
|
||
viewer.scene.globe.ellipsoid
|
||
)
|
||
}
|
||
const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值
|
||
|
||
// 将 Cartesian3 坐标转换为 Cartographic 坐标
|
||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)
|
||
|
||
// 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
|
||
const lng = Cesium.Math.toDegrees(cartographic.longitude)
|
||
const lat = Cesium.Math.toDegrees(cartographic.latitude)
|
||
const height = cartographic.height // 高度
|
||
this.longitude = lng
|
||
this.latitude = lat
|
||
this.dfdfd(lng, lat)
|
||
return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
|
||
}
|
||
},
|
||
transformWGS84ToCartesian: function(position, alt) {
|
||
// eslint-disable-next-line no-return-assign
|
||
return position ? Cesium.Cartesian3.fromDegrees(
|
||
position.lng || position.lon,
|
||
position.lat,
|
||
position.alt = alt || position.alt,
|
||
Cesium.Ellipsoid.WGS84
|
||
)
|
||
: Cesium.Cartesian3.ZERO
|
||
},
|
||
dfdfd(LONGITUDE, latitude) {
|
||
let dianweiName = '消防点位'
|
||
if (this.form.firePointName) {
|
||
dianweiName = this.form.firePointName
|
||
}
|
||
var initPoint = [
|
||
{
|
||
'id': '00002',
|
||
'data_id': '00002',
|
||
'MAP_POINT_NAME': dianweiName,
|
||
'name': '',
|
||
'point_type': '港口',
|
||
'type': '',
|
||
'descr': '',
|
||
'position': {
|
||
'x': LONGITUDE,
|
||
'y': latitude
|
||
},
|
||
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
|
||
}
|
||
]
|
||
this.dragAreaEntity(initPoint)
|
||
ry_drag = new RyDragEntity({
|
||
viewer
|
||
})
|
||
},
|
||
// 加载点
|
||
dragAreaEntity(pointArr) {
|
||
this.poinEntity = {}
|
||
|
||
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||
pointArr.forEach(item => {
|
||
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
||
const entity = drag.addEntity(item)
|
||
this.poinEntity[item.id] = entity
|
||
collection.entities.add(entity)
|
||
}
|
||
})
|
||
viewer.dataSources.removeAll()
|
||
viewer.dataSources.add(collection)
|
||
},
|
||
initInfo() {
|
||
this.bottomOptionsIndex = ''
|
||
this.clickPort({
|
||
id: '00003',
|
||
CORP_INFO_ID: this.corpInfo.CORP_INFO_ID,
|
||
longitude: this.corpInfo.longitude,
|
||
latitude: this.corpInfo.latitude,
|
||
height: '2000'
|
||
})
|
||
},
|
||
clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
|
||
console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID)
|
||
this.gangkouActive = id
|
||
this.CORP_INFO_ID = CORP_INFO_ID
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
this.toCenter({ longitude, latitude, height })
|
||
drag.addPolygon(id)
|
||
viewer.dataSources.removeAll()
|
||
},
|
||
toCenter(center = this.center) {
|
||
console.log('toCenter', center)
|
||
if (this.FIRE_POINT_ID && this.longitude && this.latitude && this.longitude.trim() !== '' && this.latitude.trim() !== '') {
|
||
this.center.longitude = this.longitude
|
||
this.center.latitude = this.latitude
|
||
} else {
|
||
this.center.longitude = center.longitude
|
||
this.center.latitude = center.latitude
|
||
}
|
||
this.center.height = center.height
|
||
viewer.camera.flyTo({
|
||
// 设置中心点,x,y,缩放等级
|
||
destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
|
||
})
|
||
},
|
||
loadTilesetHandler() {
|
||
Cesium.ExperimentalFeatures.enableModelExperimental = true
|
||
var cfdd = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(cfdd)
|
||
|
||
var cfdx = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(cfdx)
|
||
|
||
var qhdxys = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(qhdxys)
|
||
|
||
var qhdgysh = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(qhdgysh)
|
||
},
|
||
handleRemove(file) {
|
||
if (file.imgfilesId) {
|
||
// 已经上传过的 现在删除 记录这个id
|
||
this.waitForDeleteImgs.push(file.imgfilesId)
|
||
this.firefightingImgs = this.firefightingImgs.filter(x => x.imgfilesId !== file.imgfilesId)
|
||
} else {
|
||
this.firefightingImgs = this.firefightingImgs.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.firefightingImgs.push(file)
|
||
},
|
||
getFireRegion() {
|
||
requestFN(
|
||
'/fire/region/v2/list',
|
||
{}
|
||
).then((data) => {
|
||
this.varRegionList = data.varList
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
setPosition() {
|
||
this.form.longitudeAndLatitude = this.latitude + '--' + this.longitude
|
||
this.dialogFormMap = false
|
||
},
|
||
initTDT() {
|
||
},
|
||
/**
|
||
* 初始化地图
|
||
* @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'
|
||
const imageURL = 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk
|
||
// 创建自定义图层对象
|
||
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.longitude && !this.latitude) {
|
||
this.map.centerAndZoom(new window.T.LngLat(119.58273, 39.91724), zoom)
|
||
} else {
|
||
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
|
||
this.marker && this.map.removeOverLay(this.marker)
|
||
this.longitude = 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.longitude = 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(() => {
|
||
if (!this.map) {
|
||
this.initCorpInfo()
|
||
} else {
|
||
this.initCenter(this.longitude, this.latitude, 16)
|
||
}
|
||
})
|
||
},
|
||
confirm() {
|
||
this.$refs.form.validate(valid => {
|
||
if (valid) {
|
||
const formData = new FormData()
|
||
if (this.form.longitudeAndLatitude) {
|
||
const [latitude, longitude] = this.form.longitudeAndLatitude.split('--')
|
||
this.form.longitude = longitude
|
||
this.form.latitude = latitude
|
||
}
|
||
Object.keys(this.form).map(key => {
|
||
formData.append(key, this.form[key])
|
||
})
|
||
if (this.firefightingImgs.length > 0) {
|
||
for (let i = 0; i < this.firefightingImgs.length; i++) {
|
||
formData.append('files', this.firefightingImgs[i].raw)
|
||
}
|
||
}
|
||
formData.append('waitForDeleteImgs', this.waitForDeleteImgs.join(','))
|
||
if (this.$parent.FIRE_POINT_ID === '') {
|
||
this.handleAdd(formData)
|
||
} else {
|
||
if (valid) {
|
||
this.listLoading = true
|
||
upload(
|
||
'/fire/point/v2/update',
|
||
formData
|
||
).then((data) => {
|
||
this.waitForDeleteImgs = []
|
||
this.listLoading = false
|
||
this.dialogFormEdit = false
|
||
this.$parent.activeName = 'List'
|
||
this.$parent.$refs.list.getList()
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
number() {
|
||
this.form.SORTINDEX = this.form.SORTINDEX.replace(/[^\.\d]/g, '')
|
||
this.form.SORTINDEX = this.form.SORTINDEX.replace('.', '')
|
||
},
|
||
handleAdd(formData) {
|
||
upload(
|
||
'/fire/point/v2/save',
|
||
formData
|
||
).then((data) => {
|
||
this.waitForDeleteImgs = []
|
||
this.$parent.activeName = 'List'
|
||
}).catch((e) => {})
|
||
},
|
||
getDicListByPID() {
|
||
requestFN(
|
||
'/fire/point/v2/info',
|
||
{ id: this.$parent.firePointId }
|
||
).then((data) => {
|
||
this.form = Object.assign(this.form, data.res)
|
||
this.longitude = this.form.longitude
|
||
this.latitude = this.form.latitude
|
||
this.firefightingImgs = data.imgList
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
// 用户
|
||
getUserList() {
|
||
requestFN(
|
||
'/user/listAll',
|
||
{
|
||
DEPARTMENT_ID: this.form.departmentId,
|
||
POST_ID: this.form.POST_ID
|
||
}
|
||
).then((data) => {
|
||
this.varList = data.userList
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
getFireRegionInfo(FIRE_REGION_ID) {
|
||
this.listLoading = true
|
||
this.departmentList = []
|
||
requestFN(
|
||
'/fire/region/v2/info',
|
||
{
|
||
fireRegionId: FIRE_REGION_ID
|
||
}
|
||
).then((data) => {
|
||
this.listLoading = false
|
||
this.deForm.departmentId = data.res.departmentId
|
||
this.deForm.departmentName = data.res.departmentName
|
||
this.departmentList.push(this.deForm)
|
||
this.form.departmentId = data.res.departmentId
|
||
this.$nextTick(() => {
|
||
this.getUserList()
|
||
})
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
// 返回列表
|
||
goBack() {
|
||
this.$parent.activeName = 'List'
|
||
this.$parent.firePointId = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
#cesiumContainer {
|
||
width: 1000px;
|
||
height: 500px;
|
||
}
|
||
</style>
|