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/components/datav/border-box-13/border-box-13.vue | 90 ++++++++++++++++++
package-lock.json | 129 ++++++++++++++++++++++---
src/components/datav/border-box-13/index.ts | 3
src/components/item-wrap/item-wrap.vue | 20 ++--
package.json | 1
auto-imports.d.ts | 1
src/views/index/center-map.vue | 37 +++---
src/views/index/index.vue | 7 -
8 files changed, 237 insertions(+), 51 deletions(-)
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 918aad8..1d89ee8 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,6 +1,7 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
diff --git a/package-lock.json b/package-lock.json
index dc67e6f..68ebaa5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
"@types/node": "^20.4.1",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/tsconfig": "^0.4.0",
+ "@vueuse/core": "^10.2.1",
"autoprefixer": "^10.4.14",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.25",
@@ -598,9 +599,10 @@
"dev": true
},
"node_modules/@types/web-bluetooth": {
- "version": "0.0.16",
- "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
- "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+ "version": "0.0.17",
+ "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+ "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
+ "dev": true
},
"node_modules/@vitejs/plugin-vue": {
"version": "4.2.3",
@@ -814,36 +816,91 @@
}
},
"node_modules/@vueuse/core": {
- "version": "9.3.1",
- "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.3.1.tgz",
- "integrity": "sha512-xriyD+v3D2ObH/UtnkEl+1sbcLBVHNaZaLi/rqoNEe/B92hggDEFQIGXoQUjdRzYOjASHSezf9uCDtmd7LeWyA==",
+ "version": "10.2.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+ "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+ "dev": true,
"dependencies": {
- "@types/web-bluetooth": "^0.0.16",
- "@vueuse/metadata": "9.3.1",
- "@vueuse/shared": "9.3.1",
- "vue-demi": "*"
+ "@types/web-bluetooth": "^0.0.17",
+ "@vueuse/metadata": "10.2.1",
+ "@vueuse/shared": "10.2.1",
+ "vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
+ "node_modules/@vueuse/core/node_modules/vue-demi": {
+ "version": "0.14.5",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+ "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+ "dev": true,
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@vueuse/metadata": {
- "version": "9.3.1",
- "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.3.1.tgz",
- "integrity": "sha512-G1BPhtx3OHaL/y4OZBofh6Xt02G1VA9PuOO8nac9sTKMkMqfyez5VfkF3D9GUjSRNO7cVWyH4rceeGXfr2wdMg==",
+ "version": "10.2.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+ "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
+ "dev": true,
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
- "version": "9.3.1",
- "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.1.tgz",
- "integrity": "sha512-YFu3qcnVeu0S2L4XdQJtBpDcjz6xwqHZtTv/XRhu66/yge1XVhxskUcc7VZbX52xF9A34V6KCfwncP9YDqYFiw==",
+ "version": "10.2.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+ "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+ "dev": true,
"dependencies": {
- "vue-demi": "*"
+ "vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
+ }
+ },
+ "node_modules/@vueuse/shared/node_modules/vue-demi": {
+ "version": "0.14.5",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+ "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+ "dev": true,
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
}
},
"node_modules/acorn": {
@@ -1278,6 +1335,44 @@
"vue": "^3.2.0"
}
},
+ "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+ "version": "0.0.16",
+ "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+ "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+ },
+ "node_modules/element-plus/node_modules/@vueuse/core": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+ "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+ "dependencies": {
+ "@types/web-bluetooth": "^0.0.16",
+ "@vueuse/metadata": "9.13.0",
+ "@vueuse/shared": "9.13.0",
+ "vue-demi": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ }
+ },
+ "node_modules/element-plus/node_modules/@vueuse/metadata": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+ "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ }
+ },
+ "node_modules/element-plus/node_modules/@vueuse/shared": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+ "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+ "dependencies": {
+ "vue-demi": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ }
+ },
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
diff --git a/package.json b/package.json
index b8b7890..7e20e0b 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"@types/node": "^20.4.1",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/tsconfig": "^0.4.0",
+ "@vueuse/core": "^10.2.1",
"autoprefixer": "^10.4.14",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.25",
diff --git a/src/components/datav/border-box-13/border-box-13.vue b/src/components/datav/border-box-13/border-box-13.vue
new file mode 100644
index 0000000..28e1efd
--- /dev/null
+++ b/src/components/datav/border-box-13/border-box-13.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref ,onBeforeUpdate, nextTick} from "vue";
+import merge from "lodash/merge";
+import { useElementSize } from "@vueuse/core";
+import type { PropType } from "vue";
+
+const props = defineProps({
+ color: {
+ type: Array as unknown as PropType<[string, string]>,
+ default: () => [],
+ },
+ backgroundColor: {
+ type: String,
+ default: "transparent",
+ },
+});
+const defaultColor = ["#6586ec", "#2cf7fe"];
+const domRef = ref(null);
+const { width, height } = useElementSize(domRef,{width:0,height:0}, { box: 'border-box' });
+const mergedColor = computed<[string, string]>(() => {
+ return merge(defaultColor, props.color);
+});
+
+
+</script>
+
+<template>
+ <div class="dv-border-box-13 dv-border-box" ref="domRef">
+ <svg :width="width" :height="height" class="dv-border-svg-container">
+ <path
+ :fill="backgroundColor"
+ :stroke="mergedColor[0]"
+ :d="`
+ M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
+ L ${width - 20} 10 L ${width - 5} 25
+ L ${width - 5} ${height - 5} L 20 ${height - 5}
+ L 5 ${height - 20} L 5 20
+ `"
+ />
+
+ <path
+ fill="transparent"
+ stroke-width="3"
+ stroke-linecap="round"
+ stroke-dasharray="10, 5"
+ :stroke="mergedColor[0]"
+ :d="`M 16 9 L 61 9`"
+ />
+
+ <path
+ fill="transparent"
+ stroke="{mergedColor[1]}"
+ :d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
+ />
+
+ <path
+ fill="transparent"
+ :stroke="mergedColor[1]"
+ :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
+ width - 30
+ } ${height - 5}`"
+ />
+ </svg>
+ <div class="dv-border-box-content">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.dv-border-box {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+}
+.dv-border-svg-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0px;
+ display: block;
+}
+.dv-border-box-content {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/components/datav/border-box-13/index.ts b/src/components/datav/border-box-13/index.ts
new file mode 100644
index 0000000..41e995c
--- /dev/null
+++ b/src/components/datav/border-box-13/index.ts
@@ -0,0 +1,3 @@
+import BorderBox13 from "./border-box-13.vue"
+
+export default BorderBox13
\ No newline at end of file
diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index b1e37f7..3f63d7f 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -1,4 +1,5 @@
<script setup lang="ts">
+import BorderBox13 from "@/components/datav/border-box-13";
const props = withDefaults(
defineProps<{
// 鏍囬
@@ -8,29 +9,23 @@
title: "",
}
);
-
</script>
<template>
- <div class="item-wrap">
+ <BorderBox13>
<div class="item_title" v-if="title !== ''">
<div class="zuo"></div>
- <span class="title-inner"> {{title}} </span>
+ <span class="title-inner"> {{ title }} </span>
<div class="you"></div>
</div>
<div
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
>
- <slot></slot>
- </div>
- </div>
+ <slot></slot></div
+ ></BorderBox13>
</template>
<style scoped lang="scss">
-.item-wrap {
- // border: red dashed 1px;
- box-sizing: border-box;
-}
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
@@ -70,6 +65,11 @@
}
}
+:deep(.dv-border-box-content) {
+ box-sizing: border-box;
+ padding: 6px 16px 0px;
+ }
+
.item_title_content {
height: $item_title_content-height;
}
diff --git a/src/views/index/center-map.vue b/src/views/index/center-map.vue
index a406a02..379890c 100644
--- a/src/views/index/center-map.vue
+++ b/src/views/index/center-map.vue
@@ -3,6 +3,7 @@
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 浠ｈ〃涓浗 鍏朵粬鍦板競鏄鏀跨紪鐮�
@@ -58,7 +59,7 @@
mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
(data) => data
);
- code.value=regionCode
+ code.value = regionCode;
registerMap(regionCode, {
geoJSON: mapjson as any,
specialAreas: {},
@@ -75,30 +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"
- v-if="JSON.stringify(option)!='{}'"
- />
+ <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>
@@ -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;
}
}
}
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index defb1fa..3b7627a 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -8,14 +8,9 @@
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
-
-
-
-
</script>
<template>
-
<div class="index-box">
<div class="contetn_left">
<!-- <div class="pagetab">
@@ -37,7 +32,7 @@
</ItemWrap>
</div>
<div class="contetn_center">
- <CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�"/>
+ <CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�" />
<ItemWrap class="contetn_center-bottom" title="瀹夎璁″垝">
<CenterBottom />
</ItemWrap>
--
Gitblit v1.8.0