Domů Procházet Nápověda
Registrovat se Přihlásit se
0210467
/
app-AgricultureSmart
0
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

增加display

ZZW před 10 měsíci
rodič
8f817e2011
revize
6d9863eed6
32 změnil soubory, kde provedl 6281 přidání a 2 odebrání
Jednotné zobrazení Ukázat statistiku rozdílových dat
  1. 2 1
      .gitignore
  2. 8 0
      display_model_for_smartagriculture/.idea/.gitignore
  3. 9 0
      display_model_for_smartagriculture/.idea/display_model_for_smartagriculture.iml
  4. 6 0
      display_model_for_smartagriculture/.idea/misc.xml
  5. 8 0
      display_model_for_smartagriculture/.idea/modules.xml
  6. 14 0
      display_model_for_smartagriculture/index.html
  7. 1089 0
      display_model_for_smartagriculture/package-lock.json
  8. 28 0
      display_model_for_smartagriculture/package.json
  9. 36 0
      display_model_for_smartagriculture/public/api.js
  10. 216 0
      display_model_for_smartagriculture/public/config.js
  11. 68 0
      display_model_for_smartagriculture/public/dark_theme.css
  12. 47 0
      display_model_for_smartagriculture/public/data/mapdata.json
  13. binární
      display_model_for_smartagriculture/public/favicon.ico
  14. 172 0
      display_model_for_smartagriculture/public/utils.js
  15. 529 0
      display_model_for_smartagriculture/src/App.vue
  16. binární
      display_model_for_smartagriculture/src/assets/1.mp4
  17. binární
      display_model_for_smartagriculture/src/assets/111.webp
  18. binární
      display_model_for_smartagriculture/src/assets/222.webp
  19. binární
      display_model_for_smartagriculture/src/assets/333.webp
  20. binární
      display_model_for_smartagriculture/src/assets/444.webp
  21. binární
      display_model_for_smartagriculture/src/assets/5.png
  22. binární
      display_model_for_smartagriculture/src/assets/logo.png
  23. 31 0
      display_model_for_smartagriculture/src/main.js
  24. 521 0
      display_model_for_smartagriculture/src/pages/crop.vue
  25. 595 0
      display_model_for_smartagriculture/src/pages/device.vue
  26. 1253 0
      display_model_for_smartagriculture/src/pages/environment.vue
  27. 867 0
      display_model_for_smartagriculture/src/pages/index.vue
  28. 659 0
      display_model_for_smartagriculture/src/pages/market.vue
  29. 36 0
      display_model_for_smartagriculture/src/pages/welcome.vue
  30. 7 0
      display_model_for_smartagriculture/vite.config.js
  31. 68 0
      vue/public/dark_theme.css
  32. 12 1
      vue/src/views/manager/AI/CorpGrown.vue

+ 2 - 1
.gitignore
Zobrazit soubor 

@@ -3,4 +3,5 @@
 
 /springboot/src/main/resources/application-druid.yml
 
 /springboot/src/main/resources/application-druid.yml
 
 
 
 /files
 
 /files
 
-/springboot/src/main/resources/application-druid.yml
 
+/springboot/src/main/resources/application-druid.yml
 
+/display_model_for_smartagriculture/node_modules

+ 8 - 0
display_model_for_smartagriculture/.idea/.gitignore
Zobrazit soubor 

@@ -0,0 +1,8 @@
 
+# 默认忽略的文件
 
+/shelf/
 
+/workspace.xml
 
+# 基于编辑器的 HTTP 客户端请求
 
+/httpRequests/
 
+# Datasource local storage ignored files
 
+/dataSources/
 
+/dataSources.local.xml

+ 9 - 0
display_model_for_smartagriculture/.idea/display_model_for_smartagriculture.iml
Zobrazit soubor 

@@ -0,0 +1,9 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="JAVA_MODULE" version="4">
 
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
 
+    <exclude-output />
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 6 - 0
display_model_for_smartagriculture/.idea/misc.xml
Zobrazit soubor 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
 
+    <output url="file://$PROJECT_DIR$/out" />
 
+  </component>
 
+</project>

+ 8 - 0
display_model_for_smartagriculture/.idea/modules.xml
Zobrazit soubor 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/display_model_for_smartagriculture.iml" filepath="$PROJECT_DIR$/.idea/display_model_for_smartagriculture.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

+ 14 - 0
display_model_for_smartagriculture/index.html
Zobrazit soubor 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" href="/favicon.ico" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>瓜妙果蔬通监控平台</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+	<script src="https://webapi.amap.com/maps?v=1.4.15&key=6e79f6d236e295632f21b385e363b6e8&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.DistrictLayer,AMap.MapType,AMap.TileLayer"></script>
 
+    <script type="module" src="./src/main.js"></script>
 
+  </body>
 
+</html>

+ 1089 - 0
display_model_for_smartagriculture/package-lock.json
Zobrazit soubor 

@@ -0,0 +1,1089 @@
 
+{
 
+  "name": "vue3_cli_default",
 
+  "version": "0.0.0",
 
+  "lockfileVersion": 3,
 
+  "requires": true,
 
+  "packages": {
 
+    "": {
 
+      "name": "vue3_cli_default",
 
+      "version": "0.0.0",
 
+      "dependencies": {
 
+        "axios": "^0.26.1",
 
+        "dom7": "^4.0.4",
 
+        "echarts": "^5.3.2",
 
+        "echarts-extension-amap": "^1.10.1",
 
+        "echarts-wordcloud": "^2.0.0",
 
+        "element-plus": "^2.1.8",
 
+        "jquery": "^3.6.0",
 
+        "save": "^2.4.0",
 
+        "swiper": "^4.5.1",
 
+        "vue": "^3.2.8",
 
+        "vue-echarts": "^6.0.2",
 
+        "vue-router": "^4.0.14"
 
+      },
 
+      "devDependencies": {
 
+        "@vitejs/plugin-vue": "^1.6.0",
 
+        "@vue/compiler-sfc": "^3.2.6",
 
+        "vite": "^2.5.2"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-validator-identifier": {
 
+      "version": "7.14.9",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
 
+      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/parser": {
 
+      "version": "7.15.4",
 
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.4.tgz",
 
+      "integrity": "sha512-xmzz+7fRpjrvDUj+GV7zfz/R3gSK2cOxGlazaXooxspCr539cbTXJKvBJzSVI2pPhcRGquoOtaIkKCsHQUiO3w==",
 
+      "bin": {
 
+        "parser": "bin/babel-parser.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.0.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/types": {
 
+      "version": "7.15.4",
 
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.4.tgz",
 
+      "integrity": "sha512-0f1HJFuGmmbrKTCZtbm3cU+b/AqdEYk5toj5iQur58xkVMlS0JWaKxTBSmCXd47uiN7vbcozAupm6Mvs80GNhw==",
 
+      "dependencies": {
 
+        "@babel/helper-validator-identifier": "^7.14.9",
 
+        "to-fast-properties": "^2.0.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@ctrl/tinycolor": {
 
+      "version": "3.4.0",
 
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
 
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==",
 
+      "engines": {
 
+        "node": ">=10"
 
+      }
 
+    },
 
+    "node_modules/@element-plus/icons-vue": {
 
+      "version": "1.1.4",
 
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
 
+      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
 
+      "peerDependencies": {
 
+        "vue": "^3.2.0"
 
+      }
 
+    },
 
+    "node_modules/@floating-ui/core": {
 
+      "version": "0.6.1",
 
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.6.1.tgz",
 
+      "integrity": "sha512-Y30eVMcZva8o84c0HcXAtDO4BEzPJMvF6+B7x7urL2xbAqVsGJhojOyHLaoQHQYjb6OkqRq5kO+zeySycQwKqg=="
 
+    },
 
+    "node_modules/@floating-ui/dom": {
 
+      "version": "0.4.4",
 
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.4.4.tgz",
 
+      "integrity": "sha512-0Ulu3B/dqQplUUSqnTx0foSrlYuMN+GTtlJWvNJwt6Fr7/PqmlR/Y08o6/+bxDWr6p3roBJRaQ51MDZsNmEhhw==",
 
+      "dependencies": {
 
+        "@floating-ui/core": "^0.6.1"
 
+      }
 
+    },
 
+    "node_modules/@popperjs/core": {
 
+      "version": "2.11.5",
 
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
 
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
 
+      "funding": {
 
+        "type": "opencollective",
 
+        "url": "https://opencollective.com/popperjs"
 
+      }
 
+    },
 
+    "node_modules/@types/estree": {
 
+      "version": "0.0.48",
 
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
 
+      "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
 
+      "dev": true
 
+    },
 
+    "node_modules/@types/lodash": {
 
+      "version": "4.17.0",
 
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
 
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
 
+      "peer": true
 
+    },
 
+    "node_modules/@types/lodash-es": {
 
+      "version": "4.17.12",
 
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
 
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "@types/lodash": "*"
 
+      }
 
+    },
 
+    "node_modules/@vitejs/plugin-vue": {
 
+      "version": "1.6.0",
 
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz",
 
+      "integrity": "sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">=12.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@vue/compiler-sfc": "^3.2.6"
 
+      }
 
+    },
 
+    "node_modules/@vue/compiler-core": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.8.tgz",
 
+      "integrity": "sha512-Sx8qJ030+QM/NakUrkQuUGCeDEb+0d0AgFOl5W4qRvR6e+YgLnW2ew0jREf4T1hak9Fdk8Edl67StECHrhEuew==",
 
+      "dependencies": {
 
+        "@babel/parser": "^7.15.0",
 
+        "@babel/types": "^7.15.0",
 
+        "@vue/shared": "3.2.8",
 
+        "estree-walker": "^2.0.2",
 
+        "source-map": "^0.6.1"
 
+      }
 
+    },
 
+    "node_modules/@vue/compiler-dom": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.8.tgz",
 
+      "integrity": "sha512-nxBW6k8FMWQ74294CRbqR+iEJRO5vIjx85I3YCOyZFD6FsDHyFL60g76TcJzucp+F2XXIDaYz+A+F4gQlDatjw==",
 
+      "dependencies": {
 
+        "@vue/compiler-core": "3.2.8",
 
+        "@vue/shared": "3.2.8"
 
+      }
 
+    },
 
+    "node_modules/@vue/compiler-sfc": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.8.tgz",
 
+      "integrity": "sha512-XClueQAXoWtN2EToKgfYH9FCL70Ac4bxx6OZFZzxYSg1bei8IB9srJP1UOfnJb2IpnM1heikAz1dp1HI1wHcyQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "@babel/parser": "^7.15.0",
 
+        "@babel/types": "^7.15.0",
 
+        "@types/estree": "^0.0.48",
 
+        "@vue/compiler-core": "3.2.8",
 
+        "@vue/compiler-dom": "3.2.8",
 
+        "@vue/compiler-ssr": "3.2.8",
 
+        "@vue/ref-transform": "3.2.8",
 
+        "@vue/shared": "3.2.8",
 
+        "consolidate": "^0.16.0",
 
+        "estree-walker": "^2.0.2",
 
+        "hash-sum": "^2.0.0",
 
+        "lru-cache": "^5.1.1",
 
+        "magic-string": "^0.25.7",
 
+        "merge-source-map": "^1.1.0",
 
+        "postcss": "^8.1.10",
 
+        "postcss-modules": "^4.0.0",
 
+        "postcss-selector-parser": "^6.0.4",
 
+        "source-map": "^0.6.1"
 
+      }
 
+    },
 
+    "node_modules/@vue/compiler-ssr": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.8.tgz",
 
+      "integrity": "sha512-QqyiFRiIl55W0abDNQ6cNG/7iIfBHmbXVtssUAjX3IlI87ELeT0xackmrCyTSnfIX12ixljg9AN0COIZwlvt5A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "@vue/compiler-dom": "3.2.8",
 
+        "@vue/shared": "3.2.8"
 
+      }
 
+    },
 
+    "node_modules/@vue/devtools-api": {
 
+      "version": "6.1.4",
 
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
 
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
 
+    },
 
+    "node_modules/@vue/reactivity": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.8.tgz",
 
+      "integrity": "sha512-/Hj3Uz28SG+xB5SDWPOXUs0emvHkq82EmTgk44/plTVFeswCZ3i3Hd7WmsrPT4rGajlDKd5uqMmW0ith1ED0FA==",
 
+      "dependencies": {
 
+        "@vue/shared": "3.2.8"
 
+      }
 
+    },
 
+    "node_modules/@vue/ref-transform": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.8.tgz",
 
+      "integrity": "sha512-9LdADd4JM3klt+b2qNT8a7b7JvBETNBy2Btv5rDzyPrAVS4Vrw+1WWay6gZBgnxfJ9TPSvG8f/9zu6gNGHmJLA==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "@babel/parser": "^7.15.0",
 
+        "@vue/compiler-core": "3.2.8",
 
+        "@vue/shared": "3.2.8",
 
+        "estree-walker": "^2.0.2",
 
+        "magic-string": "^0.25.7"
 
+      }
 
+    },
 
+    "node_modules/@vue/runtime-core": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.8.tgz",
 
+      "integrity": "sha512-hwzXLGw1njBEY5JSyRXIIdCtzMFFF6F38WcKMmoIE3p7da30jEbWt8EwwrBomjT8ZbqzElOGlewBcnXNOiiIUg==",
 
+      "dependencies": {
 
+        "@vue/reactivity": "3.2.8",
 
+        "@vue/shared": "3.2.8"
 
+      }
 
+    },
 
+    "node_modules/@vue/runtime-dom": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.8.tgz",
 
+      "integrity": "sha512-A/aRrlGLJ5y4Z7eNbnO/xHwx2RiPijQo7D3OIwESroG3HNP+dpuoqamajo5TXS9ZGjbMOih82COoe7xb9P4BZw==",
 
+      "dependencies": {
 
+        "@vue/runtime-core": "3.2.8",
 
+        "@vue/shared": "3.2.8",
 
+        "csstype": "^2.6.8"
 
+      }
 
+    },
 
+    "node_modules/@vue/shared": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.8.tgz",
 
+      "integrity": "sha512-E2DQQnG7Qr4GwTs3GlfPPlHliGVADoufTnhpwfoViw7JlyLMmYtjfnTwM6nXAwvSJWiF7D+7AxpnWBBT3VWo6Q=="
 
+    },
 
+    "node_modules/@vueuse/core": {
 
+      "version": "8.2.4",
 
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.2.4.tgz",
 
+      "integrity": "sha512-K8DbVLErlHMnEOqy67BrRbDmWCd4Z9X0a1dL6fQdhABLXBydy69Tm7uF5ZUotAqib9sskItYFsAnLhvGSue6bg==",
 
+      "dependencies": {
 
+        "@vueuse/metadata": "8.2.4",
 
+        "@vueuse/shared": "8.2.4",
 
+        "vue-demi": "*"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/antfu"
 
+      },
 
+      "peerDependencies": {
 
+        "@vue/composition-api": "^1.1.0",
 
+        "vue": "^2.6.0 || ^3.2.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@vue/composition-api": {
 
+          "optional": true
 
+        },
 
+        "vue": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/@vueuse/metadata": {
 
+      "version": "8.2.4",
 
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.2.4.tgz",
 
+      "integrity": "sha512-mn4FLULZAHd6r6vo5hLz+99xzwlVDP9qeVtZGV2Ik40m0zETe2okUr3O1Yoz6FReUoc7KAPrf0/GFpWEXVDAnQ==",
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/antfu"
 
+      }
 
+    },
 
+    "node_modules/@vueuse/shared": {
 
+      "version": "8.2.4",
 
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.2.4.tgz",
 
+      "integrity": "sha512-sLkuZMEumsmEDYie3m6/nrk7SrLGlyUgtVn/0EJZ8Chaj1YfSmBQuLxNE0ruQ/6VZlqkx44jEZxcgbU7qPyAiw==",
 
+      "dependencies": {
 
+        "vue-demi": "*"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/antfu"
 
+      },
 
+      "peerDependencies": {
 
+        "@vue/composition-api": "^1.1.0",
 
+        "vue": "^2.6.0 || ^3.2.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@vue/composition-api": {
 
+          "optional": true
 
+        },
 
+        "vue": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/async": {
 
+      "version": "2.6.3",
 
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
 
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
 
+      "dependencies": {
 
+        "lodash": "^4.17.14"
 
+      }
 
+    },
 
+    "node_modules/async-validator": {
 
+      "version": "4.0.7",
 
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
 
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
 
+    },
 
+    "node_modules/axios": {
 
+      "version": "0.26.1",
 
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
 
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
 
+      "dependencies": {
 
+        "follow-redirects": "^1.14.8"
 
+      }
 
+    },
 
+    "node_modules/big.js": {
 
+      "version": "5.2.2",
 
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
 
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": "*"
 
+      }
 
+    },
 
+    "node_modules/bluebird": {
 
+      "version": "3.7.2",
 
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
 
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
 
+      "dev": true
 
+    },
 
+    "node_modules/colorette": {
 
+      "version": "1.3.0",
 
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
 
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
 
+      "dev": true
 
+    },
 
+    "node_modules/consolidate": {
 
+      "version": "0.16.0",
 
+      "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.16.0.tgz",
 
+      "integrity": "sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==",
 
+      "deprecated": "Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "bluebird": "^3.7.2"
 
+      },
 
+      "engines": {
 
+        "node": ">= 0.10.0"
 
+      }
 
+    },
 
+    "node_modules/cssesc": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 
+      "dev": true,
 
+      "bin": {
 
+        "cssesc": "bin/cssesc"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/csstype": {
 
+      "version": "2.6.17",
 
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
 
+      "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
 
+    },
 
+    "node_modules/dayjs": {
 
+      "version": "1.11.0",
 
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.0.tgz",
 
+      "integrity": "sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug=="
 
+    },
 
+    "node_modules/dom7": {
 
+      "version": "4.0.4",
 
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
 
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
 
+      "dependencies": {
 
+        "ssr-window": "^4.0.0"
 
+      }
 
+    },
 
+    "node_modules/duplexer": {
 
+      "version": "0.1.2",
 
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
 
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
 
+    },
 
+    "node_modules/echarts": {
 
+      "version": "5.3.2",
 
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
 
+      "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
 
+      "dependencies": {
 
+        "tslib": "2.3.0",
 
+        "zrender": "5.3.1"
 
+      }
 
+    },
 
+    "node_modules/echarts-extension-amap": {
 
+      "version": "1.10.1",
 
+      "resolved": "https://registry.npmjs.org/echarts-extension-amap/-/echarts-extension-amap-1.10.1.tgz",
 
+      "integrity": "sha512-Dyip/Qc9zX73AJFTxU/yM19xjAgkWfTAJruzXPvq4rBXnqtxgQ2dyJdXbVzVnVAL26V6Z9HZC8f77isHjq/z/A=="
 
+    },
 
+    "node_modules/echarts-wordcloud": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
 
+      "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==",
 
+      "peerDependencies": {
 
+        "echarts": "^5.0.1"
 
+      }
 
+    },
 
+    "node_modules/element-plus": {
 
+      "version": "2.1.8",
 
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.8.tgz",
 
+      "integrity": "sha512-hwFtzw0R5lKMhWf3oVvSU/ucfN8RiY8DRaRWo6LktX4RlWWA2QjKfDXtISBi5Rb303Ny4I0Sgz0CA1Fd4Z2GGg==",
 
+      "dependencies": {
 
+        "@ctrl/tinycolor": "^3.4.0",
 
+        "@element-plus/icons-vue": "^1.1.4",
 
+        "@floating-ui/dom": "^0.4.2",
 
+        "@popperjs/core": "^2.11.4",
 
+        "@vueuse/core": "^8.2.3",
 
+        "async-validator": "^4.0.7",
 
+        "dayjs": "^1.11.0",
 
+        "escape-html": "^1.0.3",
 
+        "lodash": "^4.17.21",
 
+        "lodash-es": "^4.17.21",
 
+        "lodash-unified": "^1.0.2",
 
+        "memoize-one": "^6.0.0",
 
+        "normalize-wheel-es": "^1.1.2"
 
+      },
 
+      "peerDependencies": {
 
+        "vue": "^3.2.0"
 
+      }
 
+    },
 
+    "node_modules/emojis-list": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
 
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">= 4"
 
+      }
 
+    },
 
+    "node_modules/esbuild": {
 
+      "version": "0.12.25",
 
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.25.tgz",
 
+      "integrity": "sha512-woie0PosbRSoN8gQytrdCzUbS2ByKgO8nD1xCZkEup3D9q92miCze4PqEI9TZDYAuwn6CruEnQpJxgTRWdooAg==",
 
+      "dev": true,
 
+      "hasInstallScript": true,
 
+      "bin": {
 
+        "esbuild": "bin/esbuild"
 
+      }
 
+    },
 
+    "node_modules/escape-html": {
 
+      "version": "1.0.3",
 
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 
+    },
 
+    "node_modules/estree-walker": {
 
+      "version": "2.0.2",
 
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 
+    },
 
+    "node_modules/event-stream": {
 
+      "version": "4.0.1",
 
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
 
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
 
+      "dependencies": {
 
+        "duplexer": "^0.1.1",
 
+        "from": "^0.1.7",
 
+        "map-stream": "0.0.7",
 
+        "pause-stream": "^0.0.11",
 
+        "split": "^1.0.1",
 
+        "stream-combiner": "^0.2.2",
 
+        "through": "^2.3.8"
 
+      }
 
+    },
 
+    "node_modules/follow-redirects": {
 
+      "version": "1.14.9",
 
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
 
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
 
+      "funding": [
 
+        {
 
+          "type": "individual",
 
+          "url": "https://github.com/sponsors/RubenVerborgh"
 
+        }
 
+      ],
 
+      "engines": {
 
+        "node": ">=4.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "debug": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/from": {
 
+      "version": "0.1.7",
 
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
 
+      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4="
 
+    },
 
+    "node_modules/fsevents": {
 
+      "version": "2.3.2",
 
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 
+      "dev": true,
 
+      "hasInstallScript": true,
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ],
 
+      "engines": {
 
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 
+      }
 
+    },
 
+    "node_modules/function-bind": {
 
+      "version": "1.1.1",
 
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 
+      "dev": true
 
+    },
 
+    "node_modules/generic-names": {
 
+      "version": "2.0.1",
 
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
 
+      "integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "loader-utils": "^1.1.0"
 
+      }
 
+    },
 
+    "node_modules/has": {
 
+      "version": "1.0.3",
 
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "function-bind": "^1.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 0.4.0"
 
+      }
 
+    },
 
+    "node_modules/hash-sum": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
 
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
 
+      "dev": true
 
+    },
 
+    "node_modules/icss-replace-symbols": {
 
+      "version": "1.1.0",
 
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
 
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
 
+      "dev": true
 
+    },
 
+    "node_modules/icss-utils": {
 
+      "version": "5.1.0",
 
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
 
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/is-core-module": {
 
+      "version": "2.6.0",
 
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
 
+      "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "has": "^1.0.3"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/jquery": {
 
+      "version": "3.6.0",
 
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
 
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
 
+    },
 
+    "node_modules/json5": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
 
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "minimist": "^1.2.0"
 
+      },
 
+      "bin": {
 
+        "json5": "lib/cli.js"
 
+      }
 
+    },
 
+    "node_modules/loader-utils": {
 
+      "version": "1.4.0",
 
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
 
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "big.js": "^5.2.2",
 
+        "emojis-list": "^3.0.0",
 
+        "json5": "^1.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=4.0.0"
 
+      }
 
+    },
 
+    "node_modules/lodash": {
 
+      "version": "4.17.21",
 
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 
+    },
 
+    "node_modules/lodash-es": {
 
+      "version": "4.17.21",
 
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
 
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
 
+    },
 
+    "node_modules/lodash-unified": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
 
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
 
+      "peerDependencies": {
 
+        "@types/lodash-es": "*",
 
+        "lodash": "*",
 
+        "lodash-es": "*"
 
+      }
 
+    },
 
+    "node_modules/lodash.assign": {
 
+      "version": "4.2.0",
 
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
 
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
 
+    },
 
+    "node_modules/lodash.camelcase": {
 
+      "version": "4.3.0",
 
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
 
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
 
+      "dev": true
 
+    },
 
+    "node_modules/lru-cache": {
 
+      "version": "5.1.1",
 
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "yallist": "^3.0.2"
 
+      }
 
+    },
 
+    "node_modules/magic-string": {
 
+      "version": "0.25.7",
 
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
 
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "sourcemap-codec": "^1.4.4"
 
+      }
 
+    },
 
+    "node_modules/map-stream": {
 
+      "version": "0.0.7",
 
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
 
+      "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg="
 
+    },
 
+    "node_modules/memoize-one": {
 
+      "version": "6.0.0",
 
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
 
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
 
+    },
 
+    "node_modules/merge-source-map": {
 
+      "version": "1.1.0",
 
+      "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
 
+      "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "source-map": "^0.6.1"
 
+      }
 
+    },
 
+    "node_modules/mingo": {
 
+      "version": "1.3.3",
 
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-1.3.3.tgz",
 
+      "integrity": "sha1-aSLE0Ufvx3GgFCWixMj3eER4xUY="
 
+    },
 
+    "node_modules/minimist": {
 
+      "version": "1.2.5",
 
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
 
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
 
+      "dev": true
 
+    },
 
+    "node_modules/nanoid": {
 
+      "version": "3.1.25",
 
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
 
+      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
 
+      "dev": true,
 
+      "bin": {
 
+        "nanoid": "bin/nanoid.cjs"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 
+      }
 
+    },
 
+    "node_modules/normalize-wheel-es": {
 
+      "version": "1.1.2",
 
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
 
+      "integrity": "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
 
+    },
 
+    "node_modules/path-parse": {
 
+      "version": "1.0.7",
 
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
 
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 
+      "dev": true
 
+    },
 
+    "node_modules/pause-stream": {
 
+      "version": "0.0.11",
 
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
 
+      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
 
+      "dependencies": {
 
+        "through": "~2.3"
 
+      }
 
+    },
 
+    "node_modules/postcss": {
 
+      "version": "8.3.6",
 
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
 
+      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "colorette": "^1.2.2",
 
+        "nanoid": "^3.1.23",
 
+        "source-map-js": "^0.6.2"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >=14"
 
+      },
 
+      "funding": {
 
+        "type": "opencollective",
 
+        "url": "https://opencollective.com/postcss/"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules": {
 
+      "version": "4.2.2",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.2.2.tgz",
 
+      "integrity": "sha512-/H08MGEmaalv/OU8j6bUKi/kZr2kqGF6huAW8m9UAgOLWtpFdhA14+gPBoymtqyv+D4MLsmqaF2zvIegdCxJXg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "generic-names": "^2.0.1",
 
+        "icss-replace-symbols": "^1.1.0",
 
+        "lodash.camelcase": "^4.3.0",
 
+        "postcss-modules-extract-imports": "^3.0.0",
 
+        "postcss-modules-local-by-default": "^4.0.0",
 
+        "postcss-modules-scope": "^3.0.0",
 
+        "postcss-modules-values": "^4.0.0",
 
+        "string-hash": "^1.1.1"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.0.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-extract-imports": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
 
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-local-by-default": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
 
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "icss-utils": "^5.0.0",
 
+        "postcss-selector-parser": "^6.0.2",
 
+        "postcss-value-parser": "^4.1.0"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-scope": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
 
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "postcss-selector-parser": "^6.0.4"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-values": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
 
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "icss-utils": "^5.0.0"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-selector-parser": {
 
+      "version": "6.0.6",
 
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
 
+      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "cssesc": "^3.0.0",
 
+        "util-deprecate": "^1.0.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/postcss-value-parser": {
 
+      "version": "4.1.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
 
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
 
+      "dev": true
 
+    },
 
+    "node_modules/resize-detector": {
 
+      "version": "0.3.0",
 
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
 
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
 
+    },
 
+    "node_modules/resolve": {
 
+      "version": "1.20.0",
 
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
 
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "is-core-module": "^2.2.0",
 
+        "path-parse": "^1.0.6"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/rollup": {
 
+      "version": "2.56.3",
 
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
 
+      "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
 
+      "dev": true,
 
+      "bin": {
 
+        "rollup": "dist/bin/rollup"
 
+      },
 
+      "engines": {
 
+        "node": ">=10.0.0"
 
+      },
 
+      "optionalDependencies": {
 
+        "fsevents": "~2.3.2"
 
+      }
 
+    },
 
+    "node_modules/save": {
 
+      "version": "2.4.0",
 
+      "resolved": "https://registry.npmjs.org/save/-/save-2.4.0.tgz",
 
+      "integrity": "sha512-wd5L2uVnsKYkIUaK6i8Ie66IOHaI328gMF0MPuTJtYOjXgUolC33LSIk7Qr8WVA55QHaGwfiVS8a7EFIeGOR3w==",
 
+      "dependencies": {
 
+        "async": "^2.6.2",
 
+        "event-stream": "^4.0.1",
 
+        "lodash.assign": "^4.2.0",
 
+        "mingo": "1"
 
+      }
 
+    },
 
+    "node_modules/source-map": {
 
+      "version": "0.6.1",
 
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/source-map-js": {
 
+      "version": "0.6.2",
 
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
 
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/sourcemap-codec": {
 
+      "version": "1.4.8",
 
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
 
+      "dev": true
 
+    },
 
+    "node_modules/split": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
 
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
 
+      "dependencies": {
 
+        "through": "2"
 
+      },
 
+      "engines": {
 
+        "node": "*"
 
+      }
 
+    },
 
+    "node_modules/ssr-window": {
 
+      "version": "4.0.2",
 
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
 
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
 
+    },
 
+    "node_modules/stream-combiner": {
 
+      "version": "0.2.2",
 
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
 
+      "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
 
+      "dependencies": {
 
+        "duplexer": "~0.1.1",
 
+        "through": "~2.3.4"
 
+      }
 
+    },
 
+    "node_modules/string-hash": {
 
+      "version": "1.1.3",
 
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
 
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
 
+      "dev": true
 
+    },
 
+    "node_modules/swiper": {
 
+      "version": "4.5.1",
 
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
 
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
 
+      "hasInstallScript": true,
 
+      "dependencies": {
 
+        "dom7": "^2.1.3",
 
+        "ssr-window": "^1.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 4.7.0"
 
+      }
 
+    },
 
+    "node_modules/swiper/node_modules/dom7": {
 
+      "version": "2.1.5",
 
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
 
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
 
+      "dependencies": {
 
+        "ssr-window": "^2.0.0"
 
+      }
 
+    },
 
+    "node_modules/swiper/node_modules/dom7/node_modules/ssr-window": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
 
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
 
+    },
 
+    "node_modules/swiper/node_modules/ssr-window": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
 
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
 
+    },
 
+    "node_modules/through": {
 
+      "version": "2.3.8",
 
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
 
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
 
+    },
 
+    "node_modules/to-fast-properties": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
 
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/tslib": {
 
+      "version": "2.3.0",
 
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
 
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
 
+    },
 
+    "node_modules/util-deprecate": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
 
+      "dev": true
 
+    },
 
+    "node_modules/vite": {
 
+      "version": "2.5.3",
 
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.3.tgz",
 
+      "integrity": "sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "esbuild": "^0.12.17",
 
+        "postcss": "^8.3.6",
 
+        "resolve": "^1.20.0",
 
+        "rollup": "^2.38.5"
 
+      },
 
+      "bin": {
 
+        "vite": "bin/vite.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=12.2.0"
 
+      },
 
+      "optionalDependencies": {
 
+        "fsevents": "~2.3.2"
 
+      }
 
+    },
 
+    "node_modules/vue": {
 
+      "version": "3.2.8",
 
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.8.tgz",
 
+      "integrity": "sha512-x7lwdnOSkceHQUXRVVHBaZzcp6v7M2CYtSZH75zZaT1mTjB4plC4KZHKP/5jAvdqOLBHZGwDSMkWXm3YbAufrA==",
 
+      "dependencies": {
 
+        "@vue/compiler-dom": "3.2.8",
 
+        "@vue/runtime-dom": "3.2.8",
 
+        "@vue/shared": "3.2.8"
 
+      }
 
+    },
 
+    "node_modules/vue-demi": {
 
+      "version": "0.12.5",
 
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
 
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
 
+      "hasInstallScript": true,
 
+      "bin": {
 
+        "vue-demi-fix": "bin/vue-demi-fix.js",
 
+        "vue-demi-switch": "bin/vue-demi-switch.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=12"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/antfu"
 
+      },
 
+      "peerDependencies": {
 
+        "@vue/composition-api": "^1.0.0-rc.1",
 
+        "vue": "^3.0.0-0 || ^2.6.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@vue/composition-api": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/vue-echarts": {
 
+      "version": "6.0.2",
 
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.2.tgz",
 
+      "integrity": "sha512-9xDokauJtAc389MNKbwi1I0VDmp4Y6ndAJTQ8T9K7H0ffosTe1OJSJbUtkT7/fVLDFzlCcmg2TfAKaMzbpg5yQ==",
 
+      "hasInstallScript": true,
 
+      "dependencies": {
 
+        "resize-detector": "^0.3.0",
 
+        "vue-demi": "^0.12.1"
 
+      },
 
+      "peerDependencies": {
 
+        "@vue/composition-api": "^1.0.5",
 
+        "echarts": "^5.1.2",
 
+        "vue": "^2.6.12 || ^3.1.1"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@vue/composition-api": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/vue-router": {
 
+      "version": "4.0.14",
 
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.14.tgz",
 
+      "integrity": "sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==",
 
+      "dependencies": {
 
+        "@vue/devtools-api": "^6.0.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/posva"
 
+      },
 
+      "peerDependencies": {
 
+        "vue": "^3.2.0"
 
+      }
 
+    },
 
+    "node_modules/yallist": {
 
+      "version": "3.1.1",
 
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
 
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
 
+      "dev": true
 
+    },
 
+    "node_modules/zrender": {
 
+      "version": "5.3.1",
 
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
 
+      "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
 
+      "dependencies": {
 
+        "tslib": "2.3.0"
 
+      }
 
+    }
 
+  }
 
+}

+ 28 - 0
display_model_for_smartagriculture/package.json
Zobrazit soubor 

@@ -0,0 +1,28 @@
 
+{
 
+  "name": "vue3_cli_default",
 
+  "version": "0.0.0",
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "vite build",
 
+    "serve": "vite preview"
 
+  },
 
+  "dependencies": {
 
+    "axios": "^0.26.1",
 
+    "dom7": "^4.0.4",
 
+    "echarts": "^5.3.2",
 
+    "echarts-extension-amap": "^1.10.1",
 
+    "echarts-wordcloud": "^2.0.0",
 
+    "element-plus": "^2.1.8",
 
+    "jquery": "^3.6.0",
 
+    "save": "^2.4.0",
 
+    "swiper": "^4.5.1",
 
+    "vue": "^3.2.8",
 
+    "vue-echarts": "^6.0.2",
 
+    "vue-router": "^4.0.14"
 
+  },
 
+  "devDependencies": {
 
+    "@vitejs/plugin-vue": "^1.6.0",
 
+    "@vue/compiler-sfc": "^3.2.6",
 
+    "vite": "^2.5.2"
 
+  }
 
+}

+ 36 - 0
display_model_for_smartagriculture/public/api.js
Zobrazit soubor 

@@ -0,0 +1,36 @@
 
+import axios from 'axios';
 
+const config = {
 
+	// baseURL: process.env.baseURL
 
+	baseURL: 'http://localhost:3000/data/',
 
+	timeout: 1000,
 
+	headers: {
 
+		'Content-Type': 'application/json',
 
+	},
 
+};
 
+const api = axios.create(config);
 
+
 
+// 默认 post 请求，使用 application/json 形式
 
+api.defaults.headers.post['Content-Type'] = 'application/json';
 
+
 
+/**
 
+ * 接口地址配置
 
+ */
 
+const server_urls = {
 
+	//地图数据接口
 
+	map_url: 'mapdata.json',
 
+};
 
+
 
+export default {
 
+	name: "api",
 
+	loadMapData:function(callback){
 
+		axios({
 
+			method: 'get',
 
+			url: config.baseURL + server_urls.map_url,
 
+			headers: {
 
+				'Content-Type': 'application/json; charset=utf-8',
 
+			},
 
+		}).then(response => {
 
+			callback && callback(response);
 
+		})
 
+	}
 
+}

+ 216 - 0
display_model_for_smartagriculture/public/config.js
Zobrazit soubor 

@@ -0,0 +1,216 @@
 
+export default {
 
+	colors: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)", '#9689FF', '#FF8A26', '#5FB878', '#73c0de',
 
+		'#4ED33C',
 
+		'#FF5252', '#01AAED', '#FF5722',
 
+		'#6648FF', '#2A8BFD', '#BAFF7F', '#00FAC1', '#00CAFF', '#FDE056', 'rgba(245, 166, 35, 1)',
 
+		'#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'
 
+	],
 
+	bmapstyle: {
 
+		styleJson: [{
 
+				featureType: "water",
 
+				elementType: "all",
 
+				stylers: {
 
+					color: "#021019"
 
+				}
 
+			},
 
+			{
 
+				featureType: "highway",
 
+				elementType: "geometry.fill",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "highway",
 
+				elementType: "geometry.stroke",
 
+				stylers: {
 
+					color: "#147a92"
 
+				}
 
+			},
 
+			{
 
+				featureType: "arterial",
 
+				elementType: "geometry.fill",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "arterial",
 
+				elementType: "geometry.stroke",
 
+				stylers: {
 
+					color: "#0b3d51"
 
+				}
 
+			},
 
+			{
 
+				featureType: "local",
 
+				elementType: "geometry",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "land",
 
+				elementType: "all",
 
+				stylers: {
 
+					color: "#08304b"
 
+				}
 
+			},
 
+			{
 
+				featureType: "railway",
 
+				elementType: "geometry.fill",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "railway",
 
+				elementType: "geometry.stroke",
 
+				stylers: {
 
+					color: "#08304b"
 
+				}
 
+			},
 
+			{
 
+				featureType: "subway",
 
+				elementType: "geometry",
 
+				stylers: {
 
+					lightness: -70
 
+				}
 
+			},
 
+			{
 
+				featureType: "building",
 
+				elementType: "geometry.fill",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "all",
 
+				elementType: "labels.text.fill",
 
+				stylers: {
 
+					color: "#857f7f"
 
+				}
 
+			},
 
+			{
 
+				featureType: "all",
 
+				elementType: "labels.text.stroke",
 
+				stylers: {
 
+					color: "#000000"
 
+				}
 
+			},
 
+			{
 
+				featureType: "building",
 
+				elementType: "geometry",
 
+				stylers: {
 
+					color: "#022338"
 
+				}
 
+			},
 
+			{
 
+				featureType: "green",
 
+				elementType: "geometry",
 
+				stylers: {
 
+					color: "#062032"
 
+				}
 
+			},
 
+			{
 
+				featureType: "boundary",
 
+				elementType: "all",
 
+				stylers: {
 
+					color: "#1e1c1c"
 
+				}
 
+			},
 
+			{
 
+				featureType: "manmade",
 
+				elementType: "geometry",
 
+				stylers: {
 
+					color: "#022338"
 
+				}
 
+			},
 
+			{
 
+				featureType: "poi",
 
+				elementType: "all",
 
+				stylers: {
 
+					visibility: "off"
 
+				}
 
+			},
 
+			{
 
+				featureType: "all",
 
+				elementType: "labels.icon",
 
+				stylers: {
 
+					visibility: "off"
 
+				}
 
+			},
 
+			{
 
+				featureType: "all",
 
+				elementType: "labels.text.fill",
 
+				stylers: {
 
+					color: "#2da0c6",
 
+					visibility: "on"
 
+				}
 
+			},
 
+			{
 
+				featureType: "background",
 
+				elementType: "all",
 
+				stylers: {
 
+					color: "#200000"
 
+				}
 
+			}
 
+		]
 
+	},
 
+	defaultconfig: [{
 
+		key: 'theme',
 
+		value: 'dark',
 
+		label: '界面主题',
 
+		type: 'select',
 
+		required: true,
 
+		options: [{
 
+			value: 'dark',
 
+			label: '深色主题'
 
+		}, {
 
+			value: 'red',
 
+			label: '紅色主题'
 
+		}]
 
+	}, {
 
+		key: 'refreshtime',
 
+		value: 10 * 1000,
 
+		label: '刷新时间',
 
+		type: 'number',
 
+		required: true
 
+	}, {
 
+		key: 'turntime',
 
+		value: 20 * 1000,
 
+		label: '切换时间',
 
+		type: 'select',
 
+		required: true,
 
+		options: [{
 
+			value: 20 * 1000,
 
+			label: '20秒'
 
+		}, {
 
+			value: 60 * 1000,
 
+			label: '1分钟'
 
+		}, {
 
+			value: 2 * 60 * 1000,
 
+			label: '2分钟'
 
+		}, {
 
+			value: 5 * 60 * 1000,
 
+			label: '5分钟'
 
+		}]
 
+	}, {
 
+		key: 'serverurl',
 
+		value: '/',
 
+		label: '接口地址',
 
+		type: 'text',
 
+		required: true
 
+	}],
 
+	/**
 
+	 * 获取系统配置
 
+	 */
 
+	getConfig: function() {
 
+		var config = localStorage.getItem("config");
 
+		if (!config) {
 
+			config = this.defaultconfig;
 
+		} else {
 
+			config = JSON.parse(config);
 
+		}
 
+		return config;
 
+	}
 
+}

+ 68 - 0
display_model_for_smartagriculture/public/dark_theme.css
Zobrazit soubor 

@@ -0,0 +1,68 @@
 
+@charset "utf-8";
 
+
 
+.flex {
 
+	display: flex;
 
+}
 
+
 
+.flex_item {
 
+	flex: 1;
 
+}
 
+
 
+.dark {
 
+	background: #000000;
 
+	color: #fff;
 
+}
 
+
 
+.dark .title {
 
+	text-align: center;
 
+	color: #fff;
 
+	font-size: 24px;
 
+	/* border-bottom: 1px solid #f56c6c47; */
 
+}
 
+
 
+.dark .setting_panel {}
 
+
 
+.dark .setting_panel .setting_panel_maker {
 
+	position: fixed;
 
+	left: 0px;
 
+	top: 0px;
 
+	width: 100%;
 
+	height: 100%;
 
+	z-index: 1;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner {
 
+	position: fixed;
 
+	background: #00ff6626;
 
+	border-radius: 5px;
 
+	z-index: 2;
 
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+
 
+.dark .setting_panel .inner_contaner .settingPanelCloseBtn {
 
+	position: absolute;
 
+	right: -10px;
 
+	top: -10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingPanelCloseBtn:hover {
 
+	color: #26871a
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .setting_panel_title {
 
+	height: 60px;
 
+	line-height: 60px;
 
+	text-align: center;
 
+	font-size: 20px;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingForm {
 
+	padding-right: 70px;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingForm .el-form-item__label {
 
+	color: #fff;
 
+}
 
+

+ 47 - 0
display_model_for_smartagriculture/public/data/mapdata.json
Zobrazit soubor 

@@ -0,0 +1,47 @@
 
+{
 
+	"geoCoordMap": [
 
+		[116.448537, 39.924453],
 
+		[116.706099, 39.94437],
 
+		[116.179477, 39.908515],
 
+		[116.336429, 39.871755],
 
+		[116.336429, 39.871755],
 
+		[116.443219, 39.846832],
 
+		[124.541, 40.4242],
 
+		[116.433086, 39.876794],
 
+		[116.372648, 39.910231],
 
+		[116.374014, 39.901043],
 
+		[116.428128, 39.913496],
 
+		[116.4494, 39.893625],
 
+		[116.413108, 39.911725],
 
+		[116.431505, 39.894124],
 
+		[116.397657, 39.879674],
 
+		[118.8062, 31.9208],
 
+		[116.395789, 39.893792],
 
+		[116.437255, 39.897196],
 
+		[116.447621, 39.900323],
 
+		[116.452148, 39.898912],
 
+		[116.456874, 39.900362],
 
+		[116.451583, 39.897435],
 
+		[116.45107, 39.901455],
 
+		[116.451879, 39.898403],
 
+		[116.244815,39.726849 ],
 
+		[116.378024,39.833443 ],
 
+		[116.152805,39.940924 ],
 
+		[116.662296,39.862964 ],
 
+		[116.338199,39.925128 ],
 
+		[116.255801,39.714174 ],
 
+		[116.454929,39.752193 ],
 
+		[116.571658,39.874558 ],
 
+		[116.178897,39.858748 ],
 
+		[116.475528,39.879828 ],
 
+		[116.306613,39.815513 ],
 
+		[116.31348,40.202596  ],
 
+		[116.972659,40.113384 ],
 
+		[117.392886,40.005121 ],
 
+		[116.146717,39.698784 ],
 
+		[116.005268,39.899251 ],
 
+		[116.773624,40.376939 ],
 
+		[116.507206,40.358105 ],
 
+		[116.14191,40.215636  ]
 
+	]
 
+}

binární
display_model_for_smartagriculture/public/favicon.ico
Zobrazit soubor


+ 172 - 0
display_model_for_smartagriculture/public/utils.js
Zobrazit soubor 

@@ -0,0 +1,172 @@
 
+import {
 
+	ElMessage
 
+} from 'element-plus'
 
+import {
 
+	ElMessageBox
 
+} from 'element-plus'
 
+
 
+export default {
 
+	name: "utils",
 
+	/**
 
+	 * 保存界面配置参数
 
+	 * @param {Object} config
 
+	 */
 
+	saveConfig: function(config) {
 
+		localStorage.setItem("config", JSON.stringify(config));
 
+	},
 
+	showerror: function(msg) {
 
+		ElMessage.error(msg);
 
+	},
 
+	showconfirm: function(msg) {
 
+		ElMessageBox.confirm(
 
+				msg,
 
+				'提示', {
 
+					confirmButtonText: '确定',
 
+					cancelButtonText: '取消',
 
+					type: 'warning',
 
+				}
 
+			)
 
+			.then(() => {
 
+				ElMessage({
 
+					type: 'success',
 
+					message: '退出成功',
 
+				})
 
+			})
 
+			.catch(() => {})
 
+	},
 
+	/**
 
+	 * 创建图表标题
 
+	 * @param {Object} title
 
+	 */
 
+	createChartTitle: function(title) {
 
+		return {
 
+			text: title,
 
+			textStyle: {
 
+				color: "#fff",
 
+				fontWeight: 'normal'
 
+			},
 
+			x: 'center',
 
+			y: '10'
 
+		}
 
+	},
 
+	/**
 
+	 * 创建图表背景
 
+	 * @param {Object} title
 
+	 */
 
+	createChartGaid: function(left, right, top, bottom) {
 
+		return {
 
+			left: left ? left : '30',
 
+			right: right ? right : '10',
 
+			top: top ? top : '50px',
 
+			bottom: bottom ? bottom : '40'
 
+		}
 
+	},
 
+	/**
 
+	 * 创建图表背景
 
+	 * @param {Object} title
 
+	 */
 
+	createChartBaseOption: function(title, left, right, top, bottom, categorys) {
 
+		return {
 
+			title: this.createChartTitle(title),
 
+			tooltip: {
 
+				show: true,
 
+				trigger: 'axis'
 
+			},
 
+			grid: this.createChartGaid(left, right, top, bottom),
 
+			xAxis: {
 
+				type: 'category',
 
+				axisLine: {
 
+					show: true,
 
+					lineStyle: {
 
+						color: this.getChartXColor()
 
+					}
 
+				},
 
+				axisLabel: {
 
+					color: this.getChartXTextColor()
 
+				},
 
+				axisTick: {
 
+					show: false
 
+				},
 
+				splitLine: {
 
+					show: false
 
+				},
 
+				boundaryGap: false,
 
+				data: categorys
 
+			},
 
+			yAxis: {
 
+				type: 'value',
 
+				axisLabel: {
 
+					color: this.getChartYTextColor(),
 
+				},
 
+				axisLine: {
 
+					show: true,
 
+					lineStyle: {
 
+						color: this.getChartXColor()
 
+					}
 
+				},
 
+				splitLine: {
 
+					lineStyle: {
 
+						color: this.getChartYColor(),
 
+						type: 'dashed'
 
+					},
 
+				}
 
+			}
 
+		}
 
+	},
 
+	/**
 
+	 * 获取x轴颜色
 
+	 * @param {Object} title
 
+	 */
 
+	getChartXColor: function() {
 
+		// return '#85C1D9'
 
+		return '#00FAC166'
 
+	},
 
+	/**
 
+	 * 获取x轴文本颜色
 
+	 * @param {Object} title
 
+	 */
 
+	getChartXTextColor: function() {
 
+		// return '#8BC4F2'
 
+		// return '#F56C6Cbb'
 
+		return '#ffffffdd'
 
+	},
 
+	/**
 
+	 * 获取y轴颜色
 
+	 * @param {Object} title
 
+	 */
 
+	getChartYColor: function() {
 
+		// return '#355C84'
 
+		return '#00FAC166'
 
+	},
 
+	/**
 
+	 * 获取y轴文本颜色
 
+	 * @param {Object} title
 
+	 */
 
+	getChartYTextColor: function() {
 
+		// return '#8BC4F2'
 
+		// return '#F56C6Cbb'
 
+		return '#ffffffdd'
 
+	}
 
+}
 
+
 
+Date.prototype.format = function(fmt) {
 
+	var o = {
 
+		"M+": this.getMonth() + 1, //月份 
+		"d+": this.getDate(), //日 
+		"h+": this.getHours(), //小时 
+		"m+": this.getMinutes(), //分 
+		"s+": this.getSeconds(), //秒 
+		"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
+		"S": this.getMilliseconds() //毫秒 
+	};
 
+	if (/(y+)/.test(fmt)) {
 
+		fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 
+	}
 
+	for (var 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;
 
+}

+ 529 - 0
display_model_for_smartagriculture/src/App.vue
Zobrazit soubor 

@@ -0,0 +1,529 @@
 
+<template>
 
+	<transition name="bounce">
 
+		<welcome v-if="welcome" @loaddingend="loaddingend"></welcome>
 
+	</transition>
 
+	<transition name="bounce">
 
+		<div v-if="!welcome" class="container" :class="curTheme">
 
+			<el-row class="title">
 
+				<el-col :span="8">
 
+					<div class="time_div flex">
 
+						<div class="time " style="width:200px">
 
+							<el-icon>
 
+								<alarm-clock />
 
+							</el-icon>
 
+							<span>{{time}}</span>
 
+						</div>
 
+						<div class="flex_item weather">
 
+							<!-- 展示当前天气情况 -->
 
+							<!-- 天气 -->
 
+							<span class="item"><img style="width: 20px;position: relative;top: 5px;" src="./assets/5.png"></span>
 
+							<!-- 地区 -->
 
+							<span class="item">西安</span>
 
+							<!-- 温度 -->
 
+							<span class="item">23℃~25℃</span>
 
+							<!-- 空气质量 -->
 
+							<span class="item">空气质量 <span style="color:orangered">差</span></span>
 
+						</div>
 
+					</div>
 
+				</el-col>
 
+				<el-col :span="8" style="position: relative;">
 
+					<div
 
+						style="position: absolute; background: #26871a; left: -8px; width: 54px; height: 2px; transform: rotate(45deg); top: 59px;">
 
+					</div>
 
+					<div class="header">君君军智慧农业监控平台</div>
 
+					<div
 
+						style="position: absolute; background: #26871a; right: -9px; width: 55px; height: 2px; transform: rotate(-45deg); top: 59px;">
 
+					</div>
 
+					<div
 
+						style="position: absolute; left: 0px; bottom: 0px; height: 2px; width: 36px; background: rgb(0 0 0);border-radius: 10px;">
 
+					</div>
 
+					<div style="position: absolute;right:0px;bottom: 0px;height: 2px;width: 36px;background: #100c2a;">
 
+					</div>
 
+				</el-col>
 
+				<el-col :span="8">
 
+					<div class="flex menus_div">
 
+						<div class="menus flex_item flex">
 
+							<div class="flex_item">
 
+								<div class="menu_item" @click="turnPage('/index')">综合监控</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="menu_item" @click="turnPage('/crop')">作物监控</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="menu_item" @click="turnPage('/environment')">环境监控</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="menu_item" @click="turnPage('/market')">市场监控</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="menu_item" @click="turnPage('/device')">设备监控</div>
 
+							</div>
 
+						</div>
 
+						<div class="tools  flex" style="">
 
+							<div class="flex_item">
 
+								<div class="tool_item" @click="screen">
 
+									<el-icon>
 
+										<full-screen />
 
+									</el-icon>
 
+									<span>{{screenText}}</span>
 
+								</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="tool_item" @click="showSetting">
 
+									<el-icon>
 
+										<setting />
 
+									</el-icon>
 
+									<span>配置</span>
 
+								</div>
 
+							</div>
 
+							<div class="flex_item">
 
+								<div class="tool_item" @click="exit">
 
+									<el-icon>
 
+										<switch-button />
 
+									</el-icon>
 
+									<span>退出</span>
 
+							</div>
 
+								</div>
 
+						</div>
 
+					</div>
 
+				</el-col>
 
+			</el-row>
 
+
 
+			<div>
 
+				<transition name="bounce" mode="out-in">
 
+					<router-view></router-view>
 
+				</transition>
 
+			</div>
 
+
 
+			<!-- 系统菜单选择弹框 -->
 
+			<div class="menu_panel" v-if="menushow">
 
+				<div class="menu_panel_maker" @click="hideMenu">
 
+					<div class="inner_contaner" @click.stop="stopPropagation">
 
+						<el-row style="margin-top: 20px;" v-for="(item,index) in menus" :key="item.id">
 
+							<el-col :span="6" v-for="(subitem,subindex) in item" :key="subitem.id">
 
+								<div class="menu_item" @click="turnPage(subitem.url)">
 
+									<div class="icon">
 
+										<el-icon :size="40">
 
+											<component :is="subitem.icon" :size="40"></component>
 
+										</el-icon>
 
+									</div>
 
+									<div class="text">{{subitem.name}}</div>
 
+								</div>
 
+							</el-col>
 
+						</el-row>
 
+						<el-icon :size="25" class="menuPanelCloseBtn" @click="hideMenu">
 
+							<Close-bold :size="25" />
 
+						</el-icon>
 
+					</div>
 
+				</div>
 
+			</div>
 
+			<!-- 系统配置弹框 -->
 
+			<div class="setting_panel" v-if="settingshow">
 
+				<div class="setting_panel_maker" @click="hideSetting">
 
+					<div class="inner_contaner" @click.stop="stopPropagation">
 
+						<el-icon :size="25" class="settingPanelCloseBtn" @click="hideSetting">
 
+							<Close-bold :size="25" />
 
+						</el-icon>
 
+						<div class="setting_panel_title">
 
+							系统配置
 
+						</div>
 
+						<el-form ref="settingFormRef" :model="settingForm" status-icon :rules="rules"
 
+							label-width="120px" class="settingForm">
 
+							<el-form-item :label="item.label+':'" prop="item.type" v-for="(item,index) in configs">
 
+								<!-- 识别配置项类型并创建对应组件 -->
 
+								<el-input v-if="item.type != 'select'" v-model="settingForm[item.key]"
 
+									placeholder="请输入{{item.label}}" type="item.type" autocomplete="off" />
 
+								<el-select v-if="item.type == 'select'" style="width:100%"
 
+									v-model="settingForm[item.key]" placeholder="请选择{{item.label}}">
 
+									<el-option v-for="(optionitem,index1) in item.options" :label="optionitem.label"
 
+										:value="optionitem.value" />
 
+								</el-select>
 
+							</el-form-item>
 
+							<el-form-item>
 
+								<el-row style="width:100%">
 
+									<el-col :span="11">
 
+										<el-button style="width:100%" type="primary"
 
+											@click="submitForm(settingFormRef)">
 
+											保存配置</el-button>
 
+									</el-col>
 
+									<el-col :span="2">
 
+									</el-col>
 
+									<el-col :span="11">
 
+										<el-button style="width:100%" @click="defalutForm(settingFormRef)">恢复默认
 
+										</el-button>
 
+									</el-col>
 
+								</el-row>
 
+							</el-form-item>
 
+						</el-form>
 
+
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</transition>
 
+</template>
 
+
 
+<script>
 
+	import "/public/dark_theme.css"
 
+
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+
 
+
 
+	import welcome from "./pages/welcome.vue"
 
+
 
+	export default {
 
+		components: {
 
+			welcome
 
+		},
 
+		data() {
 
+			return {
 
+				welcome: true,
 
+				titleHeight: 80,
 
+				menuHeight: 35,
 
+				time: new Date().format('yyyy-MM-dd hh:mm:ss'),
 
+				//当前主题，可以通过设置进行控制
 
+				curTheme: "dark",
 
+				turntime: 60 * 1000,
 
+
 
+				//菜单居中
 
+				settingPanelTop: 11,
 
+				//菜单居中
 
+				settingPanelLeft: 11,
 
+				settingPanelWidth: 600,
 
+				settingPanelHeight: 350,
 
+
 
+				settingshow: false,
 
+
 
+				configs: config.getConfig(),
 
+				settingForm: {},
 
+				rules: {},
 
+				timer: null,
 
+				isfullscreen: false,
 
+				screenText: '全屏'
 
+			}
 
+		},
 
+		unmounted: function() {
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		mounted: function() {
 
+      console.log("hello")
 
+			this.settingPanelTop = ($(window).height() - this.settingPanelHeight) / 2;
 
+			this.settingPanelLeft = ($(window).width() - this.settingPanelWidth) / 2;
 
+
 
+			var that = this;
 
+			this.timer = setInterval(function() {
 
+				that.time = new Date().format('yyyy-MM-dd hh:mm:ss');
 
+			}, 1000);
 
+
 
+			this.configs.forEach(function(item, index, arr) {
 
+				that.settingForm[item.key] = item.value;
 
+
 
+				that.rules[item.key] = [{
 
+					required: item.required,
 
+					message: '请输入' + item.label,
 
+					trigger: 'blur'
 
+				}];
 
+
 
+				//更新界面主题
 
+				if (item.key == 'theme') {
 
+					that.curTheme = item.value
 
+				}
 
+				//更细切换周期
 
+				if (item.key == 'turntime') {
 
+					that.turntime = item.value * 1
 
+				}
 
+			});
 
+		},
 
+		methods: {
 
+			loaddingend: function() {
 
+				this.welcome = false;
 
+			},
 
+			/**
 
+			 * 切换界面
 
+			 * @param {Object} path
 
+			 */
 
+			turnPage: function(path) { //切换界面
 
+				this.$router.push(path);
 
+				this.hideSetting(); //切换界面
 
+			},
 
+			/**
 
+			 * 全屏切换
 
+			 */
 
+			screen: function() {
 
+				if (this.isfullscreen) {
 
+					if (document.exitFullscreen) {
 
+						document.exitFullscreen();
 
+					} else if (document.msExitFullscreen) {
 
+						document.msExitFullscreen();
 
+					} else if (document.mozCancelFullScreen) {
 
+						document.mozCancelFullScreen();
 
+					} else if (document.webkitExitFullscreen) {
 
+						document.webkitExitFullscreen();
 
+					}
 
+					this.screenText = '全屏';
 
+				} else {
 
+					var element = document.documentElement;
 
+					if (element.requestFullscreen) {
 
+						element.requestFullscreen();
 
+					} else if (element.msRequestFullscreen) {
 
+						element.msRequestFullscreen();
 
+					} else if (element.mozRequestFullScreen) {
 
+						element.mozRequestFullScreen();
 
+					} else if (element.webkitRequestFullscreen) {
 
+						element.webkitRequestFullscreen();
 
+					}
 
+					this.screenText = '恢复';
 
+				}
 
+				this.isfullscreen = !this.isfullscreen;
 
+			},
 
+			/**
 
+			 * 退出系统
 
+			 */
 
+			exit: function() {
 
+				utils.showconfirm('确定要退出吗？');
 
+			},
 
+			/**
 
+			 * 显示设置框
 
+			 */
 
+			showSetting: function() {
 
+				this.settingshow = true;
 
+			},
 
+			/**
 
+			 * 显示设置框
 
+			 */
 
+			hideSetting: function() {
 
+				this.settingshow = false;
 
+			},
 
+			/**
 
+			 * 阻止事件冒泡
 
+			 */
 
+			stopPropagation: function() {},
 
+			/**
 
+			 * 恢复默认
 
+			 */
 
+			defalutForm: function() {
 
+				var that = this;
 
+				this.configs = config.defaultconfig;
 
+				this.configs.forEach(function(item, index, arr) {
 
+					that.settingForm[item.key] = item.value;
 
+
 
+					that.rules[item.key] = [{
 
+						required: item.required,
 
+						message: '请输入' + item.label,
 
+						trigger: 'blur'
 
+					}];
 
+				});
 
+			},
 
+			/**
 
+			 * 提交表单
 
+			 */
 
+			submitForm: function() {
 
+				var that = this;
 
+				this.$refs.settingFormRef.validate((valid, fields) => {
 
+					if (!valid) {
 
+						return;
 
+					}
 
+					//将数据组合成数组格式
 
+					var configdata = [];
 
+					for (var key in that.settingForm) {
 
+						var itemconfig = null;
 
+						for (var i = 0; i < that.configs.length; i++) {
 
+							if (that.configs[i].key == key) {
 
+								itemconfig = that.configs[i];
 
+								break;
 
+							}
 
+						}
 
+						if (!itemconfig) { //未识别的配置项
 
+							continue;
 
+						}
 
+						//更新数据
 
+						itemconfig.value = that.settingForm[key];
 
+						configdata.push(itemconfig);
 
+					}
 
+
 
+					//保存系统配置
 
+					utils.saveConfig(configdata);
 
+
 
+					//刷新并应用系统配置
 
+					this.refreshConfig();
 
+				});
 
+			},
 
+			/**
 
+			 * 刷新并应用系统配置
 
+			 */
 
+			refreshConfig: function() {
 
+				//更新配置表单对应数据
 
+				this.configs = config.getConfig();
 
+				var that = this;
 
+				this.configs.forEach(function(item, index, arr) {
 
+					that.settingForm[item.key] = item.value;
 
+
 
+					that.rules[item.key] = [{
 
+						required: item.required,
 
+						message: '请输入' + item.label,
 
+						trigger: 'blur'
 
+					}];
 
+
 
+					//更新界面主题
 
+					if (item.key == 'theme') {
 
+						that.curTheme = item.value
 
+					}
 
+
 
+					//简单期间，直接刷新界面
 
+					window.location.reload();
 
+				});
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style>
 
+	.flex {
 
+		display: flex;
 
+	}
 
+
 
+	.flex_item {
 
+		flex: 1;
 
+	}
 
+
 
+	.title {
 
+		height: v-bind(titleHeight+'px');
 
+		position: relative;
 
+	}
 
+
 
+	.title .time_div {
 
+		border-bottom: 1px solid #26871a;
 
+		line-height: 40px;
 
+		height: 40px;
 
+	}
 
+
 
+	.title .menus_div {
 
+		border-bottom: 1px solid #26871a;
 
+		height: 40px;
 
+	}
 
+
 
+	.title .time {
 
+		line-height: 40px;
 
+		height: 40px;
 
+		font-size: 14px;
 
+		text-align: left;
 
+		padding-left: 10px;
 
+	}
 
+
 
+	.title .time i {
 
+		margin-right: 5px;
 
+		position: relative;
 
+		top: 2px;
 
+	}
 
+
 
+	.title .header {
 
+		line-height: v-bind(titleHeight+'px');
 
+		letter-spacing: 3px;
 
+		height: 79px;
 
+		border-bottom: 1px solid #26871a;
 
+		background: linear-gradient(to left, #30a55f, #24fda3, #2f9737);
 
+		-webkit-background-clip: text;
 
+		color: transparent;
 
+	}
 
+
 
+	.title .menus {
 
+		display: flex;
 
+		height: 60px;
 
+		line-height: 60px;
 
+	}
 
+
 
+	.title .menus .menu_item {
 
+		height: 30px;
 
+		line-height: 30px;
 
+		font-size: 14px;
 
+		margin: 0 auto;
 
+		width: 90%;
 
+		background: rgba(255, 255, 255, 0.3);
 
+		border-radius: 3px;
 
+		margin-top: 5px;
 
+		cursor: pointer;
 
+	}
 
+
 
+	.title .menus .menu_item:hover {
 
+		background: #26871a;
 
+	}
 
+
 
+	.title .tools {
 
+		width: 180px;
 
+		padding-top: 5px;
 
+		height: 60px;
 
+	}
 
+
 
+	.title .tool_item {
 
+		font-size: 14px;
 
+		cursor: pointer;
 
+	}
 
+
 
+	.title .tool_item i {
 
+		height: 30px;
 
+		line-height: 30px;
 
+		margin-right: 5px;
 
+		position: relative;
 
+		top: 2px;
 
+	}
 
+
 
+	.title .tool_item:hover {
 
+		color: #26871a;
 
+	}
 
+
 
+	.anchorBL {
 
+		display: none !important;
 
+	}
 
+
 
+	.container {
 
+		position: fixed;
 
+		left: 0px;
 
+		top: 0px;
 
+		width: 100%;
 
+		height: 100%;
 
+		overflow: auto;
 
+	}
 
+
 
+	.setting_panel .inner_contaner {
 
+		width: v-bind(settingPanelWidth+"px");
 
+		height: v-bind(settingPanelHeight+"px");
 
+		top: v-bind(settingPanelTop+"px");
 
+		left: v-bind(settingPanelLeft+"px");
 
+	}
 
+
 
+	.bounce-enter-active {
 
+		animation: bounce-in .5s ease-out both;
 
+	}
 
+
 
+	.bounce-leave-active {
 
+		animation: bounce-in .5s reverse ease-in both;
 
+	}
 
+
 
+	.weather {
 
+		font-size: 14px;
 
+		text-align: left;
 
+	}
 
+
 
+	.weather .item {
 
+		margin: 0 10px;
 
+	}
 
+
 
+	@keyframes bounce-in {
 
+		0% {
 
+			transform: scale(0);
 
+		}
 
+
 
+		50% {
 
+			transform: scale(1.25);
 
+		}
 
+
 
+		100% {
 
+			transform: scale(1);
 
+		}
 
+	}
 
+</style>

binární
display_model_for_smartagriculture/src/assets/1.mp4
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/111.webp
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/222.webp
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/333.webp
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/444.webp
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/5.png
Zobrazit soubor


binární
display_model_for_smartagriculture/src/assets/logo.png
Zobrazit soubor


+ 31 - 0
display_model_for_smartagriculture/src/main.js
Zobrazit soubor 

@@ -0,0 +1,31 @@
 
+import { createApp } from 'vue'
 
+
 
+import axios from 'axios';
 
+import $ from 'jquery'
 
+import * as echarts from 'echarts'
 
+
 
+import ElementPlus from 'element-plus'
 
+import 'element-plus/dist/index.css'
 
+import * as ElIcons from '@element-plus/icons-vue'
 
+import request from './utils/request'
 
+import utils from '/public/utils.js'
 
+import api from '/public/api.js'
 
+
 
+import '/public/dark_theme.css';
 
+
 
+import App from './App.vue'
 
+import router from './router'
 
+// import request from "./utils/request";
 
+
 
+
 
+var app = createApp(App);
 
+// vue3 给原型上挂载属性
 
+app.config.globalProperties.$echarts = echarts;
 
+app.config.globalProperties.$request = request;
 
+for (const name in ElIcons) {
 
+	app.component(name, ElIcons[name])
 
+}
 
+app.use(router);
 
+app.use(ElementPlus);
 
+
 
+app.mount('#app')

+ 521 - 0
display_model_for_smartagriculture/src/pages/crop.vue
Zobrazit soubor 

@@ -0,0 +1,521 @@
 
+<template>
 
+	<el-row>
 
+		<el-col :span="6">
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">基本情况</div>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<football />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{size}}</span>
 
+									<span style="font-size:20px;margin-left:5px">㎡</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">种植面积</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<user />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{count}}</span>
 
+									<span style="font-size:20px;margin-left:5px">户</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">农户数量</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<cellphone />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{devicecount}}</span>
 
+									<span style="font-size:20px;margin-left:5px">个</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">注册设备</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 55)/2+'px'}">
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<SetUp />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{category}}</span>
 
+									<span style="font-size:20px;margin-left:5px">种</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">作物种类</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<money />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{cost}}</span>
 
+									<span style="font-size:20px;margin-left:5px">元</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">作物销量</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<basketball />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{deviceonlinecount}}</span>
 
+									<span style="font-size:20px;margin-left:5px">个</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">活跃设备</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}">
 
+				<div class="itemtitle" style="">视频监控</div>
 
+				<div style="padding:10px">
 
+					<div>
 
+						<div v-for="(item,index) in videos" class="vidoeitem" :style="{height:(((height-80)/3 - 10 - 35 - 20)/2)+'px'}">
 
+							<div class="flex" style="height:30px;line-height: 30px;">
 
+								<div class="flex_item" style="font-size:16px">
 
+									{{item.name}}
 
+								</div>
 
+								<div class="flex_item" style="font-size:12px;text-align: right;padding-right:10px">
 
+									<span v-if="item.status == '1'" style="color:#00FAC1">监测正常</span>
 
+									<span v-if="item.status != '1'" style="color:#FF5722">监测异常</span>
 
+								</div>
 
+							</div>
 
+							<div style="position: relative;width:100%;margin: 0 auto;">
 
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;top:0px;width:20px;height:2px;:"></div>
 
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;top:0px;width:2px;height:20px;"></div>
 
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;top:0px;width:20px;height:2px;"></div>
 
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;top:0px;width:2px;height:20px;"></div>
 
+								
+								<div class="inner" :style="{height:(((height-80)/3 - 10 - 35 - 20 - 30 - 30)/2)+'px'}">
 
+									<img :src="item.url" style="height:100%;width:105%"/>
 
+								</div>
 
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;bottom:0px;width:20px;height:2px;"></div>
 
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;bottom:0px;width:2px;height:20px;"></div>
 
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;bottom:0px;width:20px;height:2px;"></div>
 
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;bottom:0px;width:2px;height:20px;"></div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">作物种类</div>
 
+				<!-- 展示字符云，各种作物占比 -->
 
+				<v-chart ref="cropchart" :style="{height:(((height-80)/3 - 20)+'px')}" :option="cropoption" />
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="18" >
 
+			<div style="padding:10px;position: relative;">
 
+				<!-- 展示可搜索的地图 -->
 
+				<div id="mapchart" style="position: relative;" :style="{height:(height-80 - 20)+'px'}"></div>
 
+				
+				<div style="position: absolute;left:0px;top:0px;width:20px;height:2px;background:#FF5722"></div>
 
+				<div style="position: absolute;left:0px;top:0px;width:2px;height:20px;background:#FF5722"></div>
 
+				
+				<div style="position: absolute;right:10px;top:0px;width:20px;height:2px;background:#FF5722"></div>
 
+				<div style="position: absolute;right:10px;top:0px;width:2px;height:20px;background:#FF5722"></div>
 
+				
+				<div style="position: absolute;left:0px;bottom:0px;width:20px;height:2px;background:#FF5722"></div>
 
+				<div style="position: absolute;left:0px;bottom:0px;width:2px;height:20px;background:#FF5722"></div>
 
+				
+				<div style="position: absolute;right:10px;bottom:0px;width:20px;height:2px;background:#FF5722"></div>
 
+				<div style="position: absolute;right:10px;bottom:0px;width:2px;height:20px;background:#FF5722"></div>
 
+			</div>
 
+		</el-col>
 
+	</el-row>
 
+</template>
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+	import VChart, {
 
+		THEME_KEY
 
+	} from "vue-echarts";
 
+
 
+	import * as echarts from 'echarts';
 
+	import 'echarts-extension-amap';
 
+
 
+	import 'echarts-wordcloud';
 
+		
+	export default{
 
+		components: {
 
+			VChart
 
+		},
 
+		provide: {
 
+			[THEME_KEY]: "dark"
 
+		},
 
+		data(){
 
+			 return{
 
+				height: $(window).height(),
 
+				size: (Math.random(100) * 1000).toFixed(0),
 
+				count: (Math.random(100) * 1000).toFixed(0),
 
+				category: (Math.random(100) * 1000).toFixed(0),
 
+				cost: (Math.random(100) * 1000).toFixed(0),
 
+				devicecount: (Math.random(100) * 1000).toFixed(0),
 
+				deviceonlinecount: (Math.random(100) * 100).toFixed(0),
 
+				videos:[{
 
+					id:1,
 
+					name:'摄像001',
 
+					url:'/src/assets/111.webp',
 
+					status:'1'
 
+				},{
 
+					id:2,
 
+					name:'摄像002',
 
+					url:'/src/assets/222.webp',
 
+					status:'2'
 
+				},{
 
+					id:3,
 
+					name:'摄像003',
 
+					url:'/src/assets/333.webp',
 
+					status:'1'
 
+				},{
 
+					id:4,
 
+					name:'摄像004',
 
+					url:'/src/assets/444.webp',
 
+					status:'1'
 
+				}],
 
+				categorys:['玉米', '水稻', '小麦', '大豆', '青稞', '蔬菜', '水果', '花卉', '薯类', '药材', '蚕豆', '油籽', '蔓青', '大芥', '花生',
 
+					'胡麻', '大麻', '向日葵', '梨', '苹果', '桃', '杏', '核桃', '李子', '樱桃', '草莓', '酸梨', '野杏', '毛桃', '苞瑙', '山樱桃',
 
+					'沙棘', '草莓'
 
+				],
 
+				cropoption: {},
 
+				charts: {},
 
+				timer: null,
 
+			 }
 
+		},
 
+		mounted:function(){
 
+			var that = this;
 
+			$(window).resize(function() {
 
+				this.height = $(window).height() - this.titleheight;
 
+			
+				for (var key in that.charts) {
 
+					that.charts[key].resize();
 
+				}
 
+				that.$refs['cropchart'].resize();
 
+			});
 
+			
+			
+			this.loadData();
 
+			
+			//开始定时刷新报表数据
 
+			this.startRefreshChart();
 
+		},
 
+		unmounted:function(){
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		methods: {
 
+			/**
 
+			 * 定时刷新报表数据
 
+			 */
 
+			startRefreshChart: function() {
 
+				if (this.timer) {
 
+					clearInterval(this.timer);
 
+				}
 
+				var that = this;
 
+			
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
 
+				var refreshtime = 60 * 1000;
 
+				config.getConfig().forEach(function(item, index) {
 
+					if (item.key == 'refreshtime') {
 
+						refreshtime = item.value;
 
+					}
 
+				});
 
+			
+				this.timer = setInterval(function() {
 
+					that.size = (Math.random(100) * 1000).toFixed(0);
 
+					that.count = (Math.random(100) * 1000).toFixed(0);
 
+					that.category = (Math.random(100) * 1000).toFixed(0);
 
+					that.cost = (Math.random(100) * 1000).toFixed(0);
 
+					that.devicecount = (Math.random(100) * 1000).toFixed(0);
 
+					that.deviceonlinecount = (Math.random(100) * 100).toFixed(0);
 
+					//------------------------------
 
+					that.cropoption.series[0].data = [];
 
+					that.categorys.forEach(function(item, index) {
 
+						that.cropoption.series[0].data.push({
 
+							name: item,
 
+							value: (Math.random(100) * 1000).toFixed(0),
 
+							textStyle: {
 
+								color: config.colors[index % config.colors.length]
 
+							}
 
+						});
 
+					})
 
+				}, refreshtime);
 
+			},
 
+			loadData: function() {
 
+				var that = this;
 
+				api.loadMapData(function(res) {
 
+					if (!res || res.status != 200) {
 
+						utils.showerror("数据加载失败！");
 
+						return;
 
+					}
 
+					that.initMapChart(res);
 
+				});
 
+				this.cropoption = this.initcropoption();
 
+			},
 
+			initcropoption: function() {
 
+				var data = [];
 
+				this.categorys.forEach(function(item, index) {
 
+					data.push({
 
+						name: item,
 
+						value: (Math.random(100) * 1000).toFixed(0),
 
+						textStyle: {
 
+							color: config.colors[index % config.colors.length]
 
+						}
 
+					});
 
+				})
 
+				return {
 
+					backgroundColor:'#000000',
 
+					tooltip: {
 
+						show: true,
 
+						position: 'top',
 
+						textStyle: {
 
+							fontSize: 14
 
+						}
 
+					},
 
+					grid: {
 
+						top: '40px'
 
+					},
 
+					series: [{
 
+						type: "wordCloud",
 
+						// 网格大小，各项之间间距
 
+						gridSize: 20,
 
+						// 形状 circle 圆，cardioid  心， diamond 菱形，
 
+						// triangle-forward 、triangle 三角，star五角星
 
+						shape: 'circle',
 
+						// 字体大小范围
 
+						sizeRange: [12, 30],
 
+						// 文字旋转角度范围
 
+						rotationRange: [0, 90],
 
+						// 旋转步值
 
+						rotationStep: 90,
 
+						// 自定义图形
 
+						// maskImage: maskImage,
 
+						left: 'center',
 
+						top: '40px',
 
+						right: null,
 
+						bottom: null,
 
+						// 画布宽
 
+						width: '90%',
 
+						// 画布高
 
+						height: '80%',
 
+						// 是否渲染超出画布的文字
 
+						drawOutOfBound: false,
 
+						data: data
 
+					}]
 
+				};
 
+			},
 
+			initMapChart: function(res) {
 
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
 
+				var values = [];
 
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
 
+					values.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
 
+						.toFixed(0));
 
+				}
 
+			
+				var option = {
 
+					geoCoordMap: res.data.geoCoordMap,
 
+					title: utils.createChartTitle('产区概览'),
 
+					amap: {
 
+						rotateEnable: true,
 
+						pitchEnable: true,
 
+						pitch: 45,
 
+						// rotation: -45,
 
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
 
+						viewMode: '3D',
 
+						// 高德地图支持的初始化地图配置
 
+						// 高德地图初始中心经纬度
 
+						center: [116.436561, 39.897346],
 
+						// 高德地图初始缩放级别
 
+						zoom: 9,
 
+						// 是否开启resize
 
+						resizeEnable: true,
 
+						// 自定义地图样式主题
 
+						mapStyle: 'amap://styles/darkblue',
 
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
 
+						renderOnMoving: true,
 
+						// ECharts 图层的 zIndex 默认 2000
 
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
 
+						echartsLayerZIndex: 2019,
 
+						// 设置 ECharts 图层是否可交互 默认为 true
 
+						// 设置为 false 可实现高德地图自身图层交互
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						echartsLayerInteractive: true,
 
+						// 是否启用大数据模式 默认为 false
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						layers: [new AMap.TileLayer.Satellite()],
 
+						largeMode: false
 
+						// 说明：如果想要添加卫星、路网等图层
 
+						// 暂时先不要使用layers配置，因为存在Bug
 
+						// 建议使用amap.add的方式，使用方式参见最下方代码
 
+					},
 
+					series: [{
 
+						type: 'effectScatter',
 
+						// 使用百度地图坐标系
 
+						coordinateSystem: 'amap',
 
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
 
+						symbol: 'pin',
 
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
 
+						symbolSize: [20, 20],
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#FF5252', //标志颜色
 
+							}
 
+						},
 
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
 
+						data: values,
 
+						rippleEffect: {
 
+							scale: 6,
 
+							brushType: "stroke"
 
+						},
 
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
 
+					}]
 
+				}
 
+				// 使用刚指定的配置项和数据显示图表。
 
+				mapchart.setOption(option);
 
+			
+				// 获取 ECharts 高德地图组件
 
+				var amapComponent = mapchart.getModel().getComponent('amap');
 
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
 
+				var amap = amapComponent.getAMap();
 
+				// 添加控件
 
+				amap.addControl(new AMap.Scale());
 
+				amap.addControl(new AMap.ToolBar());
 
+				amap.addControl(new AMap.ControlBar({
 
+					position: {
 
+						left: '10px',
 
+						top: '10px'
 
+					},
 
+					showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
 
+				}));
 
+				amap.addControl(new AMap.MapType({
 
+					defaultType: 1,
 
+					position: {
 
+						right: '30px',
 
+						top: '10px'
 
+					}
 
+				}));
 
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
 
+				amapComponent.setEChartsLayerInteractive(false);
 
+				
+				var disProvince = new AMap.DistrictLayer.Province({
 
+					zIndex: 1000,
 
+					adcode: [110000],
 
+					depth: 2,
 
+					styles: {
 
+						'fill': function(properties) {
 
+							// properties为可用于做样式映射的字段，包含
 
+							// NAME_CHN:中文名称
 
+							// adcode_pro
 
+							// adcode_cit
 
+							// adcode
 
+							// console.log(properties)
 
+							var adcode = properties.adcode;
 
+							// var colors = {};
 
+							// if (!colors[adcode]) {
 
+							// 	var gb = Math.random() * 155 + 50;
 
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
 
+							// }
 
+							// return colors[adcode];
 
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
 
+								'#2aa7ee', '#0270f2', '#488cf7'
 
+							];
 
+							return colors[adcode % colors.length] + 'aa';
 
+			
+							// return 'red';
 
+						},
 
+						'province-stroke': 'cornflowerblue',
 
+						'city-stroke': 'white', // 中国地级市边界
 
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
 
+					}
 
+				});
 
+				disProvince.setMap(amap);
 
+			
+				this.charts['mapchart'] = mapchart;
 
+				
+				// setTimeout(function(){
 
+				// 	amap.setZoom(10,false,30000);
 
+				// 	amap.setPitch(45,false,30000);
 
+				// },1000);
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped="scoped">
 
+	.chart {
 
+		padding: 10px;
 
+		overflow: hidden;
 
+	}
 
+	
+	.itemtitle {
 
+		background: linear-gradient(to right, #40a55f, #000, #000);
 
+		height: 35px;
 
+		line-height: 35px;
 
+		padding-left: 10px;
 
+	}
 
+	.vidoeitem{
 
+		width:50%;display: inline-block;
 
+		position: relative;
 
+	}
 
+	.inner{
 
+		width:90%;
 
+	}
 
+</style>

+ 595 - 0
display_model_for_smartagriculture/src/pages/device.vue
Zobrazit soubor 

@@ -0,0 +1,595 @@
 
+<template>
 
+	<!-- 设备种类
 
+	设备状态
 
+	设备告警
 
+	设备分布 -->
 
+	<el-row>
 
+		<el-col :span="18">
 
+			<div style="padding:10px;position: relative;">
 
+				<!-- 展示可搜索的地图 -->
 
+				<div id="mapchart" style="position: relative;" :style="{height:(height-80 - 20)+'px'}"></div>
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="6">
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">设备种类</div>
 
+				<v-chart ref="categorychart" :style="{height:(((height-80)/3 - 20 - 35)+'px')}" :option="categorychart" />
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">设备状态</div>
 
+				<v-chart ref="statuschart" :style="{height:(((height-80)/3 - 20 - 35)+'px')}" :option="statuschart" />
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3+15)+'px'}">
 
+				<div class="itemtitle" style="">设备告警</div>
 
+				<div :style="{height:(((height-80)/3)+'px')}">
 
+					<div v-for="(item,index) in alerts" class="alertitem" >
 
+						<div class="innner flex">
 
+							<div><el-icon size="22" style="position: relative;top:2px;color:#FF5722"><warning /></el-icon></div>
 
+							<div class="flex_item title">{{item.title}}</div>
 
+							<div style="width:200px;font-size:12px;text-align: right;padding-right: 15px;">时间：{{item.date}}</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+	</el-row>
 
+</template>
 
+
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+	import VChart, {
 
+		THEME_KEY
 
+	} from "vue-echarts";
 
+
 
+	import * as echarts from 'echarts';
 
+	import 'echarts-extension-amap';
 
+
 
+	import 'echarts-wordcloud';
 
+		
+	export default{
 
+		components: {
 
+			VChart
 
+		},
 
+		provide: {
 
+			[THEME_KEY]: "dark"
 
+		},
 
+		data(){
 
+			 return{
 
+				height: $(window).height(),
 
+				categorychart: {},
 
+				statuschart: {},
 
+				charts: {},
 
+				timer: null,
 
+				alerts:[{
 
+					id:1,
 
+					title:'设备0011离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备002电量低',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备003型号差',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备005被拆卸',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备006离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备0011离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备0011离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备0011离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				},{
 
+					id:1,
 
+					title:'设备0011离线了',
 
+					date:'2022-04-10 23:12:11'
 
+				}]
 
+			 }
 
+		},
 
+		mounted:function(){
 
+			var that = this;
 
+			$(window).resize(function() {
 
+				this.height = $(window).height() - this.titleheight;
 
+			
+				for (var key in that.charts) {
 
+					that.charts[key].resize();
 
+				}
 
+				that.$refs['categorychart'].resize();
 
+				that.$refs['statuschart'].resize();
 
+			});
 
+			
+			this.loadData();
 
+			
+			//开始定时刷新报表数据
 
+			this.startRefreshChart();
 
+		},
 
+		unmounted:function(){
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		methods: {
 
+			/**
 
+			 * 定时刷新报表数据
 
+			 */
 
+			startRefreshChart: function() {
 
+				if (this.timer) {
 
+					clearInterval(this.timer);
 
+				}
 
+				var that = this;
 
+			
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
 
+				var refreshtime = 60 * 1000;
 
+				config.getConfig().forEach(function(item, index) {
 
+					if (item.key == 'refreshtime') {
 
+						refreshtime = item.value;
 
+					}
 
+				});
 
+			
+				this.timer = setInterval(function() {
 
+					let echartData = [{
 
+						name: "监控摄像头",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					},
 
+					{
 
+						name: "雨水采集器",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					},
 
+					{
 
+						name: "土壤湿度检测仪",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					},
 
+					{
 
+						name: "温度检测器",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					},
 
+					{
 
+						name: "土壤元素检测",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					},
 
+					{
 
+						name: "空气湿度检测仪",
 
+						value: (Math.random(100) * 100).toFixed(0)
 
+					}];
 
+					let total = echartData.reduce((a, b) => {
 
+					    return a + b.value * 1
 
+					}, 0);
 
+					that.categorychart.title[0].text = '{name|总量}\n{val|' + total + '}';
 
+					that.categorychart.series[0].data = echartData;
 
+					
+					that.statuschart.series[0].data[0].value = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
 
+				}, refreshtime);
 
+			},
 
+			loadData: function() {
 
+				var that = this;
 
+				api.loadMapData(function(res) {
 
+					if (!res || res.status != 200) {
 
+						utils.showerror("数据加载失败！");
 
+						return;
 
+					}
 
+					that.initMapChart(res);
 
+				});
 
+				
+				this.categorychart = this.initcategorychart();
 
+				this.statuschart = this.initstatuschart();
 
+			},
 
+			initcategorychart: function(res) {
 
+				let bgColor = '#001037';
 
+				let title = '总量';
 
+				let color = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7','#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'];
 
+				let echartData = [{
 
+					name: "监控摄像头",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				},
 
+				{
 
+					name: "雨水采集器",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				},
 
+				{
 
+					name: "土壤湿度检测仪",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				},
 
+				{
 
+					name: "温度检测器",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				},
 
+				{
 
+					name: "土壤元素检测",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				},
 
+				{
 
+					name: "空气湿度检测仪",
 
+					value: (Math.random(100) * 100).toFixed(0)
 
+				}];
 
+				let total = echartData.reduce((a, b) => {
 
+				    return a + b.value * 1
 
+				}, 0);
 
+				return {
 
+					backgroundColor: '#000000',//此处背景色需要共主题处获取
 
+					color: color,
 
+					title: [{
 
+						text: '{name|' + title + '}\n{val|' + total + '}',
 
+						top: 'center',
 
+						left: 'center',
 
+						textStyle: {
 
+							rich: {
 
+								name: {
 
+									fontSize: 12,
 
+									fontWeight: 'normal',
 
+									color: '#fefefe',
 
+									padding: [10, 0]
 
+								},
 
+								val: {
 
+									fontSize: 16,
 
+									fontWeight: 'bolder',
 
+									color: '#fefefe',
 
+								}
 
+							}
 
+						}
 
+					}],
 
+					series: [{
 
+						type: 'pie',
 
+						roseType: 'radius',
 
+						radius: ['25%', '60%'],
 
+						center: ['50%', '50%'],
 
+						data: echartData,
 
+						hoverAnimation: false,
 
+						itemStyle: {
 
+							normal: {
 
+								borderColor: bgColor,
 
+								borderWidth: 1
 
+							}
 
+						},
 
+						labelLine: {
 
+							normal: {
 
+								length: 10,
 
+								length2: 20
 
+							}
 
+						},
 
+						label: {
 
+							normal: {
 
+								formatter: params => {
 
+									return (
 
+										'{icon|●}{name|' + params.name + '}\n{value|' +
 
+										params.value + '}'
 
+									);
 
+								},
 
+								rich: {
 
+									icon: {
 
+										fontSize: 12,
 
+										color: 'inherit'
 
+									},
 
+									name: {
 
+										fontSize: 12,
 
+										padding: [0, 0, 0, 10],
 
+										color: '#fefefe'
 
+									},
 
+									value: {
 
+										fontSize: 12,
 
+										fontWeight: 'bolder',
 
+										padding: [10, 0, 0, 20],
 
+										color: 'inherit'
 
+										// color: '#333333'
 
+									}
 
+								}
 
+							}
 
+						},
 
+					}]
 
+				};
 
+			},
 
+			initstatuschart: function(res) {
 
+				var indicator = [{
 
+					text: '正常设备',
 
+					max: 100,
 
+				},
 
+				{
 
+					text: '故障设备',
 
+					max: 100
 
+				},
 
+				{
 
+					text: '报警设备',
 
+					max: 100
 
+				},
 
+				{
 
+					text: '离线设备',
 
+					max: 100,
 
+					//  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
 
+				}];
 
+				var dataArr = [
 
+				    {
 
+				        value: [24, 35, 22, 33, 20, 16],
 
+				        itemStyle: {
 
+				            normal: {
 
+				                lineStyle: {
 
+									width:1,
 
+				                    color: '#FF8A26',
 
+				                },
 
+				                shadowColor: '#FF8A26',
 
+				                shadowBlur: 10,
 
+				            },
 
+				        },
 
+				        areaStyle: {
 
+							normal: { // 单项区域填充样式
 
+								color: {
 
+									type: 'radial',
 
+									x: 0.5, //右
 
+									y: 0.5, //下
 
+									r: 1,
 
+									colorStops: [{
 
+										offset: 1,
 
+										color: '#FF8A26'
 
+									}, {
 
+										offset: 0,
 
+										color: 'rgba(0,0,0,0)'
 
+									}],
 
+									globalCoord: false
 
+								},
 
+								opacity: 0.8 // 区域透明度
 
+							}
 
+						}
 
+				    }
 
+				];
 
+				var colorArr = ['#FF8A26']; //颜色
 
+				return {
 
+				    backgroundColor: '#000000',
 
+				    color: colorArr,
 
+				    radar: {
 
+				        shape: 'polygon',
 
+				        name: {
 
+				            textStyle: {
 
+				                color: '#fff',
 
+				                fontSize: 14
 
+				            },
 
+				        },
 
+				        label:{
 
+							distance:5,  
+				        },
 
+						radius:'60%',
 
+				        indicator: indicator,
 
+				        splitNumber:3,
 
+				        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
 
+				            show: true,
 
+				            areaStyle: { // 分隔区域的样式设置。
 
+				                color: ['rgba(24,60,108,.5)', 'rgba(15,36,80,.5)','rgba(12,25,59,.5)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
 
+				            }
 
+				        },
 
+				        axisLine: { //指向外圈文本的分隔线样式
 
+				            lineStyle: {
 
+				                color: utils.getChartXColor()
 
+				            }
 
+				        },
 
+				        splitLine: {
 
+				            lineStyle: {
 
+				                color: utils.getChartXColor(), // 分隔线颜色
 
+				                width: 1, // 分隔线线宽
 
+				            }
 
+				        },
 
+				    },
 
+				    series: [{
 
+				        type: 'radar',
 
+				        symbolSize: 5,
 
+				        data: dataArr
 
+				    }]
 
+				};
 
+			},
 
+			initMapChart: function(res) {
 
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
 
+				var values1 = [];
 
+				var values2 = [];
 
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
 
+					if(i%2 == 0){
 
+						values1.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
 
+							.toFixed(0));
 
+					}else{
 
+						values2.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
 
+							.toFixed(0));
 
+					}
 
+				}
 
+			
+				var option = {
 
+					geoCoordMap: res.data.geoCoordMap,
 
+					title: utils.createChartTitle('设备分布概览'),
 
+					legend:{
 
+						bottom:'0',
 
+						x:'center',
 
+						data:['正常设备','异常设备'],
 
+						textStyle:{
 
+							color:'#fff'
 
+						}
 
+					},
 
+					amap: {
 
+						rotateEnable: true,
 
+						pitchEnable: true,
 
+						pitch: 45,
 
+						// rotation: -45,
 
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
 
+						viewMode: '3D',
 
+						// 高德地图支持的初始化地图配置
 
+						// 高德地图初始中心经纬度
 
+						center: [116.436561, 39.897346],
 
+						// 高德地图初始缩放级别
 
+						zoom: 9,
 
+						// 是否开启resize
 
+						resizeEnable: true,
 
+						// 自定义地图样式主题
 
+						mapStyle: 'amap://styles/darkblue',
 
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
 
+						renderOnMoving: true,
 
+						// ECharts 图层的 zIndex 默认 2000
 
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
 
+						echartsLayerZIndex: 2019,
 
+						// 设置 ECharts 图层是否可交互 默认为 true
 
+						// 设置为 false 可实现高德地图自身图层交互
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						echartsLayerInteractive: true,
 
+						// 是否启用大数据模式 默认为 false
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						layers: [new AMap.TileLayer.Satellite()],
 
+						largeMode: false
 
+						// 说明：如果想要添加卫星、路网等图层
 
+						// 暂时先不要使用layers配置，因为存在Bug
 
+						// 建议使用amap.add的方式，使用方式参见最下方代码
 
+					},
 
+					series: [{
 
+						name:'正常设备',
 
+						type: 'effectScatter',
 
+						// 使用百度地图坐标系
 
+						coordinateSystem: 'amap',
 
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
 
+						symbol: 'pin',
 
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
 
+						symbolSize: [20, 20],
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#FF5252', //标志颜色
 
+							}
 
+						},
 
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
 
+						data: values1,
 
+						rippleEffect: {
 
+							scale: 6,
 
+							brushType: "stroke"
 
+						},
 
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
 
+					},{
 
+						name:'异常设备',
 
+						type: 'effectScatter',
 
+						// 使用百度地图坐标系
 
+						coordinateSystem: 'amap',
 
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
 
+						symbol: 'pin',
 
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
 
+						symbolSize: [20, 20],
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#00FAC1', //标志颜色
 
+							}
 
+						},
 
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
 
+						data: values2,
 
+						rippleEffect: {
 
+							scale: 6,
 
+							brushType: "stroke"
 
+						},
 
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
 
+					}]
 
+				}
 
+				// 使用刚指定的配置项和数据显示图表。
 
+				mapchart.setOption(option);
 
+			
+				// 获取 ECharts 高德地图组件
 
+				var amapComponent = mapchart.getModel().getComponent('amap');
 
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
 
+				var amap = amapComponent.getAMap();
 
+				// 添加控件
 
+				amap.addControl(new AMap.Scale());
 
+				amap.addControl(new AMap.ToolBar());
 
+				amap.addControl(new AMap.ControlBar({
 
+					position: {
 
+						left: '10px',
 
+						top: '10px'
 
+					},
 
+					showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
 
+				}));
 
+				// amap.addControl(new AMap.MapType({
 
+				// 	defaultType: 1,
 
+				// 	position: {
 
+				// 		right: '30px',
 
+				// 		top: '10px'
 
+				// 	}
 
+				// }));
 
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
 
+				amapComponent.setEChartsLayerInteractive(false);
 
+				
+				var disProvince = new AMap.DistrictLayer.Province({
 
+					zIndex: 1000,
 
+					adcode: [110000],
 
+					depth: 2,
 
+					styles: {
 
+						'fill': function(properties) {
 
+							// properties为可用于做样式映射的字段，包含
 
+							// NAME_CHN:中文名称
 
+							// adcode_pro
 
+							// adcode_cit
 
+							// adcode
 
+							// console.log(properties)
 
+							var adcode = properties.adcode;
 
+							// var colors = {};
 
+							// if (!colors[adcode]) {
 
+							// 	var gb = Math.random() * 155 + 50;
 
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
 
+							// }
 
+							// return colors[adcode];
 
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
 
+								'#2aa7ee', '#0270f2', '#488cf7'
 
+							];
 
+							return colors[adcode % colors.length] + 'aa';
 
+			
+							// return 'red';
 
+						},
 
+						'province-stroke': 'cornflowerblue',
 
+						'city-stroke': 'white', // 中国地级市边界
 
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
 
+					}
 
+				});
 
+				disProvince.setMap(amap);
 
+			
+				this.charts['mapchart'] = mapchart;
 
+				
+				// setTimeout(function(){
 
+				// 	amap.setZoom(9,false,30000);
 
+				// 	amap.setPitch(45,false,30000);
 
+				// },1000);
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped="scoped">
 
+	.chart {
 
+		padding: 10px;
 
+		overflow: hidden;
 
+	}
 
+	
+	.itemtitle {
 
+		background: linear-gradient(to right, #40a55f, #000, #000);
 
+		height: 35px;
 
+		line-height: 35px;
 
+		padding-left: 10px;
 
+	}
 
+	.alertitem{
 
+		line-height: 30px;
 
+		height: 30px;
 
+		font-size: 14px;
 
+		color:#fff;
 
+		background-color: #FF572233;
 
+		padding-left: 15px;
 
+		border-radius: 35px;
 
+		margin-top: 10px;
 
+	}
 
+	.alertitem .title{
 
+		margin-left: 5px;
 
+		text-align: left;
 
+		font-size: 14px;
 
+	}
 
+</style>
 
+

+ 1253 - 0
display_model_for_smartagriculture/src/pages/environment.vue
Zobrazit soubor 

@@ -0,0 +1,1253 @@
 
+<template>
 
+	<!-- 天气相关情况：温度、湿度、降雨量、光照、二氧化碳等 -->
 
+	<!-- 土壤相关情况：PH值、虫灾情况、土壤盐度、灌溉情况、风向、风速、实时天气情况 -->
 
+	<el-row>
 
+		<el-col :span="7">
 
+			<!-- 实时天气情况 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">实时天气情况</div>
 
+				<div style="padding:10px;;">
 
+					<div class="flex" style="height:30px;line-height: 30px;">
 
+						<div class="flex_item">
 
+							<el-icon style="position: relative;top:2px">
 
+								<add-location />
 
+							</el-icon>
 
+							<span style="margin-left: 5px;">北京</span>
 
+						</div>
 
+						<div class="flex_item" style="text-align: right;color:#999;font-size:12px">高德地图</div>
 
+					</div>
 
+					<!-- TODO 此处的尺寸写死不太对，需要自适应 -->
 
+					<div style="height: 100px;margin-top: 20px" class="flex">
 
+						<div class="flex_item">
 
+							<div class="flex" style="line-height:35px;text-align: center;">
 
+								<div class="flex_item">
 
+									<div style="font-size:20px;color:#FF5252">{{wendu}}℃</div>
 
+									<div>温度</div>
 
+								</div>
 
+								<div class="name_v_border"></div>
 
+								<div class="flex_item">
 
+									<div style="font-size:20px;color:#5FB878">东南</div>
 
+									<div>风向</div>
 
+								</div>
 
+							</div>
 
+							<div class="name_border"></div>
 
+							<div class="flex" style="line-height:35px;text-align: center;">
 
+								<div class="flex_item">
 
+									<div style="font-size:20px;color:#2A8BFD">{{fensu}}km/h</div>
 
+									<div>分速</div>
 
+								</div>
 
+								<div class="name_v_border"></div>
 
+								<div class="flex_item">
 
+									<div style="font-size:20px;color:#4adeca">{{shidu}}rh</div>
 
+									<div>湿度</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+						<div style="width:100px;line-height:30px;">
 
+							<div style="text-align: center;padding-top: 20px;">
 
+								<img src="../assets/5.png" style="width:60px" />
 
+								<div style="font-size: 28px;">晴</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+			<!-- 土地类型分布，旱地、水地、山地 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}">
 
+				<div class="itemtitle" style="">耕地类型分布</div>
 
+				<v-chart ref="categorychart" :style="{height:(((height-80)/3 - 30 - 15)+'px')}"
 
+					:option="categorychart" />
 
+			</div>
 
+			<!-- 历史降雨量走势 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
 
+				<div class="itemtitle" style="">降雨量走势</div>
 
+				<v-chart ref="yushuichart" :style="{height:(((height-80)/3 - 30 - 15)+'px')}" :option="yushuichart" />
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="10">
 
+			<!-- 当前光照、湿度、温度等 -->
 
+			<div class="chart" :style="{height:(height-80 - 20)+'px'}">
 
+				<div class="itemtitle" style="">光照、湿度、温度、氮磷钾含量</div>
 
+				<div>
 
+					<div class="flex">
 
+						<div class="flex_item">
 
+							<!-- 土壤温度 -->
 
+							<v-chart ref="tempchart" :style="{height:((height-80 - 65)/3+'px')}" :option="tempchart" />
 
+						</div>
 
+						<div class="flex_item">
 
+							<!-- 土壤湿度 -->
 
+							<v-chart ref="shiduchart" :style="{height:((height-80 - 65)/3+'px')}"
 
+								:option="shiduchart" />
 
+						</div>
 
+					</div>
 
+					<div class="name_border"></div>
 
+					<div class="flex">
 
+						<div class="flex_item">
 
+							<!-- 光照情况 -->
 
+							<v-chart ref="ligtechart" :style="{height:((height-80 - 65)/3+'px')}"
 
+								:option="ligtechart" />
 
+						</div>
 
+						<div class="flex_item">
 
+							<!-- 土壤磷含量 -->
 
+							<v-chart ref="linchart" :style="{height:((height-80 - 65)/3+'px')}" :option="linchart" />
 
+						</div>
 
+					</div>
 
+					<div class="name_border"></div>
 
+					<div class="flex">
 
+						<div class="flex_item">
 
+							<!-- 土壤氮含量 -->
 
+							<v-chart ref="danchart" :style="{height:((height-80 - 65)/3+'px')}" :option="danchart" />
 
+						</div>
 
+						<div class="flex_item">
 
+							<!-- 土壤钾含量 -->
 
+							<v-chart ref="jiachart" :style="{height:((height-80 - 65)/3+'px')}" :option="jiachart" />
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="7">
 
+			<!-- PH值 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
 
+				<div class="itemtitle" style="">土壤PH值</div>
 
+
 
+				<v-chart ref="phchart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="phchart" />
 
+			</div>
 
+			<!-- 土壤盐度 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
 
+				<div class="itemtitle" style="">土壤盐度</div>
 
+				<v-chart ref="yanchart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="yanchart" />
 
+			</div>
 
+
 
+			<!-- 灌溉情况 -->
 
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}" style="padding:0px">
 
+				<div class="itemtitle" style="">灌溉情况</div>
 
+				<v-chart ref="guangaichart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="guangaichart" />
 
+			</div>
 
+		</el-col>
 
+	</el-row>
 
+</template>
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+	import VChart, {
 
+		THEME_KEY
 
+	} from "vue-echarts";
 
+	import * as echarts from 'echarts';
 
+
 
+	export default {
 
+		components: {
 
+			VChart
 
+		},
 
+		provide: {
 
+			[THEME_KEY]: "dark"
 
+		},
 
+		data() {
 
+			return {
 
+				height: $(window).height(),
 
+				charts: {},
 
+				timer: null,
 
+				wendu:(Math.random(100) * 100).toFixed(0),
 
+				fensu:(Math.random(100) * 100).toFixed(0),
 
+				shidu:(Math.random(100) * 100).toFixed(0),
 
+				areas: ['穆家村', '王李村', '曹家湾', '刘家湾', '潘家集', '赵家村'],
 
+				categorychart: {},
 
+				yushuichart: {},
 
+				tempchart: {},
 
+				shiduchart: {},
 
+				ligtechart: {},
 
+				linchart: {},
 
+				danchart: {},
 
+				jiachart: {},
 
+				phchart: {},
 
+				yanchart: {},
 
+				guangaichart: {},
 
+			}
 
+		},
 
+		mounted: function() {
 
+			var that = this;
 
+			$(window).resize(function() {
 
+				this.height = $(window).height() - this.titleheight;
 
+
 
+				for (var key in that.charts) {
 
+					that.charts[key].resize();
 
+				}
 
+				that.$refs['categorychart'].resize();
 
+				that.$refs['yushuichart'].resize();
 
+				that.$refs['tempchart'].resize();
 
+				that.$refs['shiduchart'].resize();
 
+				that.$refs['ligtechart'].resize();
 
+				that.$refs['linchart'].resize();
 
+				that.$refs['danchart'].resize();
 
+				that.$refs['jiachart'].resize();
 
+				that.$refs['phchart'].resize();
 
+				that.$refs['yanchart'].resize();
 
+				that.$refs['guangaichart'].resize();
 
+			});
 
+
 
+			this.initcharts();
 
+
 
+			//开始定时刷新报表数据
 
+			this.startRefreshChart();
 
+		},
 
+		unmounted: function() {
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		methods: {
 
+			/**
 
+			 * 定时刷新报表数据
 
+			 */
 
+			startRefreshChart: function() {
 
+				if (this.timer) {
 
+					clearInterval(this.timer);
 
+				}
 
+				var that = this;
 
+
 
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
 
+				var refreshtime = 60 * 1000;
 
+				config.getConfig().forEach(function(item, index) {
 
+					if (item.key == 'refreshtime') {
 
+						refreshtime = item.value;
 
+					}
 
+				});
 
+
 
+				this.timer = setInterval(function() {
 
+					that.wendu = (Math.random(100) * 100).toFixed(0);
 
+					that.fensu = (Math.random(100) * 100).toFixed(0);
 
+					that.shidu = (Math.random(100) * 100).toFixed(0);
 
+					//------------
 
+					// 	this.categorychart = this.initcategorychart();
 
+					that.categorychart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
 
+					//------------
 
+					// 	this.yushuichart = this.inityushuichart();
 
+					that.yushuichart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.tempchart = this.inittempchart();
 
+					that.tempchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.shiduchart = this.initshiduchart();
 
+					that.shiduchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.ligtechart = this.initligtechart();
 
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+						Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
 
+					that.ligtechart.series[0].data = values;
 
+					that.ligtechart.series[1].data = values;
 
+					//------------
 
+					// 	this.linchart = this.initlinchart();
 
+					that.linchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.danchart = this.initdanchart();
 
+					that.danchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.jiachart = this.initjiachart();
 
+					that.jiachart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.phchart = this.initphchart();
 
+					that.phchart.series[0].data = [(Math.random(100) * 14).toFixed(1), (Math.random(100) *
 
+							14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (
 
+							Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
 
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1)
 
+					];
 
+					//------------
 
+					// 	this.yanchart = this.inityanchart();
 
+					that.yanchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
 
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
 
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
 
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+					];
 
+					//------------
 
+					// 	this.guangaichart = this.initguangaichart();
 
+					that.guangaichart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0)];
 
+				}, refreshtime);
 
+			},
 
+			initcharts: function() {
 
+				this.categorychart = this.initcategorychart();
 
+				this.yushuichart = this.inityushuichart();
 
+				this.tempchart = this.inittempchart();
 
+				this.shiduchart = this.initshiduchart();
 
+				this.ligtechart = this.initligtechart();
 
+				this.linchart = this.initlinchart();
 
+				this.danchart = this.initdanchart();
 
+				this.jiachart = this.initjiachart();
 
+				this.phchart = this.initphchart();
 
+				this.yanchart = this.inityanchart();
 
+				this.guangaichart = this.initguangaichart();
 
+			},
 
+			initcategorychart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: ['旱地', '水地', '山地', '大棚', '产业园'],
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}%',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						},
 
+						itemStyle: {
 
+							color: function(pama) {
 
+								var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
 
+									'#4caff9', '#4adeca', '#0270f2', '#488cf7'
 
+								];
 
+								return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+										offset: 0,
 
+										color: colors[pama.dataIndex % colors.length] + 'ff',
 
+									},
 
+									{
 
+										offset: 1,
 
+										color: colors[pama.dataIndex % colors.length] + '66',
 
+									},
 
+								])
 
+							},
 
+							barBorderRadius: 20
 
+						}
 
+					}]
 
+				};
 
+			},
 
+			inityushuichart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						boundaryGap: false, //
 
+						data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [120, 200, 150, 80, 70, 110, 140, 140, 140, 140, 140, 140],
 
+						type: 'line',
 
+						lineStyle: {
 
+							normal: {
 
+								width: 1,
 
+								color: "#00CAFF", // 线条颜色
 
+							}
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: '#00CAFF',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						}
 
+					}]
 
+				}
 
+			},
 
+			inittempchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('温度'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						boundaryGap: false, //
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						type: 'line',
 
+						lineStyle: {
 
+							normal: {
 
+								width: 1,
 
+								color: "#FF8A26", // 线条颜色
 
+							}
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						},
 
+						areaStyle: { //区域填充样式
 
+							normal: {
 
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+										offset: 0,
 
+										color: "#FF8A26ff"
 
+									},
 
+									{
 
+										offset: 1,
 
+										color: "#FF8A2600"
 
+									}
 
+								], false),
 
+								shadowColor: '#FF8A2688', //阴影颜色
 
+								shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
 
+							}
 
+						}
 
+					}]
 
+				}
 
+			},
 
+			initshiduchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('湿度'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						boundaryGap: false, //
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						type: 'line',
 
+						lineStyle: {
 
+							normal: {
 
+								width: 1,
 
+								color: "#01AAED", // 线条颜色
 
+							}
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						},
 
+						areaStyle: { //区域填充样式
 
+							normal: {
 
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+										offset: 0,
 
+										color: "#01AAEDff"
 
+									},
 
+									{
 
+										offset: 1,
 
+										color: "#01AAED00"
 
+									}
 
+								], false),
 
+								shadowColor: '#01AAED88', //阴影颜色
 
+								shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
 
+							}
 
+						}
 
+					}]
 
+				}
 
+			},
 
+			initligtechart: function() {
 
+				var value = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
 
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
 
+					.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
 
+				];
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('光照'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: '光照',
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						barGap: '60%',
 
+						itemStyle: {
 
+							color: '#FF5252',
 
+							borderColor: '#FF5252',
 
+							borderWidth: 1,
 
+							borderType: 'solid',
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}' + '%',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						},
 
+						zlevel: 2,
 
+						data: value,
 
+					},
 
+					{
 
+						name: '光照',
 
+						type: 'pictorialBar',
 
+						symbolSize: [20, 10],
 
+						symbolOffset: [0, -5],
 
+						symbolPosition: 'end',
 
+						z: 15,
 
+						color: '#ffc241',
 
+						zlevel: 2,
 
+						data: value,
 
+					}]
 
+				}
 
+			},
 
+			initlinchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('磷含量'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						// name: "含量",
 
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
 
+						// type: 'line',
 
+						// itemStyle:{
 
+						// 	color:'#6648FF'
 
+						// }
 
+						type: 'pictorialBar',
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#6DF95A',
 
+							},
 
+						},
 
+						symbolRepeat: 'fixed',
 
+						symbolMargin: 4,
 
+						symbol: 'rect',
 
+						symbolClip: true,
 
+						symbolSize: [20, 8],
 
+						symbolPosition: 'start',
 
+						symbolOffset: [0, -1],
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						z: 0,
 
+						zlevel: 8
 
+					}]
 
+				}
 
+			},
 
+			initdanchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('氮含量'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						// name: "含量",
 
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
 
+						// type: 'line',
 
+						// itemStyle:{
 
+						// 	color:'#ee6666'
 
+						// },
 
+						type: 'pictorialBar',
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#ee6666',
 
+							},
 
+						},
 
+						symbolRepeat: 'fixed',
 
+						symbolMargin: 4,
 
+						symbol: 'rect',
 
+						symbolClip: true,
 
+						symbolSize: [20, 8],
 
+						symbolPosition: 'start',
 
+						symbolOffset: [0, -1],
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						z: 0,
 
+						zlevel: 8,
 
+					}]
 
+				}
 
+			},
 
+			initjiachart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					title: utils.createChartTitle('钾含量'),
 
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						// name: "含量",
 
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
 
+						// type: 'line',
 
+						// itemStyle:{
 
+						// 	color:'#488cf7'
 
+						// }
 
+						type: 'pictorialBar',
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#488cf7',
 
+							},
 
+						},
 
+						symbolRepeat: 'fixed',
 
+						symbolMargin: 4,
 
+						symbol: 'rect',
 
+						symbolClip: true,
 
+						symbolSize: [20, 8],
 
+						symbolPosition: 'start',
 
+						symbolOffset: [0, -1],
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						z: 0,
 
+						zlevel: 8,
 
+					}]
 
+				}
 
+			},
 
+			initphchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					// title:utils.createChartTitle('钾含量'),
 
+					grid: utils.createChartGaid(null, '20px', "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [(Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
 
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
 
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
 
+							.random(100) * 14).toFixed(1)],
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						itemStyle: {
 
+							color: function(pama){
 
+								if(pama.value > 7){
 
+									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+											offset: 0,
 
+											color: '#488cf7ff',
 
+										},
 
+										{
 
+											offset: 1,
 
+											color: '#488cf7bb',
 
+										},
 
+									])
 
+								}else{
 
+									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+											offset: 0,
 
+											color: '#FF5252ff',
 
+										},
 
+										{
 
+											offset: 1,
 
+											color: '#FF5252bb',
 
+										},
 
+									])
 
+								}
 
+							},
 
+							barBorderRadius: 20
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: '#fff',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						}
 
+					}]
 
+				};
 
+			},
 
+			inityanchart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					// title:utils.createChartTitle('钾含量'),
 
+					grid: utils.createChartGaid(null, '20px', "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.areas,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)],
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						itemStyle: {
 
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+									offset: 0,
 
+									color: '#FF5722ff',
 
+								},
 
+								{
 
+									offset: 1,
 
+									color: '#FF5722bb',
 
+								},
 
+							]),
 
+							barBorderRadius: 20
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: '#FF5722',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						}
 
+					}]
 
+				};
 
+			},
 
+			initguangaichart: function() {
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						boundaryGap: false, //
 
+						data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [120, 200, 150, 80, 70, 110, 140, 140, 140, 140, 140, 140],
 
+						type: 'line',
 
+						itemStyle: {
 
+							color: '#00FAC1'
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}',
 
+							position: 'top',
 
+							color: '#00FAC1',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						}
 
+					}]
 
+				};
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped="scoped">
 
+	.chart {
 
+		padding: 10px;
 
+		overflow: hidden;
 
+	}
 
+
 
+	.itemtitle {
 
+		background: linear-gradient(to right, #40a55f, #000, #000);
 
+		height: 35px;
 
+		line-height: 35px;
 
+		padding-left: 10px;
 
+	}
 
+
 
+	.name_border {
 
+		width: 100%;
 
+		height: 1px;
 
+		margin: 5px auto;
 
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
 
+	}
 
+
 
+	.name_v_border {
 
+		width: 1px;
 
+		height: 70px;
 
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
 
+	}
 
+</style>

+ 867 - 0
display_model_for_smartagriculture/src/pages/index.vue
Zobrazit soubor 

@@ -0,0 +1,867 @@
 
+<template>
 
+	<el-row>
 
+		<el-col :span="6">
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">基本情况</div>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
 
+					<el-col :span="12">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<football />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{size}}</span>
 
+									<span style="font-size:20px;margin-left:5px">㎡</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">种植面积</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="12">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<user />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{count}}</span>
 
+									<span style="font-size:20px;margin-left:5px">户</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">农户数量</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
 
+					<el-col :span="12">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<SetUp />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{category}}</span>
 
+									<span style="font-size:20px;margin-left:5px">种</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">作物种类</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="12">
 
+						<div class="flex">
 
+							<div style="width:60px;text-align: center;line-height: 100px;">
 
+								<el-icon :size="40" style="">
 
+									<money />
 
+								</el-icon>
 
+							</div>
 
+							<div class="flex_item" style="text-align: center;">
 
+								<div style="line-height: 40px;color: #24fda3;">
 
+									<span style="font-size: 24px;font-weight: bold;">{{cost}}</span>
 
+									<span style="font-size:20px;margin-left:5px">元</span>
 
+								</div>
 
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+									<span style="margin-left: 5px;">作物销量</span>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">气象信息</div>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2 - 75)/2)+'px'}">
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;" :style="{}">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<hot-water />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">温度</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{temp}}</span>
 
+								<span style="font-size:20px;margin-left:5px">℃</span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<flag />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">风速</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{spedd}}</span>
 
+								<span style="font-size:20px;margin-left:5px">km/h</span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<back />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">风向</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{deriction}}</span>
 
+								<span style="font-size:20px;margin-left:5px"></span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2 - 75)/2)+'px'}">
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<umbrella />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">湿度</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{water}}</span>
 
+								<span style="font-size:20px;margin-left:5px">rh</span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<sunny />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">光照</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{lint}}</span>
 
+								<span style="font-size:20px;margin-left:5px">lx</span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+					<el-col :span="8">
 
+						<div style="width:80%;margin: 0 auto;">
 
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
 
+								<el-icon :size="18" style="position: relative;top: 3px;">
 
+									<pouring />
 
+								</el-icon>
 
+								<span style="margin-left: 5px;">降雨量</span>
 
+							</div>
 
+							<div style="line-height: 40px;color: #24fda3;">
 
+								<span style="font-size: 24px;font-weight: bold;">{{wend}}</span>
 
+								<span style="font-size:20px;margin-left:5px">cm</span>
 
+							</div>
 
+						</div>
 
+					</el-col>
 
+				</el-row>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 + 30)+'px',padding:0}">
 
+				<div class="itemtitle" style="">环境监控</div>
 
+				<v-chart ref="emvorromntchart" :style="{height:((height/3 - 20 - 15)+'px')}"
 
+					:option="emvorromntchart" />
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="12">
 
+			<div class="chart" :style="{height:((height-80)/3 - 30)*2+'px'}">
 
+				<div id="mapchart" style="position: relative;" :style="{height:(((height-80)/3 - 40)*2)+'px'}"></div>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3+10)+'px'}">
 
+				<div class="itemtitle flex" style="">
 
+					<div class="flex_item">物联网设备状况</div>
 
+					<div style="width: 250px;">
 
+						<span class="device_status_item">
 
+							正常({{device.status.ok}})
 
+						</span>
 
+						<span class="device_status_item" style="color:#FF8A26">
 
+							预警({{device.status.alert}})
 
+						</span>
 
+						<span class="device_status_item" style="color:#FF5252">
 
+							异常({{device.status.error}})
 
+						</span>
 
+					</div>
 
+				</div>
 
+				<div class="devices">
 
+					<div v-for="(item,index) in device.datas" class="deviceitem">
 
+						<div class="inner"
 
+							:class="item.status == '2' ? 'deviceitemalert':(item.status == '3'?'deviceitemerror':'')">
 
+							<div class="name">{{item.name}}</div>
 
+							<div class="name_border"></div>
 
+							<div class="flex">
 
+								<div class="flex_item">PM2.5：{{item.pm2_5}}</div>
 
+								<div class="flex_item">PM10：{{item.pm10}}</div>
 
+							</div>
 
+							<div class="flex">
 
+								<div class="flex_item">温度：{{item.temp}}℃</div>
 
+								<div class="flex_item">湿度：{{item.shidu}}%</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="6">
 
+			<div class="chart" :style="{}">
 
+				<div class="itemtitle" style="">监控视频</div>
 
+				<div style="margin: 10px 0px;margin-bottom: 0;border:1px solid rgba(255,255,255,0.6);border-radius: 5px;">
 
+					<video :style="{width:'100%',height:((height-80)/3 - 40 - 35 - 20)+'px'}" src="../assets/1.mp4"
 
+						controls="controls" autoplay="false"></video>
 
+				</div>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
 
+				<div class="itemtitle" style="">市场信息</div>
 
+				<div>
 
+					<div class="swiper-container" :style="{height:(((height-80)/3 - 40 - 35)+'px')}">
 
+						<div class="swiper-wrapper" :style="{height:(((height-80)/3 - 40 - 35)+'px')}">
 
+							<div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
 
+								<div class="innner">
 
+									<div class="title">{{item.title}}</div>
 
+									<div class="flex">
 
+										<div class="flex_item">时间：{{item.date}}</div>
 
+										<div class="flex_item">来源：{{item.from_}}</div>
 
+									</div>
 
+									<div class="desc">
 
+										{{item.desc}}
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
 
+				<div class="itemtitle" style="">作物状况</div>
 
+				<div>
 
+					<!-- 展示字符云，各种作物占比 -->
 
+					<v-chart ref="cropchart" :style="{height:(((height-80)/3 - 20 - 15)+'px')}" :option="cropoption" />
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+	</el-row>
 
+</template>
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+	import VChart, {
 
+		THEME_KEY
 
+	} from "vue-echarts";
 
+
 
+	import * as echarts from 'echarts';
 
+	import 'echarts-extension-amap';
 
+
 
+	import Swiper from 'swiper';
 
+	import 'swiper/dist/css/swiper.min.css';
 
+
 
+	import 'echarts-wordcloud';
 
+
 
+	export default {
 
+		components: {
 
+			VChart
 
+		},
 
+		provide: {
 
+			[THEME_KEY]: "dark"
 
+		},
 
+		data() {
 
+			return {
 
+				height: $(window).height(),
 
+				news: [{
 
+					id: 1,
 
+					title:'中国农业展望报告（2024—2033）',
 
+					desc: '4月20日至21日，中国农业展望大会在京召开，大会发布了《中国农业展望报告（2024—2033）》（以下简称报告）。报告总结回顾了20种（类）主要农产品的2023年市场形势，对未来十年尤其是2024年、2028年和2033年等重要时间节点的生产、消费、贸易、价格走势进行了展望。报告显示，未来10年粮食等重要农产品综合生产能力将显著增强，农产品消费持续升级，食物消费结构不断优化，农产品贸易保持增长趋势。在大力实施粮油等主要作物大面积单产提升行动下，农产品产量稳步增长，预计2033年粮食产量将达到7.66亿吨，年均增长1.1%。',
 
+					date: '2024-04-23',
 
+					from_: '农民日报'
 
+				}, {
 
+          id: 1,
 
+          title: '科技赋能助力实现好“丰”景',
 
+          desc: '4月28日，中国社会科学院发布了《中国数字经济高质量发展报告（2023）》（以下简称《报告》）。《报告》指出，大数据、云计算、区块链等新兴数字技术与农业、农村和乡村振兴有效融合，正在改变传统资源配置模式，为农业现代化提供新机遇。在数字经济与实体经济融合过程中，我国涌现了以京东、华为、中国联通等为代表的一系列新型实体企业，成为乡村振兴新主体。促进产业链、供应链数字化、智能化转型，以数字经济和数字技术补齐乡村振兴“短板”。',
 
+          date: '2024-04-30',
 
+          from_: '央视网'
 
+
 
+				}, {
 
+					id: 1,
 
+					title:'2024年农业主导品种主推技术的通知',
 
+					desc: '各地农业农村部门要抓好主要作物主导品种主推技术推广应用，充分利用基层农业技术推广体系、国家现代农业产业技术体系以及农业科技社会化服务组织等，开展主导品种主推技术示范展示和指导培训，引导带动广大农户和新型农业经营主体应用先进适用技术，促进农业科技成果尽快进村入户到田，不断提高技术入户率到位率，为提升粮油等主要作物生产能力提供有力科技支撑。',
 
+					date: '2024-04-28',
 
+					from_: '农业农村部网站'
 
+				}, {
 
+					id: 1,
 
+					title:'两会-有力有效推进乡村全面振兴',
 
+					desc: '党的十八大以来，以习近平同志为核心的党中央坚持把解决“三农”问题作为全党工作的重中之重。实施乡村振兴战略，是我们党“三农”工作一系列方针政策的继承和发展，是亿万农民的殷切期盼。今年全国两会，乡村全面振兴成为热议的话题。代表委员表示，要锚定建设农业强国目标，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
 
+					date: '2024-03-10',
 
+					from_: '人民日报'
 
+				}, {
 
+					id: 1,
 
+					title: '2024年中国农业数字化行业政策解读',
 
+					desc: '“十四五”期间，我国大部分省份都提出了有关农业数字化行业的发展规划。例如辽宁省规划到2025年年底，农村互联网普及率超过80%，农业数字经济在农业增加值中的占比达15%。浙江省提出到2025年，数字“三农”协同应用平台全面建成，生产管理、流通营销、行业监管、公共服务、乡村治理等五大领域核心业务应用全面推广。',
 
+					date: '2024-03-05',
 
+					from_: '前瞻网'
 
+				}, {
 
+          id: 1,
 
+          title:'2024中国农业农村发展趋势报告发布',
 
+          desc: '农业强国是社会主义现代化强国的根基，推进农业农村现代化是实现高质量发展的必然要求。坚持农业农村优先发展，坚持城乡融合发展，把责任扛在肩上、抓在手上，结合实际创造性开展工作，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
 
+          date: '2024-01-19',
 
+          from_: '中国经济网'
 
+				}],
 
+				device: {
 
+					status: {
 
+						ok: 11,
 
+						error: 2,
 
+						alert: 4
 
+					},
 
+					datas: [{
 
+						name: '设备A00001',
 
+						status: '1',
 
+						pm2_5: 21,
 
+						pm10: 10,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00002',
 
+						status: '2',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00003',
 
+						status: '1',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00004',
 
+						status: '3',
 
+						pm2_5: 63,
 
+						pm10: 31,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00005',
 
+						status: '1',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00006',
 
+						status: '1',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00007',
 
+						status: '1',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}, {
 
+						name: '设备A00008',
 
+						status: '2',
 
+						pm2_5: 11,
 
+						pm10: 1,
 
+						tsp: 11,
 
+						temp: 25,
 
+						shidu: 30
 
+					}]
 
+				},
 
+				categorys:['玉米', '水稻', '小麦', '大豆', '青稞', '蔬菜', '水果', '花卉', '薯类', '药材', '蚕豆', '油籽', '蔓青', '大芥', '花生',
 
+					'胡麻', '大麻', '向日葵', '梨', '苹果', '桃', '杏', '核桃', '李子', '樱桃', '草莓', '酸梨', '野杏', '毛桃', '苞瑙', '山樱桃',
 
+					'沙棘', '草莓'
 
+				],
 
+				emvorromntchart: {},
 
+				cropoption: {},
 
+				charts: {},
 
+				swiper: null,
 
+				timer: null,
 
+				size: (Math.random(100) * 1000).toFixed(0),
 
+				count: (Math.random(100) * 1000).toFixed(0),
 
+				category: (Math.random(100) * 1000).toFixed(0),
 
+				cost: (Math.random(100) * 1000).toFixed(0),
 
+				temp: (Math.random(100) * 40).toFixed(0),
 
+				spedd: (Math.random(100) * 100).toFixed(0),
 
+				deriction: '东南',
 
+				water: (Math.random(100) * 50).toFixed(0),
 
+				lint: (Math.random(100) * 1000).toFixed(0),
 
+				wend: (Math.random(100) * 1000).toFixed(0),
 
+			}
 
+		},
 
+		mounted: function() {
 
+      this.$request.get("/product/selectAll").then(res=>{
 
+        console.log(res,"res!!")
 
+      })
 
+			var that = this;
 
+			$(window).resize(function() {
 
+				this.height = $(window).height() - this.titleheight;
 
+
 
+				for (var key in that.charts) {
 
+					that.charts[key].resize();
 
+				}
 
+				that.$refs['emvorromntchart'].resize();
 
+				that.$refs['cropchart'].resize();
 
+			});
 
+
 
+			this.loadData();
 
+
 
+			this.swiper = new Swiper('.swiper-container', {
 
+				autoplay: 1000, //可选选项，自动滑动
 
+				loop: true,
 
+				direction: 'vertical',
 
+				slidesPerView: (((this.height - 80) / 3 - 40 - 35)) / 110,
 
+			})
 
+
 
+			//开始定时刷新报表数据
 
+			this.startRefreshChart();
 
+		},
 
+		unmounted: function() {
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		methods: {
 
+			/**
 
+			 * 定时刷新报表数据
 
+			 */
 
+			startRefreshChart: function() {
 
+				if (this.timer) {
 
+					clearInterval(this.timer);
 
+				}
 
+				var that = this;
 
+
 
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
 
+				var refreshtime = 60 * 1000;
 
+				config.getConfig().forEach(function(item, index) {
 
+					if (item.key == 'refreshtime') {
 
+						refreshtime = item.value;
 
+					}
 
+				});
 
+
 
+				this.timer = setInterval(function() {
 
+					that.size = (Math.random(100) * 1000).toFixed(0);
 
+					that.count = (Math.random(100) * 1000).toFixed(0);
 
+					that.category = (Math.random(100) * 1000).toFixed(0);
 
+					that.cost = (Math.random(100) * 1000).toFixed(0);
 
+					that.temp = (Math.random(100) * 40).toFixed(0);
 
+					that.spedd = (Math.random(100) * 100).toFixed(0);
 
+					that.deriction = '东南';
 
+					that.water = (Math.random(100) * 50).toFixed(0);
 
+					that.lint = (Math.random(100) * 1000).toFixed(0);
 
+					that.wend = (Math.random(100) * 1000).toFixed(0);
 
+					//------------------------------
 
+
 
+					that.emvorromntchart.series[0].data = [(Math.random(100) * 1000).toFixed(0), (Math.random(
 
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0), (Math.random(
 
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0), (Math.random(
 
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0)];
 
+					//------------------------------
 
+					that.device.status.ok = (Math.random(100) * 1000).toFixed(0);
 
+					that.device.status.error = (Math.random(100) * 1000).toFixed(0);
 
+					that.device.status.alert = (Math.random(100) * 1000).toFixed(0);
 
+					that.device.datas.forEach(function(item, index) {
 
+						var status = (Math.random(100) * 3);
 
+						item.status = status % 3 == 0 ? '1' : status % 3 == 1 ? '2' : status % 3 == 2 ?
 
+							'3' : "1";
 
+						item.pm2_5 = (Math.random(100) * 100).toFixed(0);
 
+						item.pm10 = (Math.random(100) * 100).toFixed(0);
 
+						item.tsp = (Math.random(100) * 100).toFixed(0);
 
+						item.temp = (Math.random(100) * 100).toFixed(0);
 
+						item.shidu = (Math.random(100) * 100).toFixed(0);
 
+					});
 
+					//------------------------------
 
+					that.cropoption.series[0].data = [];
 
+					that.categorys.forEach(function(item, index) {
 
+						that.cropoption.series[0].data.push({
 
+							name: item,
 
+							value: (Math.random(100) * 1000).toFixed(0),
 
+							textStyle: {
 
+								color: config.colors[index % config.colors.length]
 
+							}
 
+						});
 
+					})
 
+
 
+					that.swiper.slideNext();
 
+				}, refreshtime);
 
+			},
 
+			loadData: function() {
 
+				var that = this;
 
+				api.loadMapData(function(res) {
 
+					if (!res || res.status != 200) {
 
+						utils.showerror("数据加载失败！");
 
+						return;
 
+					}
 
+					that.initMapChart(res);
 
+				});
 
+				
+				this.emvorromntchart = this.initemvorromntchart();
 
+				this.cropoption = this.initcropoption();
 
+			},
 
+			initMapChart: function(res) {
 
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
 
+				var values = [];
 
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
 
+					values.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
 
+						.toFixed(0));
 
+				}
 
+
 
+				var option = {
 
+					geoCoordMap: res.data.geoCoordMap,
 
+					title: utils.createChartTitle('产区概览'),
 
+					amap: {
 
+						rotateEnable: true,
 
+						pitchEnable: true,
 
+						pitch: 45,
 
+						// rotation: -45,
 
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
 
+						viewMode: '3D',
 
+						// 高德地图支持的初始化地图配置
 
+						// 高德地图初始中心经纬度
 
+						center: [116.436561, 39.897346],
 
+						// 高德地图初始缩放级别
 
+						zoom: 9,
 
+						// 是否开启resize
 
+						resizeEnable: true,
 
+						// 自定义地图样式主题
 
+						mapStyle: 'amap://styles/darkblue',
 
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
 
+						renderOnMoving: true,
 
+						// ECharts 图层的 zIndex 默认 2000
 
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
 
+						echartsLayerZIndex: 2019,
 
+						// 设置 ECharts 图层是否可交互 默认为 true
 
+						// 设置为 false 可实现高德地图自身图层交互
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						echartsLayerInteractive: true,
 
+						// 是否启用大数据模式 默认为 false
 
+						// 此配置项从 v1.9.0 起开始支持
 
+						largeMode: false
 
+						// 说明：如果想要添加卫星、路网等图层
 
+						// 暂时先不要使用layers配置，因为存在Bug
 
+						// 建议使用amap.add的方式，使用方式参见最下方代码
 
+					},
 
+					series: [{
 
+						type: 'effectScatter',
 
+						// 使用百度地图坐标系
 
+						coordinateSystem: 'amap',
 
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
 
+						symbol: 'pin',
 
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
 
+						symbolSize: [20, 20],
 
+						itemStyle: {
 
+							normal: {
 
+								color: '#ee6666', //标志颜色
 
+							}
 
+						},
 
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
 
+						data: values,
 
+						rippleEffect: {
 
+							scale: 6,
 
+							brushType: "stroke"
 
+						},
 
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
 
+					}]
 
+				}
 
+
 
+				// 使用刚指定的配置项和数据显示图表。
 
+				mapchart.setOption(option);
 
+
 
+				// // 获取百度地图实例，使用百度地图自带的控件
 
+				// var bmap = myChart.getModel().getComponent('bmap').getBMap();
 
+				// bmap.addControl(new BMap.MapTypeControl());
 
+
 
+				// 获取 ECharts 高德地图组件
 
+				var amapComponent = mapchart.getModel().getComponent('amap');
 
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
 
+				var amap = amapComponent.getAMap();
 
+				// 添加控件
 
+				amap.addControl(new AMap.Scale());
 
+				amap.addControl(new AMap.ToolBar());
 
+				amap.addControl(new AMap.ControlBar());
 
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
 
+				amapComponent.setEChartsLayerInteractive(false);
 
+
 
+				var disProvince = new AMap.DistrictLayer.Province({
 
+					zIndex: 1000,
 
+					adcode: [110000],
 
+					depth: 2,
 
+					styles: {
 
+						'fill': function(properties) {
 
+							// properties为可用于做样式映射的字段，包含
 
+							// NAME_CHN:中文名称
 
+							// adcode_pro
 
+							// adcode_cit
 
+							// adcode
 
+							// console.log(properties)
 
+							var adcode = properties.adcode;
 
+							// var colors = {};
 
+							// if (!colors[adcode]) {
 
+							// 	var gb = Math.random() * 155 + 50;
 
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
 
+							// }
 
+							// return colors[adcode];
 
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
 
+								'#2aa7ee', '#0270f2', '#488cf7'
 
+							];
 
+							return colors[adcode % colors.length] + '66';
 
+
 
+							// return 'red';
 
+						},
 
+						'province-stroke': 'cornflowerblue',
 
+						'city-stroke': 'white', // 中国地级市边界
 
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
 
+					}
 
+				});
 
+				disProvince.setMap(amap);
 
+
 
+				this.charts['mapchart'] = mapchart;
 
+			},
 
+			initemvorromntchart:function() {
 
+				return {
 
+					backgroundColor:'#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: ['土壤湿度', '降雨量', '二氧化碳', '日照时间'],
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [{
 
+						name: "含量",
 
+						data: [120, 200, 150, 80, 70, 110, 140],
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						itemStyle: {
 
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+									offset: 0,
 
+									color: '#fac858ff',
 
+								},
 
+								{
 
+									offset: 1,
 
+									color: '#fac858bb',
 
+								},
 
+							]),
 
+							barBorderRadius: 20
 
+						}
 
+					}]
 
+				}
 
+			},
 
+			initcropoption:function() {
 
+				var datas = [];
 
+				this.categorys.forEach(function(item, index) {
 
+					datas.push({
 
+						name: item,
 
+						value: (Math.random(100) * 1000).toFixed(0),
 
+						textStyle: {
 
+							color: config.colors[index % config.colors.length]
 
+						}
 
+					});
 
+				})
 
+				return {
 
+					backgroundColor:'#000000',
 
+					tooltip: {
 
+						show: true,
 
+						position: 'top',
 
+						textStyle: {
 
+							fontSize: 14
 
+						}
 
+					},
 
+					grid: {
 
+						top: '40px'
 
+					},
 
+					series: [{
 
+						type: "wordCloud",
 
+						// 网格大小，各项之间间距
 
+						gridSize: 20,
 
+						// 形状 circle 圆，cardioid  心， diamond 菱形，
 
+						// triangle-forward 、triangle 三角，star五角星
 
+						shape: 'circle',
 
+						// 字体大小范围
 
+						sizeRange: [12, 30],
 
+						// 文字旋转角度范围
 
+						rotationRange: [0, 90],
 
+						// 旋转步值
 
+						rotationStep: 90,
 
+						// 自定义图形
 
+						// maskImage: maskImage,
 
+						left: 'center',
 
+						top: '40px',
 
+						right: null,
 
+						bottom: null,
 
+						// 画布宽
 
+						width: '90%',
 
+						// 画布高
 
+						height: '80%',
 
+						// 是否渲染超出画布的文字
 
+						drawOutOfBound: false,
 
+						data: datas
 
+					}]
 
+				}
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped="scoped">
 
+	.chart {
 
+		padding: 10px;
 
+		overflow: hidden;
 
+	}
 
+
 
+	.itemtitle {
 
+		background: linear-gradient(to right, #40a55f, #000, #000);
 
+		height: 35px;
 
+		line-height: 35px;
 
+		padding-left: 10px;
 
+	}
 
+
 
+	.device_status_item {
 
+		display: inline-block;
 
+		text-align: center;
 
+		font-size: 14px;
 
+		cursor: pointer;
 
+		width: 33.3%;
 
+		min-height: 30px;
 
+		line-height: 30px;
 
+	}
 
+
 
+	.devices {
 
+		overflow: hidden;
 
+	}
 
+
 
+	.deviceitem {
 
+		display: inline-block;
 
+		width: 25%;
 
+	}
 
+
 
+	.deviceitem .inner {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #f8f8f844;
 
+		margin-top: 10px;
 
+		margin-bottom: 5px;
 
+		padding: 10px;
 
+		border-radius: 3px;
 
+		font-size: 12px;
 
+		line-height: 25px;
 
+		color: #bbb;
 
+	}
 
+
 
+	.deviceitem .inner .name {
 
+		text-align: center;
 
+		height: 30px;
 
+		line-height: 30px;
 
+		font-size: 14px;
 
+		color: #fff;
 
+	}
 
+
 
+	.deviceitem .inner .name_border {
 
+		width: 100%;
 
+		height: 1px;
 
+		margin: 5px auto;
 
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, rgba(0, 0, 0, 0));
 
+	}
 
+
 
+	.deviceitem .deviceitemalert {
 
+		background: #FF8A26aa;
 
+	}
 
+
 
+	.deviceitem .deviceitemerror {
 
+		background: #FF5252aa;
 
+	}
 
+
 
+	.newitem {
 
+		height: 110px;
 
+		border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
 
+		font-size: 14px;
 
+		line-height: 20px;
 
+		color: #999;
 
+		cursor: pointer;
 
+	}
 
+
 
+	.newitem .title {
 
+		font-size: 16px;
 
+		line-height: 35px;
 
+		height: 35px;
 
+		text-align: left;
 
+		color: #FF5722;
 
+	}
 
+
 
+	.newitem .desc {
 
+		height: 40px;
 
+		overflow: hidden;
 
+		text-overflow: ellipsis;
 
+		display: -webkit-box;
 
+		-webkit-box-orient: vertical;
 
+		-webkit-line-clamp: 2;
 
+		/* // 显示的行 */
 
+	}
 
+
 
+	.newitem:hover {
 
+		color: #fac858aa;
 
+	}
 
+</style>

+ 659 - 0
display_model_for_smartagriculture/src/pages/market.vue
Zobrazit soubor 

@@ -0,0 +1,659 @@
 
+<template>
 
+	<el-row>
 
+		<el-col :span="18">
 
+			<el-row>
 
+				<el-col :span="12">
 
+					<!-- 采购需求 -->
 
+					<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
 
+						<div class="itemtitle" style="">市场采购需求</div>
 
+						<v-chart ref="xuqiuchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="xuqiuchart" />
 
+					</div>
 
+				</el-col>
 
+				<el-col :span="12">
 
+					<!-- 在售产品 -->
 
+					<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
 
+						<div class="itemtitle" style="">产品供应排行</div>
 
+						<v-chart ref="goodschart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="goodschart" />
 
+					</div>
 
+				</el-col>
 
+			</el-row>
 
+			<div>
 
+				<!-- 价格走势 -->
 
+				<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
 
+					<div class="itemtitle" style="">价格走势</div>
 
+					<v-chart ref="costchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="costchart" />
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+		<el-col :span="6">
 
+			<!-- 市场资讯 -->
 
+			<div class="chart" :style="{height:((height-80 - 20) )+'px'}">
 
+				<div class="itemtitle" style="">市场资讯</div>
 
+				<div>
 
+					<div class="swiper-container" :style="{height:(((height-80) - 20  - 45)+'px')}">
 
+						<div class="swiper-wrapper" :style="{height:(((height-80) - 20 - 45)+'px')}">
 
+							<div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
 
+								<div class="innner">
 
+									<div class="title">{{item.title}}</div>
 
+									<div class="flex">
 
+										<div class="flex_item">时间：{{item.date}}</div>
 
+										<div class="flex_item">来源：{{item.from_}}</div>
 
+									</div>
 
+									<div class="desc">
 
+										{{item.desc}}
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</el-col>
 
+	</el-row>
 
+</template>
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	import config from '/public/config.js'
 
+	import utils from '/public/utils.js'
 
+	import api from '/public/api.js'
 
+	import VChart, {
 
+		THEME_KEY
 
+	} from "vue-echarts";
 
+	import * as echarts from 'echarts';
 
+	
+	import Swiper from 'swiper';
 
+	import 'swiper/dist/css/swiper.min.css';
 
+
 
+	export default {
 
+		components: {
 
+			VChart
 
+		},
 
+		provide: {
 
+			[THEME_KEY]: "dark"
 
+		},
 
+		data() {
 
+			return {
 
+				height: $(window).height(),
 
+				charts: {},
 
+				timer: null,
 
+				xuqiuchart: {},
 
+				goodschart: {},
 
+				costchart: {},
 
+				categorys : ['玉米', '水稻', '小麦', '大豆', '青稞'],
 
+				news: [{
 
+					id: 1,
 
+					title: '江苏东海给农业插上“数字化”翅膀',
 
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}, {
 
+					id: 1,
 
+					title: '中国农业智能装备亮相哥伦比亚农科创新博览会',
 
+					desc: '人民网里约热内卢4月8日电 (记者吴杰)当地时间4月6日至8日,由华南农业大学牵头组织的中国水果采摘机器人、播种及施肥无人机等智能装备亮相哥伦比亚农业科技国际云博览会,展示了中国精准农业、智慧农业、现代农业智能装备等领域的优势,',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}, {
 
+					id: 1,
 
+					title: '安徽出台规划助推农业农村现代化',
 
+					desc: '安徽出台规划助推农业农村现代化作者:李应松 张守营 来源:中国经济导报 字数:839本报讯 李应松 记者张守营报道 日前',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}, {
 
+					id: 1,
 
+					title: '战疫情、保春耕、促生产,崇明现代农业园区做好春耕备耕',
 
+					desc: '“东风吹绿草,布谷劝春耕。”春耕农时不等人,当前正处于疫情防控攻坚阶段,也是春耕生产备耕的关键时间节点,崇明现代农业园区以“战疫情、保春耕、促生产”为着力点,抢农时、抓备耕,确保',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}, {
 
+					id: 1,
 
+					title: '江苏东海给农业插上“数字化”翅膀',
 
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}, {
 
+					id: 1,
 
+					title: '江苏东海给农业插上“数字化”翅膀',
 
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
 
+					date: '2022-04-09 12:11',
 
+					from_: '百度一下'
 
+				}],
 
+				swiper:null
 
+			}
 
+		},
 
+		mounted: function() {
 
+			var that = this;
 
+			$(window).resize(function() {
 
+				this.height = $(window).height() - this.titleheight;
 
+
 
+				for (var key in that.charts) {
 
+					that.charts[key].resize();
 
+				}
 
+				that.$refs['xuqiuchart'].resize();
 
+				that.$refs['goodschart'].resize();
 
+				that.$refs['costchart'].resize();
 
+			});
 
+			
+			this.swiper = new Swiper('.swiper-container', {
 
+				autoplay: 1000, //可选选项，自动滑动
 
+				loop: true,
 
+				direction: 'vertical',
 
+				slidesPerView: (((this.height - 80) - 35)) / 110,
 
+			})
 
+
 
+			this.initcharts();
 
+
 
+			//开始定时刷新报表数据
 
+			this.startRefreshChart();
 
+		},
 
+		unmounted: function() {
 
+			if (this.timer) {
 
+				clearInterval(this.timer);
 
+			}
 
+		},
 
+		methods: {
 
+			/**
 
+			 * 定时刷新报表数据
 
+			 */
 
+			startRefreshChart: function() {
 
+				if (this.timer) {
 
+					clearInterval(this.timer);
 
+				}
 
+				var that = this;
 
+
 
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
 
+				var refreshtime = 60 * 1000;
 
+				config.getConfig().forEach(function(item, index) {
 
+					if (item.key == 'refreshtime') {
 
+						refreshtime = item.value;
 
+					}
 
+				});
 
+
 
+				this.timer = setInterval(function() {
 
+					that.swiper.slideNext();
 
+					
+					//---------------
 
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)];
 
+					that.xuqiuchart.series[0].data = values;
 
+					that.xuqiuchart.series[1].data = values;
 
+					that.xuqiuchart.series[2].data = values;
 
+							
+					//---------------
 
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)];
 
+					that.goodschart.series[0].data = values;
 
+					that.goodschart.series[1].data = values;
 
+					that.goodschart.series[2].data = values;
 
+							
+					//---------------
 
+					var dates = [];
 
+					var start = new Date();
 
+					start.setDate(start.getDate()-30);
 
+					for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
 
+						dates.push(i.format('MM-dd'));
 
+					}
 
+					
+					var series = [];
 
+					var xData = [];
 
+					that.categorys.forEach(function (item,index){
 
+						xData.push(item);
 
+						series.push({
 
+							name: item,
 
+							data: [],
 
+							type: 'line',
 
+							stack:'1',
 
+							// smooth:true,
 
+							lineStyle: {
 
+								nomal:{
 
+									width:1,
 
+									color: config.colors[index%config.colors.length]
 
+								}
 
+							},
 
+							label: {
 
+								show: true,
 
+								formatter: '{c}%',
 
+								position: 'top',
 
+								color: 'rgba(255,228,59,1)',
 
+								fontSize: 12,
 
+								textAlign: 'center',
 
+							}
 
+						});
 
+						for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
 
+							series[index].data.push((Math.random(100) * 100).toFixed(0));
 
+						}
 
+					});		
+					that.costchart.xAxis.data = dates;
 
+					that.costchart.series = series;
 
+				}, refreshtime);
 
+			},
 
+			initcharts: function() {
 
+				this.xuqiuchart = this.initxuqiuchart();
 
+				this.goodschart = this.initgoodschart();
 
+				this.costchart = this.initcostchart();
 
+			},
 
+			initxuqiuchart: function() {
 
+				var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)];
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.categorys,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [
 
+					// 	{
 
+					// 	name: "含量",
 
+					// 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0)],
 
+					// 	type: 'bar',
 
+					// 	barWidth: '20px',
 
+					// 	label: {
 
+					// 		show: true,
 
+					// 		formatter: '{c}%',
 
+					// 		position: 'top',
 
+					// 		color: 'rgba(255,228,59,1)',
 
+					// 		fontSize: 12,
 
+					// 		textAlign: 'center',
 
+					// 	},
 
+					// 	itemStyle: {
 
+					// 		color: function(pama) {
 
+					// 			var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
 
+					// 				'#4caff9', '#4adeca', '#0270f2', '#488cf7'
 
+					// 			];
 
+					// 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+					// 					offset: 0,
 
+					// 					color: colors[pama.dataIndex % colors.length] + 'ff',
 
+					// 				},
 
+					// 				{
 
+					// 					offset: 1,
 
+					// 					color: colors[pama.dataIndex % colors.length] + '66',
 
+					// 				},
 
+					// 			])
 
+					// 		},
 
+					// 		barBorderRadius: 20
 
+					// 	}
 
+					// },
 
+					{
 
+						name: '光照',
 
+						type: 'bar',
 
+						barWidth: '20px',
 
+						barGap: '60%',
 
+						itemStyle: {
 
+							color: '#FF5252aa',
 
+							borderColor: '#FF5252aa',
 
+							borderWidth: 1,
 
+							borderType: 'solid',
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}' + '%',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						},
 
+						zlevel: 2,
 
+						data: values,
 
+					},
 
+					{
 
+						name: '光照',
 
+						type: 'pictorialBar',
 
+						symbolSize: [20, 10],
 
+						symbolOffset: [0, -5],
 
+						symbolPosition: 'end',
 
+						z: 15,
 
+						color: '#FF5252',
 
+						zlevel: 3,
 
+						data: values,
 
+					},
 
+					{
 
+						name: '光照',
 
+						type: 'pictorialBar',
 
+						symbolSize: [20, 10],
 
+						symbolOffset: [0, 5],
 
+						symbolPosition: 'start',
 
+						z: 15,
 
+						color: '#FF5252',
 
+						zlevel: 3,
 
+						data: values,
 
+					}]
 
+				};
 
+			},
 
+			initgoodschart: function() {
 
+				var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+							.random(100) * 100).toFixed(0)];
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						// boundaryGap: false,//
 
+						data: this.categorys,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: [
 
+					// 	{
 
+					// 	name: "含量",
 
+					// 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
 
+					// 		.random(100) * 100).toFixed(0)],
 
+					// 	type: 'bar',
 
+					// 	barWidth: '20px',
 
+					// 	label: {
 
+					// 		show: true,
 
+					// 		formatter: '{c}%',
 
+					// 		position: 'top',
 
+					// 		color: 'rgba(255,228,59,1)',
 
+					// 		fontSize: 12,
 
+					// 		textAlign: 'center',
 
+					// 	},
 
+					// 	itemStyle: {
 
+					// 		color: function(pama) {
 
+					// 			var colors = ['#fac858', '#4adeca', '#0270f2', '#488cf7', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
 
+					// 				'#4caff9'
 
+					// 			];
 
+					// 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+					// 					offset: 0,
 
+					// 					color: colors[pama.dataIndex % colors.length] + 'ff',
 
+					// 				},
 
+					// 				{
 
+					// 					offset: 1,
 
+					// 					color: colors[pama.dataIndex % colors.length] + '66',
 
+					// 				},
 
+					// 			])
 
+					// 		},
 
+					// 		barBorderRadius: 20
 
+					// 	}
 
+					// },
 
+						{
 
+							name: '光照',
 
+							type: 'bar',
 
+							barWidth: '20px',
 
+							barGap: '60%',
 
+							itemStyle: {
 
+								color: '#BAFF7Faa',
 
+								borderColor: '#BAFF7Faa',
 
+								borderWidth: 1,
 
+								borderType: 'solid',
 
+							},
 
+							label: {
 
+								show: true,
 
+								formatter: '{c}' + '%',
 
+								position: 'top',
 
+								color: 'rgba(255,228,59,1)',
 
+								fontSize: 12,
 
+								textAlign: 'center',
 
+							},
 
+							zlevel: 2,
 
+							data: values,
 
+						},
 
+						{
 
+							name: '光照',
 
+							type: 'pictorialBar',
 
+							symbolSize: [20, 10],
 
+							symbolOffset: [0, -5],
 
+							symbolPosition: 'end',
 
+							z: 15,
 
+							color: '#BAFF7F',
 
+							zlevel: 3,
 
+							data: values,
 
+						},
 
+						{
 
+							name: '光照',
 
+							type: 'pictorialBar',
 
+							symbolSize: [20, 10],
 
+							symbolOffset: [0, 5],
 
+							symbolPosition: 'start',
 
+							z: 15,
 
+							color: '#BAFF7F',
 
+							zlevel: 3,
 
+							data: values,
 
+						}
 
+					]
 
+				};
 
+			},
 
+			initcostchart: function() {
 
+				var dates = [];
 
+				var start = new Date();
 
+				start.setDate(start.getDate()-30);
 
+				for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
 
+					dates.push(i.format('MM-dd'));
 
+				}
 
+				
+				var series = [];
 
+				var xData = [];
 
+				this.categorys.forEach(function (item,index){
 
+					xData.push(item);
 
+					series.push({
 
+						name: item,
 
+						data: [],
 
+						type: 'line',
 
+						stack:'1',
 
+						// smooth:true,
 
+						lineStyle: {
 
+							nomal:{
 
+								width:1,
 
+								color: config.colors[index%config.colors.length]
 
+							}
 
+						},
 
+						label: {
 
+							show: true,
 
+							formatter: '{c}%',
 
+							position: 'top',
 
+							color: 'rgba(255,228,59,1)',
 
+							fontSize: 12,
 
+							textAlign: 'center',
 
+						}
 
+					});
 
+					for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
 
+						series[index].data.push((Math.random(100) * 100).toFixed(0));
 
+					}
 
+				});
 
+				return {
 
+					backgroundColor: '#000000',
 
+					grid: utils.createChartGaid(null, null, "20px", "40px"),
 
+					tooltip: {
 
+						trigger: 'axis',
 
+						axisPointer: {
 
+							type: 'shadow',
 
+						},
 
+					},
 
+					legend:{
 
+						bottom:'0',
 
+						x:'center',
 
+						data:xData
 
+					},
 
+					xAxis: {
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						axisLabel: {
 
+							color: utils.getChartXTextColor()
 
+						},
 
+						axisTick: {
 
+							show: false
 
+						},
 
+						splitLine: {
 
+							show: false
 
+						},
 
+						boundaryGap: false,//
 
+						data: dates,
 
+						type: 'category',
 
+					},
 
+					yAxis: {
 
+						axisLabel: {
 
+							color: utils.getChartYTextColor(),
 
+						},
 
+						axisLine: {
 
+							show: true,
 
+							lineStyle: {
 
+								color: utils.getChartXColor()
 
+							}
 
+						},
 
+						splitLine: {
 
+							lineStyle: {
 
+								color: utils.getChartYColor(),
 
+								type: 'dashed'
 
+							},
 
+						},
 
+						name: '',
 
+					},
 
+					series: series
 
+				};
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped="scoped">
 
+	.chart {
 
+		padding: 10px;
 
+		overflow: hidden;
 
+	}
 
+
 
+	.itemtitle {
 
+		background: linear-gradient(to right, #40a55f, #000, #000);
 
+		height: 35px;
 
+		line-height: 35px;
 
+		padding-left: 10px;
 
+	}
 
+
 
+	.name_border {
 
+		width: 100%;
 
+		height: 1px;
 
+		margin: 5px auto;
 
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
 
+	}
 
+
 
+	.name_v_border {
 
+		width: 1px;
 
+		height: 70px;
 
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
 
+	}
 
+	
+	
+	.newitem {
 
+		height: 110px;
 
+		border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
 
+		font-size: 14px;
 
+		line-height: 20px;
 
+		color: #999;
 
+		cursor: pointer;
 
+	}
 
+	
+	.newitem .title {
 
+		font-size: 16px;
 
+		line-height: 35px;
 
+		height: 35px;
 
+		text-align: left;
 
+		color: #FF5722;
 
+	}
 
+	
+	.newitem .desc {
 
+		height: 40px;
 
+		overflow: hidden;
 
+		text-overflow: ellipsis;
 
+		display: -webkit-box;
 
+		-webkit-box-orient: vertical;
 
+		-webkit-line-clamp: 2;
 
+		/* // 显示的行 */
 
+	}
 
+	
+	.newitem:hover {
 
+		color: #fac858aa;
 
+	}
 
+</style>

+ 36 - 0
display_model_for_smartagriculture/src/pages/welcome.vue
Zobrazit soubor 

@@ -0,0 +1,36 @@
 
+<template>
 
+	<div class="welcome">
 
+		<div style="width:50%;margin: 0 auto;color:green" :style="{marginTop:marginTop+'px'}">
 
+			<el-progress :percentage="100" status="exception" :show-text="false" :stroke-width="20" :format="format" :indeterminate="true" color="green" />
 
+		</div>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+	import $ from 'jquery'
 
+	export default {
 
+		data(){
 
+			return {
 
+				marginTop:$(window).height()/2
 
+			}
 
+		},
 
+		mounted:function(){
 
+			var that = this;
 
+			setTimeout(function(){
 
+				that.$emit("loaddingend","")
 
+			},1000);
 
+		}
 
+	}
 
+</script>
 
+
 
+<style >
 
+	.welcome{
 
+		position:fixed;
 
+		left: 0;
 
+		top:0;
 
+		width:100%;
 
+		height:100%;
 
+		background: #000000;
 
+    color:green;
 
+	}
 
+</style>

+ 7 - 0
display_model_for_smartagriculture/vite.config.js
Zobrazit soubor 

@@ -0,0 +1,7 @@
 
+import { defineConfig } from 'vite'
 
+import vue from '@vitejs/plugin-vue'
 
+
 
+// https://vitejs.dev/config/
 
+export default defineConfig({
 
+  plugins: [vue()]
 
+})

+ 68 - 0
vue/public/dark_theme.css
Zobrazit soubor 

@@ -0,0 +1,68 @@
 
+@charset "utf-8";
 
+
 
+.flex {
 
+	display: flex;
 
+}
 
+
 
+.flex_item {
 
+	flex: 1;
 
+}
 
+
 
+.dark {
 
+	background: #000000;
 
+	color: #fff;
 
+}
 
+
 
+.dark .title {
 
+	text-align: center;
 
+	color: #fff;
 
+	font-size: 24px;
 
+	/* border-bottom: 1px solid #f56c6c47; */
 
+}
 
+
 
+.dark .setting_panel {}
 
+
 
+.dark .setting_panel .setting_panel_maker {
 
+	position: fixed;
 
+	left: 0px;
 
+	top: 0px;
 
+	width: 100%;
 
+	height: 100%;
 
+	z-index: 1;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner {
 
+	position: fixed;
 
+	background: #00ff6626;
 
+	border-radius: 5px;
 
+	z-index: 2;
 
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+
 
+.dark .setting_panel .inner_contaner .settingPanelCloseBtn {
 
+	position: absolute;
 
+	right: -10px;
 
+	top: -10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingPanelCloseBtn:hover {
 
+	color: #26871a
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .setting_panel_title {
 
+	height: 60px;
 
+	line-height: 60px;
 
+	text-align: center;
 
+	font-size: 20px;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingForm {
 
+	padding-right: 70px;
 
+}
 
+
 
+.dark .setting_panel .inner_contaner .settingForm .el-form-item__label {
 
+	color: #fff;
 
+}
 
+

+ 12 - 1
vue/src/views/manager/AI/CorpGrown.vue
Zobrazit soubor 

@@ -216,7 +216,12 @@ export default {
 
         // 右上角的工具框
 
         // 右上角的工具框
 
         feature: {
 
         feature: {
 
           saveAsImage: {}, //下载按钮
 
           saveAsImage: {}, //下载按钮
 
-        },
 
+          dataView:{},//数据视图
 
+          dataZoom:{},//区域缩放
 
+          magicType:{
 
+            type:['bar','line']
 
+          }//动态图标切换
 
+        }
 
       },
 
       },
 
 
 
       xAxis: {
 
       xAxis: {
 
@@ -330,6 +335,8 @@ export default {
 
       toolbox: {
 
       toolbox: {
 
         feature: {
 
         feature: {
 
           saveAsImage: {},
 
           saveAsImage: {},
 
+          dataView:{},//数据视图
 
+
 
         },
 
         },
 
       },
 
       },
 
       tooltip: {},
 
       tooltip: {},
 
@@ -381,6 +388,10 @@ export default {
 
       toolbox: {
 
       toolbox: {
 
         feature: {
 
         feature: {
 
           saveAsImage: {},
 
           saveAsImage: {},
 
+          dataView:{},//数据视图
 
+          magicType:{
 
+            type:['bar','line']
 
+          }//动态图标切换
 
         },
 
         },
 
       },
 
       },
 
       series: [
 
       series: [