perf: 增加设置弹窗 可设置是否进行自适应

刘嘉威

2022-10-24 a191ee0f495760168aa776590793e72c9ecbda0d

perf: 增加设置弹窗 可设置是否进行自适应

 components.d.ts

@@ -8,6 +8,10 @@
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    CountUp: typeof import('./src/components/count-up/count-up.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ItemWrap: typeof import('./src/components/item-wrap/item-wrap.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']

 package-lock.json

@@ -113,9 +113,9 @@
      "dev": true
    },
    "@types/node": {
      "version": "18.8.0",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
      "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
      "version": "18.11.4",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.4.tgz",
      "integrity": "sha512-BxcJpBu8D3kv/GZkx/gSMz6VnTJREBj/4lbzYOQueUOELkt8WrO6zAcSPmp9uRPEW/d+lUO8QK0W2xnS1hEU0A==",
      "dev": true
    },
    "@types/web-bluetooth": {
@@ -130,42 +130,42 @@
      "dev": true
    },
    "@volar/language-core": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.0.8.tgz",
      "integrity": "sha512-uxYSOqBk8ZFSzGjUIPOBEFPOg8F3CE6cLO5meK95DODGIlUlPytGiy9sy8QZ9w7RpUH4XMOX3MH/G48SLgP07A==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.0.9.tgz",
      "integrity": "sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==",
      "dev": true,
      "requires": {
        "@volar/source-map": "1.0.8",
        "@volar/source-map": "1.0.9",
        "@vue/reactivity": "^3.2.40",
        "muggle-string": "^0.1.0"
      }
    },
    "@volar/source-map": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.0.8.tgz",
      "integrity": "sha512-uKMe+alyfl1Abs5SviKejFoe7x9g6jDPVpVt63Tet4qn1Ziy7tFsvtCpM2Y1Ko5qw2nLIeloLslPqm9/gmbBLQ==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.0.9.tgz",
      "integrity": "sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==",
      "dev": true,
      "requires": {
        "muggle-string": "^0.1.0"
      }
    },
    "@volar/typescript": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.0.8.tgz",
      "integrity": "sha512-2oY1Apvzcs/5tAn7p1tRlDxNgal5ezaK0h9cutcWALeimsaQBAEE2NAirCrLMHl8DneuDce0tzJqHaQeHw9RmQ==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.0.9.tgz",
      "integrity": "sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ==",
      "dev": true,
      "requires": {
        "@volar/language-core": "1.0.8"
        "@volar/language-core": "1.0.9"
      }
    },
    "@volar/vue-language-core": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.0.8.tgz",
      "integrity": "sha512-cXb7oTybxcm1vpz003agdYQHyxij7UAaSub60d7W1aMWpqb2iaCbVaq9izgQFlrpC4/JnVs+cJPb/Q6fAUVxBg==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz",
      "integrity": "sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww==",
      "dev": true,
      "requires": {
        "@volar/language-core": "1.0.8",
        "@volar/source-map": "1.0.8",
        "@volar/language-core": "1.0.9",
        "@volar/source-map": "1.0.9",
        "@vue/compiler-dom": "^3.2.40",
        "@vue/compiler-sfc": "^3.2.40",
        "@vue/reactivity": "^3.2.40",
@@ -195,49 +195,49 @@
      }
    },
    "@volar/vue-typescript": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.0.8.tgz",
      "integrity": "sha512-6jBvA7iwBkRqS2VQx2gLJgfLcF3hcODyJ6Lmiw2tN8D/LVfFCovvzJgPvIQb9Y4i+rha1Y0cpsYOUt9XW2Z7ZA==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz",
      "integrity": "sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw==",
      "dev": true,
      "requires": {
        "@volar/typescript": "1.0.8",
        "@volar/vue-language-core": "1.0.8"
        "@volar/typescript": "1.0.9",
        "@volar/vue-language-core": "1.0.9"
      }
    },
    "@vue/compiler-core": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.40.tgz",
      "integrity": "sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
      "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
      "dev": true,
      "requires": {
        "@babel/parser": "^7.16.4",
        "@vue/shared": "3.2.40",
        "@vue/shared": "3.2.41",
        "estree-walker": "^2.0.2",
        "source-map": "^0.6.1"
      }
    },
    "@vue/compiler-dom": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.40.tgz",
      "integrity": "sha512-OZCNyYVC2LQJy4H7h0o28rtk+4v+HMQygRTpmibGoG9wZyomQiS5otU7qo3Wlq5UfHDw2RFwxb9BJgKjVpjrQw==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
      "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
      "dev": true,
      "requires": {
        "@vue/compiler-core": "3.2.40",
        "@vue/shared": "3.2.40"
        "@vue/compiler-core": "3.2.41",
        "@vue/shared": "3.2.41"
      }
    },
    "@vue/compiler-sfc": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.40.tgz",
      "integrity": "sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
      "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
      "dev": true,
      "requires": {
        "@babel/parser": "^7.16.4",
        "@vue/compiler-core": "3.2.40",
        "@vue/compiler-dom": "3.2.40",
        "@vue/compiler-ssr": "3.2.40",
        "@vue/reactivity-transform": "3.2.40",
        "@vue/shared": "3.2.40",
        "@vue/compiler-core": "3.2.41",
        "@vue/compiler-dom": "3.2.41",
        "@vue/compiler-ssr": "3.2.41",
        "@vue/reactivity-transform": "3.2.41",
        "@vue/shared": "3.2.41",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7",
        "postcss": "^8.1.10",
@@ -245,13 +245,13 @@
      }
    },
    "@vue/compiler-ssr": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.40.tgz",
      "integrity": "sha512-80cQcgasKjrPPuKcxwuCx7feq+wC6oFl5YaKSee9pV3DNq+6fmCVwEEC3vvkf/E2aI76rIJSOYHsWSEIxK74oQ==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
      "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
      "dev": true,
      "requires": {
        "@vue/compiler-dom": "3.2.40",
        "@vue/shared": "3.2.40"
        "@vue/compiler-dom": "3.2.41",
        "@vue/shared": "3.2.41"
      }
    },
    "@vue/devtools-api": {
@@ -260,23 +260,23 @@
      "integrity": "sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw=="
    },
    "@vue/reactivity": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.40.tgz",
      "integrity": "sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
      "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
      "dev": true,
      "requires": {
        "@vue/shared": "3.2.40"
        "@vue/shared": "3.2.41"
      }
    },
    "@vue/reactivity-transform": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.40.tgz",
      "integrity": "sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
      "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
      "dev": true,
      "requires": {
        "@babel/parser": "^7.16.4",
        "@vue/compiler-core": "3.2.40",
        "@vue/shared": "3.2.40",
        "@vue/compiler-core": "3.2.41",
        "@vue/shared": "3.2.41",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7"
      }
@@ -368,9 +368,9 @@
      }
    },
    "@vue/shared": {
      "version": "3.2.40",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.40.tgz",
      "integrity": "sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==",
      "version": "3.2.41",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==",
      "dev": true
    },
    "@vue/tsconfig": {
@@ -641,9 +641,9 @@
      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
    },
    "dayjs": {
      "version": "1.11.5",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
    },
    "de-indent": {
      "version": "1.0.2",
@@ -720,9 +720,9 @@
      "dev": true
    },
    "element-plus": {
      "version": "2.2.18",
      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.18.tgz",
      "integrity": "sha512-2pK2zmVOwP14eFl3rGoR+3BWJwDyO+DZCvzjQ8L6qjUR+hVKwFhgxIcSkKJatbcHFw5Xui6UyN20jV+gQP7mLg==",
      "version": "2.2.19",
      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.19.tgz",
      "integrity": "sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==",
      "requires": {
        "@ctrl/tinycolor": "^3.4.1",
        "@element-plus/icons-vue": "^2.0.6",
@@ -1692,12 +1692,12 @@
      }
    },
    "postcss-nested": {
      "version": "5.0.6",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
      "dev": true,
      "requires": {
        "postcss-selector-parser": "^6.0.6"
        "postcss-selector-parser": "^6.0.10"
      }
    },
    "postcss-selector-parser": {
@@ -2006,9 +2006,9 @@
      "dev": true
    },
    "tailwindcss": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
      "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz",
      "integrity": "sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==",
      "dev": true,
      "requires": {
        "arg": "^5.0.2",
@@ -2017,18 +2017,19 @@
        "detective": "^5.2.1",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
        "fast-glob": "^3.2.11",
        "fast-glob": "^3.2.12",
        "glob-parent": "^6.0.2",
        "is-glob": "^4.0.3",
        "lilconfig": "^2.0.6",
        "micromatch": "^4.0.5",
        "normalize-path": "^3.0.0",
        "object-hash": "^3.0.0",
        "picocolors": "^1.0.0",
        "postcss": "^8.4.14",
        "postcss": "^8.4.17",
        "postcss-import": "^14.1.0",
        "postcss-js": "^4.0.0",
        "postcss-load-config": "^3.1.4",
        "postcss-nested": "5.0.6",
        "postcss-nested": "6.0.0",
        "postcss-selector-parser": "^6.0.10",
        "postcss-value-parser": "^4.2.0",
        "quick-lru": "^5.1.1",
@@ -2366,13 +2367,13 @@
      }
    },
    "vue-tsc": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.0.8.tgz",
      "integrity": "sha512-+0sJ+QVH7SHLt8mV/uIw4xlHDk1mWigZkMFugfZTv8rlHpM3S2tCVZ0BWEGclT/0rKdO8j+St+mljpvhWPN/eQ==",
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.0.9.tgz",
      "integrity": "sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ==",
      "dev": true,
      "requires": {
        "@volar/vue-language-core": "1.0.8",
        "@volar/vue-typescript": "1.0.8"
        "@volar/vue-language-core": "1.0.9",
        "@volar/vue-typescript": "1.0.9"
      }
    },
    "webpack-sources": {

 package.json

@@ -11,9 +11,9 @@
  "dependencies": {
    "axios": "^1.1.3",
    "countup.js": "^2.3.2",
    "dayjs": "^1.11.5",
    "dayjs": "^1.11.6",
    "echarts": "^5.4.0",
    "element-plus": "^2.2.18",
    "element-plus": "^2.2.19",
    "mockjs": "^1.1.0",
    "pinia": "^2.0.21",
    "vue": "^3.2.41",
@@ -22,18 +22,18 @@
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.7",
    "@types/node": "^18.8.0",
    "@types/node": "^18.11.4",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.12",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.18",
    "sass": "^1.55.0",
    "tailwindcss": "^3.1.8",
    "tailwindcss": "^3.2.1",
    "typescript": "~4.7.4",
    "unplugin-auto-import": "^0.11.2",
    "unplugin-vue-components": "^0.22.8",
    "vite": "^3.1.8",
    "vue-tsc": "^1.0.8"
    "vue-tsc": "^1.0.9"
  }
}

 src/assets/img/center_map.png

Binary files differ

 src/assets/img/frame.png

Binary files differ

 src/assets/img/headers/setting.png

 src/components/scale-screen/scale-screen.vue

@@ -1,5 +1,9 @@
<template>

  <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">

  <section

    :style="{ ...styles.box, ...boxStyle }"

    class="v-screen-box"

    ref="box"

  >

    <div

      :style="{ ...styles.wrapper, ...wrapperStyle }"

      class="screen-wrapper"

@@ -10,7 +14,7 @@
  </section>

</template>

<script lang="ts" setup>

import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";

import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";

import type { CSSProperties, PropType } from "vue";

/**

 * 防抖函数

@@ -105,11 +109,27 @@
};



const screenWrapper = ref<HTMLElement>();

const box = ref<HTMLElement>();



watch(

  () => props.autoScale,

  async (newVal: any) => {

    if (newVal) {

      onResize();

      addListener();

    } else {

      clearListener();

      clearScreenWrapperStyle();

    }

  }

);

/**

 * 初始化大屏容器宽高

 */

const initSize = () => {

  return new Promise<void>((resolve) => {

    box.value!.scrollLeft = 0;

    box.value!.scrollTop = 0;

    nextTick(() => {

      // region 获取大屏真实尺寸

      if (props.width && props.height) {

@@ -144,9 +164,14 @@
    screenWrapper.value!.style.height = `${state.originalHeight}px`;

  }

};



const clearScreenWrapperStyle = () => {

  screenWrapper.value!.style.transform = "";

  screenWrapper.value!.style.margin = "";

};

const autoScale = (scale: number) => {

  if (!props.autoScale) return;

  if (!props.autoScale) {

    return;

  }

  const domWidth = screenWrapper.value!.clientWidth;

  const domHeight = screenWrapper.value!.clientHeight;

  const currentWidth = document.body.clientWidth;

@@ -195,17 +220,27 @@
    attributeOldValue: true,

  });

};



const clearListener = () => {

  window.removeEventListener("resize", onResize);

  // state.observer?.disconnect();

};



const addListener = () => {

  window.addEventListener("resize", onResize);

  // initMutationObserver();

};

onMounted(() => {

  nextTick(async () => {

    await initSize();

    updateSize();

    updateScale();

    window.addEventListener("resize", onResize);

    initMutationObserver();

    addListener();

    // initMutationObserver();

  });

});

onUnmounted(() => {

  window.removeEventListener("resize", onResize);

  state.observer?.disconnect();

  clearListener();

  // state.observer?.disconnect();

});

</script>


 src/stores/counter.ts

File was deleted

 src/stores/index.ts

New file
@@ -0,0 +1 @@
export * from "./setting/setting"

 src/stores/setting/setting.ts

New file
@@ -0,0 +1,28 @@
import { ref, computed } from 'vue'

import { defineStore } from 'pinia'

// import { storeToRefs } from 'pinia';

export const useSettingStore = defineStore('setting', () => {

  const settingShow = ref(false);//设置弹窗显隐

  const isScale = ref(false);//是否进行全局适配



  const setSettingShow = (flag:boolean)=>{

    settingShow.value=flag

  }

  const setIsScale = (flag:boolean)=>{

    isScale.value=flag

    setSettingData()

  }

  const initSetting=()=>{

    let settingData:any = localStorage.getItem('loftv-settingData')

    if(settingData){

        settingData=JSON.parse(settingData)

        setIsScale(settingData.isScale)

    }

  }

  const setSettingData=()=>{

    localStorage.setItem('loftv-settingData',JSON.stringify({

        isScale:isScale.value

    }))

  }

  return { settingShow, setSettingShow,isScale ,setIsScale,initSetting,setSettingData}

})


 src/views/HomeView.vue

@@ -3,8 +3,14 @@
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
import Setting from "./setting.vue"
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from 'pinia';

const settingStore = useSettingStore();
const {isScale} =storeToRefs(settingStore)
const wrapperStyle = {};
const autoScale = ref(false);

</script>

<template>
@@ -15,16 +21,17 @@
    :fullScreen="false"
    :boxStyle="{
      background: '#03050C',
      overflow: autoScale ? 'hidden' : 'auto',
      overflow: isScale ? 'hidden' : 'auto',
    }"
    :wrapperStyle="wrapperStyle"
    :autoScale="autoScale"
    :autoScale="isScale"
  >
    <div class="content_wrap">
      <Headers />
      <RouterView />
    </div>
  </scale-screen>
  <Setting/>
</template>
<style lang="scss" scoped>
.content_wrap {

 src/views/header.vue

@@ -2,13 +2,16 @@
import { reactive } from "vue";

import dayjs from 'dayjs';

import type {DateDataType} from "./index.d"

import {useSettingStore} from "@/stores/index"



const dateData = reactive<DateDataType>({

  dateDay: "",

  dateYear: "",

  dateWeek: "",

  timing:null

});

  


const { setSettingShow} =useSettingStore()

const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]

const timeFn = () => {

  dateData.timing = setInterval(() => {

@@ -17,7 +20,6 @@
  }, 1000);

};

timeFn()

const showSetting = () => {};

</script>



<template>

@@ -32,11 +34,10 @@
    </div>

    <div class="timers">

      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}

      <i

        class="blq-icon-shezhi02"

        style="margin-left: 10px"

        @click="showSetting"

      ></i>



      <div class="setting_icon"   @click="setSettingShow(true)">

          <img src="@/assets/img/headers/setting.png" alt="设置">

      </div>

    </div>

  </div>

</template>

@@ -85,8 +86,15 @@
    display: flex;

    align-items: center;



    .blq-icon-shezhi02 {

    .setting_icon {

      width: 20px;

      height: 20px;

      cursor: pointer;

      margin-left: 12px;

      img{

        width: 100%;

        height: 100%;

      }

    }

  }

}


 src/views/setting.vue

@@ -1,13 +1,102 @@
<script setup lang='ts'>

<script setup lang="ts">

import { useSettingStore } from "@/stores/index";

import { ref } from "vue";

const isScaleRadio = ref(false);

const settingStore = useSettingStore();

const init = () => {

  settingStore.initSetting();

  isScaleRadio.value = settingStore.isScale;

};

init();

const handleClose = () => {};



const cancelClick = () => {

  settingStore.setSettingShow(false);

};



const confirmClick = () => {};

const isScaleChange = (flag: boolean) => {

  settingStore.setIsScale(flag);

};

const radiochange = (blag: boolean, type: string) => {

  console.log(blag, type);

  settingStore.setIsScale(blag);

  // this.$store.commit('setting/updateSwiper', { val, type })

  // if(type==='isScale'){

  //     // this.$router.go(0)

  //     // location.reload()

  //     // window.location.href=window.location.href+"?t="+Date.now()

  // }

};

</script>



<template>

  <div class=''>



  </div>

  <el-drawer v-model="settingStore.settingShow" direction="rtl">

    <template #header>

      <h2 class="setting-title">设置</h2>

    </template>

    <template #default>

      <div class="left_shu">全局设置</div>

      <div class="setting_item">

        <span class="setting_label">

          是否进行自动适配<span class="setting_label_tip"

            >(默认分辨率1920*1080)</span

          >:

        </span>

        <div class="setting_content">

          <el-radio-group v-model="isScaleRadio" @change="isScaleChange">

            <el-radio :label="true">是</el-radio>

            <el-radio :label="false">否</el-radio>

          </el-radio-group>

        </div>

      </div>

    </template>

    <!-- <template #footer>

      <div style="flex: auto">

        <el-button @click="cancelClick">取消</el-button>

        <el-button type="primary" @click="confirmClick">确定</el-button>

      </div>

    </template> -->

  </el-drawer>

</template>



<style scoped lang='scss'>

<style scoped lang="scss">

.setting-title {

  font-size: 20px;

  color: #000;

  font-weight: 900;

  text-align: center;

  line-height: 1;

}

.left_shu {

  color: #000;

  font-weight: 900;

  position: relative;

  text-indent: 10px;

  padding: 16px 0 10px 0;

  line-height: 1;

  &::before {

    display: block;

    content: " ";

    height: 16px;

    width: 4px;

    border-radius: 2px;

    background: #0072ff;

    position: absolute;

    left: 0px;

  }

}

.setting_item {

  font-size: 14px;

  line-height: 1.5;



</style>
  // display: flex;

  .setting_label {

    color: #555454;

  }

  .setting_label_tip {

    font-size: 12px;

    color: #838282;

  }

}

</style>