Web/svgeditor2.0
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改测试用例

Browse Source
This commit is contained in:
guanj
2025-11-12 09:52:48 +08:00
parent 3d987b4761
commit 9bd9403280
11 changed files with 196 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/mt-edit/components/add-element/index.vue
View File

@@ -79,7 +79,14 @@
/>
</el-form-item> -->
<el-form-item label="图元名称:" prop="elementName">
<el-input v-model="element.elementName" placeholder="请选择组件名称" style="width: 100%" />
<el-input
v-model.trim="element.elementName"
maxlength="12"
show-word-limit
clearable
placeholder="请选择组件名称"
style="width: 100%"
/>
</el-form-item>
<!-- <el-form-item label="组件标识:" prop="elementMark">
<el-input v-model="element.elementMark" placeholder="请选择组件标识" style="width: 100%" />

2
src/components/mt-edit/components/export-json/index.vue
View File

@@ -18,7 +18,7 @@
import { VAceEditor } from 'vue3-ace-editor'
import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../../store/types'
import { computed } from 'vue'
import { genExportJson } from '../../composables'
import { genExportJson } from '@/components/mt-edit/composables/index'
type ExportProps = {
doneJson: IDoneJson[]
canvasCfg: IGlobalStoreCanvasCfg

3
src/components/mt-edit/components/import-json/index.vue
View File

@@ -25,10 +25,7 @@ const onImport = () => {
return new Promise((resolve, reject) => {
try {
const json: IExportJson = JSON.parse(import_json.value)
console.log('🚀 ~ onImport ~ json:', json)
const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
globalStore.canvasCfg = canvasCfg
globalStore.gridCfg = gridCfg
globalStore.setGlobalStoreDoneJson(importDoneJson)

4
src/components/mt-edit/components/layout/header-panel/index.vue
View File

@@ -158,11 +158,11 @@
</el-tag>
</div>
<div class="flex items-center mr-20px">
<el-button text circle size="small" @click="emits('onReturnClick')">
<!-- <el-button text circle size="small" @click="emits('onReturnClick')">
<el-icon title="返回" :size="20">
<svg-analysis name="return"></svg-analysis>
</el-icon>
</el-button>
</el-button> -->
<!-- <el-divider direction="vertical"></el-divider> -->
<!-- <el-button text circle size="small" @click="emits('onSaveClick')">
<el-icon title="保存" :size="20">

92
src/components/mt-edit/components/layout/left-aside-list/index.vue
View File

@@ -12,7 +12,7 @@
ref="multipleTable"
@row-click="onRowClick"
empty-text="暂无数据"
row-key="id"
row-key="name"
>
<el-table-column prop="name" label="名称" />
<el-table-column label="操作" align="center" width="60" #default="scope">
@@ -30,7 +30,7 @@
<el-table-column label="操作" width="40">
<template #default>
<el-tooltip content="拖拽" placement="top">
<div class="drag-handle">⋮⋮⋮</div>
<div class="drag-handle" style="cursor: pointer">⋮⋮⋮</div>
</el-tooltip>
</template>
</el-table-column>
@@ -46,7 +46,14 @@
>
<el-form :model="form" ref="formRef" :rules="rules">
<el-form-item label="图纸名称" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入图纸名称" />
<el-input
v-model.trim="form.name"
maxlength="12"
show-word-limit
clearable
autocomplete="off"
placeholder="请输入图纸名称"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -87,7 +94,6 @@ const useData = useDataStore()
const dialogFormVisible = ref(false)
const dialog_title = ref('新增图纸')
const formLabelWidth = '100px'
const globalIndex = ref(-1)
const multipleTable: any = ref(null)
const { pid } = useData // 解构出 myArray 状态
@@ -129,31 +135,45 @@ const sortableInstance = ref<any>(null)
// 修改 initSortable 方法中的实例挂载与销毁逻辑
const initSortable = () => {
nextTick(() => {
const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
if (!tbody) {
console.error('未找到 tbody 元素')
return
const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(tbody, {
animation: 100,
onEnd: ({ oldIndex, newIndex }) => {
const currRow = dataTrees.value.splice(oldIndex, 1)[0]
dataTrees.value.splice(newIndex, 0, currRow)
}
// 销毁旧实例
if (sortableInstance.value) {
sortableInstance.value.destroy()
}
// 创建新实例并保存到 sortableInstance
sortableInstance.value = new Sortable(tbody, {
animation: 150,
ghostClass: 'sortable-ghost',
onEnd: ({ newIndex, oldIndex }) => {
// 确保 newIndex 和 oldIndex 都存在且不相等
if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
const targetItem = dataTrees.value.splice(oldIndex, 1)[0]
dataTrees.value.splice(newIndex, 0, targetItem)
}
})
})
// nextTick(() => {
// const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
// if (!tbody) {
// console.error('未找到 tbody 元素')
// return
// }
// // 销毁旧实例
// if (sortableInstance.value) {
// sortableInstance.value.destroy()
// }
// // 创建新实例并保存到 sortableInstance
// sortableInstance.value = new Sortable(tbody, {
// animation: 150,
// ghostClass: 'sortable-ghost',
// onEnd: ({ newIndex, oldIndex }) => {
// // 确保 newIndex 和 oldIndex 都存在且不相等
// if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
// // const targetItem = dataTrees.value.splice(oldIndex, 1)[0]
// // dataTrees.value.splice(newIndex, 0, targetItem)
// // 深拷贝避免引用问题（如果是复杂对象，建议使用结构化克隆或深拷贝工具）
// const [targetItem] = dataTrees.value.splice(oldIndex, 1)
// // 安全插入（超出范围时自动插入到数组末尾）
// const insertIndex = Math.min(newIndex, dataTrees.value.length)
// dataTrees.value.splice(insertIndex, 0, targetItem)
// }
// })
// })
}
//form表单校验规则
@@ -178,6 +198,7 @@ watch(
)
const onAddClick = () => {
dialog_title.value = '新增图纸'
Object.assign(form, { name: '' })
//打开弹窗
dialogFormVisible.value = true
@@ -220,17 +241,22 @@ const onRowClick = async (row: any) => {
}
const saveDialog = async (form: any) => {
console.log(dataTrees.value)
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
if (dataTrees.value.some(item => item.name == form.name)) {
ElMessage.error('图纸名称不能重复！')
return
}
// 提交请求
if (globalIndex.value >= 0) {
if (dialog_title.value == '编辑图纸') {
//表示编辑
// dataTrees[globalIndex.value] = form;
useData.modify(form.kId, form.name)
//还原回去
globalIndex.value = -1
} else {
//新增
useData.append(form.name)
@@ -243,9 +269,9 @@ const saveDialog = async (form: any) => {
function update(index: number, row: any) {
// const newObj = Object.assign({}, row);
// form = reactive(newObj);
dialog_title.value = '编辑图纸'
Object.assign(form, row)
//把当前编辑的行号赋值给全局保存的行号
globalIndex.value = index
dialogFormVisible.value = true
}
</script>

7
src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue
View File

@@ -1,12 +1,7 @@
<template>
<div v-if="useData.graphicDisplay == 'zl'">
<el-form label-width="60px" label-position="left">
<el-form-item
label="监测点"
size="small"
class="mt-10px"
>
<el-form-item label="监测点" size="small" class="mt-10px">
<div>
<el-cascader
:key="cascaderKey"

101
src/components/mt-edit/index.vue
View File

@@ -72,6 +72,19 @@
<footer-panel></footer-panel>
</el-footer>
</el-container>
<!-- 上传json -->
<el-upload
:show-file-list="false"
accept=".json"
ref="uploadRef"
:auto-upload="false"
:limit="1"
:on-exceed="handleExceed"
:on-change="handleOnchange"
>
<el-button type="text" v-show="false">默认上传按钮（隐藏）</el-button>
</el-upload>
<el-dialog
:close-on-click-modal="false"
v-model="import_visible"
@@ -124,6 +137,8 @@ import { objectDeepClone } from './utils'
import { genExportJson, useExportJsonToDoneJson } from './composables'
import type { IExportJson } from './components/types'
import { useDataStore } from '@/stores/menuList'
import type { UploadInstance, UploadProps, UploadRawFile, UploadFile } from 'element-plus'
import { genFileId } from 'element-plus'
type MtEditProps = {
useThumbnail?: boolean
}
@@ -160,6 +175,7 @@ const header_align_enabled = computed(() => {
)
return selected_items.length > 1
})
const uploadRef = ref()
const import_visible = ref(false)
const export_visible = ref(false)
const done_json_tree_visiable = ref(false)
@@ -169,12 +185,65 @@ const onDeleteClick = () => {
cacheStore.addHistory(globalStore.done_json)
}
const onImportClick = () => {
import_visible.value = true
mainPanelRef.value?.stopListenerKeyDown()
uploadRef.value?.$el.querySelector('input[type="file"]')?.click()
// import_visible.value = true
// mainPanelRef.value?.stopListenerKeyDown()
}
const handleExceed: UploadProps['onExceed'] = files => {
uploadRef.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadRef.value!.handleStart(file)
}
// 上传json文件
const handleOnchange = (uploadFile: UploadFile) => {
let file: any = uploadFile.raw // 获取文件信息
const fileName = file.name
const isJsonSuffix = fileName.endsWith('.json')
// 方式2：通过文件 MIME 类型校验（辅助验证，部分浏览器可能不准确）
const isJsonType = file.type === 'application/json' || file.type === ''
if (!isJsonSuffix || !isJsonType) {
ElMessage.error('请上传后缀为 .json 的合法 JSON 文件！')
uploadRef.value.clearFiles()
return // 校验失败，终止后续操作
}
const fileReader = new FileReader()
fileReader.readAsText(file!) // 开始读取文件的内容为二进制
fileReader.onload = ev => {
// 读取完成,对数据进行自己的操作
const data = ev.target?.result //获取内容
console.log('🚀 ~ handleOnchange ~ data:', data)
onImportYes(data)
// console.log(JSON.parse(data as string))
}
}
const onExportClick = () => {
export_visible.value = true
mainPanelRef.value?.stopListenerKeyDown()
// export_visible.value = true
// mainPanelRef.value?.stopListenerKeyDown()
// :done-json="objectDeepClone(globalStore.done_json)"
// :canvas-cfg="globalStore.canvasCfg"
// :grid-cfg="globalStore.gridCfg"
const { exportJson } = genExportJson(
globalStore.canvasCfg,
globalStore.gridCfg,
objectDeepClone(globalStore.done_json)
)
let data = JSON.stringify(exportJson, null, 2)
let blob = new Blob([data], { type: 'text/plain' })
let url = URL.createObjectURL(blob)
let a = document.createElement('a')
a.href = url
a.download = useData.keyName + '.json'
a.click()
ElMessage.success('JSON 导出成功')
}
const onTreeUpdateSelectedItemsId = (id: string) => {
globalStore.setSingleSelect(id)
@@ -207,15 +276,35 @@ const onRedoClick = () => {
const onUndoClick = () => {
mainPanelRef.value?.onUndo()
}
const onImportYes = async () => {
const res = await importJsonRef.value?.onImport()
const onImportYes = async (row: any) => {
const res = await onImport(row)
// const res = await importJsonRef.value?.onImport()
if (res) {
import_visible.value = false
uploadRef.value.clearFiles()
cacheStore.addHistory(globalStore.done_json)
ElMessage.success('JSON 导入成功')
} else {
uploadRef.value.clearFiles()
ElMessage.error('导入失败,请检查数据格式')
}
}
const onImport = (res: any) => {
return new Promise((resolve, reject) => {
try {
const json: IExportJson = JSON.parse(res)
const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
globalStore.canvasCfg = canvasCfg
globalStore.gridCfg = gridCfg
globalStore.setGlobalStoreDoneJson(importDoneJson)
resolve(true)
} catch (error) {
resolve(false)
}
})
}
const onPreviewClick = () => {
// 获取导出json
const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)

2
src/export.ts
View File

@@ -10,4 +10,4 @@ import MtPreview from '@/components/mt-preview'
import MtPreviewYpt from '@/components/mt-preview-ypt'
import MtPreviewZl from '@/components/mt-preview-zl'
import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt,MtPreviewZl }
export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt, MtPreviewZl }

10
src/stores/menuList/index.ts
View File

@@ -11,6 +11,7 @@ export const useDataStore = defineStore('data-store', {
identifying: '0',
mqttID: '',
preview: '',
keyName: '',//选中的name
wxqr: '',
loading: true,
display: false, //无锡项目进去是true，其他项目是false 控制预览的时候返回按钮的展示
@@ -67,13 +68,20 @@ export const useDataStore = defineStore('data-store', {
modify(kId: number, val: string) {
this.dataTree.forEach((item: any) => {
if (item.kId == kId) {
item.name = val
}
})
},
// 放置kid
placeKid(id: String) {
this.identifying = id
this.dataTree.forEach((item: any) => {
if (item.kId == id) {
this.keyName = item.name
}
})
},
setUpPath(data: String) {
this.dataTree.forEach((item: any) => {

1
src/stores/menuList/types.ts
View File

@@ -9,6 +9,7 @@ export interface DataStoreState {
preview?: String
wxqr?: String
loading?: boolean
keyName?: String
display?: Boolean //是否展示返回按钮
graphicDisplay?: string //是否展示数据绑定图元
}