From 0339a49d2b917c4e7d40c6034574e07e7e1f56ca Mon Sep 17 00:00:00 2001
From: tianlong <17603473476@163.com>
Date: Mon, 17 Apr 2023 18:02:03 +0800
Subject: [PATCH] up

---
 .env.development                   |    4 +-
 package-lock.json                  |   58 ++
 package.json                       |    1 +
 src/App.vue                        |    2 +-
 src/assets/icons/svg/downloads.svg |    1 +
 src/assets/images/LAYER.png        |  Bin 0 -> 668 bytes
 src/assets/images/amplify.png      |  Bin 0 -> 957 bytes
 src/assets/images/face.png         |  Bin 0 -> 815 bytes
 src/assets/images/measure.png      |  Bin 0 -> 860 bytes
 src/assets/images/position.png     |  Bin 0 -> 849 bytes
 src/assets/images/reduce.png       |  Bin 0 -> 787 bytes
 src/assets/images/title.png        |  Bin 0 -> 5729 bytes
 src/assets/styles/ruoyi.css        |  309 +++++++
 src/assets/styles/ruoyi.min.css    |    1 +
 src/assets/styles/ruoyi.scss       |   95 ++-
 src/main.js                        |    2 +
 src/views/crops/area/index.vue     | 1239 +++++++++++++++++++++++++++-
 src/views/crops/classify/index.vue |  945 ++++++++++++++++++++-
 src/views/index.vue                |  608 +++++++++++---
 19 files changed, 3076 insertions(+), 189 deletions(-)
 create mode 100644 src/assets/icons/svg/downloads.svg
 create mode 100755 src/assets/images/LAYER.png
 create mode 100755 src/assets/images/amplify.png
 create mode 100755 src/assets/images/face.png
 create mode 100755 src/assets/images/measure.png
 create mode 100755 src/assets/images/position.png
 create mode 100755 src/assets/images/reduce.png
 create mode 100644 src/assets/images/title.png
 create mode 100644 src/assets/styles/ruoyi.css
 create mode 100644 src/assets/styles/ruoyi.min.css

diff --git a/.env.development b/.env.development
index d3111e1..964be65 100755
--- a/.env.development
+++ b/.env.development
@@ -5,5 +5,5 @@ VITE_APP_TITLE = 种植业生产监管数字化系统
 VITE_APP_ENV = 'development'
 
 # 若依管理系统/开发环境
-# 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://192.168.2.96:8080'
+# VITE_APP_BASE_API = 'http://vue.ruoyi.vip/prod-api/'
diff --git a/package-lock.json b/package-lock.json
index 17837e5..fbb351d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@element-plus/icons-vue": "2.0.10",
+        "@fit-screen/vue": "^0.2.0",
         "@vueuse/core": "9.5.0",
         "axios": "0.27.2",
         "echarts": "^5.3.0",
@@ -104,6 +105,47 @@
         "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": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
@@ -4349,6 +4391,22 @@
       "dev": 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": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
diff --git a/package.json b/package.json
index 9fe3f98..1313aa5 100755
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.0.10",
+    "@fit-screen/vue": "^0.2.0",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "echarts": "^5.3.0",
diff --git a/src/App.vue b/src/App.vue
index 21ca0ee..534203a 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <VScaleScreen width="1960" height="1080">
+    <VScaleScreen fullScreen width="1920" height="1080">
         <div class="center">
             <div ref="head" class="headers">
                 种植业生产监管数字化系统
diff --git a/src/assets/icons/svg/downloads.svg b/src/assets/icons/svg/downloads.svg
new file mode 100644
index 0000000..43d0d65
--- /dev/null
+++ b/src/assets/icons/svg/downloads.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/images/LAYER.png b/src/assets/images/LAYER.png
new file mode 100755
index 0000000000000000000000000000000000000000..64266a1b159b859270910886fda9ef81415ed98e
GIT binary patch
literal 668
zcmV;N0%QG&P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrMoC0LR7i=vS21hbKp1_eQ$tBaS|}Klgc9PIPG01t
z5Ii}>OYmU2bm&;<9|)m8A%tXZ$q(pKGIR@RC)cC3XlZa8OlT~~(3awOa3fuY=1Y#_
zPL|wQZ;^Gf^xpU0_Z<=gp}4flqqr)-$^hnYx42*sLBy>VzW?|J01N>5<HhH~!m~Rj
z(}Kk~icZfya1@tT8SpX>(tpe-iboH=T0DxYxshIjM{(7@&h!TNY@1Dk?C<5Jpx*+l
zY-55(avC)k0A|;`h4ZbQ&ICH<n6<q4PF^upOk@vVzo^WVmR<SUsM`xi!Eu-*LarD9
z5{XS@qi!$!{q}ulcFkLuDL--5YdR6Bh@D2wHIV_p;N#~|t*EfQSy4p{4i0?)IN#do
zq#|DFetIRZ4Gs?dv{^chnp@a?vmvjYl-BoEVq14JDRr84kB&~W?wJHQjhbt+om^5e
zwz&%1n-y6EJ#Z8phr_ntH$|exk;-Z!8@Bzv`~Y2!YGw3)>Jw_Ti8I!T7`FYsjtl@~
zak`9+Rwr33=R9uYNK~ddmaEe>j#`;1UmdZwtI2AzSgueNk(4h9J1MR2s~pDWk}W0?
zI*Vm8-AK`WnXDd{bJ~1?3|ppL4T;c=l1iq!K<Amq$uvq%v+kwI7sxP9I*Un!Y0CtX
zEzdkoxo(+iMY4#rTc(QtB34DHTV@h;#Cwq5yYhJ118`w8h(LfnH7T107(`%2+-gmm
zNJYf07RRqYKdt%s`(P;MLCRtriQd_l+dOmrXuAS@R2zZ0vh^nb0000<MNUMnLSTZP
Cm@V4?

literal 0
HcmV?d00001

diff --git a/src/assets/images/amplify.png b/src/assets/images/amplify.png
new file mode 100755
index 0000000000000000000000000000000000000000..dd17f2757407b971f57aa99046259c1f3de61aa8
GIT binary patch
literal 957
zcmV;u148_XP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZsXGugsR7i=vmrYC)K@`XTv%CF(eprK4m#w8hL24xO
zaWNqzCPXm?NJK9rdQuaOi5G&zc=SLB2QQjvf(H|g2hjr|2mua?ns|VN<zTG_6iSmy
z<RdNEmfiJW2bOVLz(D_}?z}hidvE5=o0Nd6#O38>rA`H@0ARuHDn_9CWu6<ux7n`%
zKmdSuOBYlQr*;{pE23an{t@csQR4Cv;8HfAf5|9O^Y(q_cv-2-8Z;$dR_cV*nXbzq
z2xKo{$+b0={#HRM1Z=aAtj+bJ<63JC02oU>A^;?U)8T|a5RP<okMA%J3*kJ{Bkc&A
zF$Gc>1!}(mAo^-(B2xg`i~&H%6qd8Ay~f(oP)!$Jc|S21?Hdj2`B1;@W}h}=Ei}^B
z+0O!5xdwU~jinwjUFK}YT)Ks{nX*u!P|9KbXU|^gr}M1M^&)F$r3-d;wbxK68@;XN
zwB#Ona`8ZCdo?>R($?7z0JI2q45nInKQYIS5tE4r0M24Iu(qv^Lo40lTHj{PLbjIE
z5;2*0^YQY001!l{&EDGN22Zg3wC@M?qZMy$t`{=}lD4W7!Rhr$LZOtC-*xM()^4u!
z6`3o2MXApr3Qzb0|6H{lfwhy@zK2$qdxyq3i`gI?%D0=Vj(U<ab3fyg!7vo4vDa_6
zy~P>9dfPRByL$ov?5$01bJbB#d@>l0+`RjdovU|DdeSYfgg+1lfZW>Zf`5#Bs<A0h
zSrffR+G9#5o;d7Hn+7<JklY+t8tTf7KChVk9ttM{Q&DP<e+n$g3ybqhk6#4U)!&MC
zuJhiVlYE}Tw)*B{FgEgG6I@X?x$1)xfvKp$b&wc+UeQo|*tYzv?~B$a{wc7;LZw&t
z8%#d0D_!Se!D;Vtq@#PBo^^3><SK0{tgOxTqHCb1(Nt0H1^`1@aXz?=?EyfBUQMO#
z*}%qAXskFQ0-K*mHJ)5E9V<N?pA61~&fge>CQG(gZwaPZ<<?dgXamp&viR`%c(iXc
z432~J^1&HB_<w=*0s+!o85Vx-`rxjCw^Rx)NKVIW!{wLq!eTNz;FS3N4uia~m<06S
z<JfM2SW&2sVgiBcS3yqD5jL{D5P|CFWS$$_YY;1$=f-#}EdS!{b~6Y{vH>LuhSllN
fyNyE1@}IUpyn3neUtHc|00000NkvXXu0mjf>)XC}

literal 0
HcmV?d00001

diff --git a/src/assets/images/face.png b/src/assets/images/face.png
new file mode 100755
index 0000000000000000000000000000000000000000..c093800631edeb86702c928f1088184dfafbc9fb
GIT binary patch
literal 815
zcmV+~1JL}5P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr*-1n}R7i=v*IP(aaU2Km@Bf@Rbvy1tneJk!TLq?&
z4kV*Ng}I{DdJuY$AS!x@f*^VribzETq6qd-BH@D%5kd%i@P-5vgD%5ZM3SP|oMy4P
zwN0F!ogQ>@7(2RK`@Nk%+wZgA?|<7Nh=xw9r`d>+1E~TaMP?&Nz&Tl(vSZdY0{{d7
z=!2R@j>6dtV{wB-Fv>104$#nP^#r(@4RlL}j@u{yPSI?{m^E}eXf|S`w&ygf!GTm!
zNMIo`CSwu*SzKNs$v0Fg_+v6ly*de7O6~OtRd;Kx=EWmRVe{=u0LZP-Gur-+3nl#>
zmkA>g0YGuP)u8HXG4t`Vkv{X0xp%jO^6m<&x?5{y<}=6G)xUwzq+>a^LeFS=pPbK8
z9Z-fQ9Wz`Yv{~G4HOL!H2LAWTM*7U+L#68Qk9oIHZc!qr`%c>s>-B}BXmI@fH`fj8
z1Rq_x_t@qi9CP#0xrS@Dq$*}i#-jg;0su`EvWu~U;n{^C#Yon@y>Gs-f4u9dpfXFn
zT6y!z;lSv`QaqSYrJ9#QzluMn$)c*R7Bc`$m!0ZKxYe0LeFMXvh4ROR#pNZEOrXmT
zo+by=O1W61luOe^=>kS@*9gurVI-p1eVPoaef8|5q^?^3v+4fZHOE(9LKOo*x~TN@
z@e0=C3$UKmjf7hbY#oE?pquU$kL$X1C_L{9B?V^!U7wx}2<4A^fB-;_Rt0a*Ye%Z6
zNL`qxXu4D$vVUBOmtSzzMYlpKD7{}HR&_Qv(24?P?UVC&VA%dE;Z~=Es-L%=qZI{=
z-!?uK58bumRNEV^)NdP~TDtr2gHV3KiiK_&{^200tJd=ulH^29aUv+N$0ZRPGE2SM
zKRC8?x#!m$m9rk-27k*iCS#FMdt>2FWd0BQUJ;}SIA@ko5O7Y4r73&1VV0)sG`xNf
tC6ncWK$i`aL@>(DFHVr1ku1No{R23Ily8a{Z+rj%002ovPDHLkV1gkodZPdU

literal 0
HcmV?d00001

diff --git a/src/assets/images/measure.png b/src/assets/images/measure.png
new file mode 100755
index 0000000000000000000000000000000000000000..222ecd2a0f10da4ac7fcb55c82296ac5560ec09e
GIT binary patch
literal 860
zcmV-i1Ec(jP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZs21!IgR7i=v*F8uZaTo^h=k835F~+uPFfoS6owlSp
z#SVc+La<b*L0T=Hx)fU4p-aIbAYD305yhcHCvk8n8U&$KLmVmwq|^+pS}N8it*7xj
zB#j&~Uao_lgb>Z;gFM@P@w@-M@4eg+5JT%3iceSt5G?@8QP><25SDm~oX0x*3jhcJ
zpbT|A0*N~X#?ppJz{CIDbWx!73;{eY26`%k7OE<Lk`$k?77aZM#V4%fSxt)?0YnRl
z0yR?YfYW^4|M^+%fYU7D^m2;0qITqq){hO^Dmtt!0H822I+<RJsK*<;?3%n`+B@D|
zdb6<}0KzV}PhnzoQt-TBqkGgLZ>ZA%z{&n$WaHsWPdvZ|D>~YmGT}MH^q0v;a)Y)S
z0Aed^tlX%tQQxy^clw5WQgAXC)aV{{lxVJ10syzT><@H4{S<b&ecZRzAOJ+BX1BsF
zw+{d+d+w%fwvud7+B@D|Qm3gBx64|a8#K=6rtRK-pSVxm)vgmk@di?p)uT?XX=uc?
z5SetZsO%P|%-n3ClnU<1ySS(BYS(Fp`#ME5`G#_WjqXuLX_HZVexXW9ZTG(Y${&RG
zRCWs^a4`;vL|h6g8BT7b(1>e+QYk5Uqfr+Ru)*-eG#j0nTRqu5IFgD25^9{>NC0r`
z-w5x%dG}G>)vk+7&29le=?z+)4GLsfG3_1i7Hi5aF8gIV%~h4%!te*7z3{{|3!FAm
zw&<mB{n(&QoJg^iHTKW_7j8<a;L6O+29@2yL}%t!%Wt<<=Yn1c*A6(%;_N-yKa9wY
z`Wl&Di=EfQ-zlYn6Sx?cZB0{?c7P<mgX^~*d^lbUY>CHq```ZvyQbIjL4gZaEYoWt
z4*Ph34es;}`NXl8YfUA=QI9t$;uRfjP4NI5jII9uS19yCI2|t2Yf=5`iLDUmrEn^)
zFfqD9p&8*+yih0r5Tvng2!;QE&y*vQfUs0#6a<7NlBdY|V#7Q|&Ql0Q4oS6I0RnU}
mP$B`35ZLq*=X;9$)Ak>!-<8}48c{z00000<MNUMnLSTZ%|A$Wi

literal 0
HcmV?d00001

diff --git a/src/assets/images/position.png b/src/assets/images/position.png
new file mode 100755
index 0000000000000000000000000000000000000000..10c6d6272c8aee34546bdce655a7204b045531c7
GIT binary patch
literal 849
zcmV-X1FrmuP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr`$<GWR7i=vS3O7@VHkeCJDd8`#)3=k6iG<ZfFOcV
z=wM0)TMJFGgQG3&;^N{^hk%<xhb%&Ms8c9H7ngvGNe0CX1yLwndX3ei#JeJ-#TYF{
zF4y7w^iz_%i-bH=xbMC9d4Hbw{VoI)-Yy@nl|wp6FMu}G7bgVzH;v~u@iVsz00aQ|
z?#?lt!;?CbRRk#`rTscs;o<G_5#UuLNDXFq^^W%M9Iur_4I{k(ua!eh7d^EF=jgE5
zIy5M>^aTU}aQNNg(aPF30Q{bQziro#4$@0Fcjret#;#a2*giHAG_yHcS=+W7fGuKA
zG9GdG-6C~<n%PndiL?S-Re=Uo%F4?A(>JSDK6&!M`NGV=6^jPjLIZ(PR#pyY7dG-A
zKK(e8_KxZKnY4FYOl8z_Ij7$BcHeXO-Qt}t0mW2Cy)`jg-ra$hpIO42IFt5{%Y|a`
z{<Fsqn|plXxtvqY>^ZZjD5!t{qqLr6JQCPnp9t))Pk55?h;wvU1b{*!tx(&J$?<+O
zpQgk#TUIc_{LE#)0Ylj=iCuA7W?ah33jIwpD`jOx@`RTpPk5=6l@*8IEz&c3&IVT#
zG3&?-|Gr8p0JIJb3bpvCN=(P4QsfT5TXe;uLFeeONZWCm*;3ha)<;dmz*U(miKl&R
zBq+?!L;yp4l*AQ_2HAJ3p~>tpzqq_3%+H7&ljHr=F)N;yzJQQlT;8da8Eru|SZ*%5
zwbZG(RkP9o*XLgHgqO^0Emch;x0*}9r~q(%?yJFaWfoHz)%iRuSgk^KwdP*G+pr?G
zwYl<(%R7J}s7fQks+-!@h1hBpR#JCehyg>*bR&6^@d$lR$ETLN7_fOCv!E(x=h^NZ
z%)(M!H^E+g%{@L501jstHq5TTO0ZpOib5i-s8e&7+11il7EJ(7P~!)DA(2*EhX${G
z0@a8U!n?({I>@72ynJgA=wCRE=QbNj3IH0<ZSweA_`^A!%^>hLf|Qhz(&d8;xqQ;#
bKW+a3as7qfj(?**00000NkvXXu0mjfXQ7Ok

literal 0
HcmV?d00001

diff --git a/src/assets/images/reduce.png b/src/assets/images/reduce.png
new file mode 100755
index 0000000000000000000000000000000000000000..9d87f895be96e981b0e2436a72e0bc242fadaeab
GIT binary patch
literal 787
zcmV+u1MK{XP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZry-7qtR7i=vm%&dHQ4q$z_jXGWD%Kd9EL)LKsvhj6
zTucb3Mlpmm5xscuq$V1V1dV?IX}D^l2}ctzz@cf72DykF>7^bd)dZ2!q%pQ>S`2M>
zmjj)$F5B(alzyk(&Aj=|yf-s1%RusZM+8M3*T4b*deL5$7__7!@D2Rf`wjpM0E9vL
zzQ%E@%`j6j6>G|FdQpJSJHmj6oq!&b;nOZ%_{IfA9q$;lCP7ih#oC$H<q$=77O+aS
zs?oCs77$^xkX+%A<bL{K6ac#XLlOX#Q#+Y*ayyfKIlt9n9KDPW$?x=Ej2RP<U<A~^
z13+;(p0El)pD_T4R$+M}v!kx*i6A*X*i7sfqw5(n8?v*TeZ!3P(Co}y%m_5fyRtCV
z<sXt7Wp2!vH*%!Uv>6lt_9h?4Xq_t@lA76@f<2MhQG&KoIN6!G7ywWawhSg6Y$o>Y
zLIJ?e&X7!ttG>-TN9U(+%gpH%P8kafh4;~2dZmhYg+r26APuX!oZ6``60gYT`XetU
zEfR<myqw%V)oLw)^^2=N(|-$#@h#rl?KowqLMwgzY<r6>!Did_`_+8HjzhC!GLva>
zm6O{U0O%PD4%mU!p|v*BA5%+Us%E=ANuoBQz*`0vqwAUCay+4T)=cv9>j|sLWeW@(
z&s;j|;nb%mG*paog+r2eWns!0xIPE~j;q7{;FjY7fW@pP>1Q@@aus$3u1UbZSEP1W
zsXA}?FCTtQ{Yu|^z6w>X`!UYyreMmdXDm3N4?rJC{_TgYVst$N&LJ<oxnl<ZFR)o4
zK!cVs!tXv?Z5z0$YH(5Zxc4R=Eh)Ktr8D4~go|#6lFL^B^ZU5eE|5_KHBm`q(2^S1
zP5NSt>@38fCAlK-jk5+Br3idOK(6qI_w{vy!Pf~WQ?aJ)q`#aLQip%qjsV+0Z9fLB
Rqiz5I002ovPDHLkV1f>zWN`oh

literal 0
HcmV?d00001

diff --git a/src/assets/images/title.png b/src/assets/images/title.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee08d38e54c339e5ed6b95a05017551ff046636c
GIT binary patch
literal 5729
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
KdX+lR=>Gu<XG-w^

literal 0
HcmV?d00001

diff --git a/src/assets/styles/ruoyi.css b/src/assets/styles/ruoyi.css
new file mode 100644
index 0000000..b6f3a1f
--- /dev/null
+++ b/src/assets/styles/ruoyi.css
@@ -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;
+}
diff --git a/src/assets/styles/ruoyi.min.css b/src/assets/styles/ruoyi.min.css
new file mode 100644
index 0000000..5c71465
--- /dev/null
+++ b/src/assets/styles/ruoyi.min.css
@@ -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}
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index a7d3ec9..c1c2c97 100755
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -1,9 +1,9 @@
- /**
+/**
  * 通用css样式布局处理
  * Copyright (c) 2019 ruoyi
  */
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
 	padding-top: 5px;
 }
@@ -53,7 +53,18 @@
 	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-weight: 500;
 	line-height: 1.1;
@@ -75,13 +86,19 @@
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
+	.el-table__header-wrapper,
+	.el-table__fixed-header-wrapper {
 		th {
 			word-break: break-word;
-			background-color: #f8f8f9 !important;
-			color: #515a6e;
+			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__body-wrapper {
@@ -89,15 +106,16 @@
 			margin-left: 1px;
 		}
 	}
+	background-color: rgba(255, 255, 255, 0.05) !important;
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+	font-size: 15px;
+	color: #6379bb;
+	border-bottom: 1px solid #ddd;
+	margin: 8px 10px 25px 10px;
+	padding-bottom: 5px;
 }
 
 /** 表格布局 **/
@@ -111,11 +129,11 @@
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
-    width: 100%;
+	margin-top: 5px;
+	border: 1px solid #e5e6e7;
+	background: #ffffff none;
+	border-radius: 4px;
+	width: 100%;
 }
 
 .pagination-container .el-pagination {
@@ -123,13 +141,13 @@
 	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;
-  }
+@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 {
@@ -141,11 +159,12 @@
 /** 表格更多操作下拉样式 */
 .el-table .el-dropdown-link {
 	cursor: pointer;
-	color: #409EFF;
+	color: #409eff;
 	margin-left: 10px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
+.el-table .el-dropdown,
+.el-icon-arrow-down {
 	font-size: 12px;
 }
 
@@ -196,22 +215,22 @@
 /* button color */
 .el-button--cyan.is-active,
 .el-button--cyan:active {
-  background: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+	background: #20b2aa;
+	border-color: #20b2aa;
+	color: #ffffff;
 }
 
 .el-button--cyan:focus,
 .el-button--cyan:hover {
-  background: #48D1CC;
-  border-color: #48D1CC;
-  color: #FFFFFF;
+	background: #48d1cc;
+	border-color: #48d1cc;
+	color: #ffffff;
 }
 
 .el-button--cyan {
-  background-color: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+	background-color: #20b2aa;
+	border-color: #20b2aa;
+	color: #ffffff;
 }
 
 /* text color */
@@ -265,10 +284,10 @@
 }
 
 /* 拖拽列样式 */
-.sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+.sortable-ghost {
+	opacity: 0.8;
+	color: #fff !important;
+	background: #42b983 !important;
 }
 
 /* 表格右侧工具栏样式 */
diff --git a/src/main.js b/src/main.js
index 28725e7..5df9017 100755
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import directive from './directive' // directive
 // 注册指令
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import FitScreen from '@fit-screen/vue'
 
 // svg图标
 import 'virtual:svg-icons-register'
@@ -68,6 +69,7 @@ app.use(store)
 app.use(plugins)
 app.use(elementIcons)
 app.component('svg-icon', SvgIcon)
+app.use(FitScreen)
 
 directive(app)
 
diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue
index 93d845a..6cc2ac3 100644
--- a/src/views/crops/area/index.vue
+++ b/src/views/crops/area/index.vue
@@ -1,10 +1,1239 @@
-/
 <template>
-    <div>种植面积提取</div>
+    <div class="center">
+        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
+        <div class="leftWra">
+            <div class="leftTop">
+                <div class="title">
+                    种植面积时间统计
+                    <p>
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="areaDiv" class="areaDiv"></div>
+                <div ref="leftProgressBarDiv" class="ProgressBar"></div>
+            </div>
+            <div class="leftbottom">
+                <div class="title">
+                    种植面积统计
+                    <p>
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </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 class="rightWra">
+            <div class="rightTop">
+                <div class="title">
+                    作物类型统计-高标准农田
+                    <p>
+                        下载 &nbsp;
+                        <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>
+                        下载 &nbsp;
+                        <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 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>
 </template>
 
-<script>
-export default {};
+<script setup>
+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('');
+const leftProgressBarDiv = ref(null);
+
+//行政区划数据
+var data = {
+    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
+    corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
+    soybean: [45.3, null, null, null, 333.3, null, 333.3, null],
+    peanut: [145.3, 500, 500, null, 333.3, 500, 333.3, null],
+    wheat: [200, 500, null, 500, null, 500, null, null],
+    Blueberries: [124, null, null, null, null, null, null, 500],
+};
+const options = [
+    {
+        value: 'Option1',
+        label: 'Option1',
+    },
+    {
+        value: '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(() => {
+    initMap();
+    areachar();
+    typesof();
+    farmland();
+    ProgressBar();
+    ASdivision();
+    leftProgressBar();
+});
+function initMap() {
+    viewer.value = new Cesium.Viewer('cesiumContainer', {});
+}
+
+//
+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);
+    var option = {
+        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: {
+            trigger: 'axis',
+            axisPointer: {
+                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: {
+            left: 60,
+            right: 10,
+            top: 50,
+            bottom: 50,
+        },
+        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: [
+            {
+                name: '白起',
+                data: [
+                    1200, 1700, 1340, 2460, 2790, 211, 124, 131, 124, 360, 124, 78, 160, 604, 17, 0,
+                    0, 0, 2, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+                ],
+                type: 'line',
+                smooth: true,
+                smoothMonotone: 'x',
+                cursor: 'pointer',
+                showSymbol: false,
+                lineStyle: {
+                    shadowColor: 'rgba(18,61,172,0.5)',
+                    shadowBlur: 10,
+                },
+            },
+            {
+                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,
+                },
+            },
+            {
+                name: '许墨',
+                data: [
+                    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: [
+            {
+                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 && leftProgressBarrDivIntance.setOption(option);
+}
+
+function typesof() {
+    const typesofDivIntance = echarts.init(typesofDiv.value);
+    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: {
+            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: {
+            selectedMode: true, //图例上的点击事件
+            type: 'plain',
+            orient: 'vertical',
+            left: '85%',
+            top: 'center',
+            align: 'left',
+            itemGap: 20,
+            itemWidth: 12, // 设置宽度
+            itemHeight: 7, // 设置高度
+            symbolKeepAspect: false,
+            textStyle: {
+                color: 'rgba(255,255,255,0.7)',
+                rich: {
+                    name: {
+                        verticalAlign: 'right',
+                        align: 'left',
+                        width: 90,
+                        fontSize: 18,
+                        color: '#D8DDE3',
+                    },
+                    value: {
+                        align: 'left',
+                        width: 50,
+                        fontSize: 18,
+                        color: '#D8DDE3',
+                    },
+                },
+            },
+        },
+        series: [
+            {
+                name: '占比',
+                type: 'pie',
+                radius: ['50%', '70%'],
+                avoidLabelOverlap: true,
+                label: {
+                    normal: {
+                        show: false, //饼图label文字
+                        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: '地瓜' },
+                    { 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 = {
+        // 设置图表的位置
+        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: function (p) {
+                        console.log(p);
+                        return p.value > 400 ? p.value : '';
+                    },
+                    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>
 
-<style></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: 20px;
+        }
+    }
+}
+
+.leftWra {
+    position: absolute;
+    left: 20px;
+    top: 3%;
+    width: 24%;
+    height: 957px;
+    opacity: 1;
+    background: rgba(2, 31, 26, 0.3);
+
+    .leftTop {
+        width: 100%;
+        height: 397px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        .areaDiv {
+            width: 100%;
+            height: 327px;
+            opacity: 1;
+            display: flex;
+            padding: 1px;
+        }
+        .ProgressBar {
+            width: 372px;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+    .leftbottom {
+        width: 100%;
+        height: 337px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        .typesofDiv {
+            width: 410px;
+            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 {
+    position:absolute;
+    top: 3%;
+    right: 20px;
+    width: 24%;
+    height: 957px;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgba(2, 31, 26, 0.3);
+    .rightTop {
+        width: 100%;
+        height: 439px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        .farmlandDiv {
+            width: 100%;
+            height: 340px;
+            opacity: 1;
+        }
+        .ProgressBar {
+            width: 372px;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+    .rightbottom {
+        width: 100%;
+        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;
+    right: 26%;
+    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: absolute;
+    right: 26%;
+    bottom: 5%;
+    width: 732px;
+    height: 75px;
+    opacity: 1;
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    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>
diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index e2bfcd4..f39f3a6 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -1,13 +1,946 @@
-/<template>
-  <div>111</div>
+<template>
+    <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>
+                        下载 &nbsp;
+                        <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>
+                        下载 &nbsp;
+                        <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>
 
-<script>
-export default {
+<script setup>
+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>
 
-<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;
+        }
+    }
+}
 
-</style>
\ No newline at end of file
+.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>
diff --git a/src/views/index.vue b/src/views/index.vue
index 5da4de1..fe6deba 100755
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -3,22 +3,66 @@
         <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
         <div class="leftWra">
             <div class="leftTop">
-                <div class="title">1111</div>
+                <div class="title">
+                    种植面积时间统计
+                    <p>
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
                 <div ref="areaDiv" class="areaDiv"></div>
+                <div ref="leftProgressBarDiv" class="ProgressBar"></div>
             </div>
             <div class="leftbottom">
-                <div class="title">1111</div>
+                <div class="title">
+                    种植面积统计
+                    <p>
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </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 class="rightWra">
             <div class="rightTop">
-                <div class="title">1111</div>
+                <div class="title">
+                    作物类型统计-高标准农田
+                    <p>
+                        下载 &nbsp;
+                        <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">1111</div>
+                <div class="title">
+                    作物类型统计-行政区划
+                    <p>
+                        下载 &nbsp;
+                        <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"
@@ -108,6 +152,14 @@
             </div>
         </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>
 </template>
 
@@ -122,13 +174,16 @@ const farmlandDiv = ref(null);
 const ProgressBarDiv = ref(null);
 const ASdivisionDiv = ref(null);
 const value = ref('');
+const leftProgressBarDiv = ref(null);
+
+//行政区划数据
 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],
+    soybean: [45.3, null, null, null, 333.3, null, 333.3, null],
+    peanut: [145.3, 500, 500, null, 333.3, 500, 333.3, null],
+    wheat: [200, 500, null, 500, null, 500, null, null],
+    Blueberries: [124, null, null, null, null, null, null, 500],
 };
 const options = [
     {
@@ -140,6 +195,35 @@ const options = [
         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(() => {
     initMap();
@@ -148,6 +232,7 @@ onMounted(() => {
     farmland();
     ProgressBar();
     ASdivision();
+    leftProgressBar();
 });
 function initMap() {
     viewer.value = new Cesium.Viewer('cesiumContainer', {});
@@ -155,119 +240,306 @@ function initMap() {
 
 //
 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);
     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: {
             trigger: 'axis',
             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: {
-            top: '15%',
-            right: '3%',
-            left: '11%',
-            bottom: '12%',
+            left: 60,
+            right: 25,
+            top: 50,
+            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',
-                data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
-                axisLine: {
-                    lineStyle: {
-                        color: '#C0C4CC',
-                        width: 1,
-                    },
+                name: '白起',
+                data: [
+                    1200, 1700, 1340, 2460, 2790, 211, 124, 131, 124, 360, 124, 78, 160, 604, 17, 0,
+                    0, 0, 2, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+                ],
+                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)',
-                    textStyle: {
-                        fontSize: 14,
-                    },
+            },
+            {
+                name: '许墨',
+                data: [
+                    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: [
             {
-                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',
+                type: 'category',
+                data: [''],
+                axisLine: { show: false },
+                axisTick: [
+                    {
+                        show: false,
                     },
-                },
-                name: '面积(亩)',
+                ],
             },
         ],
         series: [
             {
-                name: '面积',
+                name: '金额',
                 type: 'bar',
-                data: [3598, 1235, 2354, 3251, 1652],
-                barWidth: '14px',
+                zlevel: 1,
                 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',
+                        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,
                     },
                 },
             },
         ],
-        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() {
     const typesofDivIntance = echarts.init(typesofDiv.value);
     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: {
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)',
@@ -279,14 +551,33 @@ function typesof() {
             'rgba(255,225,104,0.8)',
         ], // 指定饼图颜色
         legend: {
-            orient: 'vertical', //图例方向分水平和垂直
-            icon: 'rect', //图例样式
-            x: 'center', //图例位置
-            bottom: 'bottom',
-            data: ['花生', '小麦', '大豆', '玉米'],
+            selectedMode: true, //图例上的点击事件
+            type: 'plain',
+            orient: 'vertical',
+            left: '85%',
+            top: 'center',
+            align: 'left',
+            itemGap: 20,
+            itemWidth: 12, // 设置宽度
+            itemHeight: 7, // 设置高度
+            symbolKeepAspect: false,
             textStyle: {
-                color: ' rgba(255,255,255,0.7)',
-                fontSize: '14',
+                color: 'rgba(255,255,255,0.7)',
+                rich: {
+                    name: {
+                        verticalAlign: 'right',
+                        align: 'left',
+                        width: 90,
+                        fontSize: 18,
+                        color: '#D8DDE3',
+                    },
+                    value: {
+                        align: 'left',
+                        width: 50,
+                        fontSize: 18,
+                        color: '#D8DDE3',
+                    },
+                },
             },
         },
         series: [
@@ -297,7 +588,7 @@ function typesof() {
                 avoidLabelOverlap: true,
                 label: {
                     normal: {
-                        show: true,
+                        show: false, //饼图label文字
                         position: 'left',
                         textStyle: {
                             color: 'rgba(41,255,219,1)',
@@ -318,10 +609,11 @@ function typesof() {
                     },
                 },
                 data: [
-                    { 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: {
                     normal: {
                         color: 'rgba(255, 255, 255, 0.2)',
-
                         barBorderRadius: 50,
                     },
                 },
@@ -528,27 +819,6 @@ function ProgressBar() {
 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%',
@@ -627,7 +897,10 @@ function ASdivision(params) {
                 label: {
                     show: true,
                     position: 'inside',
-                    formatter: '玉米',
+                    formatter: function (p) {
+                        console.log(p);
+                        return p.value > 400 ? p.value : '';
+                    },
                     textStyle: {
                         fontSize: 14,
                         fontWeight: 'bolder',
@@ -650,7 +923,7 @@ function ASdivision(params) {
                 label: {
                     show: true,
                     position: 'inside',
-                    formatter: '大豆',
+                    formatter: '',
                     textStyle: {
                         fontSize: 14,
                         fontWeight: 'bolder',
@@ -673,7 +946,7 @@ function ASdivision(params) {
                 label: {
                     show: true,
                     position: 'inside',
-                    formatter: '花生',
+                    formatter: '',
                     textStyle: {
                         fontSize: 14,
                         fontWeight: 'bolder',
@@ -696,7 +969,7 @@ function ASdivision(params) {
                 label: {
                     show: true,
                     position: 'inside',
-                    formatter: '小麦',
+                    formatter: '',
                     textStyle: {
                         fontSize: 14,
                         fontWeight: 'bolder',
@@ -719,7 +992,7 @@ function ASdivision(params) {
                 label: {
                     show: true,
                     position: 'inside',
-                    formatter: '蓝莓',
+                    formatter: '',
                     textStyle: {
                         fontSize: 14,
                         fontWeight: 'bolder',
@@ -746,21 +1019,44 @@ $height: calc(100vh - 100px);
     .title {
         width: 100%;
         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 {
     position: absolute;
     left: 20px;
-    top: 50px;
-    width: 455px;
+    top: 3%;
+    width: 24%;
     height: 957px;
     opacity: 1;
     background: rgba(2, 31, 26, 0.3);
 
     .leftTop {
-        width: 455px;
+        width: 100%;
         height: 397px;
         opacity: 1;
         display: flex;
@@ -768,15 +1064,20 @@ $height: calc(100vh - 100px);
         justify-content: flex-start;
         align-items: center;
         .areaDiv {
-            width: 415px;
+            width: 100%;
             height: 327px;
             opacity: 1;
             display: flex;
             padding: 1px;
         }
+        .ProgressBar {
+            width: 372px;
+            height: 9px;
+            opacity: 1;
+        }
     }
     .leftbottom {
-        width: 455px;
+        width: 100%;
         height: 337px;
         opacity: 1;
         display: flex;
@@ -787,14 +1088,35 @@ $height: calc(100vh - 100px);
             width: 410px;
             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 {
-    position: absolute;
-    top: 50px;
+    position:absolute;
+    top: 3%;
     right: 20px;
-    width: 455px;
+    width: 24%;
     height: 957px;
     opacity: 1;
     display: flex;
@@ -802,7 +1124,7 @@ $height: calc(100vh - 100px);
     align-items: center;
     background: rgba(2, 31, 26, 0.3);
     .rightTop {
-        width: 455px;
+        width: 100%;
         height: 439px;
         opacity: 1;
         display: flex;
@@ -810,7 +1132,7 @@ $height: calc(100vh - 100px);
         justify-content: flex-start;
         align-items: center;
         .farmlandDiv {
-            width: 415px;
+            width: 100%;
             height: 340px;
             opacity: 1;
         }
@@ -821,7 +1143,7 @@ $height: calc(100vh - 100px);
         }
     }
     .rightbottom {
-        width: 455px;
+        width: 100%;
         height: 490px;
         opacity: 1;
         display: flex;
@@ -850,7 +1172,7 @@ $height: calc(100vh - 100px);
 
 .legend {
     position: absolute;
-    left: 1296px;
+    right: 26%;
     top: 540px;
     width: 129px;
     height: 338px;
@@ -893,8 +1215,8 @@ $height: calc(100vh - 100px);
 
 .bottom_center {
     position: absolute;
-    left: 693px;
-    top: 900px;
+    right: 26%;
+    bottom: 5%;
     width: 732px;
     height: 75px;
     opacity: 1;
@@ -902,4 +1224,16 @@ $height: calc(100vh - 100px);
     background: rgba(2, 31, 26, 0.6);
     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>