|
@@ -1,5 +1,5 @@
|
|
|
import { Row, showToast } from "vant";
|
|
|
-import { defineComponent, onMounted, reactive } from "vue";
|
|
|
+import { defineComponent, onMounted, reactive, nextTick } from "vue";
|
|
|
import state from "/src/state";
|
|
|
import request from "/src/utils/request";
|
|
|
import { getQuery } from "/src/utils/queryString";
|
|
@@ -8,8 +8,10 @@ import { Button, ButtonGroup, Icon, Switch, Tooltip } from "@varlet/ui";
|
|
|
import "@varlet/ui/es/tooltip/style";
|
|
|
import "@varlet/ui/es/button-group/style";
|
|
|
import "@varlet/ui/es/switch/style";
|
|
|
+import { storeData } from "/src/store";
|
|
|
|
|
|
let extStyleConfigJson: any = {};
|
|
|
+const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
export const moveData = reactive({
|
|
|
/** 开启移动 */
|
|
|
open: false,
|
|
@@ -123,6 +125,7 @@ function getBox(ele: SVGAElement) {
|
|
|
export const filterMoveData = async () => {
|
|
|
const examSongId = state.examSongId;
|
|
|
if (examSongId) {
|
|
|
+ const fontSize = (window as any).fontSize
|
|
|
const list = moveData.modelList
|
|
|
.filter((n) => n.isMove)
|
|
|
.map((n) => {
|
|
@@ -132,6 +135,8 @@ export const filterMoveData = async () => {
|
|
|
isDelete: n.isDelete,
|
|
|
x: n.x,
|
|
|
y: n.y,
|
|
|
+ xRem: Math.abs(n.x / fontSize),
|
|
|
+ yRem: Math.abs(n.y / fontSize),
|
|
|
zoom: n.zoom,
|
|
|
w: moveData.sw,
|
|
|
type: n.type,
|
|
@@ -240,6 +245,7 @@ const renderSvgItem = (item: any) => {
|
|
|
|
|
|
/** 设置元素位置 */
|
|
|
function setModelPostion(item: any, x: number, y: number) {
|
|
|
+ // console.log(item)
|
|
|
if (item) {
|
|
|
const g = document.querySelector("#" + item.id)!;
|
|
|
const el: HTMLElement = document.querySelector(`[data-id=${item.id}]`)!;
|
|
@@ -247,8 +253,14 @@ function setModelPostion(item: any, x: number, y: number) {
|
|
|
g && g.removeAttribute("transform");
|
|
|
el && (el.style.transform = "");
|
|
|
} else {
|
|
|
- g && g.setAttribute("transform", `translate(${x / moveData.zoom}, ${y / moveData.zoom})`);
|
|
|
- el && (el.style.transform = `translate(${x}px, ${y}px)`);
|
|
|
+ /** 如果是app内嵌打开,需要通过rem转换 */
|
|
|
+ let tsX = x, tsY = y;
|
|
|
+ if (storeData.isApp && (item.xRem || item.yRem)) {
|
|
|
+ tsX = item.xRem * clientWidth/10
|
|
|
+ tsY = item.yRem * clientWidth/10
|
|
|
+ }
|
|
|
+ g && g.setAttribute("transform", `translate(${tsX / moveData.zoom}, ${tsY / moveData.zoom})`);
|
|
|
+ el && (el.style.transform = `translate(${tsX}px, ${tsY}px)`);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -394,19 +406,21 @@ export const renderForMoveData = () => {
|
|
|
}
|
|
|
const list = extStyleConfigJson?.[moveData.partIndex];
|
|
|
if (list && Array.isArray(list)) {
|
|
|
- console.log("🚀 ~ list", list);
|
|
|
- list.forEach((item: any) => {
|
|
|
- const index = moveData.modelList.findIndex((n: any) => n.id === item.id);
|
|
|
- if (index > -1) {
|
|
|
- moveData.modelList[index] = {
|
|
|
- ...moveData.modelList[index],
|
|
|
- ...item
|
|
|
- };
|
|
|
- renderSvgItem(moveData.modelList[index]);
|
|
|
- if (item.type === "vf-lineGroup") {
|
|
|
- renderLineGroup(moveData.modelList[index]);
|
|
|
+ nextTick(() => {
|
|
|
+ console.log("🚀 ~ list", list);
|
|
|
+ list.forEach((item: any) => {
|
|
|
+ const index = moveData.modelList.findIndex((n: any) => n.id === item.id);
|
|
|
+ if (index > -1) {
|
|
|
+ moveData.modelList[index] = {
|
|
|
+ ...moveData.modelList[index],
|
|
|
+ ...item
|
|
|
+ };
|
|
|
+ renderSvgItem(moveData.modelList[index]);
|
|
|
+ if (item.type === "vf-lineGroup") {
|
|
|
+ renderLineGroup(moveData.modelList[index]);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
};
|