From 58f406ecca89ca7027392d97e28a906c476515f3 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期一, 10 七月 2023 15:34:59 +0800
Subject: [PATCH] feat: 增加vue2版本的边框组件，添加vueuse依赖 样式微调
---
src/views/index/center-map.vue | 43 ++++++++++++++++++++++---------------------
1 files changed, 22 insertions(+), 21 deletions(-)
diff --git a/src/views/index/center-map.vue b/src/views/index/center-map.vue
index 4ed9922..379890c 100644
--- a/src/views/index/center-map.vue
+++ b/src/views/index/center-map.vue
@@ -3,10 +3,11 @@
import { currentGET, GETNOBASE } from "@/api";
import { registerMap, getMap } from "echarts/core";
import { optionHandle, regionCodes } from "./center.map";
+import BorderBox13 from "@/components/datav/border-box-13";
import type { MapdataType } from "./center.map";
const option = ref({});
const code = ref("china"); //china 浠ｈ〃涓浗 鍏朵粬鍦板競鏄鏀跨紪鐮�
-const centerMapRef = ref();
+
withDefaults(
defineProps<{
// 缁撴潫鏁板��
@@ -36,7 +37,6 @@
}
});
await nextTick();
- centerMapRef.value?.resize();
option.value = optionHandle(regionCode, list, mapData);
};
@@ -56,10 +56,10 @@
mapjson = mapjson.geoJSON;
resolve(mapjson);
} else {
- mapjson = await GETNOBASE(`/map-geojson/${regionCode}.json`).then(
+ mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
(data) => data
);
- code.value=regionCode
+ code.value = regionCode;
registerMap(regionCode, {
geoJSON: mapjson as any,
specialAreas: {},
@@ -76,29 +76,31 @@
if (xzqData) {
getData(xzqData.adcode);
} else {
-
- window["$message"].warning("鏆傛棤涓嬬骇鍦板競")
+ window["$message"].warning("鏆傛棤涓嬬骇鍦板競");
}
};
</script>
<template>
<div class="centermap">
- <!-- <div class="maptitle">
+ <div class="maptitle">
<div class="zuo"></div>
<span class="titletext">{{ title }}</span>
<div class="you"></div>
- </div> -->
+ </div>
<div class="mapwrap">
- <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
- 涓浗
- </div>
- <v-chart
- class="chart"
- :option="option"
- ref="centerMapRef"
- @click="mapClick"
- />
+ <BorderBox13>
+ <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
+ 涓浗
+ </div>
+ <v-chart
+ class="chart"
+ :option="option"
+ ref="centerMapRef"
+ @click="mapClick"
+ v-if="JSON.stringify(option) != '{}'"
+ />
+ </BorderBox13>
</div>
</div>
</template>
@@ -147,7 +149,7 @@
}
.mapwrap {
- height: 548px;
+ height: 580px;
width: 100%;
// padding: 0 0 10px 0;
box-sizing: border-box;
@@ -156,8 +158,7 @@
.quanguo {
position: absolute;
right: 20px;
- // top: -46px;
- top: 0;
+ top: -46px;
width: 80px;
height: 28px;
border: 1px solid #00eded;
@@ -169,7 +170,7 @@
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
0 0 6px rgba(0, 237, 237, 0.4);
- z-index: 10;
+ z-index: 10;
}
}
}
--
Gitblit v1.8.0