feat: add change theme

src/app/map/App.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div>地图页面</div> -->
   <div class="tabbar">
-    <div class="nav">
+    <!-- <div class="nav">
       <el-button-group class="ml-4">
         <el-button
           :type="currentType(0) ? 'primary' : 'default'"
@@ -14,10 +14,26 @@
           >卡片</el-button
         >
       </el-button-group>
+    </div> -->
+    <div class="left">
+      <el-form-item label="" class="filter">
+        <com-company
+          v-model="(state.deptId as any as string)"
+          :id="state.caseId"
+          hideAll
+        />
+      </el-form-item>
+    </div>
+    <div class="right">
+      <el-select style="width: 100px" v-model:modelValue="currentMaptype">
+        <el-option key="2d" label="矢量图" :value="0" />
+        <el-option key="state" label="卫星图" :value="1" />
+      </el-select>
+      <el-select style="width: 100px" v-model:modelValue="current">
+        <el-option key="map" label="地图" :value="0" />
+        <el-option key="card" label="卡片" :value="1" />
+      </el-select>
     </div>
-    <el-form-item label="所属架构：" class="filter">
-      <com-company v-model="state.deptId" :id="state.caseId" hideAll />
-    </el-form-item>
   </div>
   <div ref="mapEl" class="map-container" v-show="currentType(0)"></div>
   <div class="card-container" v-show="currentType(1)">
@@ -56,6 +72,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, computed, onBeforeMount } from "vue";
+import { getSysSetting } from "@/request";
 // import { useRouteQuery } from "@vueuse/router";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import axios from "axios";
@@ -68,15 +85,24 @@ import linkIco from "@/assets/image/fire.ico";
 import { useUrlSearchParams } from "@vueuse/core";
 import emptyBG from "@/assets/image/empty__empty.png";
 
+import { changeThemeColor } from "./theme";
 const params = useUrlSearchParams("history");
 console.log("params", params.deptId);
+// const el = ref(document.documentElement);
+
+// const primaryColor = useCssVar("--el-color-primary", document.documentElement);
+// primaryColor.value = "#00C8AF";
+// const primaryColor = useCssVar("--el-color-primary", el, {
+//   initialValue: "#00C8AF",
+// });
 
 const current = ref(0);
+const currentMaptype = ref(0);
 const list = ref<any>([]);
 
 const state = reactive({
   deptId: params.deptId || "",
-  // caseId: params.caseId || "",
+  caseId: "",
 });
 
 const link = document.querySelector<HTMLLinkElement>("#app-icon")!;
@@ -111,19 +137,24 @@ const request = axios.create({
 const mapEl = ref<HTMLDivElement>();
 let AMap, map;
 
-const queryURL = `${import.meta.env.VITE_SEVER_URL}/fusion/web/fireProject/queryProject`
+const queryURL = `${
+  import.meta.env.VITE_SEVER_URL
+}/fusion/web/fireProject/queryProject`;
 
+axios.get(getSysSetting).then((data) => {
+  const { themeColour } = data.data;
+  const setColor = themeColour ? `#${themeColour}` : "#00C8AF";
+  console.log("setColor", setColor);
+  changeThemeColor(setColor);
+});
 // debugger;
 const getDataQuest = () => {
   return new Promise(async (reslove, reject) => {
-    const res = await request.post(
-      queryURL,
-      {
-        pageNum: 1,
-        pageSize: 10000,
-        deptId: state.deptId,
-      }
-    );
+    const res = await request.post(queryURL, {
+      pageNum: 1,
+      pageSize: 10000,
+      deptId: state.deptId,
+    });
     console.log("res.data", res);
     if (res.status === 200 && res.data.code === 0) {
       reslove(res.data.data.list);
@@ -212,10 +243,12 @@ const loadMap = async () => {
     version: "2.0",
   });
 
-  map = new AMap.Map(mapEl.value, {
+  (window as any).map = map = new AMap.Map(mapEl.value, {
     WebGLParams: {
       preserveDrawingBuffer: true,
     },
+
+    mapStyle: "amap://styles/normal", // 默认地图样式,
     resizeEnable: true,
   });
 
@@ -226,7 +259,10 @@ const loadMap = async () => {
       //异步同时加载多个插件
       // map.addControl(new AMap.HawkEye()); //显示缩略图
       map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
-      map.addControl(new AMap.MapType()); //显示当前地图中心的比例尺
+      const type = new AMap.MapType({
+        defaultType: 0,
+      });
+      map.addControl(type); //显示当前地图中心的比例尺
     }
   );
   console.log("map", map);
@@ -234,9 +270,27 @@ const loadMap = async () => {
   initMakers();
 };
 
+watch(currentMaptype, (val) => {
+  console.log("currentMaptype", val);
+  if (val === 0) {
+    const btn = document.querySelector(
+      "input[data-id='AMap.TileLayer']"
+    ) as any as HTMLInputElement;
+    btn && btn.click();
+  }
+  if (val === 1) {
+    const btn = document.querySelector(
+      "input[data-id='AMap.TileLayer.Satellite']"
+    ) as any as HTMLInputElement;
+    btn && btn.click();
+  }
+});
+
 onMounted(() => {
   // console.log("caseId", caseId);
+
   loadMap();
+  // primaryColor.value = "#ff9800";
 });
 const handCardClick = (id: number) => {
   const url = getQuery(id, true);
@@ -257,14 +311,19 @@ body {
 
 .tabbar {
   display: flex;
-  width: 100%;
+  width: calc(100% - 60px);
   position: fixed;
   top: 30px;
   z-index: 10000;
   justify-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  padding: 0 30px;
+}
+.tabbar .right {
+  display: flex;
+  flex-direction: row;
+  gap: 0 20px;
 }
-
 .tabbar .nav {
   display: flex;
   /* background: white; */
@@ -330,4 +389,7 @@ body {
 .no-data span {
   color: #999;
 }
+.amap-maptype {
+  display: none;
+}
 </style>

src/app/map/company-select/index.vue

@@ -7,6 +7,12 @@
     :options="state.options"
     :props="{ expandTrigger: 'hover', checkStrictly: true }"
   />
+  <!-- <el-tree-select
+    v-model="state.path"
+    :data="state.options"
+    filterable
+    style="width: 240px"
+  /> -->
 </template>
 
 <script setup lang="ts">

src/app/map/main.ts

@@ -12,3 +12,4 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 app.use(ElementPlus);
 app.mount("#app");
+

src/app/map/theme.ts

@@ -0,0 +1,74 @@
+import { ElMessage } from 'element-plus'
+
+/**
+ * 颜色转换函数
+ * @method hexToRgb hex 颜色转 rgb 颜色
+ * @method rgbToHex rgb 颜色转 Hex 颜色
+ * @method getDarkColor 加深颜色值
+ * @method getLightColor 变浅颜色值
+ */
+function useChangeColor() {
+    // str 颜色值字符串
+    const hexToRgb = (str: string): any => {
+        let hexs: any = ''
+        let reg = /^\#?[0-9A-Fa-f]{6}$/
+        if (!reg.test(str)) {
+            ElMessage.warning('输入错误的hex')
+            return ''
+        }
+        str = str.replace('#', '')
+        hexs = str.match(/../g)
+        for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)
+        return hexs
+    }
+    // r 代表红色 | g 代表绿色 | b 代表蓝色
+    const rgbToHex = (r: any, g: any, b: any): string => {
+        let reg = /^\d{1,3}$/
+        if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
+            ElMessage.warning('输入错误的rgb颜色值')
+            return ''
+        }
+        let hexs = [r.toString(16), g.toString(16), b.toString(16)]
+        for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`
+        return `#${hexs.join('')}`
+    }
+    // color 颜色值字符串 | level 变浅的程度，限0-1之间
+    const getDarkColor = (color: string, level: number): string => {
+        let reg = /^\#?[0-9A-Fa-f]{6}$/
+        if (!reg.test(color)) {
+            ElMessage.warning('输入错误的hex颜色值')
+            return ''
+        }
+        let rgb = useChangeColor().hexToRgb(color)
+        for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
+        return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
+    }
+    // color 颜色值字符串 | level 加深的程度，限0-1之间
+    const getLightColor = (color: string, level: number): string => {
+        let reg = /^\#?[0-9A-Fa-f]{6}$/
+        if (!reg.test(color)) {
+            ElMessage.warning('输入错误的hex颜色值')
+            return ''
+        }
+        let rgb = useChangeColor().hexToRgb(color)
+        for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
+        return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
+    }
+    return {
+        hexToRgb,
+        rgbToHex,
+        getDarkColor,
+        getLightColor
+    }
+}
+
+
+export const changeThemeColor = (color: string) => {
+    const { getLightColor, getDarkColor } = useChangeColor();
+    document.documentElement.style.setProperty('--el-color-primary', color)
+    document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(color, 0.1)}`)
+    for (let i = 1; i <= 9; i++) {
+        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(color, i / 10)}`)
+    }
+}
+

src/setSystem.ts

@@ -22,6 +22,7 @@ axios.get(getSysSetting).then((data) => {
   systemData.value.name = data.data.title;
   systemData.value.color = data.data.themeColour;
   // debugger
+  localStorage.setItem('f-themeColour', data.data.themeColour)
   refresh();
 });