zengchenxi
10 months ago
parent
333007e961
commit
9519c51b5f
@ -0,0 +1,198 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true,
|
||||
},
|
||||
extends: ['plugin:vue/recommended', 'eslint:recommended'],
|
||||
|
||||
// add your custom rules here
|
||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
"vue/max-attributes-per-line": [2, {
|
||||
"singleline": 10,
|
||||
"multiline": {
|
||||
"max": 1,
|
||||
"allowFirstLine": false
|
||||
}
|
||||
}],
|
||||
"vue/singleline-html-element-content-newline": "off",
|
||||
"vue/multiline-html-element-content-newline":"off",
|
||||
"vue/name-property-casing": ["error", "PascalCase"],
|
||||
"vue/no-v-html": "off",
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [2, '1tbs', {
|
||||
'allowSingleLine': true
|
||||
}],
|
||||
'camelcase': [0, {
|
||||
'properties': 'always'
|
||||
}],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
'eqeqeq': ["error", "always", {"null": "ignore"}],
|
||||
'generator-star-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'handle-callback-err': [2, '^(err|error)$'],
|
||||
'indent': [2, 2, {
|
||||
'SwitchCase': 1
|
||||
}],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [2, {
|
||||
'beforeColon': false,
|
||||
'afterColon': true
|
||||
}],
|
||||
'keyword-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'new-cap': [2, {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-console': 'off',
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 0,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [2, {
|
||||
'allowLoop': false,
|
||||
'allowSwitch': false
|
||||
}],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [2, {
|
||||
'max': 1
|
||||
}],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [2, {
|
||||
'defaultAssignment': false
|
||||
}],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [2, {
|
||||
'vars': 'all',
|
||||
'args': 'none'
|
||||
}],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [2, {
|
||||
'initialized': 'never'
|
||||
}],
|
||||
'operator-linebreak': [2, 'after', {
|
||||
'overrides': {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}],
|
||||
'padded-blocks': [2, 'never'],
|
||||
'quotes': [2, 'single', {
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}],
|
||||
'semi': [2, 'never'],
|
||||
'semi-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [2, {
|
||||
'words': true,
|
||||
'nonwords': false
|
||||
}],
|
||||
'spaced-comment': [2, 'always', {
|
||||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
'yoda': [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "big-screen-vue-datav",
|
||||
"version": "1.5.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g2": "^5.1.10",
|
||||
"@jiaminghi/data-view": "^2.7.3",
|
||||
"@types/echarts": "^4.4.3",
|
||||
"axios": "^0.27.2",
|
||||
"core-js": "^3.6.4",
|
||||
"echarts": "^5.3.3",
|
||||
"element-ui": "^2.15.9",
|
||||
"vue": "^2.6.11",
|
||||
"vue-awesome": "^4.0.2",
|
||||
"vue-router": "^3.1.5",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^5.0.8",
|
||||
"@vue/cli-plugin-eslint": "^5.0.8",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-vue": "^6.1.2",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #020308;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 451 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 412 B |
|
After Width: | Height: | Size: 297 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 983 B |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 477 B |
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 698 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 381 B |
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 167 B |
|
After Width: | Height: | Size: 444 B |
|
After Width: | Height: | Size: 429 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 450 B |
|
After Width: | Height: | Size: 429 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 607 B |
|
After Width: | Height: | Size: 461 B |
|
After Width: | Height: | Size: 433 B |
|
After Width: | Height: | Size: 490 B |
|
After Width: | Height: | Size: 607 B |
|
After Width: | Height: | Size: 429 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 167 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 162 B |
|
After Width: | Height: | Size: 160 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 201 B |
|
After Width: | Height: | Size: 216 B |
|
After Width: | Height: | Size: 181 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 861 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,98 @@
|
||||
// 颜色
|
||||
$colors: (
|
||||
"primary": #1A5CD7,
|
||||
"info-1": #4394e4,
|
||||
"info": #4b67af,
|
||||
"white": #ffffff,
|
||||
"light": #f9f9f9,
|
||||
"grey-1": #999999,
|
||||
"grey": #666666,
|
||||
"dark-1": #5f5f5f,
|
||||
"dark": #222222,
|
||||
"black-1": #171823,
|
||||
"black": #000000,
|
||||
"icon": #5cd9e8
|
||||
);
|
||||
|
||||
// 字体大小
|
||||
$base-font-size: 0.2rem;
|
||||
$font-sizes: (
|
||||
xxs: 0.1,
|
||||
//8px
|
||||
xs: 0.125,
|
||||
//10px
|
||||
sm: 0.2875,
|
||||
//12px
|
||||
md: 0.1625,
|
||||
//13px
|
||||
lg: 0.175,
|
||||
//14px
|
||||
xl: 0.2,
|
||||
//16px
|
||||
xxl: 0.225,
|
||||
//18px
|
||||
xxxl: 0.25 //20px,,,,
|
||||
);
|
||||
|
||||
// 宽高
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
//flex
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
$flex-jc: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly,
|
||||
);
|
||||
|
||||
$flex-ai: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
stretch: stretch,
|
||||
);
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
//.mt-1 => margin top
|
||||
//spacing
|
||||
$spacing-types: (
|
||||
m: margin,
|
||||
p: padding,
|
||||
);
|
||||
$spacing-directions: (
|
||||
t: top,
|
||||
r: right,
|
||||
b: bottom,
|
||||
l: left,
|
||||
);
|
||||
$spacing-base-size: 0.5rem;
|
||||
$spacing-sizes: (
|
||||
0: 0,
|
||||
1: 0.5,
|
||||
2: 1,
|
||||
3: 1.5,
|
||||
4: 2,
|
||||
5: 2.5,
|
||||
);
|
||||
@ -0,0 +1,106 @@
|
||||
#index {
|
||||
color: #d3d6dd;
|
||||
width: 1900px;
|
||||
height: 1060px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: left top;
|
||||
overflow: hidden;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px 16px 0 16px;
|
||||
background-color: rgba(0, 0, 51, 1);
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
.frame {
|
||||
height: 100%;
|
||||
background: url('../assets/image/bgicon.png') no-repeat -2px 0px ;
|
||||
background-size: cover;
|
||||
}
|
||||
.host-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
.title-text {
|
||||
font-weight: 700;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
}
|
||||
.nav-box {
|
||||
margin-top: 20px;
|
||||
padding: 0 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.timersty {
|
||||
font-weight: 800;
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.F11 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.navkk1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.body-box {
|
||||
width: 100%;
|
||||
height: 870px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.mainleft {
|
||||
width: 68%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.lefttopbox {
|
||||
height: 17%;
|
||||
}
|
||||
.leftbottom {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
.mainbtmleft {
|
||||
width: 60%;
|
||||
}
|
||||
.mainbtmright {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainrigth {
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
import '../map/fujian.js'
|
||||
|
||||
export default {
|
||||
name: 'Echart',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '2.5rem'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler(options) {
|
||||
// 设置true清空echart缓存
|
||||
this.chart.setOption(options, true)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
// 初始化echart
|
||||
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
||||
//debugger
|
||||
// this.chart = this.$echarts.init(this.$el, 'dark')
|
||||
console.log(this.options)
|
||||
this.chart.setOption(this.options, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,490 @@
|
||||
{
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#ff9900",
|
||||
"#E46CBB",
|
||||
"#9A66E4",
|
||||
"#ed3f14"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#516b91"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#93b7e3"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#edafda",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#d680bc",
|
||||
"borderColor0": "#8fd3e8",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#f5ae4a",
|
||||
"#9189d5",
|
||||
"#56cae2",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "rgba(138,124,168,0.37)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
// 引入全局css
|
||||
import './assets/scss/style.scss'
|
||||
// 按需引入vue-awesome图标
|
||||
import Icon from 'vue-awesome/components/Icon'
|
||||
import 'vue-awesome/icons/chart-bar.js'
|
||||
import 'vue-awesome/icons/chart-area.js'
|
||||
import 'vue-awesome/icons/chart-pie.js'
|
||||
import 'vue-awesome/icons/chart-line.js'
|
||||
import 'vue-awesome/icons/align-left.js'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
// 引入echart
|
||||
// 4.x 引用方式
|
||||
// import echarts from 'echarts'
|
||||
// 5.x 引用方式为按需引用
|
||||
// 希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
|
||||
import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const G2 = require('@antv/g2')
|
||||
Vue.prototype.$G2 = G2
|
||||
|
||||
// 全局注册
|
||||
Vue.component('icon', Icon)
|
||||
Vue.use(dataV)
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App)
|
||||
}).$mount('#app')
|
||||
@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: () => import('../views/index.vue')
|
||||
}]
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@ -0,0 +1 @@
|
||||
测试加密
|
||||
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* @param {Function} fn 防抖函数
|
||||
* @param {Number} delay 延迟时间
|
||||
*/
|
||||
export function debounce(fn, delay) {
|
||||
var timer
|
||||
return function() {
|
||||
var context = this
|
||||
var args = arguments
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(function() {
|
||||
fn.apply(context, args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {date} time 需要转换的时间
|
||||
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
|
||||
*/
|
||||
export function formatTime(time, fmt) {
|
||||
if (!time) return ''
|
||||
else {
|
||||
const date = new Date(time)
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDate(),
|
||||
'H+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds(),
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3),
|
||||
S: date.getMilliseconds()
|
||||
}
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
|
||||
)
|
||||
}
|
||||
for (const k in o) {
|
||||
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length === 1
|
||||
? o[k]
|
||||
: ('00' + o[k]).substr(('' + o[k]).length)
|
||||
)
|
||||
}
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import axios from 'axios'
|
||||
|
||||
import { BASE_URL, TIMEOUT } from './requestConfig'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
timeout: TIMEOUT
|
||||
})
|
||||
|
||||
instance.interceptors.request.use(config => {
|
||||
// 1.发送网络请求时, 在界面的中间位置显示Loading的组件
|
||||
|
||||
// 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面
|
||||
|
||||
// 3.params/data序列化的操作
|
||||
// console.log('请求被拦截')
|
||||
|
||||
return config
|
||||
}, err => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
instance.interceptors.response.use(res => {
|
||||
return res.data
|
||||
}, err => {
|
||||
if (err && err.response) {
|
||||
switch (err.response.status) {
|
||||
case 400:
|
||||
console.log('请求错误')
|
||||
break
|
||||
case 401:
|
||||
console.log('未授权访问')
|
||||
break
|
||||
default:
|
||||
console.log('其他错误信息')
|
||||
}
|
||||
}
|
||||
return err
|
||||
})
|
||||
|
||||
// export default instance
|
||||
export { instance as request }
|
||||
@ -0,0 +1,13 @@
|
||||
// const devBaseURL = 'http://localhost:5281'
|
||||
// const devBaseURL = 'http://5a35a48943.wicp.vip:40709'
|
||||
// const proBaseURL = 'http://5a35a48943.wicp.vip:40709'
|
||||
// const devBaseURL = 'http://124.221.23.100:9003'
|
||||
// const proBaseURL = 'http://124.221.23.100:9003'
|
||||
// const devBaseURL = 'http://118.195.155.9:9002/'
|
||||
// const proBaseURL = 'http://118.195.155.9:9002/'
|
||||
const devBaseURL = 'http://192.168.0.169:9002/'
|
||||
const proBaseURL = 'http://192.168.0.169:9002/'
|
||||
|
||||
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL
|
||||
|
||||
export const TIMEOUT = 5000
|
||||
@ -0,0 +1,33 @@
|
||||
// 混入代码 resize-mixins.js
|
||||
// 改成 Scale 缩放之后，没有使用这个代码，但是保留
|
||||
import { debounce } from '@/utils'
|
||||
const resizeChartMethod = '$__resizeChartMethod'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 在组件内部将图表 init 的引用映射到 chart 属性上
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this[resizeChartMethod], false)
|
||||
},
|
||||
activated() {
|
||||
// 防止 keep-alive 之后图表变形
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('reisze', this[resizeChartMethod])
|
||||
},
|
||||
methods: {
|
||||
// 防抖函数来控制 resize 的频率
|
||||
[resizeChartMethod]: debounce(function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div id="center">
|
||||
<dv-border-box-13>
|
||||
<div class="dvrow">
|
||||
<div>
|
||||
<span class="title-span">当前生产进度跟踪表</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="progressChart" class="progressChart"></div>
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13>
|
||||
<div class="dvrow">
|
||||
<div>
|
||||
<span class="title-span">当前设计进度跟踪表</span>
|
||||
</div>
|
||||
</div>
|
||||
<leftbottom />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from "@/utils/request.js";
|
||||
import leftbottom from "./leftbottom.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
leftbottom,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataA: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
// const labelval1= {}
|
||||
const labelOption = {
|
||||
show: true,
|
||||
formatter: "{c}{name|%}",
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {},
|
||||
},
|
||||
};
|
||||
const labelOption2 = {
|
||||
show: true,
|
||||
formatter: (obj) => {
|
||||
let data1 = [
|
||||
100, 90, 90, 85, 85, 85, 85, 80, 80, 30, 60, 60, 50, 40, 30, 10, 10,
|
||||
5,
|
||||
];
|
||||
let data2 = [
|
||||
,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
20,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
5,
|
||||
];
|
||||
let data3 = [
|
||||
,
|
||||
,
|
||||
,
|
||||
5,
|
||||
5,
|
||||
5,
|
||||
5,
|
||||
10,
|
||||
10,
|
||||
20,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
5,
|
||||
];
|
||||
let data4 = [, , , , , , , , , 30, 10, 10, 10, 10, 10, 10, 10, 10];
|
||||
let arrC = 0;
|
||||
let dataA = data1[obj.dataIndex];
|
||||
let dataB = data2[obj.dataIndex];
|
||||
let dataC = data3[obj.dataIndex];
|
||||
let dataD = data4[obj.dataIndex];
|
||||
let dataAll = 0;
|
||||
switch (obj.componentIndex) {
|
||||
case 0:
|
||||
if (dataA) {
|
||||
dataAll = dataAll + dataA;
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (dataA) {
|
||||
dataAll = dataAll + dataA;
|
||||
}
|
||||
if (dataB) {
|
||||
dataAll = dataAll + dataB;
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (dataA) {
|
||||
dataAll = dataAll + dataA;
|
||||
}
|
||||
if (dataB) {
|
||||
dataAll = dataAll + dataB;
|
||||
}
|
||||
if (dataC) {
|
||||
dataAll = dataAll + dataC;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (dataA) {
|
||||
dataAll = dataAll + dataA;
|
||||
}
|
||||
if (dataB) {
|
||||
dataAll = dataAll + dataB;
|
||||
}
|
||||
if (dataC) {
|
||||
dataAll = dataAll + dataC;
|
||||
}
|
||||
if (dataD) {
|
||||
dataAll = dataAll + dataD;
|
||||
}
|
||||
break;
|
||||
}
|
||||
// for (var i = 0; i < obj.dataIndex; i++) {
|
||||
// switch (obj.componentIndex) {
|
||||
// case 1:
|
||||
// if (data2[i]) {
|
||||
// arrC = arrC + data2[i];
|
||||
// }
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// console.log(arr);
|
||||
// this.dataA = this.dataA + obj.value;
|
||||
//console.log(obj);
|
||||
return dataAll + "%";
|
||||
},
|
||||
textStyle: {
|
||||
// 数值样式
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {},
|
||||
},
|
||||
};
|
||||
let progressChart = this.$echarts.init(
|
||||
document.getElementById("progressChart")
|
||||
);
|
||||
let dataX = [
|
||||
"WP15NG",
|
||||
"斯堪尼亚支架",
|
||||
"HXE195636/5657",
|
||||
"DN400",
|
||||
"0871机壳",
|
||||
"GT GG JJ",
|
||||
"一汽 M50",
|
||||
"EP040 6#模",
|
||||
"1GRR",
|
||||
"康明斯RUBYA发动机缸盖",
|
||||
"增压器等",
|
||||
"L1缸盖",
|
||||
"CAMC-9L缸盖",
|
||||
"F4J20",
|
||||
"福特8缸缸体 第二套",
|
||||
"康明斯RUBY缸体",
|
||||
"康明斯RUBYA发动机缸体",
|
||||
"福特8缸缸体 第三套",
|
||||
];
|
||||
// dataX对应的数据
|
||||
let data1 = [
|
||||
100, 90, 90, 85, 85, 85, 85, 80, 80, 30, 60, 60, 50, 40, 30, 10, 10, 5,
|
||||
];
|
||||
let data2 = [
|
||||
,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
20,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
10,
|
||||
5,
|
||||
];
|
||||
let data3 = [, , , 5, 5, 5, 5, 10, 10, 20, 10, 10, 10, 10, 10, 10, 10, 5];
|
||||
let data4 = [, , , , , , , , , 30, 10, 10, 10, 10, 10, 10, 10, 10];
|
||||
const option = {
|
||||
dataZoom: [
|
||||
{
|
||||
// 第一个 dataZoom 组件
|
||||
type: "inside",
|
||||
yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
|
||||
startValue: 0, // 数据窗口范围的起始数值index
|
||||
endValue: 2, // 数据窗口范围的结束数值index
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "33%",
|
||||
right: "5%",
|
||||
bottom: "13%",
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
min: "0",
|
||||
max: "100",
|
||||
interval: 20,
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed", //solid实线;dashed虚线
|
||||
color: "rgb(81, 82, 8,0.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: dataX,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
rotate: 0, // 文字倾斜显示
|
||||
},
|
||||
// 背景刻度线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed", //solid实线;dashed虚线
|
||||
color: "rgb(81, 82, 8,0.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "11月第4周",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
label: labelOption2,
|
||||
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
name: "12月第1周",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
label: labelOption2,
|
||||
data: data2,
|
||||
},
|
||||
{
|
||||
name: "12月第2周",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
label: labelOption2,
|
||||
data: data3,
|
||||
},
|
||||
{
|
||||
name: "12月第3周",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
label: labelOption2,
|
||||
data: data4,
|
||||
},
|
||||
],
|
||||
};
|
||||
progressChart.setOption(option);
|
||||
// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
|
||||
this.timerId = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue == dataX.length - 1) {
|
||||
option.dataZoom[0].endValue = 3;
|
||||
option.dataZoom[0].startValue = 0;
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
||||
}
|
||||
progressChart.setOption(option);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.dv-border-box-13 {
|
||||
height: 540px;
|
||||
padding: 0 20px;
|
||||
padding-top: 30px;
|
||||
.dvrow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.progressChart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div id="index" ref="appRef">
|
||||
<div class="bg">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<div class="frame">
|
||||
<!--头标-->
|
||||
<div class="d-flex jc-center">
|
||||
<div class="d-flex jc-center">
|
||||
<div class="title">
|
||||
<span class="title-text">生产信息监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二行 日期/logo-->
|
||||
<div class="nav-box">
|
||||
<div class="nav">
|
||||
<span class="timersty">{{dateDay}}</span>
|
||||
<div class="navkk1">
|
||||
<span>{{ dateWeek }}</span>
|
||||
<span>{{ dateYear }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<span class="F11" @click="F11">全屏</span>
|
||||
<span><img src="../assets/image/u1623.png" alt=""></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行 主体部分 -->
|
||||
<div class="body-box">
|
||||
<div class="mainleft">
|
||||
<div class="lefttopbox">
|
||||
<lefttop />
|
||||
</div>
|
||||
<div class="leftbottom">
|
||||
<div class="mainbtmleft">
|
||||
<btmleft />
|
||||
</div>
|
||||
<div class="mainbtmright">
|
||||
<btmright />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mainrigth">
|
||||
<mainrigth />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bototm-box">
|
||||
<span>Copyright © 上海长江云息数字科技有限公司版权所有</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "../utils/drawMixin";
|
||||
import { formatTime } from "../utils/index.js";
|
||||
import lefttop from "./lefttop.vue";
|
||||
import btmleft from "./btmleft.vue";
|
||||
import btmright from "./btmright.vue";
|
||||
import mainrigth from "./mainrigth.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
lefttop,
|
||||
btmleft,
|
||||
btmright,
|
||||
mainrigth,
|
||||
},
|
||||
mixins: [drawMixin],
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
],
|
||||
decorationColor: ["#568aea", "#000000"],
|
||||
reqlist: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timing);
|
||||
},
|
||||
methods: {
|
||||
F11() {
|
||||
// console.log("F11");
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||||
this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
}, 1000);
|
||||
},
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/scss/index.scss";
|
||||
.bototm-box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.F11 {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="echarts" id="leftbottommain"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.echarts();
|
||||
},
|
||||
methods: {
|
||||
echarts() {
|
||||
const labelOption = {
|
||||
show: true,
|
||||
formatter: "{c} {name|%}",
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {},
|
||||
},
|
||||
};
|
||||
var myChart = echarts.init(document.getElementById("leftbottommain"));
|
||||
let dataX = [
|
||||
"RUBY216挺杆",
|
||||
"FM30副车架",
|
||||
"C02副车架",
|
||||
"EP040 6#模 壳体",
|
||||
"YXK 9L缸盖",
|
||||
"SDHF Z14壳体",
|
||||
"LYGC 转向节2404101",
|
||||
"BX 福特8缸 P模",
|
||||
"WC L1缸盖",
|
||||
"FT 凸轮轴",
|
||||
"DFZZ ruby 缸体",
|
||||
"MXG 福特NANO V6缸体",
|
||||
"BX VM MOTORI缸体",
|
||||
];
|
||||
// dataX对应的数据
|
||||
let data = [90, 50, 70, 40, 60, 20, 40, 60, 80, 20, 90, 10, 15];
|
||||
|
||||
var option = {
|
||||
dataZoom: [
|
||||
{
|
||||
// 第一个 dataZoom 组件
|
||||
type: "inside",
|
||||
yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
|
||||
startValue: 0, // 数据窗口范围的起始数值index
|
||||
endValue: 3, // 数据窗口范围的结束数值index
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "33%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
min: "0",
|
||||
max: "100",
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed", //solid实线;dashed虚线
|
||||
color: "rgb(81, 82, 8,0.4)",
|
||||
},
|
||||
},
|
||||
boundaryGap: [0, 0.01],
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: dataX,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
rotate: 0, // 文字倾斜显示
|
||||
},
|
||||
// 背景刻度线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed", //solid实线;dashed虚线
|
||||
color: "rgb(81, 82, 8,0.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "设计进度比",
|
||||
type: "bar",
|
||||
data: data,
|
||||
label: labelOption,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
|
||||
this.timerId = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue == dataX.length - 1) {
|
||||
option.dataZoom[0].endValue = 3;
|
||||
option.dataZoom[0].startValue = 0;
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
||||
}
|
||||
myChart.setOption(option);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
//组件
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echarts {
|
||||
width: 98%;
|
||||
height: 320px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue