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

Merge branch 'master' of http://192.168.1.22:3000/Web/svgeditor2.0

Browse Source
This commit is contained in:
stt
2025-10-22 09:08:59 +08:00
parent 26c2190ded e10b451e68
commit 4df52a2c87
10 changed files with 88 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,13 @@
<template>
<div class="add-element">
<el-dialog v-model="open" title="新增图元" width="500px" destroy-on-close @close="closeDialog">
<el-dialog
:close-on-click-modal="false"
v-model="open"
title="新增图元"
width="500px"
destroy-on-close
@close="closeDialog"
>
<el-form :model="element" ref="ruleFormRef" :rules="rules" label-width="120px">
<el-form-item label="图元分类:" prop="elementSonType">
<el-select v-model="element.elementSonType" placeholder="请选择图元分类" style="width: 100%">
@@ -93,7 +100,7 @@
>
<el-button type="primary">上传</el-button>
</el-upload>
<el-dialog v-model="dialogVisible">
<el-dialog :close-on-click-modal="false" v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>

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

@@ -36,7 +36,14 @@
</el-table-column>
</el-table>
<!-- 新增/修改 -->
<el-dialog draggable v-model="dialogFormVisible" :title="dialog_title" width="500px" destroy-on-close>
<el-dialog
:close-on-click-modal="false"
draggable
v-model="dialogFormVisible"
:title="dialog_title"
width="500px"
destroy-on-close
>
<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="请输入图纸名称" />

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

@@ -64,7 +64,13 @@
<div class="h-[calc(10%-1px)] flex justify-center items-center ct-border" style="padding-top: 10px">
<el-button class="w-80/100" @click="onManageClick">管理</el-button>
</div>
<el-dialog v-model="manage_dialog_visiable" title="图库管理" width="50%" destroy-on-close>
<el-dialog
:close-on-click-modal="false"
v-model="manage_dialog_visiable"
title="图库管理"
width="50%"
destroy-on-close
>
<div class="flex">
<div>
<div>

2
src/components/mt-edit/components/layout/right-aside/json-edit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-button type="primary" plain round @click="dialogVisible = true">点击编辑</el-button>
<el-dialog v-model="dialogVisible" title="配置编辑" width="60%">
<el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="配置编辑" width="60%">
<v-ace-editor
v-model:value="content"
lang="json"

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

@@ -289,7 +289,13 @@ const fetchData_wx = async () => {
// 指标数据
const indexList = async () => {
try {
const lineId = deptIds.value[deptIds.value.length - 1]
let lineId = ''
if (typeof deptIds.value === 'string') {
lineId = deptIds.value
} else {
lineId = deptIds.value[deptIds.value.length - 1]
}
{
const response = await targetList({ lineId: lineId })
if (response.data) {
@@ -304,6 +310,7 @@ const indexList = async () => {
const handleDeptChange = (deptId: []) => {
// labelString.value = fileRef.value.getCheckedNodes().pathLabels.join(" / ");
item_uid.value = []
indexString.value = ''
nextTick(() => {
//fileRef.value.getCheckedNodes()[0]?.label 最后一层的值
let name = []
@@ -342,7 +349,6 @@ const handleSelectUID = (uid: []) => {
let nodes = []
if (indexRef.value) {
nodes = indexRef.value.getCheckedNodes()
console.log('🚀 ~ handleSelectUID ~ indexRef.value.getCheckedNodes():', indexRef.value.getCheckedNodes())
name = nodes[0]?.pathLabels || []
}
if (selectItemSettingProps.itemJson) {
@@ -354,7 +360,6 @@ const handleSelectUID = (uid: []) => {
selectItemSettingProps.itemJson.UIDName = name.join('/')
}
if (is2DArray(uid)) {
selectItemSettingProps.itemJson.UIDNames = name.join(' / ')
} else {

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

@@ -222,7 +222,12 @@
</div>
</el-form>
</el-drawer>
<el-dialog v-model="dialog_visiable" :title="dialog_title" :before-close="onDialogClose">
<el-dialog
:close-on-click-modal="false"
v-model="dialog_visiable"
:title="dialog_title"
:before-close="onDialogClose"
>
<v-ace-editor
v-model:value="dialog_code"
lang="javascript"

8
src/components/mt-edit/composables/thumbnail.ts
View File

@@ -10,6 +10,7 @@ export const useGenThumbnail = async (canvas_id: string = 'mtCanvasArea') => {
// //记录要移除的svg元素
const shouldRemoveSvgNodes = []
// 获取到所有的SVG 得到一个数组 目前只有自定义连线需要特殊处理 别的元素直接使用html2canvas就可以
const svgElements: NodeListOf<HTMLElement> = document.body.querySelectorAll(`#${canvas_id} .mt-line-render`)
// 遍历这个数组
for (const item of svgElements) {
@@ -40,13 +41,14 @@ export const useGenThumbnail = async (canvas_id: string = 'mtCanvasArea') => {
const width = el.offsetWidth
const height = el.offsetHeight
const canvas = await html2canvas(el, {
useCORS: true,
scale: 2,
width,
height,
// width,
// height,
allowTaint: true,
windowHeight: height,
// windowHeight: height,
logging: false,
ignoreElements: element => {
if (element.classList.contains('mt-line-render')) {

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

@@ -72,13 +72,23 @@
<footer-panel></footer-panel>
</el-footer>
</el-container>
<el-dialog v-model="import_visible" title="数据导入" @close="mainPanelRef?.beginListenerKeyDown()">
<el-dialog
:close-on-click-modal="false"
v-model="import_visible"
title="数据导入"
@close="mainPanelRef?.beginListenerKeyDown()"
>
<import-json ref="importJsonRef"></import-json>
<template #footer>
<el-button type="primary" @click="onImportYes">确定</el-button>
</template>
</el-dialog>
<el-dialog v-model="export_visible" title="数据导出" @close="mainPanelRef?.beginListenerKeyDown()">
<el-dialog
:close-on-click-modal="false"
v-model="export_visible"
title="数据导出"
@close="mainPanelRef?.beginListenerKeyDown()"
>
<export-json
:done-json="objectDeepClone(globalStore.done_json)"
:canvas-cfg="globalStore.canvasCfg"
@@ -219,9 +229,14 @@ const onSaveClick = () => {
}
const useData = useDataStore()
const onSaveAll = () => {
const onSaveAll = async () => {
let data: any = await useData.dataTree.map((item, ind) => {
item.sort = ind
return item
})
let form = new FormData()
let blob = new Blob([JSON.stringify(useData.dataTree)], {
let blob = new Blob([JSON.stringify(data)], {
type: 'application/json'
})
form.append('multipartFile', blob)
@@ -251,6 +266,7 @@ defineExpose({
.mt-edit-aside {
transition: width 0.3s;
}
.mt-edit-aside-left {
padding-left: 5px;
}

27
src/components/mt-preview/index.vue
View File

@@ -92,6 +92,8 @@ const tableData = [
// }
]
const targetKeywords = ['开关', '器', '阀门', '控制']
const showDetail = ref(false)
const showDetailClick = () => {
@@ -581,7 +583,7 @@ const setImportJson = (exportJson: IExportJson) => {
addClickEventsToElements()
// 首页初始化的时候
setTimeout(() => {
nextTick(() => {
done_json.value.forEach(item => {
//报警设备闪烁
if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
@@ -644,7 +646,7 @@ const setImportJson = (exportJson: IExportJson) => {
// item.props.ani_color.val = '#8c0ae2'
// }
})
}, 1000)
})
}
if (!useData.loading) {
@@ -691,7 +693,7 @@ const findSwitchByLineEndpoint = (lineId: string): string | null => {
const startId = bindAnchors.start?.id
if (startId) {
const startElement = savedExportJson.value.json.find(item => item.id === startId)
if (startElement && startElement.title?.includes('开关')) {
if (startElement && targetKeywords.some(keyword => startElement.title?.includes(keyword))) {
return startElement.id!
}
}
@@ -700,7 +702,7 @@ const findSwitchByLineEndpoint = (lineId: string): string | null => {
const endId = bindAnchors.end?.id
if (endId) {
const endElement = savedExportJson.value.json.find(item => item.id === endId)
if (endElement && endElement.title?.includes('开关')) {
if (endElement && targetKeywords.some(keyword => endElement.title?.includes(keyword))) {
return endElement.id!
}
}
@@ -777,6 +779,7 @@ const handleElementClick = (elementId: string) => {
)
}
}
const bindList = ref<string[]>([])
const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
// 确保 savedExportJson.value 存在
if (!savedExportJson.value?.json) {
@@ -786,9 +789,23 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
// 查找所有连线元素
const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
bindList.value = [
...new Set(
lineElements
.map(item => {
return [item.props?.bind_anchors.start?.id, item.props?.bind_anchors.end?.id]
})
.flat()
)
]
// 查找所有开关元素
const switchElements = savedExportJson.value.json.filter(item => item.title?.includes('开关'))
const switchElements = savedExportJson.value.json.filter(item =>
targetKeywords.some(keyword => item.title?.includes(keyword))
)
// const switchElements = savedExportJson.value.json.filter(item =>
// bindList.value.some(keyword => item.id?.includes(keyword) && item.lineId=='')
// )
// 存储连接线的ID
const connectedLineIds: string[] = []

4
src/utils/mqtt.ts
View File

@@ -54,9 +54,9 @@ class MQTT {
try {
// const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
const mqttUrl =
localStorage.getItem('MqttUrl') == 'null'
localStorage.getItem('MQTTZUTAI') == 'null'
? 'ws://192.168.1.24:8085/mqtt'
: localStorage.getItem('MqttUrl')
: localStorage.getItem('MQTTZUTAI')
console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
this.setupEventListeners()