From 113529424720f87ceb2e4604a4d2e1019e0db4f8 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 29 四月 2024 13:58:40 +0800
Subject: [PATCH] 新增菜单按钮
---
src/views/riskmodel/RiskMode.vue | 4
package-lock.json | 114 ++++++++++++++
src/views/gridmonitor/GridMode.vue | 4
src/components.d.ts | 3
src/views/HomePage.vue | 1
src/views/realtimemode/RealtimeMode.vue | 4
src/assets/3dmap.css | 2
src/components/map/MapToolbox.vue | 19 ++
src/components/core/CoreMenu.vue | 85 ++++++++++
src/components/monitor/FactorRadio.vue | 16 ++
src/main.js | 14 +
package.json | 5
src/styles/base.scss | 95 +++++++++++
src/views/electricitymode/ElectricityMode.vue | 4
vite.config.js | 10 +
src/components/BaseCard.vue | 42 +++++
src/styles/index.scss | 1
src/constant/radio-options.js | 1
src/utils/map/toolbox.js | 56 ++++++
19 files changed, 466 insertions(+), 14 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index ac068d0..34e52f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,11 @@
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons-vue": "^2.3.1",
+ "@fortawesome/fontawesome-svg-core": "^6.5.2",
+ "@fortawesome/free-brands-svg-icons": "^6.5.2",
+ "@fortawesome/free-regular-svg-icons": "^6.5.2",
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/vue-fontawesome": "^3.0.6",
"@vueuse/core": "^10.9.0",
"axios": "^1.6.8",
"element-plus": "^2.6.2",
@@ -521,6 +526,72 @@
"version": "0.2.1",
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+ },
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+ "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+ "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-brands-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-regular-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/vue-fontawesome": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.6.tgz",
+ "integrity": "sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==",
+ "peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+ "vue": ">= 3.0.0 < 4"
+ }
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
@@ -4609,6 +4680,49 @@
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
+ "@fortawesome/fontawesome-common-types": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+ "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+ "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ }
+ },
+ "@fortawesome/free-brands-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ }
+ },
+ "@fortawesome/free-regular-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ }
+ },
+ "@fortawesome/vue-fontawesome": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmmirror.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.6.tgz",
+ "integrity": "sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==",
+ "requires": {}
+ },
"@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
diff --git a/package.json b/package.json
index c144e26..b023b5e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,11 @@
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons-vue": "^2.3.1",
+ "@fortawesome/fontawesome-svg-core": "^6.5.2",
+ "@fortawesome/free-brands-svg-icons": "^6.5.2",
+ "@fortawesome/free-regular-svg-icons": "^6.5.2",
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/vue-fontawesome": "^3.0.6",
"@vueuse/core": "^10.9.0",
"axios": "^1.6.8",
"element-plus": "^2.6.2",
diff --git a/src/assets/3dmap.css b/src/assets/3dmap.css
index d726da4..a4523ba 100644
--- a/src/assets/3dmap.css
+++ b/src/assets/3dmap.css
@@ -45,7 +45,7 @@
}
.map-tool-box {
- position: absolute;
+ position: relative;
left: 1px;
top: 10px;
z-index: 1000px;
diff --git a/src/components.d.ts b/src/components.d.ts
index 439475a..4d59aea 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,14 +7,17 @@
declare module 'vue' {
export interface GlobalComponents {
+ BaseCard: typeof import('./components/BaseCard.vue')['default']
BaseMap: typeof import('./components/map/BaseMap.vue')['default']
CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
+ CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('element-plus/es')['ElIcon']
+ FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
MapToolbox: typeof import('./components/map/MapToolbox.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
new file mode 100644
index 0000000..a24f197
--- /dev/null
+++ b/src/components/BaseCard.vue
@@ -0,0 +1,42 @@
+<template>
+ <div :class="wrapClz">
+ <div class="ff-border-bottom"></div>
+ <div class="ff-border-top">
+ <div class="ff-border-content">
+ <slot name="content"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+// 缁熶竴鏍峰紡鍗＄墖
+export default {
+ props: {
+ /**
+ * 鏍峰紡鎶樿澶у皬
+ * small | medium
+ */
+ size: {
+ type: String,
+ default: 'small'
+ },
+ /**
+ * 鏍峰紡鏈濆悜
+ * left | right
+ */
+ direction: {
+ type: String,
+ default: 'left'
+ }
+ },
+ computed: {
+ wrapClz() {
+ let clz = 'ff-content fy-container';
+ clz += ` ff-content-${this.size}`;
+ clz += ` ff-content-${this.direction}`;
+ return clz;
+ }
+ }
+};
+</script>
diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue
new file mode 100644
index 0000000..f11b751
--- /dev/null
+++ b/src/components/core/CoreMenu.vue
@@ -0,0 +1,85 @@
+<template>
+ <div class="map-mode-change flexbox flex-space-between fy-container">
+ <template v-for="(item, index) in menu" :key="index">
+ <a :class="btnClz(item.selected)" @click="navTo(index)">
+ <div>{{ item.name }}</div>
+ </a>
+ </template>
+ <!-- <a class="mode-btn btn-selected">
+ <div>姹℃煋婧簮</div>
+ </a>
+ <a class="mode-btn btn-unselected margin-left-8">
+ <div>璧拌埅鐩戞祴</div>
+ </a>
+ <a class="mode-btn btn-unselected margin-left-8">
+ <div>缃戞牸鍖栫洃娴�</div>
+ </a> -->
+ <!-- <div class="flexbox-col">
+ <a id="btn_more" class="btn-unselected margin-left-8">
+ <div id="mode_selected">鍏朵粬妯″紡</div>
+ </a>
+ <div
+ id="mode_others"
+ class="flexbox-col"
+ style="display: none; position: absolute; margin-top: 40px"
+ >
+ <a id="btn_gridmonitor" class="mode-btn mode-btn-other btn-unselected margin-left-8">
+ <div>缃戞牸鍖栫洃娴�</div>
+ </a>
+ <a id="btn_electricity" class="mode-btn mode-btn-other btn-unselected margin-left-8">
+ <div>鐢ㄧ數閲忕洃娴�</div>
+ </a>
+ <a id="btn_weight" class="mode-btn mode-btn-other btn-unselected margin-left-8">
+ <div>椋庨櫓妯″瀷</div>
+ </a>
+ </div>
+ </div> -->
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ menu: [
+ {
+ name: '姹℃煋婧簮',
+ path: 'hmode',
+ selected: true
+ },
+ {
+ name: '璧拌埅鐩戞祴',
+ path: 'rmode'
+ },
+ {
+ name: '缃戞牸鍖栫洃娴�',
+ path: 'gridmonitor'
+ }
+ // {
+ // name: '鐢ㄧ數閲忕洃娴�',
+ // path: 'emode'
+ // },
+ // {
+ // name: '椋庨櫓妯″瀷',
+ // path: 'riskmode'
+ // },
+ ]
+ };
+ },
+ computed: {},
+ methods: {
+ btnClz(selected) {
+ return 'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8';
+ },
+ navTo(index) {
+ const m = this.menu;
+ m.forEach((e) => {
+ e.selected = false;
+ });
+ m[index].selected = true;
+ this.$router.push(m[index].path);
+ }
+ }
+};
+</script>
+<style scoped></style>
diff --git a/src/components/map/MapToolbox.vue b/src/components/map/MapToolbox.vue
index 9a2e67a..0ad54f6 100644
--- a/src/components/map/MapToolbox.vue
+++ b/src/components/map/MapToolbox.vue
@@ -6,12 +6,15 @@
@command="handleCommand"
>
<el-button type="primary" class="el-button-custom">
- 鍦板浘宸ュ叿绠�<el-icon class="el-icon--right"><arrow-down /></el-icon>
+ <el-icon class="el-icon--left"><TakeawayBox /></el-icon>
+ 鍦板浘宸ュ叿绠�
+ <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in toolItem" :key="index" :command="index">
<el-button :type="item.value ? 'primary' : 'info'" plain size="default">
+ <font-awesome-icon :icon="item.icon" class="m-r-4" />
{{ item.label + ': ' + (item.value ? '寮�' : '鍏�') }}
</el-button>
</el-dropdown-item>
@@ -21,12 +24,13 @@
</template>
<script>
-import toolbox from '../../utils/map/toolbox';
+import toolbox from '@/utils/map/toolbox';
export default {
data() {
return {
toolItem: [
{
+ icon: 'fa fa-map-signs',
label: '鍦扮墿鏍囨敞',
value: false,
click: function () {
@@ -35,6 +39,7 @@
}
},
{
+ icon: 'fa fa-globe',
label: '鍗槦鍦板浘',
value: true,
click: function () {
@@ -43,6 +48,7 @@
}
},
{
+ icon: 'fa fa-compass',
label: '鎺у埗缃楃洏',
value: true,
click: function () {
@@ -51,24 +57,30 @@
}
},
{
+ icon: 'fa fa-compass',
label: '鍧愭爣鎷惧彇',
value: false,
click: function () {
this.value = !this.value;
+ toolbox.toggleCoorPicking(this.value);
}
},
{
+ icon: 'fa fa-compass',
label: '鏁版嵁鏍囪',
value: true,
click: function () {
this.value = !this.value;
+ // todo 鏁版嵁鏍囪
}
},
{
+ icon: 'fa fa-compass',
label: '鏁版嵁寮规',
value: true,
click: function () {
this.value = !this.value;
+ // todo 鏁版嵁寮规
}
}
]
@@ -84,6 +96,9 @@
<style scoped>
.dropdown-wrap {
+ position: absolute;
+ top: 10px;
+ left: 2px;
}
.el-button-custom {
diff --git a/src/components/monitor/FactorRadio.vue b/src/components/monitor/FactorRadio.vue
new file mode 100644
index 0000000..3245049
--- /dev/null
+++ b/src/components/monitor/FactorRadio.vue
@@ -0,0 +1,16 @@
+<template>
+ <BaseCard>
+ <template #content>
+ <el-radio-group v-model="radio">
+ <el-radio :value="3">Option A</el-radio>
+ <el-radio :value="6">Option B</el-radio>
+ <el-radio :value="9">Option C</el-radio>
+ </el-radio-group>
+ </template>
+ </BaseCard>
+</template>
+
+<script>
+// 鐩戞祴鍥犲瓙鍗曢�夋
+export default {};
+</script>
diff --git a/src/constant/radio-options.js b/src/constant/radio-options.js
new file mode 100644
index 0000000..2a0067d
--- /dev/null
+++ b/src/constant/radio-options.js
@@ -0,0 +1 @@
+// 鐩戞祴鍥犲瓙鍗曢�夋閫夐」
diff --git a/src/main.js b/src/main.js
index f53ca8e..d6c2bf4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,19 @@
import App from './App.vue';
import router from './router';
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core';
+/* import font awesome icon component */
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+/* import specific icons */
+// import { all } from '@awesome.me/kit-KIT_CODE/icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+// import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
+// import { faTwitter, faFontAwesome } from '@fortawesome/free-regular-svg-icons'
+
+/* add icons to the library */
+library.add(fas);
+
const app = createApp(App);
// elementUI Icon 娉ㄥ唽
@@ -14,6 +27,7 @@
app.component(key, component);
}
+app.component('font-awesome-icon', FontAwesomeIcon);
app.use(createPinia());
app.use(router);
diff --git a/src/styles/base.scss b/src/styles/base.scss
new file mode 100644
index 0000000..4347524
--- /dev/null
+++ b/src/styles/base.scss
@@ -0,0 +1,95 @@
+/************************************** font size **************************************/
+$fontsize: (
+ s: var(--el-font-size-small),
+ b: var(--el-font-size-base),
+ m: var(--el-font-size-medium),
+ l: var(--el-font-size-large)
+);
+
+@each $dName, $dValue in $fontsize {
+ .f-#{$dName} {
+ font-size: #{$dValue};
+ }
+}
+
+/************************************** color **************************************/
+$colors: (
+ p: var(--el-color-primary),
+ s: var(--el-color-success),
+ w: var(--el-color-warning),
+ d: var(--el-color-danger),
+ e: var(--el-color-error),
+ i: var(--el-color-info)
+);
+
+@each $dName, $dValue in $colors {
+ .color-#{$dName} {
+ color: #{$dValue};
+ }
+ .b-color-#{$dName} {
+ background-color: #{$dValue};
+ }
+}
+
+/************************************** 鍐呭杈硅窛 **************************************/
+$direction: (
+ l: 'left',
+ t: 'top',
+ r: 'right',
+ b: 'bottom'
+);
+$size: (4, 8, 10, 16);
+@each $dName, $dValue in $direction {
+ @each $i in $size {
+ .p-#{$dName}-#{$i} {
+ padding-#{$dValue}: #{$i}px;
+ }
+ .m-#{$dName}-#{$i} {
+ margin-#{$dValue}: #{$i}px;
+ }
+ }
+}
+
+@each $i in $size {
+ .p-v-#{$i} {
+ padding: #{$i}px 0;
+ }
+ .p-h-#{$i} {
+ padding: 0 #{$i}px;
+ }
+ .m-v-#{$i} {
+ margin: #{$i}px 0;
+ }
+ .m-h-#{$i} {
+ margin: 0 #{$i}px;
+ }
+}
+
+/************************************** 瀹介珮 **************************************/
+$csize: (
+ small: var(--el-component-size-small),
+ default: var(--el-component-size-default),
+ large: var(--el-component-size-large)
+);
+$ws: (20px, 40px, 60px, 100px, 150px, 300px);
+@each $name, $value in $csize {
+ .w-#{$name} {
+ width: #{$value};
+ }
+ .h-#{$name} {
+ height: #{$value};
+ }
+}
+@each $i in $ws {
+ .w-#{$i} {
+ width: #{$i};
+ }
+ .h-#{$i} {
+ height: #{$i};
+ }
+}
+
+//
+.cursor-p {
+ cursor: pointer;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..7a8ddf5
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1 @@
+@use './base.scss';
diff --git a/src/utils/map/toolbox.js b/src/utils/map/toolbox.js
index 0baffa5..ba75d5d 100644
--- a/src/utils/map/toolbox.js
+++ b/src/utils/map/toolbox.js
@@ -2,27 +2,77 @@
import { map, satellite, controlbar } from './index_old';
// import '@/lib/jquery-3.5.1.min';
+/**
+ * 鍧愭爣鎷惧彇榧犳爣鐐瑰嚮鍥炶皟浜嬩欢
+ */
+var _locationMarker, _locationText;
+function _coorPickListener(e) {
+ var text = `缁忓害: ${e.lnglat.getLng()}<br/>绾害: ${e.lnglat.getLat()}`;
+ if (_locationMarker == undefined) {
+ var textM = new AMap.Text({
+ style: {
+ 'font-size': '12px'
+ },
+ text: text,
+ position: e.lnglat,
+ offset: new AMap.Pixel(0, 30)
+ });
+
+ var marker = new AMap.Marker({
+ position: e.lnglat
+ // icon: icon,
+ // anchor: 'top-center',
+ // content: '<i class="fa fa-map-marker fa-2x" style="color: #E6DB06;" aria-hidden="true"></i>'
+ });
+ map.add(marker);
+ map.add(textM);
+ _locationMarker = marker;
+ _locationText = textM;
+ } else {
+ _locationMarker.setPosition(e.lnglat);
+ _locationText.setPosition(e.lnglat);
+ _locationText.setText(text);
+ }
+}
+
export default {
/**
* 寮�鍏冲湴鐗╂爣娉�
* @param {boolean} value
*/
- toggleFeatures: (value) => {
+ toggleFeatures(value) {
value ? map.setFeatures(['bg', 'road', 'point', 'building']) : map.setFeatures(['bg', 'road']);
},
/**
* 寮�鍏冲崼鏄熷湴鍥�
+ * @param {boolean} value
*/
- toggleSatellite: (value) => {
+ toggleSatellite(value) {
value ? satellite.show() : satellite.hide();
},
/**
* 寮�鍏虫帶鍒剁綏鐩�
+ * @param {boolean} value
*/
- toggleControlbar: (value) => {
+ toggleControlbar(value) {
// value ? controlbar.show() : controlbar.hide();
value ? $('.amap-controlbar').show() : $('.amap-controlbar').hide();
+ },
+
+ /**
+ * 寮�鍏冲潗鏍囨嬀鍙�
+ * @param {boolean} value
+ */
+ toggleCoorPicking(value) {
+ if (value) {
+ map.on('click', _coorPickListener);
+ } else {
+ map.off('click', _coorPickListener);
+ map.remove([_locationMarker, _locationText]);
+ _locationMarker = undefined;
+ _locationText = undefined;
+ }
}
};
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index d085e0b..4d60672 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -3,6 +3,7 @@
<div class="overlay-container">
<CoreHeader></CoreHeader>
<MapToolbox></MapToolbox>
+ <CoreMenu></CoreMenu>
<router-view></router-view>
</div>
</template>
diff --git a/src/views/electricitymode/ElectricityMode.vue b/src/views/electricitymode/ElectricityMode.vue
index 41632b1..d2e0e36 100644
--- a/src/views/electricitymode/ElectricityMode.vue
+++ b/src/views/electricitymode/ElectricityMode.vue
@@ -1,9 +1,9 @@
<template>
- <div>HomePage</div>
+ <div>ElectricityMode</div>
</template>
<script>
export default {
- name: 'HistoryPage',
+ name: 'HistoryPage'
};
</script>
diff --git a/src/views/gridmonitor/GridMode.vue b/src/views/gridmonitor/GridMode.vue
index 41632b1..435f84e 100644
--- a/src/views/gridmonitor/GridMode.vue
+++ b/src/views/gridmonitor/GridMode.vue
@@ -1,9 +1,9 @@
<template>
- <div>HomePage</div>
+ <div>GridMode</div>
</template>
<script>
export default {
- name: 'HistoryPage',
+ name: 'HistoryPage'
};
</script>
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 41632b1..b991977 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -1,9 +1,9 @@
<template>
- <div>HomePage</div>
+ <div>RealtimeMode</div>
</template>
<script>
export default {
- name: 'HistoryPage',
+ name: 'HistoryPage'
};
</script>
diff --git a/src/views/riskmodel/RiskMode.vue b/src/views/riskmodel/RiskMode.vue
index 41632b1..aeb4b39 100644
--- a/src/views/riskmodel/RiskMode.vue
+++ b/src/views/riskmodel/RiskMode.vue
@@ -1,9 +1,9 @@
<template>
- <div>HomePage</div>
+ <div>RiskMode</div>
</template>
<script>
export default {
- name: 'HistoryPage',
+ name: 'HistoryPage'
};
</script>
diff --git a/vite.config.js b/vite.config.js
index 56719e5..3487c29 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -27,6 +27,16 @@
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
+ css: {
+ // postcss: {
+ // plugins: [autoprefixer],
+ // },
+ preprocessorOptions: {
+ scss: {
+ additionalData: `@use "@/styles/index.scss" as *;`
+ }
+ }
+ },
server: {
host: '0.0.0.0'
}
--
Gitblit v1.9.3