Skip to content

V
vue3-quasar-ts-study01
Commit 56d5da3f authored by hucy's avatar hucy ☘
Browse files
Options

feat:提交

parents
Show whitespace changes
Inline Side-by-side
Showing with 8274 additions and 0 deletions
.editorconfig 0 → 100644
View file @ 56d5da3f
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintignore 0 → 100644
View file @ 56d5da3f
/dist
/src-bex/www
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.js
babel.config.js
/src-ssr
.eslintrc.js 0 → 100644
View file @ 56d5da3f
module.exports = {
// https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
// This option interrupts the configuration hierarchy at this file
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
root: true,
// https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
// Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
// `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
parserOptions: {
parser: require.resolve('@typescript-eslint/parser'),
extraFileExtensions: ['.vue'],
},
env: {
browser: true,
es2021: true,
node: true,
'vue/setup-compiler-macros': true,
},
// Rules order is important, please avoid shuffling them
extends: [
// Base ESLint recommended rules
// 'eslint:recommended',
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
// ESLint typescript rules
'plugin:@typescript-eslint/recommended',
// Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented!
// See https://eslint.vuejs.org/rules/#available-rules
'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
// https://github.com/prettier/eslint-config-prettier#installation
// usage with Prettier, provided by 'eslint-config-prettier'.
'prettier',
],
plugins: [
// required to apply rules which need type information
'@typescript-eslint',
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
// required to lint *.vue files
'vue',
// https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
// Prettier has not been included as plugin to avoid performance impact
// add it as an extension for your IDE
],
globals: {
ga: 'readonly', // Google Analytics
cordova: 'readonly',
__statics: 'readonly',
__QUASAR_SSR__: 'readonly',
__QUASAR_SSR_SERVER__: 'readonly',
__QUASAR_SSR_CLIENT__: 'readonly',
__QUASAR_SSR_PWA__: 'readonly',
process: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly',
},
// add your custom rules here
rules: {
'prefer-promise-reject-errors': 'off',
quotes: ['warn', 'single', { avoidEscape: true }],
// this rule, if on, would require explicit return type on the `render` function
'@typescript-eslint/explicit-function-return-type': 'off',
// in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
'@typescript-eslint/no-var-requires': 'off',
// The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
// does not work with type definitions
'no-unused-vars': 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'@typescript-eslint/no-explicit-any': ['off'],
// 防止this变量和局部变量混淆
'@typescript-eslint/no-this-alias': ['off'],
},
};
.gitignore 0 → 100644
View file @ 56d5da3f
.DS_Store
.thumbs.db
node_modules
# Quasar core related directories
.quasar
/dist
# Cordova related directories and files
/src-cordova/node_modules
/src-cordova/platforms
/src-cordova/plugins
/src-cordova/www
# Capacitor related directories and files
/src-capacitor/www
/src-capacitor/node_modules
# BEX related directories and files
/src-bex/www
/src-bex/js/core
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
.postcssrc.js 0 → 100644
View file @ 56d5da3f
/* eslint-disable */
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: [
// to edit target browsers: use "browserslist" field in package.json
require('autoprefixer')
]
}
.prettierrc 0 → 100644
View file @ 56d5da3f
{
"singleQuote": true,
"semi": true
}
.vscode/extensions.json 0 → 100644
View file @ 56d5da3f
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig",
"johnsoncodehk.volar",
"wayou.vscode-todo-highlight"
],
"unwantedRecommendations": [
"octref.vetur",
"hookyqr.beautify",
"dbaeumer.jshint",
"ms-vscode.vscode-typescript-tslint-plugin"
]
}
\ No newline at end of file
.vscode/settings.json 0 → 100644
View file @ 56d5da3f
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.fixAll.eslint"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"vue"
],
"typescript.tsdk": "node_modules/typescript/lib"
}
\ No newline at end of file
README.md 0 → 100644
View file @ 56d5da3f
# Quasar App (my-study01)
A Quasar Project
## Install the dependencies
```bash
yarn
# or
npm install
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```
### Lint the files
```bash
yarn lint
# or
npm run lint
```
### Format the files
```bash
yarn format
# or
npm run format
```
### Build the app for production
```bash
quasar build
```
### Customize the configuration
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).
babel.config.js 0 → 100644
View file @ 56d5da3f
/* eslint-disable */
module.exports = api => {
return {
presets: [
[
'@quasar/babel-preset-app',
api.caller(caller => caller && caller.target === 'node')
? { targets: { node: 'current' } }
: {}
]
]
}
}
package-lock.json 0 → 100644
View file @ 56d5da3f
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 56d5da3f
{
"name": "my-study01",
"version": "0.0.1",
"description": "A Quasar Project",
"productName": "yayaya",
"author": "hucy <cy.hu@topibd.com>",
"private": true,
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"@antv/x6": "^1.32.11",
"@quasar/extras": "^1.0.0",
"ag-grid-community": "^28.0.0",
"ag-grid-vue3": "^28.0.0",
"axios": "^0.27.2",
"core-js": "^3.6.5",
"echarts": "^5.3.2",
"lodash-es": "^4.17.21",
"mitt": "^3.0.0",
"pinia": "^2.0.14",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@quasar/app-webpack": "^3.0.0",
"@types/lodash-es": "^4.17.6",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^8.5.0",
"prettier": "^2.5.1"
},
"browserslist": [
"last 10 Chrome versions",
"last 10 Firefox versions",
"last 4 Edge versions",
"last 7 Safari versions",
"last 8 Android versions",
"last 8 ChromeAndroid versions",
"last 8 FirefoxAndroid versions",
"last 10 iOS versions",
"last 5 Opera versions"
],
"engines": {
"node": ">= 12.22.1",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
}
public/favicon.svg 0 → 100644
View file @ 56d5da3f
<svg xml:space="preserve" style="enable-background:new 0 0 1024 1024;" viewBox="0 0 1024 1024" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="图层_1" version="1.1">
<style type="text/css">
.st0{fill:#EB7084;}
.st1{fill:#E50012;}
.st2{fill:#D3181A;}
.st3{clip-path:url(#SVGID_2_);}
.st4{fill:#F7CAC1;}
.st5{fill:#F7CBC2;}
.st6{fill:#F7CCC3;}
.st7{fill:#F7CDC4;}
.st8{fill:#F8CEC5;}
.st9{fill:#F8CFC6;}
.st10{fill:#F8D0C7;}
.st11{fill:#F8D1C8;}
.st12{fill:#F8D2C9;}
.st13{fill:#F8D3CA;}
.st14{fill:#F9D4CB;}
.st15{fill:#F9D5CC;}
.st16{fill:#F9D6CD;}
.st17{fill:#F9D7CE;}
.st18{fill:#F9D8CF;}
.st19{fill:#F9D9D0;}
.st20{fill:#FADAD1;}
.st21{fill:#FADBD2;}
.st22{fill:#FADCD3;}
.st23{fill:#FADDD4;}
.st24{fill:#FADED5;}
.st25{fill:#FADFD6;}
.st26{fill:#FBE0D7;}
.st27{fill:#FBE1D8;}
.st28{fill:#FBE2D9;}
.st29{fill:#FBE4DA;}
.st30{fill:#FBE5DB;}
.st31{fill:#FBE6DC;}
.st32{fill:#FBE7DD;}
.st33{fill:#FCE8DE;}
.st34{fill:#FCE9DF;}
.st35{fill:#FCEAE0;}
.st36{fill:#FCEBE1;}
.st37{fill:#FCECE2;}
.st38{fill:#FCEDE3;}
.st39{fill:#FDEEE4;}
.st40{fill:#FDEFE5;}
.st41{fill:#FDF0E6;}
.st42{fill:#FDF1E7;}
.st43{fill:#FDF2E8;}
.st44{fill:#FDF3E9;}
.st45{fill:#FEF4EA;}
.st46{fill:#FEF5EB;}
.st47{fill:#FEF6EC;}
.st48{fill:#FEF7ED;}
.st49{fill:#FEF8EE;}
.st50{fill:#FEF9EF;}
.st51{fill:#FFFAF0;}
.st52{fill:#FFFBF1;}
.st53{fill:#FFFCF2;}
.st54{fill:#FFFDF3;}
.st55{clip-path:url(#SVGID_4_);}
.st56{fill:#270604;}
.st57{fill:#280704;}
.st58{fill:#290805;}
.st59{fill:#2A0905;}
.st60{fill:#2B0A06;}
.st61{fill:#2C0B06;}
.st62{fill:#2D0C07;}
.st63{fill:#2E0D07;}
.st64{fill:#2F0E07;}
.st65{fill:#300F08;}
.st66{fill:#311008;}
.st67{fill:#321109;}
.st68{fill:#331209;}
.st69{fill:#34140A;}
.st70{fill:#34150A;}
.st71{fill:#35160A;}
.st72{fill:#36170B;}
.st73{fill:#37180B;}
.st74{fill:#38190C;}
.st75{fill:#391A0C;}
.st76{fill:#3A1B0C;}
.st77{fill:#3B1C0D;}
.st78{fill:#3C1D0D;}
.st79{fill:#3D1E0E;}
.st80{fill:#3E1F0E;}
.st81{fill:#3F200F;}
.st82{fill:#40210F;}
.st83{fill:#FFFFFF;}
.st84{fill:#1C0606;}
.st85{fill:#411408;}
.st86{fill:#F7CFCB;}
.st87{fill:#72201D;}
.st88{clip-path:url(#SVGID_6_);}
.st89{fill:#CA4F19;}
.st90{fill:#F29700;}
.st91{fill:#F8D2D9;}
.st92{fill:#8E2A22;}
.st93{fill:#00A851;}
.st94{fill:#4EB56F;}
.st95{fill:#4B0D18;}
.st96{fill:#EF8017;}
.st97{fill:#FFF000;}
.st98{clip-path:url(#SVGID_8_);}
.st99{clip-path:url(#SVGID_10_);}
.st100{fill:#F2A398;}
.st101{fill:#330904;}
.st102{fill:#41120D;}
.st103{fill:#F8CDC7;}
.st104{fill:#E2263A;}
.st105{fill:#FFFAF3;}
</style>
<path d="M887.3,414.2c-1.6-0.1-3.2-0.1-4.8-0.1c-24,0-47.1,8.9-64.9,24.9c-16.6,15.1-38.3,23.4-60.7,23.5c-6.3,0-12.5-0.7-18.7-2
c2.7-39.2,1.2-77.4-7.4-106.8c-28.2-96.1-183.5-96.1-258.1-96.1c-76,0-118.2,89.7-127.6,112.1c-19.1,8.8-35.8,22.2-48.6,38.9
c-4.9-5.1-8.9-11-11.8-17.5c-12-27.6-37.3-47.1-67.1-51.7c-4.3-0.7-8.7-1-13.1-1c-38.7,0-73.4,25.8-84.3,62.8
c-13.8,46.5,12.7,95.3,59.1,109.1c1.2,0.3,2.3,0.7,3.5,1c23.5,6,48.3,1.9,68.7-11.1c3.9-2.4,8-4.4,12.4-5.9
c-0.4,1.1-0.6,2.3-0.6,3.5v14c0,1,0,1.8,0,2.5v22.8c0,2,0.5,3.9,1.4,5.7l-0.5,2.2c-0.4,2.2-0.4,4.5,0,6.8
c-4.4,20-8.6,38.7-10.4,45.2c-1.1,4.1-4.2,10.5-7.7,17.8c-8.5,17.7-20.1,41.9-22.3,70.5c-2.5,32.5,3.6,139.8,187,155.3
c19.9,1.7,46.1,3.6,72.3,3.6l0,0c45.2,0,82.5-5.8,114-17.6c6.5-2.4,12.8-5.4,18.8-8.9c26-0.5,67.2-15.4,86.3-64.5
c18.7-11.2,33.5-30.9,39.4-54.8c7.7-31.4-1.5-62.4-21.2-81l7.4-16.5c5.6-12.2,3.5-26.5-5.2-36.7c1.8-7.9,3.5-16.1,5.1-24.6
c9.5,2.7,19.1,4.8,28.8,6.5c20.3,3.5,38.8,14,53.4,30.2c35.9,40,97.4,43.4,137.4,7.5c21.6-19.4,33.5-47.4,32.3-76.4
C977.8,457.6,937.2,416.6,887.3,414.2z"></path>
<path d="M416.4,447.5c-4-12.5-17.3-19.4-29.8-15.4c-0.3,0.1-23,7-56.4,4.9c-25.2-1.6-46.5-17.9-56.6-41
c-10.3-23.8-32.2-40.6-57.9-44.5c-36.9-5.7-73.3,17.5-83.9,53.2c-11.9,40,11,82.1,51,94c21,6.2,43.6,3,62.1-8.7
c14.6-9.3,32.1-13.2,49.1-9.8c15.9,3.2,32.2,4.8,48.4,4.8c34.3,0,57-7.2,58.6-7.7C413.6,473.3,420.4,460,416.4,447.5z" class="st0"></path>
<path d="M415.5,448.4c-4-12.5-17.3-19.4-29.9-15.4c-0.3,0.1-23,7-56.4,4.9c-25.2-1.6-46.5-17.9-56.6-41
c-10.3-23.8-32.2-40.6-57.9-44.5c-36.9-5.8-73.3,17.4-83.9,53.2c-11.9,40,10.9,82.1,50.9,94c21,6.3,43.7,3.1,62.2-8.7
c14.6-9.3,32.1-13.2,49.1-9.8c15.9,3.2,32.1,4.8,48.4,4.9c34.3,0,57-7.2,58.6-7.7C412.7,474.3,419.5,460.9,415.5,448.4z" class="st1"></path>
<path d="M275.5,515.7c0,0-4-101.9,79-136.9c0,0,40.7-109.1,118.2-109.1s221.3,1.4,246.5,87.4s-14,250.5-33.7,281.6
c0,0-47.2-37.1-117.7-71.8C488.5,528,379.9,492.2,275.5,515.7z" class="st1"></path>
<path d="M606.6,542.2c-2-0.8,2.2-28.6,2.5-31.7c1.6-12.7,4.1-25.5,8.3-37.6c4-11.3,9.6-22.5,18.2-31.1
c9.4-9.3,23.8-11,32.3-20.7c10.6-12,21.6-65,21.6-65.2c1.1-5.4,2.3-11.4,5.4-16.1c12.6-19.3,20.3,11.3,22,20.6
c2.6,15,4.2,30.2,5,45.5c2.6,44,1,88.1-4.7,131.8c-4.6,36-11.9,71.7-23.3,106.1C694,643.8,681,573.5,606.6,542.2z" class="st2"></path>
<path d="M351.8,385c0,0,40.7-109.1,118.2-109.1s221.3,1.4,246.5,87.4c22.2,75.6-5.5,211.8-25.8,264.8
c20.5-46.9,51.9-192.6,28.7-271.7c-25.2-86-169-87.4-246.5-87.4S354.6,378,354.6,378c-37,15.6-56.7,44.5-67.2,71.8
C298.5,424.7,317.9,399.3,351.8,385z" class="st0"></path>
<g>
<defs>
<path d="M289.3,493.5c0,0-19.3,90.4-23.7,106.7s-26.7,47.4-29.6,86s10.8,128.3,176,142.3
c58.8,5,124.7,7.9,181.1-13.2c45.1-16.9,81.7-64.3,97.3-108.3c11-31,11.3-60.3,11.3-92.6C701.7,592.1,557.6,440.1,289.3,493.5z" id="SVGID_1_"></path>
</defs>
<clipPath id="SVGID_2_">
<use style="overflow:visible;" xlink:href="#SVGID_1_"></use>
</clipPath>
<g class="st3">
<rect height="396.2" width="468.7" class="st4" y="440.1" x="233"></rect>
<path d="M674.7,657.1c0,68.5-34.1,132.5-90.8,170.8c-5.5,3.7-11.1,7.1-17,10.3v-0.9H370.4v0.9
c-5.8-3.2-11.5-6.6-17-10.3c-56.8-38.3-90.8-102.3-90.8-170.8c0-113.8,92.2-206,206-206S674.7,543.3,674.7,657.1z" class="st4"></path>
<path d="M670.6,657.1c0,81.2-48.6,154.5-123.4,186.1v-5.9H390v5.9c-74.7-31.7-123.3-104.9-123.4-186.1
c0-111.6,90.4-202,202-202S670.6,545.5,670.6,657.1z" class="st5"></path>
<path d="M666.6,657.1c0,79.6-47.6,151.4-120.9,182.4v-2.2H391.6v2.2c-73.3-31-120.9-102.8-120.9-182.4
c0-109.3,88.6-198,198-198S666.6,547.8,666.6,657.1z" class="st6"></path>
<path d="M662.5,657.1c0,77.9-46.7,148.3-118.4,178.7c-5.8,2.5-11.8,4.6-17.8,6.5v-5H411v5c-6-1.9-12-4-17.8-6.5
C321.4,805.4,274.8,735,274.7,657.1c0-107.1,86.8-193.9,193.9-193.9S662.5,550,662.5,657.1z" class="st7"></path>
<path d="M658.5,657.1c0,90.1-63.3,167.9-151.6,186v-5.8h-76.5v5.8c-12.2-2.5-24.2-6.2-35.6-11.1
c-70.3-29.7-116-98.6-116-174.9c0-104.9,85-189.9,189.9-189.9S658.5,552.2,658.5,657.1z" class="st8"></path>
<circle r="185.8" cy="657.1" cx="468.6" class="st9"></circle>
<circle r="181.8" cy="657.1" cx="468.6" class="st10"></circle>
<circle r="177.8" cy="657.1" cx="468.6" class="st11"></circle>
<circle r="173.7" cy="657.1" cx="468.6" class="st12"></circle>
<circle r="169.7" cy="657.1" cx="468.6" class="st13"></circle>
<circle r="165.6" cy="657.1" cx="468.6" class="st14"></circle>
<circle r="161.6" cy="657.1" cx="468.6" class="st15"></circle>
<circle r="157.5" cy="657.1" cx="468.6" class="st16"></circle>
<circle r="153.5" cy="657.1" cx="468.6" class="st17"></circle>
<circle r="149.5" cy="657.1" cx="468.6" class="st18"></circle>
<circle r="145.4" cy="657.1" cx="468.6" class="st19"></circle>
<circle r="141.4" cy="657.1" cx="468.6" class="st20"></circle>
<circle r="137.3" cy="657.1" cx="468.6" class="st21"></circle>
<circle r="133.3" cy="657.1" cx="468.6" class="st22"></circle>
<circle r="129.3" cy="657.1" cx="468.6" class="st23"></circle>
<circle r="125.2" cy="657.1" cx="468.6" class="st24"></circle>
<circle r="121.2" cy="657.1" cx="468.6" class="st25"></circle>
<circle r="117.2" cy="657.1" cx="468.6" class="st26"></circle>
<circle r="113.1" cy="657.1" cx="468.6" class="st27"></circle>
<circle r="109.1" cy="657.1" cx="468.6" class="st28"></circle>
<circle r="105" cy="657.1" cx="468.6" class="st29"></circle>
<circle r="101" cy="657.1" cx="468.6" class="st30"></circle>
<circle r="97" cy="657.1" cx="468.6" class="st31"></circle>
<circle r="92.9" cy="657.1" cx="468.6" class="st32"></circle>
<circle r="88.9" cy="657.1" cx="468.6" class="st33"></circle>
<circle r="84.8" cy="657.1" cx="468.6" class="st34"></circle>
<circle r="80.8" cy="657.1" cx="468.6" class="st35"></circle>
<circle r="76.8" cy="657.1" cx="468.6" class="st36"></circle>
<circle r="72.7" cy="657.1" cx="468.6" class="st37"></circle>
<circle r="68.7" cy="657.1" cx="468.6" class="st38"></circle>
<circle r="64.6" cy="657.1" cx="468.6" class="st39"></circle>
<circle r="60.6" cy="657.1" cx="468.6" class="st40"></circle>
<circle r="56.6" cy="657.1" cx="468.6" class="st41"></circle>
<ellipse ry="52.5" rx="52.5" cy="657.1" cx="468.6" class="st42" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -327.3784 523.8387)"></ellipse>
<circle r="48.5" cy="657.1" cx="468.6" class="st43"></circle>
<circle r="44.4" cy="657.1" cx="468.6" class="st44"></circle>
<circle r="40.4" cy="657.1" cx="468.6" class="st45"></circle>
<circle r="36.4" cy="657.1" cx="468.6" class="st46"></circle>
<circle r="32.3" cy="657.1" cx="468.6" class="st47"></circle>
<circle r="28.3" cy="657.1" cx="468.6" class="st48"></circle>
<circle r="24.2" cy="657.1" cx="468.6" class="st49"></circle>
<circle r="20.2" cy="657.1" cx="468.6" class="st50"></circle>
<circle r="16.2" cy="657.1" cx="468.6" class="st51"></circle>
<circle r="12.1" cy="657.1" cx="468.6" class="st52"></circle>
<circle r="8.1" cy="657.1" cx="468.6" class="st53"></circle>
<circle r="4" cy="657.1" cx="468.6" class="st54"></circle>
</g>
</g>
<g>
<defs>
<path d="M583.2,521.7c7.1,8.1,34.8,94.6,3.4,128.8c-2.3,2.6-3.5,5.9-3.4,9.3v7.5c0,8,6.5,14.6,14.5,14.6
c1.4,0,2.8-0.2,4.1-0.6c23.6-7,62.2-26.2,69.8-77.9C682.8,528,583.2,521.7,583.2,521.7z" id="SVGID_3_"></path>
</defs>
<clipPath id="SVGID_4_">
<use style="overflow:visible;" xlink:href="#SVGID_3_"></use>
</clipPath>
<g class="st55">
<rect height="162.4" width="99.5" class="st56" y="521.7" x="583.2"></rect>
<path d="M683.8,601.8v25.2h3.8c-13.9,33-51.9,48.4-84.9,34.4c-7.7-3.2-14.7-8-20.6-13.9h0.1v-91.6h-0.1
c25.3-25.3,66.3-25.3,91.6,0c5.9,5.9,10.6,12.9,13.8,20.6h-3.8V601.8z" class="st56"></path>
<path d="M690.3,601.8c0,34.5-27.9,62.4-62.4,62.4c-20.7,0-40.1-10.3-51.7-27.5h6.1V567h-6.1c2.2-3.3,4.8-6.4,7.6-9.2
c24.4-24.4,63.9-24.3,88.2,0C683.7,569.5,690.3,585.3,690.3,601.8L690.3,601.8z" class="st57"></path>
<path d="M687.9,601.8c0,33.1-26.9,60-60.1,59.9c-19.9,0-38.5-9.9-49.6-26.4h4.1v-67.1h-4.1
c18.6-27.4,55.9-34.7,83.3-16.1C677.9,563.4,687.8,582,687.9,601.8z" class="st58"></path>
<path d="M685.5,601.8c0,31.8-25.8,57.6-57.6,57.6c-15.3,0-29.9-6.1-40.7-16.9c-2.6-2.6-4.9-5.5-7-8.5h2.1v-64.4h-2.1
c2-3.1,4.4-5.9,7-8.5c22.5-22.5,58.9-22.5,81.4,0C679.4,571.9,685.5,586.6,685.5,601.8L685.5,601.8z" class="st59"></path>
<path d="M683.1,601.8c0,30.5-24.8,55.2-55.3,55.1c-22.1,0-42.1-13.3-50.7-33.6h5.2v-43h-5.2
c11.9-28.1,44.3-41.2,72.3-29.3C669.8,559.6,683.1,579.6,683.1,601.8L683.1,601.8z" class="st60"></path>
<path d="M680.7,601.8c0,29.2-23.7,52.8-52.8,52.7c-21.2,0-40.3-12.7-48.6-32.2h3v-41.1h-3
c11.3-26.9,42.3-39.4,69.2-28.1C668,561.5,680.7,580.6,680.7,601.8z" class="st61"></path>
<circle r="50.4" cy="601.8" cx="627.9" class="st62"></circle>
<circle r="48" cy="601.8" cx="627.9" class="st63"></circle>
<circle r="45.6" cy="601.8" cx="627.9" class="st64"></circle>
<circle r="43.2" cy="601.8" cx="627.9" class="st65"></circle>
<circle r="40.8" cy="601.8" cx="627.9" class="st66"></circle>
<circle r="38.4" cy="601.8" cx="627.9" class="st67"></circle>
<circle r="36" cy="601.8" cx="627.9" class="st68"></circle>
<circle r="33.6" cy="601.8" cx="627.9" class="st69"></circle>
<circle r="31.2" cy="601.8" cx="627.9" class="st70"></circle>
<circle r="28.8" cy="601.8" cx="627.9" class="st71"></circle>
<circle r="26.4" cy="601.8" cx="627.9" class="st72"></circle>
<circle r="24" cy="601.8" cx="627.9" class="st73"></circle>
<circle r="21.6" cy="601.8" cx="627.9" class="st74"></circle>
<circle r="19.2" cy="601.8" cx="627.9" class="st75"></circle>
<circle r="16.8" cy="601.8" cx="627.9" class="st76"></circle>
<circle r="14.4" cy="601.8" cx="627.9" class="st77"></circle>
<circle r="12" cy="601.8" cx="627.9" class="st78"></circle>
<circle r="9.6" cy="601.8" cx="627.9" class="st79"></circle>
<circle r="7.2" cy="601.8" cx="627.9" class="st80"></circle>
<circle r="4.8" cy="601.8" cx="627.9" class="st81"></circle>
<circle r="2.4" cy="601.8" cx="627.9" class="st82"></circle>
</g>
</g>
<circle r="25.8" cy="657.6" cx="333.3" class="st83"></circle>
<circle r="25.8" cy="655.8" cx="333.5" class="st84"></circle>
<circle r="14.6" cy="651.7" cx="337.1" class="st85"></circle>
<circle r="8.9" cy="649.8" cx="343.3" class="st83"></circle>
<circle r="25.8" cy="671" cx="450.5" class="st83"></circle>
<circle r="25.8" cy="669.3" cx="450.7" class="st84"></circle>
<circle r="14.6" cy="665.2" cx="454.3" class="st85"></circle>
<circle r="8.9" cy="663.3" cx="460.5" class="st83"></circle>
<circle r="10.7" cy="725.8" cx="342.1" class="st86"></circle>
<circle r="10.7" cy="731.4" cx="428.1" class="st86"></circle>
<path d="M384.2,752.1c-27.5-1.8-46.3-22.4-46.5-22.7c-2-2.2-1.8-5.7,0.4-7.6c2.2-2,5.7-1.8,7.6,0.4
c1.4,1.6,36.1,39.3,79.1,4.5c2.3-1.9,5.7-1.5,7.6,0.8s1.5,5.7-0.8,7.6C414.5,749,398.2,753,384.2,752.1z" class="st87"></path>
<g>
<defs>
<path d="M285.2,505.6l-9.1,42c-0.6,2.6,1.1,5.2,3.7,5.7c1.1,0.2,2.2,0.1,3.2-0.4c9.5-4.9,25.4-11.5,43.9-12.4
c6.8-0.2,13.4,1.7,19,5.6l17.5,11.8l3.9-8c4.6,2.9,9,6,13.2,9.5c8.8,7.3,21.2,8.7,31.4,3.6c10.2-5,20.8-8.9,31.9-11.5v6.5
l50.1-8.6c3.5-0.6,7.1-0.7,10.6-0.2c4.6,0.7,9.3,1.6,14.2,2.8c54.3,13.2,71.4,56.3,76.6,78.7c0.6,2.6,3.2,4.2,5.8,3.6
c1.4-0.3,2.5-1.2,3.2-2.5l39.2-74.5c1.1-2,0.6-4.6-1.2-6c-19.9-16.1-138.5-101.7-353.4-49.3C287.1,502.4,285.7,503.8,285.2,505.6z" id="SVGID_5_"></path>
</defs>
<clipPath id="SVGID_6_">
<use style="overflow:visible;" xlink:href="#SVGID_5_"></use>
</clipPath>
<g class="st88">
<rect height="186.1" width="369.3" class="st56" y="449.5" x="275.3"></rect>
<path d="M600.3,559.7c0,27.9-8.3,55.3-24,78.4v-1.5H343.8v1.5c-43.3-64.2-26.3-151.3,37.9-194.7v5.1h156.8v-5.1
C577.1,469.5,600.3,513.1,600.3,559.7L600.3,559.7z" class="st56"></path>
<path d="M595.1,559.7c0,26.9-8,53.2-23.1,75.5c-1.2,1.8-2.5,3.6-3.8,5.3v-3.9H351.9v3.9c-1.3-1.7-2.5-3.5-3.8-5.3
c-36.2-53.6-29.3-125.3,16.5-171c6.1-6.1,12.8-11.6,20-16.5v0.8h151v-0.8c7.2,4.8,13.9,10.4,20,16.5
C580.9,489.5,595.2,523.9,595.1,559.7z" class="st57"></path>
<path d="M589.9,559.7c0,25.9-7.7,51.2-22.2,72.6c-2.3,3.5-4.8,6.8-7.5,10v-5.7H359.9v5.7c-2.7-3.2-5.2-6.5-7.5-10
c-40-59.5-24.3-140.1,35.1-180.2c3.5-2.3,7-4.5,10.7-6.5v3H522v-3c3.7,2,7.2,4.2,10.7,6.5c6.9,4.7,13.3,10,19.2,15.9
C576.3,492.2,590,525.3,589.9,559.7z" class="st58"></path>
<path d="M584.7,559.7c0,24.8-7.4,49.1-21.3,69.7c-2.2,3.3-4.6,6.5-7.2,9.6v-2.4H363.9v2.4c-2.5-3.1-4.9-6.3-7.2-9.6
c-38.5-57.2-23.3-134.7,33.8-173.2c6.6-4.5,13.7-8.3,21-11.4v3.7h97v-3.7C554.7,464.4,584.6,509.6,584.7,559.7L584.7,559.7z" class="st59"></path>
<path d="M579.5,559.7c0,23.8-7.1,47.1-20.4,66.8c-2.1,3.2-4.4,6.2-6.9,9.2c-1.2,1.5-2.5,2.9-3.8,4.3v-3.4H371.6v3.4
c-1.3-1.4-2.5-2.9-3.8-4.3c-2.4-3-4.7-6-6.9-9.2c-36.9-54.7-22.4-128.9,32.3-165.8c12.9-8.7,27.4-14.8,42.7-18v5.9h48.1v-5.9
C539.7,454.1,579.5,503,579.5,559.7L579.5,559.7z" class="st60"></path>
<path d="M574.3,559.7c0,30.3-12,59.4-33.5,80.8v-3.9H379.3v3.9c-44.6-44.6-44.6-117,0-161.6
c44.6-44.6,117-44.6,161.6,0C562.3,500.4,574.3,529.4,574.3,559.7z" class="st61"></path>
<path d="M569.1,559.7c0,28.9-11.5,56.7-32,77.1v-0.2H383v0.2c-42.6-42.6-42.6-111.6,0-154.2s111.6-42.6,154.2,0
C557.7,503.1,569.2,530.8,569.1,559.7L569.1,559.7z" class="st62"></path>
<path d="M563.9,559.7c0,27.6-10.9,54-30.4,73.5c-2.4,2.3-4.8,4.6-7.4,6.7v-3.2H394v3.2c-2.6-2.1-5-4.4-7.4-6.7
c-40.6-40.6-40.6-106.3,0-146.9s106.3-40.6,146.9,0C553,505.7,563.9,532.2,563.9,559.7L563.9,559.7z" class="st63"></path>
<path d="M558.7,559.7c0,26.2-10.4,51.3-28.9,69.8c-4.5,4.5-9.4,8.5-14.6,12v-4.9H404.9v4.9
c-45.2-30.5-57.1-91.8-26.6-137c30.5-45.2,91.8-57.1,137-26.6C542.4,496.2,558.7,526.9,558.7,559.7L558.7,559.7z" class="st64"></path>
<path d="M553.5,559.7c0,24.8-9.8,48.6-27.4,66.1c-4.2,4.2-8.9,8.1-13.8,11.4v-0.6H407.8v0.6
c-42.8-28.9-54.1-87-25.3-129.8s87-54.1,129.8-25.3C538.1,499.6,553.5,528.6,553.5,559.7L553.5,559.7z" class="st65"></path>
<path d="M548.3,559.7c0,35.5-21.2,67.5-53.9,81.3v-4.4h-68.7v4.4c-44.9-19-66-70.8-47-115.7
c19-44.9,70.8-66,115.7-47C527.1,492.2,548.3,524.2,548.3,559.7L548.3,559.7z" class="st66"></path>
<circle r="83.1" cy="559.7" cx="460.1" class="st67"></circle>
<circle r="77.9" cy="559.7" cx="460.1" class="st68"></circle>
<ellipse ry="72.7" rx="72.7" cy="559.7" cx="460.1" class="st69" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -261.0333 489.2497)"></ellipse>
<circle r="67.5" cy="559.7" cx="460.1" class="st70"></circle>
<circle r="62.3" cy="559.7" cx="460.1" class="st71"></circle>
<circle r="57.1" cy="559.7" cx="460.1" class="st72"></circle>
<circle r="51.9" cy="559.7" cx="460.1" class="st73"></circle>
<circle r="46.7" cy="559.7" cx="460.1" class="st74"></circle>
<circle r="41.5" cy="559.7" cx="460.1" class="st75"></circle>
<circle r="36.3" cy="559.7" cx="460.1" class="st76"></circle>
<circle r="31.2" cy="559.7" cx="460.1" class="st77"></circle>
<circle r="26" cy="559.7" cx="460.1" class="st78"></circle>
<circle r="20.8" cy="559.7" cx="460.1" class="st79"></circle>
<circle r="15.6" cy="559.7" cx="460.1" class="st80"></circle>
<circle r="10.4" cy="559.7" cx="460.1" class="st81"></circle>
<circle r="5.2" cy="559.7" cx="460.1" class="st82"></circle>
</g>
</g>
<path d="M275.5,537.2c0,0,127.4-35.1,258.1,3.4C591.1,557.5,646,582,696.5,641.1l20.4-45.1c4-8.9,1.9-19.3-5.3-25.9
c-41.6-37.5-192.1-149.5-436-72.2L275.5,537.2z" class="st89"></path>
<path d="M275.5,531.8c0,0,123.9-33.2,248.7-2.4c62.3,15.4,117.2,41.8,172.3,106.3l20.4-45.1c4-8.9,1.9-19.3-5.3-25.9
c-41.6-37.5-192.1-149.5-436-72.2L275.5,531.8z" class="st90"></path>
<path d="M437.3,615c0,0-8.2,7.8-0.7,14.4s59.5,1.5,61.1-8.5S472.5,591,437.3,615z" class="st84"></path>
<path d="M368.1,609c0,0,5.2,10.1-4,13.8s-56.7-18-54.9-28S342.8,574.9,368.1,609z" class="st84"></path>
<path d="M337.4,499.5c0,0,5.4-63.6,77.9-66.7c80-3.4,84.5,59.3,84.5,59.3L337.4,499.5z" class="st90"></path>
<path d="M375.8,380.8c0,0,91.9-22.2,186.8,16.3C562.6,397.1,485.5,334.9,375.8,380.8z" class="st91"></path>
<path d="M408.3,506.5c-18.7,0-34-14.9-34-33.1s15.2-33.1,34-33.1s34,14.9,34,33.1S427,506.5,408.3,506.5z" class="st92"></path>
<ellipse ry="28.2" rx="29.1" cy="473.4" cx="408.3" class="st93"></ellipse>
<ellipse ry="19.1" rx="19.6" cy="470.5" cx="411.9" class="st94"></ellipse>
<path d="M886.7,426.4c-22.4-1.1-44.3,6.6-61,21.6c-30,26.9-72.6,34.4-109.3,18c-4.1-1.8-8.1-3.8-12-6
c-12.5-7.9-29.1-4.1-36.9,8.5c-7.9,12.5-4.1,29.1,8.5,36.9l0,0c1.9,1.2,33.1,20.4,82.8,29c23.5,4,44.4,16.3,60.3,34.1
c31.4,35,85.3,38,120.3,6.6c18.9-17,29.3-41.5,28.3-66.9C965.9,464.5,930.2,428.5,886.7,426.4z" class="st1"></path>
<path d="M703.9,460.3c3.9,2.2,7.9,4.2,12,6c36.7,16.5,79.4,8.9,109.3-18c16.7-15,38.6-22.8,61-21.6
c43.5,2.1,79.2,38.2,80.9,81.7c0.7,16.5-3.5,32.8-12,47c9.7-14.8,14.5-32.3,13.8-50c-1.7-43.5-37.5-79.6-81-81.7
c-22.4-1.1-44.3,6.6-61,21.6c-30,26.9-72.6,34.4-109.3,18c-4.1-1.8-8.1-3.8-12-6c-12.5-7.8-29-4-36.9,8.5c-0.4,0.6-0.6,1.3-0.9,1.9
C676,456.1,691.9,452.8,703.9,460.3z" class="st0"></path>
<path d="M927.5,474.6c-15.8-23.5-47.6-29.8-71.1-14c-5.5,3.7-10.3,8.5-14,14c-6.1,9.1-9.1,20-8.5,30.9
c-0.6,11,2.4,21.8,8.5,30.9c15.8,23.5,47.6,29.7,71.1,13.9c5.5-3.7,10.2-8.4,13.9-13.9c6.1-9.1,9.1-20,8.5-30.9
C936.6,494.5,933.6,483.7,927.5,474.6z" class="st95"></path>
<path d="M248.7,392.6c-15.8-23.5-47.6-29.8-71.1-14c-5.5,3.7-10.3,8.5-14,14c-6.1,9.1-9.1,20-8.6,30.9
c-0.6,11,2.4,21.8,8.6,30.9c15.8,23.5,47.7,29.8,71.2,14c5.5-3.7,10.3-8.5,14-14c6.1-9.1,9.1-20,8.5-30.9
C257.9,412.6,254.9,401.7,248.7,392.6z" class="st95"></path>
<path d="M924.7,481.8c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C935.4,518.7,935.4,497.8,924.7,481.8z M878,524.2l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C888,528,881.8,528,878,524.2z" class="st96"></path>
<path d="M924.7,476.1c-14.6-21.9-44.3-27.9-66.2-13.2s-27.9,44.3-13.2,66.2c14.6,21.9,44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C935.4,513.1,935.4,492.2,924.7,476.1z M878,518.5l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C888,522.3,881.8,522.3,878,518.5z" class="st97"></path>
<g>
<defs>
<path d="M672.3,649.5c0,0,0.9,119.1-58.1,156.2c0,0,73.8,2.3,85.1-90.4S672.3,649.5,672.3,649.5z" id="SVGID_7_"></path>
</defs>
<clipPath id="SVGID_8_">
<use style="overflow:visible;" xlink:href="#SVGID_7_"></use>
</clipPath>
<g class="st98">
<rect height="185.3" width="96.4" class="st56" y="622.7" x="614.2"></rect>
<path d="M711.6,725.8v25h5.4c-13.8,32.7-51.6,48-84.3,34.2c-7.6-3.2-14.5-7.9-20.4-13.7h0.9v-90.9h-0.9
c25.1-25.1,65.8-25.1,90.9,0c5.8,5.9,10.5,12.8,13.7,20.4h-5.4L711.6,725.8z" class="st56"></path>
<path d="M711.6,725.8v24.1h3.2c-13.3,31.5-49.7,46.2-81.2,32.9c-11-4.7-20.5-12.4-27.2-22.4h6.8v-69.2h-6.8
c19.1-28.3,57.6-35.8,86-16.7c9.9,6.7,17.7,16.2,22.4,27.2h-3.2V725.8z" class="st57"></path>
<path d="M717.3,725.8c0,32.9-26.6,59.5-59.5,59.5c-15.8,0-30.9-6.3-42.1-17.4c-2.7-2.7-5.1-5.6-7.3-8.8h4.8v-66.6
h-4.8c18.4-27.2,55.4-34.4,82.6-16.1C707.4,687.5,717.3,706,717.3,725.8z" class="st58"></path>
<path d="M714.9,725.8c0,31.6-25.6,57.1-57.1,57.1c-19,0-36.8-9.4-47.4-25.2h2.8v-63.9h-2.8c2.1-3,4.4-5.9,7-8.5
c22.3-22.3,58.5-22.3,80.8,0C708.9,696.1,714.9,710.6,714.9,725.8L714.9,725.8z" class="st59"></path>
<path d="M712.5,725.8c0,30.2-24.6,54.7-54.8,54.7c-22,0-41.8-13.2-50.4-33.4h5.9v-42.6h-5.9
c11.8-27.9,43.9-40.9,71.8-29.1C699.3,683.9,712.5,703.8,712.5,725.8z" class="st60"></path>
<path d="M710.1,725.8c0,28.9-23.5,52.4-52.4,52.4c-21,0-40-12.6-48.2-32h3.7v-40.8h-3.7c11.2-26.6,42-39.1,68.6-27.9
C697.5,685.7,710.1,704.7,710.1,725.8z" class="st61"></path>
<circle r="50" cy="725.8" cx="657.8" class="st62"></circle>
<circle r="47.6" cy="725.8" cx="657.8" class="st63"></circle>
<circle r="45.2" cy="725.8" cx="657.8" class="st64"></circle>
<circle r="42.8" cy="725.8" cx="657.8" class="st65"></circle>
<circle r="40.5" cy="725.8" cx="657.8" class="st66"></circle>
<circle r="38.1" cy="725.8" cx="657.8" class="st67"></circle>
<circle r="35.7" cy="725.8" cx="657.8" class="st68"></circle>
<circle r="33.3" cy="725.8" cx="657.8" class="st69"></circle>
<circle r="31" cy="725.8" cx="657.8" class="st70"></circle>
<circle r="28.6" cy="725.8" cx="657.8" class="st71"></circle>
<circle r="26.2" cy="725.8" cx="657.8" class="st72"></circle>
<circle r="23.8" cy="725.8" cx="657.8" class="st73"></circle>
<circle r="21.4" cy="725.8" cx="657.8" class="st74"></circle>
<circle r="19" cy="725.8" cx="657.8" class="st75"></circle>
<circle r="16.7" cy="725.8" cx="657.8" class="st76"></circle>
<circle r="14.3" cy="725.8" cx="657.8" class="st77"></circle>
<circle r="11.9" cy="725.8" cx="657.8" class="st78"></circle>
<circle r="9.5" cy="725.8" cx="657.8" class="st79"></circle>
<circle r="7.1" cy="725.8" cx="657.8" class="st80"></circle>
<circle r="4.8" cy="725.8" cx="657.8" class="st81"></circle>
<circle r="2.4" cy="725.8" cx="657.8" class="st82"></circle>
</g>
</g>
<g>
<defs>
<path d="M729.9,695.5c-9.2,37.6-42.4,61.8-74.2,54s-12.1-35.7-2.8-73.3s4.4-70.7,36.2-62.9S739.2,657.9,729.9,695.5
z" id="SVGID_9_"></path>
</defs>
<clipPath id="SVGID_10_">
<use style="overflow:visible;" xlink:href="#SVGID_9_"></use>
</clipPath>
<g class="st99">
<rect height="151.8" width="115.2" class="st4" y="605.6" x="624"></rect>
<path d="M739.7,697.9c-7.9,32.3-36.5,53.1-63.8,46.4s-43-38.3-35.1-70.6s36.5-53.1,63.8-46.4
c13.6,3.3,24.5,12.9,30.8,25.7S743.6,681.7,739.7,697.9z" class="st4"></path>
<ellipse ry="49.9" rx="59.1" cy="685.9" cx="690.3" class="st5" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="48.9" rx="57.9" cy="685.9" cx="690.3" class="st6" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="47.9" rx="56.7" cy="685.9" cx="690.3" class="st7" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="46.9" rx="55.5" cy="685.9" cx="690.3" class="st8" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="45.9" rx="54.3" cy="685.9" cx="690.3" class="st9" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="44.9" rx="53.2" cy="685.9" cx="690.3" class="st10" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="43.9" rx="52" cy="685.9" cx="690.3" class="st11" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="42.9" rx="50.8" cy="685.9" cx="690.3" class="st12" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="41.9" rx="49.6" cy="685.9" cx="690.3" class="st13" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="40.9" rx="48.4" cy="688.2" cx="690.8" class="st14" transform="matrix(0.2402 -0.9707 0.9707 0.2402 -143.1603 1193.5389)"></ellipse>
<ellipse ry="39.9" rx="47.2" cy="685.9" cx="690.3" class="st15" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="38.9" rx="46.1" cy="685.9" cx="690.3" class="st16" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="37.9" rx="44.9" cy="685.9" cx="690.3" class="st17" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="36.9" rx="43.7" cy="685.9" cx="690.3" class="st18" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="35.9" rx="42.5" cy="685.9" cx="690.3" class="st19" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="34.9" rx="41.3" cy="685.9" cx="690.3" class="st20" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="33.9" rx="40.2" cy="685.9" cx="690.3" class="st21" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="32.9" rx="39" cy="685.9" cx="690.3" class="st22" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="31.9" rx="37.8" cy="685.9" cx="690.3" class="st23" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="30.9" rx="36.6" cy="685.9" cx="690.3" class="st24" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="29.9" rx="35.4" cy="685.9" cx="690.3" class="st25" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="28.9" rx="34.2" cy="685.9" cx="690.3" class="st26" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="27.9" rx="33.1" cy="685.9" cx="690.3" class="st27" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="27" rx="31.9" cy="685.9" cx="690.3" class="st28" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="26" rx="30.7" cy="685.9" cx="690.3" class="st29" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="25" rx="29.5" cy="685.9" cx="690.3" class="st30" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="24" rx="28.3" cy="685.9" cx="690.3" class="st31" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="23" rx="27.2" cy="685.9" cx="690.3" class="st32" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="22" rx="26" cy="685.9" cx="690.3" class="st33" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="21" rx="24.8" cy="685.9" cx="690.3" class="st34" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="20" rx="23.6" cy="685.9" cx="690.3" class="st35" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="19" rx="22.4" cy="685.9" cx="690.3" class="st36" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="18" rx="21.3" cy="685.9" cx="690.3" class="st37" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="17" rx="20.1" cy="685.9" cx="690.3" class="st38" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="16" rx="18.9" cy="685.9" cx="690.3" class="st39" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="15" rx="17.7" cy="685.9" cx="690.3" class="st40" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="14" rx="16.5" cy="685.9" cx="690.3" class="st41" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="13" rx="15.4" cy="685.9" cx="690.3" class="st42" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="12" rx="14.2" cy="688.2" cx="690.8" class="st43" transform="matrix(0.2402 -0.9707 0.9707 0.2402 -143.1603 1193.5389)"></ellipse>
<ellipse ry="11" rx="13" cy="685.9" cx="690.3" class="st44" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="10" rx="11.8" cy="685.9" cx="690.3" class="st45" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="9" rx="10.6" cy="685.9" cx="690.3" class="st46" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="8" rx="9.5" cy="685.9" cx="690.3" class="st47" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="7" rx="8.3" cy="685.9" cx="690.3" class="st48" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="6" rx="7.1" cy="685.9" cx="690.3" class="st49" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="5" rx="5.9" cy="685.9" cx="690.3" class="st50" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="4" rx="4.7" cy="685.9" cx="690.3" class="st51" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="3" rx="3.5" cy="685.9" cx="690.3" class="st52" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="2" rx="2.4" cy="685.9" cx="690.3" class="st53" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="1" rx="1.2" cy="685.9" cx="690.3" class="st54" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
</g>
</g>
<path d="M657.8,702.4c0,0,8.9-37.4,29.7-29.8s7.9,28-1.8,27.1S673.7,686.1,657.8,702.4z" class="st100"></path>
<path d="M609.3,585.4c0,0,5.6,30.9-5,46.3C604.3,631.7,629.8,615,609.3,585.4z" class="st101"></path>
<path d="M619.3,600.2c0,0,5.6,30.9-5,46.3C614.3,646.5,639.8,629.8,619.3,600.2z" class="st102"></path>
<path d="M637,609.5c0,0-1.9,31.4-15.8,43.8C621.2,653.3,650,643.1,637,609.5z" class="st102"></path>
<path d="M245.5,399.7c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C256.2,436.7,256.2,415.8,245.5,399.7z M198.9,442.1l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C208.9,445.9,202.7,445.9,198.9,442.1z" class="st96"></path>
<path d="M245.5,392.3c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C256.2,429.2,256.2,408.3,245.5,392.3z M198.9,434.7l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C208.9,438.5,202.7,438.5,198.9,434.7z" class="st97"></path>
<path d="M460.1,559.1c0,0,118-4.4,135.3,71.5c0,0-5.8-68.4-90.8-81.5c0,0-41.4-4.9-60.7,8.8L460.1,559.1z" class="st103"></path>
<path d="M425,311.7c0,0,26-24.5,71-21.8C495.9,289.9,445.3,273.4,425,311.7z" class="st104"></path>
<circle r="3.1" cy="600.7" cx="301.5" class="st105"></circle>
<circle r="3" cy="637.2" cx="535.1" class="st105"></circle>
</svg>
quasar.config.js 0 → 100644
View file @ 56d5da3f
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
/* eslint-disable @typescript-eslint/no-var-requires */
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
return {
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
supportTS: {
tsCheckerConfig: {
eslint: {
enabled: true,
files: './src/**/*.{ts,tsx,js,jsx,vue}',
},
},
},
// https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
boot: ['store'],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
css: ['app.scss'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
// transpile: false,
// publicPath: '/',
// Add dependencies for transpiling with Babel (Array of string/regex)
// (from node_modules, which are by default not transpiled).
// Applies only if "transpile" is set to true.
// transpileDependencies: [],
// rtl: true, // https://quasar.dev/options/rtl-support
// preloadChunks: true,
// showProgress: false,
// gzip: true,
// analyze: true,
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
// chainWebpack (/* chain */) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
devServer: {
// server: {
// type: 'http',
// },
https: false,
port: 8080,
open: true, // opens browser window automatically
proxy: {},
},
extras: ['material-icons', 'fontawesome-v6', 'bootstrap-icons'],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
lang: 'zh-CN', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
// components: [],
// directives: [],
// Quasar plugins
plugins: ['Notify', 'Dialog'],
},
// animations: 'all', // --- includes all animations
// https://quasar.dev/options/animations
animations: [],
// https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
ssr: {
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
maxAge: 1000 * 60 * 60 * 24 * 30,
// Tell browser when a file from the server should expire from cache (in ms)
// chainWebpackWebserver (/* chain */) {},
middlewares: [
ctx.prod ? 'compression' : '',
'render', // keep this as last one
],
},
// https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
pwa: {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
// chainWebpackCustomSW (/* chain */) {},
manifest: {
name: 'Quasar App',
short_name: 'Quasar App',
description: '',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
src: 'icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png',
},
{
src: 'icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png',
},
{
src: 'icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png',
},
{
src: 'icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
},
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true,
},
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'my-study01',
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackMain(/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackMain also available besides this chainWebpackMain
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackPreload(/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackPreload also available besides this chainWebpackPreload
},
},
};
});
src/App.vue 0 → 100644
View file @ 56d5da3f
<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App'
})
</script>
src/assets/favicon.svg 0 → 100644
View file @ 56d5da3f
<svg xml:space="preserve" style="enable-background:new 0 0 1024 1024;" viewBox="0 0 1024 1024" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="图层_1" version="1.1">
<style type="text/css">
.st0{fill:#EB7084;}
.st1{fill:#E50012;}
.st2{fill:#D3181A;}
.st3{clip-path:url(#SVGID_2_);}
.st4{fill:#F7CAC1;}
.st5{fill:#F7CBC2;}
.st6{fill:#F7CCC3;}
.st7{fill:#F7CDC4;}
.st8{fill:#F8CEC5;}
.st9{fill:#F8CFC6;}
.st10{fill:#F8D0C7;}
.st11{fill:#F8D1C8;}
.st12{fill:#F8D2C9;}
.st13{fill:#F8D3CA;}
.st14{fill:#F9D4CB;}
.st15{fill:#F9D5CC;}
.st16{fill:#F9D6CD;}
.st17{fill:#F9D7CE;}
.st18{fill:#F9D8CF;}
.st19{fill:#F9D9D0;}
.st20{fill:#FADAD1;}
.st21{fill:#FADBD2;}
.st22{fill:#FADCD3;}
.st23{fill:#FADDD4;}
.st24{fill:#FADED5;}
.st25{fill:#FADFD6;}
.st26{fill:#FBE0D7;}
.st27{fill:#FBE1D8;}
.st28{fill:#FBE2D9;}
.st29{fill:#FBE4DA;}
.st30{fill:#FBE5DB;}
.st31{fill:#FBE6DC;}
.st32{fill:#FBE7DD;}
.st33{fill:#FCE8DE;}
.st34{fill:#FCE9DF;}
.st35{fill:#FCEAE0;}
.st36{fill:#FCEBE1;}
.st37{fill:#FCECE2;}
.st38{fill:#FCEDE3;}
.st39{fill:#FDEEE4;}
.st40{fill:#FDEFE5;}
.st41{fill:#FDF0E6;}
.st42{fill:#FDF1E7;}
.st43{fill:#FDF2E8;}
.st44{fill:#FDF3E9;}
.st45{fill:#FEF4EA;}
.st46{fill:#FEF5EB;}
.st47{fill:#FEF6EC;}
.st48{fill:#FEF7ED;}
.st49{fill:#FEF8EE;}
.st50{fill:#FEF9EF;}
.st51{fill:#FFFAF0;}
.st52{fill:#FFFBF1;}
.st53{fill:#FFFCF2;}
.st54{fill:#FFFDF3;}
.st55{clip-path:url(#SVGID_4_);}
.st56{fill:#270604;}
.st57{fill:#280704;}
.st58{fill:#290805;}
.st59{fill:#2A0905;}
.st60{fill:#2B0A06;}
.st61{fill:#2C0B06;}
.st62{fill:#2D0C07;}
.st63{fill:#2E0D07;}
.st64{fill:#2F0E07;}
.st65{fill:#300F08;}
.st66{fill:#311008;}
.st67{fill:#321109;}
.st68{fill:#331209;}
.st69{fill:#34140A;}
.st70{fill:#34150A;}
.st71{fill:#35160A;}
.st72{fill:#36170B;}
.st73{fill:#37180B;}
.st74{fill:#38190C;}
.st75{fill:#391A0C;}
.st76{fill:#3A1B0C;}
.st77{fill:#3B1C0D;}
.st78{fill:#3C1D0D;}
.st79{fill:#3D1E0E;}
.st80{fill:#3E1F0E;}
.st81{fill:#3F200F;}
.st82{fill:#40210F;}
.st83{fill:#FFFFFF;}
.st84{fill:#1C0606;}
.st85{fill:#411408;}
.st86{fill:#F7CFCB;}
.st87{fill:#72201D;}
.st88{clip-path:url(#SVGID_6_);}
.st89{fill:#CA4F19;}
.st90{fill:#F29700;}
.st91{fill:#F8D2D9;}
.st92{fill:#8E2A22;}
.st93{fill:#00A851;}
.st94{fill:#4EB56F;}
.st95{fill:#4B0D18;}
.st96{fill:#EF8017;}
.st97{fill:#FFF000;}
.st98{clip-path:url(#SVGID_8_);}
.st99{clip-path:url(#SVGID_10_);}
.st100{fill:#F2A398;}
.st101{fill:#330904;}
.st102{fill:#41120D;}
.st103{fill:#F8CDC7;}
.st104{fill:#E2263A;}
.st105{fill:#FFFAF3;}
</style>
<path d="M887.3,414.2c-1.6-0.1-3.2-0.1-4.8-0.1c-24,0-47.1,8.9-64.9,24.9c-16.6,15.1-38.3,23.4-60.7,23.5c-6.3,0-12.5-0.7-18.7-2
c2.7-39.2,1.2-77.4-7.4-106.8c-28.2-96.1-183.5-96.1-258.1-96.1c-76,0-118.2,89.7-127.6,112.1c-19.1,8.8-35.8,22.2-48.6,38.9
c-4.9-5.1-8.9-11-11.8-17.5c-12-27.6-37.3-47.1-67.1-51.7c-4.3-0.7-8.7-1-13.1-1c-38.7,0-73.4,25.8-84.3,62.8
c-13.8,46.5,12.7,95.3,59.1,109.1c1.2,0.3,2.3,0.7,3.5,1c23.5,6,48.3,1.9,68.7-11.1c3.9-2.4,8-4.4,12.4-5.9
c-0.4,1.1-0.6,2.3-0.6,3.5v14c0,1,0,1.8,0,2.5v22.8c0,2,0.5,3.9,1.4,5.7l-0.5,2.2c-0.4,2.2-0.4,4.5,0,6.8
c-4.4,20-8.6,38.7-10.4,45.2c-1.1,4.1-4.2,10.5-7.7,17.8c-8.5,17.7-20.1,41.9-22.3,70.5c-2.5,32.5,3.6,139.8,187,155.3
c19.9,1.7,46.1,3.6,72.3,3.6l0,0c45.2,0,82.5-5.8,114-17.6c6.5-2.4,12.8-5.4,18.8-8.9c26-0.5,67.2-15.4,86.3-64.5
c18.7-11.2,33.5-30.9,39.4-54.8c7.7-31.4-1.5-62.4-21.2-81l7.4-16.5c5.6-12.2,3.5-26.5-5.2-36.7c1.8-7.9,3.5-16.1,5.1-24.6
c9.5,2.7,19.1,4.8,28.8,6.5c20.3,3.5,38.8,14,53.4,30.2c35.9,40,97.4,43.4,137.4,7.5c21.6-19.4,33.5-47.4,32.3-76.4
C977.8,457.6,937.2,416.6,887.3,414.2z"></path>
<path d="M416.4,447.5c-4-12.5-17.3-19.4-29.8-15.4c-0.3,0.1-23,7-56.4,4.9c-25.2-1.6-46.5-17.9-56.6-41
c-10.3-23.8-32.2-40.6-57.9-44.5c-36.9-5.7-73.3,17.5-83.9,53.2c-11.9,40,11,82.1,51,94c21,6.2,43.6,3,62.1-8.7
c14.6-9.3,32.1-13.2,49.1-9.8c15.9,3.2,32.2,4.8,48.4,4.8c34.3,0,57-7.2,58.6-7.7C413.6,473.3,420.4,460,416.4,447.5z" class="st0"></path>
<path d="M415.5,448.4c-4-12.5-17.3-19.4-29.9-15.4c-0.3,0.1-23,7-56.4,4.9c-25.2-1.6-46.5-17.9-56.6-41
c-10.3-23.8-32.2-40.6-57.9-44.5c-36.9-5.8-73.3,17.4-83.9,53.2c-11.9,40,10.9,82.1,50.9,94c21,6.3,43.7,3.1,62.2-8.7
c14.6-9.3,32.1-13.2,49.1-9.8c15.9,3.2,32.1,4.8,48.4,4.9c34.3,0,57-7.2,58.6-7.7C412.7,474.3,419.5,460.9,415.5,448.4z" class="st1"></path>
<path d="M275.5,515.7c0,0-4-101.9,79-136.9c0,0,40.7-109.1,118.2-109.1s221.3,1.4,246.5,87.4s-14,250.5-33.7,281.6
c0,0-47.2-37.1-117.7-71.8C488.5,528,379.9,492.2,275.5,515.7z" class="st1"></path>
<path d="M606.6,542.2c-2-0.8,2.2-28.6,2.5-31.7c1.6-12.7,4.1-25.5,8.3-37.6c4-11.3,9.6-22.5,18.2-31.1
c9.4-9.3,23.8-11,32.3-20.7c10.6-12,21.6-65,21.6-65.2c1.1-5.4,2.3-11.4,5.4-16.1c12.6-19.3,20.3,11.3,22,20.6
c2.6,15,4.2,30.2,5,45.5c2.6,44,1,88.1-4.7,131.8c-4.6,36-11.9,71.7-23.3,106.1C694,643.8,681,573.5,606.6,542.2z" class="st2"></path>
<path d="M351.8,385c0,0,40.7-109.1,118.2-109.1s221.3,1.4,246.5,87.4c22.2,75.6-5.5,211.8-25.8,264.8
c20.5-46.9,51.9-192.6,28.7-271.7c-25.2-86-169-87.4-246.5-87.4S354.6,378,354.6,378c-37,15.6-56.7,44.5-67.2,71.8
C298.5,424.7,317.9,399.3,351.8,385z" class="st0"></path>
<g>
<defs>
<path d="M289.3,493.5c0,0-19.3,90.4-23.7,106.7s-26.7,47.4-29.6,86s10.8,128.3,176,142.3
c58.8,5,124.7,7.9,181.1-13.2c45.1-16.9,81.7-64.3,97.3-108.3c11-31,11.3-60.3,11.3-92.6C701.7,592.1,557.6,440.1,289.3,493.5z" id="SVGID_1_"></path>
</defs>
<clipPath id="SVGID_2_">
<use style="overflow:visible;" xlink:href="#SVGID_1_"></use>
</clipPath>
<g class="st3">
<rect height="396.2" width="468.7" class="st4" y="440.1" x="233"></rect>
<path d="M674.7,657.1c0,68.5-34.1,132.5-90.8,170.8c-5.5,3.7-11.1,7.1-17,10.3v-0.9H370.4v0.9
c-5.8-3.2-11.5-6.6-17-10.3c-56.8-38.3-90.8-102.3-90.8-170.8c0-113.8,92.2-206,206-206S674.7,543.3,674.7,657.1z" class="st4"></path>
<path d="M670.6,657.1c0,81.2-48.6,154.5-123.4,186.1v-5.9H390v5.9c-74.7-31.7-123.3-104.9-123.4-186.1
c0-111.6,90.4-202,202-202S670.6,545.5,670.6,657.1z" class="st5"></path>
<path d="M666.6,657.1c0,79.6-47.6,151.4-120.9,182.4v-2.2H391.6v2.2c-73.3-31-120.9-102.8-120.9-182.4
c0-109.3,88.6-198,198-198S666.6,547.8,666.6,657.1z" class="st6"></path>
<path d="M662.5,657.1c0,77.9-46.7,148.3-118.4,178.7c-5.8,2.5-11.8,4.6-17.8,6.5v-5H411v5c-6-1.9-12-4-17.8-6.5
C321.4,805.4,274.8,735,274.7,657.1c0-107.1,86.8-193.9,193.9-193.9S662.5,550,662.5,657.1z" class="st7"></path>
<path d="M658.5,657.1c0,90.1-63.3,167.9-151.6,186v-5.8h-76.5v5.8c-12.2-2.5-24.2-6.2-35.6-11.1
c-70.3-29.7-116-98.6-116-174.9c0-104.9,85-189.9,189.9-189.9S658.5,552.2,658.5,657.1z" class="st8"></path>
<circle r="185.8" cy="657.1" cx="468.6" class="st9"></circle>
<circle r="181.8" cy="657.1" cx="468.6" class="st10"></circle>
<circle r="177.8" cy="657.1" cx="468.6" class="st11"></circle>
<circle r="173.7" cy="657.1" cx="468.6" class="st12"></circle>
<circle r="169.7" cy="657.1" cx="468.6" class="st13"></circle>
<circle r="165.6" cy="657.1" cx="468.6" class="st14"></circle>
<circle r="161.6" cy="657.1" cx="468.6" class="st15"></circle>
<circle r="157.5" cy="657.1" cx="468.6" class="st16"></circle>
<circle r="153.5" cy="657.1" cx="468.6" class="st17"></circle>
<circle r="149.5" cy="657.1" cx="468.6" class="st18"></circle>
<circle r="145.4" cy="657.1" cx="468.6" class="st19"></circle>
<circle r="141.4" cy="657.1" cx="468.6" class="st20"></circle>
<circle r="137.3" cy="657.1" cx="468.6" class="st21"></circle>
<circle r="133.3" cy="657.1" cx="468.6" class="st22"></circle>
<circle r="129.3" cy="657.1" cx="468.6" class="st23"></circle>
<circle r="125.2" cy="657.1" cx="468.6" class="st24"></circle>
<circle r="121.2" cy="657.1" cx="468.6" class="st25"></circle>
<circle r="117.2" cy="657.1" cx="468.6" class="st26"></circle>
<circle r="113.1" cy="657.1" cx="468.6" class="st27"></circle>
<circle r="109.1" cy="657.1" cx="468.6" class="st28"></circle>
<circle r="105" cy="657.1" cx="468.6" class="st29"></circle>
<circle r="101" cy="657.1" cx="468.6" class="st30"></circle>
<circle r="97" cy="657.1" cx="468.6" class="st31"></circle>
<circle r="92.9" cy="657.1" cx="468.6" class="st32"></circle>
<circle r="88.9" cy="657.1" cx="468.6" class="st33"></circle>
<circle r="84.8" cy="657.1" cx="468.6" class="st34"></circle>
<circle r="80.8" cy="657.1" cx="468.6" class="st35"></circle>
<circle r="76.8" cy="657.1" cx="468.6" class="st36"></circle>
<circle r="72.7" cy="657.1" cx="468.6" class="st37"></circle>
<circle r="68.7" cy="657.1" cx="468.6" class="st38"></circle>
<circle r="64.6" cy="657.1" cx="468.6" class="st39"></circle>
<circle r="60.6" cy="657.1" cx="468.6" class="st40"></circle>
<circle r="56.6" cy="657.1" cx="468.6" class="st41"></circle>
<ellipse ry="52.5" rx="52.5" cy="657.1" cx="468.6" class="st42" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -327.3784 523.8387)"></ellipse>
<circle r="48.5" cy="657.1" cx="468.6" class="st43"></circle>
<circle r="44.4" cy="657.1" cx="468.6" class="st44"></circle>
<circle r="40.4" cy="657.1" cx="468.6" class="st45"></circle>
<circle r="36.4" cy="657.1" cx="468.6" class="st46"></circle>
<circle r="32.3" cy="657.1" cx="468.6" class="st47"></circle>
<circle r="28.3" cy="657.1" cx="468.6" class="st48"></circle>
<circle r="24.2" cy="657.1" cx="468.6" class="st49"></circle>
<circle r="20.2" cy="657.1" cx="468.6" class="st50"></circle>
<circle r="16.2" cy="657.1" cx="468.6" class="st51"></circle>
<circle r="12.1" cy="657.1" cx="468.6" class="st52"></circle>
<circle r="8.1" cy="657.1" cx="468.6" class="st53"></circle>
<circle r="4" cy="657.1" cx="468.6" class="st54"></circle>
</g>
</g>
<g>
<defs>
<path d="M583.2,521.7c7.1,8.1,34.8,94.6,3.4,128.8c-2.3,2.6-3.5,5.9-3.4,9.3v7.5c0,8,6.5,14.6,14.5,14.6
c1.4,0,2.8-0.2,4.1-0.6c23.6-7,62.2-26.2,69.8-77.9C682.8,528,583.2,521.7,583.2,521.7z" id="SVGID_3_"></path>
</defs>
<clipPath id="SVGID_4_">
<use style="overflow:visible;" xlink:href="#SVGID_3_"></use>
</clipPath>
<g class="st55">
<rect height="162.4" width="99.5" class="st56" y="521.7" x="583.2"></rect>
<path d="M683.8,601.8v25.2h3.8c-13.9,33-51.9,48.4-84.9,34.4c-7.7-3.2-14.7-8-20.6-13.9h0.1v-91.6h-0.1
c25.3-25.3,66.3-25.3,91.6,0c5.9,5.9,10.6,12.9,13.8,20.6h-3.8V601.8z" class="st56"></path>
<path d="M690.3,601.8c0,34.5-27.9,62.4-62.4,62.4c-20.7,0-40.1-10.3-51.7-27.5h6.1V567h-6.1c2.2-3.3,4.8-6.4,7.6-9.2
c24.4-24.4,63.9-24.3,88.2,0C683.7,569.5,690.3,585.3,690.3,601.8L690.3,601.8z" class="st57"></path>
<path d="M687.9,601.8c0,33.1-26.9,60-60.1,59.9c-19.9,0-38.5-9.9-49.6-26.4h4.1v-67.1h-4.1
c18.6-27.4,55.9-34.7,83.3-16.1C677.9,563.4,687.8,582,687.9,601.8z" class="st58"></path>
<path d="M685.5,601.8c0,31.8-25.8,57.6-57.6,57.6c-15.3,0-29.9-6.1-40.7-16.9c-2.6-2.6-4.9-5.5-7-8.5h2.1v-64.4h-2.1
c2-3.1,4.4-5.9,7-8.5c22.5-22.5,58.9-22.5,81.4,0C679.4,571.9,685.5,586.6,685.5,601.8L685.5,601.8z" class="st59"></path>
<path d="M683.1,601.8c0,30.5-24.8,55.2-55.3,55.1c-22.1,0-42.1-13.3-50.7-33.6h5.2v-43h-5.2
c11.9-28.1,44.3-41.2,72.3-29.3C669.8,559.6,683.1,579.6,683.1,601.8L683.1,601.8z" class="st60"></path>
<path d="M680.7,601.8c0,29.2-23.7,52.8-52.8,52.7c-21.2,0-40.3-12.7-48.6-32.2h3v-41.1h-3
c11.3-26.9,42.3-39.4,69.2-28.1C668,561.5,680.7,580.6,680.7,601.8z" class="st61"></path>
<circle r="50.4" cy="601.8" cx="627.9" class="st62"></circle>
<circle r="48" cy="601.8" cx="627.9" class="st63"></circle>
<circle r="45.6" cy="601.8" cx="627.9" class="st64"></circle>
<circle r="43.2" cy="601.8" cx="627.9" class="st65"></circle>
<circle r="40.8" cy="601.8" cx="627.9" class="st66"></circle>
<circle r="38.4" cy="601.8" cx="627.9" class="st67"></circle>
<circle r="36" cy="601.8" cx="627.9" class="st68"></circle>
<circle r="33.6" cy="601.8" cx="627.9" class="st69"></circle>
<circle r="31.2" cy="601.8" cx="627.9" class="st70"></circle>
<circle r="28.8" cy="601.8" cx="627.9" class="st71"></circle>
<circle r="26.4" cy="601.8" cx="627.9" class="st72"></circle>
<circle r="24" cy="601.8" cx="627.9" class="st73"></circle>
<circle r="21.6" cy="601.8" cx="627.9" class="st74"></circle>
<circle r="19.2" cy="601.8" cx="627.9" class="st75"></circle>
<circle r="16.8" cy="601.8" cx="627.9" class="st76"></circle>
<circle r="14.4" cy="601.8" cx="627.9" class="st77"></circle>
<circle r="12" cy="601.8" cx="627.9" class="st78"></circle>
<circle r="9.6" cy="601.8" cx="627.9" class="st79"></circle>
<circle r="7.2" cy="601.8" cx="627.9" class="st80"></circle>
<circle r="4.8" cy="601.8" cx="627.9" class="st81"></circle>
<circle r="2.4" cy="601.8" cx="627.9" class="st82"></circle>
</g>
</g>
<circle r="25.8" cy="657.6" cx="333.3" class="st83"></circle>
<circle r="25.8" cy="655.8" cx="333.5" class="st84"></circle>
<circle r="14.6" cy="651.7" cx="337.1" class="st85"></circle>
<circle r="8.9" cy="649.8" cx="343.3" class="st83"></circle>
<circle r="25.8" cy="671" cx="450.5" class="st83"></circle>
<circle r="25.8" cy="669.3" cx="450.7" class="st84"></circle>
<circle r="14.6" cy="665.2" cx="454.3" class="st85"></circle>
<circle r="8.9" cy="663.3" cx="460.5" class="st83"></circle>
<circle r="10.7" cy="725.8" cx="342.1" class="st86"></circle>
<circle r="10.7" cy="731.4" cx="428.1" class="st86"></circle>
<path d="M384.2,752.1c-27.5-1.8-46.3-22.4-46.5-22.7c-2-2.2-1.8-5.7,0.4-7.6c2.2-2,5.7-1.8,7.6,0.4
c1.4,1.6,36.1,39.3,79.1,4.5c2.3-1.9,5.7-1.5,7.6,0.8s1.5,5.7-0.8,7.6C414.5,749,398.2,753,384.2,752.1z" class="st87"></path>
<g>
<defs>
<path d="M285.2,505.6l-9.1,42c-0.6,2.6,1.1,5.2,3.7,5.7c1.1,0.2,2.2,0.1,3.2-0.4c9.5-4.9,25.4-11.5,43.9-12.4
c6.8-0.2,13.4,1.7,19,5.6l17.5,11.8l3.9-8c4.6,2.9,9,6,13.2,9.5c8.8,7.3,21.2,8.7,31.4,3.6c10.2-5,20.8-8.9,31.9-11.5v6.5
l50.1-8.6c3.5-0.6,7.1-0.7,10.6-0.2c4.6,0.7,9.3,1.6,14.2,2.8c54.3,13.2,71.4,56.3,76.6,78.7c0.6,2.6,3.2,4.2,5.8,3.6
c1.4-0.3,2.5-1.2,3.2-2.5l39.2-74.5c1.1-2,0.6-4.6-1.2-6c-19.9-16.1-138.5-101.7-353.4-49.3C287.1,502.4,285.7,503.8,285.2,505.6z" id="SVGID_5_"></path>
</defs>
<clipPath id="SVGID_6_">
<use style="overflow:visible;" xlink:href="#SVGID_5_"></use>
</clipPath>
<g class="st88">
<rect height="186.1" width="369.3" class="st56" y="449.5" x="275.3"></rect>
<path d="M600.3,559.7c0,27.9-8.3,55.3-24,78.4v-1.5H343.8v1.5c-43.3-64.2-26.3-151.3,37.9-194.7v5.1h156.8v-5.1
C577.1,469.5,600.3,513.1,600.3,559.7L600.3,559.7z" class="st56"></path>
<path d="M595.1,559.7c0,26.9-8,53.2-23.1,75.5c-1.2,1.8-2.5,3.6-3.8,5.3v-3.9H351.9v3.9c-1.3-1.7-2.5-3.5-3.8-5.3
c-36.2-53.6-29.3-125.3,16.5-171c6.1-6.1,12.8-11.6,20-16.5v0.8h151v-0.8c7.2,4.8,13.9,10.4,20,16.5
C580.9,489.5,595.2,523.9,595.1,559.7z" class="st57"></path>
<path d="M589.9,559.7c0,25.9-7.7,51.2-22.2,72.6c-2.3,3.5-4.8,6.8-7.5,10v-5.7H359.9v5.7c-2.7-3.2-5.2-6.5-7.5-10
c-40-59.5-24.3-140.1,35.1-180.2c3.5-2.3,7-4.5,10.7-6.5v3H522v-3c3.7,2,7.2,4.2,10.7,6.5c6.9,4.7,13.3,10,19.2,15.9
C576.3,492.2,590,525.3,589.9,559.7z" class="st58"></path>
<path d="M584.7,559.7c0,24.8-7.4,49.1-21.3,69.7c-2.2,3.3-4.6,6.5-7.2,9.6v-2.4H363.9v2.4c-2.5-3.1-4.9-6.3-7.2-9.6
c-38.5-57.2-23.3-134.7,33.8-173.2c6.6-4.5,13.7-8.3,21-11.4v3.7h97v-3.7C554.7,464.4,584.6,509.6,584.7,559.7L584.7,559.7z" class="st59"></path>
<path d="M579.5,559.7c0,23.8-7.1,47.1-20.4,66.8c-2.1,3.2-4.4,6.2-6.9,9.2c-1.2,1.5-2.5,2.9-3.8,4.3v-3.4H371.6v3.4
c-1.3-1.4-2.5-2.9-3.8-4.3c-2.4-3-4.7-6-6.9-9.2c-36.9-54.7-22.4-128.9,32.3-165.8c12.9-8.7,27.4-14.8,42.7-18v5.9h48.1v-5.9
C539.7,454.1,579.5,503,579.5,559.7L579.5,559.7z" class="st60"></path>
<path d="M574.3,559.7c0,30.3-12,59.4-33.5,80.8v-3.9H379.3v3.9c-44.6-44.6-44.6-117,0-161.6
c44.6-44.6,117-44.6,161.6,0C562.3,500.4,574.3,529.4,574.3,559.7z" class="st61"></path>
<path d="M569.1,559.7c0,28.9-11.5,56.7-32,77.1v-0.2H383v0.2c-42.6-42.6-42.6-111.6,0-154.2s111.6-42.6,154.2,0
C557.7,503.1,569.2,530.8,569.1,559.7L569.1,559.7z" class="st62"></path>
<path d="M563.9,559.7c0,27.6-10.9,54-30.4,73.5c-2.4,2.3-4.8,4.6-7.4,6.7v-3.2H394v3.2c-2.6-2.1-5-4.4-7.4-6.7
c-40.6-40.6-40.6-106.3,0-146.9s106.3-40.6,146.9,0C553,505.7,563.9,532.2,563.9,559.7L563.9,559.7z" class="st63"></path>
<path d="M558.7,559.7c0,26.2-10.4,51.3-28.9,69.8c-4.5,4.5-9.4,8.5-14.6,12v-4.9H404.9v4.9
c-45.2-30.5-57.1-91.8-26.6-137c30.5-45.2,91.8-57.1,137-26.6C542.4,496.2,558.7,526.9,558.7,559.7L558.7,559.7z" class="st64"></path>
<path d="M553.5,559.7c0,24.8-9.8,48.6-27.4,66.1c-4.2,4.2-8.9,8.1-13.8,11.4v-0.6H407.8v0.6
c-42.8-28.9-54.1-87-25.3-129.8s87-54.1,129.8-25.3C538.1,499.6,553.5,528.6,553.5,559.7L553.5,559.7z" class="st65"></path>
<path d="M548.3,559.7c0,35.5-21.2,67.5-53.9,81.3v-4.4h-68.7v4.4c-44.9-19-66-70.8-47-115.7
c19-44.9,70.8-66,115.7-47C527.1,492.2,548.3,524.2,548.3,559.7L548.3,559.7z" class="st66"></path>
<circle r="83.1" cy="559.7" cx="460.1" class="st67"></circle>
<circle r="77.9" cy="559.7" cx="460.1" class="st68"></circle>
<ellipse ry="72.7" rx="72.7" cy="559.7" cx="460.1" class="st69" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -261.0333 489.2497)"></ellipse>
<circle r="67.5" cy="559.7" cx="460.1" class="st70"></circle>
<circle r="62.3" cy="559.7" cx="460.1" class="st71"></circle>
<circle r="57.1" cy="559.7" cx="460.1" class="st72"></circle>
<circle r="51.9" cy="559.7" cx="460.1" class="st73"></circle>
<circle r="46.7" cy="559.7" cx="460.1" class="st74"></circle>
<circle r="41.5" cy="559.7" cx="460.1" class="st75"></circle>
<circle r="36.3" cy="559.7" cx="460.1" class="st76"></circle>
<circle r="31.2" cy="559.7" cx="460.1" class="st77"></circle>
<circle r="26" cy="559.7" cx="460.1" class="st78"></circle>
<circle r="20.8" cy="559.7" cx="460.1" class="st79"></circle>
<circle r="15.6" cy="559.7" cx="460.1" class="st80"></circle>
<circle r="10.4" cy="559.7" cx="460.1" class="st81"></circle>
<circle r="5.2" cy="559.7" cx="460.1" class="st82"></circle>
</g>
</g>
<path d="M275.5,537.2c0,0,127.4-35.1,258.1,3.4C591.1,557.5,646,582,696.5,641.1l20.4-45.1c4-8.9,1.9-19.3-5.3-25.9
c-41.6-37.5-192.1-149.5-436-72.2L275.5,537.2z" class="st89"></path>
<path d="M275.5,531.8c0,0,123.9-33.2,248.7-2.4c62.3,15.4,117.2,41.8,172.3,106.3l20.4-45.1c4-8.9,1.9-19.3-5.3-25.9
c-41.6-37.5-192.1-149.5-436-72.2L275.5,531.8z" class="st90"></path>
<path d="M437.3,615c0,0-8.2,7.8-0.7,14.4s59.5,1.5,61.1-8.5S472.5,591,437.3,615z" class="st84"></path>
<path d="M368.1,609c0,0,5.2,10.1-4,13.8s-56.7-18-54.9-28S342.8,574.9,368.1,609z" class="st84"></path>
<path d="M337.4,499.5c0,0,5.4-63.6,77.9-66.7c80-3.4,84.5,59.3,84.5,59.3L337.4,499.5z" class="st90"></path>
<path d="M375.8,380.8c0,0,91.9-22.2,186.8,16.3C562.6,397.1,485.5,334.9,375.8,380.8z" class="st91"></path>
<path d="M408.3,506.5c-18.7,0-34-14.9-34-33.1s15.2-33.1,34-33.1s34,14.9,34,33.1S427,506.5,408.3,506.5z" class="st92"></path>
<ellipse ry="28.2" rx="29.1" cy="473.4" cx="408.3" class="st93"></ellipse>
<ellipse ry="19.1" rx="19.6" cy="470.5" cx="411.9" class="st94"></ellipse>
<path d="M886.7,426.4c-22.4-1.1-44.3,6.6-61,21.6c-30,26.9-72.6,34.4-109.3,18c-4.1-1.8-8.1-3.8-12-6
c-12.5-7.9-29.1-4.1-36.9,8.5c-7.9,12.5-4.1,29.1,8.5,36.9l0,0c1.9,1.2,33.1,20.4,82.8,29c23.5,4,44.4,16.3,60.3,34.1
c31.4,35,85.3,38,120.3,6.6c18.9-17,29.3-41.5,28.3-66.9C965.9,464.5,930.2,428.5,886.7,426.4z" class="st1"></path>
<path d="M703.9,460.3c3.9,2.2,7.9,4.2,12,6c36.7,16.5,79.4,8.9,109.3-18c16.7-15,38.6-22.8,61-21.6
c43.5,2.1,79.2,38.2,80.9,81.7c0.7,16.5-3.5,32.8-12,47c9.7-14.8,14.5-32.3,13.8-50c-1.7-43.5-37.5-79.6-81-81.7
c-22.4-1.1-44.3,6.6-61,21.6c-30,26.9-72.6,34.4-109.3,18c-4.1-1.8-8.1-3.8-12-6c-12.5-7.8-29-4-36.9,8.5c-0.4,0.6-0.6,1.3-0.9,1.9
C676,456.1,691.9,452.8,703.9,460.3z" class="st0"></path>
<path d="M927.5,474.6c-15.8-23.5-47.6-29.8-71.1-14c-5.5,3.7-10.3,8.5-14,14c-6.1,9.1-9.1,20-8.5,30.9
c-0.6,11,2.4,21.8,8.5,30.9c15.8,23.5,47.6,29.7,71.1,13.9c5.5-3.7,10.2-8.4,13.9-13.9c6.1-9.1,9.1-20,8.5-30.9
C936.6,494.5,933.6,483.7,927.5,474.6z" class="st95"></path>
<path d="M248.7,392.6c-15.8-23.5-47.6-29.8-71.1-14c-5.5,3.7-10.3,8.5-14,14c-6.1,9.1-9.1,20-8.6,30.9
c-0.6,11,2.4,21.8,8.6,30.9c15.8,23.5,47.7,29.8,71.2,14c5.5-3.7,10.3-8.5,14-14c6.1-9.1,9.1-20,8.5-30.9
C257.9,412.6,254.9,401.7,248.7,392.6z" class="st95"></path>
<path d="M924.7,481.8c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C935.4,518.7,935.4,497.8,924.7,481.8z M878,524.2l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C888,528,881.8,528,878,524.2z" class="st96"></path>
<path d="M924.7,476.1c-14.6-21.9-44.3-27.9-66.2-13.2s-27.9,44.3-13.2,66.2c14.6,21.9,44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C935.4,513.1,935.4,492.2,924.7,476.1z M878,518.5l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C888,522.3,881.8,522.3,878,518.5z" class="st97"></path>
<g>
<defs>
<path d="M672.3,649.5c0,0,0.9,119.1-58.1,156.2c0,0,73.8,2.3,85.1-90.4S672.3,649.5,672.3,649.5z" id="SVGID_7_"></path>
</defs>
<clipPath id="SVGID_8_">
<use style="overflow:visible;" xlink:href="#SVGID_7_"></use>
</clipPath>
<g class="st98">
<rect height="185.3" width="96.4" class="st56" y="622.7" x="614.2"></rect>
<path d="M711.6,725.8v25h5.4c-13.8,32.7-51.6,48-84.3,34.2c-7.6-3.2-14.5-7.9-20.4-13.7h0.9v-90.9h-0.9
c25.1-25.1,65.8-25.1,90.9,0c5.8,5.9,10.5,12.8,13.7,20.4h-5.4L711.6,725.8z" class="st56"></path>
<path d="M711.6,725.8v24.1h3.2c-13.3,31.5-49.7,46.2-81.2,32.9c-11-4.7-20.5-12.4-27.2-22.4h6.8v-69.2h-6.8
c19.1-28.3,57.6-35.8,86-16.7c9.9,6.7,17.7,16.2,22.4,27.2h-3.2V725.8z" class="st57"></path>
<path d="M717.3,725.8c0,32.9-26.6,59.5-59.5,59.5c-15.8,0-30.9-6.3-42.1-17.4c-2.7-2.7-5.1-5.6-7.3-8.8h4.8v-66.6
h-4.8c18.4-27.2,55.4-34.4,82.6-16.1C707.4,687.5,717.3,706,717.3,725.8z" class="st58"></path>
<path d="M714.9,725.8c0,31.6-25.6,57.1-57.1,57.1c-19,0-36.8-9.4-47.4-25.2h2.8v-63.9h-2.8c2.1-3,4.4-5.9,7-8.5
c22.3-22.3,58.5-22.3,80.8,0C708.9,696.1,714.9,710.6,714.9,725.8L714.9,725.8z" class="st59"></path>
<path d="M712.5,725.8c0,30.2-24.6,54.7-54.8,54.7c-22,0-41.8-13.2-50.4-33.4h5.9v-42.6h-5.9
c11.8-27.9,43.9-40.9,71.8-29.1C699.3,683.9,712.5,703.8,712.5,725.8z" class="st60"></path>
<path d="M710.1,725.8c0,28.9-23.5,52.4-52.4,52.4c-21,0-40-12.6-48.2-32h3.7v-40.8h-3.7c11.2-26.6,42-39.1,68.6-27.9
C697.5,685.7,710.1,704.7,710.1,725.8z" class="st61"></path>
<circle r="50" cy="725.8" cx="657.8" class="st62"></circle>
<circle r="47.6" cy="725.8" cx="657.8" class="st63"></circle>
<circle r="45.2" cy="725.8" cx="657.8" class="st64"></circle>
<circle r="42.8" cy="725.8" cx="657.8" class="st65"></circle>
<circle r="40.5" cy="725.8" cx="657.8" class="st66"></circle>
<circle r="38.1" cy="725.8" cx="657.8" class="st67"></circle>
<circle r="35.7" cy="725.8" cx="657.8" class="st68"></circle>
<circle r="33.3" cy="725.8" cx="657.8" class="st69"></circle>
<circle r="31" cy="725.8" cx="657.8" class="st70"></circle>
<circle r="28.6" cy="725.8" cx="657.8" class="st71"></circle>
<circle r="26.2" cy="725.8" cx="657.8" class="st72"></circle>
<circle r="23.8" cy="725.8" cx="657.8" class="st73"></circle>
<circle r="21.4" cy="725.8" cx="657.8" class="st74"></circle>
<circle r="19" cy="725.8" cx="657.8" class="st75"></circle>
<circle r="16.7" cy="725.8" cx="657.8" class="st76"></circle>
<circle r="14.3" cy="725.8" cx="657.8" class="st77"></circle>
<circle r="11.9" cy="725.8" cx="657.8" class="st78"></circle>
<circle r="9.5" cy="725.8" cx="657.8" class="st79"></circle>
<circle r="7.1" cy="725.8" cx="657.8" class="st80"></circle>
<circle r="4.8" cy="725.8" cx="657.8" class="st81"></circle>
<circle r="2.4" cy="725.8" cx="657.8" class="st82"></circle>
</g>
</g>
<g>
<defs>
<path d="M729.9,695.5c-9.2,37.6-42.4,61.8-74.2,54s-12.1-35.7-2.8-73.3s4.4-70.7,36.2-62.9S739.2,657.9,729.9,695.5
z" id="SVGID_9_"></path>
</defs>
<clipPath id="SVGID_10_">
<use style="overflow:visible;" xlink:href="#SVGID_9_"></use>
</clipPath>
<g class="st99">
<rect height="151.8" width="115.2" class="st4" y="605.6" x="624"></rect>
<path d="M739.7,697.9c-7.9,32.3-36.5,53.1-63.8,46.4s-43-38.3-35.1-70.6s36.5-53.1,63.8-46.4
c13.6,3.3,24.5,12.9,30.8,25.7S743.6,681.7,739.7,697.9z" class="st4"></path>
<ellipse ry="49.9" rx="59.1" cy="685.9" cx="690.3" class="st5" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="48.9" rx="57.9" cy="685.9" cx="690.3" class="st6" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="47.9" rx="56.7" cy="685.9" cx="690.3" class="st7" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="46.9" rx="55.5" cy="685.9" cx="690.3" class="st8" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="45.9" rx="54.3" cy="685.9" cx="690.3" class="st9" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="44.9" rx="53.2" cy="685.9" cx="690.3" class="st10" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="43.9" rx="52" cy="685.9" cx="690.3" class="st11" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="42.9" rx="50.8" cy="685.9" cx="690.3" class="st12" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="41.9" rx="49.6" cy="685.9" cx="690.3" class="st13" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="40.9" rx="48.4" cy="688.2" cx="690.8" class="st14" transform="matrix(0.2402 -0.9707 0.9707 0.2402 -143.1603 1193.5389)"></ellipse>
<ellipse ry="39.9" rx="47.2" cy="685.9" cx="690.3" class="st15" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="38.9" rx="46.1" cy="685.9" cx="690.3" class="st16" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="37.9" rx="44.9" cy="685.9" cx="690.3" class="st17" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="36.9" rx="43.7" cy="685.9" cx="690.3" class="st18" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="35.9" rx="42.5" cy="685.9" cx="690.3" class="st19" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="34.9" rx="41.3" cy="685.9" cx="690.3" class="st20" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="33.9" rx="40.2" cy="685.9" cx="690.3" class="st21" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="32.9" rx="39" cy="685.9" cx="690.3" class="st22" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="31.9" rx="37.8" cy="685.9" cx="690.3" class="st23" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="30.9" rx="36.6" cy="685.9" cx="690.3" class="st24" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="29.9" rx="35.4" cy="685.9" cx="690.3" class="st25" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="28.9" rx="34.2" cy="685.9" cx="690.3" class="st26" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="27.9" rx="33.1" cy="685.9" cx="690.3" class="st27" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="27" rx="31.9" cy="685.9" cx="690.3" class="st28" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="26" rx="30.7" cy="685.9" cx="690.3" class="st29" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="25" rx="29.5" cy="685.9" cx="690.3" class="st30" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="24" rx="28.3" cy="685.9" cx="690.3" class="st31" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="23" rx="27.2" cy="685.9" cx="690.3" class="st32" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="22" rx="26" cy="685.9" cx="690.3" class="st33" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="21" rx="24.8" cy="685.9" cx="690.3" class="st34" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="20" rx="23.6" cy="685.9" cx="690.3" class="st35" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="19" rx="22.4" cy="685.9" cx="690.3" class="st36" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="18" rx="21.3" cy="685.9" cx="690.3" class="st37" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="17" rx="20.1" cy="685.9" cx="690.3" class="st38" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="16" rx="18.9" cy="685.9" cx="690.3" class="st39" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="15" rx="17.7" cy="685.9" cx="690.3" class="st40" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="14" rx="16.5" cy="685.9" cx="690.3" class="st41" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="13" rx="15.4" cy="685.9" cx="690.3" class="st42" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="12" rx="14.2" cy="688.2" cx="690.8" class="st43" transform="matrix(0.2402 -0.9707 0.9707 0.2402 -143.1603 1193.5389)"></ellipse>
<ellipse ry="11" rx="13" cy="685.9" cx="690.3" class="st44" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="10" rx="11.8" cy="685.9" cx="690.3" class="st45" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="9" rx="10.6" cy="685.9" cx="690.3" class="st46" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="8" rx="9.5" cy="685.9" cx="690.3" class="st47" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="7" rx="8.3" cy="685.9" cx="690.3" class="st48" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="6" rx="7.1" cy="685.9" cx="690.3" class="st49" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="5" rx="5.9" cy="685.9" cx="690.3" class="st50" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="4" rx="4.7" cy="685.9" cx="690.3" class="st51" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="3" rx="3.5" cy="685.9" cx="690.3" class="st52" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="2" rx="2.4" cy="685.9" cx="690.3" class="st53" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
<ellipse ry="1" rx="1.2" cy="685.9" cx="690.3" class="st54" transform="matrix(0.2379 -0.9713 0.9713 0.2379 -140.0961 1193.1577)"></ellipse>
</g>
</g>
<path d="M657.8,702.4c0,0,8.9-37.4,29.7-29.8s7.9,28-1.8,27.1S673.7,686.1,657.8,702.4z" class="st100"></path>
<path d="M609.3,585.4c0,0,5.6,30.9-5,46.3C604.3,631.7,629.8,615,609.3,585.4z" class="st101"></path>
<path d="M619.3,600.2c0,0,5.6,30.9-5,46.3C614.3,646.5,639.8,629.8,619.3,600.2z" class="st102"></path>
<path d="M637,609.5c0,0-1.9,31.4-15.8,43.8C621.2,653.3,650,643.1,637,609.5z" class="st102"></path>
<path d="M245.5,399.7c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C256.2,436.7,256.2,415.8,245.5,399.7z M198.9,442.1l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C208.9,445.9,202.7,445.9,198.9,442.1z" class="st96"></path>
<path d="M245.5,392.3c-14.6-21.9-44.3-27.9-66.2-13.2c-21.9,14.6-27.9,44.3-13.2,66.2s44.3,27.9,66.2,13.2
c5.2-3.5,9.7-8,13.2-13.2C256.2,429.2,256.2,408.3,245.5,392.3z M198.9,434.7l-8.9-8.9c-3.8-3.8-3.8-10,0-13.9l8.9-8.9
c3.8-3.8,10-3.8,13.9,0l8.9,8.9c3.8,3.8,3.8,10,0,13.9l-8.9,8.9C208.9,438.5,202.7,438.5,198.9,434.7z" class="st97"></path>
<path d="M460.1,559.1c0,0,118-4.4,135.3,71.5c0,0-5.8-68.4-90.8-81.5c0,0-41.4-4.9-60.7,8.8L460.1,559.1z" class="st103"></path>
<path d="M425,311.7c0,0,26-24.5,71-21.8C495.9,289.9,445.3,273.4,425,311.7z" class="st104"></path>
<circle r="3.1" cy="600.7" cx="301.5" class="st105"></circle>
<circle r="3" cy="637.2" cx="535.1" class="st105"></circle>
</svg>
src/boot/store.ts 0 → 100644
View file @ 56d5da3f
import { boot } from 'quasar/wrappers';
import { createPinia } from 'pinia';
const store = createPinia();
export default boot(({ app }) => {
app.use(store);
});
export { store };
src/common/hooks/index.ts 0 → 100644
View file @ 56d5da3f
export * from './use-message';
export * from './use-webstorage';
export * from './use-pagestore';
src/common/hooks/private/webstorage.ts 0 → 100644
View file @ 56d5da3f
import appConfig from 'src/config/app';
// Typescript高级类型Record
// https://zhuanlan.zhihu.com/p/356662885
type IWebStorageReturnType =
| Date
| RegExp
| number
| boolean
| string
| any[]
| Record<string, any>
| null;
interface IWebStorage {
setItem: (key: string, value: any) => void;
getItem: (key: string) => IWebStorageReturnType;
removeItem: (key: string) => void;
}
const prefixKey = appConfig.storagePrefix;
function getStorage(type: 'local' | 'session'): IWebStorage {
const webStorage =
type === 'local' ? window.localStorage : window.sessionStorage;
return {
setItem: (key: string, value: any) => {
webStorage.setItem(prefixKey + key, value);
},
getItem: (key: string) => {
const item = webStorage.getItem(prefixKey + key);
return item || null;
},
removeItem: (key: string) => {
webStorage.removeItem(prefixKey + key);
},
};
}
export type { IWebStorage, IWebStorageReturnType };
export { getStorage };
src/common/hooks/use-message.ts 0 → 100644
View file @ 56d5da3f
import { Notify } from 'quasar';
const creatNotify = function (type: string, msg: string) {
Notify.create({
type,
message: msg,
});
};
type IMessage = {
success: (msg: string) => void;
error: (msg: string) => void;
warn: (msg: string) => void;
info: (msg: string) => void;
};
const message: IMessage = {
success: (msg: string) => {
creatNotify('positive', msg);
},
error: (msg: string) => {
creatNotify('negative', msg);
},
warn: (msg: string) => {
creatNotify('warning', msg);
},
info: (msg: string) => {
creatNotify('info', msg);
},
};
function useMessage() {
return message;
}
export { useMessage };
src/common/hooks/use-pagestore.ts 0 → 100644
View file @ 56d5da3f
import { defineStore } from 'pinia';
import { useSessionStorage } from './index';
import { some, delArrObj, findIndex } from '../utils';
const PAGE_STORE_KEY = 'MAIN_PAGES';
const session = useSessionStorage();
interface RouterType {
fullPath: string;
path: string;
hash?: string;
href?: string;
matched?: any[];
meta?: any;
name?: string;
params?: any;
query?: any;
redirectedFrom?: any;
[proppName: string]: any;
}
const usePageStore = defineStore(PAGE_STORE_KEY, {
state: () => {
const routersItem = JSON.parse(session.getItem(PAGE_STORE_KEY) as string);
return {
activeRouter: (routersItem?.activeRouter as RouterType) || null,
tabRouterList: (routersItem?.tabRouterList as RouterType[]) || [],
allPageKeys: routersItem?.allPageKeys || [],
};
},
getters: {},
actions: {
addRoute(route: RouterType) {
const item: RouterType = {
fullPath: route.fullPath,
path: route.path,
name: route.name,
meta: route.meta,
params: route.params,
query: route.query,
};
this.activeRouter = item;
const flag = some(this.tabRouterList, (item: RouterType) => {
return item.fullPath === route.fullPath;
});
if (!flag) {
this.tabRouterList.push(item);
if (item.meta.keepalive) {
this.allPageKeys.push(route.name);
}
}
this.saveToSession();
},
removePage(path: string) {
const index = findIndex(this.tabRouterList, ['path', path]);
if (path === this.activeRouter.path) {
if (index > 0) {
this.activeRouter = this.tabRouterList[index - 1];
} else {
this.activeRouter = this.tabRouterList[index + 1];
}
}
this.allPageKeys.splice(index, 1);
delArrObj(this.tabRouterList, { path: path });
this.saveToSession();
},
saveToSession() {
session.setItem(PAGE_STORE_KEY, JSON.stringify(this.$state));
},
},
});
export type { RouterType };
export { usePageStore, PAGE_STORE_KEY };
src/common/hooks/use-webstorage.ts 0 → 100644
View file @ 56d5da3f
import { getStorage } from './private/webstorage';
import type { IWebStorage, IWebStorageReturnType } from './private/webstorage';
const useLocalStorage = (): IWebStorage => {
return getStorage('local');
};
const useSessionStorage = (): IWebStorage => {
return getStorage('session');
};
export type { IWebStorage, IWebStorageReturnType };
export { useLocalStorage, useSessionStorage };
src/common/types/index.ts 0 → 100644
View file @ 56d5da3f
export interface AnyType {
[proppName: string]: any;
}
src/common/utils/del-arr-obj.ts 0 → 100644
View file @ 56d5da3f
import { AnyType } from 'src/common/types';
function func(data: Array<any>, key: string, value: any) {
return data.filter((item: any) => {
return item[key] == value;
});
}
/**
* 数组对象删除 改变原数组
* @param objArr - 原始数组
* @param valueData - 删除的对象条件{age:18,num:1}
**/
export const delArrObj = function (objArr: Array<any>, valueData: AnyType) {
for (let i = 0; i < objArr.length; i++) {
objArr[i].item_del_id = i;
}
const valueDataArr = [] as any[];
for (const key in valueData) {
valueDataArr.push({
key: key,
value: valueData[key],
});
}
let resArr = [] as any;
for (let i = 0; i < valueDataArr.length; i++) {
if (i == 0) {
const res = func(objArr, valueDataArr[i].key, valueDataArr[i].value);
resArr = res;
} else {
const res = func(resArr, valueDataArr[i].key, valueDataArr[i].value);
resArr = res;
}
}
for (let i = 0; i < objArr.length; i++) {
for (let j = 0; j < resArr.length; j++) {
if (objArr[i].item_del_id == resArr[j].item_del_id) {
objArr.splice(i, 1);
}
}
}
for (let i = 0; i < objArr.length; i++) {
delete objArr[i].item_del_id;
}
};
src/common/utils/del-empty-objkey.ts 0 → 100644
View file @ 56d5da3f
/**
* 删除对象中为空的属性值 返回一个新对象
* @param data - 原始对象
**/
export const delEmptyObjkey = function (data: any) {
const obj = {} as any;
for (const key in data) {
if (
data[key] !== null &&
data[key] !== undefined &&
data[key] !== '' &&
JSON.stringify(data[key]) !== '[]' &&
JSON.stringify(data[key]) !== '{}'
) {
obj[key] = data[key];
}
}
return obj;
};
src/common/utils/find-arr-objs.ts 0 → 100644
View file @ 56d5da3f
import { AnyType } from 'src/common/types';
function func(data: Array<any>, key: string, value: any) {
return data.filter((item: any) => {
return item[key] == value;
});
}
/**
* 数组对象查找 返回一个数组，返回所有符合条件的数据
* @param objArr - 原始数组
* @param valueData - 查找的对象条件{age:18,num:1}
**/
export const findArrObjs = function (objArr: Array<any>, valueData: AnyType) {
const valueDataArr = [] as any[];
for (const key in valueData) {
valueDataArr.push({
key: key,
value: valueData[key],
});
}
let resArr = [] as any;
for (let i = 0; i < valueDataArr.length; i++) {
if (i == 0) {
const res = func(objArr, valueDataArr[i].key, valueDataArr[i].value);
resArr = res;
} else {
const res = func(resArr, valueDataArr[i].key, valueDataArr[i].value);
resArr = res;
}
}
return resArr;
};
src/common/utils/index.ts 0 → 100644
View file @ 56d5da3f
export * from './del-arr-obj';
export * from './find-arr-objs';
export * from './no-repeat-obj-in-arr';
export * from './obj-del';
export * from './is-obj-equal';
export * from './del-empty-objkey';
export * from './json-str';
export * from './isEmpty';
export * from './maths';
export {
cloneDeep,
orderBy,
find,
findIndex,
size,
every,
some,
maxBy,
minBy,
sumBy,
random,
replace,
repeat,
uniqueId,
} from 'lodash-es';
src/common/utils/is-obj-equal.ts 0 → 100644
View file @ 56d5da3f
/**
* 判断两个对象是否相等
**/
export const isObjEqual = function (obj1: any, obj2: any) {
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length === keys2.length) {
const sortKeys1 = keys1.sort();
const sortKeys2 = keys2.sort();
const sortStr1 = JSON.stringify(sortKeys1);
const sortStr2 = JSON.stringify(sortKeys2);
if (sortStr1 === sortStr2) {
let flag = true;
for (const key1 in obj1) {
if (obj1[key1] !== obj2[key1]) {
flag = false;
break;
}
}
return flag;
} else {
return false;
}
} else {
return false;
}
};
src/common/utils/isEmpty.ts 0 → 100644
View file @ 56d5da3f
export const isEmpty = function (data: any) {
if (data === '' || data === null || data === undefined) {
return true;
} else {
const typeofs = Object.prototype.toString.call(data);
if (typeofs === '[object Array]') {
if (data.length > 0) {
return false;
} else {
return true;
}
} else {
if (Object.keys(data).length > 0) {
return false;
} else {
return true;
}
}
}
};
src/common/utils/json-str.ts 0 → 100644
View file @ 56d5da3f
export const jsonStr = function (json_data: any) {
let cache = [] as any;
const json_str = JSON.stringify(json_data, function (key, value) {
if (typeof value === 'object' && value !== null) {
if (cache.indexOf(value) !== -1) {
return;
}
cache.push(value);
}
return value;
});
cache = null; //释放cache
return json_str;
};
src/common/utils/maths.ts 0 → 100644
View file @ 56d5da3f
/**
* 返回了一个在指定值之间的随机整数
* @param min 这个值不小于 min （如果 min 不是整数，则不小于 min 的向上取整数）
* @param max 这个值小于（不等于）max
* @returns [min ,max )
*/
export const getRandomInt = function (min: number, max: number) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; // 不含最大值，含最小值
};
src/common/utils/no-repeat-obj-in-arr.ts 0 → 100644
View file @ 56d5da3f
function deduplicatObj(arr: Array<any>) {
const cloneArr = JSON.parse(JSON.stringify(arr));
const res = cloneArr.map((item: any) => {
const types = Object.prototype.toString.call(item);
if (types === '[object Array]') {
return handleArr(item);
} else if (types === '[object Object]') {
return handleObj(item);
} else {
return item;
}
});
return res;
}
function handleArr(data: Array<any>) {
return JSON.parse(JSON.stringify(deduplicatObj(data))).sort();
}
function handleObj(data: any) {
for (const key in data) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
const element = data[key];
const types = Object.prototype.toString.call(element);
if (types === '[object Array]') {
data[key] = handleArr(element);
} else if (types === '[object Object]') {
data[key] = handleObj(element);
} else {
//
}
}
}
// 把对象按照默认顺序排序
const keyslist = Object.keys(data).sort();
const myobj = {} as any;
keyslist.map((item: string) => {
myobj[item] = data[item];
});
return myobj;
}
/**
* 数组对象去重 返回一个新数组
* @param data - 原始数组
**/
export const noRepeatObjInArr = function (data: Array<any>) {
const res = deduplicatObj(data);
const mySet: Set<string> = new Set();
res.map((item: any) => {
const JSONstr = JSON.stringify(item);
mySet.add('JSON_' + JSONstr);
});
const arr = [] as any[];
for (const item of mySet) {
const itemArr = item.split('JSON_', 2);
arr.push(JSON.parse(itemArr[1]));
}
return arr;
};
src/common/utils/obj-del.ts 0 → 100644
View file @ 56d5da3f
/**
* 删除对象的某个属性 返回一个删除后的新对象
* @param data - 原始对象
* @param key - 要删除的对象的属性的键名 'name' || ['name','age']
**/
export const objDel = function (data: any, key: string | Array<any>) {
const _data = JSON.parse(JSON.stringify(data));
if (typeof key === 'string') {
_data[key] = undefined;
} else if (Array.isArray(key)) {
for (const item of key) {
_data[item] = undefined;
}
}
const obj = {} as any;
for (const key in _data) {
if (_data[key]) {
obj[key] = _data[key];
}
}
return obj;
};
src/components/BaiduMap.vue 0 → 100644
View file @ 56d5da3f
<template>
<div
id="allmap"
:style="{ width: width + 'px', height: height + 'px' }"
></div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, cloneDeep } from 'src/common/utils';
interface Props {
id: string;
width: number;
height: number;
bMapPoint?: Array<number>; // 中心点坐标
mapLevel?: number; // 地图级别
navigationControl?: boolean; // 平移缩放控件
overviewMapControl?: boolean; // 缩略地图控件
scrollWheelZoom?: boolean; // 开启鼠标滚轮缩放
scaleControl?: boolean; // 比例尺控件
}
const props = withDefaults(defineProps<Props>(), {
id: 'map',
width: 100,
height: 100,
bMapPoint: () => [],
mapLevel: 12,
navigationControl: false,
overviewMapControl: false,
scrollWheelZoom: false,
scaleControl: false,
});
const bMapApi = ref(null);
const state = reactive({
bMapPoint: cloneDeep(props.bMapPoint),
});
onMounted(async () => {
let map = new (window as any).BMap.Map(props.id); // 创建Map实例
bMapApi.value = map;
let p = new Promise<void>(function (resolve) {
if (isEmpty(props.bMapPoint)) {
let myCity = new (window as any).BMap.LocalCity();
myCity.get((res: any) => {
state.bMapPoint.push(res.center.lng);
state.bMapPoint.push(res.center.lat);
resolve();
});
} else {
resolve();
}
});
p.then(() => {
map.centerAndZoom(
new (window as any).BMap.Point(state.bMapPoint[0], state.bMapPoint[1]),
props.mapLevel
);
});
if (props.navigationControl) {
map.addControl(new (window as any).BMap.NavigationControl());
}
if (props.overviewMapControl) {
map.addControl(new (window as any).BMap.OverviewMapControl());
}
if (props.scaleControl) {
map.addControl(new (window as any).BMap.ScaleControl());
}
if (props.scrollWheelZoom) {
map.enableScrollWheelZoom(true);
}
// 添加地图类型控件
// map.addControl(
// new window.BMap.MapTypeControl({
// mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP],
// })
// );
// map.setCurrentCity('成都'); // 设置地图显示的城市 仅当设置城市信息时，MapTypeControl的切换功能才能可用
});
defineExpose({
bMapApi,
});
</script>
<style lang="scss" scoped></style>
src/components/DateTimePick.vue 0 → 100644
View file @ 56d5da3f
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { date } from 'quasar';
interface Props {
modelValue: string;
format24h?: boolean;
withSeconds?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
format24h: false,
withSeconds: false,
});
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const dates = computed({
set(value: string) {
emit('update:modelValue', value);
},
get() {
return props.modelValue;
},
});
const timeMask = computed(() => {
if (props.withSeconds) {
return 'HH:mm:ss';
} else {
return 'HH:mm';
}
});
const dateRules = computed(() => {
let dateRegular: RegExp;
if (props.withSeconds) {
dateRegular =
/^-?[\d]+\/[0-1]\d\/[0-3]\d ([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/;
} else {
dateRegular = /^-?[\d]+\/[0-1]\d\/[0-3]\d (\d{2}):(\d{2})$/;
}
return [(v: string) => dateRegular.test(v)];
});
const dateProxyDate = ref('');
const timeProxyDate = ref('');
const dateLocale = reactive({
daysShort: '六_日_一_二_三_四_五'.split('_'),
months:
'一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
'_'
),
monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
firstDayOfWeek: 1,
format24h: true,
pluralDay: 'dias',
});
onMounted(() => {
getNowDate();
});
function getNowDate() {
dateProxyDate.value = date.formatDate(Date.now(), 'YYYY/MM/DD');
timeProxyDate.value = date.formatDate(Date.now(), timeMask.value);
}
function updateProxy() {
const _dates = dates.value;
const dateArr = _dates.split(' ');
dateProxyDate.value = dateArr[0];
timeProxyDate.value = dateArr[1];
}
function onClickDate() {
const datesStr = `${dateProxyDate.value} ${timeProxyDate.value}`;
dates.value = datesStr;
}
</script>
<template>
<div class="hcy-datetime-pick">
<q-input filled dense v-model="dates" :rules="dateRules">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy
@before-show="updateProxy"
transition-show="scale"
transition-hide="scale"
class="row"
>
<q-date
flat
square
minimal
v-model="dateProxyDate"
:locale="dateLocale"
mask="YYYY/MM/DD"
class="my-date"
>
</q-date>
<q-time
flat
square
v-model="timeProxyDate"
:mask="timeMask"
:format24h="format24h"
:with-seconds="withSeconds"
text-color="primary"
class="my-time"
>
<div class="row items-center justify-end q-gutter-sm">
<q-btn
label="此刻"
size="sm"
color="primary"
flat
@click="getNowDate"
/>
<q-btn
unelevated
label="确定"
size="sm"
color="primary"
@click="onClickDate"
v-close-popup
/>
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
<style lang="scss" scoped>
.my-date {
:deep(.q-date__main .q-date__content .q-date__view .q-date__navigation) {
> .relative-position {
color: $primary;
}
}
}
.my-time {
:deep(.q-time__header) {
background-color: white;
}
:deep(.q-time__main
.q-time__content
.q-time__container-child
.q-time__clock
.q-time__clock-circle
.q-time__clock-position--active) {
color: white !important;
}
}
</style>
src/components/EssentialLink.vue 0 → 100644
View file @ 56d5da3f
<template>
<q-item
clickable
@click="onClick"
:active="pageStore.activeRouter?.path === link ? true : false"
active-class="bg-primary-bg-light"
>
<q-item-section v-if="icon" avatar>
<q-avatar size="md" square>
<img :src="icon" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
<q-item-label caption>{{ caption }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { usePageStore } from 'src/common/hooks';
export default defineComponent({
name: 'EssentialLink',
props: {
active: {
type: Boolean,
required: true,
},
title: {
type: String,
required: true,
},
caption: {
type: String,
default: '',
},
link: {
type: String,
default: '#',
},
icon: {
type: String,
default: '',
},
},
setup(props) {
const pageStore = usePageStore();
const router = useRouter();
const state = reactive({
//
});
const onClick = () => {
const currentRouter = router.currentRoute.value.path;
if (currentRouter === props.link) return;
router.push(props.link);
};
return {
...toRefs(state),
onClick,
pageStore,
};
},
});
</script>
src/components/MyForm.vue 0 → 100644
View file @ 56d5da3f
<template>
<q-form ref="myForm" class="my-form row fit">
<div
:class="['item', item.col || 'col-12']"
v-for="(item, index) in state.config"
:key="index"
>
<template v-if="item.solt">
<div>
<slot :name="item.solt"></slot>
</div>
</template>
<template v-else>
<q-input
v-if="item.type !== 'select'"
:type="item.type"
v-model="formValue[item.fild]"
v-bind="item.bind"
:disable="
item.bind.disable === undefined ? state.disable : item.bind.disable
"
:readonly="
item.bind.readonly === undefined
? state.readonly
: item.bind.readonly
"
/>
<q-select
v-if="item.type === 'select'"
v-bind="item.bind"
v-model="formValue[item.fild]"
:disable="
item.bind.disable === undefined ? state.disable : item.bind.disable
"
:readonly="
item.bind.readonly === undefined
? state.readonly
: item.bind.readonly
"
/>
</template>
</div>
</q-form>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { cloneDeep, isObjEqual } from 'src/common/utils';
interface Props {
config: any;
modelValue: any;
disable?: boolean;
readonly?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
config: () => {
return {};
},
modelValue: () => {
return {};
},
disable: false,
readonly: false,
});
defineExpose({
validate,
reset,
});
const emit = defineEmits<{
(e: 'update:modelValue', value: any): void;
}>();
const myForm = ref<any>(null);
const state = reactive({
config: cloneDeep(props.config),
disable: props.disable,
readonly: props.readonly,
});
const formValue = ref<any>(cloneDeep(props.modelValue));
watch(
() => props.config,
(val) => {
state.config = cloneDeep(val);
},
{
deep: true,
}
);
watch(
() => props.modelValue,
(val: any) => {
if (!isObjEqual(val, formValue.value)) {
formValue.value = val;
}
},
{
deep: true,
}
);
watch(
formValue.value,
(val) => {
emit('update:modelValue', val);
},
{ deep: true }
);
onMounted(() => {
//
});
async function validate() {
return await myForm.value.validate().then((success: any) => {
if (success) {
return true;
} else {
return false;
}
});
}
function reset() {
myForm.value.resetValidation();
}
</script>
<style lang="scss" scoped>
.item {
padding: $padding-sm;
}
</style>
src/components/MyTooltip.vue 0 → 100644
View file @ 56d5da3f
<template>
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[6, 6]"
class="com-tooltip-sty"
>
<slot></slot>
</q-tooltip>
</template>
src/components/canvas-static-route/CanvasStaticRoute.vue 0 → 100644
View file @ 56d5da3f
<!--
* canvas静态路径绘制
-->
<script lang="ts" setup>
import {
onMounted,
ref,
reactive,
onBeforeUnmount,
watch,
nextTick,
} from 'vue';
import { isEmpty, cloneDeep } from 'src/common/utils';
import { CanvasData } from '../models';
interface Props {
width: number;
height: number;
data: CanvasData[];
border?: boolean;
center?: boolean; // 是否居将内容居中展示
drag?: boolean; // 是否可拖动画布
zoom?: boolean; // 是否开启鼠标滚轮缩放
bgUrl?: string;
bgWidth?: number;
bgHeight?: number;
}
const props = withDefaults(defineProps<Props>(), {
width: 700,
height: 700,
data: () => [],
border: true,
center: false,
drag: false,
zoom: false,
bgUrl: '',
bgWidth: 0,
bgHeight: 0,
});
const canvasDom = ref<any>(null);
const boxDom = ref<any>(null);
const img = ref<any>(new Image());
img.value.src = require('./imgs/arrow.png');
const step = 20;
const defaultLineWidth = 10; // 线条宽度，默认为10
const firstObserver = ref(1); // 初始化时的尺寸变化
const timer = ref<any>(null); // 防抖
const wheelDelta = ref<number>(1); // 放大的倍数，初始值1，既不放大，也不缩小
const lastWheelDelta = ref<number>(1);
const wheelDeltaStep = 0.2; // 鼠标每滚动一下，放大的倍数增长
const cursor = ref('default'); // 鼠标样式
const state = reactive({
ctx: null as any,
lineWidth: defaultLineWidth,
styBasic: {
lineWidth: defaultLineWidth,
strokeStyle: '#00BB52',
lineJoin: 'round',
lineCap: 'round',
} as any,
observer: null as any, // 监听元素尺寸变化
translateX: 0,
translateY: 0,
lastTranslateX: 0,
lastTranslateY: 0,
canvasW: props.bgWidth || props.width,
canvasH: props.bgHeight || props.height,
mousePointX: 0, // 鼠标缩放点的位置
mousePointY: 0,
// mousePointScaleX: 0, // 鼠标乘以wheelDelta的位置
// mousePointScaleY: 0,
});
watch(
() => props.data,
() => {
dataChange();
}
);
watch(
() => [props.bgWidth, props.bgHeight],
([newW, newH]) => {
bgSizeChange(newW, newH);
}
);
onMounted(() => {
img.value.onload = function () {
initCanvas();
getCanvas();
};
});
onBeforeUnmount(() => {
offDisconnect();
});
function innitCtx() {
let ctx = canvasDom.value.getContext('2d');
state.ctx = ctx;
// 监听元素尺寸变化
offDisconnect();
state.observer = new ResizeObserver(handleResize);
state.observer.observe(boxDom.value);
}
function initCanvas() {
if (canvasDom.value) {
innitCtx();
} else {
setTimeout(() => {
initCanvas();
}, 1000);
}
}
function getCanvas(type = '') {
let DATA = cloneDeep(props.data);
DATA.map((item: any) => {
item.data.map((ele: any) => {
ele.x *= wheelDelta.value;
ele.y *= wheelDelta.value;
});
});
console.log('数据', DATA);
// 重置画布偏移位置
// state.translateX = 0;
// state.translateY = 0;
// state.lastTranslateX = 0;
// state.lastTranslateY = 0;
const reData1 = DATA.map((item: any) => {
return item.data;
});
let reData2 = [] as any[];
reData1.map((item: any) => {
reData2.push(...item);
});
let resData3 = [] as any[];
let arrX = [] as number[];
let arrY = [] as number[];
reData2.map((item: any) => {
resData3.push(item.x, item.y);
arrX.push(item.x);
arrY.push(item.y);
});
// 将内容居中展示
if (type === 'onmousewheel') {
// 当鼠标滚动放大缩小时不做居中展示处理，要另外计算以鼠标缩放点为中心的偏移值
} else {
if (props.center) {
const maxX = Math.max(...arrX); // x的最大值
const minX = Math.min(...arrX); // x的最小值
const maxY = Math.max(...arrY); // y的最大值
const minY = Math.min(...arrY); // y的最大值
const absX = maxX - minX;
const absY = maxY - minY;
const relativeX = absX / 2; // x的相对中心坐标
const relativeY = absY / 2; // y的相对中心坐标
const viewCenterX = props.width / 2; // 可视区域的中心x坐标
const viewCenterY = props.height / 2; // 可视区域的中心y坐标
const diffX = viewCenterX - relativeX - minX; // 中心点坐标的差值
const diffY = 0 - (viewCenterY - relativeY - minY);
state.translateX = diffX;
state.translateY = 0 - diffY;
state.lastTranslateX = state.translateX;
state.lastTranslateY = state.translateY;
}
}
clearCanvas();
if (props.bgWidth > 0 && props.bgHeight > 0) {
} else {
const max = Math.max(...resData3); // 取最大数据作为cnavas的宽高
state.canvasW = max + 100; // 额外空间，要考虑算上线条的宽度
state.canvasH = max + 100; // 额外空间，要考虑算上线条的宽度
}
nextTick(() => {
DATA.map((item: CanvasData) => {
drawCanvaIten(item);
});
});
}
function drawCanvaIten(data: CanvasData) {
const _data = data.data;
const style = data.style as any;
// data里面至少有2个点才能连线
if (_data.length > 1) {
for (let n = 0; n < _data.length - 1; n++) {
const x1 = _data[n].x;
const y1 = _data[n].y;
const x2 = _data[n + 1].x;
const y2 = _data[n + 1].y;
const A = y1 - y2;
const B = x1 - x2;
const ctx = state.ctx;
let _step: number = step; // 箭头间相隔的间距
// 设置样式
state.lineWidth = defaultLineWidth;
for (const key in state.styBasic) {
ctx[key] = state.styBasic[key];
}
if (!isEmpty(style)) {
state.lineWidth = style.lineWidth || defaultLineWidth;
_step = style.step || step;
for (const key in style) {
ctx[key] = style[key];
}
}
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.stroke();
ctx.restore();
let abs_x = Math.abs(A);
let abs_y = Math.abs(B);
let angle = Math.atan2(A, B);
let theta = 0 - angle * (180 / Math.PI) - 90;
// 求斜边长度
let size = Math.sqrt(abs_x * abs_x + abs_y * abs_y);
// 把斜边分成了几段
let part = Number(parseInt(String(size / _step)));
let du = 90 - theta;
// console.log('斜边长度', size, '斜边分为了几段', part, '旋转度', du);
// let X = Math.sin(theta * (Math.PI / 180)) * size;
// let Y = Math.cos(theta * (Math.PI / 180)) * size;
// console.log('长', X, '高', Y);
for (let i = 0; i <= part; i++) {
let part_c = _step * i;
let part_x = x1 + Math.sin(theta * (Math.PI / 180)) * part_c;
let part_y = y1 + Math.cos(theta * (Math.PI / 180)) * part_c;
ctx.save();
ctx.translate(part_x, part_y);
ctx.rotate((Math.PI / 180) * du);
const doubleLineWidth = state.lineWidth * 2;
ctx.drawImage(
img.value,
0 - state.lineWidth,
0 - state.lineWidth,
doubleLineWidth,
doubleLineWidth
);
ctx.restore();
}
}
}
}
function dataChange() {
console.log('数据变了');
if (state.ctx) {
clearCanvas();
getCanvas();
}
}
function onMove(ev: any) {
if (!props.drag) return;
state.translateX = ev.offset.x + state.lastTranslateX;
state.translateY = ev.offset.y + state.lastTranslateY;
if (ev.isFinal) {
state.lastTranslateX = state.translateX;
state.lastTranslateY = state.translateY;
}
}
function clearCanvas() {
if (state.ctx) {
state.ctx.clearRect(0, 0, state.canvasW, state.canvasW);
}
}
function handleResize() {
if (firstObserver.value > 1) {
console.log('尺寸变了');
getCanvas();
}
firstObserver.value++;
}
function bgSizeChange(w: any, h: any) {
console.log('背景图片的尺寸变了');
state.canvasW = w * wheelDelta.value;
state.canvasH = h * wheelDelta.value;
getCanvas();
}
// 缩放
function onMousewheel(ev: any) {
if (!props.zoom) return;
cursor.value = 'progress';
state.mousePointX = ev.layerX;
state.mousePointY = ev.layerY;
if (ev.wheelDelta > 0) {
wheelDelta.value += wheelDeltaStep;
console.log('放大');
} else {
// 如果是0.51 则 0.51-0.2 = 0.31 ，所以缩小的最小倍数是0.3倍左右
wheelDelta.value =
wheelDelta.value < 0.5 ? 0.3 : wheelDelta.value - wheelDeltaStep;
console.log('缩小');
}
debounce(() => {
const relativeX = state.mousePointX - state.translateX;
const relativeY = state.mousePointY - state.translateY;
const diffScale = wheelDelta.value / lastWheelDelta.value;
const relativeScaleX = relativeX * diffScale;
const relativeScaleY = relativeY * diffScale;
// state.mousePointScaleX = relativeScaleX + state.translateX;
// state.mousePointScaleY = relativeScaleY + state.translateY;
const diffTranslateX = relativeScaleX - relativeX;
const diffTranslateY = relativeScaleY - relativeY;
state.translateX -= diffTranslateX;
state.translateY -= diffTranslateY;
// console.log(
// 'x=',
// state.mousePointX,
// 'y=',
// state.mousePointY,
// 'relativeX=',
// relativeX,
// 'relativeY=',
// relativeY,
// 'relativeScaleX=',
// relativeScaleX,
// 'relativeScaleY=',
// relativeScaleY,
// 'diffTranslateX=',
// diffTranslateX,
// 'diffTranslateY=',
// diffTranslateY
// );
console.log('倍数', wheelDelta.value);
lastWheelDelta.value = wheelDelta.value;
state.lastTranslateX = state.translateX;
state.lastTranslateY = state.translateY;
// 如果设置了背景图片尺寸
if (props.bgWidth > 0 && props.bgHeight > 0) {
state.canvasW = props.bgWidth * wheelDelta.value;
state.canvasH = props.bgHeight * wheelDelta.value;
}
getCanvas('onmousewheel');
cursor.value = 'default';
}, 500);
}
function offDisconnect() {
if (state.observer) {
state.observer.disconnect();
state.observer = null;
}
}
// 防抖
// 触发事件 n 秒后执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
function debounce(func: any, time: number) {
// setTimeout需是全局变量
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
timer.value = setTimeout(() => {
func();
clearTimeout(timer.value);
timer.value = null;
}, time);
}
</script>
<template>
<div
class="hcy-canvas-box"
:style="{
width: props.width + 'px',
height: props.height + 'px',
cursor: cursor,
}"
:class="[props.border ? 'has-border' : 'hasno-border']"
ref="boxDom"
@mousewheel.prevent="onMousewheel"
>
<!-- <div
class="text-box"
:style="{ top: state.mousePointY + 'px', left: state.mousePointX + 'px' }"
></div> -->
<canvas
ref="canvasDom"
id="canvas"
:width="state.canvasW"
:height="state.canvasH"
v-touch-pan.prevent.mouse="onMove"
:style="{
transform: `translate(${state.translateX}px, ${state.translateY}px)`,
backgroundImage: `url(${props.bgUrl})`,
}"
></canvas>
</div>
</template>
<style lang="scss" scoped>
.text-box {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
.hcy-canvas-box {
position: relative;
box-sizing: content-box;
overflow: hidden;
}
.has-border {
border: 1px solid;
}
.hasno-border {
border: 1px solid transparent;
}
#canvas {
background-color: rgb(248, 246, 241);
background-size: 100% 100%;
}
</style>
src/components/carousel-warp/CarouselWarp.vue 0 → 100644
View file @ 56d5da3f
<!--
* 轮播图
-->
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { isEmpty } from 'src/common/utils';
// import * as echarts from 'echarts';
// type EChartsOption = echarts.EChartsOption;
interface Props {
itemKey: string;
list: any[];
times?: number;
navigation?: boolean; // 小圆点点击导航
}
const props = withDefaults(defineProps<Props>(), {
itemKey: 'id',
list: () => [],
times: 10000,
navigation: false,
});
const pointActive = ref<any>(1);
const lastIndex = ref(0);
const timer = ref<any>(null);
watch(
() => props.list,
() => {
listChange();
}
);
onMounted(() => {
//
});
onBeforeUnmount(() => {
offTimer();
});
// list改变
function listChange() {
console.log('listChange', props.list);
offTimer(); // 清除定时器
if (isEmpty(props.list)) {
resetIndex();
} else {
// 如果当前下标 > list长度，则下标重新开始
if (pointActive.value > props.list.length) {
resetIndex();
}
onStartTimer();
}
}
function onStartTimer() {
timer.value = setTimeout(() => {
const maxLength = props.list.length;
if (pointActive.value >= maxLength) {
pointActive.value = 1;
lastIndex.value = 0;
} else {
pointActive.value++;
lastIndex.value++;
}
onStartTimer();
}, props.times);
}
function onClickPoint(val: any, index: number) {
offTimer();
if (index > lastIndex.value) {
// 右
} else if (index < lastIndex.value) {
// 左
} else {
return;
}
pointActive.value = val[props.itemKey];
lastIndex.value = index;
onStartTimer();
}
function offTimer() {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
function resetIndex() {
pointActive.value = 1;
lastIndex.value = 0;
}
</script>
<template>
<div class="carousel-box">
<div class="carousel">
<div class="carousel-content">
<div class="carousel-item-box">
<!-- item -->
<template v-for="(i, index) in props.list" :key="index">
<div
class="item-box opacity-in"
v-show="pointActive === i[props.itemKey]"
>
<!-- some item -->
<div class="my-item-box center">
<div class="fit" :id="`chart-pie-dom-${i[props.itemKey]}`">
{{ i.label }}
</div>
</div>
</div>
</template>
</div>
</div>
<div class="carousel-points" v-if="props.navigation">
<div
class="point"
:class="{ 'active-point': pointActive === i[props.itemKey] }"
v-for="(i, index) in props.list"
:key="index"
@click="onClickPoint(i, index)"
></div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@keyframes opacity-in {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.carousel-box {
width: 100%;
height: 100%;
}
.carousel {
width: 100%;
height: 100%;
border: 1px solid $primary;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
}
.carousel-content {
flex: 1;
overflow: hidden;
}
.carousel-item-box {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.item-box {
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
background-color: pink;
top: 0;
left: 0;
}
.opacity-in {
animation: opacity-in 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.my-item-box {
width: 100%;
height: 100%;
color: #fff;
font-size: 40px;
}
.carousel-points {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 4px;
padding-bottom: 0px;
}
.point {
width: 12px;
height: 12px;
margin-right: 4px;
margin-bottom: 4px;
border-radius: 50%;
border: 1px solid $primary;
cursor: pointer;
transition: all 0.5s;
}
.active-point {
height: 10px;
width: 30px;
border-radius: 10px;
background-color: $primary;
}
</style>
src/components/index.ts 0 → 100644
View file @ 56d5da3f
import DateTimePick from './DateTimePick.vue';
import BaiduMap from './BaiduMap.vue';
import MyForm from './MyForm.vue';
import MyTooltip from './MyTooltip.vue';
import CanvasStaticRoute from './canvas-static-route/CanvasStaticRoute.vue';
import CarouselWarp from './carousel-warp/CarouselWarp.vue';
export {
DateTimePick as ComDateTimePick,
BaiduMap as ComBaiduMap,
MyForm as ComForm,
MyTooltip as ComTooltip,
CanvasStaticRoute as ComCanvasStaticRoute,
CarouselWarp as ComCarouselWarp,
};
export default {
DateTimePick,
BaiduMap,
MyForm,
MyTooltip,
CanvasStaticRoute,
CarouselWarp,
};
src/components/models.ts 0 → 100644
View file @ 56d5da3f
export interface Todo {
id: number;
content: string;
}
export interface Meta {
totalCount: number;
}
export interface CanvasRoute {
x: number;
y: number;
[proppName: string]: any;
}
export interface CanvasStyle {
lineWidth?: number;
strokeStyle?: string;
lineJoin?: string;
lineCap?: string;
step?: number;
}
export interface CanvasData {
data: CanvasRoute[];
style?: CanvasStyle;
}
src/config/app.ts 0 → 100644
View file @ 56d5da3f
// 开发环境app配置
const development = {
name: 'TopPMS',
productName: 'TopPMS',
storagePrefix: '__ABC__',
langs: ['en-US', 'zh-CN', 'zh-TW'],
serverUrl: { base: 'http://139.196.104.13:9000' },
//http://192.168.2.100:29010
base_url: '',
};
// 生产环境app配置
const production = {
name: 'TopPMS',
productName: 'TopPMS',
storagePrefix: '__ABC__',
langs: ['en-US', 'zh-CN', 'zh-TW'],
// serverUrl: { base: '' },
base_url: '',
};
export default process.env.NODE_ENV === 'production' ? production : development;
src/config/icons.ts 0 → 100644
View file @ 56d5da3f
export default {
num0: 'fa-solid fa-0', // 数字0
idCard: 'fa-regular fa-address-card', // 身份证
mapLocation: 'bi-pin-map-fill', // 地图定位
alipay: 'fa-brands fa-alipay', // 支付宝
play: 'fa-solid fa-circle-play', // 播放
pause: 'fa-solid fa-circle-pause', // 暂停
takeColor: 'fa-solid fa-palette', // 取色
reset: 'bi-arrow-counterclockwise', // 重置
refresh: 'bi-arrow-repeat', // 刷新
delete: 'bi-trash', // 删除
alarm_clock: 'bi-stopwatch', // 闹钟
};
src/css/app.scss 0 → 100644
View file @ 56d5da3f
// app global css in SCSS form
// 布局
.center {
display: flex;
justify-content: center;
align-items: center;
}
.container-height {
height: calc(100vh - 50px);
}
// 颜色
// 播放
.text-play {
color: #6cc4a1;
}
.bg-play {
background: #6cc4a1;
}
// 暂停
.text-pause {
color: #df7861;
}
.bg-pause {
background: #df7861;
}
// 导航栏激活颜色
.text-headeractive {
color: $primary-3;
}
.bg-headeractive {
background: $primary-3;
}
// tooltip样式
.com-tooltip-sty {
border: 1px solid rgba(9, 30, 66, 0.13);
color: $gray-light-text;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
src/css/quasar.variables.scss 0 → 100644
View file @ 56d5da3f
// Quasar SCSS (& Sass) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
// Check documentation for full list of Quasar variables
// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files
// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$space-base: 16px !default;
$padding-xs: ($space-base * 0.25);
$padding-sm: ($space-base * 0.5);
$padding-md: $space-base;
$padding-lg: ($space-base * 1.5);
$padding-xl: ($space-base * 3);
$primary: #78c0a8;
$secondary: #26a69a;
$accent: #9c27b0;
$dark: #1d1d1d;
$positive: #8bc24c;
$negative: #e8222d;
$info: #90c078;
$warning: #f7b32d;
$--color-white: #fff;
$--color-dark: #000;
$primary-10: mix($--color-dark, $primary, 50%);
$primary-9: mix($--color-dark, $primary, 40%);
$primary-8: mix($--color-dark, $primary, 30%);
$primary-7: mix($--color-dark, $primary, 20%);
$primary-6: mix($--color-dark, $primary, 10%);
$primary-5: mix($--color-white, $primary, 5%);
$primary-4: mix($--color-white, $primary, 10%);
$primary-3: mix($--color-white, $primary, 20%);
$primary-2: mix($--color-white, $primary, 30%);
$primary-1: mix($--color-white, $primary, 50%);
$primary-bg-light: rgba(120, 192, 168, 0.136);
.bg-primary-bg-light {
background: $primary-bg-light;
}
$border-color: rgba(0, 0, 0, 0.12);
$gray-text: #000000de;
$gray-light-text: #00000098;
src/env.d.ts 0 → 100644
View file @ 56d5da3f
/* eslint-disable */
declare namespace NodeJS {
interface ProcessEnv {
NODE_ENV: string;
VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
VUE_ROUTER_BASE: string | undefined;
}
}
src/http/index.ts 0 → 100644
View file @ 56d5da3f
import axios from 'axios';
import { Notify } from 'quasar';
import appConfig from 'src/config/app';
const $axios = axios.create();
// 请求方法
const request = (options: any) => {
const defaultOptins = {
baseURL: appConfig.base_url,
timeout: 30000,
};
const config = Object.assign(defaultOptins, options);
return $axios(config);
};
// http request 拦截器
$axios.interceptors.request.use(
(config: any) => {
return config;
},
(error) => {
return Promise.reject(error);
}
);
// http response 拦截器
$axios.interceptors.response.use(
(response: any) => {
return response;
},
async (error) => {
let msg = 'Unknown Error';
if (error.response.status === 500 || error.response.status === 504) {
msg = 'Internal Server Error';
} else {
msg = error.response.data.detail.msg; // 接口返回的错误信息
}
Notify.create({
message: msg,
type: 'negative',
position: 'top-right',
});
return Promise.reject(error);
}
);
export default request;
src/http/jsonp.ts 0 → 100644
View file @ 56d5da3f
export function baidu_api_point(callback: any) {
//注意这里挂载在了window上
(window as any).callbackData = callback;
const url =
'https://api.map.baidu.com/location/ip?ak=RDBRKGErFTLbtmvUXp6X4UACeQGP5KlD&ip=&coor=bd09ll';
const fetchJsonp = function (url: string) {
const body = document.getElementsByTagName('body')[0];
//插入一个script
const script = document.createElement('script');
script.setAttribute('src', url);
body.appendChild(script);
};
fetchJsonp(url);
}
src/index.template.html 0 → 100644
View file @ 56d5da3f
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8" />
<meta name="description" content="<%= productDescription %>" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
/>
<!-- <link
rel="icon"
type="image/png"
sizes="128x128"
href="icons/favicon-128x128.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="icons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="icons/favicon-16x16.png"
/> -->
<link rel="icon" sizes="128x128" type="image/ico" href="favicon.svg" />
<script
type="text/javascript"
src="http://api.map.baidu.com/getscript?v=3.0&ak=RDBRKGErFTLbtmvUXp6X4UACeQGP5KlD"
></script>
</head>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
</body>
</html>
src/layouts/MainLayout.vue 0 → 100644
View file @ 56d5da3f
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn flat dense round @click="toggleLeftDrawer">
<q-avatar>
<img
:src="
leftDrawerOpen
? require('./menuListIcons/toggle-left-drawer-show.svg')
: require('./menuListIcons/toggle-left-drawer-hide.svg')
"
/>
</q-avatar>
</q-btn>
<q-toolbar-title> Quasar App </q-toolbar-title>
<q-tabs
v-model="defaultRouter"
no-caps
shrink
active-color="white"
active-bg-color="headeractive"
>
<q-tab
class="my-tab"
v-for="page in tabsList"
:key="page.link"
:name="page.link"
:label="page.title"
@click.stop="clickTab(page)"
>
<q-btn
v-show="tabsList.length > 1"
dense
flat
round
size="sm"
icon="close"
@mousedown.stop="doNothing"
@click.stop="closeTab(page)"
>
</q-btn>
</q-tab>
</q-tabs>
<q-space />
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
<q-list>
<q-item-label header style="padding: 0">
<TopLeftLoading />
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import { onBeforeRouteUpdate, useRouter } from 'vue-router';
import { usePageStore } from 'src/common/hooks';
import EssentialLink from 'components/EssentialLink.vue';
import TopLeftLoading from './TopLeftLoading.vue';
export default defineComponent({
name: 'MainLayout',
components: {
EssentialLink,
TopLeftLoading,
},
setup() {
const pageStore = usePageStore();
const router = useRouter();
const leftDrawerOpen = ref(false);
const defaultRouter = ref('/page1');
const linksList = ref<any>([]);
const state = reactive({
tabsList: [] as any,
});
onBeforeRouteUpdate((to, from, next) => {
defaultRouter.value = to.path;
if (to.matched.length == 3) {
pageStore.addRoute(to as any);
getTabsList();
}
next();
});
onMounted(() => {
getLinksList();
const path = router.currentRoute.value.path;
defaultRouter.value = path;
pageStore.addRoute(router.currentRoute.value as any);
getTabsList();
});
const getLinksList = () => {
const lists = [
{
title: '一',
caption: '日历',
icon: require('./menuListIcons/page1.svg'),
link: '/page1',
active: true,
},
{
title: '贰',
caption: '2',
icon: require('./menuListIcons/page2.svg'),
link: '/page2',
active: false,
},
{
title: '叁',
caption: '3',
icon: require('./menuListIcons/page3.svg'),
link: '/page3',
active: false,
},
{
title: '四',
caption: '4',
icon: require('./menuListIcons/page4.svg'),
link: '/page4',
active: false,
},
{
title: '五',
caption: '5',
icon: require('./menuListIcons/page5.svg'),
link: '/page5',
active: false,
},
{
title: '六',
caption: '一些js练习',
icon: require('./menuListIcons/page6.png'),
link: '/page6',
active: false,
},
];
for (const item of lists) {
if (item.link === defaultRouter.value) {
item.active = true;
} else {
item.active = false;
}
}
linksList.value = lists;
};
const getTabsList = () => {
state.tabsList = pageStore.tabRouterList.map((item: any) => {
return {
title: item.meta?.title,
link: item.path,
keepalive: item.meta?.keepalive,
permission: item.meta?.permission,
};
});
};
const clickTab = (page: any) => {
router.push(page.link);
};
const closeTab = (page: any) => {
pageStore.removePage(page.link);
getTabsList();
router.push(pageStore.activeRouter.path);
};
const doNothing = () => {
// to prevent tab close button ripple effect
};
return {
...toRefs(state),
essentialLinks: linksList,
leftDrawerOpen,
toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
},
linksList,
pageStore,
defaultRouter,
clickTab,
closeTab,
doNothing,
};
},
});
</script>
<style lang="scss" scoped>
.my-tab {
:deep(.q-tab__content) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
> button {
color: transparent;
}
&:hover > button {
color: white;
}
.q-tab__label {
flex: 1;
}
}
}
</style>
src/layouts/TopLeftLoading.vue 0 → 100644
View file @ 56d5da3f
<script lang="ts" setup>
import { onMounted } from 'vue';
onMounted(() => {
//
});
</script>
<template>
<div class="top-left-box row items-center justify-center overflow-hidden">
<span>间谍过家家</span>
</div>
</template>
<style lang="scss" scoped>
.top-left-box {
height: 50px;
padding: $padding-sm;
}
</style>
src/layouts/menuListIcons/page1.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652088790468" class="icon" viewBox="0 0 1067 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1324" xmlns:xlink="http://www.w3.org/1999/xlink" width="520.99609375" height="500"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M43.389831 980.610169V173.559322c0-71.59322 58.576271-130.169492 130.169491-130.169491h720.271186c71.59322 0 130.169492 58.576271 130.169492 130.169491v807.050847H43.389831z" fill="#94D6D0" p-id="1325"></path><path d="M43.389831 251.661017h980.610169v728.949152H43.389831z" fill="#F0F0FF" p-id="1326"></path><path d="M648.647593 521.719322l91.118644-60.745763-50.267118-31.678915-56.40678 394.847458 64.433898 9.207322 56.40678-394.847458 10.292068-72.053152-60.559187 40.374237-91.118644 60.745763zM305.173695 592.271186h199.59322v65.084746h-199.59322z" fill="#ABABD1" p-id="1327"></path><path d="M372.427932 514.169492h65.084746v221.288135h-65.084746z" fill="#ABABD1" p-id="1328"></path><path d="M43.389831 922.033898h980.610169V980.610169H43.389831z" fill="#6E6E96" opacity=".07" p-id="1329"></path><path d="M379.661017 43.389831h333.377085v208.271186H379.661017z" fill="#FFE95F" p-id="1330"></path><path d="M1024 173.559322c0-71.59322-58.576271-130.169492-130.169492-130.169491h-210.440677v208.271186H1024V173.559322z" fill="#FF9780" p-id="1331"></path><path d="M43.389831 208.813559h980.610169v83.525424H43.389831z" fill="#6E6E96" opacity=".15" p-id="1332"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/page2.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652088596536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1161" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M970.443515 514.142259c0-252.006828-204.294427-456.301255-456.301256-456.301255C262.139715 57.841004 57.841004 262.135431 57.841004 514.142259S262.139715 970.443515 514.142259 970.443515L970.443515 514.142259z" fill="#93DBCF" p-id="1162"></path><path d="M514.142259 970.443515S482.402544 514.142259 970.443515 514.142259L514.142259 970.443515z" fill="#93DBCF" p-id="1163"></path><path d="M927.131314 556.34477l40.612954-40.612954c-488.040971 0-456.301255 456.301255-456.301255 456.301255l39.640368-39.640368c14.087498-120.009372 80.398996-343.035715 376.047933-376.047933z" fill="#ABFFF1" opacity=".36" p-id="1164"></path><path d="M462.728033 850.476987a383.010276 383.010276 0 0 0 18.787616 118.796854c10.779849 0.762644 21.653958 1.169674 32.62661 1.169674L970.443515 514.142259c0-9.006059-0.287063-17.943565-0.80549-26.821087a382.941724 382.941724 0 0 0-123.449841-20.30862C634.408703 467.012552 462.728033 638.693222 462.728033 850.476987z" fill="#87C9BF" p-id="1165"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/page3.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652088920076" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1489" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M992.278549 713.920521c0 45.924712-37.574764 83.499476-83.499476 83.499476H115.220927c-45.924712 0-83.499476-37.574764-83.499476-83.499476V104.374345C31.721451 58.449633 69.296215 20.874869 115.220927 20.874869h793.558146c45.924712 0 83.499476 37.574764 83.499476 83.499476v609.546176z" fill="#B1E3C4" p-id="1490"></path><path d="M109.780936 236.67509s122.606456 30.018062 122.606456-122.606456h555.952037s-30.030587 122.606456 122.606455 122.606456l-2.39226 340.189391s-122.606456-30.018062-122.606455 122.61063H232.387392s30.026412-122.610631-122.606456-122.61063V236.67509z" fill="#93BDA3" p-id="1491"></path><path d="M378.402926 246.323454h271.373297v41.749739h-271.373297z" fill="#FFFFFF" p-id="1492"></path><path d="M292.815963 352.785286h484.296961v41.749739h-484.296961zM292.815963 469.684553h271.373297v41.749738h-271.373297z" fill="#FFFFFF" opacity=".39" p-id="1493"></path><path d="M589.472901 772.917075a41.753913 41.753913 0 0 1-40.63502-51.343827l17.768689-75.249728-62.99618-56.587595a41.745563 41.745563 0 1 1 27.90135-72.811543h70.590457l34.627233-79.75035a41.758088 41.758088 0 0 1 37.837787-25.120817h0.459248a41.749738 41.749738 0 0 1 37.917112 24.285822l37.111342 80.585345h71.254278a41.749738 41.749738 0 0 1 25.667739 74.677756l-59.7898 46.613583 20.69952 79.696075A41.749738 41.749738 0 0 1 745.683721 764.020206l-69.237765-42.367634-63.188229 43.820525a41.653714 41.653714 0 0 1-23.784826 7.443978z m85.557739-142.834203c7.535828 0 15.08418 2.037387 21.789188 6.137211l4.262648 2.609359-1.60319-6.174787a41.762263 41.762263 0 0 1 7.13503-35.7169 41.728863 41.728863 0 0 1-21.213041-20.795545l-9.251742-20.089974-8.362473 19.259154a41.762263 41.762263 0 0 1-28.594396 23.976875l1.640765 1.473766a41.749738 41.749738 0 0 1 13.689739 34.706557 41.678763 41.678763 0 0 1 20.507472-5.385716z" p-id="1494"></path><path d="M908.779073 755.670259H115.220927c-45.924712 0-83.499476-37.574764-83.499476-83.499476v41.749738c0 45.924712 37.574764 83.499476 83.499476 83.499476h793.558146c45.924712 0 83.499476-37.574764 83.499476-83.499476v-41.749738c0 45.924712-37.574764 83.499476-83.499476 83.499476z" fill="#93BDA3" opacity=".3" p-id="1495"></path><path d="M627.653037 737.905745l2.187686 265.219386 79.332852-80.309796 80.313971 79.324502-2.187686-265.215211" fill="#A8D6F7" p-id="1496"></path><path d="M921.007571 593.75225c0 120.923941-98.02421 218.927276-218.931451 218.927276-120.898891 0-218.927276-98.020035-218.927276-218.927276 0-120.919766 98.028385-218.927276 218.927276-218.927277 120.915591-0.004175 218.931451 98.003335 218.931451 218.927277z" fill="#FFD28F" p-id="1497"></path><path d="M744.731827 379.008297c84.054748 23.747251 145.669011 100.971741 145.669011 192.637466 0 110.570006-89.649213 200.210869-200.227568 200.210869-110.557481 0-200.223394-89.649213-200.223394-200.210869 0-20.778845 3.168805-40.806194 9.047168-59.66455a218.296855 218.296855 0 0 0-15.8482 81.783561c0 120.898891 98.028385 218.927276 218.927276 218.927277 120.919766 0 218.931451-98.01586 218.931451-218.927277 0-106.336583-75.784124-194.908652-176.275744-214.756477z" fill="#E8B76D" opacity=".76" p-id="1498"></path><path d="M704.860827 593.505926m-71.943148 0a71.943149 71.943149 0 1 0 143.886297 0 71.943149 71.943149 0 1 0-143.886297 0Z" fill="#E8B76D" p-id="1499"></path><path d="M704.860827 686.323944c-51.181004 0-92.813843-41.641189-92.813842-92.818018s41.637014-92.818018 92.813842-92.818018 92.813843 41.641189 92.813843 92.818018-41.632839 92.818018-92.813843 92.818018z m0-143.886297c-28.156023 0-51.064105 22.908081-51.064104 51.068279s22.908081 51.06828 51.064104 51.06828 51.064105-22.908081 51.064105-51.06828-22.908081-51.06828-51.064105-51.068279z" fill="#D68989" p-id="1500"></path><path d="M578.066873 538.262673a16.699895 16.699895 0 0 1-14.533084-24.903719 161.905484 161.905484 0 0 1 57.952812-59.422402 16.699895 16.699895 0 0 1 17.121567 28.677895 128.430544 128.430544 0 0 0-45.983161 47.139629 16.67902 16.67902 0 0 1-14.558134 8.508597z" fill="#FFFFFF" p-id="1501"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/page4.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1655951662108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1362" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M512 512m-407.4496 0a407.4496 407.4496 0 1 0 814.8992 0 407.4496 407.4496 0 1 0-814.8992 0Z" fill="#406C0D" p-id="1363"></path><path d="M512 921.6c-225.85344 0-409.6-183.74656-409.6-409.6S286.14656 102.4 512 102.4s409.6 183.74656 409.6 409.6-183.74656 409.6-409.6 409.6z m0-814.8992C288.52224 106.7008 106.7008 288.52224 106.7008 512S288.52224 917.2992 512 917.2992 917.2992 735.47776 917.2992 512 735.47776 106.7008 512 106.7008z" fill="#4E8F00" p-id="1364"></path><path d="M512 512m-391.14752 0a391.14752 391.14752 0 1 0 782.29504 0 391.14752 391.14752 0 1 0-782.29504 0Z" fill="#F7F5CB" p-id="1365"></path><path d="M513.24928 511.09888m-349.10208 0a349.10208 349.10208 0 1 0 698.20416 0 349.10208 349.10208 0 1 0-698.20416 0Z" fill="#FC4422" p-id="1366"></path><path d="M257.20832 565.94432c-41.00096 8.62208-79.0528-23.57248-77.68064-65.45408 4.97664-150.69184 111.90272-284.20096 266.0352-316.64128s305.78688 46.6944 371.05664 182.62016c18.14528 37.7856-3.70688 82.57536-44.72832 91.21792L522.5472 503.808l-265.33888 62.13632z" fill="#FE693F" p-id="1367"></path><path d="M522.56768 418.34496c-1.06496 9.03168-9.78944 16.11776-9.78944 16.11776s-7.65952-7.82336-9.03168-16.85504c-1.45408-9.48224 3.072-16.384 9.78944-16.11776 6.28736 0.24576 10.11712 7.53664 9.03168 16.85504z" p-id="1368"></path><path d="M472.73984 426.53696c3.60448 8.35584-0.4096 18.86208-0.4096 18.86208s-10.52672-2.94912-16.24064-10.07616c-6.00064-7.49568-5.5296-15.72864 0.4096-18.86208 5.55008-2.92864 12.53376 1.45408 16.24064 10.07616zM522.50624 281.7024c-1.16736 10.0352-10.87488 17.92-10.87488 17.92s-8.4992-8.68352-10.0352-18.71872c-1.61792-10.5472 3.39968-18.20672 10.87488-17.92 6.98368 0.26624 11.24352 8.35584 10.0352 18.71872z" p-id="1369"></path><path d="M433.68448 458.52672c7.29088 5.4272 9.07264 16.54784 9.07264 16.54784s-10.58816 2.72384-19.10784-0.59392c-8.94976-3.4816-12.65664-10.8544-9.07264-16.54784 3.35872-5.3248 11.59168-4.99712 19.10784 0.59392z" p-id="1370"></path><path d="M415.86688 505.77408c9.03168 1.06496 16.11776 9.78944 16.11776 9.78944s-7.82336 7.65952-16.85504 9.03168c-9.48224 1.45408-16.384-3.072-16.11776-9.78944 0.24576-6.26688 7.51616-10.11712 16.85504-9.03168z" p-id="1371"></path><path d="M424.0384 555.60192c8.35584-3.60448 18.86208 0.4096 18.86208 0.4096s-2.94912 10.52672-10.07616 16.24064c-7.49568 6.00064-15.72864 5.5296-18.86208-0.4096-2.92864-5.55008 1.45408-12.53376 10.07616-16.24064z" p-id="1372"></path><path d="M456.04864 594.65728c5.4272-7.29088 16.54784-9.07264 16.54784-9.07264s2.72384 10.58816-0.59392 19.10784c-3.4816 8.94976-10.8544 12.65664-16.54784 9.07264-5.3248-3.33824-5.0176-11.5712 0.59392-19.10784z" p-id="1373"></path><path d="M503.27552 612.49536c1.06496-9.03168 9.78944-16.11776 9.78944-16.11776s7.65952 7.82336 9.03168 16.85504c1.45408 9.48224-3.072 16.384-9.78944 16.11776-6.26688-0.24576-10.11712-7.53664-9.03168-16.85504z" p-id="1374"></path><path d="M553.10336 604.30336c-3.60448-8.35584 0.4096-18.86208 0.4096-18.86208s10.52672 2.94912 16.24064 10.07616c6.00064 7.49568 5.5296 15.72864-0.4096 18.86208-5.55008 2.92864-12.51328-1.45408-16.24064-10.07616z" p-id="1375"></path><path d="M592.1792 572.3136c-7.29088-5.4272-9.07264-16.54784-9.07264-16.54784s10.58816-2.72384 19.10784 0.59392c8.94976 3.4816 12.65664 10.8544 9.07264 16.54784-3.35872 5.3248-11.59168 4.99712-19.10784-0.59392z" p-id="1376"></path><path d="M609.9968 525.06624c-9.03168-1.06496-16.11776-9.78944-16.11776-9.78944s7.82336-7.65952 16.85504-9.03168c9.48224-1.45408 16.384 3.072 16.11776 9.78944-0.24576 6.26688-7.53664 10.11712-16.85504 9.03168z" p-id="1377"></path><path d="M601.8048 475.2384c-8.35584 3.60448-18.86208-0.4096-18.86208-0.4096s2.94912-10.52672 10.07616-16.24064c7.49568-6.00064 15.72864-5.5296 18.86208 0.4096 2.92864 5.55008-1.45408 12.53376-10.07616 16.24064z" p-id="1378"></path><path d="M569.81504 436.18304c-5.4272 7.29088-16.54784 9.07264-16.54784 9.07264s-2.72384-10.58816 0.59392-19.10784c3.4816-8.94976 10.8544-12.65664 16.54784-9.07264 5.3248 3.33824 5.0176 11.5712-0.59392 19.10784z" p-id="1379"></path><path d="M441.56928 292.864c2.51904 9.78944-3.70688 20.64384-3.70688 20.64384s-11.0592-5.03808-16.11776-13.84448c-5.30432-9.25696-3.3792-18.20672 3.70688-20.64384 6.61504-2.27328 13.5168 3.74784 16.11776 13.84448z" p-id="1380"></path><path d="M370.09408 332.43136c5.87776 8.23296 3.9936 20.5824 3.9936 20.5824s-12.12416-0.7168-20.00896-7.10656c-8.2944-6.71744-9.70752-15.7696-3.9936-20.5824 5.34528-4.5056 13.94688-1.37216 20.00896 7.10656z" p-id="1381"></path><path d="M317.68576 395.10016c8.43776 5.55008 11.12064 17.75616 11.12064 17.75616s-11.5712 3.70688-21.23776 0.57344c-10.15808-3.2768-14.7456-11.22304-11.12064-17.75616 3.35872-6.12352 12.51328-6.30784 21.23776-0.57344z" p-id="1382"></path><path d="M291.34848 472.43264c9.87136 2.12992 16.77312 12.55424 16.77312 12.55424s-9.46176 7.61856-19.59936 8.192c-10.6496 0.59392-17.79712-5.16096-16.77312-12.55424 0.94208-6.92224 9.40032-10.40384 19.59936-8.192z" p-id="1383"></path><path d="M294.64576 554.06592c9.99424-1.55648 20.1728 5.67296 20.1728 5.67296s-6.08256 10.52672-15.33952 14.70464c-9.728 4.38272-18.45248 1.59744-20.1728-5.67296-1.61792-6.79936 5.03808-13.08672 15.33952-14.70464z" p-id="1384"></path><path d="M327.12704 629.02272c8.74496-5.05856 20.86912-1.98656 20.86912-1.98656s-1.88416 12.00128-9.0112 19.23072c-7.49568 7.59808-16.62976 8.15104-20.86912 1.98656-3.95264-5.75488-0.02048-14.00832 9.0112-19.23072z" p-id="1385"></path><path d="M384.43008 687.26784c6.3488-7.86432 18.75968-9.35936 18.75968-9.35936s2.56 11.8784-1.47456 21.1968c-4.25984 9.78944-12.57472 13.59872-18.75968 9.35936-5.77536-3.95264-5.05856-13.08672 1.47456-21.1968z" p-id="1386"></path><path d="M458.87488 720.93696c3.09248-9.6256 14.1312-15.48288 14.1312-15.48288s6.67648 10.15808 6.2464 20.29568c-0.45056 10.6496-6.84032 17.2032-14.1312 15.48288-6.79936-1.59744-9.44128-10.36288-6.2464-20.29568z" p-id="1387"></path><path d="M459.6736 724.0704c1.61792-5.07904 7.43424-8.15104 7.43424-8.15104s3.52256 5.34528 3.29728 10.69056c-0.22528 5.61152-3.60448 9.07264-7.43424 8.15104-3.584-0.83968-4.97664-5.46816-3.29728-10.69056zM382.1568 694.25152c2.74432-4.32128 8.9088-5.75488 8.9088-5.75488s1.96608 5.8368 0.45056 10.752c-1.59744 5.16096-5.57056 7.53664-8.9088 5.75488-3.13344-1.67936-3.2768-6.30784-0.45056-10.752zM322.60096 633.50784c4.13696-3.01056 10.40384-2.08896 10.40384-2.08896s-0.3072 6.144-3.52256 10.15808c-3.3792 4.21888-7.94624 4.97664-10.40384 2.08896-2.29376-2.68288-0.75776-7.0656 3.52256-10.15808zM290.16064 556.83072c4.97664-1.16736 10.40384 2.10944 10.40384 2.10944s-2.68288 5.5296-7.18848 7.9872c-4.75136 2.58048-9.25696 1.49504-10.40384-2.10944-1.06496-3.3792 2.048-6.79936 7.18848-7.9872zM284.50816 472.92416c5.12 0 9.64608 4.4032 9.64608 4.4032s-3.85024 4.79232-8.8064 6.16448c-5.20192 1.4336-9.35936-0.63488-9.64608-4.4032-0.28672-3.52256 3.52256-6.16448 8.8064-6.16448zM310.53824 393.33888c4.7104 2.00704 7.12704 7.84384 7.12704 7.84384s-5.4272 2.88768-10.52672 2.19136c-5.34528-0.73728-8.35584-4.25984-7.12704-7.84384 1.1264-3.35872 5.67296-4.25984 10.52672-2.19136zM362.98752 327.12704c3.9936 3.19488 4.79232 9.46176 4.79232 9.46176s-6.00064 1.3312-10.73152-0.69632c-4.95616-2.12992-6.92224-6.32832-4.79232-9.46176 1.96608-2.90816 6.59456-2.58048 10.73152 0.69632zM434.40128 287.8464c0.9216 5.03808-2.62144 10.28096-2.62144 10.28096s-5.40672-2.94912-7.61856-7.5776c-2.33472-4.87424-1.04448-9.3184 2.62144-10.28096 3.42016-0.90112 6.67648 2.37568 7.61856 7.5776zM519.0656 274.35008c-0.49152 5.09952-5.3248 9.17504-5.3248 9.17504s-4.38272-4.32128-5.26336-9.37984c-0.9216-5.3248 1.536-9.23648 5.3248-9.17504 3.52256 0.06144 5.77536 4.11648 5.26336 9.37984z" fill="#D07B52" p-id="1388"></path><path d="M540.44672 725.54496c-0.59392-10.09664 7.59808-19.53792 7.59808-19.53792s9.89184 7.0656 13.14816 16.6912c3.42016 10.09664-0.18432 18.51392-7.59808 19.53792-6.92224 0.94208-12.55424-6.28736-13.14816-16.6912z" p-id="1389"></path><path d="M618.1888 700.43648c-4.17792-9.19552 0.04096-20.97152 0.04096-20.97152s11.776 3.03104 18.26816 10.83392c6.84032 8.192 6.49216 17.34656-0.04096 20.97152-6.10304 3.3792-13.94688-1.3312-18.26816-10.83392z" p-id="1390"></path><path d="M681.6768 649.03168c-7.22944-7.0656-7.51616-19.57888-7.51616-19.57888s12.06272-1.41312 20.95104 3.52256c9.3184 5.18144 12.30848 13.84448 7.51616 19.57888-4.48512 5.34528-13.49632 3.76832-20.95104-3.52256z" p-id="1391"></path><path d="M722.39104 578.19136c-9.27744-3.9936-14.04928-15.5648-14.04928-15.5648s10.752-5.65248 20.80768-4.25984c10.56768 1.47456 16.46592 8.47872 14.04928 15.5648-2.2528 6.61504-11.22304 8.3968-20.80768 4.25984z" p-id="1392"></path><path d="M734.84288 497.4592c-10.09664-0.38912-18.71872-9.44128-18.71872-9.44128s7.9872-9.15456 17.87904-11.4688c10.38336-2.43712 18.41152 1.96608 18.71872 9.44128 0.28672 6.9632-7.45472 11.85792-17.87904 11.4688z" p-id="1393"></path><path d="M717.37344 417.64864c-9.56416 3.2768-20.86912-2.06848-20.86912-2.06848s4.15744-11.42784 12.55424-17.14176c8.8064-6.02112 17.89952-4.79232 20.86912 2.06848 2.7648 6.41024-2.68288 13.76256-12.55424 17.14176z" p-id="1394"></path><path d="M672.33792 349.4912c-7.74144 6.51264-20.21376 5.59104-20.21376 5.59104s-0.22528-12.14464 5.5296-20.52096c6.06208-8.78592 14.97088-10.91584 20.21376-5.59104 4.89472 4.97664 2.4576 13.80352-5.5296 20.52096z" p-id="1395"></path><path d="M605.77792 302.12096c-4.87424 8.84736-16.83456 12.4928-16.83456 12.4928s-4.58752-11.24352-2.23232-21.13536c2.47808-10.38336 10.0352-15.5648 16.83456-12.4928 6.3488 2.88768 7.24992 12.00128 2.23232 21.13536z" p-id="1396"></path><path d="M603.36128 295.23968c-3.05152 4.11648-9.29792 5.12-9.29792 5.12s-1.536-5.95968 0.3072-10.752c1.9456-5.03808 6.08256-7.12704 9.29792-5.12 3.01056 1.88416 2.84672 6.51264-0.3072 10.752zM676.1472 341.77024c-3.05152 4.11648-9.29792 5.12-9.29792 5.12s-1.536-5.95968 0.3072-10.752c1.9456-5.03808 6.08256-7.12704 9.29792-5.12 3.01056 1.88416 2.84672 6.51264-0.3072 10.752zM729.88672 577.35168c-4.89472-1.45408-7.9872-6.98368-7.9872-6.98368s5.07904-3.4816 10.19904-3.3792c5.40672 0.12288 8.78592 3.2768 7.9872 6.98368-0.73728 3.46112-5.14048 4.89472-10.19904 3.3792zM741.94944 493.3632c-5.12 0.14336-9.76896-4.15744-9.76896-4.15744s3.72736-4.89472 8.64256-6.38976c5.16096-1.57696 9.35936 0.38912 9.76896 4.15744 0.36864 3.52256-3.35872 6.2464-8.64256 6.38976zM723.21024 411.58656c-4.64896 2.10944-10.60864-0.04096-10.60864-0.04096s1.536-5.95968 5.48864-9.23648c4.15744-3.46112 8.78592-3.2768 10.60864 0.04096 1.69984 3.072-0.67584 7.04512-5.48864 9.23648zM544.03072 729.3952c-0.96256-5.24288 2.72384-10.69056 2.72384-10.69056s5.61152 3.072 7.94624 7.8848c2.43712 5.05856 1.08544 9.68704-2.72384 10.69056-3.56352 0.9216-6.9632-2.47808-7.94624-7.8848zM624.68096 705.06496c-2.37568-4.77184-0.34816-11.03872-0.34816-11.03872s6.2464 1.39264 9.80992 5.36576c3.74784 4.17792 3.72736 9.0112 0.34816 11.03872-3.15392 1.88416-7.35232-0.45056-9.80992-5.36576z" fill="#D07B52" p-id="1397"></path><path d="M623.34976 702.464c-2.37568-4.77184-0.34816-11.03872-0.34816-11.03872s6.2464 1.39264 9.80992 5.36576c3.74784 4.17792 3.72736 9.0112 0.34816 11.03872-3.15392 1.90464-7.3728-0.45056-9.80992-5.36576zM557.01504 603.7504c-0.94208-4.15744 1.82272-8.64256 1.82272-8.64256s4.58752 2.2528 6.59456 6.02112c2.10944 3.95264 1.18784 7.70048-1.82272 8.64256-2.78528 0.88064-5.61152-1.7408-6.59456-6.02112zM505.91744 615.19872c0.4096-4.23936 4.42368-7.61856 4.42368-7.61856s3.64544 3.584 4.38272 7.80288c0.75776 4.42368-1.29024 7.68-4.42368 7.61856-2.94912-0.06144-4.8128-3.42016-4.38272-7.80288zM457.25696 597.07392c2.9696-3.05152 8.23296-3.1744 8.23296-3.1744s0.6144 5.07904-1.45408 8.82688c-2.17088 3.93216-5.81632 5.20192-8.23296 3.1744-2.2528-1.88416-1.61792-5.69344 1.45408-8.82688zM425.39008 557.91616c4.03456-1.3312 8.76544 0.98304 8.76544 0.98304s-1.82272 4.77184-5.38624 7.14752c-3.74784 2.47808-7.55712 1.92512-8.76544-0.98304-1.1264-2.72384 1.20832-5.79584 5.38624-7.14752zM414.0032 507.84256c4.11648 1.04448 6.88128 5.5296 6.88128 5.5296s-4.096 3.072-8.35584 3.15392c-4.48512 0.1024-7.41376-2.41664-6.88128-5.5296 0.49152-2.88768 4.096-4.23936 8.35584-3.15392zM429.11744 458.3424c3.44064 2.49856 4.32128 7.68 4.32128 7.68s-4.93568 1.3312-8.92928-0.18432c-4.1984-1.57696-5.98016-4.99712-4.32128-7.68 1.536-2.49856 5.38624-2.39616 8.92928 0.18432zM468.02944 421.84704c2.47808 3.46112 1.67936 8.66304 1.67936 8.66304s-5.09952-0.28672-8.41728-2.99008c-3.4816-2.82624-4.096-6.63552-1.67936-8.66304 2.2528-1.90464 5.85728-0.59392 8.41728 2.99008zM565.9648 431.47264c-2.88768 3.13344-8.13056 3.42016-8.13056 3.42016s-0.75776-5.05856 1.20832-8.86784c2.048-3.9936 5.65248-5.36576 8.13056-3.42016 2.29376 1.82272 1.76128 5.65248-1.20832 8.86784zM519.41376 412.99968c0.02048 4.25984-3.64544 8.02816-3.64544 8.02816s-3.9936-3.19488-5.14048-7.31136c-1.20832-4.32128 0.512-7.7824 3.64544-8.02816 2.92864-0.24576 5.12 2.92864 5.14048 7.31136zM603.19744 470.05696c-3.8912 1.72032-8.82688-0.12288-8.82688-0.12288s1.3312-4.93568 4.64896-7.63904c3.4816-2.84672 7.33184-2.6624 8.82688 0.12288 1.39264 2.58048-0.63488 5.85728-4.64896 7.63904zM614.5024 521.91232c-4.21888-0.57344-7.45472-4.7104-7.45472-4.7104s3.72736-3.50208 7.94624-4.07552c4.44416-0.59392 7.63904 1.57696 7.45472 4.7104-0.16384 2.92864-3.60448 4.64896-7.94624 4.07552zM599.06048 572.98944c-3.87072-1.76128-5.79584-6.656-5.79584-6.656s4.56704-2.29376 8.78592-1.61792c4.44416 0.69632 6.8608 3.6864 5.79584 6.656-1.00352 2.74432-4.79232 3.42016-8.78592 1.61792z" fill="#D07B52" p-id="1398"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/page5.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659322568882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1337" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M762.71616 507.5968c-33.66912-66.4576-65.80224-133.67296-92.44672-203.24352l-61.25568-160.03072c-5.61152-14.66368-18.08384-27.01312-34.79552-32.48128-13.37344-4.36224-30.1056-5.34528-47.37024 5.0176-9.23648 5.55008-20.48 5.55008-29.71648 0-17.26464-10.36288-33.9968-9.37984-47.37024-5.0176-16.71168 5.46816-29.184 17.8176-34.79552 32.48128l-64.12288 167.5264c-25.53856 66.70336-56.44288 131.09248-89.00608 194.64192-20.52096 40.0384-31.70304 85.62688-30.67904 133.9392 3.03104 143.11424 126.89408 269.18912 269.94688 274.59584 160.09216 6.0416 291.77856-121.93792 291.77856-280.69888 0.02048-45.58848-10.8544-88.63744-30.16704-126.73024z" fill="#A4C257" p-id="1338"></path><path d="M512.12288 921.6c-3.74784 0-7.49568-0.06144-11.24352-0.2048-146.5344-5.5296-272.93696-134.12352-276.0704-280.82176-1.00352-47.59552 9.8304-94.94528 31.37536-136.97024 26.60352-51.89632 60.7232-120.85248 88.73984-194.02752l64.12288-167.5264c6.5536-17.14176 20.6848-30.35136 38.74816-36.2496 18.3296-5.98016 36.53632-4.05504 52.61312 5.61152 7.24992 4.36224 15.91296 4.36224 23.16288 0 16.09728-9.66656 34.304-11.59168 52.61312-5.61152 18.08384 5.91872 32.19456 19.12832 38.74816 36.2496l61.25568 160.03072c28.79488 75.22304 64.38912 147.80416 92.18048 202.6496 20.48 40.40704 30.86336 84.00896 30.86336 129.61792 0 78.78656-31.27296 152.28928-88.02304 206.9504-54.02624 52.0192-124.35456 80.30208-199.08608 80.30208zM468.5824 115.07712c-5.48864 0-11.10016 0.94208-16.83456 2.80576-14.41792 4.7104-25.64096 15.17568-30.8224 28.71296l-64.12288 167.5264c-28.24192 73.74848-62.54592 143.09376-89.2928 195.2768-20.5824 40.16128-30.94528 85.42208-29.98272 130.90816 2.9696 140.1856 123.8016 263.10656 263.84384 268.3904 75.3664 2.8672 146.82112-24.33024 201.05216-76.55424 54.25152-52.24448 84.13184-122.49088 84.13184-197.79584 0-43.58144-9.9328-85.25824-29.4912-123.86304-27.93472-55.11168-63.71328-128.08192-92.71296-203.85792l-61.25568-160.03072c-5.18144-13.53728-16.42496-24.00256-30.84288-28.71296-14.92992-4.89472-29.10208-3.3792-42.12736 4.42368a35.1232 35.1232 0 0 1-36.2496 0c-8.02816-4.8128-16.4864-7.22944-25.2928-7.22944z" fill="#426126" p-id="1339"></path><path d="M731.97568 508.08832c-29.55264-59.2896-57.73312-119.25504-81.1008-181.32992l-53.73952-142.76608c-4.93568-13.08672-15.85152-24.10496-30.53568-28.9792-11.42784-3.80928-25.68192-4.7104-40.40704 3.7888-8.84736 5.12-19.51744 5.12-28.3648 0-14.72512-8.51968-28.9792-7.59808-40.40704-3.7888-14.66368 4.87424-25.6 15.89248-30.53568 28.9792l-56.25856 149.46304c-22.40512 59.51488-49.52064 116.96128-78.09024 173.6704-19.2512 38.21568-29.14304 82.10432-26.56256 128.55296 7.08608 127.95904 110.2848 230.95296 236.21632 235.9296 140.57472 5.55008 256.26624-108.68736 256.26624-250.42944-0.02048-40.71424-9.56416-79.13472-26.48064-113.09056z" fill="#E9E776" p-id="1340"></path><path d="M665.088 526.39744c34.4064-9.4208 52.18304-47.57504 36.98688-79.85152-18.49344-39.30112-35.88096-79.09376-51.2-119.78752l-53.73952-142.76608c-4.93568-13.08672-15.85152-24.10496-30.53568-28.9792-11.42784-3.7888-25.66144-4.7104-40.38656 3.7888-8.86784 5.12-19.5584 5.12-28.40576 0-14.72512-8.4992-28.95872-7.5776-40.38656-3.7888-14.66368 4.87424-25.6 15.89248-30.53568 28.9792l-56.25856 149.46304c-22.40512 59.51488-49.52064 116.96128-78.09024 173.6704-5.03808 10.01472-9.44128 20.41856-13.14816 31.15008-15.1552 43.90912 24.76032 86.9376 69.57056 74.67008l316.12928-86.54848z" fill="#F4F0AB" p-id="1341"></path><path d="M674.34496 586.05568c9.97376 106.8032-70.30784 194.3552-157.02016 194.3552s-164.0448-87.28576-157.02016-194.3552c7.29088-111.0016 113.82784-194.3552 157.02016-194.3552 40.448 0 147.1488 88.65792 157.02016 194.3552z" fill="#FBD947" p-id="1342"></path><path d="M648.92928 586.05568c8.27392 86.71232-58.368 157.77792-130.39616 157.77792s-136.21248-70.8608-130.39616-157.77792c6.0416-90.112 94.5152-157.77792 130.39616-157.77792 33.60768 0 122.20416 71.96672 130.39616 157.77792z" fill="#7B4104" p-id="1343"></path><path d="M518.5536 746.86464c-33.44384 0-67.01056-15.38048-92.07808-42.1888-29.24544-31.27296-44.29824-74.56768-41.32864-118.82496 6.22592-92.79488 96.82944-160.62464 133.40672-160.62464 33.28 0 124.86656 71.18848 133.40672 160.52224 4.07552 42.76224-9.9328 85.2992-38.46144 116.67456-25.68192 28.2624-60.29312 44.4416-94.94528 44.4416z m0-315.57632c-33.91488 0-121.46688 67.072-127.36512 154.97216-2.8672 42.57792 11.61216 84.23424 39.71072 114.2784 23.92064 25.6 55.86944 40.26368 87.6544 40.26368 32.9728 0 65.9456-15.4624 90.46016-42.45504 27.38176-30.12608 40.83712-70.94272 36.90496-112.0256-8.06912-84.60288-96.54272-155.0336-127.36512-155.0336z" fill="#663904" p-id="1344"></path><path d="M498.91328 568.29952c-12.02176 41.73824-43.29472 68.38272-64.32768 60.96896s-27.97568-47.45216-11.79648-87.83872c16.77312-41.86112 53.84192-64.65536 64.32768-60.96896 9.80992 3.4816 23.69536 46.55104 11.79648 87.83872z" fill="#B2855D" p-id="1345"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/toggle-left-drawer-hide.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652146029925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1827" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M321.030145 412.290992l-60.146254 25.758484c-51.749842 22.16187-113.75909-5.783045-137.874516-62.099811-24.128364-56.290891-17.853696-148.340922 67.637043-185.005685 84.339305-36.134327 156.439773 22.342994 180.555199 78.646822 24.128364 56.355578 1.539558 120.53832-50.171472 142.70019z" fill="#F3F3F3" p-id="1828"></path><path d="M223.559318 452.125433c-43.857991 0-86.91386-27.931977-106.501175-73.652963-13.636083-31.83909-16.482325-70.754972-7.59429-104.08187 7.658977-28.68235 27.517979-67.481794 78.633885-89.371977 89.695414-38.424258 164.55156 24.839924 189.055111 82.036437 25.590297 59.719318 1.552495 127.524548-53.574024 151.135414l-60.146254 25.771421a100.912192 100.912192 0 0 1-39.873253 8.163538z m19.406191-265.851876a125.493367 125.493367 0 0 0-49.718661 10.634592c-86.072925 36.871762-85.07674 127.809172-64.234492 176.479899 22.782868 53.160025 80.820316 79.487757 129.374605 58.684321l60.146254-25.771421c48.567227-20.803437 69.551788-80.988503 46.781858-134.148529-17.698446-41.154062-63.794618-85.840051-122.414252-85.84005z" fill="#CFD1D1" p-id="1829"></path><path d="M702.969855 412.290992l60.146254 25.758484c51.749842 22.16187 113.75909-5.783045 137.887454-62.099811 24.115426-56.290891 17.853696-148.340922-67.637044-185.005685-84.352243-36.134327-156.45271 22.342994-180.568136 78.646822-24.115426 56.355578-1.539558 120.53832 50.171472 142.70019z" fill="#F3F3F3" p-id="1830"></path><path d="M800.45362 452.125433a101.015692 101.015692 0 0 1-39.886191-8.163538l-60.146254-25.732609c-55.126519-23.610865-79.151383-91.416096-53.574024-151.135414 24.50355-57.196513 99.372634-120.460695 189.068048-82.036437 51.115907 21.890183 70.961971 60.689627 78.620948 89.371978 8.888035 33.326898 6.054732 72.24278-7.59429 104.081869-19.574378 45.720985-62.643184 73.61415-106.488237 73.614151z m-94.935086-45.824485l60.146254 25.771421c48.567227 20.803437 106.604675-5.524296 129.374606-58.684321 12.536399-29.277473 15.149766-65.036614 6.986228-95.659583-6.921541-25.874921-24.878737-60.974251-71.156033-80.820316-45.785673-19.626128-83.588932-8.435224-107.23861 4.398737-28.138977 15.266203-52.37084 41.749185-64.829615 70.845533-22.782868 53.160025-1.798307 113.345092 46.76892 134.148529z" fill="#CFD1D1" p-id="1831"></path><path d="M884.378926 593.609501c0 86.887985-29.096349 136.063272-103.900745 190.439419-66.602047 48.437852-173.116159 60.081567-270.5223 60.081566-107.380922 0-220.260265-19.690815-288.505369-77.159014-63.277119-53.250587-81.790625-106.358863-81.790626-185.354997 0-164.241061 163.529501-332.233986 370.32187-332.233986s374.39717 179.985951 374.39717 344.227012z" fill="#F3F3F3" p-id="1832"></path><path d="M509.955881 850.599217c-59.111257 0-113.086342-5.783045-160.42451-17.206823-55.100644-13.299709-99.618446-33.973771-132.272597-61.465875-32.175464-27.091042-53.2894-54.246772-66.420922-85.464864-12.057713-28.669413-17.672571-61.983373-17.672571-104.79343 0-82.411623 39.963816-167.126115 109.657915-232.434416a393.725736 393.725736 0 0 1 119.555073-76.939077 385.238762 385.238762 0 0 1 147.577612-29.303349 370.735869 370.735869 0 0 1 148.315048 31.218093 406.158636 406.158636 0 0 1 120.939381 81.10494c34.129021 33.016399 62.345622 71.919343 81.583626 112.555906 19.66494 41.464561 30.053721 84.986178 30.05372 125.842679 0 45.048238-7.853039 80.212255-24.710549 110.5506-16.482325 29.756159-41.72331 55.954517-81.855313 85.115553-56.795452 41.179937-146.529678 61.220063-274.325913 61.220063z m0-594.747998c-95.82777 0-187.593178 36.496576-258.283462 102.775187-67.09367 62.863121-105.569678 144.149185-105.569677 222.990069 0 82.73506 21.540872 131.638661 79.487757 180.412887s158.936702 75.632394 284.365382 75.632394c124.962931 0 212.174352-19.250941 266.718686-58.878383 74.739709-54.337334 101.235629-102.788124 101.235629-185.199747 0-78.206949-40.261377-163.827063-107.691422-228.993051-72.488591-70.121036-164.913809-108.713481-260.262893-108.713481z" fill="#CFD1D1" p-id="1833"></path><path d="M246.665622 578.912546a78.025824 76.26633 0 1 0 156.051649 0 78.025824 76.26633 0 1 0-156.051649 0Z" fill="#42393B" p-id="1834"></path><path d="M275.723159 557.720985a19.755502 19.302691 0 1 0 39.511004 0 19.755502 19.302691 0 1 0-39.511004 0Z" fill="#FFFFFF" p-id="1835"></path><path d="M621.282729 577.036614a78.025824 76.26633 0 1 0 156.051649 0 78.025824 76.26633 0 1 0-156.051649 0Z" fill="#42393B" p-id="1836"></path><path d="M650.353203 555.845054a19.755502 19.302691 0 1 0 39.511004 0 19.755502 19.302691 0 1 0-39.511004 0Z" fill="#FFFFFF" p-id="1837"></path><path d="M469.422817 741.782236c-31.94259 0-41.956184-26.638231-42.771244-40.727125a6.480374 6.480374 0 0 1 12.93746-0.776248c0.194062 2.936804 2.690992 28.565913 29.859659 28.565913 29.626785 0 36.393076-13.623146 36.664763-14.231207v0.116437l11.928339 5.019735c-0.452811 0.931497-9.793658 22.032495-48.618977 22.032495z" fill="#CFD1D1" p-id="1838"></path><path d="M554.577183 741.782236c-38.812382 0-48.153228-21.100998-48.541352-21.993683l11.928338-5.032672v-0.116437c0.271687 0.582186 7.050916 14.231207 36.664763 14.231207 27.168667 0 29.665597-25.642047 29.872597-28.565913a6.480374 6.480374 0 0 1 12.93746 0.776247c-0.905622 14.06302-10.906279 40.701251-42.861806 40.701251z" fill="#CFD1D1" p-id="1839"></path><path d="M245.824687 694.418193m-39.239317 0a39.239318 39.239318 0 1 0 78.478635 0 39.239318 39.239318 0 1 0-78.478635 0Z" fill="#FFBECC" p-id="1840"></path><path d="M776.907442 694.418193m-39.239318 0a39.239318 39.239318 0 1 0 78.478635 0 39.239318 39.239318 0 1 0-78.478635 0Z" fill="#FFBECC" p-id="1841"></path></svg>
\ No newline at end of file
src/layouts/menuListIcons/toggle-left-drawer-show.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652146864785" class="icon" viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1567" xmlns:xlink="http://www.w3.org/1999/xlink" width="551.26953125" height="500"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M91.04059 938.684854a507.433111 78.684219 0 1 0 1014.866222 0 507.433111 78.684219 0 1 0-1014.866222 0Z" fill="#6E6E96" opacity=".1" p-id="1568"></path><path d="M276.96195 324.96652S228.952735 221.453472 292.24373 203.339153l-117.777901-31.631567s88.904577 114.991797 1.379121 155.111694l101.117-1.85276z" fill="#F7E2CD" p-id="1569"></path><path d="M211.372419 246.059413c-11.669132-35.787505-21.917351-51.654367-29.695224-63.202768l2.201022-12.537467 108.360869 33.019975c-39.479093 11.302295-37.352367 51.45934-28.877967 83.36023l-0.004644 0.004643c0.004644-0.004644-24.777751-102.361459-51.984056-40.644613z" fill="#6E6E96" opacity=".15" p-id="1570"></path><path d="M248.348662 131.675916m-84.047469 0a84.047469 84.047469 0 1 0 168.094938 0 84.047469 84.047469 0 1 0-168.094938 0Z" fill="#F0F0FF" p-id="1571"></path><path d="M224.151349 137.940006m-18.091101 0a18.091102 18.091102 0 1 0 36.182203 0 18.091102 18.091102 0 1 0-36.182203 0Z" fill="#6E6E96" p-id="1572"></path><path d="M371.034749 385.945049S363.7398 272.072337 429.292183 278.085678l-98.34947-72.113657s25.367476 97.625082-18.467225 97.625082l58.559261 82.347946z" fill="#F7E2CD" p-id="1573"></path><path d="M334.332473 287.052289c8.562626-22.859983 0.798683-67.498012-2.266031-81.075624l8.172572 2.117439L429.292183 278.090322c-40.895362-3.756597-53.43283 34.450175-57.082627 67.251905l-0.004643 0.004644S382.025929 239.358833 334.332473 287.052289z" fill="#6E6E96" opacity=".15" p-id="1574"></path><path d="M414.307587 195.394113m-84.047469 0a84.047469 84.047469 0 1 0 168.094938 0 84.047469 84.047469 0 1 0-168.094938 0Z" fill="#F0F0FF" p-id="1575"></path><path d="M389.483401 192.477991m-18.095745 0a18.095745 18.095745 0 1 0 36.19149 0 18.095745 18.095745 0 1 0-36.19149 0Z" fill="#6E6E96" p-id="1576"></path><path d="M370.045682 377.229187C298.484603 130.477891-172.97062 482.005269 130.394308 871.725489c102.421824 131.587689 355.534724 148.192869 502.130227 148.192869 251.436594 0 455.263315-35.351016 455.263315-78.96283 0-43.616457-204.560395-59.882661-455.263315-78.958185-356.547009-27.145939-250.331439-442.874439-262.478853-484.768156z" fill="#F7E2CD" p-id="1577"></path><path d="M130.394308 871.720845c102.421824 131.592333 355.530081 148.197512 502.130227 148.197513 251.436594 0 455.263315-35.355659 455.263315-78.96283 0-43.621101-204.560395-59.882661-455.263315-78.958185-356.551652-27.155226-250.336083-442.88837-262.478853-484.768156-71.56108-246.755939-543.007015 104.776082-239.651374 494.491658z m239.651374-494.496302c6.384822 35.838584-63.685693 403.706461 111.810995 474.143813 118.502288 47.568081 573.849186 39.107612 573.849186 76.427475 0 37.296645-441.499961 18.091102-573.849186 18.091101-77.165792 0-210.387996-14.213774-264.303751-126.814164-159.671617-333.464138 114.829274-652.983825 152.492756-441.848225z" fill="#EDD9C4" p-id="1578"></path><path d="M130.394308 871.720845c102.421824 131.592333 355.530081 148.197512 502.130227 148.197513 191.19174 0 354.828911-20.440716 422.275844-49.425484-83.429883 18.091102-211.734613 29.685938-355.655455 29.685937-146.600146 0-413.355668-2.971844-515.782136-134.559533C-12.732495 613.690472 132.618548 302.413009 262.729602 295.387384c-148.731516 9.625989-361.380899 282.083737-132.335294 576.333461z" fill="#DECCB8" p-id="1579"></path><path d="M451.367413 674.200006a281.526517 281.354707 90 1 0 562.709413 0 281.526517 281.354707 90 1 0-562.709413 0Z" fill="#8B5C29" p-id="1580"></path><path d="M766.387542 637.154111l-0.496855-0.62223c8.799445 10.327159 23.208246 19.646676 28.413617 19.776695a2.925409 2.925409 0 0 0-0.636161 0.097513c0.664021-0.227532 3.20402-1.61594 7.020982-5.428259a6.06442 6.06442 0 0 0-1.244459 2.400693c0.654734-3.677657-2.995062-20.138888-19.943861-37.826005-19.544519-20.389637-44.735542-30.707509-67.386567-27.628864-70.246967 9.54705-93.887059 61.303574-91.853204 91.314557 4.355609 64.396149 74.384332 143.874408 164.941997 143.874408 123.461553 0 177.391238-85.565896 181.528602-165.638523 5.321459-102.91868-61.029607-221.179505-219.257093-237.598945-112.577173-11.683063-210.796624 32.290945-253.516885 136.110465-36.669771 89.141396-31.668715 231.933866 65.965655 310.576294 30.842171 24.847404 124.223088 65.440938 99.398901 96.310969-24.824186 30.860745-158.459662-15.98295-189.311119-40.825709-151.596559-125.764732-177.493395-253.317214-108.63948-420.673835 67.233332-163.437501 218.737021-253.581894 395.385298-235.24933 240.106438 24.917056 356.644522 213.907774 347.654693 387.723512-9.170925 177.651274-140.433569 301.707196-319.203929 301.707196-177.604839 0-282.729185-137.378142-291.458977-266.639434-8.650853-128.086485 71.352122-225.809081 199.090345-243.166509 102.91868-13.990885 193.838538 53.507126 230.452587 127.413177 32.286301 65.185545 24.160165 133.876938-21.197607 179.262571-41.703333 41.740481-85.668053 48.696453-115.177537 47.159453-72.870549-3.756597-122.57-60.611691-131.796647-71.960422-24.968135-30.753944-20.296767-75.939906 10.429316-100.921971 30.721439-24.977422 75.879541-20.306054 100.838388 10.452533z" fill="#D59758" p-id="1581"></path><path d="M579.737152 958.350104c-6.654145-2.266031-136.890574-30.117784-202.930524-169.125796-37.254853-78.387034-38.137119-166.53472-2.637512-262.000572 51.621863-138.803698 142.815688-201.147418 210.23476-229.017744 94.565011-39.084395 203.199848-36.470101 298.0574 7.188148 152.446321 70.163384 224.077053 219.024918 191.623586 398.171402-14.55275 80.337307-81.781438 151.517619-175.450252 185.76348-102.491477 37.468455-209.61253 21.880203-286.490425-41.735837-96.636015-79.924035-99.867896-210.109385-58.034546-295.563837 27.104148-55.369172 123.986269-120.652231 250.870086-74.036068 112.326424 41.257556 130.770432 108.411948 131.759499 144.770604 1.453418 53.423543-32.727434 104.446393-85.045822 126.962757-51.821533 22.321336-107.190706 11.17692-148.123217-29.778808-16.154759-16.164046-16.154759-42.381284 0-58.5314a41.359713 41.359713 0 0 1 58.494253 0c21.25333 21.262617 42.687756 18.420791 56.938677 12.286718 20.83077-8.971255 35.578547-29.435188 35.053831-48.668592-0.710457-26.217238-28.984768-51.482557-77.569777-69.327553-68.747115-25.251389-122.231024-11.905951-150.626066 37.565968-30.280306 52.754878-23.979068 138.460079 38.991525 190.546292 54.008625 44.670533 130.784363 55.053414 205.386939 27.772813 65.190189-23.839763 113.250482-72.030074 122.444625-122.774314 25.664661-141.69196-27.104148-254.032314-144.798466-308.198818-72.916984-33.567909-159.615895-35.759644-231.906005-5.883323-74.848682 30.939684-131.657342 93.654884-164.273332 181.389297-27.336323 73.492779-27.475628 139.811339-0.417916 197.107567 50.65137 107.265002 180.530249 169.622652 181.830431 170.073072l-0.09287-0.027861c21.629454 7.33674 27.707804 12.040613 20.371063 33.697927-2.349614 6.932755-30.28495 4.968552-46.931921 4.968552l-26.728024-3.594074z" fill="#DEA66C" p-id="1582"></path><path d="M730.581463 478.917337c-110.766206 0-201.114913 80.165497-206.041673 180.74385a178.14813 178.14813 0 0 1-0.241463-8.650852c0-104.585699 92.350059-189.385416 206.278493-189.385416s206.283136 84.795074 206.283136 189.385416c0 2.902192 0.134662-2.855757 0 0-4.922117-100.578352-95.507643-172.092997-206.278493-172.092998zM899.697973 798.571686s-205.94416 126.818808-283.616095-86.424944c0 0 65.826349 172.854532 283.616095 86.424944z" fill="#E4BC96" p-id="1583"></path><path d="M1020.628814 616.806265v0.041792c-0.111444-11.775933-6.565918-288.542855-312.647297-288.542855-254.789206 0-291.380037 277.129116-292.800951 288.918979a22.093804 22.093804 0 1 1-43.867206-5.321459c0.408629-3.329394 10.424672-82.436172 56.130707-162.476295 61.763281-108.151912 158.770777-165.313478 280.53745-165.313477 182.656975 0 270.210291 90.68304 311.495708 166.771538 44.257261 81.535332 45.334555 162.211615 45.353128 165.610662a22.093804 22.093804 0 1 1-44.201539 0.311115z" fill="#FFFFFF" opacity=".21" p-id="1584"></path><path d="M367.347805 701.350589c0 13.833006 15.630043 33.883667 29.458406 33.883668s20.621813-20.046018 20.621812-33.883668c0-13.828363-11.209425-38.299642-25.037787-38.299642-13.833006 0-25.042431 24.47128-25.042431 38.299642zM393.862228 775.739565c0 9.356666 16.424083 25.780748 25.776105 25.780748 9.356666 0 8.102919-16.424083 8.102918-25.780748a16.944155 16.944155 0 0 0-33.879023 0z" fill="#FFFFFF" opacity=".27" p-id="1585"></path><path d="M185.424504 735.967931m-33.145349 0a33.14535 33.14535 0 1 0 66.290699 0 33.14535 33.14535 0 1 0-66.290699 0Z" fill="#EDD9C4" p-id="1586"></path><path d="M189.181101 776.649692m-25.850401 0a25.850401 25.850401 0 1 0 51.700802 0 25.850401 25.850401 0 1 0-51.700802 0Z" fill="#EDD9C4" p-id="1587"></path><path d="M178.245643 705.585467m-24.861334 0a24.861334 24.861334 0 1 0 49.722669 0 24.861334 24.861334 0 1 0-49.722669 0Z" fill="#EDD9C4" p-id="1588"></path><path d="M251.989171 801.98002m-11.325512 0a11.325513 11.325513 0 1 0 22.651025 0 11.325513 11.325513 0 1 0-22.651025 0Z" fill="#EDD9C4" p-id="1589"></path><path d="M229.616757 663.050947m-11.046903 0a11.046902 11.046902 0 1 0 22.093805 0 11.046902 11.046902 0 1 0-22.093805 0Z" fill="#EDD9C4" p-id="1590"></path><path d="M806.307768 910.521986m-30.93504 0a30.935041 30.935041 0 1 0 61.870081 0 30.935041 30.935041 0 1 0-61.870081 0Z" fill="#D59758" p-id="1591"></path><path d="M763.322828 919.358579m-25.506782 0a25.506782 25.506782 0 1 0 51.013564 0 25.506782 25.506782 0 1 0-51.013564 0Z" fill="#D59758" p-id="1592"></path><path d="M847.184557 907.206523m-20.98865 0a20.98865 20.98865 0 1 0 41.977299 0 20.98865 20.98865 0 1 0-41.977299 0Z" fill="#D59758" p-id="1593"></path><path d="M882.540216 860.808605m-14.362366 0a14.362366 14.362366 0 1 0 28.724732 0 14.362366 14.362366 0 1 0-28.724732 0Z" fill="#D59758" p-id="1594"></path><path d="M790.81703 678.546329m-16.916294 0a16.916294 16.916294 0 1 0 33.832589 0 16.916294 16.916294 0 1 0-33.832589 0Z" fill="#D59758" p-id="1595"></path><path d="M807.566159 669.268602m-15.848288 0a15.848288 15.848288 0 1 0 31.696576 0 15.848288 15.848288 0 1 0-31.696576 0Z" fill="#D59758" p-id="1596"></path><path d="M763.47142 659.986233m-10.308584 0a10.308585 10.308585 0 1 0 20.617169 0 10.308585 10.308585 0 1 0-20.617169 0Z" fill="#D59758" p-id="1597"></path><path d="M775.683843 674.39039m-17.984301 0a17.984301 17.984301 0 1 0 35.968601 0 17.984301 17.984301 0 1 0-35.968601 0Z" fill="#D59758" p-id="1598"></path><path d="M850.50002 673.364175m-7.364601 0a7.364601 7.364601 0 1 0 14.729203 0 7.364601 7.364601 0 1 0-14.729203 0Z" fill="#D59758" p-id="1599"></path><path d="M455.727666 820.670134m-7.364602 0a7.364601 7.364601 0 1 0 14.729203 0 7.364601 7.364601 0 1 0-14.729203 0Z" fill="#FFFFFF" opacity=".27" p-id="1600"></path><path d="M146.35404 683.881718a21.70375 20.041374 90 1 0 40.082749 0 21.70375 20.041374 90 1 0-40.082749 0Z" fill="#EDD9C4" p-id="1601"></path><path d="M194.971554 638.045664m-4.081642 0a4.081642 4.081642 0 1 0 8.163284 0 4.081642 4.081642 0 1 0-8.163284 0Z" fill="#EDD9C4" p-id="1602"></path><path d="M225.957673 701.313441m-4.267382 0a4.267383 4.267383 0 1 0 8.534765 0 4.267383 4.267383 0 1 0-8.534765 0Z" fill="#EDD9C4" p-id="1603"></path><path d="M231.339497 762.737746m-6.310525 0a6.310525 6.310525 0 1 0 12.621051 0 6.310525 6.310525 0 1 0-12.621051 0Z" fill="#EDD9C4" p-id="1604"></path><path d="M859.977417 94.462854m-27.986414 0a27.986414 27.986414 0 1 0 55.972828 0 27.986414 27.986414 0 1 0-55.972828 0Z" fill="#D59758" opacity=".45" p-id="1605"></path><path d="M681.736418 181.36608m-11.78522 0a11.78522 11.78522 0 1 0 23.570439 0 11.78522 11.78522 0 1 0-23.570439 0Z" fill="#D59758" p-id="1606"></path><path d="M1030.853816 277.115185m-7.364602 0a7.364601 7.364601 0 1 0 14.729203 0 7.364601 7.364601 0 1 0-14.729203 0Z" fill="#D59758" p-id="1607"></path><path d="M115.632601 471.636319c11.576262 21.369417 48.780037 55.443468 106.740285 31.459757a11.051546 11.051546 0 0 0-8.446538-20.412855c-53.757876 22.24704-77.885536-19.818486-78.888533-21.620166l-0.218245-0.390055a12.110265 12.110265 0 0 0-0.278611-0.427203l0.520073 0.868336a11.046902 11.046902 0 0 0-19.428431 10.522186z" fill="#6E6E96" p-id="1608"></path><path d="M405.726387 139.941358c46.421135 0 84.052112 37.635621 84.052112 84.052112 0 1.838829-0.167166 3.635866-0.283254 5.44219a83.629553 83.629553 0 0 0 9.886026-39.525528c0-46.416492-37.630977-84.047469-84.052113-84.047469-44.582307 0-80.954894 34.738073-83.778145 78.605279 14.153408-26.486561 42.042309-44.526585 74.175374-44.526584zM239.832471 78.057345c46.430422 0 84.061399 37.640264 84.061399 84.0614 0 1.838829-0.153236 3.640509-0.269323 5.44219a83.745641 83.745641 0 0 0 9.886026-39.530172c0-46.425779-37.630977-84.061399-84.066043-84.061399-44.596237 0-80.973468 34.742716-83.787433 78.623853 14.134834-26.491205 42.037665-44.535872 74.175374-44.535872z" fill="#E6E6F5" p-id="1609"></path></svg>
\ No newline at end of file
src/modules/page1/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<template>
<div class="q-gutter-md overflow-hidden">
<q-virtual-scroll
ref="virtualListRef"
:items="heavyList"
v-slot="{ item, index }"
class="container-height"
:virtual-scroll-slice-ratio-before="1"
:virtual-scroll-slice-ratio-after="0.1"
:virtual-scroll-item-size="600"
:virtual-scroll-sticky-size-start="0"
:virtual-scroll-sticky-size-end="10"
>
<q-item :key="index" v-if="item.id === '1'">
<div class="q-gutter-sm full-width">
<q-btn
outline
label="success"
color="positive"
@click="onClick('success')"
/>
<q-btn
outline
label="error"
color="negative"
@click="onClick('error')"
/>
<q-btn
outline
label="warn"
color="warning"
@click="onClick('warn')"
/>
<q-btn outline label="info" color="info" @click="onClick('info')" />
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '2'">
<div class="q-gutter-sm full-width">
<Com.DateTimePick
style="width: 220px"
v-model="dates"
format24h
with-seconds
/>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '3'">
<div class="actions full-width">
<div class="q-ml-sm">
<q-btn
round
color="primary"
:icon="ICON.mapLocation"
@click="getLocation"
title="定位"
/>
</div>
<div class="q-mr-sm q-gutter-sm">
<q-btn
v-if="!state.isPlay"
round
color="play"
:icon="ICON.play"
@click="chartRaceRun"
title="开始"
/>
<q-btn
v-else
round
color="pause"
:icon="ICON.pause"
@click="chartRaceStop"
title="停止"
/>
</div>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '4'">
<div class="map full-width">
<div class="left-area q-ml-sm" ref="leftMapRef">
<template v-if="state.isRenderMap">
<Com.BaiduMap
id="allmap"
ref="allmapRef"
:scrollWheelZoom="false"
navigationControl
overviewMapControl
scaleControl
:width="state.width"
:height="state.height"
/>
</template>
</div>
<div v class="right-area q-mr-sm">
<!-- 动态排序柱状图 -->
<ChartsRace ref="faChartsRaceRef" />
</div>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '5'">
<div class="map full-width">
<div class="left-area q-ml-sm">
<!-- 动态数据 -->
<ChartDynamic />
</div>
<div class="right-area q-mr-sm">
<!-- 时钟 -->
<ChartsClock />
</div>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '6'">
<div class="map full-width">
<div class="left-area q-ml-sm">
<!-- 多Y轴示例 -->
<ChartMultipleY />
</div>
<div class="right-area q-mr-sm">
<!-- 联动和共享数据集 -->
<ChartShareDataset />
</div>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '7'">
<div class="actions full-width">
<div class="q-ml-sm">
<q-btn color="primary" label="重置图节点" @click="resetChartNode" />
</div>
</div>
</q-item>
<q-item :key="index" dense v-if="item.id === '8'">
<div class="map full-width">
<div class="left-area q-ml-sm">
<!-- 动态增加图节点 -->
<ChartGraphDynamic ref="faGraphDynamicChartRef" />
</div>
<div class="right-area q-mr-sm">2</div>
</div>
</q-item>
<q-item :key="index" dense v-if="index > 7">
<ChartItem :id="`item-chart${item.id}`" />
</q-item>
</q-virtual-scroll>
</div>
</template>
<script lang="ts">
export default {
name: 'PAGE1',
};
</script>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { date, dom } from 'quasar';
import { useMessage } from 'src/common/hooks';
import ICON from 'src/config/icons';
import Com from 'src/components';
import ChartsRace from './elements/ChartsRace.vue';
import ChartDynamic from './elements/ChartDynamic.vue';
import ChartsClock from './elements/ChartsClock.vue';
import ChartMultipleY from './elements/ChartMultipleY.vue';
import ChartShareDataset from './elements/ChartShareDataset.vue';
import ChartGraphDynamic from './elements/ChartGraphDynamic.vue';
import ChartItem from './elements/ChartItem.vue';
// function renewStore() {
// user_store.$patch((state) => {
// state.count++;
// state.arr.push(1);
// });
// user_store.changeState(10);
// }
const { height, width } = dom;
const { success, error, warn, info } = useMessage();
const dates = ref(date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm:ss'));
const virtualListRef = ref<any>(null);
const leftMapRef = ref<any>(null);
const allmapRef = ref<any>(null);
const faChartsRaceRef = ref<any>(null);
const faGraphDynamicChartRef = ref<any>(null);
const state = reactive({
width: 0,
height: 0,
isRenderMap: false,
bMapApi: null as any,
isPlay: true,
});
const heavyList = ref<any>([
{ id: '1' },
{ id: '2' },
{ id: '3' },
{ id: '4' },
{ id: '5' },
{ id: '6' },
{ id: '7' },
{ id: '8' },
]);
onMounted(() => {
for (let index = 0; index < 500; index++) {
heavyList.value.push({
id: String(heavyList.value.length + 1),
});
}
setTimeout(() => {
console.log('宽', width(leftMapRef.value), '高', height(leftMapRef.value));
if (leftMapRef.value) {
state.width = width(leftMapRef.value);
state.height = height(leftMapRef.value) - 2;
state.isRenderMap = true;
nextTick(() => {
state.bMapApi = allmapRef.value.bMapApi;
});
}
}, 500);
});
function onClick(type: string) {
switch (type) {
case 'success':
success('成功');
break;
case 'error':
error('失败');
break;
case 'warn':
warn('警告');
break;
case 'info':
info('提示信息');
break;
default:
break;
}
}
function getLocation() {
let myCity = new (window as any).BMap.LocalCity();
myCity.get((result: any) => {
const cityName = result.name;
state.bMapApi = allmapRef.value.bMapApi;
state.bMapApi.setCenter(cityName);
});
}
function chartRaceRun() {
state.isPlay = true;
faChartsRaceRef.value.setTimer();
}
function chartRaceStop() {
state.isPlay = false;
faChartsRaceRef.value.clearTimer();
}
function resetChartNode() {
faGraphDynamicChartRef.value.reset();
}
</script>
<style lang="scss" scoped>
.actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: $padding-md;
}
.map {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: $padding-md;
> div {
border: 1px solid $border-color;
height: 600px;
}
}
</style>
src/modules/page1/api.ts 0 → 100644
View file @ 56d5da3f
import request from 'src/http';
// 获取
export function getLocation() {
return request({
url: '/location/ip?ak=RDBRKGErFTLbtmvUXp6X4UACeQGP5KlD&ip=192.168.2.103&coor=bd09ll',
method: 'get',
});
}
src/modules/page1/config.ts 0 → 100644
View file @ 56d5da3f
export const colorList = [
'#FF7396',
'#F4E06D',
'#C499BA',
'#B25068',
'#3AB0FF',
'#FFB562',
'#F87474',
'#A0D995',
'#6CC4A1',
'#4CACBC',
'#53BF9D',
'#816797',
'#94B49F',
'#DF7861',
'#47B5FF',
'#9EB23B',
'#F15412',
'#3BACB6',
'#92B4EC',
];
src/modules/page1/elements/ChartDynamic.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const colors = ['#9EB23B', '#EF9F9F'];
const dynamicRef = ref<any>(null);
const state = reactive({
app: {} as any,
categories: null as any,
categories2: null as any,
data: [] as number[],
data2: [] as number[],
});
onMounted(() => {
getCategories();
getCategories2();
getData();
getData2();
getChart();
});
var dynamicChart: ECharts;
function getChart() {
if (dynamicChart != null && dynamicChart != undefined) {
dynamicChart.dispose();
}
dynamicChart = echarts.init(dynamicRef.value);
let option: EChartsOption;
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
legend: {},
dataZoom: {
show: false,
start: 0,
end: 100,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: state.categories,
},
{
type: 'category',
boundaryGap: true,
data: state.categories2,
},
],
yAxis: [
{
type: 'value',
scale: true,
name: '折线图',
max: 30,
min: 0,
boundaryGap: [0.2, 0.2],
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
},
{
type: 'value',
scale: true,
name: '柱状图',
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2],
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
},
],
series: [
{
name: '折线图',
type: 'line',
data: state.data2,
itemStyle: {
color: colors[0],
},
},
{
name: '柱状图',
type: 'bar',
// 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
xAxisIndex: 1,
yAxisIndex: 1,
data: state.data,
barWidth: 35,
itemStyle: {
borderRadius: 10,
color: colors[1],
},
},
],
};
state.app.count = 11;
setInterval(function () {
let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
state.data.shift();
state.data.push(Math.round(Math.random() * 1000));
state.data2.shift();
state.data2.push(+(Math.random() * 10 + 5).toFixed(1));
state.categories.shift();
state.categories.push(axisData);
state.categories2.shift();
state.categories2.push(state.app.count++);
dynamicChart.setOption<EChartsOption>({
xAxis: [
{
data: state.categories,
},
{
data: state.categories2,
},
],
series: [
{
data: state.data2,
},
{
data: state.data,
},
],
});
}, 2100);
option && dynamicChart.setOption(option);
}
function getCategories() {
let now = new Date();
let res = <any>[];
let len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(+now - 2000);
}
state.categories = res;
}
function getCategories2() {
let res = [];
let len = 10;
while (len--) {
res.push(10 - len - 1);
}
state.categories2 = res;
}
function getData() {
let res = [];
let len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
state.data = res;
}
function getData2() {
let res = [];
let len = 0;
while (len < 10) {
res.push(+(Math.random() * 10 + 5).toFixed(1));
len++;
}
state.data2 = res;
}
</script>
<template>
<div class="fit" ref="dynamicRef"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/elements/ChartGraphDynamic.vue 0 → 100644
View file @ 56d5da3f
<!--
* 动态增加图节点
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
interface StateType {
data: NonNullable<echarts.GraphSeriesOption['data']>;
edges: NonNullable<echarts.GraphSeriesOption['edges']>;
timer: null | NodeJS.Timeout;
}
defineExpose({
reset,
});
const chartGraphDynamicRef = ref<any>(null);
const state = reactive<StateType>({
data: [],
edges: [],
timer: null,
});
onMounted(() => {
getChart();
});
var graphDynamicChart: ECharts;
function getChart() {
if (graphDynamicChart != null && graphDynamicChart != undefined) {
graphDynamicChart.dispose();
}
graphDynamicChart = echarts.init(chartGraphDynamicRef.value);
let option: EChartsOption;
state.data = [
{
fixed: true,
x: graphDynamicChart.getWidth() / 2,
y: graphDynamicChart.getHeight() / 2,
symbolSize: 18,
id: '0',
name: '原点',
itemStyle: {
color: '#FEB139',
},
},
];
state.edges = [];
option = {
series: [
{
type: 'graph',
roam: true,
layout: 'force',
animation: false,
data: state.data,
force: {
// initLayout: 'circular'
// gravity: 0
repulsion: 100,
edgeLength: 5,
},
edges: state.edges,
},
],
};
run();
option && graphDynamicChart.setOption(option);
}
function run() {
if (state.timer) {
clearTimer();
}
state.timer = setInterval(function () {
state.data.push({
id: state.data.length + '',
itemStyle: {
color: '#8bc24c',
},
});
let source = Math.round((state.data.length - 1) * Math.random());
let target = Math.round((state.data.length - 1) * Math.random());
// 把不相同的两点连接起来
if (source !== target) {
state.edges.push({
source: source,
target: target,
});
}
graphDynamicChart.setOption({
series: [
{
data: state.data,
edges: state.edges,
},
],
});
}, 1000);
}
function clearTimer() {
clearInterval(Number(state.timer));
}
function reset() {
getChart();
}
</script>
<template>
<div class="fit" ref="chartGraphDynamicRef"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/elements/ChartItem.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { getRandomPresetColor } from '../utils';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
interface Props {
id: string;
}
const props = withDefaults(defineProps<Props>(), {
id: 'mychart',
});
interface ChartDomsType {
[proppName: string]: ECharts | null | undefined;
}
const chartDoms = reactive<ChartDomsType>({});
onMounted(() => {
setTimeout(() => {
getLeftChart();
getRightChart();
}, 500);
});
function getLeftChart() {
const id = `${props.id}-left`;
const domkey = `chartLeftDom${props.id}`;
let myChart = chartDoms[domkey];
if (myChart != null && myChart != undefined) {
chartDoms[domkey]?.dispose();
}
const chartDom = document.getElementById(id) as HTMLElement;
if (chartDom) {
myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
color: getRandomPresetColor(),
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: getRandomData(),
type: 'line',
},
],
};
option && myChart.setOption(option);
}
}
function getRightChart() {
const id = `${props.id}-right`;
const domkey = `chartRightDom${props.id}`;
let myChart = chartDoms[domkey];
if (myChart != null && myChart != undefined) {
chartDoms[domkey]?.dispose();
}
const chartDom = document.getElementById(id) as HTMLElement;
if (chartDom) {
myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
color: getRandomPresetColor(),
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: getRandomData(),
type: 'bar',
},
],
};
option && myChart.setOption(option);
}
}
function getRandomData() {
let arr = [];
for (let i = 0; i < 7; i++) {
arr.push(Math.round(Math.random() * 300));
}
return arr;
}
</script>
<template>
<div class="map full-width">
<div class="q-ml-sm" :id="`${props.id}-left`"></div>
<div class="q-mr-sm" :id="`${props.id}-right`"></div>
</div>
</template>
<style lang="scss" scoped>
.map {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: $padding-md;
> div {
border: 1px solid $border-color;
height: 600px;
}
}
</style>
src/modules/page1/elements/ChartMultipleY.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const colors = ['#95D1CC', '#809A6F', '#FDAF75'];
const chartMultipleYRef = ref<any>(null);
onMounted(() => {
getChart();
});
var multipleYChart: ECharts;
function getChart() {
if (multipleYChart != null && multipleYChart != undefined) {
multipleYChart.dispose();
}
multipleYChart = echarts.init(chartMultipleYRef.value);
let option: EChartsOption;
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
grid: {
top: 40,
bottom: 50,
left: 50,
right: 150,
},
legend: {
top: 7,
data: ['蒸发', '降水', '温度'],
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
],
yAxis: [
{
type: 'value',
name: '蒸发',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: '{value} ml',
},
},
{
type: 'value',
name: '降水',
position: 'right',
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: '{value} ml',
},
},
{
type: 'value',
name: '温度',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
},
},
axisLabel: {
formatter: '{value} °C',
},
},
],
series: [
{
name: '蒸发',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
],
},
{
name: '降水',
type: 'bar',
yAxisIndex: 1,
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
],
},
{
name: '温度',
type: 'line',
yAxisIndex: 2,
data: [
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
],
},
],
};
option && multipleYChart.setOption(option);
}
</script>
<template>
<div class="fit" ref="chartMultipleYRef"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/elements/ChartShareDataset.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const colors = ['#E8C07D', '#9FC088', '#CC704B', '#614124'];
const chartShareDatasetRef = ref<any>(null);
onMounted(() => {
getChart();
});
var shareDatasetChart: ECharts;
function getChart() {
if (shareDatasetChart != null && shareDatasetChart != undefined) {
shareDatasetChart.dispose();
}
shareDatasetChart = echarts.init(chartShareDatasetRef.value);
let option: EChartsOption;
option = {
color: colors,
// grid: { top: '55%' },
grid: {
top: 300,
bottom: 50,
left: 40,
right: 20,
},
legend: {},
tooltip: {
trigger: 'axis',
showContent: false,
axisPointer: {
type: 'shadow',
},
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['奶茶', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['抹茶拿铁', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['奶酪可可', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['核桃布朗尼', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
],
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
// emphasis: {
// focus: 'self',
// },
label: {
formatter: '{b}: {@2012} ({d}%)',
},
encode: {
itemName: 'product',
value: '2017',
tooltip: '2017',
},
},
],
};
shareDatasetChart.on('updateAxisPointer', function (event: any) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
shareDatasetChart.setOption<EChartsOption>({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)',
},
encode: {
value: dimension,
tooltip: dimension,
},
},
});
}
});
shareDatasetChart.setOption(option);
}
</script>
<template>
<div class="fit" ref="chartShareDatasetRef"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/elements/ChartsClock.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const chartClockRef = ref<any>(null);
const state = reactive({
timer: null as any,
option: null as unknown as EChartsOption,
});
onMounted(() => {
getChart();
});
onUnmounted(() => {
clearTimer();
});
var clockChart: ECharts;
function getChart() {
if (clockChart != null && clockChart != undefined) {
clockChart.dispose();
}
clockChart = echarts.init(chartClockRef.value);
state.option = {
title: {
text: '',
textAlign: 'center',
left: '50%',
top: 25,
textStyle: {
color: '#A25B5B',
},
},
series: [
{
name: 'hour',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
clockwise: true,
axisLine: {
lineStyle: {
width: 11,
color: [[1, '#809A6F']],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 15,
},
},
splitLine: {
lineStyle: {
color: '#809A6F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2,
},
},
axisTick: {
lineStyle: {
color: '#809A6F',
},
},
axisLabel: {
color: '#D5D8B5',
fontSize: 35,
distance: 25,
formatter: function (value) {
if (value === 0) {
return '';
}
return value + '';
},
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 11,
length: '55%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#CC9C75',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4,
},
},
detail: {
show: false,
},
title: {
offsetCenter: [0, '30%'],
},
data: [
{
value: 0,
},
],
},
{
name: 'minute',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
clockwise: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 8,
length: '70%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#CC9C75',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4,
},
},
anchor: {
show: true,
size: 20,
showAbove: false,
itemStyle: {
borderWidth: 15,
borderColor: '#CC9C75',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4,
},
},
detail: {
show: false,
},
title: {
offsetCenter: ['0%', '-40%'],
},
data: [
{
value: 0,
},
],
},
{
name: 'second',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
animationEasingUpdate: 'bounceOut',
clockwise: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '85%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#CC9C75',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4,
},
},
anchor: {
show: true,
size: 15,
showAbove: true,
itemStyle: {
color: '#CC9C75',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4,
},
},
detail: {
show: false,
},
title: {
offsetCenter: ['0%', '-40%'],
},
data: [
{
value: 0,
},
],
},
],
};
run();
state.option && clockChart.setOption(state.option);
}
function run() {
if (state.timer) {
clearTimer();
}
state.timer = setInterval(function () {
let date = new Date();
let dateStr = date.toLocaleDateString().replace(/\//g, '-');
let timeStr = date.toLocaleTimeString();
let titleStr = dateStr + ' ' + timeStr;
let second = date.getSeconds();
let minute = date.getMinutes() + second / 60;
let hour = (date.getHours() % 12) + minute / 60;
state.option.animationDurationUpdate = 300;
clockChart.setOption<EChartsOption>({
title: {
text: titleStr,
},
series: [
{
name: 'hour',
animation: hour !== 0,
data: [{ value: hour }],
},
{
name: 'minute',
animation: minute !== 0,
data: [{ value: minute }],
},
{
animation: second !== 0,
name: 'second',
data: [{ value: second }],
},
],
});
}, 1000);
}
function clearTimer() {
clearInterval(state.timer);
}
</script>
<template>
<div ref="chartClockRef" class="fit"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/elements/ChartsRace.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const colorList = {
A: '#F6E3C5',
B: '#A0D995',
C: '#6CC4A1',
D: '#4CACBC',
E: '#DF7861',
} as any;
defineExpose({
run,
setTimer,
clearTimer,
});
const chartsRaceRef = ref<any>(null);
const state = reactive({
data: [] as number[],
timer: null as any,
});
onMounted(() => {
getChart();
});
onUnmounted(() => {
clearTimer();
});
var raceChart: ECharts;
function getChart() {
if (raceChart != null && raceChart != undefined) {
raceChart.dispose();
}
raceChart = echarts.init(chartsRaceRef.value);
let option: EChartsOption;
for (let i = 0; i < 5; ++i) {
state.data.push(Math.round(Math.random() * 200));
}
option = {
grid: {
top: 10,
bottom: 30,
left: 40,
right: 60,
},
xAxis: {
max: 'dataMax',
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 4, // only the largest ${max + 1} bars will be displayed
},
series: [
{
realtimeSort: true,
type: 'bar',
itemStyle: {
color: function (param) {
return colorList[param.name] || '#9EB23B';
},
},
data: state.data,
label: {
show: true,
position: 'right',
valueAnimation: true,
},
barWidth: 60,
},
],
legend: {
show: true,
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
};
setTimer();
option && raceChart.setOption(option);
}
function run() {
for (var i = 0; i < state.data.length; ++i) {
if (Math.random() > 0.9) {
state.data[i] = Math.round(Math.random() * 2000);
} else {
state.data[i] = Math.round(Math.random() * 200);
}
}
raceChart.setOption<EChartsOption>({
series: [
{
type: 'bar',
data: state.data,
},
],
});
}
function setTimer() {
if (state.timer) {
clearTimer();
}
setTimeout(function () {
run();
}, 0);
state.timer = setInterval(function () {
run();
}, 3000);
}
function clearTimer() {
clearInterval(state.timer);
}
</script>
<template>
<div class="fit" ref="chartsRaceRef"></div>
</template>
<style lang="scss" scoped></style>
src/modules/page1/utils.ts 0 → 100644
View file @ 56d5da3f
import { colorList } from './config';
// 生成随机的16进制颜色
export const getRandomColor = function () {
let str = '#';
const arr = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'a',
'b',
'c',
'd',
'e',
'f',
];
for (let i = 0; i < 6; i++) {
const num = parseInt(String(Math.random() * 16));
str += arr[num];
}
return str;
};
// 获取随机预设颜色
export const getRandomPresetColor = function () {
const index = parseInt(String(Math.random() * colorList.length));
return colorList[index];
};
src/modules/page2/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<template>
<div class="container-height column no-wrap justify-center items-center">
<div class="q-gutter-xs">
<q-btn label="提交" color="primary" @click="onSubmit" />
<q-btn label="重置" color="primary" @click="onResetForm" />
<q-btn label="改变" color="primary" @click="onChange" />
</div>
<div class="page2-form">
<Com.MyForm
ref="myForm"
:config="formState.config"
v-model="formState.value"
>
<template #solt2>
<q-input filled v-model="formState.value.color" label="颜色">
<template v-slot:append>
<q-icon
class="cursor-pointer"
:name="ICON.takeColor"
:style="{ color: formState.value.color }"
>
<q-popup-proxy :breakpoint="600">
<q-color
v-model="formState.value.color"
default-view="palette"
:palette="colorPalette"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</template>
<template> 123 </template>
</Com.MyForm>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'PAGE2',
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { delEmptyObjkey } from 'src/common/utils';
import ICON from 'src/config/icons';
import Com from 'src/components';
import { form } from './config';
import COLORLIST from './colorList';
const myForm = ref<any>(null);
const colorPalette = ref<any>([]);
const formState = reactive({
config: form,
value: {} as any,
});
onMounted(() => {
getColorList();
});
function getColorList() {
let arr: any[] = [];
const length = 7;
for (let i = 0; i < length; i++) {
for (const key in COLORLIST) {
const item = (COLORLIST as any)[key];
arr.push(item[i + 1]);
}
}
colorPalette.value = arr;
}
function onChange() {
let obj = {
name: '王二小',
age: 1000,
sex: '男',
};
formState.value = obj;
let newForm = form.map((item: any) => {
if (item.fild === 'country') {
item.bind.label = '爱好';
item.bind.multiple = true;
item.bind.options = [
{
label: '看电视',
value: 'watch_tv',
},
{
label: '睡懒觉',
value: 'sleep_in',
},
{
label: '跑步',
value: 'run',
},
{
label: '听音乐',
value: 'listen_music',
},
];
}
return item;
});
formState.config = newForm;
}
function onSubmit() {
console.log('formValue', delEmptyObjkey(formState.value));
myForm.value.validate().then((success: any) => {
if (!success) return;
});
}
function onResetForm() {
myForm.value.reset();
}
</script>
<style lang="scss" scoped>
.page2-form {
width: 800px;
border: 1px solid $border-color;
}
</style>
src/modules/page2/colorList.ts 0 → 100644
View file @ 56d5da3f
const color1 = {
1: '#cae6d9',
2: '#b9decd',
3: '#a7d6c0',
4: '#96ceb4',
5: '#85c6a8',
6: '#73be9b',
7: '#62b68f',
};
const color2 = {
1: '#ffb6ad',
2: '#ff9f93',
3: '#ff897a',
4: '#ff7260',
5: '#ff5b47',
6: '#ff452d',
7: '#ff2e14',
};
const color3 = {
1: '#e7908e',
2: '#e27c79',
3: '#de6764',
4: '#d9534f',
5: '#d43f3a',
6: '#c9302c',
7: '#b52b27',
};
const color4 = {
1: '#ffcead',
2: '#ffbe93',
3: '#ffaf7a',
4: '#ffa060',
5: '#ff9147',
6: '#ff822d',
7: '#ff7214',
};
const color5 = {
1: '#cac8e2',
2: '#bab7da',
3: '#aaa7d1',
4: '#9a96c8',
5: '#8a85bf',
6: '#7a75b6',
7: '#6a64ae',
};
const color6 = {
1: '#99c461',
2: '#8dbd4f',
3: '#81b142',
4: '#739e3b',
5: '#658b34',
6: '#58792d',
7: '#4a6626',
};
const color7 = {
1: '#ff5f87',
2: '#ff5f7a',
3: '#ff5f6c',
4: '#ff5f5f',
5: '#ff6c5f',
6: '#ff7a5f',
7: '#ff875f',
};
const color8 = {
1: '#39e6e8',
2: '#39d7e8',
3: '#39c9e8',
4: '#39bae8',
5: '#39abe8',
6: '#399de8',
7: '#398ee8',
};
const color9 = {
1: '#6181c6',
2: '#4e73bf',
3: '#4166b3',
4: '#3a5ba0',
5: '#33508d',
6: '#2c467b',
7: '#263b68',
};
const color10 = {
1: '#83987c',
2: '#768d6e',
3: '#6a7e63',
4: '#5e7058',
5: '#52624d',
6: '#465342',
7: '#3a4536',
};
export default {
color1,
color2,
color3,
color4,
color5,
color6,
color7,
color8,
color9,
color10,
};
src/modules/page2/config.ts 0 → 100644
View file @ 56d5da3f
export const form = [
{
fild: 'name',
col: 'col-6',
type: 'text',
bind: {
filled: true,
label: '姓名*',
lazyRules: true,
hideBottomSpace: true,
rules: [(val: any) => (val && val.length > 0) || '必填'],
},
},
{
fild: 'password',
col: 'col-6',
type: 'password',
bind: {
filled: true,
label: '密码*',
lazyRules: true,
hideBottomSpace: true,
rules: [(val: any) => (val && val.length > 0) || '必填'],
},
},
{
fild: 'age',
col: 'col-6',
type: 'number',
bind: {
filled: true,
label: '年龄',
},
},
{
fild: 'country',
col: 'col-6',
type: 'select',
bind: {
label: '国家*',
filled: true,
emitValue: true,
mapOptions: true,
options: [
{
label: '中国',
value: 'china',
},
{
label: '俄罗斯',
value: 'russia',
},
{
label: '法国',
value: 'france',
},
],
lazyRules: true,
hideBottomSpace: true,
rules: [(val: any) => (val && val.length > 0) || '必填'],
clearable: true,
},
},
{
fild: 'quantity',
col: 'col-6',
type: 'number',
bind: {
filled: true,
label: '数量',
},
},
{
solt: 'solt2',
col: 'col-6',
},
{
fild: 'remark',
col: 'col-12',
type: 'textarea',
bind: {
filled: true,
label: '备注',
},
},
];
src/modules/page3/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<template>
<div class="fit" id="list">
<div id="id1">{{ msg }}</div>
<div id="id2">2</div>
<div id="id3">3</div>
</div>
</template>
<script lang="ts">
export default {
name: 'PAGE3',
};
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// import { LinkedList } from './linkedList';
import { LinkedList2 } from './doublyLinkedList';
const msg = ref('page3');
onMounted(() => {
// 创建两个列表节点
// let node1 = new ListNode(2);
// let node2 = new ListNode(5);
// node1.next = node2;
// console.log('列表节点', node1);
// 用node1创建一个链表
// let list = new LinkedList(node1);
// console.log('链表', list);
// console.log(list.head.next.data); // 5
// console.log('list的size', list.size()); // 2
// list.clear();
// console.log('清空链表', list);
// console.log('链表的最后一个节点', list.getLast());
// console.log('链表的第一个节点', list.getFirst());
let list = new LinkedList2(1);
list.append(2);
list.append(3);
console.log('插入前', list.toArr()); // [1, 2, 3]
list.insert(2, 4);
console.log('插入后', list.toArr()); // [1, 2, 4, 3]
});
</script>
<style lang="scss" scoped></style>
src/modules/page3/doublyLinkedList.ts 0 → 100644
View file @ 56d5da3f
// 双向链表
// 节点
export class Node2 {
[x: string]: any;
constructor(data: any) {
this.data = data; // 数据
this.next = null; // 指向下一个节点的指针
this.prev = null; // 指向上一个节点
}
}
// 双向链表
export class LinkedList2 {
[x: string]: any;
constructor(head: any = null) {
if (head) {
this.head = new Node2(head);
} else {
this.head = null;
}
}
// 添加节点(尾部添加)
append(data: any) {
const newNode = new Node2(data);
const currNode = this.getLast();
if (currNode) {
currNode.next = newNode;
newNode.prev = currNode;
} else {
this.head = newNode;
}
}
// 查找节点
find(data: any) {
let currNode = this.head;
while (currNode && currNode.data !== data) {
currNode = currNode.next;
}
return currNode;
}
// 插入节点
// target:链表中存在的节点值
// data:要插入的节点值
// data插入的位置在target的后面
insert(target: any, data: any) {
const tagNode = this.find(target);
if (!tagNode) return; // 如果目标节点不存在，则返回
const newNode = new Node2(data);
if (tagNode.next) {
newNode.next = tagNode.next;
newNode.prev = tagNode;
tagNode.next = newNode;
newNode.next.prev = newNode;
} else {
// 如果目标节点是最后一个节点
tagNode.next = newNode;
newNode.prev = tagNode;
}
}
// 返回链表的最后一个节点
getLast() {
let lastNode = this.head;
if (lastNode) {
while (lastNode.next) {
lastNode = lastNode.next;
}
}
return lastNode;
}
// 转数组
toArr() {
let p = this.head;
const arr = [];
while (p) {
arr.push(p.data);
p = p.next;
}
return arr;
}
}
src/modules/page3/linkedList.ts 0 → 100644
View file @ 56d5da3f
// 单向链表
/**
* 链表节点
*/
export class ListNode {
[x: string]: any;
constructor(data: any) {
this.data = data; // 数据
this.next = null; // 指向下一个节点的指针
}
// 转数组
toArr() {
const arr = [];
let p = this;
while (p) {
arr.push(p.data);
p = p.next;
}
return arr;
}
}
/**
* 链表类
* 通常使用"head"作为链表的入口，这个"head"是对链表中第一个节点的引用，
* 而链表的最后一个节点指向null,
* 如果是空链表，链表的引用就是null
*/
export class LinkedList {
[x: string]: any;
// 果未传递"head"节点，则它将初始化为 null
constructor(head: any = null) {
// this.head = head;
if (head) {
this.head = new ListNode(head);
} else {
this.head = null;
}
}
// 添加节点
add(data: any) {
const newNode = new ListNode(data);
const currNode = this.getLast();
if (currNode) {
// 将最后一个节点的指针指向新的节点
currNode.next = newNode;
} else {
this.head = newNode;
}
}
// 查找节点
find(data: any) {
let currNode = this.head; // 从头部开始找
while (currNode && currNode.data !== data) {
// 如果不相等，则指针指向下一个节点继续比较
currNode = currNode.next;
}
return currNode;
}
// 插入节点
// target:链表中存在的节点值
// data:要插入的节点值
// data插入的位置在target的后面
insert(target: any, data: any) {
const tagNode = this.find(target);
if (!tagNode) return; // 如果目标节点不存在，则返回
const newNode = new ListNode(data);
newNode.next = tagNode.next; // 1 先将新节点的指针->指向目标节点的next
tagNode.next = newNode; // 2 再将目标节点的指针指向->新节点
// 注意顺序不要反了，不然目标节点与新节点的指针会相互循环指向下去
}
// 删除节点
remove(data: any) {
const tarNode = this.find(data);
if (!tarNode) return; // 删除的节点不存在，就返回
if (this.head.data === data) {
// 如果是头节点
console.warn('单链表的头节点不允删除');
return;
}
// 方法一
// 找到要删除节点的前一个节点(例如叫A节点)
// 还是从头开始找
let currNode = this.head;
// 如果A节点的下一个指针指向的节点值等于我们要删除的节点值，那么这个节点就是我们要找的
while (currNode && currNode.next && currNode.next.data !== data) {
currNode = currNode.next;
}
// 然后把A节点的next指向->删除节点的next
currNode.next = tarNode.next;
// // 方法二
// // 此方法不能删除最后一个节点
// // 将要删除节点的值修改为它的下一个节点的值
// if (tarNode.next) {
// tarNode.data = tarNode.next.data;
// tarNode.next = tarNode.next.next;
// }
}
// 链表反向
reverse() {
if (this.head === null || this.head.next === null) {
return this.head;
}
let p = this.head;
let n = null;
while (p) {
const nextNode = p.next;
p.next = n;
n = p;
p = nextNode;
}
const newList = new LinkedList();
newList.head = n;
return newList;
}
// 返回链表中的节点数
size() {
let count = 0;
let node = this.head;
while (node) {
count++;
node = node.next;
}
return count;
}
// 清空链表
clear() {
this.head = null;
}
// 返回链表的最后一个节点
getLast() {
let lastNode = this.head;
if (lastNode) {
while (lastNode.next) {
lastNode = lastNode.next;
}
}
return lastNode;
}
// 返回链表的第一个节点
getFirst() {
return this.head;
}
// 返回上一个节点
getLastNode(data: any) {
const currNode = this.find(data);
if (currNode) {
// 如果头节点
if (data === this.head.data) {
return null;
} else {
let currNode = this.head;
while (currNode && currNode.next && currNode.next.data !== data) {
currNode = currNode.next;
}
return currNode;
}
} else {
return null;
}
}
// 返回下一个节点
getNextNode(data: any) {
const currNode = this.find(data);
if (currNode) {
return currNode.next;
} else {
return null;
}
}
// 返回链表的中间节点
// 如果有两个中间节点，则返回第二个节点
getMiddle() {
// 用两个指针，快指针走两步，慢指针走一步
// 当快指针到终点时，慢指针正好在中间
let fast = this.head;
let low = this.head;
while (fast && fast.next) {
fast = fast.next.next;
low = low.next;
}
return low;
}
// 转数组
toArr() {
let p = this.head;
const arr = [];
while (p) {
arr.push(p.data);
p = p.next;
}
return arr;
}
}
/**
* 合并两个升序链表
*/
export const mergeTwoLists = function (list1: any, list2: any) {
let p1 = list1.head || null;
let p2 = list2.head || null;
const newList = new LinkedList('head');
let p3 = newList.head;
while (p1 && p2) {
// 把更小的放到p3，p3向后移动，小的那个也向后移动
if (p1.data > p2.data) {
p3.next = p2;
p2 = p2.next;
} else {
p3.next = p1;
p1 = p1.next;
}
p3 = p3.next;
}
p3.next = p1 ? p1 : p2;
// while (p1) {
// p3.next = p1;
// p3 = p3.next;
// p1 = p1.next;
// }
// while (p2) {
// p3.next = p2;
// p3 = p3.next;
// p2 = p2.next;
// }
return newList.head.next;
};
/**
* 合并两个升序链表 递归法
*/
export const mergeByRecursion = function (list1: any, list2: any) {
const p1 = list1 ? list1.head || list1 : null;
const p2 = list2 ? list2.head || list2 : null;
if (p1 === null) {
return p2;
}
if (p2 === null) {
return p1;
}
if (p1.data < p2.data) {
p1.next = mergeByRecursion(p1.next, p2);
return p1;
} else {
p2.next = mergeByRecursion(p2.next, p1);
return p2;
}
};
/**
* 两数相加
*/
export const addTwoNumbers = function (l1: any, l2: any) {
let p1 = l1.head || null;
let p2 = l2.head || null;
const list3 = new ListNode('head');
let p3 = list3;
let step = 0;
while (p1 || p2) {
const sum = (p1?.data || 0) + (p2?.data || 0) + step;
const targetNum = sum % 10; // 当前位的值
p3.next = new ListNode(targetNum);
p1 = p1?.next || null;
p2 = p2?.next || null;
p3 = p3.next;
step = Math.floor(sum / 10); // 下一次的进位数
if (p1 == null && p2 == null && step !== 0) {
p3.next = new ListNode(step);
}
}
return list3.next;
};
/**
* 移除链表元素
*/
export const removeElements = function (head: any, val: any) {
// 方法一 迭代
// let p = head;
// while (p) {
// if (p.next?.data === val) {
// p.next = p.next.next || null;
// } else {
// if (p.next) {
// p = p.next;
// } else {
// p = null;
// }
// }
// }
// if (head?.data === val) {
// head = head.next || null;
// }
// return head;
// 方法二 递归
if (head === null) {
return null;
}
head.next = removeElements(head.next, val);
return head.data === val ? head.next : head;
};
src/modules/page4/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<template>
<div class="container-height box">
<q-btn color="primary" @click="onStart">开始</q-btn>
<q-btn color="primary" @click="onStop">暂停</q-btn>
<div class="content">
<canvas ref="canvasRef" id="myCanvas" :width="700" :height="700"></canvas>
<div
v-if="img.show"
class="img"
:style="{
width: `${img.w}px`,
height: `${img.h}px`,
transform: `translate(${img.x}px, ${img.y}px) rotate(${img.direction}deg)`,
}"
>
123
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'PAGE4',
};
</script>
<script setup lang="ts">
// 有动画
import { onMounted, reactive, ref } from 'vue';
const canvasRef = ref<any>(null);
const state = reactive({
keyPoints: [
{ x: 250, y: 200, direction: '30' },
{ x: 550, y: 200, direction: '30' },
{ x: 250, y: 500, direction: '30' },
{ x: 550, y: 500, direction: '30' },
{ x: 250, y: 200, direction: '30' },
] as any[],
prevX: null as any,
prevY: null as any,
nextX: null as any,
nextY: null as any,
stop: false,
});
const img = reactive({
w: 50,
h: 50,
halfW: 25,
halfH: 25,
x: null as any,
y: null as any,
direction: null as any,
show: false,
});
onMounted(() => {
let data = state.keyPoints;
for (let i = 0; i < data.length; i++) {
let el = data[i];
let el2 = data[i + 1];
if (el2) {
let x1 = el.x;
let y1 = el.y;
let x2 = el2.x;
let y2 = el2.y;
let A = y1 - y2;
let B = x2 - x1;
let angle = Math.atan2(A, B);
let theta = angle * (180 / Math.PI);
el.direction = 0 - theta + 90;
} else {
el.direction = Number(el.direction) || 0;
}
}
// console.log('data=', state.keyPoints);
let ctx = canvasRef.value?.getContext('2d');
if (ctx) {
getCanvas(ctx, state.keyPoints);
}
});
function onStart() {
state.stop = true; // 先停止
let ctx = canvasRef.value?.getContext('2d');
if (ctx) {
setTimeout(() => {
ctx.clearRect(0, 0, 700, 700);
state.stop = false;
getCanvas(ctx, state.keyPoints);
}, 500);
}
}
function onStop() {
state.stop = true;
}
function getCanvas(ctx: any, keyPoints: any[]) {
if (keyPoints.length === 0) {
img.show = false;
return;
}
img.show = true;
if (keyPoints.length === 1) {
// 如果只有1个点
img.x = keyPoints[0].x;
img.y = keyPoints[0].y;
img.direction = keyPoints[0].direction;
return;
}
// 设置线条样式
ctx.strokeStyle = '#ff502f';
ctx.lineWidth = 12;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
// 定义起点和终点的坐标
state.prevX = keyPoints[0].x;
state.prevY = keyPoints[0].y;
// 第一帧执行的时间
let startTime: number;
// 期望动画持续的时间 1s内执行60次【60帧/秒】
const duration = 3000;
// 动画被切分成若干段,每一段所占总进度的比例
const partProportion = 1 / (keyPoints.length - 1);
// 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
let lineIndexCache = 1;
const step = (currentTime: number) => {
if (state.stop) {
console.log('动画已停止');
return;
}
console.log('stop');
// 第一帧绘制时记录下开始的时间
!startTime && (startTime = currentTime);
// 已经过去的时间(ms)
const timeElapsed = currentTime - startTime;
// 动画执行的进度 {0,1}
const progress = Math.min(timeElapsed / duration, 1);
// 描述当前所绘制的是第几段线段
const lineIndex = Math.min(
Math.floor(progress / partProportion) + 1,
keyPoints.length - 1
);
// 当前线段的进度 {0,1}
const partProgress =
(progress - (lineIndex - 1) * partProportion) / partProportion;
// 绘制方法
const draw = () => {
if (state.stop) return;
ctx.beginPath();
ctx.moveTo(state.prevX, state.prevY);
// 当绘制下一段线段前,把上一段末尾缺失的部分补齐
if (lineIndex !== lineIndexCache) {
ctx.lineTo(keyPoints[lineIndex - 1].x, keyPoints[lineIndex - 1].y);
lineIndexCache = lineIndex;
}
state.prevX = state.nextX = ~~(
keyPoints[lineIndex - 1].x +
(keyPoints[lineIndex].x - keyPoints[lineIndex - 1].x) * partProgress
);
state.prevY = state.nextY = ~~(
keyPoints[lineIndex - 1].y +
(keyPoints[lineIndex].y - keyPoints[lineIndex - 1].y) * partProgress
);
img.x = state.nextX - img.halfW;
img.y = state.nextY - img.halfH;
img.direction = keyPoints[lineIndex - 1].direction;
ctx.lineTo(state.nextX, state.nextY);
ctx.stroke();
};
draw();
if (progress < 1) {
requestAnimationFrame(step);
} else {
state.stop = true;
console.log('动画执行完毕');
}
};
requestAnimationFrame(step);
}
</script>
<style lang="scss" scoped>
.box {
display: flex;
justify-content: center;
align-items: center;
.content {
width: 700px;
height: 700px;
position: relative;
#myCanvas {
background-color: rgb(199, 197, 197);
}
.img {
position: absolute;
background-image: url('./imgs/MCS_AGV_o.svg');
background-size: 100% 100%;
top: 0;
left: 0;
}
}
}
</style>
src/modules/page4/imgs/MCS_AGV_o.svg 0 → 100644
View file @ 56d5da3f
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;fill:#FFB448;enable-background:new ;}
.st1{fill:url(#SVGID_1_);}
.st2{fill:#FFB564;}
</style>
<g>
<circle class="st0" cx="35" cy="35" r="35"/>
<circle class="st0" cx="35" cy="35" r="25"/>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="34.7" y1="22.3644" x2="34.7" y2="52.3644" gradientTransform="matrix(1 0 0 -1 0 72)">
<stop offset="0" style="stop-color:#E5600B"/>
<stop offset="1" style="stop-color:#F38E00"/>
</linearGradient>
<path class="st1" d="M47.7,49.6h-26c-1.1,0-2-0.9-2-2v-26c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v26C49.7,48.7,48.8,49.6,47.7,49.6z
"/>
<path class="st2" d="M47.7,50.1h-26c-1.4,0-2.5-1.1-2.5-2.5v-26c0-1.4,1.1-2.5,2.5-2.5h26c1.4,0,2.5,1.1,2.5,2.5v26
C50.2,49,49.1,50.1,47.7,50.1z M21.7,20.1c-0.8,0-1.5,0.7-1.5,1.5v26c0,0.8,0.7,1.5,1.5,1.5h26c0.8,0,1.5-0.7,1.5-1.5v-26
c0-0.8-0.7-1.5-1.5-1.5C47.7,20.1,21.7,20.1,21.7,20.1z"/>
</g>
<g>
<rect x="26.3" y="19.6" width="16.9" height="5.7"/>
<path class="st2" d="M43.6,25.9H25.8v-6.7h17.9L43.6,25.9L43.6,25.9z M26.8,24.9h15.9v-4.7H26.8V24.9z"/>
</g>
</g>
</g>
</svg>
src/modules/page5/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<script lang="ts">
export default {
name: 'PAGE5',
};
</script>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
// element
import TablePage from './element/table/TablePage.vue';
import AntvX6 from './element/x6/AntvX6.vue';
import RichTextEdit from './element/rich-text-edit/RichTextEdit.vue';
import { useMessage } from 'src/common/hooks';
import { noRepeatObjInArr } from 'src/common/utils';
const { info } = useMessage();
const state = reactive({
num: 0,
data: null as any,
text: null,
});
const timer = ref<any>(null);
const timer2 = ref<any>(null);
const loadingState = ref(false);
const chipText = ref(null);
onMounted(() => {
getData();
testIsEmpty();
});
onUnmounted(() => {
//
});
function getData() {
setTimeout(() => {
state.num = 100;
state.data = {
name: '张三',
age: 18,
};
}, 10000);
}
function clikeMe() {
if (state.num && state.data && Object.keys(state.data).length > 0) {
console.log(state);
console.log(timer.value);
} else {
console.log('为空');
setTimeout(() => {
clikeMe();
}, 1000);
}
}
function valueChange() {
debounce(() => {
// do something
chipText.value = state.text;
console.log(state.text);
loadingState.value = true;
setTimeout(() => {
loadingState.value = false;
}, 2000);
}, 2000);
}
function clikeMe2() {
throttle(() => {
// do something
console.log('点击');
info('点击了');
}, 1000);
}
// 防抖
// 触发事件 n 秒后执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
function debounce(func: any, time: number) {
// setTimeout需是全局变量
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
timer.value = setTimeout(() => {
func();
clearTimeout(timer.value);
timer.value = null;
}, time);
}
// 节流
// 连续触发事件但是在 n 秒中只执行一次函数，如果在 n 秒内又触发了事件，不执行函数
function throttle(func: any, time: number) {
// setTimeout需是全局变量
if (timer2.value) {
clearTimeout(timer2.value);
timer2.value = null;
} else {
func();
}
timer2.value = setTimeout(() => {
clearTimeout(timer2.value);
timer2.value = null;
}, time);
}
function testIsEmpty() {
let arrObj = [
{
name: '张三',
age: 18,
sex: '男',
obj: { name: '李四', age: 18 },
arr: [{ test1: 1, test2: 2 }, 20],
rule_list: [
{
id: 1,
key_id: '1-1',
min_fee: { describe: null, setup: null },
catalog_list: [
{
code: 'xscs',
min_fee: {},
},
],
},
{
id: 2,
key_id: '1-1',
min_fee: { describe: null, setup: null },
catalog_list: [
{
code: 'xscs',
min_fee: {},
},
],
},
],
},
{
name: '张三',
age: 18,
sex: '男',
obj: { name: '李四', age: 18 },
arr: [20, { test2: 2, test1: 1 }],
rule_list: [
{
id: 1,
key_id: '1-1',
min_fee: { describe: null, setup: null },
catalog_list: [
{
code: 'xscs',
min_fee: {},
},
],
},
{
catalog_list: [
{
min_fee: {},
code: 'xscs',
},
],
id: 2,
key_id: '1-1',
min_fee: { describe: null, setup: null },
},
],
},
];
let res = noRepeatObjInArr(arrObj);
console.log('结果 =', res);
console.log('原始 =', arrObj);
}
</script>
<template>
<div class="box">
<TablePage />
<AntvX6 />
<RichTextEdit />
<hr />
<div>
<div class="text-h6">防抖与节流</div>
<q-btn label="初始化10s后我才有数据" color="primary" @click="clikeMe" />
<q-chip color="primary" text-color="white">
{{ chipText }}
</q-chip>
<q-input
outlined
v-model="state.text"
label="防抖"
style="width: 300px"
@update:model-value="valueChange"
:loading="loadingState"
/>
<q-btn label="点我执行节流函数" color="primary" @click="clikeMe2" />
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
// border: 1px solid red;
}
</style>
<style lang="scss"></style>
src/modules/page5/element/rich-text-edit/RichTextEdit.vue 0 → 100644
View file @ 56d5da3f
<!--
* System ReceiveBatch page
* @author: Toplinker
* @copyright: ©2009-2022 Toplinker, Inc. All rights reserved
-->
<script setup lang="ts">
import { ref } from 'vue';
import { useMessage } from 'src/common/hooks';
// interface IDetailProps {
// type: string;
// data: any;
// }
// const props = withDefaults(defineProps<IDetailProps>(), {
// type: '',
// data: {},
// });
const { info } = useMessage();
const editor = ref('What you see is <b>what</b> you get.');
function getView() {
console.log('editor >>>>', editor.value);
}
function saveWork() {
info('保存');
console.log('保存 >>>>', editor.value);
}
function uploadIt() {
info('上传文件');
}
</script>
<template>
<div class="my-editor">
<q-btn label="点我查看" @click="getView" />
<q-card flat bordered>
<q-card-section v-html="editor" />
</q-card>
<q-editor
v-model="editor"
:definitions="{
save: {
tip: '保存',
icon: 'save',
label: '保存',
handler: saveWork
},
upload: {
tip: '上传文件',
icon: 'cloud_upload',
label: '上传文件',
handler: uploadIt
}
} as any"
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['upload', 'save'],
]"
min-height="20rem"
/>
</div>
</template>
<style lang="scss" scoped>
.my-editor {
border: 1px solid red;
}
</style>
src/modules/page5/element/table/CellAction.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
// import { reactive } from 'vue';
import { useQuasar } from 'quasar';
import ICON from 'src/config/icons';
import emitter from '../../eventbus';
const props = defineProps<{
params: any;
}>();
const $q = useQuasar();
function delRow() {
const msg = `确定<strong>删除</strong>当前行<span class="text-red text-weight-bold">${props.params.data.name}</span>？`;
$q.dialog({
title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
message: msg,
cancel: true,
persistent: true,
html: true,
}).onOk(() => {
emitter.emit('delRow', props.params);
});
}
</script>
<template>
<div>
<q-btn :icon="ICON.delete" round flat @click="delRow" size="11px" />
</div>
</template>
<style lang="scss" scoped></style>
src/modules/page5/element/table/CellFirstCol.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
// import { reactive } from 'vue';
const props = defineProps<{
params: any;
}>();
</script>
<template>
<div class="ag-grid-firt-col">{{ props.params.value }}</div>
</template>
<style lang="scss">
.ag-cell-value {
height: 40px;
}
.ag-grid-firt-col {
height: 100%;
// background-color: #f8f8f8;
// border-right: 1px solid;
// border-color: var(--ag-border-color);
font-size: 13px;
font-weight: 700;
color: var(--ag-header-foreground-color);
}
</style>
src/modules/page5/element/table/CustomHeader.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import emitter from '../../eventbus';
import ICONS from 'src/config/icons';
const props = defineProps<{
params: any;
}>();
const $q = useQuasar();
const prompt = ref(false);
const msg = ref(null);
function delCol() {
const msg = `确定<strong>删除</strong>当前列<span class="text-red text-weight-bold">${props.params.displayName}</span>？`;
$q.dialog({
title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
message: msg,
cancel: true,
persistent: true,
html: true,
}).onOk(() => {
emitter.emit('delCol', props.params);
});
}
function onDblclick() {
const data = props.params.column;
if (data.instanceId === 0 || data.colId === 'del') return;
msg.value = props.params.displayName;
prompt.value = true;
}
function oncancel() {
onreset();
}
function onok() {
const params = {
data: props.params,
value: msg.value,
};
emitter.emit('upDataHeader', params);
onreset();
}
function onreset() {
prompt.value = false;
msg.value = null;
}
</script>
<template>
<div class="ag-grid-head-cell">
<q-btn
flat
round
:icon="ICONS.delete"
size="11px"
v-if="
props.params.column.instanceId !== 0 &&
props.params.column.colId !== 'del'
"
@click="delCol"
/>
<div @dblclick="onDblclick">{{ props.params.displayName }}</div>
</div>
<q-dialog v-model="prompt" persistent>
<q-card style="min-width: 350px">
<q-card-section class="q-mt-lg">
<q-input dense v-model="msg" autofocus @keyup.enter="onok" />
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn label="取消" flat @click="oncancel" size="11px" />
<q-btn
label="确定"
unelevated
color="primary"
@click="onok"
size="11px"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style lang="scss">
.ag-grid-head-cell {
width: 100%;
height: 100%;
// border: 1px solid red;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
src/modules/page5/element/table/TablePage.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { reactive, onMounted, ref, onUnmounted } from 'vue';
// utils
import { uniqueId, findIndex } from 'src/common/utils/index';
// element
import CellAction from './CellAction.vue';
import CellFirstCol from './CellFirstCol.vue';
import CustomHeader from './CustomHeader.vue';
// emitter
import emitter from '../../eventbus';
// ag-grid
import { AgGridVue } from 'ag-grid-vue3'; // the AG Grid Vue Component
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
const defaultColDef = {
// sortable: true,
flex: 1,
editable: true,
resizable: true,
headerComponent: CustomHeader,
};
const sexObj = {
man: '男',
woman: '女',
} as any;
const gridApi = ref<any>(null);
const rowData = reactive({
value: [
{ age: 18, name: '张三', sex: 'man', del: null },
{ age: 22, name: '李四', sex: 'man', del: null },
{ age: 7, name: '王二小', sex: 'woman', del: null },
{ age: 48, name: '张东升', sex: 'man', del: null },
],
});
const columnDefs = reactive({
value: [
{
headerName: '姓名',
field: 'name',
checkboxSelection: true, // 设置数据复选框
headerCheckboxSelection: true, // 表头设置复选框 全选/全取消
cellRenderer: CellFirstCol,
},
{ headerName: '年龄', field: 'age' },
{
headerName: '性别',
field: 'sex',
cellEditor: 'agSelectCellEditor', // 编辑时显示下拉列表
cellEditorParams: {
values: Object.keys(sexObj),
},
valueFormatter: (params: any) => {
return sexObj[params.value];
},
},
{
headerName: '操作',
field: 'del',
width: 100,
pinned: 'right',
editable: false,
cellRenderer: CellAction,
},
],
});
const gridOptions = reactive({
animateRows: true,
rowSelection: 'multiple', // multiple 多选 single 单选
defaultColDef,
columnDefs: columnDefs.value,
rowData: rowData.value,
onGridReady: (params: any) => {
gridApi.value = params.api;
},
// onCellClicked: (event: any) => {
// console.log('单击单元格', event);
// },
});
onMounted(() => {
onEmitterListener();
});
onUnmounted(() => {
emitter.all.clear();
});
// 事件监听
function onEmitterListener() {
emitter.on('delRow', (data: any) => {
delRow(data);
});
emitter.on('delCol', (data: any) => {
delCol(data);
});
emitter.on('upDataHeader', (data: any) => {
upDataHeader(data);
});
}
// 取消选择行
function deselectRows() {
gridApi.value.deselectAll();
}
// 获取选择行
function getSelectedRows() {
let res = gridApi.value.getSelectedRows();
console.log('获取选择行 ==', res);
}
// 添加行
function addRow() {
let columnKeys = columnDefs.value.map((item: any) => {
return item.field;
});
let obj = {} as any;
columnKeys.map((item: any) => {
obj[item] = null;
});
rowData.value.push(obj);
gridApi.value.setRowData(rowData.value);
}
// 删除行
function delRow(data: any) {
rowData.value.splice(data.rowIndex, 1);
gridApi.value.setRowData(rowData.value);
}
// 添加列
function addCol() {
let uniId = uniqueId('row_');
// 修改行
rowData.value.map((item: any) => {
item[uniId] = null;
});
gridApi.value.setRowData(rowData.value);
// 修改列
let obj = {
headerName: uniId,
field: uniId,
} as any;
let index = columnDefs.value.length - 1;
columnDefs.value.splice(index, 0, obj);
gridApi.value.setColumnDefs(columnDefs.value);
// 自适应
gridApi.value.sizeColumnsToFit();
}
// 删除列
function delCol(data: any) {
const key = data.column.colId;
const index = findIndex(columnDefs.value, ['field', key]);
// 修改列
columnDefs.value.splice(index, 1);
gridApi.value.setColumnDefs(columnDefs.value);
// 修改行
rowData.value.map((item: any) => {
delete item[key];
});
gridApi.value.setRowData(rowData.value);
// 自适应
gridApi.value.sizeColumnsToFit();
}
// 修改列标题
function upDataHeader(data: any) {
const index = findIndex(columnDefs.value, ['field', data.data.column.colId]);
columnDefs.value[index].headerName = data.value;
gridApi.value.setColumnDefs(columnDefs.value);
gridApi.value.sizeColumnsToFit();
}
</script>
<template>
<div>
<div class="q-gutter-sm">
<q-btn label="取消选择行" @click="deselectRows" color="primary" />
<q-btn label="获取选择的行" @click="getSelectedRows" color="primary" />
<q-btn label="添加行" @click="addRow" color="deep-orange-4" />
<q-btn label="添加列" @click="addCol" color="deep-orange-4" />
</div>
<div class="grid">
<ag-grid-vue
class="ag-theme-alpine"
style="height: 400px"
:grid-options="gridOptions"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped>
.grid {
width: 700px;
}
</style>
<style lang="scss">
.ag-theme-alpine {
--ag-alpine-active-color: #78c0a8;
--ag-selected-row-background-color: rgba(120, 192, 168, 0.3);
--ag-row-hover-color: rgba(120, 192, 168, 0.1);
--ag-input-focus-border-color: rgba(120, 192, 168, 0.1);
}
</style>
src/modules/page5/element/x6/AntvX6.vue 0 → 100644
View file @ 56d5da3f
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
// type
import { X6NodesType, X6EdgesType } from '../../type';
// antv/x6
import { Graph } from '@antv/x6';
const data = reactive({
value: {
// 节点
nodes: [
{
id: 'node1', // String，可选，节点的唯一标识
shape: 'rect', // 默认值 rect 矩形
x: 0, // Number，必选，节点位置的 x 值
y: 0, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: '节点1', // String，节点标签
},
{
id: 'node2', // String，节点的唯一标识
x: 160, // Number，必选，节点位置的 x 值
y: 180, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: '节点2', // String，节点标签
},
{
id: 'node3',
x: 200,
y: 200,
width: 80,
height: 40,
label: '节点3',
},
] as X6NodesType[],
// 边
edges: [
{
source: 'node1', // String，必须，起始节点 id
target: 'node2', // String，必须，目标节点 id
},
{
source: 'node2',
target: 'node3',
},
] as X6EdgesType[],
},
});
const actDom = reactive({
show: false,
x: 0,
y: 0,
});
const currentNode = reactive({
value: {} as any,
});
const state = reactive({
graph: null as any,
});
onMounted(() => {
initGraph();
});
function initGraph() {
let dom = document.getElementById('x6-container') as HTMLElement;
const graph = new Graph({
container: dom,
background: {
color: '#fffbe6', // 设置画布背景颜色
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
});
graph.fromJSON(data.value);
state.graph = graph;
cellClick(graph);
nodeContextmenu(graph);
blankClick(graph);
}
function cellClick(graph: any) {
graph.on('cell:click', () => {
resetActDom();
});
}
// 右键点击节点
function nodeContextmenu(graph: any) {
graph.on('node:contextmenu', ({ e, x, y, cell, view }: any) => {
console.log('e >>>>', e);
console.log('x >>>>', x);
console.log('y >>>>', y);
console.log('cell >>>>', cell);
console.log('view >>>>', view);
currentNode.value.e = e;
currentNode.value.x = x;
currentNode.value.y = y;
currentNode.value.cell = cell;
currentNode.value.view = view;
actDom.x = x;
actDom.y = y;
actDom.show = true;
});
}
// 点击画布空白区域
function blankClick(graph: any) {
graph.on('blank:click', () => {
resetActDom();
});
}
// 添加子节点
function addChildNode() {
console.log('添加子节点 >>>>', currentNode.value);
console.log('data >>>>', data);
resetActDom();
// state.graph.fromJSON(state.graph.toJSON());
// data.value.nodes.push({
// id: 'node4',
// x: 400,
// y: 400,
// width: 80,
// height: 40,
// label: '节点4',
// });
// data.value.edges.push({
// source: 'node3',
// target: 'node4',
// });
console.log('序列化 >>>>', state.graph.toJSON());
// state.graph.fromJSON(data.value);
}
// 删除节点
function delNode() {
console.log('删除节点 >>>>', currentNode.value);
resetActDom();
}
function resetActDom() {
actDom.show = false;
actDom.x = 0;
actDom.y = 0;
currentNode.value = {};
}
</script>
<template>
<div class="x6-box">
<div id="x6-container"></div>
<div
v-if="actDom.show"
class="action-box shadow-13"
:style="{ transform: `translate(${actDom.x}px, ${actDom.y}px)` }"
>
<q-list dense separator>
<q-item clickable @click="addChildNode">
<q-item-section> 添加子节点 </q-item-section>
</q-item>
<q-item clickable>
<q-item-section @click="delNode"> 删除节点 </q-item-section>
</q-item>
</q-list>
</div>
</div>
</template>
<style lang="scss" scoped>
.x6-box {
position: relative;
}
#x6-container {
width: 800px;
height: 400px;
}
.action-box {
position: absolute;
top: 0;
left: 0;
min-width: 100px;
min-height: 64px;
border: 1px solid rgba(8, 8, 8, 0.13);
background-color: #fff;
border-radius: 5px;
}
</style>
src/modules/page5/eventbus.ts 0 → 100644
View file @ 56d5da3f
import mitt, { Emitter } from 'mitt';
type Events = {
delRow: any;
delCol: any;
upDataHeader: any;
};
const emitter: Emitter<Events> = mitt<Events>();
export default emitter;
src/modules/page5/type.ts 0 → 100644
View file @ 56d5da3f
export interface X6NodesType {
id?: string;
x: number;
y: number;
width?: number;
height?: number;
label: string;
shape?: string;
[proppName: string]: any;
}
export interface X6EdgesType {
source: string;
target: string;
[proppName: string]: any;
}
src/modules/page6/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<!--
* 一些js方法
-->
<script lang="ts">
export default {
name: 'PAGE6',
};
</script>
<script setup lang="ts">
// import ArrayOutOfOrder from './element/ArrayOutOfOrder.vue';
// import CanvasStaticRoute from './element/CanvasStaticRoute.vue';
// import MorphBox from './element/MorphBox.vue';
import CarouselWarp from './element/CarouselWarp.vue';
</script>
<template>
<div class="page6 container-height">
<!-- <array-out-of-order /> -->
<!-- <canvas-static-route /> -->
<!-- <morph-box /> -->
<carousel-warp />
</div>
</template>
<style lang="scss" scoped>
.page6 {
padding: $padding-md;
}
</style>
src/modules/page6/config.ts 0 → 100644
View file @ 56d5da3f
// 图表轮播图测试数据
export const WarpTestData = [
{
id: 1,
label: '1号',
url: require('./element/imgs/carousel-1.jpg'),
option: {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
},
},
{
id: 2,
label: '2号',
url: require('./element/imgs/carousel-2.jpg'),
option: null,
},
{
id: 3,
label: '3号',
url: require('./element/imgs/carousel-3.jpg'),
option: null,
},
{
id: 4,
label: '4号',
url: require('./element/imgs/carousel-4.jpg'),
option: null,
},
{
id: 5,
label: '5号',
url: require('./element/imgs/carousel-5.jpg'),
option: null,
},
{
id: 6,
label: '6号',
url: require('./element/imgs/carousel-2.jpg'),
option: null,
},
];
// 图表轮播图测试数据2
export const WarpTestData2 = [
{
id: 1,
label: '1号-变了1',
url: require('./element/imgs/carousel-1.jpg'),
option: {
title: {
text: '图表轮播图测试数据2',
subtext: '666',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1000, name: 'Search Engine' },
{ value: 1000, name: 'Direct' },
{ value: 1000, name: 'Email' },
{ value: 1000, name: 'Union Ads' },
{ value: 1000, name: 'Video Ads' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
},
},
{
id: 2,
label: '2号-变了1',
url: require('./element/imgs/carousel-2.jpg'),
option: null,
},
{
id: 3,
label: '3号-变了1',
url: require('./element/imgs/carousel-3.jpg'),
option: null,
},
{
id: 4,
label: '4号-变了1',
url: require('./element/imgs/carousel-4.jpg'),
option: null,
},
// {
// id: 5,
// label: '5号-变了1',
// url: require('./element/imgs/carousel-5.jpg'),
// option: null,
// },
// {
// id: 6,
// label: '6号-变了1',
// url: require('./element/imgs/carousel-2.jpg'),
// option: null,
// },
];
src/modules/page6/element/ArrayOutOfOrder.vue 0 → 100644
View file @ 56d5da3f
<!--
* 随机数相关
-->
<script setup lang="ts">
import { onMounted, ref, reactive, nextTick, onBeforeUnmount } from 'vue';
import { getRandomInt } from 'src/common/utils';
// echarts
import * as echarts from 'echarts/core';
import {
GridComponent,
GridComponentOption,
LegendComponent,
LegendComponentOption,
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<
GridComponentOption | LegendComponentOption | BarSeriesOption
>;
const min = ref(10);
const max = ref(21);
const nowVal = ref(0);
const timer = ref<number | null>(null);
const refCharts = ref<HTMLElement | null>(null);
const state = reactive({
randomMap: new Map(),
chartDom: null as HTMLElement | null,
myChart: null as any,
option: null as EChartsOption | null,
yAxisData: [] as string[],
seriesData: [] as number[],
divisionData: {
int: 0,
yu: 0,
},
});
const randomList = reactive({
value: [{ label: 0, value: 0, times: 0, divisionData: { int: 0, yu: 0 } }],
});
onMounted(() => {
initDom();
getOption();
startDraw();
});
onBeforeUnmount(() => {
console.log('onBeforeUnmount');
});
function onGetRandomInt() {
const val = getRandomInt(min.value, max.value);
nowVal.value = val;
const getDivision = division(val, 5);
state.divisionData.int = getDivision.int;
state.divisionData.yu = getDivision.yu;
if (state.randomMap.has(val)) {
let currentNum = state.randomMap.get(val);
state.randomMap.set(val, currentNum + 1);
} else {
state.randomMap.set(val, 1);
}
let sum = 0;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
for (const [key, value] of state.randomMap) {
sum += value;
}
let arr = [] as any[];
for (const [key, value] of state.randomMap) {
let item = {} as any;
const itemGetDivision = division(value, 5);
item.label = key;
item.times = value; // 次数
item.value = Number(((value / sum) * 100).toFixed(2)); // 百分比值
item.divisionData = {};
item.divisionData.int = itemGetDivision.int;
item.divisionData.yu = itemGetDivision.yu;
arr.push(item);
}
arr.sort((a: any, b: any) => {
return Number(b.times) - Number(a.times);
});
let yAxisDataArr = [] as string[];
let seriesData = [] as number[];
arr.map((item: any) => {
yAxisDataArr.push(String(item.label));
seriesData.push(item.times);
});
state.yAxisData = yAxisDataArr;
state.seriesData = seriesData;
nextTick(() => {
getOption();
startDraw();
randomList.value = arr;
});
if (timer.value) {
onClearTimeout();
}
timer.value = window.setTimeout(() => {
onGetRandomInt();
}, 2000);
}
function onReset() {
onClearTimeout();
randomList.value = [];
state.randomMap = new Map();
state.yAxisData = [];
state.seriesData = [];
nowVal.value = 0;
state.divisionData.int = 0;
state.divisionData.yu = 0;
getOption();
startDraw();
}
function onClearTimeout() {
if (timer.value) {
window.clearTimeout(timer.value);
timer.value = null;
}
}
function initDom() {
state.chartDom = refCharts.value as HTMLElement;
state.myChart = echarts.init(state.chartDom);
}
function getOption() {
state.option = {
grid: {
top: 50,
bottom: 50,
left: 50,
right: 50,
},
xAxis: {
max: 'dataMax',
},
yAxis: {
type: 'category',
data: state.yAxisData,
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
// max: 2, // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
type: 'bar',
data: state.seriesData,
label: {
show: true,
position: 'right',
formatter: (val) => {
return val.value + '次';
},
valueAnimation: true,
},
itemStyle: {
color: '#78c0a8',
},
barWidth: 30,
},
],
legend: {
show: false,
},
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
};
}
function startDraw() {
state.option && state.myChart.setOption(state.option);
}
// 取整 取余
function division(n: number, m: number) {
const yu = n % m;
const int = parseInt(String(n / m));
return {
yu,
int,
};
}
</script>
<template>
<div class="sty-array-out-of-order">
<div class="btns">
<q-btn
:label="`获取随机整数：${min}~${max}`"
color="primary"
@click="onGetRandomInt"
></q-btn>
<q-btn label="重置" color="primary" @click="onReset"></q-btn>
<q-btn label="暂停" color="primary" @click="onClearTimeout"></q-btn>
<q-badge outline color="primary"> {{ nowVal }} </q-badge>
</div>
<div class="content">
<div class="sty-slider">
<div class="slider-item" v-for="i in randomList.value" :key="i.label">
<div class="sty-chip">
<q-chip square color="primary" text-color="white">
{{ i.label }}
</q-chip>
</div>
<q-linear-progress
size="25px"
:value="i.value / 100"
rounded
color="primary"
>
<div class="absolute-full flex flex-center">
<q-badge
color="white"
text-color="primary"
:label="i.value + '%'"
/>
</div>
</q-linear-progress>
</div>
<q-separator />
<div class="steping">
<div class="step-item" v-for="i in randomList.value" :key="i.label">
<div>
<q-chip square color="primary" text-color="white">
{{ i.label }}
</q-chip>
</div>
<div class="zheng-item">
<div
class="zheng-box step5"
v-for="m in i.divisionData.int"
:key="m"
></div>
<div class="zheng-box" :class="`step${i.divisionData.yu}`"></div>
</div>
</div>
</div>
<!-- <div class="text">
<div
class="zheng-box step5"
v-for="i in state.divisionData.int"
:key="i"
></div>
<div class="zheng-box" :class="`step${state.divisionData.yu}`"></div>
</div> -->
</div>
<div class="sty-chart"><div ref="refCharts" class="mychart"></div></div>
</div>
</div>
</template>
<style lang="scss" scoped>
.sty-array-out-of-order {
.btns {
> button {
margin-right: $padding-md;
}
}
.content {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.sty-slider {
margin-top: $padding-xl;
}
.slider-item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: $padding-lg;
.sty-chip {
margin-right: $padding-md;
}
}
.sty-chart {
.mychart {
width: 100%;
height: 650px;
}
}
}
.steping {
// border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.step-item {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.zheng-item {
.zheng-box {
width: 25px;
height: 25px;
position: relative;
background-size: 100% 100%;
margin-bottom: 10px;
}
.step1 {
background-image: url('./icons/zheng-1.svg');
}
.step2 {
background-image: url('./icons/zheng-2.svg');
}
.step3 {
background-image: url('./icons/zheng-3.svg');
}
.step4 {
background-image: url('./icons/zheng-4.svg');
}
.step5 {
background-image: url('./icons/zheng-5.svg');
}
}
</style>
src/modules/page6/element/CanvasStaticRoute.vue 0 → 100644
View file @ 56d5da3f
<!--
* canvas静态路径
-->
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import Com from 'src/components';
const state = reactive({
data: [
{
data: [
{ x: 10, y: 10 },
{ x: 200, y: 150 },
{ x: 400, y: 150 },
{ x: 400, y: 400 },
{ x: 650, y: 400 },
{ x: 650, y: 500 },
{ x: 300, y: 500 },
{ x: 300, y: 250 },
{ x: 50, y: 250 },
{ x: 50, y: 100 },
{ x: 10, y: 100 },
],
style: {
lineWidth: 10,
strokeStyle: 'pink',
lineJoin: 'round',
lineCap: 'round',
step: 20,
},
},
] as any,
width: 700,
height: 700,
bgWidth: 500,
bgHeight: 500,
});
onMounted(() => {
//
});
function onChangeData() {
state.data = [
{
data: [
{ x: 650, y: 400 },
{ x: 650, y: 500 },
{ x: 300, y: 500 },
{ x: 300, y: 250 },
],
},
{
data: [
{ x: 100, y: 300 },
{ x: 300, y: 700 },
],
style: {
lineWidth: 20,
strokeStyle: 'pink',
step: 30,
},
},
];
}
function onChangeSize() {
state.width = 600;
// state.height = 600;
}
function onChangeBgSize() {
state.bgWidth = 1000;
state.bgHeight = 800;
}
</script>
<template>
<div class="fit">
<q-btn label="改变数据" color="primary" @click="onChangeData" />
<q-btn label="改变box大小" color="primary" @click="onChangeSize" />
<q-btn label="改变背景图片大小" color="primary" @click="onChangeBgSize" />
<div class="canvas-box">
<Com.CanvasStaticRoute
:width="state.width"
:height="state.height"
:border="false"
:data="state.data"
center
drag
zoom
/>
<!--
:bg-url="require('./imgs/bg.png')"
:bg-width="state.bgWidth"
:bg-height="state.bgHeight"
-->
</div>
</div>
</template>
<style lang="scss" scoped>
.canvas-box {
border: 1px solid red;
width: fit-content;
}
</style>
src/modules/page6/element/CarouselWarp.vue 0 → 100644
View file @ 56d5da3f
<!--
* 轮播图
-->
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import Com from 'src/components';
import { WarpTestData, WarpTestData2 } from '../config';
const state = reactive({
list: [] as any,
times: 5000,
});
onMounted(() => {
setTimeout(() => {
initData();
}, 3000);
});
onBeforeUnmount(() => {
//
});
function initData() {
state.list = WarpTestData;
}
function onDataChange2() {
state.list = WarpTestData2;
}
function onSetToEnpty() {
state.list = [];
}
function onChangeTimers() {
state.times = 1000;
}
</script>
<template>
<div class="fit">
<div class="my-warp-box">
<Com.CarouselWarp
navigation
item-key="id"
:list="state.list"
:times="state.times"
>
</Com.CarouselWarp>
</div>
<div class="btns">
<q-btn
label="图表轮播图测试数据2"
@click="onDataChange2"
color="primary"
/>
<q-btn label="将数据置为空" @click="onSetToEnpty" color="primary" />
<q-btn label="改变轮播时间" @click="onChangeTimers" color="orange" />
</div>
</div>
</template>
<style lang="scss" scoped>
.my-warp-box {
width: 500px;
height: 300px;
}
.btns {
padding-top: $padding-md;
display: flex;
flex-wrap: wrap;
> button {
margin-right: $padding-sm;
margin-bottom: $padding-md;
}
}
</style>
src/modules/page6/element/MorphBox.vue 0 → 100644
View file @ 56d5da3f
<!--
* 变形 动画
* https://quasar.dev/vue-directives/morph#morph-api
-->
<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive } from 'vue';
// import { useMessage } from 'src/common/hooks';
// const { info } = useMessage();
const step = 110;
const padding = 10;
const state = reactive({
top: 10,
left: 10,
});
onMounted(() => {
document.addEventListener('keydown', onKeydown);
});
function onKeydown(e: any) {
// 方向键--上
if (e.keyCode == 38) {
if (state.top <= 10) {
state.top = 10;
} else {
state.top -= padding + step;
}
}
// 方向键--下
if (e.keyCode == 40) {
if (state.top >= 250) {
state.top = 250;
} else {
state.top += padding + step;
}
}
// 方向键--左
if (e.keyCode == 37) {
if (state.left <= 10) {
state.left = 10;
} else {
state.left -= padding + step;
}
}
// 方向键--右
if (e.keyCode == 39) {
if (state.left >= 250) {
state.left = 250;
} else {
state.left += padding + step;
}
}
}
onBeforeUnmount(() => {
document.removeEventListener('keydown', onKeydown);
});
</script>
<template>
<div class="fit relative-position">
<div class="btns">
<q-btn color="primary" label="变形" />
</div>
<div class="relative-position" style="height: 400px">
<div class="bg-box">
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
<div class="bg-item"></div>
</div>
<div
class="item"
:style="{ transform: `translate(${state.left}px, ${state.top}px)` }"
>
<span>3</span>
</div>
</div>
<div class="example2">
<div class="box">
<div class="balance-box"></div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.btns {
margin-bottom: $padding-md;
}
.bg-box {
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
width: 370px;
padding: 10px;
background-color: #a39391;
.bg-item {
width: 110px;
height: 110px;
background-color: #ecd6c7;
border-radius: 10px;
}
}
.item {
position: absolute;
top: 0;
left: 0;
transition: all 0.35s;
width: 110px;
height: 110px;
background-color: #e79686;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 40px;
}
.example2 {
.box {
width: 100%;
height: 100px;
position: relative;
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
}
.balance-box {
height: 24px;
width: 100%;
border-radius: 24px;
background-color: #d3e397;
transition: all 0.5s;
animation-name: balance-box;
animation-duration: 4s;
animation-iteration-count: infinite; // 使动画永远持续下去
animation-timing-function: cubic-bezier(0.26, 0.68, 0.26, 0.75);
}
}
@keyframes balance-box {
0% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
100% {
transform: rotate(-5deg);
}
}
</style>
src/modules/page6/element/icons/zheng-1.svg 0 → 100644
View file @ 56d5da3f
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="602" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="0" x2="600" y1="0" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
</g>
</svg>
\ No newline at end of file
src/modules/page6/element/icons/zheng-2.svg 0 → 100644
View file @ 56d5da3f
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="602" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="606" x2="324" y1="6" x1="324" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="0" x2="600" y1="0" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
</g>
</svg>
\ No newline at end of file
src/modules/page6/element/icons/zheng-3.svg 0 → 100644
View file @ 56d5da3f
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="602" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="606" x2="324" y1="6" x1="324" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="0" x2="600" y1="0" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
<line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="248.453125" x2="614.51678" y1="248.453125" x1="337.5" fill-opacity="null" stroke-opacity="null" stroke-width="30" fill="none"/>
</g>
</svg>
\ No newline at end of file
src/modules/page6/element/icons/zheng-4.svg 0 → 100644
View file @ 56d5da3f
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="602" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="606" x2="324" y1="6" x1="324" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="0" x2="600" y1="0" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
<line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="248.453125" x2="614.51678" y1="248.453125" x1="337.5" fill-opacity="null" stroke-opacity="null" stroke-width="30" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="700.725523" x2="146.5" y1="311.453125" x1="146.5" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
</g>
</svg>
\ No newline at end of file
src/modules/page6/element/icons/zheng-5.svg 0 → 100644
View file @ 56d5da3f
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="602" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="606" x2="324" y1="6" x1="324" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="0" x2="600" y1="0" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
<line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="248.453125" x2="614.51678" y1="248.453125" x1="337.5" fill-opacity="null" stroke-opacity="null" stroke-width="30" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="700.725523" x2="146.5" y1="311.453125" x1="146.5" fill-opacity="null" stroke-opacity="null" stroke-width="30" stroke="#000" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_7" y2="600" x2="600" y1="600" x1="0" fill-opacity="null" stroke-opacity="null" stroke-width="60" stroke="#000" fill="none"/>
</g>
</svg>
\ No newline at end of file
src/pages/ErrorNotFound.vue 0 → 100644
View file @ 56d5da3f
<template>
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
<div>
<div style="font-size: 30vh">
404
</div>
<div class="text-h2" style="opacity:.4">
Oops. Nothing here...
</div>
<q-btn
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ErrorNotFound'
});
</script>
src/pages/IndexPage.vue 0 → 100644
View file @ 56d5da3f
<template>
<q-page class="container-height">
<q-scroll-area class="fit">
<router-view v-slot="{ Component, route }">
<keep-alive :include="keepAliveList">
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</q-scroll-area>
</q-page>
</template>
<script lang="ts">
// v-if="route.meta && route.meta.keepalive"
// <component
// v-if="!(route.meta && route.meta.keepalive)"
// :is="Component"
// />
import { computed } from 'vue';
import { usePageStore } from 'src/common/hooks';
export default {
name: 'LaoutIndexPage',
setup() {
const pageStore = usePageStore();
const keepAliveList = computed(() => {
return pageStore.allPageKeys;
});
return {
keepAliveList,
};
},
};
</script>
<style scoped lang="scss"></style>
src/quasar.d.ts 0 → 100644
View file @ 56d5da3f
/* eslint-disable */
// Forces TS to apply `@quasar/app-webpack` augmentations of `quasar` package
// Removing this would break `quasar/wrappers` imports as those typings are declared
// into `@quasar/app-webpack`
// As a side effect, since `@quasar/app-webpack` reference `quasar` to augment it,
// this declaration also apply `quasar` own
// augmentations (eg. adds `$q` into Vue component context)
/// <reference types="@quasar/app-webpack" />
src/router/index.ts 0 → 100644
View file @ 56d5da3f
import { route } from 'quasar/wrappers';
import {
createMemoryHistory,
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router';
import routes from './routes';
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(
process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
),
});
return Router;
});
src/router/routes.ts 0 → 100644
View file @ 56d5da3f
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'MainLayout',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
name: 'LaoutIndexPage',
component: () => import('pages/IndexPage.vue'),
redirect: '/page6',
children: [
{
path: 'page1',
name: 'PAGE1',
component: () => import('../modules/page1/IndexPage.vue'),
meta: {
title: '页面1',
permission: ['*'],
keepalive: true,
},
},
{
path: 'page2',
name: 'PAGE2',
component: () => import('../modules/page2/IndexPage.vue'),
meta: {
title: '页面2',
permission: ['*'],
keepalive: true,
},
},
{
path: 'page3',
name: 'PAGE3',
component: () => import('../modules/page3/IndexPage.vue'),
meta: {
title: '页面3',
permission: ['*'],
keepalive: true,
},
},
{
path: 'page4',
name: 'PAGE4',
component: () => import('../modules/page4/IndexPage.vue'),
meta: {
title: '页面4',
permission: ['*'],
keepalive: true,
},
},
{
path: 'page5',
name: 'PAGE5',
component: () => import('../modules/page5/IndexPage.vue'),
meta: {
title: '页面5',
permission: ['*'],
keepalive: true,
},
},
{
path: 'page6',
name: 'PAGE6',
component: () => import('../modules/page6/IndexPage.vue'),
meta: {
title: '页面6',
permission: ['*'],
keepalive: true,
},
},
],
},
],
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue'),
},
];
export default routes;
src/shims-vue.d.ts 0 → 100644
View file @ 56d5da3f
/* eslint-disable */
// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
src/store/user.ts 0 → 100644
View file @ 56d5da3f
import { defineStore } from 'pinia';
export const userStore = defineStore('user', {
state: () => {
return {
count: 1,
arr: <any>[],
};
},
getters: {
myCount(state) {
console.log('调用了myCount');
return state.count + 1;
},
},
actions: {
changeState(num: number) {
this.count += num;
this.arr.push(num);
},
},
});
tsconfig.json 0 → 100644
View file @ 56d5da3f
{
"extends": "@quasar/app-webpack/tsconfig-preset",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
yarn.lock 0 → 100644
View file @ 56d5da3f
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment