|
@@ -18,6 +18,7 @@
|
|
|
<el-button @click="handleSave" type="primary"><img :src="SaveIcon">保存为布局</el-button>
|
|
<el-button @click="handleSave" type="primary"><img :src="SaveIcon">保存为布局</el-button>
|
|
|
</section>
|
|
</section>
|
|
|
</header>
|
|
</header>
|
|
|
|
|
+
|
|
|
<main class="min-map__main">
|
|
<main class="min-map__main">
|
|
|
<section class="camera-list">
|
|
<section class="camera-list">
|
|
|
<header class="camera-list__title">相机列表:</header>
|
|
<header class="camera-list__title">相机列表:</header>
|
|
@@ -40,6 +41,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</main>
|
|
</main>
|
|
|
</section>
|
|
</section>
|
|
|
|
|
+
|
|
|
<section class="workshop-map" ref="drawContainer">
|
|
<section class="workshop-map" ref="drawContainer">
|
|
|
<el-upload v-if="!hasBg" :action="actionUrl" :show-file-list="false" :before-upload="handleBeforeUpload"
|
|
<el-upload v-if="!hasBg" :action="actionUrl" :show-file-list="false" :before-upload="handleBeforeUpload"
|
|
|
:on-success="handleAvatarSuccess" :with-credentials="true" name="file" :headers="getHeaders()">
|
|
:on-success="handleAvatarSuccess" :with-credentials="true" name="file" :headers="getHeaders()">
|
|
@@ -69,26 +71,32 @@ import { getHeaders } from '@/utils/http/axios';
|
|
|
import router from '@/router';
|
|
import router from '@/router';
|
|
|
import { ShopMapCamera } from '@/types/scene/type'
|
|
import { ShopMapCamera } from '@/types/scene/type'
|
|
|
import { ViewType } from '@/types/page-config/type';
|
|
import { ViewType } from '@/types/page-config/type';
|
|
|
|
|
+import { openMessageBox } from '@/views/system-config/business-scene/components/MessageBox';
|
|
|
|
|
+
|
|
|
const cameraStatus = useCameraStatus();
|
|
const cameraStatus = useCameraStatus();
|
|
|
const { openIntervalNew, closeInterval } = cameraStatus;
|
|
const { openIntervalNew, closeInterval } = cameraStatus;
|
|
|
-import { openMessageBox } from '@/views/system-config/business-scene/components/MessageBox'
|
|
|
|
|
|
|
+
|
|
|
const drawContainer = ref<HTMLDivElement>();
|
|
const drawContainer = ref<HTMLDivElement>();
|
|
|
const konvaMap = ref();
|
|
const konvaMap = ref();
|
|
|
const caremaActiveId = ref<string>('');
|
|
const caremaActiveId = ref<string>('');
|
|
|
const camerasAdded = ref<string[]>([]);
|
|
const camerasAdded = ref<string[]>([]);
|
|
|
const imgUrlBg = ref<string>('');
|
|
const imgUrlBg = ref<string>('');
|
|
|
const searchKey = ref('');
|
|
const searchKey = ref('');
|
|
|
|
|
+
|
|
|
// 是否已有背景图
|
|
// 是否已有背景图
|
|
|
const hasBg = ref(false);
|
|
const hasBg = ref(false);
|
|
|
//是否修改
|
|
//是否修改
|
|
|
const isChange = ref<boolean>(false);
|
|
const isChange = ref<boolean>(false);
|
|
|
//单个相机时是否上传图片
|
|
//单个相机时是否上传图片
|
|
|
const isUploadBg = ref<boolean>(true);
|
|
const isUploadBg = ref<boolean>(true);
|
|
|
|
|
+
|
|
|
const isMap = ref(false);
|
|
const isMap = ref(false);
|
|
|
const { urlPrefix } = useGlobSetting();
|
|
const { urlPrefix } = useGlobSetting();
|
|
|
|
|
+
|
|
|
const actionUrl = computed(() => {
|
|
const actionUrl = computed(() => {
|
|
|
return urlJoin(urlPrefix!, `/admin/minimap/uploadPicture`);
|
|
return urlJoin(urlPrefix!, `/admin/minimap/uploadPicture`);
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
function updataState(data, updateData) {
|
|
function updataState(data, updateData) {
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
const camera = data[i];
|
|
const camera = data[i];
|
|
@@ -99,10 +107,12 @@ function updataState(data, updateData) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const refreshUploadBg = () => {
|
|
const refreshUploadBg = () => {
|
|
|
konvaMap.value.resetMap();
|
|
konvaMap.value.resetMap();
|
|
|
hasBg.value = false;
|
|
hasBg.value = false;
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const handleBeforeUpload = () => {
|
|
const handleBeforeUpload = () => {
|
|
|
if (!selectedShopId.value) {
|
|
if (!selectedShopId.value) {
|
|
|
ElMessage.error({
|
|
ElMessage.error({
|
|
@@ -111,19 +121,23 @@ const handleBeforeUpload = () => {
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const sendCameras = (camerasList) => {
|
|
const sendCameras = (camerasList) => {
|
|
|
camerasAdded.value = camerasList.map((item) => {
|
|
camerasAdded.value = camerasList.map((item) => {
|
|
|
return item.id;
|
|
return item.id;
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
/** 判断相机是否已经添加 */
|
|
/** 判断相机是否已经添加 */
|
|
|
const isAddedCamera = (cameraId: string) => {
|
|
const isAddedCamera = (cameraId: string) => {
|
|
|
const index = camerasAdded.value.findIndex((item) => item === cameraId);
|
|
const index = camerasAdded.value.findIndex((item) => item === cameraId);
|
|
|
return index >= 0;
|
|
return index >= 0;
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const changeDefault = (defaultCameraId) => {
|
|
const changeDefault = (defaultCameraId) => {
|
|
|
caremaActiveId.value = defaultCameraId;
|
|
caremaActiveId.value = defaultCameraId;
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const isKnovaDestroy = ref<boolean>(false) //重新上传图片之后将knova销毁
|
|
const isKnovaDestroy = ref<boolean>(false) //重新上传图片之后将knova销毁
|
|
|
const handleAvatarSuccess = (e) => {
|
|
const handleAvatarSuccess = (e) => {
|
|
|
isKnovaDestroy.value = true;
|
|
isKnovaDestroy.value = true;
|
|
@@ -135,10 +149,12 @@ const handleAvatarSuccess = (e) => {
|
|
|
});
|
|
});
|
|
|
})
|
|
})
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const getMapLayoutAPIMap = {
|
|
const getMapLayoutAPIMap = {
|
|
|
[ViewType.minimap_PC]: getWorkshopMiniMapLayoutPCApi,
|
|
[ViewType.minimap_PC]: getWorkshopMiniMapLayoutPCApi,
|
|
|
[ViewType.minimap_phone]: getWorkshopMiniMapLayoutMobileApi,
|
|
[ViewType.minimap_phone]: getWorkshopMiniMapLayoutMobileApi,
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const getMapLayout = async (id: number) => {
|
|
const getMapLayout = async (id: number) => {
|
|
|
const api = getMapLayoutAPIMap[viewType.value];
|
|
const api = getMapLayoutAPIMap[viewType.value];
|
|
|
const res = await api(id);
|
|
const res = await api(id);
|
|
@@ -146,6 +162,7 @@ const getMapLayout = async (id: number) => {
|
|
|
const layoutJSON = JSON.parse(res.layout);
|
|
const layoutJSON = JSON.parse(res.layout);
|
|
|
return layoutJSON;
|
|
return layoutJSON;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const getShopContent = async (id: number) => {
|
|
const getShopContent = async (id: number) => {
|
|
|
await getShowCameras(id);
|
|
await getShowCameras(id);
|
|
|
const idList = filterShopCameraList.value.map((item) => item.id);
|
|
const idList = filterShopCameraList.value.map((item) => item.id);
|
|
@@ -166,11 +183,13 @@ const getShopContent = async (id: number) => {
|
|
|
});
|
|
});
|
|
|
})
|
|
})
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const selectedShopId = ref();
|
|
const selectedShopId = ref();
|
|
|
const selectedName = ref();
|
|
const selectedName = ref();
|
|
|
const viewType = ref();
|
|
const viewType = ref();
|
|
|
const shopCameraList = ref<ShopMapCamera[]>([]);
|
|
const shopCameraList = ref<ShopMapCamera[]>([]);
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
|
|
+
|
|
|
const getShowCameras = async (id: number) => {
|
|
const getShowCameras = async (id: number) => {
|
|
|
const res = await getCamerasByWorkShopId({ workshopId: id });
|
|
const res = await getCamerasByWorkShopId({ workshopId: id });
|
|
|
if (!res) return;
|
|
if (!res) return;
|
|
@@ -181,10 +200,12 @@ const getShowCameras = async (id: number) => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
const mapConfig = reactive({
|
|
const mapConfig = reactive({
|
|
|
width: 0,
|
|
width: 0,
|
|
|
height: 0
|
|
height: 0
|
|
|
-})
|
|
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
|
selectedShopId.value = Number(route.query.workshopId);
|
|
selectedShopId.value = Number(route.query.workshopId);
|
|
|
selectedName.value = route.query.workshopName;
|
|
selectedName.value = route.query.workshopName;
|