"pinia": "^2.0.13", | "pinia": "^2.0.13", | ||||
"pinia-plugin-persist": "^1.0.0", | "pinia-plugin-persist": "^1.0.0", | ||||
"tinymce": "^5.10.2", | "tinymce": "^5.10.2", | ||||
"vite-plugin-svg-icons": "^2.0.1", | |||||
"vue": "^3.2.16", | "vue": "^3.2.16", | ||||
"vue-router": "^4.0.14", | "vue-router": "^4.0.14", | ||||
"vuedraggable": "^4.1.0" | "vuedraggable": "^4.1.0" |
> | > | ||||
<n-form-item label="问题类型:"> | <n-form-item label="问题类型:"> | ||||
<n-select | <n-select | ||||
v-model:value="form.name" | |||||
v-model:value="form.type" | |||||
:options="typeList" | :options="typeList" | ||||
placeholder="请选择问题类型" | placeholder="请选择问题类型" | ||||
/> | /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { toRefs, reactive, watch } from 'vue' | |||||
import { toRefs, reactive, watch, inject } from 'vue' | |||||
export default { | export default { | ||||
name: 'OverLay', | name: 'OverLay', | ||||
props: { | props: { | ||||
} | } | ||||
}, | }, | ||||
emits: { | emits: { | ||||
'close': null, | |||||
'confirm': null, | |||||
'ignore': null | |||||
'close': null | |||||
}, | }, | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const data = reactive({ | const data = reactive({ | ||||
form: props.data, | |||||
form: {}, | |||||
typeList: [ | typeList: [ | ||||
{ value: 0, label: '林班' } | |||||
{ value: 1, label: '林斑' }, | |||||
{ value: 2, label: '病虫害' } | |||||
] | ] | ||||
}) | }) | ||||
/* 引入祖先组件注册的方法 */ | |||||
const confirm = inject('confirm', null) | |||||
const ignore = inject('ignore', null) | |||||
watch(() => props.data, () => { | watch(() => props.data, () => { | ||||
data.form = props.data | |||||
data.form = Object.assign({}, props.data) | |||||
}) | }) | ||||
const updateVisible = function() { | const updateVisible = function() { | ||||
emit('close') | emit('close') | ||||
} | } | ||||
function makeSure() { | function makeSure() { | ||||
emit('confirm') | |||||
confirm(data.form) | |||||
updateVisible() | updateVisible() | ||||
} | } | ||||
function pass() { | function pass() { | ||||
emit('ignore') | |||||
ignore(data.form) | |||||
updateVisible() | updateVisible() | ||||
} | } | ||||
return { | return { |
<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" @confirm="confirmProblem" @ignore="ignoreProblem" /> | |||||
<over-lay :data="problemData" @close="closeOverlay" @done="handlePosition" /> | |||||
</div> | </div> | ||||
<ul class="legend_list"> | <ul class="legend_list"> | ||||
select.value = new Select({ | select.value = new Select({ | ||||
style: (feature) => { | style: (feature) => { | ||||
if (feature.getGeometry() instanceof Point) { | if (feature.getGeometry() instanceof Point) { | ||||
return styleList[3] | |||||
return styleList[0] | |||||
} | } | ||||
} | } | ||||
}) | }) | ||||
overlay.value.setOffset([30, -400]) | overlay.value.setOffset([30, -400]) | ||||
mapdata.value.addOverlay(overlay.value) | mapdata.value.addOverlay(overlay.value) | ||||
} else { | } else { | ||||
mapdata.value.removeOverlay(overlay.value) | |||||
closeOverlay() | |||||
} | } | ||||
} else { | } else { | ||||
mapdata.value.removeOverlay(overlay.value) | |||||
closeOverlay() | |||||
} | } | ||||
}) | }) | ||||
} | } | ||||
* 关闭overlay | * 关闭overlay | ||||
*/ | */ | ||||
const closeOverlay = () => { | const closeOverlay = () => { | ||||
data.problemData = {} | |||||
select.value.getFeatures().clear() | select.value.getFeatures().clear() | ||||
mapdata.value.removeOverlay(overlay.value) | mapdata.value.removeOverlay(overlay.value) | ||||
} | } | ||||
/** | |||||
* 忽略 | |||||
*/ | |||||
const ignoreProblem = function() { | |||||
} | |||||
/** | |||||
* 确认 | |||||
*/ | |||||
const confirmProblem = function() { | |||||
} | |||||
return { | return { | ||||
...toRefs(data), | ...toRefs(data), | ||||
removeVector, | removeVector, | ||||
closeOverlay, | |||||
confirmProblem, | |||||
ignoreProblem | |||||
closeOverlay | |||||
} | } | ||||
} | } | ||||
} | } |
new Style({ | new Style({ | ||||
image: new Icon({ | image: new Icon({ | ||||
anchor: [0.5, 0.5], | anchor: [0.5, 0.5], | ||||
src: imgAwait, | |||||
src: imgSelected, | |||||
crossOrigin: '', | crossOrigin: '', | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true | ||||
new Style({ | new Style({ | ||||
image: new Icon({ | image: new Icon({ | ||||
anchor: [0.5, 0.5], | anchor: [0.5, 0.5], | ||||
src: imgChecked, | |||||
src: imgAwait, | |||||
crossOrigin: '', | crossOrigin: '', | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true | ||||
new Style({ | new Style({ | ||||
image: new Icon({ | image: new Icon({ | ||||
anchor: [0.5, 0.5], | anchor: [0.5, 0.5], | ||||
src: imgIgnored, | |||||
src: imgChecked, | |||||
crossOrigin: '', | crossOrigin: '', | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true | ||||
new Style({ | new Style({ | ||||
image: new Icon({ | image: new Icon({ | ||||
anchor: [0.5, 0.5], | anchor: [0.5, 0.5], | ||||
src: imgSelected, | |||||
src: imgIgnored, | |||||
crossOrigin: '', | crossOrigin: '', | ||||
scale: [1, 1], | scale: [1, 1], | ||||
rotateWithView: true | rotateWithView: true |
<template> | <template> | ||||
<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 /> --> | |||||
<position-msg :data="problemList" /> | |||||
<QuestionPage /> | |||||
</n-drawer-content> | </n-drawer-content> | ||||
</n-drawer> | </n-drawer> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import QuestionPage from '@/views/task-manage/question/index.vue' | import QuestionPage from '@/views/task-manage/question/index.vue' | ||||
import { defineComponent, computed, reactive, toRefs } from 'vue' | import { defineComponent, computed, reactive, toRefs } from 'vue' | ||||
import PositionMsg from '@/components/PositionMsg/index.vue' | |||||
export default defineComponent({ | export default defineComponent({ | ||||
name: 'LiveDrawer', | name: 'LiveDrawer', | ||||
components: { QuestionPage, PositionMsg }, | |||||
components: { QuestionPage }, | |||||
props: { | props: { | ||||
/* 可见 */ | /* 可见 */ | ||||
visible: { | visible: { | ||||
}, | }, | ||||
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: '运管单位' } | |||||
] | |||||
}) | }) | ||||
/* 获取抽屉的信息 */ | /* 获取抽屉的信息 */ |
<template> | |||||
<n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | |||||
<n-drawer-content closable title="图片位置"> | |||||
<position-msg :data="problemList" /> | |||||
</n-drawer-content> | |||||
</n-drawer> | |||||
</template> | |||||
<script> | |||||
import { defineComponent, computed, reactive, toRefs, provide } from 'vue' | |||||
import PositionMsg from '@/components/PositionMsg/index.vue' | |||||
export default defineComponent({ | |||||
name: 'PositionDrawer', | |||||
components: { PositionMsg }, | |||||
props: { | |||||
/* 可见 */ | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
/* 选中的数据 */ | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
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: 2, | |||||
type: 2, | |||||
userName: '运管单位' } | |||||
] | |||||
}) | |||||
const confirm = function(params) { | |||||
console.log(params, '确认++++++++++++') | |||||
} | |||||
const ignore = function(params) { | |||||
console.log(params, '忽略------------------') | |||||
} | |||||
/* 注册确认方法 */ | |||||
provide('confirm', confirm) | |||||
/* 注册忽略方法 */ | |||||
provide('ignore', ignore) | |||||
/* 获取抽屉的信息 */ | |||||
const getDrawerOptions = computed(() => { | |||||
return { | |||||
show: props.visible, | |||||
width: '100%', | |||||
placement: 'right' | |||||
} | |||||
}) | |||||
/* 关闭抽屉 */ | |||||
function handleDrawerColse() { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
getDrawerOptions, | |||||
handleDrawerColse | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-button+.n-button{ | |||||
margin-left: 30px; | |||||
} | |||||
</style> |
<ConfirmModal v-if="confirmModal" v-model:visible="confirmModal" :data="pageData" @update-data="tableReload" /> | <ConfirmModal v-if="confirmModal" v-model:visible="confirmModal" :data="pageData" @update-data="tableReload" /> | ||||
<!-- 图片位置 --> | |||||
<position-drawer v-model:visible="positionDrawer" :data="rowData" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import HeadSearch from '@/components/Search/index.vue' | import HeadSearch from '@/components/Search/index.vue' | ||||
import DataTable from '@/components/DataTable/index.vue' | import DataTable from '@/components/DataTable/index.vue' | ||||
import ConfirmModal from './components/ConfirmModal.vue' | import ConfirmModal from './components/ConfirmModal.vue' | ||||
import { h, computed, ref, reactive, toRefs } from 'vue' | |||||
import PositionDrawer from './components/PositionDrawer.vue' | |||||
import { ref, reactive, toRefs } from 'vue' | |||||
export default { | export default { | ||||
name: 'QuestionPage', | name: 'QuestionPage', | ||||
components: { HeadSearch, DataTable, ConfirmModal }, | |||||
components: { HeadSearch, DataTable, ConfirmModal, PositionDrawer }, | |||||
setup() { | setup() { | ||||
const data = reactive({ | const data = reactive({ | ||||
search, | search, | ||||
...toRefs(table), | ...toRefs(table), | ||||
data: [ | data: [ | ||||
{ id: 1, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg', type: 1 }, | |||||
{ id: 2, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg', type: 2 } | |||||
{ id: 1, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg', position: '软件园', type: 1 }, | |||||
{ id: 2, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg', position: '东吉大道一号', type: 2 } | |||||
], | ], | ||||
pageData: [] | pageData: [] | ||||
}) | }) | ||||
/** | /** |
console.log('问题确认') | console.log('问题确认') | ||||
} | } | ||||
/* 位置 */ | |||||
function handlePositionDrawer(row) { | |||||
data.rowData = row | |||||
data.positionDrawer = true | |||||
} | |||||
function handleImgPreview() { | function handleImgPreview() { | ||||
data.confirmModal = true | data.confirmModal = true | ||||
} | } | ||||
const data = reactive({ | const data = reactive({ | ||||
rowData: {}, | rowData: {}, | ||||
confirmModal: false, | confirmModal: false, | ||||
positionDrawer: false, | |||||
columns: [ | columns: [ | ||||
{ | { | ||||
type: 'selection' | type: 'selection' | ||||
}, | }, | ||||
{ | { | ||||
title: '位置', | title: '位置', | ||||
key: 'name', | |||||
align: 'center' | |||||
key: 'position', | |||||
align: 'center', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '图片位置', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: handlePositionDrawer.bind(null, row) | |||||
}, | |||||
auth: 'basic_list', | |||||
show: row.status !== 1 | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
title: '备注', | title: '备注', |