修改测试bug
This commit is contained in:
guanj
@@ -1,108 +1,119 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:operation>
|
||||
<el-upload
|
||||
action=""
|
||||
class="upload-demo"
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button :icon="Plus" type="primary" class="ml10">新增拓扑图</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<popupEdit ref="popupRef"></popupEdit>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import popupEdit from './popupEdit.vue'
|
||||
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/manage/gplot'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/cs-device-boot/topologyTemplate/queryImage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '序号', width: 80,formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
} },
|
||||
{ title: '拓扑图模版名称', field: 'name', align: 'center' },
|
||||
{ title: '监测点数量', field: 'pointNum', align: 'center' },
|
||||
{ title: '拓扑图', field: 'filePath', align: 'center', render: 'image' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open( row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteTopoTemplate(row.id).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.pointNum = item.csLineTopologyTemplateVOList.length
|
||||
})
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value
|
||||
tableStore.index()
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
const addMenu = () => {
|
||||
// console.log(popupRef)
|
||||
popupRef.value.open('新增菜单')
|
||||
}
|
||||
const chooseImage = e => {
|
||||
console.warn(e)
|
||||
uploadTopo(e.raw).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:operation>
|
||||
<el-upload
|
||||
action=""
|
||||
class="upload-demo"
|
||||
accept=".svg,.png,.jpg,.jpeg"
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button :icon="Plus" type="primary" class="ml10">新增拓扑图</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<popupEdit ref="popupRef"></popupEdit>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import popupEdit from './popupEdit.vue'
|
||||
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/manage/gplot'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/cs-device-boot/topologyTemplate/queryImage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '序号',
|
||||
width: 80,
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '拓扑图模版名称', field: 'name', align: 'center' },
|
||||
{ title: '监测点数量', field: 'pointNum', align: 'center' },
|
||||
{ title: '拓扑图', field: 'filePath', align: 'center', render: 'image' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteTopoTemplate(row.id).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.pointNum = item.csLineTopologyTemplateVOList.length
|
||||
})
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value
|
||||
tableStore.index()
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
const addMenu = () => {
|
||||
// console.log(popupRef)
|
||||
popupRef.value.open('新增菜单')
|
||||
}
|
||||
const chooseImage = e => {
|
||||
const isWord =
|
||||
e.name.endsWith('.svg') || e.name.endsWith('.png') || e.name.endsWith('.jpg') || e.name.endsWith('.jpeg')
|
||||
|
||||
if (!isWord) {
|
||||
return ElMessage.error('请上传图片或svg文件!')
|
||||
}
|
||||
|
||||
uploadTopo(e.raw).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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