wanda-editer/src/components/baseEditer.vue

<template>
  <div id="baseEditer" ref="graphy">
    <div id="fengMap"></div>
    <div class="canvas-container">
      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
    </div>
  </div>
</template>
<script>
import { SFengParser } from "@saga-web/feng-map";
import { SFloorParser } from "@saga-web/big";
import { FloorView } from "./../lib/FloorView";
import { EditScence } from "./mapClass/EditScence";
import bus from "@/bus";
import {
  saveGroup,
  readGroup,
  queryTypeGraph,
  publishGraph
} from "@/api/editer.js";
import { STopologyParser } from "./../lib/parsers/STopologyParser";
import { uuid } from "@/components/mapClass/until";
import { SImageItem } from "@saga-web/graph/lib";
import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
import store from "../store";
import { Loading } from "element-ui";
import { Message } from "element-ui";
let fengmap = null;
//// 底图空间增加字段 isExtracted:boolean true 已被提取过
export default {
  props: {
    cmdType: {
      type: String,
      default: "choice",
      required: false
    },
    changeTextMsg: {
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      appName: "万达可视化系统",
      key: "23f30a832a862c58637a4aadbf50a566",
      mapServerURL: "http://map.wanda.cn/editor",
      canvasWidth: 700,
      canvasHeight: 800,
      fParser: null,
      scene: null,
      view: null,
      floorList: {},
      urlMsg: {},
      chiceItemList: [], //选中itemlist
      hasTypeList: [], // 当前类型下包含的typeid(提取)
      graphId: "",
      initScale: 1, //加载好底图之后的，初始缩放比例
      changeScaleByClick: false //区分 滚轮，点击 事件改变的缩放比例
    };
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth;
    this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
    this.init();
    // 挂在bus
    this.getBus();
    store.dispatch("getElementType", { PageSize: 1000 });
    window.vm = this;
    const that = this;
    document.onkeydown = function(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.key == "Control") {
        // 按 ctrl
        that.scene.isDownCtrl = true;
      }
    };
    document.onkeyup = function(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.key == "Control") {
        // 按 ctrl
        that.scene.isDownCtrl = false;
        this.scene.setCmd = 'choice'
      }
    };
  },
  methods: {
    init() {
      const loadings = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      document.getElementById(`canvas`).focus();
      this.clearGraphy();
      this.scene = new EditScence();
      fengmap = new SFengParser(
        "fengMap",
        this.mapServerURL + "/fmap/" + this.urlMsg.fmapID,
        this.key,
        this.appName,
        null
      );
      const floorid = this.urlMsg.FloorID;
      fengmap.loadMap(this.urlMsg.fmapID, resp => {
        this.floorList = resp;
        fengmap
          .loadTheme(
            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
          )
          .then(response => {
            console.log("获取rf成功", response);
            this.parserData(floorid);
            this.readGraph();
            loadings.close();
          });
        this.view.fitSceneToView();
      });
      // 获取typeid
      this.getTypeId();
      this.scene.emitChange = this.emitChange;
      this.scene.scenceUpdate = this.scenceUpdate;
    },
    parserData(floor) {
      if (floor == "g80") {
        // 屋顶
        if (fengmap.frImg) {
          const imgItem = new SImageItem(
            null,
            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`
          );
          this.scene.addItem(imgItem);
          this.view.scene = this.scene;
          this.view.fitSceneToView();
          this.loading = false;
          this.isQuerying = false;
        }
      } else {
        if (this.floorList[floor]) {
          fengmap.parseData(this.floorList[floor], res => {
            if (res.err) {
              console.log(res.err);
              return;
            }
            this.fParser = new SFloorParser(null);
            this.fParser.parseData(res);
            this.scene.fidToItem = {};
            this.fParser.spaceList.forEach(t => {
              t.zOrder = t.zOrder + t.data.Height;
              t.selectable = true;
              this.scene.fidToItem[t.data.SourceId] = t;
              this.scene.addItem(t);
            });
            this.scene.spaceList = this.fParser.spaceList;
            this.fParser.wallList.forEach(t => this.scene.addItem(t));
            this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
            this.fParser.doorList.forEach(t => this.scene.addItem(t));
            this.fParser.columnList.forEach(t => this.scene.addItem(t));
            this.fParser.casementList.forEach(t => this.scene.addItem(t));
            this.view.scene = this.scene;
            this.view.fitSceneToView();
            this.loading = false;
            this.isQuerying = false;
            console.log("success");
            // 设置初始化缩放比例
            this.initScale = this.view.scale;
            bus.$emit("initScale", this.view.scale);
          });
        } else {
          console.log("楼层不正确");
        }
      }
    },
    // 读取绘制数据
    readGraph() {
      this.readGroup().then(data => {
        this.graphId = data.Data[0].ID;
        bus.$emit("setGraphId", this.graphId);
        if (data.Data) {
          const parserData = new STopologyParser(null);
          const itemMap = {}
          parserData.parseData(data.Data[0].Elements);
          // 多边形(此item需在直线item添加之前添加)
          parserData.zoneLegendList.forEach(t => {
            this.scene.addItem(t);
            // 记录提取
            if (t.data.Properties && t.data.Properties.FID) {
              this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
            }
            this.scene.Nodes.push(t);
            itemMap[t.id] = t;
          });
          // 增加文字(此item需在直线item添加之前添加)
          parserData.textMarkerList.forEach(t => {
            this.scene.addItem(t);
            this.scene.Markers.push(t);
            itemMap[t.id] = t;
          });
          // 增加图片(此item需在直线item添加之前添加)
          parserData.imageMarkerList.forEach(t => {
            this.scene.addItem(t);
            this.scene.Markers.push(t);
            itemMap[t.id] = t;
          });
          // 增加图标类图例(此item需在管线item添加之前添加)
          parserData.imageLegendList.forEach(t => {
            this.scene.addItem(t);
            this.scene.Nodes.push(t);
            if (t.anchorList && t.anchorList.length) {
              t.anchorList.forEach(anc => {
                itemMap[anc.id] = anc;
              })
            }
          });
          // 增加直线
          parserData.lineMarkerList.forEach(t => {
            this.scene.addItem(t);
            this.scene.Markers.push(t);
            // 设置关联Item
            if (t.data.Properties && t.data.Properties.StartItemId) {
              const startItem = itemMap[t.data.Properties.StartItemId];
              startItem?.connect('onMove', t, t.changePos);
              t.startItem = startItem || null
            }
            if (t.data.Properties && t.data.Properties.EndItemId) {
              const endItem = itemMap[t.data.Properties.EndItemId];
              endItem?.connect('onMove', t, t.changePos);
              t.endItem = endItem || null
            }
          });
          // 增加管线类(需在图标类图例添加后添加)
          parserData.relationList.forEach(t => {
            this.scene.addItem(t);
            this.scene.Relations.push(t);
            // 设置锚点
            if (t.anchor1ID) {
              const startAnc = itemMap[t.anchor1ID]
              startAnc.isConnected = true
              startAnc.parent?.connect('changePos', t, t.changePos)
              t.startAnchor = startAnc || null
            }
            if (t.anchor2ID) {
              const endAnc = itemMap[t.anchor2ID]
              endAnc.isConnected = true
              endAnc.parent?.connect('changePos', t, t.changePos)
              t.endAnchor = endAnc || null
            }
          });
          this.view.fitSceneToView();
          bus.$emit("elementDataChange", this.scene);
        }
      });
    },
    // 监听变化
    emitChange(itemMsg) {
      this.chiceItemList = itemMsg.itemList;
      this.$emit("changeFocusItem", itemMsg);
      bus.$emit("FocusItemChanged", itemMsg);
    },
    // 监听场景元素数据变化
    scenceUpdate(scence) {
      bus.$emit("elementDataChange", scence);
    },
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return;
      }
      this.view = new FloorView("canvas");
      document.getElementById("canvas").focus();
    },
    getBus() {
      bus.$on("changeText", val => {
        this.scene.updatedText(val);
      });
      bus.$on("changeFont", val => {
        this.scene.updatedFontSize(val);
      });
      bus.$on("changeLineWidth", val => {
        this.scene.updatedLineWidth(val);
      });
      bus.$on("changeBorderColor", val => {
        this.scene.updatedBorderColor(val);
      });
      bus.$on("changeFontColor", val => {
        this.scene.updatedFontColor(val);
      });
      bus.$on("itemWidth", val => {
        this.scene.updatedWidth(Number(val));
      });
      bus.$on("itemHeight", val => {
        this.scene.updatedHeight(Number(val));
      });
      bus.$on("itemPositon", (x, y) => {
        this.scene.updatedPosition(Number(x), Number(y));
      });
      bus.$on("changebackColor", val => {
        this.scene.updatedbackColor(val);
      });
      bus.$on("deleiteItem", () => {
        this.scene.deleiteItem();
      });
      bus.$on("changeAlignItem", val => {
        this.scene.changeAlignItem(val);
      });
      bus.$on("extractItem", () => {
        const map = {};
        console.log(this.hasTypeList);
        this.fParser.spaceList.forEach(t => {
          if (this.hasTypeList.indexOf(t.data.Type) > -1) {
            if (map[t.data.Type]) {
              map[t.data.Type]++;
            } else {
              map[t.data.Type] = 1;
            }
          }
        });
        const data = [];
        for (const key in map) {
          data.push({
            key: key,
            name: key,
            age: "",
            number: map[key],
            address: "提取"
          });
        }
        bus.$emit("exportItem", data);
      });
      bus.$on("saveMsgItem", () => {
        const Elements = this.scene.saveMsgItem();
        const data = {
          Elements,
          Name: this.appName, // 名称
          categoryId: this.urlMsg.categoryId,
          ProjectID: this.urlMsg.projectId, // 项目ID
          BuildingID: this.urlMsg.BuildingID, // 建筑ID
          FloorID: this.urlMsg.FloorID // 楼层id
        };
        Message({
          message: "保存中，切勿关闭窗口！",
          type: "warning"
        });
        saveGroup(data)
          .then(res => {
            Message.close();
            this.graphId = res.Data;
          })
          .catch(err => {
            Message({
              message: "保存失败！",
              type: "error"
            });
          });
      });
      bus.$on("exportByKey", val => {
        const list = this.fParser.spaceList
          .map(t => {
            if (t.data.Type == val.key) {
              if (!t.isExtracted) {
                t.isExtracted = true;
                return {
                  ID: uuid(),
                  Name: val.name,
                  GraphElementType: val.properties.Type,
                  GraphElementId: "273d633cc5c54a4882794b34843d1a00",
                  AttachObjectIds: [],
                  Pos: { x: t.x, y: t.y },
                  OutLine: t.pointArr[0],
                  SubType: "",
                  Properties: {
                    StrokeColor: "#3d73c0",
                    FillColor: "#72f5f980",
                    font: 0,
                    color: "",
                    TextPos: { X: 0, Y: 0 }
                  },
                  Num: 1
                };
              }
            }
          })
          .filter(item => item);
        const parserData = new STopologyParser(null);
        parserData.parseData({ Nodes: list });
        parserData.zoneLegendList.forEach(t => {
          this.scene.addItem(t);
          this.scene.Nodes.push(t);
        });
      });
      // 设备图例样式对象
      bus.$on("setLenged", obj => {
        this.scene.setlegend = obj;
      });
      //  修改图片url
      bus.$on("upadataImageUrl", val => {
        this.scene.upadataImageUrl(val);
      });
      // 改变边框样式
      bus.$on("changeBorder", val => {
        this.scene.upadataBorder(val);
      });
      // 改变图例名称
      bus.$on("changeLengedName", val => {
        this.scene.upadataLengedName(val);
      });
      // 改变图例名称
      bus.$on("changeImageNum", val => {
        this.scene.upadatImageNum(val);
      });
      // 修改填充色
      bus.$on("changefillColor", val => {
        this.scene.upadatfillColor(val);
      });
      // 修改当前得状态是否为编辑状态
      bus.$on("OpenEditStatus", () => {
        ` `; // 获取焦点item (必须选中且仅选中一个)
        if (
          this.chiceItemList &&
          this.chiceItemList.length &&
          this.chiceItemList.length == 1
        ) {
          if (this.scene.grabItem) {
            this.view.tryDbclick();
          } else {
            this.scene.grabItem = this.chiceItemList[0];
            this.view.tryDbclick();
          }
        }
      });
      //修改图例说明
      bus.$on("changeitemExplain", val => {
        this.scene.upadatitemExplain(val);
      });
      //发布图
      bus.$on("publishGraph", val => {
        publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
          if (res.Result == "success") {
            this.$message.success(res.Message);
          } else {
            this.$message.error(res.Message);
          }
        });
      });
      //创建区域是否点选
      bus.$on("changeDrawType", val => {
        this.scene.isSelecting = val == "select";
      }),
        //发布图
        bus.$on("publishMap", () => {
          if (this.graphId == "") {
            this.$message.error("请先保存");
            return false;
          }
          this.publishBtn();
        });
      /**
       * @name changeScale缩放底图
       * @param { Number } zoom 缩放比例
       *
       */
      // TODO: changeScale缩放底图
      bus.$on("changeScale", zoom => {
        const { scale } = this.view;
        this.changeScaleByClick = true;
        this.view.scaleByPoint(
          zoom,
          this.canvasWidth / 2,
          this.canvasHeight / 2
        );
        this.changeScaleByClick = false;
        setTimeout(() => {}, 100);
      });
      // 更改图例数据工程化数据
      bus.$on("changeAttachObjectIds", arr => {
        this.scene.upadatAttachObjectIds(arr);
      });
      // redo
      bus.$on('changeRedo',()=>{
        this.scene.redo()
      })

      // uodo/
      bus.$on('changeUndo',()=>{
        this.scene.undo()
      })
    },
    // 读取数据
    readGroup() {
      const data = {
        categoryId: this.urlMsg.categoryId,
        projectId: this.urlMsg.projectId,
        BuildingID: this.urlMsg.BuildingID, // 建筑ID
        FloorID: this.urlMsg.FloorID // 楼层id
      };
      return readGroup(data);
    },
    //发布
    publishBtn() {
      console.log(this.graphId);
      const loadings = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const data = {
        BuildingID: this.urlMsg.BuildingID,
        CategoryID: this.urlMsg.categoryId,
        FloorID: this.urlMsg.FloorID,
        GraphId: this.graphId,
        ProjectID: this.urlMsg.projectId,
        PubUser: ""
      };
      publishGraph(data).then(res => {
        loadings.close();
        if (res.Result == "success") {
          this.$message.success("发布成功");
          setTimeout(() => {
            const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
            const url =
              window.location.origin +
              "/wandaEditer/drafts?" +
              encodeURIComponent(data);
            window.open(url, true);
          }, 1000);
        } else {
          this.$message.error(res.Message);
        }
      });
    },
    // 获取typeid
    getTypeId() {
      const data = {
        categoryId: this.urlMsg.categoryId
      };
      queryTypeGraph(data).then(res => {
        this.hasTypeList = res.Data.map(t => Number(t));
      });
    }
  },
  watch: {
    cmdType: {
      handler(cmd) {
        if (cmd == null || cmd == "") {
          cmd = "choice";
        }
        this.scene.setCmd = cmd;
      },
      deep: true
    },
    "scene.cmd": {
      handler(cmd) {
        this.$emit("setCmdType", cmd);
      },
      deep: true
    },
    // 监听scale的变化
    "view.scale": {
      handler(scale) {
        // 滚轮触发的缩放
        if (!this.changeScaleByClick) {
          bus.$emit("mouseScale", scale / this.initScale);
        }
      }
    }
  },
  created() {
    const href = window.location.href;
    // 路由
    // const route = href.split("?")[0];
    // 参数处理
    let params = href.split("?")[1];
    if (!params) {
      // 参数有问题
      return false;
    }
    params = decodeURIComponent(params);
    // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
    const paramsArr = params.split("&");
    console.log("paramsArr", paramsArr);
    const obj = {};
    paramsArr.map(item => {
      const arr = item.split("=");
      obj[arr[0]] = arr[1];
    });
    this.urlMsg = obj;
  }
};
</script>
<style lang="less" scoped>
#baseEditer {
  background: #f7f9fa;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // position: relative;
  #fengMap {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: -1;
  }
  .canvas-container {
    width: 100%;
    height: 100%;
  }
}
</style>