|
@@ -1,336 +1,252 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="mapdata">
|
|
<div class="mapdata">
|
|
|
- <div id="container" ref="container" class="w-full h-full" ></div>
|
|
|
|
|
- <div class="left">
|
|
|
|
|
- <div class="bottombtn w-full h-35px">
|
|
|
|
|
- <el-button
|
|
|
|
|
- type="primary"
|
|
|
|
|
- @click="handleSave"
|
|
|
|
|
- >
|
|
|
|
|
- <Icon icon="ep:edit" />
|
|
|
|
|
- 保存
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <v-stage
|
|
|
|
|
+ ref="stageRef"
|
|
|
|
|
+ :config="{ width: stageWidth, height: stageHeight }"
|
|
|
|
|
+ class="konva-container"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- 网格层 -->
|
|
|
|
|
+ <v-layer>
|
|
|
|
|
+ <v-line
|
|
|
|
|
+ v-for="(line, index) in gridLines"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ :config="line"
|
|
|
|
|
+ />
|
|
|
|
|
+ </v-layer>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 背景图层 -->
|
|
|
|
|
+ <v-layer>
|
|
|
|
|
+ <v-image :config="bgImageConfig" />
|
|
|
|
|
+ </v-layer>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 点位图层 -->
|
|
|
|
|
+ <v-layer>
|
|
|
|
|
+ <template v-for="point in pointList" :key="point.entityId">
|
|
|
|
|
+ <v-rect :config="getBgRectConfig(point)" />
|
|
|
|
|
+ <v-image :config="getImageConfig(point)" @click="() => toggleSelect(point)" />
|
|
|
|
|
+ <v-text :config="getTextConfig(point)" />
|
|
|
|
|
+ <v-rect v-if="isSelected(point.entityId)" :config="getOverlayConfig(point)" />
|
|
|
|
|
+ <v-text v-if="isSelected(point.entityId)" :config="getCheckTextConfig(point)" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </v-layer>
|
|
|
|
|
+ </v-stage>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="action-bar">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ v-no-more-click
|
|
|
|
|
+ @click="handleSave"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ :icon="Check"
|
|
|
|
|
+ class="action-btn save-btn"
|
|
|
|
|
+ >
|
|
|
|
|
+ 保存配置
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { ref, onMounted, computed } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
import { useRoute } from 'vue-router'
|
|
|
-import { useI18n } from 'vue-i18n'
|
|
|
|
|
import { useMessage } from '@/hooks/web/useMessage'
|
|
import { useMessage } from '@/hooks/web/useMessage'
|
|
|
-import Konva from 'konva'
|
|
|
|
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
|
|
+import {
|
|
|
|
|
+ Check,
|
|
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
import * as TechnologyApi from '@/api/dv/technology'
|
|
import * as TechnologyApi from '@/api/dv/technology'
|
|
|
import * as LotoApi from '@/api/dv/lotoStation'
|
|
import * as LotoApi from '@/api/dv/lotoStation'
|
|
|
import * as MapApi from '@/api/basic/mapconfig'
|
|
import * as MapApi from '@/api/basic/mapconfig'
|
|
|
|
|
|
|
|
-defineOptions({ name: 'MapData' })
|
|
|
|
|
-
|
|
|
|
|
-const props = defineProps({
|
|
|
|
|
- machineryId: {
|
|
|
|
|
- type: String,
|
|
|
|
|
- default: ''
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const { t } = useI18n() // 国际化
|
|
|
|
|
-const message = useMessage() // 消息弹窗
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
|
|
|
+const message = useMessage()
|
|
|
|
|
+const { t } = useI18n()
|
|
|
|
|
|
|
|
-// Konva 相关
|
|
|
|
|
-const container = ref<HTMLElement>()
|
|
|
|
|
-const stage = ref<Konva.Stage>()
|
|
|
|
|
-const layer = ref<Konva.Layer>()
|
|
|
|
|
-const backgroundLayer = ref<Konva.Layer>()
|
|
|
|
|
-const gridLayer = ref<Konva.Layer>()
|
|
|
|
|
|
|
+const stageRef = ref()
|
|
|
|
|
+const stageWidth = 1600
|
|
|
|
|
+const stageHeight = 860
|
|
|
|
|
|
|
|
-// 数据相关
|
|
|
|
|
-const selectedStates = ref<boolean[]>([])
|
|
|
|
|
-const selectedText = ref<string[]>([])
|
|
|
|
|
-const rects = ref<Record<string, Konva.Rect>>({})
|
|
|
|
|
-const texts = ref<Record<string, Konva.Text>>({})
|
|
|
|
|
-const redrects = ref<Record<string, Konva.Rect>>({})
|
|
|
|
|
-const redtexts = ref<Record<string, Konva.Text>>({})
|
|
|
|
|
-const pointIdList = ref<number[]>([])
|
|
|
|
|
-const selectPoints = ref<number[]>([])
|
|
|
|
|
-
|
|
|
|
|
-// 表单数据
|
|
|
|
|
const formData = ref({
|
|
const formData = ref({
|
|
|
- map: null,
|
|
|
|
|
- mapId: undefined,
|
|
|
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
- width: 0,
|
|
|
|
|
- height: 0,
|
|
|
|
|
|
|
+ width: 1200,
|
|
|
|
|
+ height: 860,
|
|
|
x: 0,
|
|
x: 0,
|
|
|
y: 0,
|
|
y: 0,
|
|
|
- pointList: []
|
|
|
|
|
|
|
+ pointList: [] as any[],
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-/** 初始化数据 */
|
|
|
|
|
-const initData = async () => {
|
|
|
|
|
- try {
|
|
|
|
|
- // 获取设备工艺信息
|
|
|
|
|
-
|
|
|
|
|
- const techRes = await TechnologyApi.getTechnologyInfo(props.machineryId)
|
|
|
|
|
- const lotoId = techRes.data.lotoId
|
|
|
|
|
- selectPoints.value = techRes.data.pointIdList
|
|
|
|
|
|
|
+const pointIdList = ref<number[]>([])
|
|
|
|
|
+const selectPoints = ref<number[]>([])
|
|
|
|
|
|
|
|
- // 获取电柜地图信息
|
|
|
|
|
- const mapRes = await LotoApi.selectLotoMapById(lotoId, '', '')
|
|
|
|
|
- formData.value.map = mapRes.data
|
|
|
|
|
|
|
+const pointList = computed(() => formData.value.pointList)
|
|
|
|
|
|
|
|
- // 获取电柜信息
|
|
|
|
|
- const lotoRes = await LotoApi.selectIsLotoStationById(lotoId)
|
|
|
|
|
- formData.value = { ...formData.value, ...lotoRes.data }
|
|
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
|
|
|
- // 获取地图配置
|
|
|
|
|
- const configRes = await MapApi.selectIsMapById(lotoRes.data.mapId)
|
|
|
|
|
- formData.value = {
|
|
|
|
|
- ...formData.value,
|
|
|
|
|
- imageUrl: configRes.data.imageUrl,
|
|
|
|
|
- width: configRes.data.width,
|
|
|
|
|
- height: configRes.data.height,
|
|
|
|
|
- x: configRes.data.x,
|
|
|
|
|
- y: configRes.data.y,
|
|
|
|
|
- pointList: configRes.data.pointList
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- initKonva()
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('初始化数据失败:', error)
|
|
|
|
|
|
|
+ const techRes = await TechnologyApi.getTechnologyInfo(route.query.machineryId as string)
|
|
|
|
|
+ const lotoId = techRes.lotoId
|
|
|
|
|
+ const lotoRes = await LotoApi.selectIsLotoStationById(lotoId)
|
|
|
|
|
+ const mapRes = await MapApi.selectIsMapById(lotoRes.mapId)
|
|
|
|
|
+ console.log(mapRes,'mapRes')
|
|
|
|
|
+ // 关键:设置选中点
|
|
|
|
|
+ if(techRes.pointIdList!==null){
|
|
|
|
|
+ pointIdList.value = [...techRes.pointIdList] // 替换这里!
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/** 初始化 Konva */
|
|
|
|
|
-const initKonva = () => {
|
|
|
|
|
- if (!container.value) return
|
|
|
|
|
-
|
|
|
|
|
- // 创建舞台
|
|
|
|
|
- stage.value = new Konva.Stage({
|
|
|
|
|
- container: container.value,
|
|
|
|
|
- width: 1600,
|
|
|
|
|
- height: 860
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- // 创建网格图层
|
|
|
|
|
- gridLayer.value = new Konva.Layer()
|
|
|
|
|
- stage.value.add(gridLayer.value)
|
|
|
|
|
- drawGrid(50, 50, '#e0e0e0', gridLayer.value)
|
|
|
|
|
-
|
|
|
|
|
- // 创建底图图层
|
|
|
|
|
- backgroundLayer.value = new Konva.Layer()
|
|
|
|
|
- stage.value.add(backgroundLayer.value)
|
|
|
|
|
-
|
|
|
|
|
- // 加载底图
|
|
|
|
|
- const bgImage = new Image()
|
|
|
|
|
- bgImage.src = formData.value.imageUrl
|
|
|
|
|
- bgImage.onload = () => {
|
|
|
|
|
- const konvaImage = new Konva.Image({
|
|
|
|
|
- x: formData.value.x || 0,
|
|
|
|
|
- y: formData.value.y || 0,
|
|
|
|
|
- image: bgImage,
|
|
|
|
|
- width: formData.value.width || 1200,
|
|
|
|
|
- height: formData.value.height || 860,
|
|
|
|
|
- draggable: false
|
|
|
|
|
- })
|
|
|
|
|
- backgroundLayer.value?.add(konvaImage)
|
|
|
|
|
- backgroundLayer.value?.draw()
|
|
|
|
|
|
|
+ formData.value = {
|
|
|
|
|
+ ...formData.value,
|
|
|
|
|
+ ...lotoRes.data,
|
|
|
|
|
+ imageUrl: mapRes.imageUrl,
|
|
|
|
|
+ width: mapRes.width,
|
|
|
|
|
+ height: mapRes.height,
|
|
|
|
|
+ x: mapRes.x,
|
|
|
|
|
+ y: mapRes.y,
|
|
|
|
|
+ pointList: mapRes.pointList
|
|
|
}
|
|
}
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 创建主图层
|
|
|
|
|
- layer.value = new Konva.Layer()
|
|
|
|
|
- stage.value.add(layer.value)
|
|
|
|
|
-
|
|
|
|
|
- // 渲染隔离点
|
|
|
|
|
- renderGrid()
|
|
|
|
|
|
|
+const gridLines = computed(() => {
|
|
|
|
|
+ const lines = []
|
|
|
|
|
+ const cellSize = 50
|
|
|
|
|
+ for (let i = 0; i <= stageWidth; i += cellSize) {
|
|
|
|
|
+ lines.push({ points: [i, 0, i, stageHeight], stroke: '#e0e0e0', strokeWidth: 1 })
|
|
|
|
|
+ }
|
|
|
|
|
+ for (let j = 0; j <= stageHeight; j += cellSize) {
|
|
|
|
|
+ lines.push({ points: [0, j, stageWidth, j], stroke: '#e0e0e0', strokeWidth: 1 })
|
|
|
|
|
+ }
|
|
|
|
|
+ return lines
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 禁止舞台拖拽
|
|
|
|
|
- stage.value.draggable(false)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const bgImageConfig = computed(() => {
|
|
|
|
|
+ const image = new window.Image()
|
|
|
|
|
+ image.src = formData.value.imageUrl
|
|
|
|
|
+ return {
|
|
|
|
|
+ image,
|
|
|
|
|
+ x: formData.value.x,
|
|
|
|
|
+ y: formData.value.y,
|
|
|
|
|
+ width: formData.value.width,
|
|
|
|
|
+ height: formData.value.height,
|
|
|
|
|
+ draggable: false
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
-/** 绘制网格 */
|
|
|
|
|
-const drawGrid = (cellWidth: number, cellHeight: number, gridColor: string, layer: Konva.Layer) => {
|
|
|
|
|
- const width = 1600
|
|
|
|
|
- const height = 860
|
|
|
|
|
|
|
+const imageCache = new Map<string, HTMLImageElement>()
|
|
|
|
|
|
|
|
- // 绘制竖线
|
|
|
|
|
- for (let i = 0; i <= width; i += cellWidth) {
|
|
|
|
|
- const verticalLine = new Konva.Line({
|
|
|
|
|
- points: [i, 0, i, height],
|
|
|
|
|
- stroke: gridColor,
|
|
|
|
|
- strokeWidth: 1
|
|
|
|
|
- })
|
|
|
|
|
- layer.add(verticalLine)
|
|
|
|
|
|
|
+const getImageConfig = (point: any) => {
|
|
|
|
|
+ let img = imageCache.get(point.pointIcon)
|
|
|
|
|
+ if (!img) {
|
|
|
|
|
+ img = new window.Image()
|
|
|
|
|
+ img.src = point.pointIcon
|
|
|
|
|
+ imageCache.set(point.pointIcon, img)
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- // 绘制横线
|
|
|
|
|
- for (let j = 0; j <= height; j += cellHeight) {
|
|
|
|
|
- const horizontalLine = new Konva.Line({
|
|
|
|
|
- points: [0, j, width, j],
|
|
|
|
|
- stroke: gridColor,
|
|
|
|
|
- strokeWidth: 1
|
|
|
|
|
- })
|
|
|
|
|
- layer.add(horizontalLine)
|
|
|
|
|
|
|
+ return {
|
|
|
|
|
+ image: img,
|
|
|
|
|
+ x: point.x * 50,
|
|
|
|
|
+ y: point.y * 50,
|
|
|
|
|
+ width: 45,
|
|
|
|
|
+ height: 45,
|
|
|
|
|
+ draggable: false
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- layer.draw()
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/** 渲染隔离点 */
|
|
|
|
|
-const renderGrid = () => {
|
|
|
|
|
- if (!layer.value) return
|
|
|
|
|
-
|
|
|
|
|
- // 重置数据
|
|
|
|
|
- selectedStates.value = []
|
|
|
|
|
- rects.value = {}
|
|
|
|
|
- texts.value = {}
|
|
|
|
|
- redrects.value = {}
|
|
|
|
|
- redtexts.value = {}
|
|
|
|
|
- selectedText.value = []
|
|
|
|
|
- pointIdList.value = []
|
|
|
|
|
-
|
|
|
|
|
- // 渲染点位
|
|
|
|
|
- formData.value.pointList.forEach((pos) => {
|
|
|
|
|
- const x = pos.x * 50
|
|
|
|
|
- const y = pos.y * 50
|
|
|
|
|
- const labelText = pos.entityName
|
|
|
|
|
-
|
|
|
|
|
- const point = new Image()
|
|
|
|
|
- point.src = pos.pointIcon
|
|
|
|
|
- point.onload = () => {
|
|
|
|
|
- // 创建点位图片
|
|
|
|
|
- const konvaImage = new Konva.Image({
|
|
|
|
|
- x: x + 2,
|
|
|
|
|
- y: y,
|
|
|
|
|
- image: point,
|
|
|
|
|
- width: 45,
|
|
|
|
|
- height: 45,
|
|
|
|
|
- draggable: false
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- // 添加点击事件
|
|
|
|
|
- konvaImage.on('click', () => {
|
|
|
|
|
- const isCurrentlySelected = redrects.value[labelText]?.visible()
|
|
|
|
|
|
|
|
|
|
- if (isCurrentlySelected) {
|
|
|
|
|
- redrects.value[labelText]?.visible(false)
|
|
|
|
|
- redtexts.value[labelText]?.visible(false)
|
|
|
|
|
- pointIdList.value = pointIdList.value.filter(id => id !== pos.entityId)
|
|
|
|
|
- } else {
|
|
|
|
|
- redrects.value[labelText]?.visible(true)
|
|
|
|
|
- redtexts.value[labelText]?.visible(true)
|
|
|
|
|
- pointIdList.value.push(pos.entityId)
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- layer.value?.batchDraw()
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- // 创建背景矩形
|
|
|
|
|
- const bgrect = new Konva.Rect({
|
|
|
|
|
- x: x - 2,
|
|
|
|
|
- y: y - 5,
|
|
|
|
|
- width: 50,
|
|
|
|
|
- height: 78,
|
|
|
|
|
- cornerRadius: 5,
|
|
|
|
|
- stroke: 'white',
|
|
|
|
|
- strokeWidth: 2,
|
|
|
|
|
- fill: 'white'
|
|
|
|
|
- })
|
|
|
|
|
- layer.value?.add(bgrect)
|
|
|
|
|
- rects.value[labelText] = bgrect
|
|
|
|
|
-
|
|
|
|
|
- // 添加图片
|
|
|
|
|
- layer.value?.add(konvaImage)
|
|
|
|
|
|
|
+const getBgRectConfig = (point: any) => ({
|
|
|
|
|
+ x: point.x * 50 - 2,
|
|
|
|
|
+ y: point.y * 50 - 5,
|
|
|
|
|
+ width: 50,
|
|
|
|
|
+ height: 78,
|
|
|
|
|
+ cornerRadius: 5,
|
|
|
|
|
+ stroke: 'red',
|
|
|
|
|
+ strokeWidth: 2,
|
|
|
|
|
+ fill: 'white'
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 创建文本
|
|
|
|
|
- const text = new Konva.Text({
|
|
|
|
|
- x: x + 8,
|
|
|
|
|
- y: y + 50,
|
|
|
|
|
- fontSize: 17,
|
|
|
|
|
- text: labelText,
|
|
|
|
|
- fontFamily: 'Calibri',
|
|
|
|
|
- fill: 'red'
|
|
|
|
|
- })
|
|
|
|
|
- layer.value?.add(text)
|
|
|
|
|
- texts.value[labelText] = text
|
|
|
|
|
|
|
+const getTextConfig = (point: any) => ({
|
|
|
|
|
+ x: point.x * 50 + 8,
|
|
|
|
|
+ y: point.y * 50 + 50,
|
|
|
|
|
+ fontSize: 17,
|
|
|
|
|
+ text: point.entityName,
|
|
|
|
|
+ fontFamily: 'Calibri',
|
|
|
|
|
+ fill: 'red'
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 创建选中状态覆盖层
|
|
|
|
|
- const redrect = new Konva.Rect({
|
|
|
|
|
- x: x - 3,
|
|
|
|
|
- y: y - 6,
|
|
|
|
|
- width: 52,
|
|
|
|
|
- height: 80,
|
|
|
|
|
- cornerRadius: 5,
|
|
|
|
|
- fill: 'rgba(97, 97, 97, 0.5)',
|
|
|
|
|
- visible: false,
|
|
|
|
|
- listening: false
|
|
|
|
|
- })
|
|
|
|
|
- layer.value?.add(redrect)
|
|
|
|
|
- redrects.value[labelText] = redrect
|
|
|
|
|
|
|
+const getOverlayConfig = (point: any) => ({
|
|
|
|
|
+ x: point.x * 50 - 3,
|
|
|
|
|
+ y: point.y * 50 - 6,
|
|
|
|
|
+ width: 52,
|
|
|
|
|
+ height: 80,
|
|
|
|
|
+ cornerRadius: 5,
|
|
|
|
|
+ fill: 'rgba(97, 97, 97, 0.5)',
|
|
|
|
|
+ listening: false
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 创建选中状态对号
|
|
|
|
|
- const redtext = new Konva.Text({
|
|
|
|
|
- x: x - 8 + 42 / 2,
|
|
|
|
|
- y: y + 50 / 2,
|
|
|
|
|
- fontSize: 24,
|
|
|
|
|
- text: '✔',
|
|
|
|
|
- fontFamily: 'Arial',
|
|
|
|
|
- fill: 'white',
|
|
|
|
|
- align: 'center',
|
|
|
|
|
- verticalAlign: 'middle',
|
|
|
|
|
- visible: false,
|
|
|
|
|
- listening: false
|
|
|
|
|
- })
|
|
|
|
|
- layer.value?.add(redtext)
|
|
|
|
|
- redtexts.value[labelText] = redtext
|
|
|
|
|
|
|
+const getCheckTextConfig = (point: any) => ({
|
|
|
|
|
+ x: point.x * 50 + 13,
|
|
|
|
|
+ y: point.y * 50 + 25,
|
|
|
|
|
+ fontSize: 24,
|
|
|
|
|
+ text: '✔',
|
|
|
|
|
+ fontFamily: 'Arial',
|
|
|
|
|
+ fill: 'white',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ verticalAlign: 'middle',
|
|
|
|
|
+ listening: false
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
- // 设置初始选中状态
|
|
|
|
|
- if (selectPoints.value?.includes(pos.entityId)) {
|
|
|
|
|
- redrects.value[labelText]?.visible(true)
|
|
|
|
|
- redtexts.value[labelText]?.visible(true)
|
|
|
|
|
- pointIdList.value.push(pos.entityId)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+const isSelected = (id: number) => pointIdList.value.includes(id)
|
|
|
|
|
|
|
|
- layer.value?.draw()
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+const toggleSelect = (point: any) => {
|
|
|
|
|
+ const idx = pointIdList.value.indexOf(point.entityId)
|
|
|
|
|
+ if (idx >= 0) {
|
|
|
|
|
+ pointIdList.value.splice(idx, 1)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ pointIdList.value.push(point.entityId)
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/** 保存 */
|
|
|
|
|
const handleSave = async () => {
|
|
const handleSave = async () => {
|
|
|
await message.confirm('请确认是否保存修改内容')
|
|
await message.confirm('请确认是否保存修改内容')
|
|
|
- try {
|
|
|
|
|
- const data = {
|
|
|
|
|
- machineryId: route.query.machineryId,
|
|
|
|
|
- pointIdList: pointIdList.value
|
|
|
|
|
- }
|
|
|
|
|
- await TechnologyApi.saveMachineryPoints(data)
|
|
|
|
|
- message.success(t('common.saveSuccess'))
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('保存失败:', error)
|
|
|
|
|
|
|
+ const data = {
|
|
|
|
|
+ machineryId: route.query.machineryId,
|
|
|
|
|
+ pointIdList: pointIdList.value
|
|
|
}
|
|
}
|
|
|
|
|
+ await TechnologyApi.saveMachineryPoints(data)
|
|
|
|
|
+ message.success(t('common.saveSuccess'))
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- initData()
|
|
|
|
|
-})
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.mapdata {
|
|
.mapdata {
|
|
|
|
|
+ display: flex;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- display: flex;
|
|
|
|
|
|
|
+}
|
|
|
|
|
+.konva-container {
|
|
|
|
|
+ width: 1600px;
|
|
|
|
|
+ height: 860px;
|
|
|
|
|
+}
|
|
|
|
|
+/* 按钮样式 */
|
|
|
|
|
+.action-btn {
|
|
|
|
|
+ height: 44px;
|
|
|
|
|
+ min-width: 120px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ border-radius: 8px !important;
|
|
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ transition: all 0.2s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.left {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
|
|
+.save-btn {
|
|
|
|
|
+ background: linear-gradient(135deg, #409EFF, #3375e0);
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ margin: 10px 0px 10px 10px;
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.action-btn:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.h-35px {
|
|
|
|
|
- height: 35px;
|
|
|
|
|
|
|
+.action-btn:active {
|
|
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|