diff --git a/src/components/AMap/AMap.ts b/src/components/AMap/AMap.ts index bab1f33..71c7ae0 100644 --- a/src/components/AMap/AMap.ts +++ b/src/components/AMap/AMap.ts @@ -1,14 +1,14 @@ import AMapLoader from "@amap/amap-jsapi-loader"; import "@amap/amap-jsapi-types"; import { ElMessage } from "element-plus"; -import { AMAP_MAP_KEY } from "@/config/config"; +import { AMAP_MAP_KEY, AMAP_MAP_KEY_SECURITY } from "@/config/config"; // FIXME: 插件需要配合密钥使用,官方推荐 key 搭配代理服务器并携带安全密钥转发使用 // see: https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare window._AMapSecurityConfig = { // securityJsCode: "df19aa4c9f83a52f7ef66843449f438e" // 密钥 // securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b" // 密钥 - securityJsCode: "1ed9eb78a441d1c9f2534fe4530980fb" + securityJsCode: AMAP_MAP_KEY_SECURITY }; const amap = (async function (Loader, AMAP_MAP_KEY) { diff --git a/src/config/config.ts b/src/config/config.ts index 86bb99f..78dc1df 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -16,7 +16,9 @@ export const ROUTER_WHITE_LIST: string[] = ["/500", "/projectlogon", "/compLogon // * 高德地图 key // export const AMAP_MAP_KEY: string = "142e51d55274a0140e838245345cf9ad"; -export const AMAP_MAP_KEY: string = "021caa57125045d16a41f131ba0e7973 "; +export const AMAP_MAP_KEY: string = "021caa57125045d16a41f131ba0e7973"; + +export const AMAP_MAP_KEY_SECURITY: string = "1ed9eb78a441d1c9f2534fe4530980fb"; // * 百度地图 key export const BAIDU_MAP_KEY: string = ""; diff --git a/src/views/goverment/largeScreen/components/header.vue b/src/views/goverment/largeScreen/components/header.vue index 34699ad..b27f8d5 100644 --- a/src/views/goverment/largeScreen/components/header.vue +++ b/src/views/goverment/largeScreen/components/header.vue @@ -35,7 +35,7 @@ const getWeather = () => { let url = "https://restapi.amap.com/v3/weather/weatherInfo?city=440000&key=ad31e514e7e740179d6d8f182720bcf5"; axios({ method: "get", url }).then(({ data: res }) => { console.log(res); - weatherInfo.value = res.lives[0]; + weatherInfo.value = res.lives?.[0] || {}; }); }; const router = useRouter(); @@ -51,19 +51,21 @@ const goBack = () => { position: absolute; top: 0%; left: 0; + z-index: 100; width: 100%; height: 100%; background: url("@/assets/images/screenImg/topBorder.png") no-repeat; background-size: 100%; - z-index: 100; .bigTitle { position: absolute; top: 36px; left: 42.2%; font-family: title; font-size: 35px; + // font-family: PangMenZhengDao-Regular, PangMenZhengDao; color: white; + // text-shadow: 4px 4px 4px rgba($color: white, $alpha: 40%); letter-spacing: 1px; } @@ -73,8 +75,9 @@ const goBack = () => { padding: 10px 10px 0; font-family: SourceHanSansCNR; font-size: 12px; - background-image: -webkit-linear-gradient(bottom, #4b5e84, #ffffff); color: #d5d8df; + background-image: -webkit-linear-gradient(bottom, #4b5e84, #ffffff); + // background-clip: text; // -webkit-text-fill-color: transparent; } diff --git a/src/views/goverment/largeScreen/components/map2D.vue b/src/views/goverment/largeScreen/components/map2D.vue index cceb79d..264d966 100644 --- a/src/views/goverment/largeScreen/components/map2D.vue +++ b/src/views/goverment/largeScreen/components/map2D.vue @@ -13,6 +13,8 @@ import AMapLoader from "@amap/amap-jsapi-loader"; import { ref, onMounted } from "vue"; import { getMapProject } from "@/api/modules/largeSreen"; +import { AMAP_MAP_KEY, AMAP_MAP_KEY_SECURITY } from "@/config/config"; + onMounted(() => { getProjectList(); }); @@ -79,10 +81,11 @@ function getImageUrl(name: string) { } const initMap = () => { window._AMapSecurityConfig = { - securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b" + // securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b" + securityJsCode: AMAP_MAP_KEY_SECURITY }; AMapLoader.load({ - key: "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key,首次调用 load 时必填 + key: AMAP_MAP_KEY, // "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "1.4.15" // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 // plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }) @@ -232,138 +235,154 @@ const initMap = () => { } .info-window { width: 300px; + font-family: SourceHanSansCNR; + color: white; + // height: 189px; + /* background: url("@/assets/images/screenImg/mapImg/completeeingBorder.png") no-repeat center center; background-size: 100% 100%; */ - background-color: rgba(36, 46, 62, 0.9); - color: white; - font-family: SourceHanSansCNR; + background-color: rgb(36 46 62 / 90%); } .amap-info-content { padding: 0; background: transparent; } .info { - font-size: 13px; padding: 8px 0 5px 10px; - border-bottom: 3px solid rgb(40, 53, 88); + font-size: 13px; + border-bottom: 3px solid rgb(40 53 88); } .bottom-center .amap-info-sharp { - border-top: 8px solid rgba(36, 46, 62, 0.9); + border-top: 8px solid rgb(36 46 62 / 90%); } .amap-info-close { width: 0; } .constructionningBorder { display: flex; - border-top: 3px solid rgb(133, 181, 252); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(133 181 252); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(133, 181, 252); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(133 181 252); } } .notStartedBorder { display: flex; - border-top: 3px solid rgb(223, 189, 83); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(223 189 83); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(223, 189, 83); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(223 189 83); } } .finishedBorder { display: flex; - border-top: 3px solid rgb(241, 241, 241); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(241 241 241); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(241, 241, 241); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(241 241 241); } } .ordinaryBorder { display: flex; - border-top: 3px solid rgb(252, 165, 59); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(252 165 59); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(252, 165, 59); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(252 165 59); } } .completedBorder { display: flex; - border-top: 3px solid rgb(84, 222, 169); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(84 222 169); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(84, 222, 169); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(84 222 169); } } .completeeingBorder { display: flex; - border-top: 3px solid rgb(171, 254, 222); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(171 254 222); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(171, 254, 222); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(171 254 222); } } .punishBorder { display: flex; - border-top: 3px solid rgb(214, 75, 31); + // font-size: 17px; padding: 6px 0 0 10px; + border-top: 3px solid rgb(214 75 31); .leftSan { - padding: 0; - margin: 2px 5px 0 0; width: 0; height: 0.1px; - border-left: 9px solid rgb(214, 75, 31); + padding: 0; + margin: 2px 5px 0 0; + // border-right: 8px solid red; border-top: 9px solid transparent; border-bottom: 9px solid transparent; + border-left: 9px solid rgb(214 75 31); } }