up
This commit is contained in:
parent
694a7a6307
commit
0339a49d2b
@ -5,5 +5,5 @@ VITE_APP_TITLE = 种植业生产监管数字化系统
|
|||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 若依管理系统/开发环境
|
# 若依管理系统/开发环境
|
||||||
# VITE_APP_BASE_API = 'http://192.168.2.96:8080'
|
VITE_APP_BASE_API = 'http://192.168.2.96:8080'
|
||||||
VITE_APP_BASE_API = 'http://vue.ruoyi.vip/prod-api/'
|
# VITE_APP_BASE_API = 'http://vue.ruoyi.vip/prod-api/'
|
||||||
|
|||||||
58
package-lock.json
generated
58
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "2.0.10",
|
"@element-plus/icons-vue": "2.0.10",
|
||||||
|
"@fit-screen/vue": "^0.2.0",
|
||||||
"@vueuse/core": "9.5.0",
|
"@vueuse/core": "9.5.0",
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
"echarts": "^5.3.0",
|
"echarts": "^5.3.0",
|
||||||
@ -104,6 +105,47 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@fit-screen/vue": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fit-screen/vue/-/vue-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-G9NuOHRAd2fuwLd9KFEfDMf9IT7gycb9suZNusvImzjVjpVlY0oW+d8F+9fXBhT36dp60xtqpuVMuNuL4bs88g==",
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.13.11"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^2.6.14 || ^3.2.39"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@fit-screen/vue/node_modules/vue-demi": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||||
|
"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/@floating-ui/core": {
|
"node_modules/@floating-ui/core": {
|
||||||
"version": "1.2.6",
|
"version": "1.2.6",
|
||||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
|
||||||
@ -4349,6 +4391,22 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"@fit-screen/vue": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fit-screen/vue/-/vue-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-G9NuOHRAd2fuwLd9KFEfDMf9IT7gycb9suZNusvImzjVjpVlY0oW+d8F+9fXBhT36dp60xtqpuVMuNuL4bs88g==",
|
||||||
|
"requires": {
|
||||||
|
"vue-demi": "^0.13.11"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||||
|
"requires": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@floating-ui/core": {
|
"@floating-ui/core": {
|
||||||
"version": "1.2.6",
|
"version": "1.2.6",
|
||||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "2.0.10",
|
"@element-plus/icons-vue": "2.0.10",
|
||||||
|
"@fit-screen/vue": "^0.2.0",
|
||||||
"@vueuse/core": "9.5.0",
|
"@vueuse/core": "9.5.0",
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
"echarts": "^5.3.0",
|
"echarts": "^5.3.0",
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<VScaleScreen width="1960" height="1080">
|
<VScaleScreen fullScreen width="1920" height="1080">
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div ref="head" class="headers">
|
<div ref="head" class="headers">
|
||||||
种植业生产监管数字化系统
|
种植业生产监管数字化系统
|
||||||
|
|||||||
1
src/assets/icons/svg/downloads.svg
Normal file
1
src/assets/icons/svg/downloads.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681694329431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="952" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960.64 499.2c-28.8-91.52-116.48-150.4-223.36-150.4h-16a345.216 345.216 0 0 0-283.52-224c-140.8-16.64-278.4 56.96-343.68 182.4a346.24 346.24 0 0 0 47.36 386.56c15.36 17.28 42.24 19.2 60.16 3.84 17.28-15.36 19.2-42.24 3.84-60.16a260.672 260.672 0 0 1-35.84-290.56c49.28-94.08 152.96-149.76 258.56-136.96a259.84 259.84 0 0 1 220.8 192.64c5.12 18.56 21.76 32 40.96 32h47.36c68.48 0 124.16 35.84 142.08 91.52 19.2 60.8-2.56 126.08-55.04 163.2a42.88 42.88 0 0 0-10.24 59.52 42.112 42.112 0 0 0 58.88 10.24c83.2-59.52 118.4-163.2 87.68-259.84z" fill="rgba(255,255,255,1)" p-id="953"></path><path d="M611.84 698.88l-56.96 56.96V490.88c0-23.68-19.2-42.24-42.88-42.24-23.68 0-42.24 19.2-42.24 42.88v264.96l-57.6-57.6a42.496 42.496 0 1 0-60.16 60.16l129.92 129.92c3.2 3.2 6.4 4.48 9.6 6.4 1.28 0.64 2.56 1.92 3.84 2.56 5.12 1.92 10.88 3.2 16.64 3.2 1.92 0 3.2-0.64 5.12-1.28 3.84-0.64 7.68-0.64 10.88-2.56 5.76-1.92 10.24-5.76 14.72-9.6l129.28-129.28c16.64-16.64 16.64-43.52 0-60.16s-43.52-16-60.16 0.64z" fill="rgba(255,255,255,1)" p-id="954"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/LAYER.png
Executable file
BIN
src/assets/images/LAYER.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 668 B |
BIN
src/assets/images/amplify.png
Executable file
BIN
src/assets/images/amplify.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 957 B |
BIN
src/assets/images/face.png
Executable file
BIN
src/assets/images/face.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
src/assets/images/measure.png
Executable file
BIN
src/assets/images/measure.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
BIN
src/assets/images/position.png
Executable file
BIN
src/assets/images/position.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 849 B |
BIN
src/assets/images/reduce.png
Executable file
BIN
src/assets/images/reduce.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 787 B |
BIN
src/assets/images/title.png
Normal file
BIN
src/assets/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
309
src/assets/styles/ruoyi.css
Normal file
309
src/assets/styles/ruoyi.css
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/**
|
||||||
|
* 通用css样式布局处理
|
||||||
|
* Copyright (c) 2019 ruoyi
|
||||||
|
*/
|
||||||
|
/** 基础通用 **/
|
||||||
|
.pt5 {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr5 {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb5 {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt5 {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr5 {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb5 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml5 {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml10 {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr20 {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml20 {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1,
|
||||||
|
.h2,
|
||||||
|
.h3,
|
||||||
|
.h4,
|
||||||
|
.h5,
|
||||||
|
.h6,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form .el-form-item__label {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog:not(.is-fullscreen) {
|
||||||
|
margin-top: 6vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog.scrollbar .el-dialog__body {
|
||||||
|
overflow: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
max-height: 70vh;
|
||||||
|
padding: 10px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table .el-table__header-wrapper th,
|
||||||
|
.el-table .el-table__fixed-header-wrapper th {
|
||||||
|
word-break: break-word;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
height: 40px !important;
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table .el-table__body-wrapper .el-button [class*="el-icon-"] + span {
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 表单布局 **/
|
||||||
|
.form-header {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #6379bb;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
margin: 8px 10px 25px 10px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 表格布局 **/
|
||||||
|
.pagination-container {
|
||||||
|
height: 25px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 10px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tree border */
|
||||||
|
.tree-border {
|
||||||
|
margin-top: 5px;
|
||||||
|
border: 1px solid #e5e6e7;
|
||||||
|
background: #ffffff none;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container .el-pagination {
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.pagination-container .el-pagination > .el-pagination__jump {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table .fixed-width .el-button--small {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 表格更多操作下拉样式 */
|
||||||
|
.el-table .el-dropdown-link {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #409eff;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table .el-dropdown,
|
||||||
|
.el-icon-arrow-down {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content > .el-checkbox {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-striped > .list-group-item {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group {
|
||||||
|
padding-left: 0px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
border-bottom: 1px solid #e7eaec;
|
||||||
|
border-top: 1px solid #e7eaec;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
padding: 11px 0px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-right {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
padding: 14px 15px 7px !important;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 15px 20px 20px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-box {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button color */
|
||||||
|
.el-button--cyan.is-active,
|
||||||
|
.el-button--cyan:active {
|
||||||
|
background: #20b2aa;
|
||||||
|
border-color: #20b2aa;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--cyan:focus,
|
||||||
|
.el-button--cyan:hover {
|
||||||
|
background: #48d1cc;
|
||||||
|
border-color: #48d1cc;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--cyan {
|
||||||
|
background-color: #20b2aa;
|
||||||
|
border-color: #20b2aa;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* text color */
|
||||||
|
.text-navy {
|
||||||
|
color: #1ab394;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-success {
|
||||||
|
color: #1c84c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-info {
|
||||||
|
color: #23c6c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-warning {
|
||||||
|
color: #f8ac59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: #ed5565;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* image */
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-lg {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-upload-preview {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 4px #ccc;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 拖拽列样式 */
|
||||||
|
.sortable-ghost {
|
||||||
|
opacity: 0.8;
|
||||||
|
color: #fff !important;
|
||||||
|
background: #42b983 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格右侧工具栏样式 */
|
||||||
|
.top-right-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
1
src/assets/styles/ruoyi.min.css
vendored
Normal file
1
src/assets/styles/ruoyi.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.mt5{margin-top:5px}.mr5{margin-right:5px}.mb5{margin-bottom:5px}.mb8{margin-bottom:8px}.ml5{margin-left:5px}.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.el-form .el-form-item__label{font-weight:700}.el-dialog:not(.is-fullscreen){margin-top:6vh !important}.el-dialog.scrollbar .el-dialog__body{overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0}.el-table{background-color:rgba(255,255,255,0.05) !important}.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th{word-break:break-word;background-color:rgba(255,255,255,0.05) !important;height:40px !important;font-size:13px;opacity:1;font-size:14px;font-weight:400;letter-spacing:0px;line-height:0px;color:rgba(255,255,255,0.7)}.el-table .el-table__body-wrapper .el-button [class*="el-icon-"]+span{margin-left:1px}.form-header{font-size:15px;color:#6379bb;border-bottom:1px solid #ddd;margin:8px 10px 25px 10px;padding-bottom:5px}.pagination-container{height:25px;margin-bottom:10px;margin-top:15px;padding:10px 20px !important}.tree-border{margin-top:5px;border:1px solid #e5e6e7;background:#ffffff none;border-radius:4px;width:100%}.pagination-container .el-pagination{right:0;position:absolute}@media (max-width: 768px){.pagination-container .el-pagination>.el-pagination__jump{display:none !important}.pagination-container .el-pagination>.el-pagination__sizes{display:none !important}}.el-table .fixed-width .el-button--small{padding-left:0;padding-right:0;width:inherit}.el-table .el-dropdown-link{cursor:pointer;color:#409eff;margin-left:10px}.el-table .el-dropdown,.el-icon-arrow-down{font-size:12px}.el-tree-node__content>.el-checkbox{margin-right:8px}.list-group-striped>.list-group-item{border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.list-group{padding-left:0px;list-style:none}.list-group-item{border-bottom:1px solid #e7eaec;border-top:1px solid #e7eaec;margin-bottom:-1px;padding:11px 0px;font-size:13px}.pull-right{float:right !important}.el-card__header{padding:14px 15px 7px !important;min-height:40px}.el-card__body{padding:15px 20px 20px 20px !important}.card-box{padding-right:15px;padding-left:15px;margin-bottom:10px}.el-button--cyan.is-active,.el-button--cyan:active{background:#20b2aa;border-color:#20b2aa;color:#ffffff}.el-button--cyan:focus,.el-button--cyan:hover{background:#48d1cc;border-color:#48d1cc;color:#ffffff}.el-button--cyan{background-color:#20b2aa;border-color:#20b2aa;color:#ffffff}.text-navy{color:#1ab394}.text-primary{color:inherit}.text-success{color:#1c84c6}.text-info{color:#23c6c8}.text-warning{color:#f8ac59}.text-danger{color:#ed5565}.text-muted{color:#888888}.img-circle{border-radius:50%}.img-lg{width:120px;height:120px}.avatar-upload-preview{position:absolute;top:50%;transform:translate(50%, -50%);width:200px;height:200px;border-radius:50%;box-shadow:0 0 4px #ccc;overflow:hidden}.sortable-ghost{opacity:0.8;color:#fff !important;background:#42b983 !important}.top-right-btn{margin-left:auto}
|
||||||
@ -1,9 +1,9 @@
|
|||||||
/**
|
/**
|
||||||
* 通用css样式布局处理
|
* 通用css样式布局处理
|
||||||
* Copyright (c) 2019 ruoyi
|
* Copyright (c) 2019 ruoyi
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** 基础通用 **/
|
/** 基础通用 **/
|
||||||
.pt5 {
|
.pt5 {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
@ -53,7 +53,18 @@
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
.h1,
|
||||||
|
.h2,
|
||||||
|
.h3,
|
||||||
|
.h4,
|
||||||
|
.h5,
|
||||||
|
.h6,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
@ -75,13 +86,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
.el-table__header-wrapper,
|
||||||
|
.el-table__fixed-header-wrapper {
|
||||||
th {
|
th {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
background-color: #f8f8f9 !important;
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||||
color: #515a6e;
|
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
@ -89,15 +106,16 @@
|
|||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 表单布局 **/
|
/** 表单布局 **/
|
||||||
.form-header {
|
.form-header {
|
||||||
font-size:15px;
|
font-size: 15px;
|
||||||
color:#6379bb;
|
color: #6379bb;
|
||||||
border-bottom:1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
margin:8px 10px 25px 10px;
|
margin: 8px 10px 25px 10px;
|
||||||
padding-bottom:5px
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 表格布局 **/
|
/** 表格布局 **/
|
||||||
@ -111,11 +129,11 @@
|
|||||||
|
|
||||||
/* tree border */
|
/* tree border */
|
||||||
.tree-border {
|
.tree-border {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
border: 1px solid #e5e6e7;
|
border: 1px solid #e5e6e7;
|
||||||
background: #FFFFFF none;
|
background: #ffffff none;
|
||||||
border-radius:4px;
|
border-radius: 4px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container .el-pagination {
|
.pagination-container .el-pagination {
|
||||||
@ -123,13 +141,13 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ( max-width : 768px) {
|
@media (max-width: 768px) {
|
||||||
.pagination-container .el-pagination > .el-pagination__jump {
|
.pagination-container .el-pagination > .el-pagination__jump {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table .fixed-width .el-button--small {
|
.el-table .fixed-width .el-button--small {
|
||||||
@ -141,11 +159,12 @@
|
|||||||
/** 表格更多操作下拉样式 */
|
/** 表格更多操作下拉样式 */
|
||||||
.el-table .el-dropdown-link {
|
.el-table .el-dropdown-link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #409EFF;
|
color: #409eff;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
.el-table .el-dropdown,
|
||||||
|
.el-icon-arrow-down {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,22 +215,22 @@
|
|||||||
/* button color */
|
/* button color */
|
||||||
.el-button--cyan.is-active,
|
.el-button--cyan.is-active,
|
||||||
.el-button--cyan:active {
|
.el-button--cyan:active {
|
||||||
background: #20B2AA;
|
background: #20b2aa;
|
||||||
border-color: #20B2AA;
|
border-color: #20b2aa;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--cyan:focus,
|
.el-button--cyan:focus,
|
||||||
.el-button--cyan:hover {
|
.el-button--cyan:hover {
|
||||||
background: #48D1CC;
|
background: #48d1cc;
|
||||||
border-color: #48D1CC;
|
border-color: #48d1cc;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--cyan {
|
.el-button--cyan {
|
||||||
background-color: #20B2AA;
|
background-color: #20b2aa;
|
||||||
border-color: #20B2AA;
|
border-color: #20b2aa;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* text color */
|
/* text color */
|
||||||
@ -265,10 +284,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 拖拽列样式 */
|
/* 拖拽列样式 */
|
||||||
.sortable-ghost{
|
.sortable-ghost {
|
||||||
opacity: .8;
|
opacity: 0.8;
|
||||||
color: #fff!important;
|
color: #fff !important;
|
||||||
background: #42b983!important;
|
background: #42b983 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格右侧工具栏样式 */
|
/* 表格右侧工具栏样式 */
|
||||||
|
|||||||
@ -16,6 +16,7 @@ import directive from './directive' // directive
|
|||||||
// 注册指令
|
// 注册指令
|
||||||
import plugins from './plugins' // plugins
|
import plugins from './plugins' // plugins
|
||||||
import { download } from '@/utils/request'
|
import { download } from '@/utils/request'
|
||||||
|
import FitScreen from '@fit-screen/vue'
|
||||||
|
|
||||||
// svg图标
|
// svg图标
|
||||||
import 'virtual:svg-icons-register'
|
import 'virtual:svg-icons-register'
|
||||||
@ -68,6 +69,7 @@ app.use(store)
|
|||||||
app.use(plugins)
|
app.use(plugins)
|
||||||
app.use(elementIcons)
|
app.use(elementIcons)
|
||||||
app.component('svg-icon', SvgIcon)
|
app.component('svg-icon', SvgIcon)
|
||||||
|
app.use(FitScreen)
|
||||||
|
|
||||||
directive(app)
|
directive(app)
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,946 @@
|
|||||||
/<template>
|
<template>
|
||||||
<div>111</div>
|
<div class="center">
|
||||||
|
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||||
|
<div class="leftWra">
|
||||||
|
<div class="leftTop">
|
||||||
|
<div class="title">作物分类面积统计</div>
|
||||||
|
<div ref="areaDiv" class="areaDiv"></div>
|
||||||
|
</div>
|
||||||
|
<div class="leftbottom">
|
||||||
|
<div class="title">作物类型统计</div>
|
||||||
|
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightWra">
|
||||||
|
<div class="rightTop">
|
||||||
|
<div class="title">
|
||||||
|
作物类型统计-高标准农田
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||||
|
<div ref="ProgressBarDiv" class="ProgressBar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rightbottom">
|
||||||
|
<div class="title">
|
||||||
|
作物类型统计-行政区划
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<el-select v-model="value" clearable placeholder="Select">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<p>图例</p>
|
||||||
|
<div class="mt-4">
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(102, 142, 214, 0.8);
|
||||||
|
border: 1px solid rgba(102, 142, 214, 1);
|
||||||
|
"
|
||||||
|
v-model="checked3"
|
||||||
|
label="小麦"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(255, 225, 104, 0.8);
|
||||||
|
border: 1px solid rgba(255, 225, 104, 1);
|
||||||
|
"
|
||||||
|
v-model="checked4"
|
||||||
|
label="玉米"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(156, 220, 130, 0.8);
|
||||||
|
border: 1px solid rgba(156, 220, 130, 1);
|
||||||
|
"
|
||||||
|
v-model="checked3"
|
||||||
|
label="大豆"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(209, 91, 127, 0.8);
|
||||||
|
border: 1px solid rgba(209, 91, 127, 1);
|
||||||
|
"
|
||||||
|
v-model="checked4"
|
||||||
|
label="地瓜"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(212, 236, 89, 0.8);
|
||||||
|
border: 1px solid rgba(212, 236, 89, 1);
|
||||||
|
"
|
||||||
|
v-model="checked3"
|
||||||
|
label="花生"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(50, 211, 235, 0.8);
|
||||||
|
border: 1px solid rgba(50, 211, 235, 1);
|
||||||
|
"
|
||||||
|
v-model="checked4"
|
||||||
|
label="蓝莓"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(91, 196, 159, 0.8);
|
||||||
|
border: 1px solid rgba(91, 196, 159, 1);
|
||||||
|
"
|
||||||
|
v-model="checked3"
|
||||||
|
label="茶叶"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(254, 182, 77, 0.8);
|
||||||
|
border: 1px solid rgba(254, 182, 77, 1);
|
||||||
|
"
|
||||||
|
v-model="checked4"
|
||||||
|
label="马铃薯"
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
style="
|
||||||
|
background: rgba(250, 129, 109, 0.8);
|
||||||
|
border: 1px solid rgba(250, 129, 109, 1);
|
||||||
|
"
|
||||||
|
v-model="checked3"
|
||||||
|
label="白菜和萝卜"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom_center"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import { ref, onMounted, inject } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const viewer = ref(null);
|
||||||
|
const areaDiv = ref(null);
|
||||||
|
const typesofDiv = ref(null);
|
||||||
|
const farmlandDiv = ref(null);
|
||||||
|
const ProgressBarDiv = ref(null);
|
||||||
|
const ASdivisionDiv = ref(null);
|
||||||
|
const value = ref('');
|
||||||
|
var data = {
|
||||||
|
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||||||
|
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
||||||
|
soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
|
||||||
|
peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
|
||||||
|
wheat: [null, 500, null, 500, null, 500, null, null],
|
||||||
|
Blueberries: [null, null, null, null, null, null, null, 500],
|
||||||
|
};
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
value: 'Option1',
|
||||||
|
label: 'Option1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Option2',
|
||||||
|
label: 'Option2',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// 组件挂载完成后执行
|
||||||
|
onMounted(() => {
|
||||||
|
initMap();
|
||||||
|
areachar();
|
||||||
|
typesof();
|
||||||
|
farmland();
|
||||||
|
ProgressBar();
|
||||||
|
ASdivision();
|
||||||
|
});
|
||||||
|
function initMap() {
|
||||||
|
viewer.value = new Cesium.Viewer('cesiumContainer', {});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
function areachar() {
|
||||||
|
const areaDivIntance = echarts.init(areaDiv.value);
|
||||||
|
var option = {
|
||||||
|
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '15%',
|
||||||
|
right: '3%',
|
||||||
|
left: '11%',
|
||||||
|
bottom: '12%',
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#C0C4CC',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(192,196,204,1)',
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
name: '面积(亩)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '面积',
|
||||||
|
type: 'bar',
|
||||||
|
data: [3598, 1235, 2354, 3251, 1652],
|
||||||
|
barWidth: '14px',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(71,179,161,0.8)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(212,236,89,1) ', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
barBorderRadius: [30, 30, 30, 30],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.8)',
|
||||||
|
fontSize: '14',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
right: 0,
|
||||||
|
top: 14,
|
||||||
|
data: ['面积'],
|
||||||
|
textStyle: {
|
||||||
|
color: ' rgba(255,255,255,0.7)',
|
||||||
|
fontSize: '14',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
option && areaDivIntance.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
function typesof() {
|
||||||
|
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
'rgba(212,236,89,0.8)',
|
||||||
|
'rgba(102,142,214,0.8)',
|
||||||
|
'rgba(156,220,130,0.8)',
|
||||||
|
'rgba(255,225,104,0.8)',
|
||||||
|
], // 指定饼图颜色
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical', //图例方向分水平和垂直
|
||||||
|
icon: 'rect', //图例样式
|
||||||
|
x: 'center', //图例位置
|
||||||
|
bottom: 'bottom',
|
||||||
|
data: ['花生', '小麦', '大豆', '玉米'],
|
||||||
|
textStyle: {
|
||||||
|
color: ' rgba(255,255,255,0.7)',
|
||||||
|
fontSize: '14',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['50%', '70%'],
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'left',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(41,255,219,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '30',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 25, name: '花生' },
|
||||||
|
{ value: 25, name: '小麦' },
|
||||||
|
{ value: 25, name: '大豆' },
|
||||||
|
{ value: 25, name: '玉米' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
option && typesofDivIntance.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
function farmland() {
|
||||||
|
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
subtext: '',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'circle',
|
||||||
|
left: 'center',
|
||||||
|
top: '5',
|
||||||
|
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#C0C4CC',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(192,196,204,1)',
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '生活',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 14,
|
||||||
|
stack: '数量',
|
||||||
|
data: [1666, 1666, 1666, 1666, 1666],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
//颜色渐变
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(102, 142, 214, 0.8)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(102, 142, 214, 0.8)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '工业',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 30,
|
||||||
|
stack: '数量',
|
||||||
|
data: [1666, 1666, 1666, 1666, 1666],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
//颜色渐变
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255, 225, 104, 0.8)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 225, 104, 0.8)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '农业',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 30,
|
||||||
|
stack: '数量',
|
||||||
|
data: [1666, 1666, 1666, 1666, 1666],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
//颜色渐变
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(209, 91, 127, 0.8)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(209, 91, 127, 0.8)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||||
|
}
|
||||||
|
function ProgressBar() {
|
||||||
|
const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
|
||||||
|
var option = {
|
||||||
|
// backgroundColor: '#031d33',
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0],
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [''],
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: [
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '金额',
|
||||||
|
type: 'bar',
|
||||||
|
zlevel: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 30,
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(7,99,84,0.95) ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(71,179,161,0.95)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 20,
|
||||||
|
data: [10],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '背景',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [20],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.2)',
|
||||||
|
|
||||||
|
barBorderRadius: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && ProgressBarDivIntance.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ASdivision(params) {
|
||||||
|
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||||
|
var option = {
|
||||||
|
// title: {
|
||||||
|
// text: 'BY制程单位：',
|
||||||
|
// left: '1%',
|
||||||
|
// top: '1%',
|
||||||
|
// textStyle: {
|
||||||
|
// fontSize: 16,
|
||||||
|
// color: '#9d9d9d',
|
||||||
|
// fontWeight: 'bold',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// legend: {
|
||||||
|
// data: ['正式工占比', '派遣工占比'],
|
||||||
|
// orient: 'horizontal',
|
||||||
|
// itemHeight: 20,
|
||||||
|
// itemWidth: 40,
|
||||||
|
// left: '30%',
|
||||||
|
// top: '8%',
|
||||||
|
// textStyle: {
|
||||||
|
// fontSize: 16,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// 设置图表的位置
|
||||||
|
grid: {
|
||||||
|
bottom: '8%',
|
||||||
|
left: '6%',
|
||||||
|
right: '6%',
|
||||||
|
top: '6%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
// X轴
|
||||||
|
xAxis: {
|
||||||
|
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
|
||||||
|
// 坐标轴刻度
|
||||||
|
axisTick: {
|
||||||
|
show: false, // 是否显示坐标轴刻度 默认显示
|
||||||
|
},
|
||||||
|
// 坐标轴轴线
|
||||||
|
axisLine: {
|
||||||
|
// 是否显示坐标轴轴线 默认显示
|
||||||
|
show: false, // 是否显示坐标轴轴线 默认显示
|
||||||
|
},
|
||||||
|
// 坐标轴在图表区域中的分隔线
|
||||||
|
splitLine: {
|
||||||
|
show: false, // 是否显示分隔线。默认数值轴显示
|
||||||
|
},
|
||||||
|
// 坐标轴刻度标签
|
||||||
|
axisLabel: {
|
||||||
|
show: false, // 是否显示刻度标签 默认显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Y轴
|
||||||
|
yAxis: [
|
||||||
|
// 左侧Y轴
|
||||||
|
{
|
||||||
|
// 坐标轴类型, 'category' 类目轴，适用于离散的类目数据
|
||||||
|
// 为该类型时必须通过 data 设置类目数据
|
||||||
|
type: 'category',
|
||||||
|
// 坐标轴刻度
|
||||||
|
axisTick: {
|
||||||
|
show: false, // 是否显示坐标轴刻度 默认显示
|
||||||
|
},
|
||||||
|
// 坐标轴轴线
|
||||||
|
axisLine: {
|
||||||
|
// 是否显示坐标轴轴线 默认显示
|
||||||
|
show: false, // 是否显示坐标轴轴线 默认显示
|
||||||
|
lineStyle: {
|
||||||
|
// 坐标轴线线的颜色
|
||||||
|
color: '#cdd3ee',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 坐标轴在图表区域中的分隔线
|
||||||
|
splitLine: {
|
||||||
|
show: false, // 是否显示分隔线。默认数值轴显示
|
||||||
|
},
|
||||||
|
// 坐标轴刻度标签
|
||||||
|
axisLabel: {
|
||||||
|
show: true, // 是否显示刻度标签 默认显示
|
||||||
|
fontSize: 16, // 文字的字体大小
|
||||||
|
color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
|
||||||
|
// 使用字符串模板，模板变量为刻度默认标签 {value}
|
||||||
|
formatter: '{value}',
|
||||||
|
},
|
||||||
|
// 类目数据，在类目轴（type: 'category'）中有效
|
||||||
|
data: data.title,
|
||||||
|
inverse: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 系列列表
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar', // 系列类型
|
||||||
|
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||||
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||||
|
stack: '总量',
|
||||||
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||||
|
// 图形上的文本标签
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '玉米',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 图形样式
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fdad3c',
|
||||||
|
},
|
||||||
|
data: data.corn, // 系列中的数据内容数组
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar', // 系列类型
|
||||||
|
name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||||
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||||
|
stack: '总量',
|
||||||
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||||
|
// 图形上的文本标签
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '大豆',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 图形样式
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(156, 220, 130, 0.8)',
|
||||||
|
},
|
||||||
|
data: data.soybean, // 系列中的数据内容数组
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar', // 系列类型
|
||||||
|
name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||||
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||||
|
stack: '总量',
|
||||||
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||||
|
// 图形上的文本标签
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '花生',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 图形样式
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(212, 236, 89, 0.8)',
|
||||||
|
},
|
||||||
|
data: data.peanut, // 系列中的数据内容数组
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar', // 系列类型
|
||||||
|
name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||||
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||||
|
stack: '总量',
|
||||||
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||||
|
// 图形上的文本标签
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '小麦',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 图形样式
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(102, 142, 214, 0.8)',
|
||||||
|
},
|
||||||
|
data: data.wheat, // 系列中的数据内容数组
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar', // 系列类型
|
||||||
|
name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||||
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||||
|
stack: '总量',
|
||||||
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||||
|
// 图形上的文本标签
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '蓝莓',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 图形样式
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(50, 211, 235, 0.8)',
|
||||||
|
},
|
||||||
|
data: data.Blueberries, // 系列中的数据内容数组
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && ASdivisionDivIntance.setOption(option);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
$height: calc(100vh - 100px);
|
||||||
|
.center {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
background: url('@/assets/images/title.png');
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 45px;
|
||||||
|
padding-left: 46px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
p {
|
||||||
|
width: 79px;
|
||||||
|
height: 25px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(16, 111, 111, 1) 0%,
|
||||||
|
rgba(47, 214, 214, 1) 100%
|
||||||
|
);
|
||||||
|
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftWra {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50px;
|
||||||
|
width: 455px;
|
||||||
|
height: 957px;
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(2, 31, 26, 0.3);
|
||||||
|
|
||||||
|
.leftTop {
|
||||||
|
width: 455px;
|
||||||
|
height: 397px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.areaDiv {
|
||||||
|
width: 415px;
|
||||||
|
height: 327px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftbottom {
|
||||||
|
width: 455px;
|
||||||
|
height: 337px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.typesofDiv {
|
||||||
|
width: 410px;
|
||||||
|
height: 267px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightWra {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: 20px;
|
||||||
|
width: 455px;
|
||||||
|
height: 957px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(2, 31, 26, 0.3);
|
||||||
|
.rightTop {
|
||||||
|
width: 455px;
|
||||||
|
height: 439px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.farmlandDiv {
|
||||||
|
width: 415px;
|
||||||
|
height: 340px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.ProgressBar {
|
||||||
|
width: 372px;
|
||||||
|
height: 9px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rightbottom {
|
||||||
|
width: 455px;
|
||||||
|
height: 490px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
width: 400px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
background: rgba(22, 94, 102, 1);
|
||||||
|
border: 1px solid rgba(4, 153, 153, 1) !important;
|
||||||
|
margin-top: 20px;
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ASdivision {
|
||||||
|
width: 415px;
|
||||||
|
height: 368px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
left: 1296px;
|
||||||
|
top: 540px;
|
||||||
|
width: 129px;
|
||||||
|
height: 338px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(2, 31, 26, 0.6);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
p {
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.mt-4 {
|
||||||
|
.el-checkbox--large {
|
||||||
|
height: 30px;
|
||||||
|
width: 108px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
margin: 2px 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-checkbox__label) {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_center {
|
||||||
|
position: fixed;
|
||||||
|
left: 693px;
|
||||||
|
top: 975px;
|
||||||
|
width: 732px;
|
||||||
|
height: 75px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(2, 31, 26, 0.6);
|
||||||
|
border: 1px solid rgba(4, 153, 153, 1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -3,22 +3,66 @@
|
|||||||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||||
<div class="leftWra">
|
<div class="leftWra">
|
||||||
<div class="leftTop">
|
<div class="leftTop">
|
||||||
<div class="title">1111</div>
|
<div class="title">
|
||||||
|
种植面积时间统计
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div ref="areaDiv" class="areaDiv"></div>
|
<div ref="areaDiv" class="areaDiv"></div>
|
||||||
|
<div ref="leftProgressBarDiv" class="ProgressBar"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="leftbottom">
|
<div class="leftbottom">
|
||||||
<div class="title">1111</div>
|
<div class="title">
|
||||||
|
种植面积统计
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||||
|
<div class="tableDiv">
|
||||||
|
<el-table max-height="200" class="ones" :data="tableData" style="width: 415px">
|
||||||
|
<el-table-column prop="date" label="类型" />
|
||||||
|
<el-table-column prop="name" label="面积" />
|
||||||
|
<el-table-column prop="address" label="占比" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightWra">
|
<div class="rightWra">
|
||||||
<div class="rightTop">
|
<div class="rightTop">
|
||||||
<div class="title">1111</div>
|
<div class="title">
|
||||||
|
作物类型统计-高标准农田
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||||
<div ref="ProgressBarDiv" class="ProgressBar"></div>
|
<div ref="ProgressBarDiv" class="ProgressBar"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightbottom">
|
<div class="rightbottom">
|
||||||
<div class="title">1111</div>
|
<div class="title">
|
||||||
|
作物类型统计-行政区划
|
||||||
|
<p>
|
||||||
|
下载
|
||||||
|
<img
|
||||||
|
src="@/assets/icons/svg/downloads.svg"
|
||||||
|
style="width: 14px; height: 14px; cursor: pointer"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<el-select v-model="value" clearable placeholder="Select">
|
<el-select v-model="value" clearable placeholder="Select">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
@ -108,6 +152,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom_center"></div>
|
<div class="bottom_center"></div>
|
||||||
|
<div class="tool">
|
||||||
|
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||||||
|
<span><img src="@/assets/images/amplify.png" alt="" /></span>
|
||||||
|
<span><img src="@/assets/images/reduce.png" alt="" /></span>
|
||||||
|
<span><img src="@/assets/images/measure.png" alt="" /></span>
|
||||||
|
<span><img src="@/assets/images/face.png" alt="" /></span>
|
||||||
|
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -122,13 +174,16 @@ const farmlandDiv = ref(null);
|
|||||||
const ProgressBarDiv = ref(null);
|
const ProgressBarDiv = ref(null);
|
||||||
const ASdivisionDiv = ref(null);
|
const ASdivisionDiv = ref(null);
|
||||||
const value = ref('');
|
const value = ref('');
|
||||||
|
const leftProgressBarDiv = ref(null);
|
||||||
|
|
||||||
|
//行政区划数据
|
||||||
var data = {
|
var data = {
|
||||||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||||||
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
||||||
soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
|
soybean: [45.3, null, null, null, 333.3, null, 333.3, null],
|
||||||
peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
|
peanut: [145.3, 500, 500, null, 333.3, 500, 333.3, null],
|
||||||
wheat: [null, 500, null, 500, null, 500, null, null],
|
wheat: [200, 500, null, 500, null, 500, null, null],
|
||||||
Blueberries: [null, null, null, null, null, null, null, 500],
|
Blueberries: [124, null, null, null, null, null, null, 500],
|
||||||
};
|
};
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
@ -140,6 +195,35 @@ const options = [
|
|||||||
label: 'Option2',
|
label: 'Option2',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
//表格数据
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '小麦',
|
||||||
|
name: '12364亩',
|
||||||
|
address: '35%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '玉米',
|
||||||
|
name: '6823亩',
|
||||||
|
address: '20%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '大豆',
|
||||||
|
name: '5682亩',
|
||||||
|
address: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '地瓜',
|
||||||
|
name: '8964亩',
|
||||||
|
address: '16%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '花生',
|
||||||
|
name: '3550亩',
|
||||||
|
address: '14%',
|
||||||
|
},
|
||||||
|
];
|
||||||
// 组件挂载完成后执行
|
// 组件挂载完成后执行
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initMap();
|
initMap();
|
||||||
@ -148,6 +232,7 @@ onMounted(() => {
|
|||||||
farmland();
|
farmland();
|
||||||
ProgressBar();
|
ProgressBar();
|
||||||
ASdivision();
|
ASdivision();
|
||||||
|
leftProgressBar();
|
||||||
});
|
});
|
||||||
function initMap() {
|
function initMap() {
|
||||||
viewer.value = new Cesium.Viewer('cesiumContainer', {});
|
viewer.value = new Cesium.Viewer('cesiumContainer', {});
|
||||||
@ -155,119 +240,306 @@ function initMap() {
|
|||||||
|
|
||||||
//
|
//
|
||||||
function areachar() {
|
function areachar() {
|
||||||
|
const xAxisData = [
|
||||||
|
'2023/03/06',
|
||||||
|
'2023/04/06',
|
||||||
|
'2023/05/06',
|
||||||
|
'2023/06/06',
|
||||||
|
'2023/07/06',
|
||||||
|
'2023/08/06',
|
||||||
|
'2023/09/06',
|
||||||
|
];
|
||||||
const areaDivIntance = echarts.init(areaDiv.value);
|
const areaDivIntance = echarts.init(areaDiv.value);
|
||||||
var option = {
|
var option = {
|
||||||
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
textStyle: {
|
||||||
|
fontFamily: 'Din-Light',
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
'#123dac',
|
||||||
|
'#73e2e2',
|
||||||
|
'#ff7e85',
|
||||||
|
'#9b52ff',
|
||||||
|
'#fac524',
|
||||||
|
'#46caff',
|
||||||
|
'#a1e867',
|
||||||
|
'#10b2b2',
|
||||||
|
'#ec87f7',
|
||||||
|
'#f4905a',
|
||||||
|
'#00baba',
|
||||||
|
'#facf24',
|
||||||
|
'#e89d67',
|
||||||
|
'#23c6c6',
|
||||||
|
'#fa8699',
|
||||||
|
'#40b7fc',
|
||||||
|
'#006d75',
|
||||||
|
'#595959',
|
||||||
|
'#f4764f',
|
||||||
|
'#a640fc',
|
||||||
|
'#fda23f',
|
||||||
|
'#2d7ae4',
|
||||||
|
'#5092ff',
|
||||||
|
'#9351ed',
|
||||||
|
'#8a89fe',
|
||||||
|
'#df89e8',
|
||||||
|
'#2797ff',
|
||||||
|
'#6ad089',
|
||||||
|
'#7c92e8 ',
|
||||||
|
],
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
left: '47%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 24,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
lineStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(0, 255, 233,0)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: 'rgba(255, 255, 255,1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(0, 255, 233,0)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '15%',
|
left: 60,
|
||||||
right: '3%',
|
right: 25,
|
||||||
left: '11%',
|
top: 50,
|
||||||
bottom: '12%',
|
bottom: 50,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
data: xAxisData,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255,255,255,0.7)',
|
||||||
|
//X轴标签 label 做了特殊处理，防止左右溢出
|
||||||
|
formatter: (value, index) => {
|
||||||
|
if (index === 0 || index === xAxisData.length - 1) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '面积(亩)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255,255,255,0.7)',
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
minInterval: 1,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
name: '白起',
|
||||||
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
data: [
|
||||||
axisLine: {
|
1200, 1700, 1340, 2460, 2790, 211, 124, 131, 124, 360, 124, 78, 160, 604, 17, 0,
|
||||||
lineStyle: {
|
0, 0, 2, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
color: '#C0C4CC',
|
],
|
||||||
width: 1,
|
type: 'line',
|
||||||
},
|
smooth: true,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
cursor: 'pointer',
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
shadowColor: 'rgba(18,61,172,0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
},
|
},
|
||||||
axisTick: {
|
},
|
||||||
show: false,
|
{
|
||||||
|
name: '李泽言',
|
||||||
|
data: [
|
||||||
|
2200, 1790, 2494, 3130, 2710, 3180, 2350, 3410, 51, 146, 31, 41, 61, 485, 5, 0,
|
||||||
|
0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
cursor: 'pointer',
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
shadowColor: 'rgba(115,226,226,0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
},
|
},
|
||||||
axisLabel: {
|
},
|
||||||
margin: 10,
|
{
|
||||||
color: 'rgba(255, 255, 255, 0.7)',
|
name: '许墨',
|
||||||
textStyle: {
|
data: [
|
||||||
fontSize: 14,
|
2800, 1740, 3450, 2340, 2710, 1430, 3232, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
|
||||||
},
|
0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
cursor: 'pointer',
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
shadowColor: 'rgba(255,126,133,0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '许墨',
|
||||||
|
data: [
|
||||||
|
3500, 1400, 2342, 1299, 3420, 2233, 2321, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
|
||||||
|
0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
cursor: 'pointer',
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
shadowColor: 'rgba(255,120,133,0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
};
|
||||||
|
option && areaDivIntance.setOption(option);
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener("resize",function (){
|
||||||
|
areaDivIntance.resize();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
function leftProgressBar() {
|
||||||
|
const leftProgressBarrDivIntance = echarts.init(leftProgressBarDiv.value);
|
||||||
|
var option = {
|
||||||
|
// backgroundColor: '#031d33',
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0],
|
||||||
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
axisLabel: {
|
type: 'category',
|
||||||
formatter: '{value}',
|
data: [''],
|
||||||
color: 'rgba(255, 255, 255, 0.7)',
|
axisLine: { show: false },
|
||||||
},
|
axisTick: [
|
||||||
axisLine: {
|
{
|
||||||
show: false,
|
show: false,
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(192,196,204,1)',
|
|
||||||
type: 'dashed',
|
|
||||||
},
|
},
|
||||||
},
|
],
|
||||||
name: '面积(亩)',
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '面积',
|
name: '金额',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [3598, 1235, 2354, 3251, 1652],
|
zlevel: 1,
|
||||||
barWidth: '14px',
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new echarts.graphic.LinearGradient(
|
barBorderRadius: 30,
|
||||||
0,
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
||||||
0,
|
{
|
||||||
0,
|
offset: 1,
|
||||||
1,
|
color: 'rgba(7,99,84,0.95) ',
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(71,179,161,0.8)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(212,236,89,1) ', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter: '{c}',
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
fontSize: '14',
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(71,179,161,0.95)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 20,
|
||||||
|
data: [10],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '背景',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [20],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.2)',
|
||||||
|
|
||||||
|
barBorderRadius: 50,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
legend: {
|
|
||||||
right: 0,
|
|
||||||
top: 14,
|
|
||||||
data: ['面积'],
|
|
||||||
textStyle: {
|
|
||||||
color: ' rgba(255,255,255,0.7)',
|
|
||||||
fontSize: '14',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
option && areaDivIntance.setOption(option);
|
option && leftProgressBarrDivIntance.setOption(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
function typesof() {
|
function typesof() {
|
||||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||||
var option = {
|
var option = {
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: '总面积',
|
||||||
|
x: 'center',
|
||||||
|
top: '32%',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '123459亩',
|
||||||
|
x: 'center',
|
||||||
|
top: '50%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'rgba(255, 213, 88, 1)',
|
||||||
|
foontWeight: '400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||||
@ -279,14 +551,33 @@ function typesof() {
|
|||||||
'rgba(255,225,104,0.8)',
|
'rgba(255,225,104,0.8)',
|
||||||
], // 指定饼图颜色
|
], // 指定饼图颜色
|
||||||
legend: {
|
legend: {
|
||||||
orient: 'vertical', //图例方向分水平和垂直
|
selectedMode: true, //图例上的点击事件
|
||||||
icon: 'rect', //图例样式
|
type: 'plain',
|
||||||
x: 'center', //图例位置
|
orient: 'vertical',
|
||||||
bottom: 'bottom',
|
left: '85%',
|
||||||
data: ['花生', '小麦', '大豆', '玉米'],
|
top: 'center',
|
||||||
|
align: 'left',
|
||||||
|
itemGap: 20,
|
||||||
|
itemWidth: 12, // 设置宽度
|
||||||
|
itemHeight: 7, // 设置高度
|
||||||
|
symbolKeepAspect: false,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: ' rgba(255,255,255,0.7)',
|
color: 'rgba(255,255,255,0.7)',
|
||||||
fontSize: '14',
|
rich: {
|
||||||
|
name: {
|
||||||
|
verticalAlign: 'right',
|
||||||
|
align: 'left',
|
||||||
|
width: 90,
|
||||||
|
fontSize: 18,
|
||||||
|
color: '#D8DDE3',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
align: 'left',
|
||||||
|
width: 50,
|
||||||
|
fontSize: 18,
|
||||||
|
color: '#D8DDE3',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -297,7 +588,7 @@ function typesof() {
|
|||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: false, //饼图label文字
|
||||||
position: 'left',
|
position: 'left',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgba(41,255,219,1)',
|
color: 'rgba(41,255,219,1)',
|
||||||
@ -318,10 +609,11 @@ function typesof() {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{ value: 25, name: '花生' },
|
|
||||||
{ value: 25, name: '小麦' },
|
{ value: 25, name: '小麦' },
|
||||||
{ value: 25, name: '大豆' },
|
|
||||||
{ value: 25, name: '玉米' },
|
{ value: 25, name: '玉米' },
|
||||||
|
{ value: 25, name: '大豆' },
|
||||||
|
{ value: 25, name: '地瓜' },
|
||||||
|
{ value: 25, name: '花生' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -515,7 +807,6 @@ function ProgressBar() {
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: 'rgba(255, 255, 255, 0.2)',
|
color: 'rgba(255, 255, 255, 0.2)',
|
||||||
|
|
||||||
barBorderRadius: 50,
|
barBorderRadius: 50,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -528,27 +819,6 @@ function ProgressBar() {
|
|||||||
function ASdivision(params) {
|
function ASdivision(params) {
|
||||||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||||
var option = {
|
var option = {
|
||||||
// title: {
|
|
||||||
// text: 'BY制程单位：',
|
|
||||||
// left: '1%',
|
|
||||||
// top: '1%',
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 16,
|
|
||||||
// color: '#9d9d9d',
|
|
||||||
// fontWeight: 'bold',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// legend: {
|
|
||||||
// data: ['正式工占比', '派遣工占比'],
|
|
||||||
// orient: 'horizontal',
|
|
||||||
// itemHeight: 20,
|
|
||||||
// itemWidth: 40,
|
|
||||||
// left: '30%',
|
|
||||||
// top: '8%',
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: 16,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// 设置图表的位置
|
// 设置图表的位置
|
||||||
grid: {
|
grid: {
|
||||||
bottom: '8%',
|
bottom: '8%',
|
||||||
@ -627,7 +897,10 @@ function ASdivision(params) {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
formatter: '玉米',
|
formatter: function (p) {
|
||||||
|
console.log(p);
|
||||||
|
return p.value > 400 ? p.value : '';
|
||||||
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 'bolder',
|
fontWeight: 'bolder',
|
||||||
@ -650,7 +923,7 @@ function ASdivision(params) {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
formatter: '大豆',
|
formatter: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 'bolder',
|
fontWeight: 'bolder',
|
||||||
@ -673,7 +946,7 @@ function ASdivision(params) {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
formatter: '花生',
|
formatter: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 'bolder',
|
fontWeight: 'bolder',
|
||||||
@ -696,7 +969,7 @@ function ASdivision(params) {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
formatter: '小麦',
|
formatter: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 'bolder',
|
fontWeight: 'bolder',
|
||||||
@ -719,7 +992,7 @@ function ASdivision(params) {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
formatter: '蓝莓',
|
formatter: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 'bolder',
|
fontWeight: 'bolder',
|
||||||
@ -746,21 +1019,44 @@ $height: calc(100vh - 100px);
|
|||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
background: #ccc;
|
background: url('@/assets/images/title.png');
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 45px;
|
||||||
|
padding-left: 46px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
p {
|
||||||
|
width: 79px;
|
||||||
|
height: 25px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(16, 111, 111, 1) 0%,
|
||||||
|
rgba(47, 214, 214, 1) 100%
|
||||||
|
);
|
||||||
|
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftWra {
|
.leftWra {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
top: 50px;
|
top: 3%;
|
||||||
width: 455px;
|
width: 24%;
|
||||||
height: 957px;
|
height: 957px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: rgba(2, 31, 26, 0.3);
|
background: rgba(2, 31, 26, 0.3);
|
||||||
|
|
||||||
.leftTop {
|
.leftTop {
|
||||||
width: 455px;
|
width: 100%;
|
||||||
height: 397px;
|
height: 397px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -768,15 +1064,20 @@ $height: calc(100vh - 100px);
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.areaDiv {
|
.areaDiv {
|
||||||
width: 415px;
|
width: 100%;
|
||||||
height: 327px;
|
height: 327px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
.ProgressBar {
|
||||||
|
width: 372px;
|
||||||
|
height: 9px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.leftbottom {
|
.leftbottom {
|
||||||
width: 455px;
|
width: 100%;
|
||||||
height: 337px;
|
height: 337px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -787,14 +1088,35 @@ $height: calc(100vh - 100px);
|
|||||||
width: 410px;
|
width: 410px;
|
||||||
height: 267px;
|
height: 267px;
|
||||||
}
|
}
|
||||||
|
.tableDiv {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
:deep(.ones) {
|
||||||
|
width: 100%;
|
||||||
|
height: 171;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
--el-table-tr-bg-color: null;
|
||||||
|
--el-table-border-color: null;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightWra {
|
.rightWra {
|
||||||
position: absolute;
|
position:absolute;
|
||||||
top: 50px;
|
top: 3%;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
width: 455px;
|
width: 24%;
|
||||||
height: 957px;
|
height: 957px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -802,7 +1124,7 @@ $height: calc(100vh - 100px);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(2, 31, 26, 0.3);
|
background: rgba(2, 31, 26, 0.3);
|
||||||
.rightTop {
|
.rightTop {
|
||||||
width: 455px;
|
width: 100%;
|
||||||
height: 439px;
|
height: 439px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -810,7 +1132,7 @@ $height: calc(100vh - 100px);
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.farmlandDiv {
|
.farmlandDiv {
|
||||||
width: 415px;
|
width: 100%;
|
||||||
height: 340px;
|
height: 340px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -821,7 +1143,7 @@ $height: calc(100vh - 100px);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rightbottom {
|
.rightbottom {
|
||||||
width: 455px;
|
width: 100%;
|
||||||
height: 490px;
|
height: 490px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -850,7 +1172,7 @@ $height: calc(100vh - 100px);
|
|||||||
|
|
||||||
.legend {
|
.legend {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1296px;
|
right: 26%;
|
||||||
top: 540px;
|
top: 540px;
|
||||||
width: 129px;
|
width: 129px;
|
||||||
height: 338px;
|
height: 338px;
|
||||||
@ -893,8 +1215,8 @@ $height: calc(100vh - 100px);
|
|||||||
|
|
||||||
.bottom_center {
|
.bottom_center {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 693px;
|
right: 26%;
|
||||||
top: 900px;
|
bottom: 5%;
|
||||||
width: 732px;
|
width: 732px;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -902,4 +1224,16 @@ $height: calc(100vh - 100px);
|
|||||||
background: rgba(2, 31, 26, 0.6);
|
background: rgba(2, 31, 26, 0.6);
|
||||||
border: 1px solid rgba(4, 153, 153, 1);
|
border: 1px solid rgba(4, 153, 153, 1);
|
||||||
}
|
}
|
||||||
|
.tool {
|
||||||
|
position: absolute;
|
||||||
|
right: 26%;
|
||||||
|
top: 103px;
|
||||||
|
width: 30px;
|
||||||
|
height: 280px;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user