<template> | <template> | ||||
<div class="overlay_container"> | <div class="overlay_container"> | ||||
<div class="overlay_head"> | <div class="overlay_head"> | ||||
<img class="close_img" src="@/assets/point/close.png" alt="" @click="close"> | |||||
<img class="close_img" src="@/assets/point/close.png" alt="" @click="updateVisible"> | |||||
</div> | </div> | ||||
<div class="overlay_main"> | <div class="overlay_main"> | ||||
<n-form | <n-form | ||||
</n-form-item> | </n-form-item> | ||||
</n-form> | </n-form> | ||||
</div> | </div> | ||||
<div class="btn_list"> | |||||
<n-button class="btn_item" type="primary" @click="makeSure">确定</n-button> | |||||
<n-button class="btn_item" @click="pass">忽略</n-button> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { toRefs, reactive } from 'vue' | |||||
import { toRefs, reactive, watch } from 'vue' | |||||
export default { | export default { | ||||
name: 'OverLay', | name: 'OverLay', | ||||
props: { | props: { | ||||
default: () => null | default: () => null | ||||
} | } | ||||
}, | }, | ||||
emits: { 'close': null }, | |||||
emits: { | |||||
'close': null, | |||||
'confirm': null, | |||||
'ignore': null | |||||
}, | |||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const data = reactive({ | const data = reactive({ | ||||
form: props.data, | form: props.data, | ||||
{ value: 0, label: '林班' } | { value: 0, label: '林班' } | ||||
] | ] | ||||
}) | }) | ||||
function close() { | |||||
watch(() => props.data, () => { | |||||
data.form = props.data | |||||
}) | |||||
const updateVisible = function() { | |||||
emit('close') | emit('close') | ||||
} | } | ||||
function makeSure() { | |||||
emit('confirm') | |||||
updateVisible() | |||||
} | |||||
function pass() { | |||||
emit('ignore') | |||||
updateVisible() | |||||
} | |||||
return { | return { | ||||
...toRefs(data), | ...toRefs(data), | ||||
close | |||||
updateVisible, | |||||
makeSure, | |||||
pass | |||||
} | } | ||||
} | } | ||||
.overlay_container { | .overlay_container { | ||||
width: 100%; | width: 100%; | ||||
height: 436px; | height: 436px; | ||||
border-radius: 6px; | |||||
padding: 0; | padding: 0; | ||||
overflow-y: scroll; | overflow-y: scroll; | ||||
background-color: #fff; | background-color: #fff; | ||||
position: relative; | |||||
} | } | ||||
.overlay_head { | .overlay_head { | ||||
display: flex; | display: flex; | ||||
justify-content: flex-end; | justify-content: flex-end; | ||||
align-items: center; | align-items: center; | ||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
} | } | ||||
.close_img { | .close_img { | ||||
width: 40px; | width: 40px; | ||||
.overlay_main { | .overlay_main { | ||||
width: 100%; | width: 100%; | ||||
margin-top: 10px; | margin-top: 10px; | ||||
padding: 0 30px 0 40px; | |||||
padding: 40px 30px 60px 40px; | |||||
} | |||||
.btn_list { | |||||
width: 100%; | |||||
padding-right: 32px; | |||||
position: fixed; | |||||
bottom: 20px; | |||||
right: 0; | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
} | |||||
.btn_item { | |||||
width: 64px; | |||||
height: 32px; | |||||
margin-left: 20px; | |||||
} | } | ||||
</style> | </style> |
<div class="main_container"> | <div class="main_container"> | ||||
<div id="track" ref="map" /> | <div id="track" ref="map" /> | ||||
<div id="pointOverlay" class="point_overlay"> | <div id="pointOverlay" class="point_overlay"> | ||||
<over-lay :data="problemData" @close="closeOverlay" /> | |||||
<over-lay :data="problemData" @close="closeOverlay" @confirm="confirmProblem" @ignore="ignoreProblem" /> | |||||
</div> | </div> | ||||
<ul class="legend_list"> | |||||
<li v-for="(item, index) in legendList" :key="index" class="legend_item"> | |||||
<div class="legend_point" :style="{background: item.color}" /> | |||||
<span class="legend_name">{{ item.name }}</span> | |||||
</li> | |||||
</ul> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { reactive, toRefs, onMounted, watch } from 'vue' | |||||
import OverLay from './OverLay.vue' | |||||
import { initMap, setOverlay } from './util.js' | |||||
import { reactive, toRefs, onMounted, watch, ref } from 'vue' | |||||
import { styleList, legendList } from './util.js' | |||||
import { Map, View, Feature, Overlay } from 'ol' | |||||
import 'ol/ol.css' | |||||
import { Tile, Vector as VectorLayer } from 'ol/layer' | |||||
import LineString from 'ol/geom/LineString' | |||||
import { XYZ, Vector as VectorSource } from 'ol/source' | |||||
import { transform, fromLonLat } from 'ol/proj' | |||||
import * as control from 'ol/control' | |||||
import { Select } from 'ol/interaction' | |||||
import Point from 'ol/geom/Point' | import Point from 'ol/geom/Point' | ||||
import OverLay from './OverLay.vue' | |||||
export default { | export default { | ||||
name: 'PositionMsg', | name: 'PositionMsg', | ||||
components: { OverLay }, | components: { OverLay }, | ||||
props: {}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: {}, | emits: {}, | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const data = reactive({ | const data = reactive({ | ||||
mapdata: null, // 地图 | |||||
view: null, // 视图 | |||||
source: null, | |||||
layer: null, // 底图 | |||||
problemLayer: null, // 问题矢量图 | |||||
select: null, | |||||
TDimageMap: null, // 影像底图 | |||||
problemList: [ | |||||
{ content: '河道内存在水生植被', | |||||
fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg', | |||||
handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png', | |||||
handlerResult: '', | |||||
handlerTime: '2022-07-25 10:45:56', | |||||
latitude: '31.829037194418085', | |||||
location: '江苏省南京市江宁区秣陵街道东吉大道', | |||||
longitude: '118.770222690945', | |||||
name: 1, | |||||
status: 1, | |||||
type: 1, | |||||
userName: '运管单位' } | |||||
], // 问题矢量点列表 | |||||
overlay: null, // overlay弹出框 | |||||
problemData: {} // 问题点数据 | |||||
problemList: props.data, // 问题矢量点列表 | |||||
problemData: {}, // 问题点数据 | |||||
legendList: legendList | |||||
}) | }) | ||||
onMounted(() => { | |||||
initMap('track', data.problemList, 'pointOverlay').then(({ mapdata, select, view, overlay, problemLayer }) => { | |||||
data.mapdata = mapdata | |||||
data.select = select | |||||
data.view = view | |||||
data.overlay = overlay | |||||
data.problemLayer = problemLayer | |||||
const mapdata = ref(null) | |||||
const select = ref(null) | |||||
const problemLayer = ref(null) | |||||
const overlay = ref(null) | |||||
const view = ref(null) | |||||
/** | |||||
* 初始化底图 | |||||
*/ | |||||
const initMap = function() { | |||||
const layers = [ | |||||
new Tile({ | |||||
visible: true, | |||||
source: new XYZ({ | |||||
url: 'https://tianditu.t-aaron.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f82bb2fd8115c7fb576a8b2fcf738523' | |||||
}) | |||||
}) | |||||
] | |||||
view.value = new View({ | |||||
maxZoom: 18, | |||||
zoom: 4, | |||||
center: transform([108.94043, 31.008173], 'EPSG:4326', 'EPSG:3857') | |||||
}) | |||||
mapdata.value = new Map({ | |||||
layers: layers, | |||||
target: 'track', | |||||
view: view.value, | |||||
controls: control.defaults({ | |||||
attribution: false, | |||||
rotate: false, | |||||
zoom: false | |||||
}) | |||||
}) | }) | ||||
mapdata.value.render() | |||||
// 添加select并设置选中样式 | |||||
select.value = new Select({ | |||||
style: (feature) => { | |||||
if (feature.getGeometry() instanceof Point) { | |||||
return styleList[3] | |||||
} | |||||
} | |||||
}) | |||||
mapdata.value.addInteraction(select.value) | |||||
// 新建overlay弹出框 | |||||
overlay.value = new Overlay({ | |||||
element: document.getElementById('pointOverlay'), | |||||
autoPan: true | |||||
}) | |||||
} | |||||
onMounted(() => { | |||||
initMap() | |||||
getLayer(props.data, view.value, mapdata.value) | |||||
}) | }) | ||||
watch( | |||||
() => data.select, | |||||
(value) => { | |||||
data.select.on('select', (e) => { | |||||
if (e.selected.length > 0) { | |||||
const properties = e.selected[0].getProperties() | |||||
const geom = properties.geometry | |||||
if (geom instanceof Point) { | |||||
data.problemData = properties.item | |||||
const coordinate = e.mapBrowserEvent.coordinate | |||||
data.overlay.setPosition(coordinate) | |||||
data.overlay.setOffset([30, -400]) | |||||
data.mapdata.addOverlay(data.overlay) | |||||
} else { | |||||
data.mapdata.removeOverlay(data.overlay) | |||||
} | |||||
/** | |||||
* 加载矢量图层 | |||||
*/ | |||||
const getLayer = function(data) { | |||||
const pointFeatures = [] | |||||
const points = [] | |||||
if (data.length) { | |||||
data.forEach((item) => { | |||||
const pointItem = [] | |||||
pointItem.push(parseFloat(item.longitude)) | |||||
pointItem.push(parseFloat(item.latitude)) | |||||
const featureItem = new Feature(new Point(fromLonLat(pointItem))) | |||||
points.push(fromLonLat(pointItem)) | |||||
featureItem.setProperties({ item: item, type: 'problem' }, false) | |||||
featureItem.setStyle(styleList[item.status]) | |||||
pointFeatures.push(featureItem) | |||||
}) | |||||
const pointSource = new VectorSource({ | |||||
wrapX: false, | |||||
features: pointFeatures | |||||
}) | |||||
problemLayer.value = new VectorLayer({ | |||||
source: pointSource, | |||||
zIndex: 12 | |||||
}) | |||||
let geom | |||||
if (points.length > 1) { | |||||
geom = new LineString(points) | |||||
} else if (points.length > 0) { | |||||
geom = new Point(points[0]) | |||||
} | |||||
if (geom) { | |||||
view.value.fit(geom, { padding: [150, 200, 150, 200] }) | |||||
} | |||||
mapdata.value.addLayer(problemLayer.value) | |||||
} | |||||
} | |||||
/** | |||||
* 删除矢量图层 | |||||
*/ | |||||
const removeVector = function(layer) { | |||||
layer.getSource().clear() | |||||
mapdata.value.removeLayer(layer) | |||||
problemLayer.value = null | |||||
} | |||||
/** | |||||
* 选择矢量点数据 | |||||
*/ | |||||
const setOverlay = function() { | |||||
select.value.on('select', (e) => { | |||||
if (e.selected.length > 0) { | |||||
const properties = e.selected[0].getProperties() | |||||
const geom = properties.geometry | |||||
if (geom instanceof Point) { | |||||
data.problemData = properties.item | |||||
const coordinate = e.mapBrowserEvent.coordinate | |||||
overlay.value.setPosition(coordinate) | |||||
overlay.value.setOffset([30, -400]) | |||||
mapdata.value.addOverlay(overlay.value) | |||||
} else { | } else { | ||||
data.mapdata.removeOverlay(data.overlay) | |||||
mapdata.value.removeOverlay(overlay.value) | |||||
} | } | ||||
}) | |||||
} else { | |||||
mapdata.value.removeOverlay(overlay.value) | |||||
} | |||||
}) | |||||
} | |||||
watch( | |||||
() => select.value, | |||||
(value) => { | |||||
setOverlay(mapdata.value, overlay.value) | |||||
} | } | ||||
) | ) | ||||
watch(() => props.data, (value) => { | |||||
if (value) { | |||||
if (mapdata.value) { | |||||
removeVector(problemLayer.value) | |||||
getLayer(value) | |||||
} | |||||
} | |||||
}) | |||||
/** | |||||
* 关闭overlay | |||||
*/ | |||||
const closeOverlay = () => { | const closeOverlay = () => { | ||||
data.select.getFeatures().clear() | |||||
data.mapdata.removeOverlay(data.overlay) | |||||
select.value.getFeatures().clear() | |||||
mapdata.value.removeOverlay(overlay.value) | |||||
} | |||||
/** | |||||
* 忽略 | |||||
*/ | |||||
const ignoreProblem = function() { | |||||
} | |||||
/** | |||||
* 确认 | |||||
*/ | |||||
const confirmProblem = function() { | |||||
} | } | ||||
return { | return { | ||||
...toRefs(data), | ...toRefs(data), | ||||
closeOverlay | |||||
removeVector, | |||||
closeOverlay, | |||||
confirmProblem, | |||||
ignoreProblem | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.point_overlay { | .point_overlay { | ||||
width: 400px; | width: 400px; | ||||
} | } | ||||
.legend_list { | |||||
width: 172px; | |||||
height: 173px; | |||||
padding: 10px 20px; | |||||
background: rgba(31, 31, 31, 0.5); | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
align-items: flex-start; | |||||
position: absolute; | |||||
bottom: 0; | |||||
right: 0; | |||||
} | |||||
.legend_item { | |||||
width: 100%; | |||||
display: flex; | |||||
justify-content: flex-start; | |||||
align-items: center; | |||||
} | |||||
.legend_point { | |||||
width: 24px; | |||||
height: 24px; | |||||
margin-right: 24px; | |||||
border-radius: 50%; | |||||
border: 1px solid #fff; | |||||
} | |||||
.legend_name { | |||||
font-size: 16px; | |||||
color: #fff; | |||||
} | |||||
</style> | </style> |
import { Map, View, Feature, Overlay } from 'ol' | |||||
import 'ol/ol.css' | import 'ol/ol.css' | ||||
import Projection from 'ol/proj/Projection' | |||||
import { Tile, Vector as VectorLayer } from 'ol/layer' | |||||
import LineString from 'ol/geom/LineString' | |||||
import { ImageStatic, TileWMS, XYZ, Vector as VectorSource } from 'ol/source' | |||||
import { transform, fromLonLat } from 'ol/proj' | |||||
import * as control from 'ol/control' | |||||
import { Select } from 'ol/interaction' | |||||
import { Stroke, Style, Icon } from 'ol/style' | |||||
import Point from 'ol/geom/Point' | |||||
import imgAll from '../../assets/point/all.png' | |||||
import { Style, Icon } from 'ol/style' | |||||
import imgAwait from '../../assets/point/await.png' | |||||
import imgChecked from '../../assets/point/checked.png' | import imgChecked from '../../assets/point/checked.png' | ||||
/** | |||||
* 初始化地图 | |||||
* @param {*} ids dom的id | |||||
* @param {*} mapdata 地图对象 | |||||
* @param {*} blanklayerList 显示图层列表 | |||||
* @param {*} datalayerList 待添加图层列表 | |||||
* @param {*} zoom 层级 | |||||
* @param {*} interactions 控制 | |||||
*/ | |||||
export function initMap(ids, data, overlayId) { | |||||
const layers = [ | |||||
new Tile({ | |||||
visible: true, | |||||
source: new XYZ({ | |||||
url: 'https://tianditu.t-aaron.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f82bb2fd8115c7fb576a8b2fcf738523' | |||||
}) | |||||
}) | |||||
] | |||||
const view = new View({ | |||||
maxZoom: 18, | |||||
zoom: 4, | |||||
center: transform([108.94043, 31.008173], 'EPSG:4326', 'EPSG:3857') | |||||
}) | |||||
const mapdata = new Map({ | |||||
layers: layers, | |||||
target: ids, | |||||
view: view, | |||||
controls: control.defaults({ | |||||
attribution: false, | |||||
rotate: false, | |||||
zoom: false | |||||
}) | |||||
}) | |||||
mapdata.render() | |||||
const problemLayer = null | |||||
getLayers(data, problemLayer, view, mapdata) | |||||
const select = new Select({ | |||||
style: (feature) => { | |||||
const properties = feature.getProperties() | |||||
if (feature.getGeometry() instanceof Point) { | |||||
return styleList[properties.item.status] | |||||
} | |||||
} | |||||
}) | |||||
mapdata.addInteraction(select) | |||||
// 新建overlay弹出框 | |||||
const overlay = new Overlay({ | |||||
element: document.getElementById(overlayId), | |||||
autoPan: true | |||||
}) | |||||
return Promise.resolve({ | |||||
mapdata, | |||||
view, | |||||
select, | |||||
overlay | |||||
}) | |||||
} | |||||
/** | |||||
* 选择矢量图层并添加overlay | |||||
* @param {*} overlay | |||||
* @param {*} select 选择 | |||||
* @param {*} mapdata 地图 | |||||
* @param {*} problemData 问题数据 | |||||
*/ | |||||
export function setOverlay(overlay, select, mapdata, problemData) { | |||||
console.log(select) | |||||
select.on('select', (e) => { | |||||
if (e.selected.length > 0) { | |||||
const properties = e.selected[0].getProperties() | |||||
const geom = properties.geometry | |||||
if (geom instanceof Point) { | |||||
problemData = properties.item | |||||
const coordinate = e.mapBrowserEvent.coordinate | |||||
overlay.setPosition(coordinate) | |||||
overlay.setOffset([30, -400]) | |||||
mapdata.addOverlay(overlay) | |||||
} else { | |||||
mapdata.removeOverlay(overlay) | |||||
} | |||||
} else { | |||||
mapdata.removeOverlay(overlay) | |||||
} | |||||
}) | |||||
return Promise.resolve({ | |||||
overlay, | |||||
select, | |||||
mapdata, | |||||
problemData | |||||
}) | |||||
} | |||||
import imgIgnored from '../../assets/point/ignored.png' | |||||
import imgSelected from '../../assets/point/selected.png' | |||||
// 矢量图标样式 | // 矢量图标样式 | ||||
const styleList = [ | |||||
export const styleList = [ | |||||
new Style({ | new Style({ | ||||
image: new Icon({ | image: new Icon({ | ||||
anchor: [0.5, 0.5], | anchor: [0.5, 0.5], | ||||
src: imgAll, | |||||
src: imgAwait, | |||||
crossOrigin: '', | crossOrigin: '', | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true | ||||
}) | }) | ||||
}) | |||||
] | |||||
/** | |||||
* 生成矢量图层 | |||||
* @param {*} datalayerList 图层数据列表 | |||||
* [{paramlayer: '图层名',type: 'wms' 类型}] | |||||
* @returns | |||||
*/ | |||||
function getLayers(data, layer, view, map) { | |||||
const pointFeatures = [] | |||||
const points = [] | |||||
if (data.length) { | |||||
data.forEach((item) => { | |||||
const pointItem = [] | |||||
pointItem.push(parseFloat(item.longitude)) | |||||
pointItem.push(parseFloat(item.latitude)) | |||||
const featureItem = new Feature(new Point(fromLonLat(pointItem))) | |||||
points.push(fromLonLat(pointItem)) | |||||
featureItem.setProperties({ item: item, type: 'problem' }, false) | |||||
featureItem.setStyle(styleList[item.status]) | |||||
pointFeatures.push(featureItem) | |||||
}) | |||||
const pointSource = new VectorSource({ | |||||
wrapX: false, | |||||
features: pointFeatures | |||||
}), | |||||
new Style({ | |||||
image: new Icon({ | |||||
anchor: [0.5, 0.5], | |||||
src: imgIgnored, | |||||
crossOrigin: '', | |||||
scale: [1, 1], | |||||
rotateWithView: true | |||||
}) | }) | ||||
layer = new VectorLayer({ | |||||
source: pointSource, | |||||
zIndex: 12 | |||||
}), | |||||
new Style({ | |||||
image: new Icon({ | |||||
anchor: [0.5, 0.5], | |||||
src: imgSelected, | |||||
crossOrigin: '', | |||||
scale: [1, 1], | |||||
rotateWithView: true | |||||
}) | }) | ||||
let geom | |||||
if (points.length > 1) { | |||||
geom = new LineString(points) | |||||
} else if (points.length > 0) { | |||||
geom = new Point(points[0]) | |||||
} | |||||
if (geom) { | |||||
view.fit(geom, { padding: [100, 100, 100, 100] }) | |||||
} | |||||
map.addLayer(layer) | |||||
} | |||||
} | |||||
/** | |||||
* 引入静态图标创建图标对象 | |||||
**/ | |||||
const imgstyle = new Style({ | |||||
image: new Icon({ | |||||
anchor: [0.5, 1], | |||||
src: import.meta.env.BASE_URL + `img/icon-biaozhu.png`, | |||||
scale: 0.5 | |||||
}) | }) | ||||
}) | |||||
/** | |||||
* 使用feature | |||||
* coordinate 坐标 | |||||
**/ | |||||
export function setTrmFeature(coordinate) { | |||||
const feature = new Feature({ | |||||
type: 'icon', | |||||
geometry: new Point(coordinate) | |||||
}) | |||||
feature.setStyle(imgstyle) | |||||
return feature | |||||
} | |||||
] | |||||
export const legendList = [ | |||||
{ | |||||
name: '待确认问题', | |||||
color: '#F1EA0B' | |||||
}, | |||||
{ | |||||
name: '当前问题', | |||||
color: '#1AFA29' | |||||
}, | |||||
{ | |||||
name: '已忽略问题', | |||||
color: '#FF8A15' | |||||
}, | |||||
{ | |||||
name: '已确定问题', | |||||
color: '#FF3333' | |||||
} | |||||
] |
children: [ | children: [ | ||||
{ | { | ||||
path: 'user', | path: 'user', | ||||
component: () => import('@/views/system/user/index.vue'), | |||||
component: () => import('@/views/system-manage/user-manage/index.vue'), | |||||
name: 'SystemUser', | name: 'SystemUser', | ||||
title: '用户管理', | title: '用户管理', | ||||
meta: { | meta: { | ||||
}, | }, | ||||
{ | { | ||||
path: 'role', | path: 'role', | ||||
component: () => import('@/views/system/role/index.vue'), | |||||
component: () => import('@/views/system-manage/role-manage/index.vue'), | |||||
name: 'SystemRole', | name: 'SystemRole', | ||||
title: '角色管理', | title: '角色管理', | ||||
meta: { | meta: { | ||||
}, | }, | ||||
{ | { | ||||
path: 'dept', | path: 'dept', | ||||
component: () => import('@/views/system/dept/index.vue'), | |||||
component: () => import('@/views/system-manage/department-manage/index.vue'), | |||||
name: 'SystemDept', | name: 'SystemDept', | ||||
title: '部门管理', | title: '部门管理', | ||||
meta: { | meta: { | ||||
}, | }, | ||||
{ | { | ||||
path: 'menu', | path: 'menu', | ||||
component: () => import('@/views/system/menu/index.vue'), | |||||
component: () => import('@/views/system-manage/menu-manage/index.vue'), | |||||
name: 'SystemMenu', | name: 'SystemMenu', | ||||
title: '菜单管理', | title: '菜单管理', | ||||
meta: { | meta: { |
<n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | ||||
<n-drawer-content closable title="疑似问题核实"> | <n-drawer-content closable title="疑似问题核实"> | ||||
<!-- <QuestionPage /> --> | <!-- <QuestionPage /> --> | ||||
<position-msg /> | |||||
<position-msg :data="problemList" /> | |||||
</n-drawer-content> | </n-drawer-content> | ||||
</n-drawer> | </n-drawer> | ||||
</template> | </template> | ||||
'update:visible': null | 'update:visible': null | ||||
}, | }, | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const data = reactive({}) | |||||
const data = reactive({ | |||||
problemList: [ | |||||
{ content: '河道内存在水生植被', | |||||
fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg', | |||||
handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png', | |||||
handlerResult: '', | |||||
handlerTime: '2022-07-25 10:45:56', | |||||
latitude: '31.829037194418085', | |||||
location: '江苏省南京市江宁区秣陵街道东吉大道', | |||||
longitude: '118.770222690945', | |||||
name: 1, | |||||
status: 1, | |||||
type: 1, | |||||
userName: '运管单位' }, | |||||
{ content: '水生植被', | |||||
fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg', | |||||
handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png', | |||||
handlerResult: '', | |||||
handlerTime: '2022-07-25 10:45:56', | |||||
latitude: '31.129037194418085', | |||||
location: '江苏省南京市江宁区秣陵街道东吉大道', | |||||
longitude: '118.880222690945', | |||||
name: 1, | |||||
status: 0, | |||||
type: 2, | |||||
userName: '运管单位' } | |||||
] | |||||
}) | |||||
/* 获取抽屉的信息 */ | /* 获取抽屉的信息 */ | ||||
const getDrawerOptions = computed(() => { | const getDrawerOptions = computed(() => { |