1990 lines
61 KiB
Vue
1990 lines
61 KiB
Vue
<template>
|
||
<div id="mapDiv">
|
||
<Map @mapView="getMap"></Map>
|
||
<transition
|
||
v-on:before-enter="beforeEnter"
|
||
v-on:enter="enter"
|
||
v-on:before-leave="beforeLeave"
|
||
v-on:leave="leave"
|
||
>
|
||
<div v-show="collapsed" id="leftPanel">
|
||
<div>
|
||
<!--展开折叠开关-->
|
||
<div @click.prevent="collapse" id="toLeft">
|
||
<i
|
||
v-if="collapsed"
|
||
class="el-icon-arrow-left"
|
||
title="收起"
|
||
style="margin-top: 13px; color: #264672"
|
||
></i>
|
||
<i
|
||
v-else
|
||
class="el-icon-arrow-right"
|
||
title="展开"
|
||
style="margin-top: 13px; color: #264672"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<div id="leftPanelScroll">
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="数据查看" name="second">
|
||
<div>
|
||
<p class="mylabel">
|
||
<span class="label-text">任务：</span>
|
||
<el-select
|
||
v-model="task"
|
||
size="small"
|
||
style="width: 60%"
|
||
placeholder="请选择任务"
|
||
filterable
|
||
clearable
|
||
@focus="getTasks()"
|
||
@change="table = ''; userId = ''"
|
||
>
|
||
<el-option
|
||
v-for="item in taskoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</p>
|
||
<p class="mylabel">
|
||
<span class="label-text">表：</span>
|
||
<el-select
|
||
id="sTable"
|
||
v-model="table"
|
||
size="small"
|
||
style="width: 60%"
|
||
placeholder="请选择表"
|
||
filterable
|
||
clearable
|
||
@focus="getTables()"
|
||
>
|
||
<el-option
|
||
v-for="item in tableoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</p>
|
||
<p class="mylabel">
|
||
<span class="label-text">人员：</span>
|
||
<el-select
|
||
id="sUser"
|
||
v-model="userId"
|
||
size="small"
|
||
style="width: 60%"
|
||
placeholder="请选择人员"
|
||
filterable
|
||
clearable
|
||
@focus="getUser()"
|
||
@blur="handleUserSelectBlur"
|
||
>
|
||
<el-option
|
||
v-for="item in useroptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</p>
|
||
<el-button
|
||
size="small"
|
||
icon="el-icon-search"
|
||
class="dateBtn"
|
||
style="background-color: #304156; color: #fff"
|
||
@click="handleConfirmClick()"
|
||
>确定
|
||
</el-button
|
||
>
|
||
<!-- 显示要素信息：属性、照片和视频
|
||
<div v-if="Info && Object.keys(Info).length > 0" style="margin-top: 20px">
|
||
<featureInfo :data="Info" style="margin: 0 auto"/>
|
||
</div>-->
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div id="editionContainer">
|
||
<el-tabs v-model="activeName1">
|
||
<el-tab-pane label="版本回退" name="first1">
|
||
<p>
|
||
重叠数据查看
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
content="在地图上选择要素后，切换查看与已选要素重叠的要素"
|
||
placement="top-end"
|
||
><i class="el-icon-info"></i></el-tooltip
|
||
>
|
||
：
|
||
<el-select
|
||
v-model="currentFeatureId"
|
||
style="width: 55%; margin-bottom: 10px"
|
||
placeholder="请选择数据id"
|
||
filterable
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in FeaturesId"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</p>
|
||
<featureInfo :data="Info" style="margin: 0 auto"/>
|
||
<div class="button-group" v-if="currentFeatureId && Object.keys(Info).length > 0">
|
||
<el-button
|
||
size="small"
|
||
class="dateBtn"
|
||
@click="ifsub ? getGeoJson() : getSubGeoJson()"
|
||
>{{ ifsub ? '返回父表' : '进入子表' }}
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
class="dateBtn"
|
||
@click="clearAll()"
|
||
>清除
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
class="dateBtn"
|
||
icon="el-icon-info"
|
||
@click="getEdition()"
|
||
>查看历史版本
|
||
</el-button>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="数据审核" name="second1">
|
||
<el-radio-group v-model="datastatus">
|
||
<el-radio :label="0">未审核</el-radio>
|
||
<el-radio :label="2">审核已通过</el-radio>
|
||
<el-radio :label="-1">审核未通过</el-radio>
|
||
</el-radio-group>
|
||
<div v-show="getList === true">
|
||
<div
|
||
:key="i"
|
||
v-for="(item, i) in examData"
|
||
style="border: 1px solid #cfcece; text-align: left"
|
||
>
|
||
{{ i + 1 + (pageNumber - 1) * pageSize }}.
|
||
<el-row
|
||
v-for="(val, key) in examData[i]"
|
||
:key="key"
|
||
@click.native="getExamInfo(i)"
|
||
>
|
||
<el-col>
|
||
{{ key }}:
|
||
<span style="color: #409eff">{{ val }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-pagination
|
||
small
|
||
layout="prev, pager, next, jumper,sizes"
|
||
:page-count="dataPageNum"
|
||
@current-change="pageChange"
|
||
@size-change="pageSizeChange"
|
||
style="height: 80px; white-space: break-spaces;"
|
||
></el-pagination>
|
||
</div>
|
||
<div v-show="getList === false">
|
||
<el-button
|
||
type="text"
|
||
@click="getList = true"
|
||
style="color: #409eff !important; margin-left: -250px"
|
||
>返回列表
|
||
</el-button
|
||
>
|
||
<featureInfo :data="examInfo" style="margin: 0 auto"/>
|
||
<el-button
|
||
v-show="datastatus === 0"
|
||
size="small"
|
||
icon="el-icon-success"
|
||
style="
|
||
background-color: #304156;
|
||
color: #fff;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
"
|
||
@click="passData()"
|
||
>审核通过
|
||
</el-button
|
||
>
|
||
<el-button
|
||
v-show="datastatus === 0"
|
||
size="small"
|
||
icon="el-icon-error"
|
||
style="
|
||
background-color: #304156;
|
||
color: #fff;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
"
|
||
@click="deleteData()"
|
||
>审核未通过
|
||
</el-button
|
||
>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<div style="height: 100%">
|
||
<el-dialog
|
||
v-dialogDrag
|
||
class="infoDialog1"
|
||
title="历史版本信息"
|
||
:visible.sync="dialogVisible"
|
||
>
|
||
<p>
|
||
数据历史版本：
|
||
<el-select
|
||
size="small"
|
||
v-model="edition"
|
||
style="width: 71%"
|
||
placeholder="请选择历史版本"
|
||
filterable
|
||
clearable
|
||
@change="getEditionData()"
|
||
>
|
||
<el-option
|
||
v-for="item in editionoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</p>
|
||
<featureInfo :data="EditionInfo" style="margin: 0 auto"/>
|
||
<el-button
|
||
size="small"
|
||
icon="el-icon-sort"
|
||
style="background-color: #304156; color: #fff; margin-top: 10px"
|
||
@click="Rollback()"
|
||
>回退到当前历史版本
|
||
</el-button
|
||
>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VectorLayer from 'ol/layer/Vector'
|
||
import VectorSource from 'ol/source/Vector'
|
||
import GeoJSON from 'ol/format/GeoJSON'
|
||
import Select from 'ol/interaction/Select'
|
||
import {ajax as request} from '@/request.js'
|
||
import 'ol/ol.css'
|
||
import Feature from 'ol/Feature'
|
||
import Point from 'ol/geom/Point'
|
||
import {Cluster} from 'ol/source'
|
||
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style'
|
||
|
||
const Map = () => import('../Mapview/Map')
|
||
const featureInfo = () => import('../DataManagement/featureInfo')
|
||
|
||
export default {
|
||
name: 'ViewTask',
|
||
data () {
|
||
return {
|
||
isExtend: false,
|
||
datastatus: 0,
|
||
dataPageNum: 1,
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
dataInfo: [],
|
||
dataCoordinates: [],
|
||
getList: true,
|
||
examData: [],
|
||
FeaturesId: [],
|
||
clusters: null,
|
||
isClusters: false,
|
||
vectorLayer: null,
|
||
isVectorLayer: false,
|
||
distribute: false,
|
||
minSize: '',
|
||
maxSize: '',
|
||
cellLayer: null,
|
||
dialogVisible: false,
|
||
selectclick: null,
|
||
activeName: 'second',
|
||
activeName1: 'first1',
|
||
collapsed: true,
|
||
drawer: false,
|
||
task: '',
|
||
table: '',
|
||
userId: '',
|
||
edition: '',
|
||
Info: {},
|
||
examInfo: {},
|
||
EditionInfo: {},
|
||
taskoptions: [],
|
||
tableoptions: [],
|
||
useroptions: [],
|
||
editionoptions: [],
|
||
currentFeatureId: '',
|
||
feature: null,
|
||
vectorSource: null,
|
||
pageLayer: null,
|
||
pageSource: null,
|
||
selectclick1: null,
|
||
sontablename: '',
|
||
fathertablename: '',
|
||
ifsub: false,
|
||
iffather: false,
|
||
fathergeom: null,
|
||
fatherFeatureLayer: null,
|
||
isFatherFeatureLayer: false,
|
||
isSwitchingToSubTable: false,
|
||
selectId: null
|
||
}
|
||
},
|
||
components: {
|
||
Map,
|
||
featureInfo
|
||
},
|
||
created () {
|
||
},
|
||
mounted () {
|
||
},
|
||
methods: {
|
||
getTasks () {
|
||
this.taskoptions = []
|
||
let that = this
|
||
// 从 store 获取数据
|
||
const taskData = that.$store.state.taskData.selectTaskHasCreated || []
|
||
for (var i = 0; i < taskData.length; i++) {
|
||
that.taskoptions.push({
|
||
value: taskData[i].id,
|
||
label: taskData[i].taskName
|
||
})
|
||
}
|
||
},
|
||
getTables () {
|
||
if (this.task === '') {
|
||
this.$alert('请先选择任务！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
document.getElementById('sTable').blur()
|
||
} else {
|
||
var taskname = ''
|
||
for (var i = 0; i < this.taskoptions.length; i++) {
|
||
if (this.task === this.taskoptions[i].value) {
|
||
taskname = this.taskoptions[i].label
|
||
break
|
||
}
|
||
}
|
||
this.tableoptions = []
|
||
let that = this
|
||
request({
|
||
url: '/statistic/getTables',
|
||
method: 'post',
|
||
params: {
|
||
tskName: taskname
|
||
}
|
||
}).then(function (response) {
|
||
// 获取数据存入config
|
||
if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
} else if (response.status === 200) {
|
||
var json = response.data
|
||
for (var key in json) {
|
||
that.tableoptions.push({
|
||
value: key,
|
||
label: json[key]
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getUser () {
|
||
if (this.task === '') {
|
||
this.$alert('请先选择任务！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
document.getElementById('sUser').blur()
|
||
} else {
|
||
this.useroptions = []
|
||
let that = this
|
||
request({
|
||
// url: '/report/workloadByUser',
|
||
url: 'statistic/getWorkers',
|
||
method: 'get',
|
||
params: {
|
||
taskId: that.task
|
||
}
|
||
}).then(function (response) {
|
||
// 登录成功获取数据存入usersData
|
||
if (response.data.success) {
|
||
response.data.data.forEach(user => {
|
||
that.useroptions.push({
|
||
value: user.id,
|
||
label: user.realName
|
||
})
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getMap (val) {
|
||
this.map = val
|
||
let that = this
|
||
this.map.on('moveend', function (e) {
|
||
// 20250729
|
||
if (that.ifsub) {
|
||
return
|
||
}
|
||
// ---------------
|
||
// 移除所有
|
||
if (that.clusters) {
|
||
if (that.isClusters) {
|
||
that.map.removeLayer(that.clusters)
|
||
}
|
||
that.clusters = null
|
||
}
|
||
if (that.vectorLayer) {
|
||
if (that.isVectorLayer) {
|
||
that.map.removeLayer(that.vectorLayer)
|
||
that.map.removeInteraction(that.selectclick)
|
||
}
|
||
that.vectorLayer = null
|
||
that.selectclick = null
|
||
}
|
||
if (that.distribute && that.activeName1 === 'first1' && that.cellLayer) {
|
||
that.debounce(that.getClusters(), 500)
|
||
}
|
||
})
|
||
},
|
||
debounce (fn, delay) {
|
||
let timer = null // 借助闭包
|
||
return function () {
|
||
if (timer) {
|
||
clearTimeout(timer)
|
||
timer = setTimeout(fn, delay)
|
||
} else {
|
||
timer = setTimeout(fn, delay)
|
||
}
|
||
}
|
||
},
|
||
// 左侧面板收缩动画
|
||
collapse () {
|
||
this.collapsed = !this.collapsed
|
||
},
|
||
beforeEnter: function (el) {
|
||
el.style.transform = 'translate(410px,0px)'
|
||
},
|
||
enter: function (el, done) {
|
||
el.style.transform = 'translate(0px,0px)'
|
||
el.style.transition = 'all 0.6s ease'
|
||
done()
|
||
},
|
||
beforeLeave: function (el) {
|
||
el.style.transform = 'translate(0px,0px)'
|
||
},
|
||
leave: function (el, done) {
|
||
el.style.transform = 'translate(-425px,0px)'
|
||
el.style.transition = 'all 0.6s ease'
|
||
// done();
|
||
},
|
||
getRange (addToMap) {
|
||
let that = this
|
||
request({
|
||
url: '/allocation/info/cell/all',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task
|
||
}
|
||
}).then(function (response) {
|
||
// 获取数据存入config
|
||
if (response.data.status === 200) {
|
||
var result = response.data.data
|
||
if (result.features.length !== 0) {
|
||
that.drawCellLayer(result)
|
||
that.map.getView().fit(that.cellLayer.getSource().getExtent())
|
||
// if (that.ifsub === false && that.iffather === false) {
|
||
// that.map.getView().fit(that.cellLayer.getSource().getExtent())
|
||
// }
|
||
that.getClusters()
|
||
} else {
|
||
that.$message.info('获取任务范围失败，未上传数据！')
|
||
}
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
},
|
||
getClusters () {
|
||
var zoom = 0
|
||
zoom = this.map.getView().getZoom()
|
||
// 获取地图范围
|
||
var coordinates = this.map.getView().calculateExtent(this.map.getSize())
|
||
var geoHashLength = ''
|
||
switch (zoom) {
|
||
case 8:
|
||
case 9:
|
||
geoHashLength = 4
|
||
break
|
||
case 10:
|
||
case 11:
|
||
case 12:
|
||
geoHashLength = 5
|
||
break
|
||
case 13:
|
||
case 14:
|
||
case 15:
|
||
case 16:
|
||
geoHashLength = 6
|
||
break
|
||
case 17:
|
||
case 18:
|
||
case 19:
|
||
case 20:
|
||
geoHashLength = 7
|
||
break
|
||
default:
|
||
geoHashLength = 3
|
||
}
|
||
if (this.distribute) {
|
||
if (this.ifsub) {
|
||
let that = this
|
||
request({
|
||
url: '/get/getSubDataByRangeIntersection',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
parentId: that.selectId,
|
||
longitudeMin: coordinates[0],
|
||
latitudeMin: coordinates[1],
|
||
longitudeMax: coordinates[2],
|
||
latitudeMax: coordinates[3]
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success) {
|
||
if (response.data.data) {
|
||
var geojson = response.data.data
|
||
var geojsonObject = {
|
||
type: 'FeatureCollection',
|
||
features: geojson,
|
||
crs: {type: 'EPSG', properties: {code: '4326'}}
|
||
}
|
||
that.drawVectorLayer(geojsonObject)
|
||
} else {
|
||
that.$message.info('获取范围内数据为空！')
|
||
}
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
} else {
|
||
if (zoom < 15) {
|
||
// 请求聚类图层
|
||
let that = this
|
||
that.minSize = 0
|
||
that.maxSize = 0
|
||
request({
|
||
url: '/base/getCountByGeoHash',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
accuracy: geoHashLength,
|
||
longitudeMin: coordinates[0],
|
||
latitudeMin: coordinates[1],
|
||
longitudeMax: coordinates[2],
|
||
latitudeMax: coordinates[3]
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success) {
|
||
if (response.data.data) {
|
||
var result = response.data.data
|
||
var geojson = []
|
||
for (var i = 0; i < result.length; i++) {
|
||
var count = result[i].count
|
||
if (i === 0) {
|
||
that.minSize = count
|
||
that.maxSize = count
|
||
} else {
|
||
if (count < that.minSize) {
|
||
that.minSize = count
|
||
}
|
||
if (count > that.maxSize) {
|
||
that.maxSize = count
|
||
}
|
||
}
|
||
// 存入count
|
||
var geojson1 = result[i].feature
|
||
geojson1.properties = {}
|
||
geojson1.properties.count = count
|
||
geojson.push(result[i].feature)
|
||
}
|
||
var geojsonObject = {
|
||
type: 'FeatureCollection',
|
||
features: geojson,
|
||
crs: {type: 'EPSG', properties: {code: '4326'}}
|
||
}
|
||
that.drawClusterLayer(geojsonObject)
|
||
} else {
|
||
that.$message.info('获取范围内数据为空！')
|
||
}
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
} else {
|
||
let that = this
|
||
request({
|
||
url: '/get/getDataByRangeIntersection',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
longitudeMin: coordinates[0],
|
||
latitudeMin: coordinates[1],
|
||
longitudeMax: coordinates[2],
|
||
latitudeMax: coordinates[3]
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success) {
|
||
if (response.data.data) {
|
||
var geojson = response.data.data
|
||
var geojsonObject = {
|
||
type: 'FeatureCollection',
|
||
features: geojson,
|
||
crs: {type: 'EPSG', properties: {code: '4326'}}
|
||
}
|
||
that.drawVectorLayer(geojsonObject)
|
||
} else {
|
||
that.$message.info('获取范围内数据为空！')
|
||
}
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
drawCellLayer (geojsonObject) {
|
||
if (this.cellLayer) {
|
||
this.map.removeLayer(this.cellLayer)
|
||
}
|
||
var vectorSource = new VectorSource({
|
||
features: new GeoJSON().readFeatures(geojsonObject)
|
||
})
|
||
this.cellLayer = new VectorLayer({
|
||
source: vectorSource
|
||
})
|
||
this.cellLayer.setZIndex(5)
|
||
},
|
||
drawClusterLayer (geojsonObject) {
|
||
if (this.clusters) {
|
||
if (this.isClusters) {
|
||
this.map.removeLayer(this.clusters)
|
||
this.isClusters = false
|
||
}
|
||
this.clusters = null
|
||
}
|
||
if (this.vectorLayer) {
|
||
if (this.isVectorLayer) {
|
||
this.map.removeLayer(this.vectorLayer)
|
||
this.map.removeInteraction(this.selectclick)
|
||
}
|
||
this.vectorLayer = null
|
||
this.selectclick = null
|
||
}
|
||
var vectorSource = new VectorSource({
|
||
features: new GeoJSON().readFeatures(geojsonObject)
|
||
})
|
||
// let that = this
|
||
this.clusters = new VectorLayer({
|
||
source: vectorSource,
|
||
style: function (feature) {
|
||
// let count = feature.get('count').toString()
|
||
let style = new Style({
|
||
stroke: new Stroke({
|
||
lineDash: [1, 2, 3, 4, 5, 6],
|
||
color: 'rgba(70,130,180, 0.9)',
|
||
width: 2
|
||
}),
|
||
fill: new Fill({
|
||
color: [255, 153, 0, 0.8]
|
||
}),
|
||
text: new Text({
|
||
text: feature.get('count').toString(),
|
||
font: '16px Microsoft YaHei',
|
||
fill: new Fill({
|
||
color: '#fff'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: 'rgba(0, 0, 0, 0.6)',
|
||
width: 3
|
||
})
|
||
})
|
||
})
|
||
return [style]
|
||
}
|
||
})
|
||
this.clusters.setZIndex(4)
|
||
this.map.addLayer(this.clusters)
|
||
this.isClusters = true
|
||
},
|
||
drawVectorLayer (geojsonObject) {
|
||
this.drawFatherFeature()
|
||
if (this.clusters) {
|
||
if (this.isClusters) {
|
||
this.map.removeLayer(this.clusters)
|
||
}
|
||
this.clusters = null
|
||
}
|
||
if (this.vectorLayer) {
|
||
if (this.isVectorLayer) {
|
||
this.map.removeLayer(this.vectorLayer)
|
||
this.map.removeInteraction(this.selectclick)
|
||
}
|
||
this.vectorLayer = null
|
||
this.selectclick = null
|
||
}
|
||
this.vectorSource = new VectorSource({
|
||
features: new GeoJSON().readFeatures(geojsonObject)
|
||
})
|
||
var styles = {
|
||
Point: new Style({
|
||
image: new CircleStyle({
|
||
radius: 7,
|
||
fill: new Fill({
|
||
color: 'rgba(173,216,230)'
|
||
}),
|
||
stroke: new Stroke({
|
||
lineDash: [1, 2, 3, 4, 5, 6],
|
||
color: 'rgba(70,130,180)',
|
||
width: 2
|
||
})
|
||
}),
|
||
stroke: new Stroke({
|
||
lineDash: [1, 2, 3, 4, 5, 6],
|
||
color: 'rgba(70,130,180)',
|
||
width: 2
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(173,216,230)'
|
||
})
|
||
}),
|
||
LineString: new Style({
|
||
stroke: new Stroke({
|
||
color: 'green',
|
||
width: 3
|
||
})
|
||
}),
|
||
Polygon: new Style({
|
||
stroke: new Stroke({
|
||
color: 'blue',
|
||
lineDash: [4],
|
||
width: 3
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(0, 0, 255, 0.1)'
|
||
})
|
||
})
|
||
}
|
||
var styleFunction = function (feature) {
|
||
return styles[feature.getGeometry().getType()]
|
||
}
|
||
var allfearures = this.vectorSource.getFeatures()
|
||
for (var i = 0; i < allfearures.length; i++) {
|
||
allfearures[i].setId(allfearures[i].get('id'))
|
||
}
|
||
this.vectorLayer = new VectorLayer({
|
||
id: 'vectorlayer',
|
||
source: this.vectorSource,
|
||
style: styleFunction
|
||
})
|
||
|
||
this.vectorLayer.setZIndex(4)
|
||
this.map.addLayer(this.vectorLayer)
|
||
this.isVectorLayer = true
|
||
let this1 = this
|
||
this.selectclick = new Select({
|
||
layers: [this.vectorLayer]
|
||
})
|
||
this.selectclick.on('select', function (e) {
|
||
this1.edition = ''
|
||
this1.editionoptions = []
|
||
this1.EditionInfo = {}
|
||
this1.FeaturesId = []
|
||
var features = e.selected
|
||
if (features.length > 0) {
|
||
let that = this1
|
||
var feature = features[0]
|
||
var type = feature.getGeometry().getType()
|
||
if (that.ifsub === false) {
|
||
that.fathergeom = feature.getGeometry()
|
||
}
|
||
console.log(that.fathergeom)
|
||
var tmp = 1
|
||
if (type === 'LineString' || type === 'Point') {
|
||
that.FeaturesId.push({
|
||
value: feature.get('id'),
|
||
label: feature.get('id')
|
||
})
|
||
that.currentFeatureId = feature.get('id')
|
||
tmp = 0
|
||
}
|
||
this.getFeatures().clear()
|
||
var coordinate = e.mapBrowserEvent.coordinate
|
||
var Features = that.vectorSource.getFeaturesAtCoordinate(coordinate)
|
||
for (var i = 0; i < Features.length; i++) {
|
||
that.FeaturesId.push({
|
||
value: Features[i].get('id'),
|
||
label: Features[i].get('id')
|
||
})
|
||
if (i === 0 && tmp === 1) {
|
||
that.currentFeatureId = Features[i].get('id')
|
||
}
|
||
}
|
||
|
||
// 获取并显示要素属性（无论哪个标签页都获取）
|
||
that.getFeatureData()
|
||
}
|
||
})
|
||
this.map.addInteraction(this.selectclick)
|
||
},
|
||
drawFatherFeature () {
|
||
// 如果已存在父几何图层，先移除它
|
||
if (this.fatherFeatureLayer) {
|
||
if (this.isFatherFeatureLayer) {
|
||
this.map.removeLayer(this.fatherFeatureLayer)
|
||
}
|
||
this.fatherFeatureLayer = null
|
||
}
|
||
|
||
// 如果 fathergeom 存在，则绘制它
|
||
if (this.fathergeom) {
|
||
// 创建一个 feature 来容纳 fathergeom
|
||
const fatherFeature = new Feature({
|
||
geometry: this.fathergeom
|
||
})
|
||
|
||
// 为父几何图形创建特殊样式（红色高亮）
|
||
const fatherStyle = new Style({
|
||
image: new CircleStyle({
|
||
radius: 8,
|
||
fill: new Fill({
|
||
color: 'rgba(255, 0, 0, 0.7)'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: 'rgba(255, 0, 0, 1)',
|
||
width: 3
|
||
})
|
||
}),
|
||
stroke: new Stroke({
|
||
color: 'rgba(255, 0, 0, 1)',
|
||
width: 4
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(255, 0, 0, 0.3)'
|
||
})
|
||
})
|
||
|
||
// 创建父几何图形的 source 和 layer
|
||
const fatherSource = new VectorSource({
|
||
features: [fatherFeature]
|
||
})
|
||
|
||
this.fatherFeatureLayer = new VectorLayer({
|
||
source: fatherSource,
|
||
style: fatherStyle
|
||
})
|
||
|
||
this.fatherFeatureLayer.setZIndex(2)
|
||
this.map.addLayer(this.fatherFeatureLayer)
|
||
this.isFatherFeatureLayer = true
|
||
}
|
||
},
|
||
handleConfirmClick () {
|
||
// 主动移除所有可能的焦点，防止下拉菜单意外弹出
|
||
if (document.activeElement) {
|
||
document.activeElement.blur()
|
||
}
|
||
|
||
// 使用 nextTick 确保 DOM 更新完成后再执行
|
||
this.$nextTick(() => {
|
||
this.getGeoJson()
|
||
})
|
||
},
|
||
handleUserSelectBlur () {
|
||
// 处理人员选择组件失焦事件，确保下拉菜单正确关闭
|
||
this.$nextTick(() => {
|
||
// 确保下拉菜单完全关闭
|
||
const userSelect = document.getElementById('sUser')
|
||
if (userSelect) {
|
||
const selectElement = userSelect.querySelector('.el-select')
|
||
if (selectElement) {
|
||
selectElement.blur()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getGeoJson () {
|
||
if (this.pageLayer) {
|
||
this.map.removeLayer(this.pageLayer)
|
||
this.map.removeInteraction(this.selectclick1)
|
||
this.pageLayer = null
|
||
this.selectclick1 = null
|
||
}
|
||
this.examInfo = {}
|
||
this.examData = []
|
||
this.dataPageNum = 1
|
||
this.activeName1 = 'first1'
|
||
this.getList = true
|
||
this.currentFeatureId = ''
|
||
this.edition = ''
|
||
this.editionoptions = []
|
||
this.EditionInfo = {}
|
||
this.fathergeom = null
|
||
if (this.task === '') {
|
||
this.$alert('请选择任务！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
if (this.table === '') {
|
||
this.$alert('请选择表！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
/*if (this.userId === '') {
|
||
this.$alert('请选择人员！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}*/
|
||
if (this.ifsub === true) {
|
||
this.table = this.fathertablename
|
||
this.ifsub = false
|
||
this.iffather = true
|
||
}
|
||
|
||
this.distribute = true
|
||
this.getRange(0)
|
||
this.getList = true
|
||
this.updataList()
|
||
},
|
||
initPageLayer () {
|
||
if (this.pageLayer) {
|
||
this.map.removeLayer(this.pageLayer)
|
||
this.pageLayer = null
|
||
this.map.removeInteraction(this.selectclick1)
|
||
}
|
||
var geojsonObject = {
|
||
type: 'FeatureCollection',
|
||
features: this.dataCoordinates,
|
||
crs: {type: 'EPSG', properties: {code: '4326'}}
|
||
}
|
||
this.pageSource = new VectorSource({
|
||
features: new GeoJSON().readFeatures(geojsonObject)
|
||
})
|
||
var styles = {
|
||
Point: new Style({
|
||
image: new CircleStyle({
|
||
radius: 7,
|
||
fill: new Fill({
|
||
color: 'rgba(173,216,230)'
|
||
}),
|
||
stroke: new Stroke({
|
||
lineDash: [1, 2, 3, 4, 5, 6],
|
||
color: 'rgba(70,130,180)',
|
||
width: 2
|
||
})
|
||
}),
|
||
stroke: new Stroke({
|
||
lineDash: [1, 2, 3, 4, 5, 6],
|
||
color: 'rgba(70,130,180)',
|
||
width: 2
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(173,216,230)'
|
||
})
|
||
}),
|
||
LineString: new Style({
|
||
stroke: new Stroke({
|
||
color: 'green',
|
||
width: 3
|
||
})
|
||
}),
|
||
Polygon: new Style({
|
||
stroke: new Stroke({
|
||
color: 'blue',
|
||
lineDash: [4],
|
||
width: 3
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(0, 0, 255, 0.1)'
|
||
})
|
||
})
|
||
}
|
||
var styleFunction = function (feature) {
|
||
return styles[feature.getGeometry().getType()]
|
||
}
|
||
var allfearures = this.pageSource.getFeatures()
|
||
for (var i = 0; i < allfearures.length; i++) {
|
||
allfearures[i].setId(allfearures[i].get('id'))
|
||
}
|
||
|
||
this.pageLayer = new VectorLayer({
|
||
source: this.pageSource,
|
||
style: styleFunction
|
||
})
|
||
this.pageLayer.setZIndex(5)
|
||
this.map.addLayer(this.pageLayer)
|
||
|
||
if (this.activeName1 === 'first1') {
|
||
this.pageLayer.setVisible(false)
|
||
}
|
||
|
||
this.selectclick1 = new Select({
|
||
layers: [this.pageLayer]
|
||
})
|
||
let that = this
|
||
this.selectclick1.on('select', function (e) {
|
||
var features = e.selected
|
||
if (features.length > 0) {
|
||
var feature = features[0]
|
||
that.isExtend = false
|
||
that.currentFeatureId = feature.get('id')
|
||
this.getFeatures().clear()
|
||
}
|
||
})
|
||
this.map.addInteraction(this.selectclick1)
|
||
},
|
||
initPage () {
|
||
this.examData = []
|
||
for (var i = 0; i < this.dataInfo.length; i++) {
|
||
// var maxcount = 0;
|
||
var dataInfo1 = {}
|
||
for (var key in this.dataInfo[i]) {
|
||
if (
|
||
key !== 'mediaFileURLs' &&
|
||
key !== 'id' &&
|
||
this.dataInfo[i][key].toString().substring(0, 15) !== '/get/getPicture'
|
||
// && maxcount < 3
|
||
) {
|
||
// maxcount = maxcount + 1;
|
||
dataInfo1[key] = this.dataInfo[i][key]
|
||
}
|
||
}
|
||
this.examData.push(dataInfo1)
|
||
}
|
||
},
|
||
getEdition () {
|
||
if (this.currentFeatureId === '') {
|
||
this.$alert('请先选择数据！', '提示', {confirmButtonText: '确定'})
|
||
} else {
|
||
let that = this
|
||
that.editionoptions = []
|
||
request({
|
||
url: '/get/getDataVersion',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId
|
||
}
|
||
}).then(function (response) {
|
||
// 获取数据存入config
|
||
if (response.data.success === true) {
|
||
var options = response.data.data
|
||
that.edition = options[0]
|
||
that.getEditionData()
|
||
for (var i = 0; i < options.length; i++) {
|
||
that.editionoptions.push({
|
||
value: options[i],
|
||
label: options[i]
|
||
})
|
||
}
|
||
that.dialogVisible = true
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
} else if (response.data.success === false) {
|
||
that.$alert('当前数据无历史版本！')
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getFeatureData () {
|
||
if (this.currentFeatureId !== '') {
|
||
let that = this
|
||
// 获取数据
|
||
request({
|
||
url: '/get/getDataById',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId,
|
||
requestor: 'browser'
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success === true) {
|
||
var jsondata = response.data.data
|
||
var imagedata = []
|
||
var videodata = []
|
||
// 处理媒体文件URL
|
||
if (jsondata.mediaFileURLs && Array.isArray(jsondata.mediaFileURLs)) {
|
||
for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
|
||
var url = jsondata.mediaFileURLs[i]
|
||
if (!url) continue
|
||
|
||
// 获取文件扩展名（支持多种格式）
|
||
var urlLower = url.toLowerCase()
|
||
var ext = ''
|
||
var lastDot = urlLower.lastIndexOf('.')
|
||
if (lastDot > 0) {
|
||
ext = urlLower.substring(lastDot + 1)
|
||
}
|
||
|
||
// 图片格式：jpg, jpeg, png, gif, bmp, webp
|
||
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
|
||
imagedata.push(url)
|
||
}
|
||
// 视频格式：avi, mp4, mov, wmv, flv, mkv, webm
|
||
else if (['avi', 'mp4', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext)) {
|
||
videodata.push(url)
|
||
}
|
||
}
|
||
}
|
||
jsondata.imagedata = imagedata
|
||
jsondata.videodata = videodata
|
||
|
||
// 处理字典数组：将属性值为字典数组的字段转换为 value 值
|
||
for (var key in jsondata) {
|
||
// 排除特殊字段
|
||
if (key === 'imagedata' || key === 'videodata' || key === 'mediaFileURLs' || key === 'id') {
|
||
continue
|
||
}
|
||
var value = jsondata[key]
|
||
// 检查是否为字符串且可能是JSON格式
|
||
if (typeof value === 'string' && value.trim().startsWith('[') && value.trim().endsWith(']')) {
|
||
try {
|
||
var parsed = JSON.parse(value)
|
||
// 检查是否为数组且数组元素是对象
|
||
if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object' && parsed[0] !== null) {
|
||
// 提取所有 value 值，用逗号连接
|
||
var values = parsed.map(function(item) {
|
||
// 如果 value 存在且不为空，返回 value；否则返回空字符串
|
||
if (item.value !== undefined && item.value !== null && item.value !== '') {
|
||
return item.value
|
||
}
|
||
return ''
|
||
}).filter(function(v) {
|
||
return v !== ''
|
||
})
|
||
// 如果所有值都为空，设置为空字符串；否则用逗号连接
|
||
jsondata[key] = values.length > 0 ? values.join(', ') : ''
|
||
}
|
||
} catch (e) {
|
||
// 如果解析失败，保持原值
|
||
console.warn('Failed to parse dictionary array for key:', key, e)
|
||
}
|
||
}
|
||
}
|
||
|
||
that.Info = jsondata
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getEditionData () {
|
||
if (this.edition !== '') {
|
||
let that = this
|
||
request({
|
||
url: '/get/getDataByIdAndVersion',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId,
|
||
version: that.edition
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success === true) {
|
||
var jsondata = response.data.data
|
||
var imagedata = []
|
||
var videodata = []
|
||
for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
|
||
if (
|
||
jsondata.mediaFileURLs[i].substring(
|
||
jsondata.mediaFileURLs[i].length - 3
|
||
) === 'jpg'
|
||
) {
|
||
imagedata.push(jsondata.mediaFileURLs[i])
|
||
} else if (
|
||
jsondata.mediaFileURLs[i].substring(
|
||
jsondata.mediaFileURLs[i].length - 3
|
||
) === 'avi'
|
||
) {
|
||
videodata.push(jsondata.mediaFileURLs[i])
|
||
}
|
||
}
|
||
jsondata.imagedata = imagedata
|
||
jsondata.videodata = videodata
|
||
|
||
// 处理字典数组：将属性值为字典数组的字段转换为 value 值
|
||
for (var key in jsondata) {
|
||
// 排除特殊字段
|
||
if (key === 'imagedata' || key === 'videodata' || key === 'mediaFileURLs' || key === 'id') {
|
||
continue
|
||
}
|
||
var value = jsondata[key]
|
||
// 检查是否为字符串且可能是JSON格式
|
||
if (typeof value === 'string' && value.trim().startsWith('[') && value.trim().endsWith(']')) {
|
||
try {
|
||
var parsed = JSON.parse(value)
|
||
// 检查是否为数组且数组元素是对象
|
||
if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object' && parsed[0] !== null) {
|
||
// 提取所有 value 值，用逗号连接
|
||
var values = parsed.map(function(item) {
|
||
// 如果 value 存在且不为空，返回 value；否则返回空字符串
|
||
if (item.value !== undefined && item.value !== null && item.value !== '') {
|
||
return item.value
|
||
}
|
||
return ''
|
||
}).filter(function(v) {
|
||
return v !== ''
|
||
})
|
||
// 如果所有值都为空，设置为空字符串；否则用逗号连接
|
||
jsondata[key] = values.length > 0 ? values.join(', ') : ''
|
||
}
|
||
} catch (e) {
|
||
// 如果解析失败，保持原值
|
||
console.warn('Failed to parse dictionary array for key:', key, e)
|
||
}
|
||
}
|
||
}
|
||
|
||
that.EditionInfo = jsondata
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
Rollback () {
|
||
if (this.edition === '') {
|
||
this.$alert('请先选择历史版本！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
let that = this
|
||
request({
|
||
url: '/base/rollBackDataForVersion',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId,
|
||
version: that.edition
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success === true) {
|
||
that.$alert('版本回退成功！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
that.edition = ''
|
||
that.Info = {}
|
||
that.currentFeatureId = ''
|
||
that.editionoptions = []
|
||
that.EditionInfo = {}
|
||
that.getClusters()
|
||
that.dialogVisible = false
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
passData () {
|
||
if (this.currentFeatureId === '') {
|
||
this.$alert('请先选择数据！', '提示', {confirmButtonText: '确定'})
|
||
} else {
|
||
this.$confirm('确认该数据审核通过吗？', '提示', {}).then(() => {
|
||
let that = this
|
||
// 审核通过请求
|
||
request({
|
||
url: '/base/setDataStatus',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId,
|
||
pass: true
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success === true) {
|
||
that.$alert('操作成功！', '提示', {confirmButtonText: '确定'})
|
||
that.changeCurrentInfo(that.pageNumber, that.currentFeatureId)
|
||
that.updataList()
|
||
that.getList = true
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
deleteData () {
|
||
if (this.currentFeatureId === '') {
|
||
this.$alert('请先选择数据！', '提示', {confirmButtonText: '确定'})
|
||
} else {
|
||
this.$prompt('请输入审核未通过原因', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputPattern: /\S/,
|
||
inputErrorMessage: '输入原因不可为空'
|
||
})
|
||
.then(({value}) => {
|
||
let that = this
|
||
// 审核未通过请求
|
||
request({
|
||
url: '/base/setDataStatus',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
polygonId: that.currentFeatureId,
|
||
pass: false,
|
||
reason: value
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.success === true) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: '操作成功'
|
||
})
|
||
that.changeCurrentInfo(that.pageNumber, that.currentFeatureId)
|
||
that.updataList()
|
||
that.getList = true
|
||
/* that.pageChange(that.pageNumber)
|
||
that.getExamInfoById(that.currentFeatureId); */
|
||
} else if (response.data.status === '401') {
|
||
that.$alert(response.data.message)
|
||
that.$router.push({path: '/login'})
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: '操作失败'
|
||
})
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消操作'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
getClusterData (geojsonObject) {
|
||
var Features = new GeoJSON().readFeatures(geojsonObject)
|
||
var features = new Array(Features.length)
|
||
for (var i = 0; i < Features.length; i++) {
|
||
var geometry = Features[i].getGeometry()
|
||
var coordinates = geometry.getCoordinates()
|
||
var coordinate = []
|
||
if (coordinates[0][0]) {
|
||
if (coordinates[0][0][0]) {
|
||
coordinate = coordinates[0][0]
|
||
} else {
|
||
coordinate = coordinates[0]
|
||
}
|
||
} else {
|
||
coordinate = coordinates
|
||
}
|
||
features[i] = new Feature(new Point(coordinate))
|
||
}
|
||
var clusterSource = new VectorSource({
|
||
features: features
|
||
})
|
||
var cluster = new Cluster({
|
||
distance: 40,
|
||
source: clusterSource
|
||
})
|
||
var styleCache = {}
|
||
this.clusters = new VectorLayer({
|
||
id: 'clusterlayer',
|
||
source: cluster,
|
||
style: function (feature) {
|
||
if (feature.get('features')) {
|
||
var size = feature.get('features').length
|
||
var style = styleCache[size]
|
||
if (!style) {
|
||
style = new Style({
|
||
image: new CircleStyle({
|
||
radius: 10,
|
||
stroke: new Stroke({
|
||
color: '#fff'
|
||
}),
|
||
fill: new Fill({
|
||
color: '#3399CC'
|
||
})
|
||
}),
|
||
text: new Text({
|
||
text: size.toString(),
|
||
fill: new Fill({
|
||
color: '#fff'
|
||
})
|
||
})
|
||
})
|
||
styleCache[size] = style
|
||
}
|
||
return style
|
||
}
|
||
}
|
||
})
|
||
// 聚类图层
|
||
this.clusters.setZIndex(4)
|
||
this.map.addLayer(this.clusters)
|
||
this.isClusters = true
|
||
},
|
||
setCurrentStyle1 () {
|
||
if (this.currentFeatureId !== '') {
|
||
this.getList = false
|
||
this.getExamInfoById(this.currentFeatureId)
|
||
// 改变样式
|
||
if (this.feature) {
|
||
this.feature.setStyle(undefined)
|
||
}
|
||
this.feature = this.pageSource.getFeatureById(this.currentFeatureId)
|
||
var type = this.feature.getGeometry().getType()
|
||
if (this.isExtend) {
|
||
if (type === 'Point') {
|
||
this.map
|
||
.getView()
|
||
.setCenter(this.feature.getGeometry().getExtent())
|
||
this.map.getView().setZoom(15)
|
||
} else {
|
||
var extent = this.feature.getGeometry().getExtent()
|
||
var center = [
|
||
(extent[0] + extent[2]) / 2,
|
||
(extent[1] + extent[3]) / 2
|
||
] // 获取边界区域的中心位置
|
||
this.map.getView().setCenter(center) // 设置当前地图的显示中心位置
|
||
this.map.getView().setZoom(14)
|
||
}
|
||
}
|
||
|
||
var style = new Style({
|
||
image: new CircleStyle({
|
||
radius: 7,
|
||
fill: new Fill({
|
||
color: 'yellow'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: '#37eed0',
|
||
width: 3
|
||
})
|
||
}),
|
||
fill: new Fill({
|
||
color: 'yellow'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: '#37eed0',
|
||
width: 3
|
||
})
|
||
})
|
||
this.feature.setStyle(style)
|
||
} else {
|
||
if (this.feature) {
|
||
this.feature.setStyle(undefined)
|
||
this.feature = null
|
||
}
|
||
}
|
||
},
|
||
setCurrentStyle () {
|
||
if (this.currentFeatureId !== '') {
|
||
this.getFeatureData()
|
||
// 改变样式
|
||
if (this.feature) {
|
||
this.feature.setStyle(undefined)
|
||
}
|
||
this.feature = this.vectorSource.getFeatureById(this.currentFeatureId)
|
||
if (this.feature) { // 添加检查确保要素存在
|
||
var style = new Style({
|
||
image: new CircleStyle({
|
||
radius: 7,
|
||
fill: new Fill({
|
||
color: 'yellow'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: '#37eed0',
|
||
width: 3
|
||
})
|
||
}),
|
||
fill: new Fill({
|
||
color: 'yellow'
|
||
}),
|
||
stroke: new Stroke({
|
||
color: '#37eed0',
|
||
width: 3
|
||
})
|
||
})
|
||
this.feature.setStyle(style)
|
||
}
|
||
} else {
|
||
if (this.feature) {
|
||
this.feature.setStyle(undefined)
|
||
this.feature = null
|
||
}
|
||
}
|
||
},
|
||
clearAll () {
|
||
this.currentFeatureId = ''
|
||
this.Info = {}
|
||
this.edition = ''
|
||
this.editionoptions = []
|
||
this.EditionInfo = {}
|
||
this.FeaturesId = []
|
||
this.fathergeom = null
|
||
|
||
// 清除父几何图形显示
|
||
if (this.fatherFeatureLayer) {
|
||
if (this.isFatherFeatureLayer) {
|
||
this.map.removeLayer(this.fatherFeatureLayer)
|
||
}
|
||
this.fatherFeatureLayer = null
|
||
this.isFatherFeatureLayer = false
|
||
}
|
||
},
|
||
getExamInfoById (id) {
|
||
var jsondata = {}
|
||
for (var k = 0; k < this.dataInfo.length; k++) {
|
||
if (this.dataInfo[k].id.toString() === id) {
|
||
jsondata = JSON.parse(JSON.stringify(this.dataInfo[k]))
|
||
break
|
||
}
|
||
}
|
||
this.examInfo = {}
|
||
var imagedata = []
|
||
var videodata = []
|
||
for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
|
||
if (
|
||
jsondata.mediaFileURLs[i].substring(
|
||
jsondata.mediaFileURLs[i].length - 3
|
||
) === 'jpg'
|
||
) {
|
||
imagedata.push(jsondata.mediaFileURLs[i])
|
||
} else if (
|
||
jsondata.mediaFileURLs[i].substring(
|
||
jsondata.mediaFileURLs[i].length - 3
|
||
) === 'avi'
|
||
) {
|
||
videodata.push(jsondata.mediaFileURLs[i])
|
||
}
|
||
}
|
||
jsondata.imagedata = imagedata
|
||
jsondata.videodata = videodata
|
||
delete jsondata.mediaFileURLs
|
||
delete jsondata.id
|
||
this.examInfo = jsondata
|
||
},
|
||
getExamInfo (i) {
|
||
this.getList = false
|
||
var jsondata = this.dataInfo[i]
|
||
this.examInfo = {}
|
||
if (this.currentFeatureId === jsondata.id.toString()) {
|
||
this.getExamInfoById(this.currentFeatureId)
|
||
} else {
|
||
this.isExtend = true
|
||
this.currentFeatureId = jsondata.id.toString()
|
||
}
|
||
},
|
||
changeCurrentInfo (num, id) {
|
||
let that = this
|
||
if (this.table !== '') {
|
||
request({
|
||
url: '/get/getDataByPageNum',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
pageNum: num,
|
||
pageSize: that.pageSize,
|
||
status: that.datastatus,
|
||
workerId: that.userId
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.data) {
|
||
that.dataInfo = response.data.data.dataInfo
|
||
that.dataCoordinates = response.data.data.dataCoordinates
|
||
that.getExamInfoById(id)
|
||
that.initPage()
|
||
that.initPageLayer()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
updataList () {
|
||
this.pageNumber = 1
|
||
if (this.table !== '') {
|
||
let that = this
|
||
request({
|
||
url: '/get/getDataByPageNum',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
pageNum: 1,
|
||
pageSize: that.pageSize,
|
||
status: that.datastatus,
|
||
workerId: that.userId
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.data) {
|
||
that.dataInfo = response.data.data.dataInfo
|
||
that.dataCoordinates = response.data.data.dataCoordinates
|
||
that.dataPageNum = response.data.data.dataPageNum
|
||
that.initPage()
|
||
that.initPageLayer()
|
||
} else {
|
||
that.examData = []
|
||
that.dataInfo = []
|
||
that.dataCoordinates = null
|
||
that.dataPageNum = 0
|
||
that.map.removeLayer(that.pageLayer)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
pageChange (val) {
|
||
let that = this
|
||
this.pageNumber = val
|
||
if (this.table !== '') {
|
||
request({
|
||
url: '/get/getDataByPageNum',
|
||
method: 'post',
|
||
params: {
|
||
taskId: that.task,
|
||
tableName: that.table,
|
||
pageNum: val,
|
||
pageSize: that.pageSize,
|
||
status: that.datastatus,
|
||
workerId: that.userId
|
||
}
|
||
}).then(function (response) {
|
||
if (response.data.data) {
|
||
that.dataInfo = response.data.data.dataInfo
|
||
that.dataCoordinates = response.data.data.dataCoordinates
|
||
that.initPage()
|
||
that.initPageLayer()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
pageSizeChange (pageSize) {
|
||
this.pageSize = pageSize
|
||
this.pageNumber = 1
|
||
},
|
||
getSubGeoJson () {
|
||
if (!this.currentFeatureId) {
|
||
this.$alert('请先在地图上选择一个要素！', '提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.selectId = this.currentFeatureId
|
||
|
||
// 保存当前状态
|
||
this.fathertablename = this.table
|
||
|
||
// 设置新的表名
|
||
if (this.table === 'roottable1') {
|
||
this.table = 't1sub1'
|
||
} else if (this.table === 'roottable3') {
|
||
this.table = 't3sub'
|
||
} else if (this.table === 'roottable4') {
|
||
this.table = 't4sub'
|
||
}
|
||
|
||
this.ifsub = true
|
||
|
||
// 清理现有图层和交互
|
||
this.clearAllLayersAndInteractions()
|
||
|
||
// 重置相关状态
|
||
this.FeaturesId = []
|
||
this.Info = {}
|
||
this.currentFeatureId = ''
|
||
|
||
// 获取子区域范围并更新数据列表
|
||
this.distribute = true
|
||
this.getRange(0)
|
||
this.updataList()
|
||
},
|
||
clearAllLayersAndInteractions () {
|
||
// 清除聚类图层
|
||
if (this.clusters) {
|
||
if (this.isClusters) {
|
||
this.map.removeLayer(this.clusters)
|
||
}
|
||
this.clusters = null
|
||
this.isClusters = false
|
||
}
|
||
|
||
// 清除矢量图层和交互
|
||
if (this.vectorLayer) {
|
||
if (this.isVectorLayer) {
|
||
this.map.removeLayer(this.vectorLayer)
|
||
this.map.removeInteraction(this.selectclick)
|
||
}
|
||
this.vectorLayer = null
|
||
this.selectclick = null
|
||
this.isVectorLayer = false
|
||
}
|
||
|
||
// 清除分页图层和交互
|
||
if (this.pageLayer) {
|
||
this.map.removeLayer(this.pageLayer)
|
||
this.map.removeInteraction(this.selectclick1)
|
||
this.pageLayer = null
|
||
this.selectclick1 = null
|
||
}
|
||
|
||
// 清除cellLayer
|
||
this.cellLayer = null
|
||
|
||
// 清除父几何图层
|
||
if (this.fatherFeatureLayer) {
|
||
if (this.isFatherFeatureLayer) {
|
||
this.map.removeLayer(this.fatherFeatureLayer)
|
||
}
|
||
this.fatherFeatureLayer = null
|
||
this.isFatherFeatureLayer = false
|
||
}
|
||
|
||
// 重置相关数据
|
||
this.FeaturesId = []
|
||
this.Info = {}
|
||
this.EditionInfo = {}
|
||
this.editionoptions = []
|
||
this.edition = ''
|
||
}
|
||
},
|
||
watch: {
|
||
currentFeatureId: {
|
||
handler () {
|
||
if (this.vectorLayer && this.activeName1 === 'first1') {
|
||
this.setCurrentStyle()
|
||
}
|
||
if (this.pageLayer && this.activeName1 === 'second1') {
|
||
this.setCurrentStyle1(1)
|
||
}
|
||
// 在"数据查看"标签页中，当选择要素时获取要素数据
|
||
if (this.activeName === 'second' && this.currentFeatureId && this.task && this.table) {
|
||
this.getFeatureData()
|
||
}
|
||
}
|
||
},
|
||
vectorSource: {
|
||
handler () {
|
||
if (this.vectorLayer) {
|
||
this.setCurrentStyle()
|
||
}
|
||
}
|
||
},
|
||
activeName1: {
|
||
handler () {
|
||
if (this.activeName1 === 'first1') {
|
||
this.clearAll()
|
||
this.getClusters()
|
||
if (this.pageLayer) {
|
||
this.pageLayer.setVisible(false)
|
||
}
|
||
} else {
|
||
this.clearAll()
|
||
if (this.clusters) {
|
||
if (this.isClusters) {
|
||
this.map.removeLayer(this.clusters)
|
||
}
|
||
this.clusters = null
|
||
}
|
||
if (this.vectorLayer) {
|
||
if (this.isVectorLayer) {
|
||
this.map.removeLayer(this.vectorLayer)
|
||
this.map.removeInteraction(this.selectclick)
|
||
}
|
||
this.vectorLayer = null
|
||
this.selectclick = null
|
||
}
|
||
this.cellLayer = null
|
||
if (this.pageLayer) {
|
||
this.pageLayer.setVisible(true)
|
||
this.map.getView().fit(this.pageLayer.getSource().getExtent())
|
||
}
|
||
}
|
||
}
|
||
},
|
||
datastatus: {
|
||
handler () {
|
||
this.updataList()
|
||
this.getList = true
|
||
}
|
||
},
|
||
table: {
|
||
handler () {
|
||
if (this.clusters) {
|
||
if (this.isClusters) {
|
||
this.map.removeLayer(this.clusters)
|
||
}
|
||
this.clusters = null
|
||
}
|
||
if (this.vectorLayer) {
|
||
if (this.isVectorLayer) {
|
||
this.map.removeLayer(this.vectorLayer)
|
||
this.map.removeInteraction(this.selectclick)
|
||
}
|
||
this.vectorLayer = null
|
||
this.selectclick = null
|
||
}
|
||
this.cellLayer = null
|
||
if (this.pageLayer) {
|
||
this.map.removeLayer(this.pageLayer)
|
||
this.map.removeInteraction(this.selectclick1)
|
||
this.pageLayer = null
|
||
this.selectclick1 = null
|
||
}
|
||
this.currentFeatureId = ''
|
||
this.Info = {}
|
||
this.edition = ''
|
||
this.editionoptions = []
|
||
this.EditionInfo = {}
|
||
this.FeaturesId = []
|
||
this.examInfo = {}
|
||
this.examData = []
|
||
this.dataPageNum = 1
|
||
this.activeName1 = 'first1'
|
||
this.getList = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang='scss'>
|
||
.el-input__inner {
|
||
&::placeholder {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 14px;
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
.ol-popup {
|
||
position: absolute;
|
||
background-color: white;
|
||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
border: 1px solid #cccccc;
|
||
bottom: 12px;
|
||
left: -50px;
|
||
min-width: 280px;
|
||
}
|
||
|
||
.ol-popup:after,
|
||
.ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: " ";
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ol-popup:after {
|
||
border-top-color: white;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.ol-popup:before {
|
||
border-top-color: #cccccc;
|
||
border-width: 11px;
|
||
left: 48px;
|
||
margin-left: -11px;
|
||
}
|
||
|
||
.ol-popup-closer {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 8px;
|
||
}
|
||
|
||
.ol-popup-closer:after {
|
||
content: "✖";
|
||
}
|
||
|
||
.taskChoser {
|
||
margin: 5px 0px 5px 0px;
|
||
}
|
||
|
||
.mylabel {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin: 0 0 8px 0;
|
||
padding: 4px 14px;
|
||
font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1B5E20;
|
||
background: rgba(232, 245, 233, 0.85);
|
||
border: 1px solid rgba(129, 199, 132, 0.4);
|
||
border-radius: 12px;
|
||
letter-spacing: 0.5px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.mylabel .label-text {
|
||
display: inline-block;
|
||
min-width: 60px;
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.mylabel ::v-deep .el-select,
|
||
.mylabel ::v-deep .el-input {
|
||
flex: 1;
|
||
min-width: 220px;
|
||
}
|
||
|
||
.el-icon-circle-close {
|
||
color: white;
|
||
}
|
||
</style>
|