qjkankan_v1.1.1/packages/qjkankan-editor/src/Store/modules/hotspot.js

import Vue from "vue";
import { i18n } from "@/lang";
import { workHotSave } from "@/api";
import { $waiting } from "@/components/shared/loading";

import browser from "@/utils/browser";
import { deepClone, isSameObject } from "@/utils/other.js";
let vue = new Vue();
export default {
  namespaced: true,
  state() {
    return {
      hotspotList: [],
      currentHotsopts: [],
      hotspot: null,
      hotspotTypeList: {
        scene: "scene",
        image: "image",
        video: "video",
        audio: "audio",
        link: "hyperlink",
        textarea: "textarea",
        tag: null,
        imageText: "imageTextInfo",
        article: "articleInfo",
        pdf: "pdfInfo",
        phone: "phoneInfo",
      },
      hotspotIconTypeList: {
        system_icon: null,
        custom_image: "customIconInfo",
        serial_frame: "serialFrameInfo",
        personalized_tag: "personalizedTagInfo",
      },
      dataType: {
        customIconInfo: {
          // 热点图标类型为自定义图标时，图标的数据
          img: "",
        },
        serialFrameInfo: {
          // 热点图标类型为序列帧时，序列帧的数据
          img: "",
          frameNumber: 0, // 总帧数
          duration: 0, // 总播放时长（秒）
        },
        personalizedTagInfo: {
          // 热点图标类型为个性标签时，个性标签的数据
          isShowLine: true,
          lineDirection: "left-top",
          fillColor: "rgba(0, 0, 0, 0.5)",
          borderColor: "rgba(255, 255, 255, 0.8)",
          textColor: "rgba(255, 255, 255, 1)",
          textDirection: "left-right",
          isTextWrap: false,
          textNumPerLine: 10,
        },

        scene: null,
        hyperlink: "",
        textarea: "",
        image: [],
        audio: "",
        video: "",
        imageTextInfo: {
          // 热点类型为图文时，图文内容
          imageList: [],
          text: "",
          isApplyToAll: true,
          audio: {},
        },
        phoneInfo: {
          // 热点类型为电话时，对应数据
          phone: "",
        },
        pdfInfo: {
          // 热点类型为pdf时，对应数据
          name: "",
          url: "",
        },
        articleInfo: {
          html: "",
        },
      },
    };
  },
  getters: {
    hotspot: (state) => state.hotspot,
    currentHotsopts: (state, getters, rootState, rootGetters) => {
      state.currentHotsopts = state.hotspotList.filter((item) => item.navigationId == rootState.scene.currentScene.id || item.navigationId == rootState.scene.currentScene.sid);
      return state.currentHotsopts;
    },
    hotspotList: (state, getters, rootState, rootGetters) => {
      let hotspots = rootState.base.baseInfo.workHotList;
      if (hotspots.length && !state.hotspotList.length) {
        state.hotspotList = hotspots;
      }
      if (state.hotspotList.length) {
        state.hotspotList.forEach((item, index) => {
          if (item.content) {
            let hotSpotType = item.hotspotType;
            for (let key in state.hotspotTypeList) {
              let value = state.hotspotTypeList[key];
              if (key == hotSpotType && item.content[value]) {
                item[value] = item.content[value];
              } else if (value) {
                item[value] = state.dataType[value];
              }
            }

            let hotSpotIconType = item.hotspotIconType;
            for (let key in state.hotspotIconTypeList) {
              let value = state.hotspotIconTypeList[key];
              if (key == hotSpotIconType && item.content[value]) {
                item[value] = item.content[value];
              } else if (value) {
                item[value] = state.dataType[value];
              }
            }
          }
        });
      }

      return state.hotspotList;
    },
    // 1.3.0 新增层级后所有热点类型不同汇总显示的ICON
    hotspotIcon: (state) => {
      const category = state.hotspot && state.hotspot.hotspotIconType ? state.hotspot.hotspotIconType : "";
      switch (category) {
        case "system_icon":
          return {
            img: state.hotspot.img,
            type: "system_icon",
          };
        case "custom_image":
          return {
            ...state.hotspot.customIconInfo,
            type: "custom_image",
          };
        case "serial_frame":
          return {
            ...state.hotspot.serialFrameInfo,
            img: state.hotspot.serialFrameInfo.img,
            type: "serial_frame",
          };
        case "personalized_tag":
          return {
            ...state.hotspot.personalizedTagInfo,
            img: "",
            type: "personalized_tag",
          };
        default:
          return {
            img: "",
          };
      }
    },
    // currentScene: (state) => state.currentScene,
  },
  mutations: {
    SetHotspot(state, data) {
      state.hotspot = data;
      this.commit("BackupHotSpot", browser.CloneObject(data));
    },
    updateHotspot(state, payload) {
      if (payload.id) {
        // 编辑
        state.hotspotList.forEach((item, index) => {
          if (item.id == payload.id) {
            state.hotspotList[index] = payload;
          }
        });
        state.currentHotsopts.forEach((item, index) => {
          if (item.id == payload.id) {
            state.currentHotsopts[index] = payload;
          }
        });
      } else {
        //新增
        payload.id = "add_" + new Date().getTime();
        state.hotspotList.push(payload);
      }

    },
    processData(state, payload) {
      // state.hotspot.content = {};
      let list = state.hotspotList;
      list.forEach((item) => {
        if (!item.content) {
          item.content = {};
        }
        let hotSpotType = item.hotspotType;

        for (let key in state.hotspotTypeList) {
          let value = state.hotspotTypeList[key];
          if (key == hotSpotType) {
            if (value) {
              item.content[value] = item[value];
            }
          }
          delete item[value];
        }

        let hotSpotIconType = item.hotspotIconType;
        for (let key in state.hotspotIconTypeList) {
          let value = state.hotspotIconTypeList[key];
          if (key == hotSpotIconType) {
            if (value) {
              item.content[value] = item[value];
            }
          }
          delete item[value];
        }
      });
    },
  },
  actions: {
    save({ commit, state, rootState }, payload) {
      let list = deepClone(state.hotspotList);

      list.forEach((item) => {
        let current = rootState.base.sceneList.find((s_item) => s_item.sid && s_item.sid == item.navigationId);
        if (current) {
          item.navigationId = current.id;
        }
        if (item.hotspotType == "scene" && typeof item.scene.id != "number" && item.scene.id.indexOf("add") != -1) {
          //场景类型 如果场景是新增，则scene的id也需要从服务端取值
          let current = rootState.base.sceneList.find((s_item) => s_item.sid && s_item.sid == item.scene.sid);
          if (current) {
            item.scene.id = current.id;
          }
        }
        if (typeof item.id != "number" && item.id.indexOf("add") != -1) {
          delete item.id;
        }
        if (!item.content) {
          item.content = {};
        }
        let hotSpotType = item.hotspotType;

        for (let key in state.hotspotTypeList) {
          let value = state.hotspotTypeList[key];
          if (key == hotSpotType) {
            if (value) {
              item.content[value] = item[value];
            }
          }
          delete item[value];
        }
        let hotSpotIconType = item.hotspotIconType;
        for (let key in state.hotspotIconTypeList) {
          let value = state.hotspotIconTypeList[key];
          if (key == hotSpotIconType) {
            if (value) {
              item.content[value] = item[value];
            }
          }
          delete item[value];
        }
      });
      if (rootState.base.sceneList.length != list.length) {
        //如果场景不存在，则对应的热点不保存
        list = list.filter((item) => {
          let hasTag = false;
          rootState.base.sceneList.forEach((s_item) => {
            if (s_item.id == item.navigationId) {
              hasTag = true;
            }
          });
          return hasTag;
        });
      }
      // $waiting.hide();
      // return;
      let data = { list, workId: rootState.base.baseInfo.workId };

      return new Promise((resolve, reject) => {
        workHotSave(
          data,
          (res) => {
            // vue.$msg.success(i18n.t("gather.save_done"));
            $waiting.hide();
            this.commit("base/updateBaseInfo", {
              workHotList: state.hotspotList,
            });
            resolve(res);
          },
          (rej) => {
            reject(rej);
          }
        );
      });
    },
  },
};