修改测试bug
This commit is contained in:
guanj
@@ -1,149 +1,154 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" title="编辑拓扑图信息">
|
||||
<el-form :label-width="140">
|
||||
<el-form-item label="拓扑图:" style="height: auto !important">
|
||||
<div class="gplot-content">
|
||||
<VueDraggableResizable class-name-draggable="gplot-content-item"
|
||||
class-name-active="gplot-content-item-active" :active="editorIndex == index" :resizable="false"
|
||||
:parent="true" :x="item.left" :y="item.top" :w="item.width" :h="item.height"
|
||||
@dragStart="editorIndex = index" @dragging="resize" v-for="(item, index) in pointList"
|
||||
:key="index" :isResizable="false">
|
||||
<div class="text" style="line-height: 20px; white-space: nowrap"
|
||||
:style="{ color: item.name === '监测点' ? 'red' : 'black' }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</VueDraggableResizable>
|
||||
<img :src="imgUrl" class="gplot-content"
|
||||
style="border: 1px solid #dcdfe6; position: unset; user-select: none" draggable="false" />
|
||||
<div>注意监测点不要移出圈</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点位置:" v-if="editorIndex > -1">
|
||||
<div style="display: flex">
|
||||
<el-select v-model.trim="pointList[editorIndex].position" placeholder="请选择" style="flex: 1"
|
||||
@change="positionChange">
|
||||
<el-option v-for="item in linePosition" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label=" ">
|
||||
<el-button type="primary" @click="addPoint">添加监测点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/manage/gplot/popupEdit'
|
||||
})
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const editorIndex = ref(-1)
|
||||
const pointList = ref<any[]>([])
|
||||
const topoId = ref()
|
||||
const imgUrl = ref('')
|
||||
const linePosition = useDictData().getBasicData('Line_Position')
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const open = (data: anyObj) => {
|
||||
pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => {
|
||||
return {
|
||||
name: linePosition.find(item2 => {
|
||||
return item2.id == item.linePostion
|
||||
})?.name,
|
||||
position: item.linePostion,
|
||||
width: 'auto',
|
||||
height: 20,
|
||||
top: item.lng,
|
||||
left: item.lat
|
||||
}
|
||||
})
|
||||
topoId.value = data.id
|
||||
imgUrl.value = fullUrl(data.filePath)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const positionChange = (e: string) => {
|
||||
pointList.value[editorIndex.value].name = linePosition.find((item: any) => {
|
||||
return item.id == e
|
||||
})?.name
|
||||
}
|
||||
const resize = (left: number, top: number) => {
|
||||
const dom = pointList.value[editorIndex.value]
|
||||
dom.left = left
|
||||
dom.top = top
|
||||
}
|
||||
const addPoint = () => {
|
||||
pointList.value.push({
|
||||
name: '监测点',
|
||||
position: '',
|
||||
width: 'auto',
|
||||
height: 20,
|
||||
top: 100,
|
||||
left: 100
|
||||
})
|
||||
editorIndex.value = pointList.value.length - 1
|
||||
}
|
||||
const deletePoint = () => {
|
||||
pointList.value.splice(editorIndex.value, 1)
|
||||
editorIndex.value = -1
|
||||
}
|
||||
const submit = async () => {
|
||||
let allSelect = pointList.value.some(item => item.position === '')
|
||||
if (allSelect) {
|
||||
ElMessage.warning('请完善所有监测点位置')
|
||||
return
|
||||
}
|
||||
let arr = pointList.value.map(item => {
|
||||
return {
|
||||
linePostion: item.position,
|
||||
lat: item.left,
|
||||
lng: item.top,
|
||||
topoId: topoId.value
|
||||
}
|
||||
})
|
||||
addLineTemplate(arr).then(res => {
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'vue-draggable-resizable/style.css';
|
||||
|
||||
.gplot-content {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
|
||||
.gplot-content-item {
|
||||
border-color: transparent;
|
||||
cursor: move;
|
||||
|
||||
&-active {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" title="编辑拓扑图信息">
|
||||
<el-form :label-width="140">
|
||||
<el-form-item label="拓扑图:" style="height: auto !important">
|
||||
<div class="gplot-content">
|
||||
<VueDraggableResizable class-name-draggable="gplot-content-item"
|
||||
class-name-active="gplot-content-item-active" :active="editorIndex == index" :resizable="false"
|
||||
:parent="true" :x="item.left" :y="item.top" :w="item.width" :h="item.height"
|
||||
@dragStart="editorIndex = index" @dragging="resize" v-for="(item, index) in pointList"
|
||||
:key="index" :isResizable="false">
|
||||
<div class="text" style="line-height: 20px; white-space: nowrap"
|
||||
:style="{ color: item.name === '监测点' ? 'red' : 'black' }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</VueDraggableResizable>
|
||||
<img :src="imgUrl" class="gplot-content"
|
||||
style="border: 1px solid #dcdfe6; position: unset; user-select: none" draggable="false" />
|
||||
<div>注意监测点不要移出圈</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点位置:" v-if="editorIndex > -1">
|
||||
<div style="display: flex">
|
||||
<el-select v-model.trim="pointList[editorIndex].position" placeholder="请选择" style="flex: 1"
|
||||
@change="positionChange">
|
||||
<el-option v-for="item in linePosition" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label=" ">
|
||||
<el-button type="primary" @click="addPoint">添加监测点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/manage/gplot/popupEdit'
|
||||
})
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const editorIndex = ref(-1)
|
||||
const pointList = ref<any[]>([])
|
||||
const topoId = ref()
|
||||
const imgUrl = ref('')
|
||||
const linePosition = useDictData().getBasicData('Line_Position')
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const open = (data: anyObj) => {
|
||||
pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => {
|
||||
return {
|
||||
name: linePosition.find(item2 => {
|
||||
return item2.id == item.linePostion
|
||||
})?.name,
|
||||
position: item.linePostion,
|
||||
width: 'auto',
|
||||
height: 20,
|
||||
top: item.lng,
|
||||
left: item.lat
|
||||
}
|
||||
})
|
||||
topoId.value = data.id
|
||||
imgUrl.value = fullUrl(data.filePath)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const positionChange = (e: string) => {
|
||||
pointList.value[editorIndex.value].name = linePosition.find((item: any) => {
|
||||
return item.id == e
|
||||
})?.name
|
||||
}
|
||||
const resize = (left: number, top: number) => {
|
||||
const dom = pointList.value[editorIndex.value]
|
||||
dom.left = left
|
||||
dom.top = top
|
||||
}
|
||||
const addPoint = () => {
|
||||
pointList.value.push({
|
||||
name: '监测点',
|
||||
position: '',
|
||||
width: 'auto',
|
||||
height: 20,
|
||||
top: 100,
|
||||
left: 100
|
||||
})
|
||||
editorIndex.value = pointList.value.length - 1
|
||||
}
|
||||
const deletePoint = () => {
|
||||
pointList.value.splice(editorIndex.value, 1)
|
||||
editorIndex.value = -1
|
||||
}
|
||||
const submit = async () => {
|
||||
let allSelect = pointList.value.some(item => item.position === '')
|
||||
|
||||
if (pointList.value.length == 0) {
|
||||
ElMessage.warning('请添加监测点！')
|
||||
return
|
||||
}
|
||||
if (allSelect) {
|
||||
ElMessage.warning('请完善所有监测点位置！')
|
||||
return
|
||||
}
|
||||
let arr = pointList.value.map(item => {
|
||||
return {
|
||||
linePostion: item.position,
|
||||
lat: item.left,
|
||||
lng: item.top,
|
||||
topoId: topoId.value
|
||||
}
|
||||
})
|
||||
addLineTemplate(arr).then(res => {
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'vue-draggable-resizable/style.css';
|
||||
|
||||
.gplot-content {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
|
||||
.gplot-content-item {
|
||||
border-color: transparent;
|
||||
cursor: move;
|
||||
|
||||
&-active {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user