feat: 增加vue2版本的边框组件，添加vueuse依赖 样式微调

刘嘉威

2023-07-10 58f406ecca89ca7027392d97e28a906c476515f3

feat: 增加vue2版本的边框组件，添加vueuse依赖 样式微调

 auto-imports.d.ts

@@ -1,6 +1,7 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {

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

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

 src/components/datav/border-box-13/border-box-13.vue

New file
@@ -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>


 src/components/datav/border-box-13/index.ts

New file
@@ -0,0 +1,3 @@
import BorderBox13 from "./border-box-13.vue"



export default BorderBox13

 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"> &nbsp;&nbsp;{{title}}&nbsp;&nbsp; </span>

      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </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;

}


 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;

    }

  }

}


 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>