|
@@ -6,6 +6,7 @@
|
|
|
<v-group
|
|
<v-group
|
|
|
v-for="camera in cameras"
|
|
v-for="camera in cameras"
|
|
|
:key="camera.id"
|
|
:key="camera.id"
|
|
|
|
|
+ :id="camera.id"
|
|
|
:config="camera.groupConfig"
|
|
:config="camera.groupConfig"
|
|
|
@click="handleCameraClick(camera)"
|
|
@click="handleCameraClick(camera)"
|
|
|
@mouseover="(e) => handleMouseOver(e)"
|
|
@mouseover="(e) => handleMouseOver(e)"
|
|
@@ -42,6 +43,7 @@
|
|
|
import cameraImgSrc from '@/assets/camera/cameraImg.png';
|
|
import cameraImgSrc from '@/assets/camera/cameraImg.png';
|
|
|
import favoritesImgSrc from '@/assets/camera/favorites.png';
|
|
import favoritesImgSrc from '@/assets/camera/favorites.png';
|
|
|
import { TipPositionEnum, camerasGroupType } from '../type';
|
|
import { TipPositionEnum, camerasGroupType } from '../type';
|
|
|
|
|
+ import { cloneDeep } from 'lodash-es';
|
|
|
|
|
|
|
|
const globSetting = useGlobSetting();
|
|
const globSetting = useGlobSetting();
|
|
|
|
|
|
|
@@ -91,6 +93,7 @@
|
|
|
backgroundSize: 'cover',
|
|
backgroundSize: 'cover',
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ //待修改
|
|
|
const transformerConfig = ref({ keepRatio: true, rotateAnchorOffset: 30 });
|
|
const transformerConfig = ref({ keepRatio: true, rotateAnchorOffset: 30 });
|
|
|
|
|
|
|
|
//背景大小变换
|
|
//背景大小变换
|
|
@@ -235,6 +238,12 @@
|
|
|
item.isDefault = false;
|
|
item.isDefault = false;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+ const transformerNode = transformer.value.getNode();
|
|
|
|
|
+ const stage = transformerNode.getStage();
|
|
|
|
|
+ transformerNode.nodes([]);
|
|
|
|
|
+ const cameraNode = stage.findOne('#' + defaultCameraId.value);
|
|
|
|
|
+ // 将变换器附加到点击的相机
|
|
|
|
|
+ transformerNode.nodes([cameraNode]);
|
|
|
defaultShow.value = false;
|
|
defaultShow.value = false;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -273,22 +282,22 @@
|
|
|
const saveLayout = () => {
|
|
const saveLayout = () => {
|
|
|
const stage = transformer.value.getNode().getStage();
|
|
const stage = transformer.value.getNode().getStage();
|
|
|
const groups = stage.find('.group');
|
|
const groups = stage.find('.group');
|
|
|
- const camerasList = groups.map((item, index) => {
|
|
|
|
|
- cameras.value[index].groupConfig.x = Math.round(item.attrs.x | 0);
|
|
|
|
|
- cameras.value[index].groupConfig.y = Math.round(item.attrs.y | 0);
|
|
|
|
|
- cameras.value[index].groupConfig.rotation = Number((item.attrs.rotation | 0).toFixed(2));
|
|
|
|
|
- cameras.value[index].groupConfig.scaleX = Number((item.attrs.scaleX | 1).toFixed(1));
|
|
|
|
|
- cameras.value[index].groupConfig.scaleY = Number((item.attrs.scaleY | 1).toFixed(1));
|
|
|
|
|
- cameras.value[index].config.url = cameraImgSrc;
|
|
|
|
|
- return cameras.value[index];
|
|
|
|
|
|
|
+ const tempList = cloneDeep(cameras.value);
|
|
|
|
|
+ const camerasLists = tempList.map((item, index) => {
|
|
|
|
|
+ item.groupConfig.x = groups[index].attrs.x;
|
|
|
|
|
+ item.groupConfig.y = groups[index].attrs.y;
|
|
|
|
|
+ item.groupConfig.rotation = groups[index].attrs.rotation || 0;
|
|
|
|
|
+ item.groupConfig.scaleX = groups[index].attrs.scaleX || 1;
|
|
|
|
|
+ item.groupConfig.scaleY = groups[index].attrs.scaleY || 1;
|
|
|
|
|
+ item.config.url = cameraImgSrc;
|
|
|
|
|
+ return item;
|
|
|
});
|
|
});
|
|
|
- cameras.value = camerasList;
|
|
|
|
|
const layout = {
|
|
const layout = {
|
|
|
stageConfig: stageConfig.value,
|
|
stageConfig: stageConfig.value,
|
|
|
bgConfig: bgConfig.value,
|
|
bgConfig: bgConfig.value,
|
|
|
bgImgUrl: bgImgUrl.value,
|
|
bgImgUrl: bgImgUrl.value,
|
|
|
defaultCameraId: defaultCameraId.value,
|
|
defaultCameraId: defaultCameraId.value,
|
|
|
- cameraList: cameras.value,
|
|
|
|
|
|
|
+ cameraList: camerasLists,
|
|
|
};
|
|
};
|
|
|
return JSON.stringify(layout);
|
|
return JSON.stringify(layout);
|
|
|
};
|
|
};
|