新增菜单按钮

riku

2024-04-29 113529424720f87ceb2e4604a4d2e1019e0db4f8

新增菜单按钮

 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",

 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",

 src/assets/3dmap.css

@@ -45,7 +45,7 @@
}

.map-tool-box {
    position: absolute;
    position: relative;
    left: 1px;
    top: 10px;
    z-index: 1000px;

 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']

 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>

 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>

 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 {

 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>

 src/constant/radio-options.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
// ç›‘测因子单选框选项

 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);


 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;
}

 src/styles/index.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
@use './base.scss';

 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;
    }
  }
};

 src/views/HomePage.vue

@@ -3,6 +3,7 @@
  <div class="overlay-container">
    <CoreHeader></CoreHeader>
    <MapToolbox></MapToolbox>
    <CoreMenu></CoreMenu>
    <router-view></router-view>
  </div>
</template>

 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>

 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>

 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>

 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>

 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'
  }