feat: 1

src/api/setting-resource.ts

@@ -26,6 +26,8 @@ export const settingResourceTypeDesc = {
 export type SettingResource = {
   id?: string;
   resource: string;
+  sys?: boolean
+  scale?: number,
   backType: SettingResourceType;
   name: string;
 };
@@ -36,14 +38,18 @@ export const settingResources = ref<SettingResources>([]);
 
 export const fetchSettingResources = async () => {
   settingResources.value = [
-    { name: "无", backType: SettingResourceType.icon, resource: "icon-without" },
-    {
-      name: "蓝天白云",
-      backType: SettingResourceType.envImage,
-      resource: (await import("../views/setting/images/pic_ltby@2x.png"))
-        .default,
-    }
+    { sys: true, name: "无", backType: SettingResourceType.icon, resource: "icon-without" },
+    { sys: true, name: '蓝天白云', backType: SettingResourceType.envImage, resource: "/env-img/pic_ltby@2x.png", },
+    { sys: true, name: '乌云密布', backType: SettingResourceType.envImage, resource: "/env-img/pic_wymb@2x.png",},
+    { sys: true, name: '夜空', backType: SettingResourceType.envImage, resource: "/env-img/pic_yk@2x.png", },
+    { sys: true, name: '草地', backType: SettingResourceType.envImage, resource: "/env-img/pic_cd@2x.png", },
+    { sys: true, name: '道路', backType: SettingResourceType.envImage, resource: "/env-img/pic_dl@2x.png", },
+    { sys: true, name: '傍晚', backType: SettingResourceType.envImage, resource: "/env-img/pic_bw@2x.png", },
+    { sys: true, name: '灰色', backType: SettingResourceType.color, resource: '#333333', },
+    { sys: true, name: '黑色', backType: SettingResourceType.color, resource: '#000000', },
+    { sys: true, name: '白色', backType: SettingResourceType.color, resource: '#ffffff', },
   ];
+
   const data = await axios.get<SettingResources>(GET_SETTING_RESOURCES, {
     params: { caseId: params.caseId },
   });

src/api/setting.ts

@@ -11,6 +11,7 @@ type ServeSetting = {
   back?: string;
   backType?: SettingResourceType;
   mapOpen?: boolean;
+  scale?: number
   openCompass?: boolean
   mapType?: string
 };
@@ -22,6 +23,7 @@ export type Setting = {
     target: SceneLocalPos;
   };
   cover: string;
+  scale?: number
   back: string;
   openCompass: boolean
   backType: SettingResourceType;

src/assets/style/fire.less

@@ -1,3 +1,5 @@
+
+
 .ant-modal-root {
   @import 'ant-design-vue/dist/antd.less';
   @primary-color: #D8000A;

src/sdk/association.ts

@@ -436,8 +436,7 @@ export const setupAssociation = (mountEl: HTMLDivElement) => {
 }
 
 
-export const setBackdrop = (back: string, type: SettingResourceType) => {
-  console.error('????')
+export const setBackdrop = (back: string, type: SettingResourceType, scale?: number) => {
   ;(document.querySelector('#scene-map') as HTMLDivElement)!.style.display =  'none';
   if (type === SettingResourceType.map) {
     if (!caseProject.value!.tmProject?.latlng) {
@@ -451,9 +450,9 @@ export const setBackdrop = (back: string, type: SettingResourceType) => {
     // 'satellite' | 'standard'
 
   } else if (type!== SettingResourceType.icon) {
-    setting.value?.back && sdk.setBackdrop(back, type)
+    setting.value?.back && sdk.setBackdrop(back, type, scale || 1)
   } else {
-    sdk.setBackdrop('none', type)
+    sdk.setBackdrop('none', type, 1)
   }
 }
 

src/sdk/sdk.ts

@@ -105,7 +105,7 @@ export type StartMeasure<T extends StoreMeasure['type']> = Measure<T> & {
 export interface SDK {
   layout: HTMLDivElement,
   sceneBus: Emitter<{ 'cameraChange':  SceneLocalPos }>
-  setBackdrop: (drop: string, type: SettingResourceType) => void
+  setBackdrop: (drop: string, type: SettingResourceType, scale: number) => void
   compassVisibility: (visibility: boolean) => void
   addModel: (props: AddModelProps) => SceneModel
   enableMap(dom: HTMLDivElement, latlng: number[]): void

src/views/setting/index.vue

@@ -14,7 +14,7 @@
         <ui-icon
           ctrl
           :type="setting?.openCompass ? 'eye-s' : 'eye-n'"
-          @click="changeBack(setting!.back, setting!.backType, !setting!.openCompass, setting!.mapOpen, setting!.mapType)"
+          @click="changeBack(setting!.back, setting!.backType, !setting!.openCompass, setting!.mapOpen, setting!.mapType, setting!.scale)"
         />
       </template>
     </ui-group>
@@ -24,7 +24,7 @@
         <ui-icon
           ctrl
           :type="setting?.mapOpen ? 'eye-s' : 'eye-n'"
-          @click="changeBack(setting!.back, setting!.backType, setting!.openCompass, !setting!.mapOpen, setting!.mapType)"
+          @click="changeBack(setting!.back, setting!.backType, setting!.openCompass, !setting!.mapOpen, setting!.mapType, setting!.scale)"
         />
       </template>
       <ui-group-option v-if="setting?.mapOpen">
@@ -36,7 +36,7 @@
             { label: '矢量地图', value: 'standard' },
           ]"
           :modelValue="setting!.mapType"
-          @update:modelValue="(e: string )=> changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, e)"
+          @update:modelValue="(e: string )=> changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, e, setting!.scale)"
         />
       </ui-group-option>
     </ui-group>
@@ -49,7 +49,7 @@
             :key="back.resource"
             class="back-item"
             :class="{ [back.backType]: true, active: setting!.back === back.resource }"
-            @click="setting!.back !== back.resource && changeBack(back.resource, back.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType)"
+            @click="setting!.back !== back.resource && changeBack(back.resource, back.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, setting!.scale)"
           >
             <img
               :src="back.resource"
@@ -67,6 +67,13 @@
                   settingResourceTypeDesc[back.backType] + "-") + back.name
               }}
             </p>
+            <ui-button
+              v-if="!back.sys"
+              type="primary"
+              class="del"
+              @click.stop="delBack(back)"
+              >删除</ui-button
+            >
           </div>
           <ui-input
             class="input"
@@ -128,6 +135,19 @@
       </div>
     </div>
   </div>
+
+  <Teleport to="#layout-app" v-if="setting?.backType === SettingResourceType.bottomImage">
+    <div class="slider-demo-block ant-modal-root">
+      <Slider
+        :value="setting!.scale || 1"
+        vertical
+        :min="0.1"
+        :step="0.1"
+        :max="3"
+        @update:value="(val: any) => changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, val)"
+      />
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
@@ -145,6 +165,7 @@ import { togetherCallback, getFileUrl, loadPack } from "@/utils";
 import { showRightPanoStack, showRightCtrlPanoStack } from "@/env";
 import { sdk, setBackdrop, setMap } from "@/sdk";
 import {
+  delSettingResource,
   fetchSettingResources,
   settingResources,
   settingResourceTypeDesc,
@@ -153,6 +174,7 @@ import { uploadFile } from "@/api";
 import { SettingResource, addSettingResource } from "@/api/setting-resource";
 import { SettingResourceType } from "@/api/setting-resource";
 import { Dialog } from "bill/index";
+import { Slider } from "ant-design-vue";
 
 fetchSettingResources();
 
@@ -181,26 +203,30 @@ const initType = setting.value!.backType;
 const initOpenCompass = setting.value!.openCompass;
 const initopenMap = setting.value!.mapOpen;
 const initmapType = setting.value!.mapType;
+const initScale = setting.value!.scale;
 let isFirst = true;
 const changeBack = (
   back: string,
   type: SettingResourceType,
   openCompass: boolean,
   openMap: boolean,
-  mapType: string
+  mapType: string,
+  scale: number = 1
 ) => {
   if (type === SettingResourceType.map && !caseProject.value!.tmProject?.latlng) {
     Dialog.alert("当前案件没绑定经纬度，无法开启地图功能");
     return;
   }
 
+  console.error("??", back);
   setting.value!.back = back;
   setting.value!.backType = type;
   setting.value!.openCompass = openCompass;
   setting.value!.mapOpen = openMap;
   setting.value!.mapType = mapType;
+  setting.value!.scale = scale;
 
-  setBackdrop(back, type);
+  setBackdrop(back, type, scale);
   setMap(openMap, mapType);
 
   (document.querySelector("#direction") as HTMLDivElement)!.style.display = openCompass
@@ -217,8 +243,9 @@ const changeBack = (
         setting.value!.openCompass = initOpenCompass;
         setting.value!.mapOpen = initopenMap;
         setting.value!.mapType = initmapType;
+        setting.value!.scale = initScale;
 
-        setBackdrop(initBack, initType);
+        setBackdrop(initBack, initType, initScale);
         setMap(initopenMap, initmapType);
         (document.querySelector(
           "#direction"
@@ -228,11 +255,55 @@ const changeBack = (
     });
     enterOld(async () => {
       isSave = true;
-
       await loadPack(updataSetting());
     });
   }
 };
+
+const delBack = (() => {
+  let isFirst = true;
+  let oldResources: SettingResource[];
+  let dels: SettingResource[] = [];
+  return (back: SettingResource) => {
+    if (setting.value?.back === back.resource) {
+      changeBack(
+        settingResources.value[0].resource,
+        settingResources.value[0].backType,
+        setting!.value.openCompass,
+        setting!.value.mapOpen,
+        setting!.value.mapType,
+        setting!.value.scale
+      );
+    }
+
+    if (isFirst) {
+      dels = [];
+      oldResources = [...settingResources.value];
+    }
+    const ndx = settingResources.value.indexOf(back);
+    if (~ndx) {
+      settingResources.value.splice(ndx, 1);
+      dels.push(back);
+    }
+
+    if (isFirst) {
+      let isSave = false;
+      isFirst = false;
+
+      enterEdit(() => {
+        if (!isSave) {
+          settingResources.value = oldResources;
+        }
+        isFirst = true;
+      });
+      enterOld(async () => {
+        isSave = true;
+        await loadPack(Promise.all(dels.map(delSettingResource)));
+      });
+    }
+  };
+})();
+
 const options = [
   {
     value: SettingResourceType.envImage,
@@ -245,14 +316,11 @@ const options = [
 ];
 const addTemp = ref<Omit<SettingResource, "id">>();
 const iconUpload = async (data: any) => {
-  console.log(data);
   addTemp.value = {
     resource: await uploadFile({ blob: data.file as any, url: "" }),
     name: "",
     backType: SettingResourceType.envImage,
   };
-
-  console.log(addTemp.value);
 };
 </script>
 
@@ -291,6 +359,7 @@ const iconUpload = async (data: any) => {
 }
 
 .back-item {
+  position: relative;
   > span,
   .iconfont,
   img {
@@ -304,6 +373,14 @@ const iconUpload = async (data: any) => {
     object-fit: cover;
   }
 
+  .del {
+    position: absolute;
+    top: 64px;
+    height: 24px;
+    left: 0;
+    right: 0;
+  }
+
   .iconfont {
     display: flex;
     align-items: center;
@@ -388,4 +465,15 @@ const iconUpload = async (data: any) => {
     background-color: rgba(255, 255, 255, 0.16);
   }
 }
+
+.slider-demo-block {
+  position: absolute;
+
+  right: calc(var(--editor-menu-right) + var(--editor-toolbox-width)) !important;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 20px;
+  z-index: 99;
+  height: 300px;
+}
 </style>