feat: save

src/constant/caseFile.ts

@@ -6,6 +6,7 @@ export const OtherFormats = [".pdf", ".jpeg", ".doc", ".docx", ".jpg", ".png"];
 export const BoardTypeDesc = {
   [BoardType.scene]: "现场图",
   [BoardType.map]: "方位图",
+  [BoardType.media]: "媒体图",
 };
 export const DrawFormatDesc = "jpg、png等格式的文件";
 export const OtherFormatDesc = "pdf、word、jpg、png等格式的文件";

src/store/caseFile.ts

@@ -13,6 +13,7 @@ import {
 export enum BoardType {
   map = "0",
   scene = "1",
+  media = "2", //新增媒体
 }
 
 export interface CaseFileType {
@@ -79,6 +80,7 @@ export type SaveCaseFileImageInfo = Pick<CaseFile, "caseId" | "filesTitle"> & {
   filesId?: number;
   imgType: BoardType;
   content: BoardData;
+  filesTypeId?: number;
   file: File;
 };
 
@@ -234,4 +236,5 @@ export type BoardShapeData =
 export interface BoardData {
   id: number;
   shapes: BoardShapeData[];
+  floors?: any[];
 }

src/view/case/draw/board/editCAD/FloorplanData.js

@@ -24,6 +24,7 @@ export default class FloorplanData {
         this.floors[floorNum].title = null;
         this.floors[floorNum].bgImage = null;
         this.floors[floorNum].compass = null;
+        this.floors[floorNum].noBoardFrame = false;
     }
 }
 

src/view/case/draw/board/editCAD/Geometry/Compass.js

@@ -4,11 +4,11 @@ import { coordinate } from '../Coordinate'
 import { mathUtil } from '../MathUtil.js'
 
 export default class Compass extends Geometry {
-    constructor(angle,vectorId, floor) {
+    constructor(angle,vectorId, floor, noShow) {
         super()
         this.angle = angle?angle:0
         this.floor = floor?floor:0
-
+        this.noShow = noShow
         //固定位置
         this.center = {
             x:880,

src/view/case/draw/board/editCAD/Geometry/Title.js

@@ -1,30 +1,39 @@
-import VectorType from '../enum/VectorType.js'
-import Geometry from './Geometry.js'
-import { coordinate } from '../Coordinate'
-import Style from '../Style.js'
+import VectorType from "../enum/VectorType.js";
+import Geometry from "./Geometry.js";
+import { coordinate } from "../Coordinate";
+import Style from "../Style.js";
 
-const defaultValue = '某某案发现场';
+const defaultValue = "某某案发现场";
 export default class Title extends Geometry {
-    constructor(value,vectorId, floor) {
-        super()
-        this.value = value?value:defaultValue;
-        this.height = 100     //里顶部距离50像素
-        this.floor = floor?floor:0
-        this.geoType = VectorType.Title
-        this.setId(vectorId)
-    }
+  constructor(value, vectorId, floor, noShow) {
+    super();
+    this.value = value ? value : defaultValue;
+    this.height = 100; //里顶部距离50像素
+    this.floor = floor ? floor : 0;
+    this.geoType = VectorType.Title;
+    this.setId(vectorId);
+    this.noShow = noShow;
+  }
 
-    setValue(value){
-        this.value = value
-    }
+  setValue(value) {
+    this.value = value;
+  }
 
-    isContain(position) {
-        const point = coordinate.getScreenXY(position)
-        if(point.y>this.height-Style.Title.fontSize && point.y<this.height+Style.Title.fontSize){
-            if(point.x > coordinate.width/2 - this.value.length * Style.Title.fontSize && point.x < coordinate.width/2 + this.value.length * Style.Title.fontSize){
-                return true;
-            }
-        }
-        return false;
+  isContain(position) {
+    const point = coordinate.getScreenXY(position);
+    if (
+      point.y > this.height - Style.Title.fontSize &&
+      point.y < this.height + Style.Title.fontSize
+    ) {
+      if (
+        point.x >
+          coordinate.width / 2 - this.value.length * Style.Title.fontSize &&
+        point.x <
+          coordinate.width / 2 + this.value.length * Style.Title.fontSize
+      ) {
+        return true;
+      }
     }
+    return false;
+  }
 }

src/view/case/draw/board/editCAD/Load.js

@@ -1,123 +1,193 @@
-import { floorplanService } from './Service/FloorplanService.js'
-import { wallService } from './Service/WallService.js'
-import { tagService } from './Service/TagService'
-import { signService } from './Service/SignService'
-import { rectangleService } from './Service/RectangleService.js'
-import { circleService } from './Service/CircleService.js'
-import { arrowService } from './Service/ArrowService.js'
-import { iconService } from './Service/IconService.js'
-import { tableService } from './Service/TableService.js'
-import { customImageService } from './Service/CustomImageService.js'
-import { bgImageService } from './Service/BgImageService.js'
+import { floorplanService } from "./Service/FloorplanService.js";
+import { wallService } from "./Service/WallService.js";
+import { tagService } from "./Service/TagService";
+import { signService } from "./Service/SignService";
+import { rectangleService } from "./Service/RectangleService.js";
+import { circleService } from "./Service/CircleService.js";
+import { arrowService } from "./Service/ArrowService.js";
+import { iconService } from "./Service/IconService.js";
+import { tableService } from "./Service/TableService.js";
+import { customImageService } from "./Service/CustomImageService.js";
+import { bgImageService } from "./Service/BgImageService.js";
 
 export default class Load {
-    constructor(layer) {
-        this.layer = layer
-        this.version = 'v1.1'
-        this.vectorsJson = null
+  constructor(layer) {
+    this.layer = layer;
+    this.version = "v1.1";
+    this.vectorsJson = null;
+  }
+
+  async load(floorsData) {
+    // debugger;
+    if (!floorsData || !floorsData.floors) {
+      floorplanService.initFloor(0);
+      //添加标题
+      const title = floorplanService.createTitle();
+      floorplanService.addTitle(title);
+      //添加指南针
+      const compass = floorplanService.createCompass();
+      floorplanService.addCompass(compass);
+      // //添加背景图片
+      // const bgImage = floorplanService.createBgImage()
+      // floorplanService.addBgImage(bgImage)
+      // if(bgImage.url){
+      //     const imageData = await floorplanService.loadImageData(bgImage.url)
+      //     bgImage.setImageData(imageData)
+      // }
+      return;
     }
+    floorplanService.setCurrentId(floorsData.currentId);
+    for (let i = 0; i < floorsData.floors.length; ++i) {
+      let floor = floorsData.floors[i];
+      floorplanService.initFloor(i);
+      for (let key in floor.points) {
+        wallService.createPoint(
+          floor.points[key].x,
+          floor.points[key].y,
+          floor.points[key].vectorId,
+          i
+        );
+      }
 
-    async load(floorsData) {
-        if(!floorsData||!floorsData.floors){
-            floorplanService.initFloor(0)
-            //添加标题
-            const title = floorplanService.createTitle()
-            floorplanService.addTitle(title)
-            //添加指南针
-            const compass = floorplanService.createCompass()
-            floorplanService.addCompass(compass)
-            // //添加背景图片
-            // const bgImage = floorplanService.createBgImage()
-            // floorplanService.addBgImage(bgImage)
-            // if(bgImage.url){
-            //     const imageData = await floorplanService.loadImageData(bgImage.url)
-            //     bgImage.setImageData(imageData)
-            // }
-            return;
-        }
-        floorplanService.setCurrentId(floorsData.currentId)
-        for (let i = 0; i < floorsData.floors.length; ++i) {
-            let floor = floorsData.floors[i]
-            floorplanService.initFloor(i)
-            for (let key in floor.points) {
-                wallService.createPoint(floor.points[key].x, floor.points[key].y, floor.points[key].vectorId, i)
-            }
+      for (let key in floor.walls) {
+        let wall = wallService.createWall(
+          floor.walls[key].start,
+          floor.walls[key].end,
+          floor.walls[key].vectorId,
+          i
+        );
+        floor.walls[key].color && wall.setColor(floor.walls[key].color);
+      }
 
-            for (let key in floor.walls) {
-                let wall = wallService.createWall(floor.walls[key].start, floor.walls[key].end, floor.walls[key].vectorId, i)
-                floor.walls[key].color && wall.setColor(floor.walls[key].color)
-            }
+      for (let key in floor.tags) {
+        let tag = tagService.createTag(
+          floor.tags[key].center,
+          floor.tags[key].vectorId,
+          i
+        );
+        tag.setValue(floor.tags[key].value);
+        floor.tags[key].color && tag.setColor(floor.tags[key].color);
+        floor.tags[key].fontSize && tag.setFontSize(floor.tags[key].fontSize);
+      }
 
-            for (let key in floor.tags) {
-                let tag = tagService.createTag(floor.tags[key].center, floor.tags[key].vectorId, i)
-                tag.setValue(floor.tags[key].value)
-                floor.tags[key].color && tag.setColor(floor.tags[key].color)
-                floor.tags[key].fontSize && tag.setFontSize(floor.tags[key].fontSize)
-            }
+      for (let key in floor.customImages) {
+        let customImage = await customImageService.createCustomImage(
+          floor.customImages[key].url,
+          floor.customImages[key].center,
+          floor.customImages[key].vectorId
+        );
+        customImage.setAngle(floor.customImages[key].angle);
+        customImage.setScale(floor.customImages[key].scale);
+        customImage.setRatio(floor.customImages[key].ratio);
+      }
 
-            for (let key in floor.customImages) {
-                let customImage = await customImageService.createCustomImage(floor.customImages[key].url,floor.customImages[key].center, floor.customImages[key].vectorId)
-                customImage.setAngle(floor.customImages[key].angle)
-                customImage.setScale(floor.customImages[key].scale)
-                customImage.setRatio(floor.customImages[key].ratio)
-            }
+      for (let key in floor.tables) {
+        let table = tableService.createTable(
+          floor.tables[key].center,
+          floor.tables[key].vectorId,
+          i
+        );
+        table.rowLen = floor.tables[key].rowLen;
+        table.colLen = floor.tables[key].colLen;
+        table.points = floor.tables[key].points;
+        table.cells = floor.tables[key].cells;
+      }
 
-            for (let key in floor.tables) {
-                let table = tableService.createTable(floor.tables[key].center, floor.tables[key].vectorId, i)
-                table.rowLen = floor.tables[key].rowLen
-                table.colLen = floor.tables[key].colLen
-                table.points = floor.tables[key].points
-                table.cells = floor.tables[key].cells
-            }
+      for (let key in floor.cells) {
+        let cell = tableService.createCell(
+          floor.cells[key].parent,
+          floor.cells[key].vectorId,
+          i
+        );
+        cell.width = floor.cells[key].width;
+        cell.height = floor.cells[key].height;
+        cell.value = floor.cells[key].value;
+        cell.colIndex = floor.cells[key].colIndex;
+        cell.rowIndex = floor.cells[key].rowIndex;
+      }
 
-            for (let key in floor.cells) {
-                let cell = tableService.createCell(floor.cells[key].parent,floor.cells[key].vectorId, i)
-                cell.width = floor.cells[key].width
-                cell.height = floor.cells[key].height
-                cell.value = floor.cells[key].value
-                cell.colIndex = floor.cells[key].colIndex
-                cell.rowIndex = floor.cells[key].rowIndex
-            }
+      for (let key in floor.rectangles) {
+        let rectangle = rectangleService.createRectangle(
+          floor.rectangles[key].points[0],
+          floor.rectangles[key].points[2],
+          floor.rectangles[key].vectorId,
+          i
+        );
+        floor.rectangles[key].color &&
+          rectangle.setColor(floor.rectangles[key].color);
+      }
 
-            for (let key in floor.rectangles) {
-                let rectangle = rectangleService.createRectangle(floor.rectangles[key].points[0], floor.rectangles[key].points[2], floor.rectangles[key].vectorId,i)
-                floor.rectangles[key].color && rectangle.setColor(floor.rectangles[key].color)
-            }
+      for (let key in floor.circles) {
+        let circle = circleService.createCircle2(
+          floor.circles[key].center,
+          floor.circles[key].radius,
+          floor.circles[key].vectorId,
+          i
+        );
+        floor.circles[key].color && circle.setColor(floor.circles[key].color);
+      }
 
-            for (let key in floor.circles) {
-                let circle =  circleService.createCircle2(floor.circles[key].center, floor.circles[key].radius, floor.circles[key].vectorId,i)
-                floor.circles[key].color && circle.setColor(floor.circles[key].color)
-            }
+      for (let key in floor.arrows) {
+        let arrow = arrowService.createArrow(
+          floor.arrows[key].startPoint,
+          floor.arrows[key].endPoint,
+          floor.arrows[key].vectorId,
+          i
+        );
+        floor.arrows[key].color && arrow.setColor(floor.arrows[key].color);
+      }
 
-            for (let key in floor.arrows) {
-                let arrow = arrowService.createArrow(floor.arrows[key].startPoint,floor.arrows[key].endPoint,floor.arrows[key].vectorId,i)
-                floor.arrows[key].color && arrow.setColor(floor.arrows[key].color)
-            }
+      for (let key in floor.icons) {
+        iconService.createIcon2(
+          floor.icons[key].center,
+          floor.icons[key].radius,
+          floor.icons[key].value,
+          floor.icons[key].vectorId,
+          i
+        );
+      }
 
-            for (let key in floor.icons) {
-                iconService.createIcon2(floor.icons[key].center,floor.icons[key].radius,floor.icons[key].value,floor.icons[key].vectorId,i)
-            }
+      for (let key in floor.signs) {
+        let sign = signService.createSign(
+          floor.signs[key].center,
+          floor.signs[key].geoType,
+          floor.signs[key].vectorId,
+          i
+        );
+        sign.angle = floor.signs[key].angle;
+        floor.signs[key].scale && sign.setScale(floor.signs[key].scale);
+      }
 
-            for (let key in floor.signs) {
-                let sign = signService.createSign(floor.signs[key].center, floor.signs[key].geoType, floor.signs[key].vectorId,i)
-                sign.angle = floor.signs[key].angle
-                floor.signs[key].scale && sign.setScale(floor.signs[key].scale)
-            }
+      const title = floorplanService.createTitle(
+        floor.title.value,
+        floor.title.vectorId,
+        i,
+        floor.title.noShow
+      );
+      // debugger
+      floorplanService.addTitle(title);
 
-            const title = floorplanService.createTitle(floor.title.value, floor.title.vectorId, i)
-            floorplanService.addTitle(title)
+      const compass = floorplanService.createCompass(
+        floor.compass.angle,
+        floor.compass.vectorId,
+        i,
+        floor.compass.noShow
+      );
+      // debugger
+      floorplanService.addCompass(compass);
 
-            const compass = floorplanService.createCompass(floor.compass.angle, floor.compass.vectorId, i)
-            floorplanService.addCompass(compass)
-            
-            if (floor.bgImage && floor.bgImage.url) {
-                const bgImage = await bgImageService.createBgImage(floor.bgImage.url,floor.bgImage.center)
-                if(floor.bgImage.hasOwnProperty('scale'))
-                {
-                    bgImage.setScale(floor.bgImage.scale)
-                }
-            }
+      if (floor.bgImage && floor.bgImage.url) {
+        const bgImage = await bgImageService.createBgImage(
+          floor.bgImage.url,
+          floor.bgImage.center
+        );
+        if (floor.bgImage.hasOwnProperty("scale")) {
+          bgImage.setScale(floor.bgImage.scale);
         }
+      }
+      if (floor.noBoardFrame) {
+        floorplanService.setBoardFrame(floor.noBoardFrame);
+      }
     }
-
+  }
 }

src/view/case/draw/board/editCAD/Renderer/Render.js

@@ -1,312 +1,321 @@
-import VectorType from '../enum/VectorType.js'
-import { floorplanService } from '../Service/FloorplanService.js'
-import { elementService } from '../Service/ElementService.js'
-import { coordinate } from '../Coordinate.js'
-import { draw } from './Draw.js'
-import { floorplanData } from '../FloorplanData.js'
-import { signService } from '../Service/SignService.js'
+import VectorType from "../enum/VectorType.js";
+import { floorplanService } from "../Service/FloorplanService.js";
+import { elementService } from "../Service/ElementService.js";
+import { coordinate } from "../Coordinate.js";
+import { draw } from "./Draw.js";
+import { floorplanData } from "../FloorplanData.js";
+import { signService } from "../Service/SignService.js";
 
 export default class Render {
-    constructor(layer) {
-        this.layer = layer
-        this.displayPanos = false
+  constructor(layer) {
+    this.layer = layer;
+    this.displayPanos = false;
+  }
+
+  //绘制户型
+  drawGeometry(vector, styleType, flag) {
+    if (draw.context == null || vector == null || !vector.geoType) {
+      return;
     }
-
-    //绘制户型
-    drawGeometry(vector, styleType, flag) {
-        if (draw.context == null || vector == null || !vector.geoType) {
-            return
-        }
-        switch (vector.geoType) {
-            case VectorType.Wall:
-                draw.drawWall(vector, styleType)
-                //draw.drawMeasures(vector);
-                return
-            case VectorType.Point:
-                draw.drawPoint(vector)
-                return
-            case VectorType.Tag:
-                draw.drawTag(vector, styleType, flag)
-                return
-            case VectorType.Rectangle:
-                draw.drawRectangle(vector)
-                return
-            case VectorType.Circle:
-                draw.drawCircleGeo(vector)    //drawCircle已经用了
-                return
-            case VectorType.Icon:
-                draw.drawIcon(vector)    
-                return
-            case VectorType.Arrow:
-                draw.drawArrow(vector)    
-                return
-            case VectorType.Table:
-                draw.drawTable(vector)
-                return
-            case VectorType.Title:
-                draw.drawTitle(vector)
-                return
-            case VectorType.BgImage:
-                draw.drawBgImage(vector)
-                return
-            case VectorType.Compass:
-                draw.drawCompass(vector)
-                return
-            case VectorType.CustomImage:
-                draw.drawCustomImage(vector)
-                return
-        }
-        
-        if (signService.isSign(vector.geoType)) {
-            draw.drawSign(vector)
-            return
-        }
+    switch (vector.geoType) {
+      case VectorType.Wall:
+        draw.drawWall(vector, styleType);
+        //draw.drawMeasures(vector);
+        return;
+      case VectorType.Point:
+        draw.drawPoint(vector);
+        return;
+      case VectorType.Tag:
+        draw.drawTag(vector, styleType, flag);
+        return;
+      case VectorType.Rectangle:
+        draw.drawRectangle(vector);
+        return;
+      case VectorType.Circle:
+        draw.drawCircleGeo(vector); //drawCircle已经用了
+        return;
+      case VectorType.Icon:
+        draw.drawIcon(vector);
+        return;
+      case VectorType.Arrow:
+        draw.drawArrow(vector);
+        return;
+      case VectorType.Table:
+        draw.drawTable(vector);
+        return;
+      case VectorType.Title:
+        draw.drawTitle(vector);
+        return;
+      case VectorType.BgImage:
+        draw.drawBgImage(vector);
+        return;
+      case VectorType.Compass:
+        draw.drawCompass(vector);
+        return;
+      case VectorType.CustomImage:
+        draw.drawCustomImage(vector);
+        return;
     }
 
-    //绘制交互的元素
-    drawElement(vector) {
-        if (draw.context == null) {
-            return
-        }
-        switch (vector.geoType) {
-            case VectorType.Point:
-                draw.drawCircle(vector)
-                break
-            case VectorType.Line:
-                draw.drawLine(vector)
-                break
-        }
+    if (signService.isSign(vector.geoType)) {
+      draw.drawSign(vector);
+      return;
     }
+  }
 
-    redrawElements() {
-        if (elementService.vCheckLines.X && elementService.vCheckLines.X.display) {
-            this.drawElement(elementService.vCheckLines.X)
-        }
-
-        if (elementService.vCheckLines.Y && elementService.vCheckLines.Y.display) {
-            this.drawElement(elementService.vCheckLines.Y)
-        }
-
-        if (elementService.startAddWall && elementService.startAddWall.display) {
-            this.drawElement(elementService.startAddWall)
-        }
-
-        if (elementService.newWall && elementService.newWall.display) {
-            this.drawElement(elementService.newWall)
-        }
+  //绘制交互的元素
+  drawElement(vector) {
+    if (draw.context == null) {
+      return;
+    }
+    switch (vector.geoType) {
+      case VectorType.Point:
+        draw.drawCircle(vector);
+        break;
+      case VectorType.Line:
+        draw.drawLine(vector);
+        break;
+    }
+  }
 
-        if (elementService.checkLines.X && elementService.checkLines.X.display) {
-            this.drawElement(elementService.checkLines.X)
-        }
+  redrawElements() {
+    if (elementService.vCheckLines.X && elementService.vCheckLines.X.display) {
+      this.drawElement(elementService.vCheckLines.X);
+    }
 
-        if (elementService.checkLines.Y && elementService.checkLines.Y.display) {
-            this.drawElement(elementService.checkLines.Y)
-        }
+    if (elementService.vCheckLines.Y && elementService.vCheckLines.Y.display) {
+      this.drawElement(elementService.vCheckLines.Y);
     }
 
-    redrawRooms(floor) {
-        let rooms = roomService.getRooms(floor)
-        for (let i = 0; i < rooms.length; ++i) {
-            let img = null
-            for (let j = 0; j < this.layer.app.CadManager.labels.length; ++j) {
-                if (rooms[i].tagName != null && rooms[i].tagName.trim() == this.layer.app.CadManager.labels[j].text) {
-                    if (this.layer.app.CadManager.labels[j].type == 'hall') {
-                        img = roomService.getHallImg()
-                        draw.drawRoomBackGround(rooms[i], img)
-                    } else if (this.layer.app.CadManager.labels[j].type == 'room') {
-                        img = roomService.getDefaultImg()
-                        draw.drawRoomBackGround(rooms[i], img)
-                    } else if (this.layer.app.CadManager.labels[j].type == 'other') {
-                        img = roomService.getOtherImg()
-                        draw.drawRoomBackGround(rooms[i], img)
-                    }
-                    break
-                }
-            }
-
-            if (img == null) {
-                img = roomService.getOtherImg()
-                draw.drawRoomBackGround(rooms[i], img)
-            }
-        }
+    if (elementService.startAddWall && elementService.startAddWall.display) {
+      this.drawElement(elementService.startAddWall);
     }
 
-    autoRedraw() {
-        draw.clear()
-        let data = floorplanService.getFloorData()
-        if (!data) {
-            return
-        }
+    if (elementService.newWall && elementService.newWall.display) {
+      this.drawElement(elementService.newWall);
+    }
 
-        let title = data.title
-        this.drawGeometry(title)
+    if (elementService.checkLines.X && elementService.checkLines.X.display) {
+      this.drawElement(elementService.checkLines.X);
+    }
 
-        let bgImage = data.bgImage
-        this.drawGeometry(bgImage)
+    if (elementService.checkLines.Y && elementService.checkLines.Y.display) {
+      this.drawElement(elementService.checkLines.Y);
+    }
+  }
+
+  redrawRooms(floor) {
+    let rooms = roomService.getRooms(floor);
+    for (let i = 0; i < rooms.length; ++i) {
+      let img = null;
+      for (let j = 0; j < this.layer.app.CadManager.labels.length; ++j) {
+        if (
+          rooms[i].tagName != null &&
+          rooms[i].tagName.trim() == this.layer.app.CadManager.labels[j].text
+        ) {
+          if (this.layer.app.CadManager.labels[j].type == "hall") {
+            img = roomService.getHallImg();
+            draw.drawRoomBackGround(rooms[i], img);
+          } else if (this.layer.app.CadManager.labels[j].type == "room") {
+            img = roomService.getDefaultImg();
+            draw.drawRoomBackGround(rooms[i], img);
+          } else if (this.layer.app.CadManager.labels[j].type == "other") {
+            img = roomService.getOtherImg();
+            draw.drawRoomBackGround(rooms[i], img);
+          }
+          break;
+        }
+      }
+
+      if (img == null) {
+        img = roomService.getOtherImg();
+        draw.drawRoomBackGround(rooms[i], img);
+      }
+    }
+  }
 
-        let compass = data.compass
-        this.drawGeometry(compass)
+  autoRedraw() {
+    draw.clear();
+    let data = floorplanService.getFloorData();
+    if (!data) {
+      return;
+    }
+    let titleOpener = data.title.show;
+    let title = data.title;
+    titleOpener && this.drawGeometry(title);
 
-        let walls = data.walls
-        for (let key in walls) {
-            this.drawGeometry(walls[key])
-        }
+    let bgImage = data.bgImage;
+    this.drawGeometry(bgImage);
 
-        let points = data.points
-        for (let key in points) {
-            this.drawGeometry(points[key])
-        }
+    let compass = data.compass;
+    let compassOpener = !data.compass.noShow;
+    compassOpener && this.drawGeometry(compass);
+    // debugger
 
-        //draw.drawSpecialPoint()
+    let walls = data.walls;
+    for (let key in walls) {
+      this.drawGeometry(walls[key]);
+    }
 
-        let signs = data.signs
-        for (let key in signs) {
-            this.drawGeometry(signs[key])
-        }
+    let points = data.points;
+    for (let key in points) {
+      this.drawGeometry(points[key]);
+    }
 
-        let tags = data.tags
-        for (let key in tags) {
-            this.drawGeometry(tags[key])
-        }
+    //draw.drawSpecialPoint()
 
-        let tables = data.tables
-        for (let key in tables) {
-            this.drawGeometry(tables[key])
-        }
+    let signs = data.signs;
+    for (let key in signs) {
+      this.drawGeometry(signs[key]);
+    }
 
-        let rectangles = data.rectangles
-        for (let key in rectangles) {
-            this.drawGeometry(rectangles[key])
-        }
+    let tags = data.tags;
+    for (let key in tags) {
+      this.drawGeometry(tags[key]);
+    }
 
-        let circles = data.circles
-        for (let key in circles) {
-            this.drawGeometry(circles[key])
-        }
+    let tables = data.tables;
+    for (let key in tables) {
+      this.drawGeometry(tables[key]);
+    }
 
-        let arrows = data.arrows
-        for (let key in arrows) {
-            this.drawGeometry(arrows[key])
-        }
+    let rectangles = data.rectangles;
+    for (let key in rectangles) {
+      this.drawGeometry(rectangles[key]);
+    }
 
-        let icons = data.icons
-        for (let key in icons) {
-            this.drawGeometry(icons[key])
-        }
+    let circles = data.circles;
+    for (let key in circles) {
+      this.drawGeometry(circles[key]);
+    }
 
-        let customImages = data.customImages
-        for (let key in customImages) {
-            this.drawGeometry(customImages[key])
-        }
-        
-        draw.drawFrame()
-        this.redrawElements()
+    let arrows = data.arrows;
+    for (let key in arrows) {
+      this.drawGeometry(arrows[key]);
     }
 
-    autoRedrawForImg() {
-        draw.clear()
-        draw.drawBackGround()
-        let data = floorplanService.getFloorData()
-        if (!data) {
-            return
-        }
+    let icons = data.icons;
+    for (let key in icons) {
+      this.drawGeometry(icons[key]);
+    }
 
-        let title = data.title
-        this.drawGeometry(title)
+    let customImages = data.customImages;
+    for (let key in customImages) {
+      this.drawGeometry(customImages[key]);
+    }
+    //TODO
+    let boardFrameOpener = !data.noBoardFrame;
+    boardFrameOpener && draw.drawFrame();
+    this.redrawElements();
+  }
+
+  autoRedrawForImg() {
+    draw.clear();
+    draw.drawBackGround();
+    let data = floorplanService.getFloorData();
+    if (!data) {
+      return;
+    }
 
-        let bgImage = data.bgImage
-        this.drawGeometry(bgImage)
+    let titleOpener = data.title.show;
+    let title = data.title;
+    titleOpener && this.drawGeometry(title);
 
-        let compass = data.compass
-        this.drawGeometry(compass)
+    let bgImage = data.bgImage;
+    this.drawGeometry(bgImage);
 
-        let walls = data.walls
-        for (let key in walls) {
-            this.drawGeometry(walls[key])
-        }
+    let compass = data.compass;
+    let compassOpener = !data.compass.noShow;
+    compassOpener && this.drawGeometry(compass);
 
-        let points = data.points
-        for (let key in points) {
-            this.drawGeometry(points[key])
-        }
+    let walls = data.walls;
+    for (let key in walls) {
+      this.drawGeometry(walls[key]);
+    }
 
-        //draw.drawSpecialPoint()
+    let points = data.points;
+    for (let key in points) {
+      this.drawGeometry(points[key]);
+    }
 
-        let signs = data.signs
-        for (let key in signs) {
-            this.drawGeometry(signs[key])
-        }
+    //draw.drawSpecialPoint()
 
-        let tags = data.tags
-        for (let key in tags) {
-            this.drawGeometry(tags[key])
-        }
+    let signs = data.signs;
+    for (let key in signs) {
+      this.drawGeometry(signs[key]);
+    }
 
-        let tables = data.tables
-        for (let key in tables) {
-            this.drawGeometry(tables[key])
-        }
+    let tags = data.tags;
+    for (let key in tags) {
+      this.drawGeometry(tags[key]);
+    }
 
-        let rectangles = data.rectangles
-        for (let key in rectangles) {
-            this.drawGeometry(rectangles[key])
-        }
+    let tables = data.tables;
+    for (let key in tables) {
+      this.drawGeometry(tables[key]);
+    }
 
-        let circles = data.circles
-        for (let key in circles) {
-            this.drawGeometry(circles[key])
-        }
+    let rectangles = data.rectangles;
+    for (let key in rectangles) {
+      this.drawGeometry(rectangles[key]);
+    }
 
-        let arrows = data.arrows
-        for (let key in arrows) {
-            this.drawGeometry(arrows[key])
-        }
+    let circles = data.circles;
+    for (let key in circles) {
+      this.drawGeometry(circles[key]);
+    }
 
-        let icons = data.icons
-        for (let key in icons) {
-            this.drawGeometry(icons[key])
-        }
+    let arrows = data.arrows;
+    for (let key in arrows) {
+      this.drawGeometry(arrows[key]);
+    }
 
-        let customImages = data.customImages
-        for (let key in customImages) {
-            this.drawGeometry(customImages[key])
-        }
-        
-        draw.drawFrame()
-        this.redrawElements()
+    let icons = data.icons;
+    for (let key in icons) {
+      this.drawGeometry(icons[key]);
     }
 
-    redrawCore() {
-        console.log('重绘！')
-        draw.clear()
+    let customImages = data.customImages;
+    for (let key in customImages) {
+      this.drawGeometry(customImages[key]);
+    }
 
-        let data = floorplanService.getFloorData()
-        if (!data) {
-            return
-        }
-        let walls = data.walls
-        for (let key in walls) {
-            this.drawGeometry(walls[key])
-        }
+    let boardFrameOpener = !data.noBoardFrame;
+    boardFrameOpener && draw.drawFrame();
+    this.redrawElements();
+  }
 
-        let points = data.points
-        for (let key in points) {
-            this.drawGeometry(points[key])
-        }
+  redrawCore() {
+    console.log("重绘！");
+    draw.clear();
 
-        let signs = data.signs
-        for (let key in signs) {
-            this.drawGeometry(signs[key])
-        }
+    let data = floorplanService.getFloorData();
+    if (!data) {
+      return;
+    }
+    let walls = data.walls;
+    for (let key in walls) {
+      this.drawGeometry(walls[key]);
     }
 
-    clear() {
-        draw.clear()
+    let points = data.points;
+    for (let key in points) {
+      this.drawGeometry(points[key]);
     }
 
-    getContext() {
-        return draw.context
+    let signs = data.signs;
+    for (let key in signs) {
+      this.drawGeometry(signs[key]);
     }
+  }
+
+  clear() {
+    draw.clear();
+  }
+
+  getContext() {
+    return draw.context;
+  }
 }
 
 // const render = new Render()

src/view/case/draw/board/editCAD/Service/FloorplanService.js

@@ -1,528 +1,543 @@
-import { floorplanData } from '../FloorplanData'
-import { coordinate } from '../Coordinate.js'
-import Constant from '../Constant'
+import { floorplanData } from "../FloorplanData";
+import { coordinate } from "../Coordinate.js";
+import Constant from "../Constant";
 
-import Title from '../Geometry/Title.js'
-import BgImage from '../Geometry/BgImage.js'
-import Compass from '../Geometry/Compass.js'
+import Title from "../Geometry/Title.js";
+import BgImage from "../Geometry/BgImage.js";
+import Compass from "../Geometry/Compass.js";
 
 export class FloorplanService {
-    constructor() {
-        this.currentId = 0 // 当前可用id
-        this.currentFloor = 0 // 当前楼层，第一层是0
-        this.angle = 0 //旋转角度
+  constructor() {
+    this.currentId = 0; // 当前可用id
+    this.currentFloor = 0; // 当前楼层，第一层是0
+    this.angle = 0; //旋转角度
+  }
+
+  setCurrentId(id) {
+    this.currentId = id;
+  }
+
+  getCurrentId() {
+    return this.currentId;
+  }
+
+  updateCurrentId() {
+    ++this.currentId;
+  }
+
+  setCurrentFloor(floor) {
+    if (floorplanData.floors.length == 1) {
+      this.currentFloor = 0;
+    } else {
+      this.currentFloor = floor;
+    }
+  }
+
+  getCurrentFloor() {
+    return this.currentFloor;
+  }
+
+  getFloorNum() {
+    return floorplanData.floors.length;
+  }
+
+  initFloor(floorNum) {
+    floorplanData.initFloor(floorNum);
+  }
+
+  getFloors() {
+    return floorplanData.floors;
+  }
+
+  getPoint(pointId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor].points[pointId];
+  }
+
+  deletePoint(pointId, wallId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    let point = this.getPoint(pointId);
+    //有可能先删除墙，导致点没了
+    if (point) {
+      if (Object.keys(point.parent).length == 0) {
+        point = null;
+        delete floorplanData.floors[floor].points[pointId];
+      } else if (Object.keys(point.parent).length == 1 && !wallId) {
+        delete floorplanData.floors[floor].points[pointId];
+      } else if (
+        Object.keys(point.parent).length == 1 &&
+        point.parent[wallId]
+      ) {
+        delete floorplanData.floors[floor].points[pointId];
+      } else if (
+        Object.keys(point.parent).length == 1 &&
+        !point.parent[wallId]
+      ) {
+        return;
+      } else {
+        delete point.parent[wallId];
+      }
+    }
+  }
+
+  getWall(wallId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor].walls[wallId];
+  }
+
+  deleteWall(wallId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    let wall = this.getWall(wallId, floor);
+
+    this.deletePoint(wall.start, wallId, floor);
+    this.deletePoint(wall.end, wallId, floor);
+    delete floorplanData.floors[floor].walls[wallId];
+  }
+
+  getAngle() {
+    return this.angle;
+  }
+
+  setAngle(angle) {
+    this.angle = angle;
+  }
+
+  getFloorData(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor];
+  }
+
+  getWalls(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
-
-    setCurrentId(id) {
-        this.currentId = id
-    }
-
-    getCurrentId() {
-        return this.currentId
-    }
-
-    updateCurrentId() {
-        ++this.currentId
-    }
-
-    setCurrentFloor(floor) {
-        if (floorplanData.floors.length == 1) {
-            this.currentFloor = 0
-        } else {
-            this.currentFloor = floor
-        }
-    }
-
-    getCurrentFloor() {
-        return this.currentFloor
-    }
-
-    getFloorNum() {
-        return floorplanData.floors.length
+    return floorplanData.floors[floor].walls;
+  }
+
+  getPoints(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].points;
+  }
 
-    initFloor(floorNum) {
-        floorplanData.initFloor(floorNum)
-    }
-
-    getFloors() {
-        return floorplanData.floors
-    }
+  addWall(wall, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    floorplanData.floors[floor].walls[wall.vectorId] = wall;
+  }
+
+  addPoint(point, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    floorplanData.floors[floor].points[point.vectorId] = point;
+  }
 
-    getPoint(pointId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].points[pointId]
+  addRectangle(rectangle, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].rectangles[rectangle.vectorId] = rectangle;
+  }
 
-    deletePoint(pointId, wallId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let point = this.getPoint(pointId)
-        //有可能先删除墙，导致点没了
-        if (point) {
-            if (Object.keys(point.parent).length == 0) {
-                point = null
-                delete floorplanData.floors[floor].points[pointId]
-            } else if (Object.keys(point.parent).length == 1 && !wallId) {
-                delete floorplanData.floors[floor].points[pointId]
-            } else if (Object.keys(point.parent).length == 1 && point.parent[wallId]) {
-                delete floorplanData.floors[floor].points[pointId]
-            } else if (Object.keys(point.parent).length == 1 && !point.parent[wallId]) {
-                return
-            } else {
-                delete point.parent[wallId]
-            }
-        }
+  getRectangle(rectangleId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].rectangles[rectangleId];
+  }
+
+  deleteRectangle(rectangleId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    let rectangle = this.getRectangle(rectangleId, floor);
+    rectangle = null;
+    delete floorplanData.floors[floor].rectangles[rectangleId];
+  }
 
-    getWall(wallId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].walls[wallId]
-    }
-
-    deleteWall(wallId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let wall = this.getWall(wallId, floor)
-
-        this.deletePoint(wall.start, wallId, floor)
-        this.deletePoint(wall.end, wallId, floor)
-        delete floorplanData.floors[floor].walls[wallId]
+  addCircle(circle, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].circles[circle.vectorId] = circle;
+  }
 
-    getAngle() {
-        return this.angle
+  getCircle(circleId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].circles[circleId];
+  }
 
-    setAngle(angle) {
-        this.angle = angle
+  deleteCircle(circleId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let circle = this.getCircle(circleId, floor);
+    circle = null;
+    delete floorplanData.floors[floor].circles[circleId];
+  }
 
-    getFloorData(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor]
+  addArrow(arrow, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].arrows[arrow.vectorId] = arrow;
+  }
 
-    getWalls(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].walls
+  getArrow(arrowId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].arrows[arrowId];
+  }
 
-    getPoints(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].points
+  deleteArrow(arrowId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let arrow = this.getArrow(arrowId, floor);
+    arrow = null;
+    delete floorplanData.floors[floor].arrows[arrowId];
+  }
 
-    addWall(wall, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].walls[wall.vectorId] = wall
+  addIcon(icon, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].icons[icon.vectorId] = icon;
+  }
 
-    addPoint(point, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].points[point.vectorId] = point
+  getIcon(iconId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].icons[iconId];
+  }
 
-    addRectangle(rectangle,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].rectangles[rectangle.vectorId] = rectangle
+  deleteIcon(iconId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let icon = this.getIcon(iconId, floor);
+    icon = null;
+    delete floorplanData.floors[floor].icons[iconId];
+  }
 
-    getRectangle(rectangleId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].rectangles[rectangleId]
+  addSign(sign, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].signs[sign.vectorId] = sign;
+  }
 
-    deleteRectangle(rectangleId, floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let rectangle = this.getRectangle(rectangleId, floor)
-        rectangle = null
-        delete floorplanData.floors[floor].rectangles[rectangleId]
+  getSign(signId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].signs[signId];
+  }
 
-    addCircle(circle,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].circles[circle.vectorId] = circle
+  deleteSign(signId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let sign = this.getSign(signId, floor);
+    sign = null;
+    delete floorplanData.floors[floor].signs[signId];
+  }
 
-    getCircle(circleId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].circles[circleId]
+  addTag(tag, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].tags[tag.vectorId] = tag;
+  }
 
-    deleteCircle(circleId, floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let circle = this.getCircle(circleId, floor)
-        circle = null
-        delete floorplanData.floors[floor].circles[circleId]
+  getTag(tagId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].tags[tagId];
+  }
 
-    addArrow(arrow,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].arrows[arrow.vectorId] = arrow
+  deleteTag(tagId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let tag = this.getTag(tagId, floor);
+    tag = null;
+    delete floorplanData.floors[floor].tags[tagId];
+  }
 
-    getArrow(arrowId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].arrows[arrowId]
+  getTags(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].tags;
+  }
 
-    deleteArrow(arrowId, floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let arrow = this.getArrow(arrowId, floor)
-        arrow = null
-        delete floorplanData.floors[floor].arrows[arrowId]
+  addCustomImage(customImage, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].customImages[customImage.vectorId] =
+      customImage;
+  }
 
-    addIcon(icon,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].icons[icon.vectorId] = icon
+  getCustomImage(customImageId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].customImages[customImageId];
+  }
 
-    getIcon(iconId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].icons[iconId]
+  deleteCustomImage(customImageId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let customImage = this.getCustomImage(customImageId, floor);
+    customImage = null;
+    delete floorplanData.floors[floor].customImages[customImageId];
+  }
 
-    deleteIcon(iconId, floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let icon = this.getIcon(iconId, floor)
-        icon = null
-        delete floorplanData.floors[floor].icons[iconId]
+  getBgImage(bgImageId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].bgImage;
+  }
 
-    addSign(sign, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].signs[sign.vectorId] = sign
+  deleteBgImage(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].bgImage = {};
+  }
 
-    getSign(signId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].signs[signId]
+  addBgImage(bgImage, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].bgImage = bgImage;
+  }
 
-    deleteSign(signId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let sign = this.getSign(signId, floor)
-        sign = null
-        delete floorplanData.floors[floor].signs[signId]
+  addTable(table, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].tables[table.vectorId] = table;
+  }
 
-    addTag(tag, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].tags[tag.vectorId] = tag
+  getTable(tableId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].tables[tableId];
+  }
 
-    getTag(tagId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].tags[tagId]
+  deleteTable(tableId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let table = this.getTable(tableId, floor);
+    table = null;
+    delete floorplanData.floors[floor].tables[tableId];
+  }
 
-    deleteTag(tagId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let tag = this.getTag(tagId, floor)
-        tag = null
-        delete floorplanData.floors[floor].tags[tagId]
+  getTables(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].tables;
+  }
 
-    getTags(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].tags
+  addCell(cell, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    floorplanData.floors[floor].cells[cell.vectorId] = cell;
+  }
 
-    addCustomImage(customImage, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].customImages[customImage.vectorId] = customImage
+  getCell(cellId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].cells[cellId];
+  }
 
-    getCustomImage(customImageId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].customImages[customImageId]
+  deleteCell(cellId, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    let cell = this.getCell(cellId, floor);
+    cell = null;
+    delete floorplanData.floors[floor].cells[cellId];
+  }
 
-    deleteCustomImage(customImageId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let customImage = this.getCustomImage(customImageId, floor)
-        customImage = null
-        delete floorplanData.floors[floor].customImages[customImageId]
+  getCells(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].cells;
+  }
 
-    getBgImage(bgImageId,floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].bgImage
+  getRectangles(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].rectangles;
+  }
 
-    deleteBgImage(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].bgImage = {}
+  getCircles(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].circles;
+  }
 
-    addBgImage(bgImage, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].bgImage = bgImage
+  getArrows(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].arrows;
+  }
 
-    addTable(table, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].tables[table.vectorId] = table
+  getIcons(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
-
-    getTable(tableId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].tables[tableId]
-    }
-
-    deleteTable(tableId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let table = this.getTable(tableId, floor)
-        table = null
-        delete floorplanData.floors[floor].tables[tableId]
-    }
-
-    getTables(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].tables
+    return floorplanData.floors[floor].icons;
+  }
+  getSigns(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
     }
+    return floorplanData.floors[floor].signs;
+  }
 
-    addCell(cell, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].cells[cell.vectorId] = cell
-    }
-
-    getCell(cellId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].cells[cellId]
-    }
-
-    deleteCell(cellId, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        let cell = this.getCell(cellId, floor)
-        cell = null
-        delete floorplanData.floors[floor].cells[cellId]
-    }
-
-    getCells(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].cells
-    }
-
-    getRectangles(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].rectangles
-    }
-
-    getCircles(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].circles
-    }
-
-    getArrows(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].arrows
-    }
-
-    getIcons(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].icons
-    }
-    getSigns(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].signs
-    }
-
-    getCustomImages(floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].customImages
-    }
-
-    clear() {
-        if (floorplanData.floors[this.currentFloor]) {
-            floorplanData.floors[this.currentFloor].points = {}
-            floorplanData.floors[this.currentFloor].walls = {}
-            floorplanData.floors[this.currentFloor].rectangles = {}
-            floorplanData.floors[this.currentFloor].circles = {}
-            floorplanData.floors[this.currentFloor].tags = {}
-            floorplanData.floors[this.currentFloor].tables = {}
-            floorplanData.floors[this.currentFloor].cells = {}
-            floorplanData.floors[this.currentFloor].signs = {}
-            floorplanData.floors[this.currentFloor].customImages = {}
-            floorplanData.floors[this.currentFloor].arrows = {}
-            floorplanData.floors[this.currentFloor].icons = []
-            floorplanData.floors[this.currentFloor].bgImage = {}
-        }
-    }
-
-    deleteFloorData() {
-        floorplanData.floors = []
-    }
-
-    createTitle(value,vectorId,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        const title = new Title(value,vectorId,floor)
-        return title
-    }
-
-    addTitle(title, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].title = title
-    }
-
-    updateTitle(value,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        const title = floorplanData.floors[floor].title
-        title.setValue(value)
-    }
-
-    getTitle(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].title
-    }
-    
-    createCompass(value,vectorId,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        const compass = new Compass(value,vectorId,floor)
-        return compass
-    }
-
-    addCompass(compass, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].compass = compass
-    }
-
-    updateCompass(value,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        const compass = floorplanData.floors[floor].compass
-        compass.setAngle(value)
-    }
-
-    // eslint-disable-next-line no-dupe-class-members
-    getCompass(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].compass
-    }
-
-    async loadImageData(src){
-        const imageData = await new Promise((resolve, reject) => {
-            var img = new Image()
-            img.src = src;
-            img.crossOrigin=""
-            img.onload = function () {
-                resolve(img)
-            }.bind(this)
-        })
-        return imageData
-    }
+  getCustomImages(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor].customImages;
+  }
+
+  clear() {
+    if (floorplanData.floors[this.currentFloor]) {
+      floorplanData.floors[this.currentFloor].points = {};
+      floorplanData.floors[this.currentFloor].walls = {};
+      floorplanData.floors[this.currentFloor].rectangles = {};
+      floorplanData.floors[this.currentFloor].circles = {};
+      floorplanData.floors[this.currentFloor].tags = {};
+      floorplanData.floors[this.currentFloor].tables = {};
+      floorplanData.floors[this.currentFloor].cells = {};
+      floorplanData.floors[this.currentFloor].signs = {};
+      floorplanData.floors[this.currentFloor].customImages = {};
+      floorplanData.floors[this.currentFloor].arrows = {};
+      floorplanData.floors[this.currentFloor].icons = [];
+      floorplanData.floors[this.currentFloor].bgImage = {};
+    }
+  }
+
+  deleteFloorData() {
+    floorplanData.floors = [];
+  }
+
+  createTitle(value, vectorId, floor, noShow = false) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    const title = new Title(value, vectorId, floor, noShow);
+    return title;
+  }
+
+  addTitle(title, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    floorplanData.floors[floor].title = title;
+  }
+
+  updateTitle(value, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    const title = floorplanData.floors[floor].title;
+    title.setValue(value);
+  }
+
+  getTitle(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor].title;
+  }
+
+  createCompass(value, vectorId, floor, noShow = false) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    // debugger
+    const compass = new Compass(value, vectorId, floor, noShow);
+    return compass;
+  }
+
+  addCompass(compass, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    floorplanData.floors[floor].compass = compass;
+  }
+
+  updateCompass(value, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    const compass = floorplanData.floors[floor].compass;
+    compass.setAngle(value);
+  }
+
+  // eslint-disable-next-line no-dupe-class-members
+  getCompass(floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    return floorplanData.floors[floor].compass;
+  }
+
+  setBoardFrame(noBoardFrame, floor) {
+    if (floor == null || typeof floor == "undefined") {
+      floor = this.currentFloor;
+    }
+    floorplanData.floors[floor].noBoardFrame = noBoardFrame;
+  }
+
+  async loadImageData(src) {
+    const imageData = await new Promise((resolve, reject) => {
+      var img = new Image();
+      img.src = src;
+      img.crossOrigin = "";
+      img.onload = function () {
+        resolve(img);
+      }.bind(this);
+    });
+    return imageData;
+  }
 }
 
-const floorplanService = new FloorplanService()
-export { floorplanService }
+const floorplanService = new FloorplanService();
+export { floorplanService };

src/view/case/draw/board/index.js

@@ -20,6 +20,7 @@ export const create = async (store, canvas) => {
   };
 
   console.log(store);
+  // debugger;
   setTimeout(() => {
     console.log(!!store.floors[0].bgImage);
     refs.bus.emit("existsBgImage", !!store.floors[0].bgImage);
@@ -92,6 +93,7 @@ export const create = async (store, canvas) => {
     el: canvas,
     async getStore() {
       const data = layer.uiControl.exportJSON();
+      debugger;
       const floor = data.floors[0];
       const shapes = [];
 

src/view/case/draw/board/useBoard.ts

@@ -24,6 +24,7 @@ const defaultStore = {
       title: {
         len: null,
         value: "某某案发现场",
+        noShow: false,
         height: 50,
         floor: 0,
         geoType: "Title",
@@ -38,6 +39,7 @@ const defaultStore = {
       },
       compass: {
         len: null,
+        noShow: false,
         angle: 0,
         floor: 0,
         center: {
@@ -48,6 +50,7 @@ const defaultStore = {
         geoType: "Compass",
         vectorId: "Compass7",
       },
+      noBoardFrame: false
     },
   ],
   currentId: 20,
@@ -69,11 +72,73 @@ const getStore = async (caseId: number, fileId: number, type: BoardType) => {
   } else {
     const fileInfo = await getCaseFileImageInfo(fileId);
     if (fileInfo) {
-      console.log(fileInfo);
+
+      console.log('fileInfo', fileInfo.filesTypeId);
+
+      const isMedia = fileInfo.filesTypeId > 1
+
+      console.log('isMedia', isMedia);
+
       data = {
         ...fileInfo.content,
         id: fileInfo.filesId,
       };
+
+      console.log('data-isMedia', data)
+
+      //TODO 媒体库 背景图写入broadData filesTypeId >1
+      // debugger
+      if (isMedia) {
+        // defaultStore.floors[0].title.value = fileInfo.filesTitle
+        data = {
+          ...defaultStore,
+          ...fileInfo.content,
+        };
+
+        if (data.floors) {
+          data.floors[0].title.noShow = true
+          data.floors[0].compass.noShow = true
+          data.floors[0].noBoardFrame = true
+          data.floors[0].title.value = fileInfo.filesTitle
+          if (!data.floors[0].bgImage) {
+            const bgImage = {
+              len: null,
+              version: 2,
+              url: fileInfo.filesUrl,
+              center: {
+                x: 240,
+                y: 140
+              },
+              // "image": {},
+              width: 600,
+              height: 400,
+              scale: 2,
+              geoType: "BgImage",
+              vectorId: "BgImage8",
+              points: []   //   {
+              //     "x": 251,
+              //     "y": 140
+              //   },
+              //   {
+              //     "x": 251,
+              //     "y": 795.1999999999999
+              //   },
+              //   {
+              //     "x": 1158.1999999999998,
+              //     "y": 795.1999999999999
+              //   },
+              //   {
+              //     "x": 1158.1999999999998,
+              //     "y": 140
+              //   }
+              // ]
+            }
+            data.floors[0].bgImage = bgImage
+          }
+        }
+
+      }
+
     } else {
       router.replace({ name: RouteName.caseFile, params: { caseId } });
       throw "该图不存在！";

src/view/case/draw/index.vue

@@ -16,7 +16,7 @@
 
     <div class="df-layout-child">
       <Eshape v-model:shape="state.selectShape" v-if="state.selectShape" />
-      <div class="df-sider">
+      <div class="df-slider">
         <Slider
           :type="props.type"
           :add-shape="state.addShape"
@@ -56,6 +56,7 @@ import {
   saveCaseFileImageInfo,
 } from "@/store/caseFile";
 import { uploadFile } from "@/store/system";
+import { number } from "echarts";
 
 const dom = ref<HTMLCanvasElement>();
 const props = computed(() => {
@@ -64,6 +65,8 @@ const props = computed(() => {
     return null;
   } else {
     const params = route.params;
+    const query = route.query;
+
     const fileId = Number(params.id);
     return {
       caseId: Number(params.caseId),
@@ -71,6 +74,7 @@ const props = computed(() => {
       fileId,
       type: params.type.toString() as BoardType,
       dom: dom.value!,
+      filesTypeId: query.filesTypeId,
     };
   }
 });
@@ -131,8 +135,10 @@ const saveHandler = async () => {
     caseId: args.caseId,
     imgType: args.type,
     file: new File([blob], `${args.type}_${args.fileId}.jpg`),
-    filesTitle: titleShape?.text || `${args.caseId}_${BoardTypeDesc[args.type]}`,
+    filesTitle:
+      titleShape?.text || `${args.caseId}_${BoardTypeDesc[args.type]}`,
     content: store,
+    filesTypeId:  Number(props.value?.filesTypeId) || 1,
   };
   args.inAdd || (body.filesId = props.value!.fileId);
 
@@ -177,7 +183,7 @@ const exportHandler = async () => {
   position: relative;
 }
 
-.df-sider {
+.df-slider {
   flex: 0 0 340px;
   overflow-y: auto;
   box-sizing: border-box;

src/view/case/draw/slider.vue

@@ -2,9 +2,9 @@
   <div class="df-slide-content">
     <h3>{{ fileDesc[type] }}</h3>
     <div class="def-image-set">
-      <el-button type="primary" @click="emit('trackImage')" ghost>
-        设置{{ fileDesc[type] }}</el-button
-      >
+      <el-button type="primary" @click="emit('trackImage')" ghost v-if="type !== BoardType.media">
+        设置{{ fileDesc[type] }}
+      </el-button>
       <el-upload
         :multiple="false"
         :limit="1"
@@ -77,7 +77,14 @@
 </template>
 
 <script setup lang="ts">
-import { metas, labels, images, shapes, MetaShapeType, customImage } from "./board";
+import {
+  metas,
+  labels,
+  images,
+  shapes,
+  MetaShapeType,
+  customImage,
+} from "./board";
 import { BoardType } from "@/store/caseFile";
 import { maxFileSize } from "@/constant/caseFile";
 import { useUpload } from "@/hook/upload";
@@ -97,6 +104,7 @@ const props = defineProps<{
 const fileDesc = {
   [BoardType.scene]: "户型图",
   [BoardType.map]: "方位图",
+  [BoardType.media]: "媒体图",
 };
 const emit = defineEmits<{
   (e: "update:addShape", val: MetaShapeType | null, data?: any): void;
@@ -125,7 +133,8 @@ const coverUploadHandler = async () => {
 };
 watchEffect(async () => {
   if (cover.file) {
-    const coverImage = (await coverImageSize(cover.file, 540, 390, false)) || cover.file;
+    const coverImage =
+      (await coverImageSize(cover.file, 540, 390, false)) || cover.file;
     const data = await imageCropper({
       img: coverImage.blob,
       fixed: [coverImage.width, coverImage.height],

src/view/media/index.vue

@@ -23,7 +23,11 @@
           :name="sub.value"
         >
           <div class="media-list" v-if="files.length">
-            <div v-for="file in files" class="cover" @click="handerPhotoEdit">
+            <div
+              v-for="file in files"
+              class="cover"
+              @click="handerPhotoEdit(file)"
+            >
               <img :src="file.filesUrl" />
               <span class="title">{{ file.filesTitle }}</span>
             </div>
@@ -73,8 +77,13 @@ const handleUploadClick = async () => {
   refresh();
 };
 
-const handerPhotoEdit = () => {
-  console.log("handerPhotoEdit");
+const handerPhotoEdit = (file: CaseFile) => {
+  console.log("handerPhotoEdit", file);
+  router.push({
+    name: RouteName.drawCaseFile,
+    params: { caseId: caseId.value!, type: 2, id: file.filesId },
+    query: { filesTypeId: file.filesTypeId },
+  });
 };
 const initDefaultData = async () => {
   const data = await getCaseFileTypesQuery("library");