From 810587321916bc65f5feba95cf437aaa086b8493 Mon Sep 17 00:00:00 2001
From: danshihao <danshihao@syxysoft.com>
Date: Mon, 15 Apr 2024 09:59:36 +0800
Subject: [PATCH] =?UTF-8?q?[update]=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E3=80=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  34 +-
 package.json                                  |   1 +
 src/App.vue                                   |   2 +-
 .../images/componentImg/btn-blue-155.png      | Bin 0 -> 3124 bytes
 .../images/componentImg/btn-blue-70.png       | Bin 0 -> 3122 bytes
 .../images/componentImg/btn-blue-small.png    | Bin 0 -> 1353 bytes
 .../images/componentImg/btn-cyan-155.png      | Bin 0 -> 4651 bytes
 .../images/componentImg/btn-cyan-327.png      | Bin 0 -> 5193 bytes
 src/assets/images/componentImg/btn-red-70.png | Bin 0 -> 2991 bytes
 src/assets/images/icon/list-arrow.png         | Bin 0 -> 372 bytes
 src/assets/less/common.less                   | 433 ++++++++++---
 src/assets/less/modifyLessVars.js             |   8 +-
 src/components/CommonCard.vue                 |  46 ++
 src/components/CommonCardInfo.vue             |  13 +
 src/components/CommonEmpty.vue                |  12 +
 src/components/dict/JDictSelectTag.vue        |  10 +-
 src/components/layouts/TabLayout.vue          |  23 +-
 src/components/lazy_vant.js                   |  15 +
 src/components/menu/FirstLevelMenu.vue        |   7 +-
 src/components/menu/MobileMenu.vue            |  23 +-
 src/components/page/GlobalHeader.vue          |  13 +-
 src/components/page/GlobalLayout.vue          |   4 +-
 src/components/tools/UserMenu.vue             | 146 +++--
 src/components/vant/DictPicker.vue            |  89 +++
 src/components/vant/SelectPicker.vue          | 108 ++++
 src/enums/commonEnums.js                      |   7 +
 src/main.js                                   |   2 +
 src/views/mobile/home/Home.vue                | 544 +++++++++++++++-
 src/views/mobile/manage/Manage.vue            | 584 +++++++++++++++++-
 .../EquipmentManagement.vue                   |  47 +-
 .../WellheadDataMonitoring.vue                |  22 +-
 src/views/user/Login.vue                      |  24 +-
 32 files changed, 1941 insertions(+), 276 deletions(-)
 create mode 100644 src/assets/images/componentImg/btn-blue-155.png
 create mode 100644 src/assets/images/componentImg/btn-blue-70.png
 create mode 100644 src/assets/images/componentImg/btn-blue-small.png
 create mode 100644 src/assets/images/componentImg/btn-cyan-155.png
 create mode 100644 src/assets/images/componentImg/btn-cyan-327.png
 create mode 100644 src/assets/images/componentImg/btn-red-70.png
 create mode 100644 src/assets/images/icon/list-arrow.png
 create mode 100644 src/components/lazy_vant.js
 create mode 100644 src/components/vant/DictPicker.vue
 create mode 100644 src/components/vant/SelectPicker.vue

diff --git a/package-lock.json b/package-lock.json
index 1caf91c..21a888f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1292,7 +1292,6 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
       "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1300,8 +1299,7 @@
         "regenerator-runtime": {
           "version": "0.13.11",
           "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-          "dev": true
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
         }
       }
     },
@@ -1848,11 +1846,20 @@
         }
       }
     },
+    "@vant/icons": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-3.0.2.tgz",
+      "integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "@vue/babel-plugin-transform-vue-jsx": {
       "version": "1.4.0",
@@ -17955,6 +17962,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.13.2.tgz",
+      "integrity": "sha512-anZbbLqXCq+rUJk10D67mn+V/1/i9tfOTdoR+64B0e+0BzV3KFgpHBF76noLa+yX9i/L+8DeL560WMk0GEN38g==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^3.0.2",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -18121,6 +18140,11 @@
       "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-8.28.2.tgz",
       "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "15.10.1",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
diff --git a/package.json b/package.json
index ed348ed..c4a1633 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "nprogress": "^0.2.0",
     "tinymce": "5.4.1",
     "v-viewer": "^1.6.4",
+    "vant": "^2.13.2",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",
diff --git a/src/App.vue b/src/App.vue
index 38654a1..97cc18a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,7 +60,7 @@ export default {
 
 <style>
 html.mobile-html {
-  font-size: calc(100vw / 7.5);
+  font-size: calc(100vw / 3.75);
   -webkit-text-size-adjust: 100%;
 }
 </style>
diff --git a/src/assets/images/componentImg/btn-blue-155.png b/src/assets/images/componentImg/btn-blue-155.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7c2322cb6c467cb12ebe6a2ae22da27f26c3430
GIT binary patch
literal 3124
zcmV-449oM0P)<h;3K|Lk000e1NJLTq005f+001Ni1^@s6p8ZHH00001b5ch_0Itp)
z=>Px=?ny*JRCr$9T+NGQNfD2HRWsAuz1_9UbS)mdi=MoAQBV+1dhsBFhgoqiDk$nG
zE-u1!A68k>9YjHQ7F<ve1P`9}B!V9H;>DBt2Y8U_p51BpvQr-~oyg3n7ZnwenXl?~
zE8EOa?`1|t{Nf`cGvie~2kGzlHGkIu+yxH~9C+_ThjXdl19)~5nz1bqg@5sn=x}_X
zM}7c-9nyvVL?7BnR-~0e0~X}L#|1eKyi4tYHI8j!8(~SULAWN9;ad%1dVp)dLxZxs
zb4`MPpG{OI^o(49vTDOV{KHS8Lt6YlLQR4dkUpw3YN8h5I-w8!BrlC^qCL@g$af8o
z3kW^50MH_w2o0~XE3|?0KJ+=XCj{C+w{ab5T8}i57t$g~y5=%Mn|H*|BNWuEP0j{5
zJ-_WvQ=9-`pm`5pdNhZxF99B|EWb!s!AQx8)HVhHy5_FZ+OduP_;_r?dm6*(s1H9a
zo-~&8(c~n$@d98WvE*de;Nmz5tA(BOleWw0NIGeD<T9llq-`}@a~sMjx1;}WjN#Vd
z)9^C@c>Vl~?$m`qYvK8K=J3r~18=DT#2wC!BAt;7L}|>N;WzS3YN&AtcMRf**(qi_
zYjSXToCf8!fElC9mdFq9E&Q_G3XqunI$jn&&GxmEPufD-)$)mEe@)*C|6jibHxKvV
zo&$K@P49buv4GFd7VvhEK@7+cmgBW{bSgSW&P2`0IfX2l5|fo(Eu;3$EG3L3`P#(f
zJZo&6lfnDKvK%HyoEZ3d9lV)5EZLXf|LZN>oE-Syx#?@ZJ$n~EQxj7o09Z=G8iU~&
z9E^Xs^7BklBY0OD0<I~*+iG<oJT?4q`$0xi4X7wrOV`IP1Mu9%|I-6_!yVuE?fGN)
zY!&VS09VNwnn(sw-=ON7jcW1lf}>VOiLMWZ9sGa%H2fhfqi2uda~qf}5Hels%jtSb
z-!>cO4AsX-HS&oc*H2zkMz(@i+NK60m#gg!Yl4MnhFmcQ_W$$%ejkHv247HhiU(gR
zU+8LcnpCEsa>eSiWU#c#ZY<F>E)+jvNhXz2VzEP(Iq06#cRadHegz(rgz3AQ=n2cl
z#3$Mk2B}L8K4lEY6Rx>^h-V*J1Nwh@0KcVRdoEz9nTaJsV8qb=3~A{edC$SE`Xn6%
zNQpn^Nwma^?~NoMDNl~o_!5n@i>4#elHMhHO~)Gjxt`YwdtbtUWAK_vSC_R~X!c|_
zJ>K`f4#D<l4tM5DxJUul!NFo46)8hukKN<7Y~%Oxn)A_kk}PW+H&QGw#*9n6q!DZQ
zXf)Ku`Dxg5^2j#hLO_rnS|C`qB_D8mAwJ|q_K<yq)zTNoTmBuu|JNEgdS=hx3w1VV
z;VX~k@XDfv|Ez2%vlDe_Cp*>_a9itPi6_qvl81GolxvrE&$E`sm-<P*%#f6I=p@Z$
zkWM`7NUV6z$L6vq&kz!ig-^@qJo{>=VapfX&k_rlFKv+IN&k<>a5Q<!-*Mo68TK)$
zu=~}ECH!=;fOo=jKx?~PqBt0y`uQ~<qiwSJGD9ie+^{8qq#R!oXo<j$vF7xc1-ep;
zb($g?3JS_JxiSsOLmIU3f)#$bTp4&$_m~Ca<Ew608m-U!_~xGnuk;7mg4>hpCw-$G
zDhBfZcm#)&8~z)valZ&p5T5<V^6rBVj!r4y9?sxpxk7|{ZDUF4m#1NMa9V!l5~XcG
zlbj;UnvHIbi35*MCD$Nn2M~Nzw-kX?vvH>74nO&_Z`sGPv82~@;s-OLr^5l^FB&xN
zn6zEQw*J30fft;I5NH@@?%BVGGs{T`xclCpKZX}fdvIq|fX~@=)n^5bc9N4$t_e62
z)Q7eTI3u!7$$f%S?pbpaoc3pZaqeo1p8lUs{L5$0H6fur$<rq>*Z|<chelL$`+k)U
zCFj-j$622*NtF0Vu+}Wk1vOzP1%3&ug+*&8-K{{a&2*ZxN~?p^v#*V7usQI@NB*UA
z47L<wTCkm_q!srfvXGf8T*|_zG(<Oh;~s_cCR&X~<4gOTZd?pn!iU$AhT3S1R#4T7
zx~18t$<fAWm@PYO+OD%1*OBWa+hZTED5S48CFaup>3%5xPmlb`*=-}(!ZJFCmsWZr
zP%5Tc2ItDi*($RPZGkx*AI~!fZM><Uk1aW0_TyOMM}5T4(vfF79E1Bd-2Z4eG`+Z^
z<rvx+aocJ*q;0uglBYag=)v9vp43kUCf)Dg|LKu`F)X8IW}Cy0HgIYV=XDu!W|uMI
z6|d-1y@t1OK~}xY3bLFd)@Sp2t<aKFa*lMg3|<XS38M@)ZX+Cv!Cm^}z9CwiT3SH!
zNlw>NkDML2FDm>$J@nr#1>3zKk7lwK@mi+PijdNnnj$&p%T2Q^K9(FT`}t8T7D8jO
zL1LHfHIss9wBjh|M{=!T<vNqTR1%RmO0qQEnxBx4+hZXAPbdCcX0RQ<>izi)e!j{|
zG_yFsOaL?vTuaA%8CaUZh(=~FEvPI*Q$X`TvS`Vud;)0!D3@@g(K4)6`mr#TPVm~3
z3XTu?#^u(|c(USeWk&6(0hfjP?&$yN#D6WH*=F!+z{h?Qu)?dfZP-t93XY@AsCHVk
z46@BWEn&>YEAiEIEG=7BKj$?h-x@sI$SaK*!2icb{>%B(=nQ^Uqu<svRsfZhFA2<z
z-zI2F@=E=?>XZ0qli~kDuae%Ze>#EZ&u%+$K;T8)8T_V-Uuj9GVsiCFR|Q+j*^ryt
zR$LXxUCdvB@%YH!4w-FL)MbyW+7|A-HHSAgFcfA`X^T~*Q{^mO$uj6GY)}PfD5C#2
zJS)8_?Y-K+XZDGf|8E__r(FZD;7|F&<0@o^&qdo7zJ0NPzbrkx+sn}D2chPeQvZ<q
zwO+sl@wPZ^{N1l<hvvPDo<on#=r(F#Z}Jp;eB8iK9?(zu+7`ZZv4A(1Z3?u$-)XHe
zrbe^g*4@z+ow?TWbPrefc*#F^UxQb3iYCwIW$)T>3|9N8=2#N|IbG#=epZzSmz*r!
z-eq+8fV(l-gO4>1evChO@o&%IPfG`nO|DjPQkD%k1FHr`2VGuYlSNqM!^;X1n3S8t
zrycQ$pH|aKxPp&zb-Ypy&%&&2<~Sa@w#q89JfhXwa^Ydwx^|58F~@88f8^lC%{};J
zeE2?xKdzpk$(kBD9zSI*OB%#7q~;hNY{XkLq*Z&ucK+=LSznUD%D>6Vb;&uu!`02*
znn0&onEVE==4i67{93rA)$GN6!)>UIWfRNcD<yIhj!*W1{69T_Pti9${=D|}Z)^6*
zS;v6jn;<+c3*<arPow3+3Z{Z_vUxmrs^dmOJly$Op&IFHzrLgG{H>j`416Ap+T<pM
zYrl=5trC5T+*V-o%+H;mtQIBzPY>V|^n;f-*Bnage4i6bXCO9hM3_)<H&+4AMwU@*
z#xZ^CTD#Kcin#K@eB7VKzc?Y|y@6rXTv=ExnQWuKRDiw&|4;YfqhZf>K7+sZ27E~a
zNYB2pa7l0mV;kN;RCugT=b-Y__rYLY8Kdbwe1tOF-}*=$ED&;E9P9&V8`|0>Y8&3~
z@iE)@f4UDJ4#D<t4*zWNoA&SFzYPQREPrfc;BC!$m9n<Q*k@eR!1&f4d?5UkZ`s24
zF6QvBcJsY4JzbI@#INmizfoc@3sgah8d6wta+_qCl@yfWMS<4duvV+C?zB0=;*sN>
z8$<g}X`oX5P|{mp`R02>t&XZ=tF_cR3g-W&fzf0S-v6Zh@x#><gk=jaUd-X&tAMkL
zh`jJ;LE#Epg+j}S1e9<3`9_Y^vYilnWMMP%>n4GQJ-(qbzTGiy<~OH_v`ZHx>%|Le
zEZ0lws0A8t%LR$$FVaH>bB<o>Zs}a`KL*+}`|!TT!4JYu`AC=Wno|!aaspWQmM^SW
z(CB46*nV91f@Y^uqS0bc&VvoUc*I8w;eT-*UL1<=^VDc6+d>9Uv~(RmQ`8H&p+1Ik
zHU3nD#-XT4n+_!Ddh>OrY5Cy&CM|m<sztNbj_<C8@H@#Tcu(jxr~d^;v+d7HnA2DQ
O0000<MNUMnLSTYPRW3RJ

literal 0
HcmV?d00001

diff --git a/src/assets/images/componentImg/btn-blue-70.png b/src/assets/images/componentImg/btn-blue-70.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3fb387ebae89ac0380bb75ad270091bde0b1cc9
GIT binary patch
literal 3122
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/componentImg/btn-blue-small.png b/src/assets/images/componentImg/btn-blue-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..f30334c185d648e13959afee28b02212fcebc488
GIT binary patch
literal 1353
zcmV-P1-AN$P)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px)14%?dR9HvFSj}rBMHK(N?#WCN$R;zH4j#OV-aL5OgMxU{iw6-zqU>IDK~bal
z4U;*nvZA|+f=bq1FsL9Nyy!^;J?zDcC-o2TAUl&x#??(`cDkRw>V7>n)gRLl#eyN7
zSFhgt)%*B$brF)$-sKMY=)h+}jTk-vPo9C~7t73#iF|-XuLh9l$p`@siRCXQ@&A~B
z5JF`HGtXq^<rfiih;DzAx?;i@YG39K`#AN-bv!u=v8N!-0vSFS6zirk0jl%qf&{!P
z7hN4Xm&h7E)>oGCE<#-HpQ0|cKjID(PG1}0=`mwJ*NGTY05%X?HV>@30c&lY&{}EW
zZDL%a;3D&Ij0eXP49q4}(E}q&qGCs&?AZe$0;eh(nY>6kcIq`WR~PWP0E&8txUY&&
zDIY0|nNbzEESAB=8*MM)D{5clsDFt2s{k?uok3J-WhJHd623Gk>mA~O%!;C&i(E!o
zI_K#W*bWx)1qC}1_eS(k?iMI<E<IK>Y#n)y`*HSfh4@JDn+^Vqf*t1G2#=UGRqLV5
zfuvOHMfCK4v3&!S&bfLFZZF|u1L$Ckts5bR38<;N$bgK8JjbAC=WUs-<38JVa%?Vm
zII+6G7Yq-9@c6+I&QB)zJ@w}9QYW;q?E<%C;wvgD`~sV`8cwV>c#A+EOqrVa%<zcb
znT&DGgjMT6L+d&b9jz2?XJvDHja}ec5>{!{>R4G@<fp*&zG3Q(pTo}8TmA0FE_XuW
zGkXI%S6JX~ahq@?Y19-I)tBnp^8{XB;}=Q5Y*JUS(8f=pxY-s^!6y;-_UVPvj#5y0
z4k~n$tI}@qx&FhR3C!O;y&VGraP>Byf=`)ydw8{yT}^2j9aNx;pvh-@0w}?e2dJBD
zo=rz70owVGyDsJ?n<`u#7wj~>r0aqfcZvZ?$`0skYDWx6p(^?1MZ>0sxVW>#=#r<U
z7p(Cs^8me(@vBbNnafKemyXk+JfkU-xjdPi#ajHlsiFLoMcf<E1!Ffftg7#=Swd6*
z^GMQ;Zb26YEq<mvLi_Zd0VGasK+4E&n_J!H5h$`FHQVB|QB3CAEq<anLQ+Em`q1b~
z$xf3HFVB%>y5CN#0+Myw1on#;K+xpJO1jMO(4|Uk|4)@1z(JEwX93y7IH281zWya*
z44S-Y0Hws3ygKAFC?ag_AK>c@pu99#N;bCR;#^<Dy~H@5zB<INd<I2?XNTAEeHh`W
zQiN1V>a6(q7T00PyzgOgZ5ekG<E{8JXoowIhv$YzxRQb?bC8F29;mo$v%nIWPgq=S
z;G{=*QvmVc2EGj$qr%9zY^;hlx7eJd#F;14W_38s_t9uB;O_VcJH|JeV}x56Hapvl
zZ1a*^KzXOc60pG{?$NJ~?`Dpwt|6CYbHEaVS&Coh@(%iWcC9m2P{&;{pd(zFNtY7f
zobJj^aUP+%1X=L14jMRVYN$WL569}P|42D#;0}$@kH_&*7KG#2Nzd)^Yl(w8ZZ}1}
zH^whfe1r494UbS;uj3Z;859C94M+GjiZY<8Fidt6QX}#*jrnY@4bOwW+Q7{|@Ot_g
z6nc1h_$Pi#LD^>9=Qza0uI%%+o)}!RO>7!4%ecuWyw-n|x~W=nrMC^AlWV)=t|-06
zORx6iN-x%t>pYzokmgD+xmhz;dZgES@#oU?nr|u(2^?Wtuk`)`FZ!Te*l(X&00000
LNkvXXu0mjfrc#e9

literal 0
HcmV?d00001

diff --git a/src/assets/images/componentImg/btn-cyan-155.png b/src/assets/images/componentImg/btn-cyan-155.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e6a267f88c0c0f2e63319a52ccf8190b35cba9d
GIT binary patch
literal 4651
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/componentImg/btn-cyan-327.png b/src/assets/images/componentImg/btn-cyan-327.png
new file mode 100644
index 0000000000000000000000000000000000000000..06456a278f0123139109b570c45c5be7510781e6
GIT binary patch
literal 5193
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
DMPhv#

literal 0
HcmV?d00001

diff --git a/src/assets/images/componentImg/btn-red-70.png b/src/assets/images/componentImg/btn-red-70.png
new file mode 100644
index 0000000000000000000000000000000000000000..d20dd38bbbdb0136ff0206ff61f9e0bce11f506f
GIT binary patch
literal 2991
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
W{>s$-(4RL9=CRg?cIMlN<bMN%zvkco

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/list-arrow.png b/src/assets/images/icon/list-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..653b1d793682ce9770ef4317adf0a59e2f40eca9
GIT binary patch
literal 372
zcmV-)0gL{LP)<h;3K|Lk000e1NJLTq000sI000OG1^@s6^n<Ue00001b5ch_0Itp)
z=>Px$E=fc|R47w*kG)O;Q4oc{xw|0ZPhkv7XJu3>6Jt#5Oe}0oXl*UP!l&>7j2a)o
zm{413XF_KKhQ<;tY%sDQ?B3D40R+KGZgOVMnK|bQdG*KxxBS*{@35;rKS^6f#c9&l
znhgS`@zHoGL}Kio!(ohL?Vudj#^BTDMCt=_>QWDku-1vF34Dc7Z^Z+D<N_ch5{8_y
zRGJ03bM%Ny>OzmKa2hHl8}Wug5EMlWU@dA4S<mCpx16;Ka?|%1jq9dYx}BV-tSuh8
zP0Dx(Hny~WiY@Wj?*{Bpl=5)U@k2kimP(p23)H%8ZM;9rqszUxs=JA_EWg&sa4e1S
z-~OHS`i)8@IXAn09|dfps{V{TeSFGZH7A`(D-#n93tvJ#H-fBqQvAm=9)AN2gJFua
Sj@YRH0000<MNUMnLSTYj?xA7;

literal 0
HcmV?d00001

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index c4e8885..426eab3 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -307,92 +307,161 @@ div.ant-table table,
 }
 // 按钮样式
 .custom-btns-box {
+  button.ant-btn {
+    .btn-icon {
+      margin-right: 3px;
+      margin-bottom: 3px;
+      width: 14px;
+    }
+    .btn-text {
+      font-family: PingFang SC, PingFang SC, sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      color: #FFFFFF;
+      line-height: 16px;
+    }
 
-  .btn-icon {
-    margin-right: 3px;
-    margin-bottom: 3px;
-    width: 14px;
-  }
-  .btn-text {
-    font-family: PingFang SC, PingFang SC, sans-serif;
-    font-weight: 500;
-    font-size: 14px;
-    color: #FFFFFF;
-    line-height: 16px;
-  }
-  // 蓝色按钮
-  .btn-blue {
-    background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center !important;
-    width: 88px !important;
-  }
-  .btn-blue-long {
-    background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center !important;
-    width: 128px !important;
-  }
-  // 青色按钮
-  .btn-cyan {
-    background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center !important;
-    width: 88px !important;
-  }
-  .btn-cyan-medium {
-    background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center !important;
-    width: 108px !important;
-  }
+    // 蓝色按钮
+    &.btn-blue {
+      background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center;
+      width: 88px;
+    }
+    &.btn-blue-long {
+      background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center;
+      width: 128px;
+    }
+    // 青色按钮
+    &.btn-cyan {
+      background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center;
+      width: 88px;
+    }
+    &.btn-cyan-medium {
+      background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center;
+      width: 108px;
+    }
 
-  // 按钮公共样式
-  .btn-blue,
-  .btn-cyan,
-  .btn-blue-long,
-  .btn-cyan-medium {
-    border: none !important;
-    background-size: 100% @btn-height-base !important;
+    // 按钮公共样式
+    &.btn-blue,
+    &.btn-cyan,
+    &.btn-blue-long,
+    &.btn-cyan-medium {
+      border: none !important;
+      background-size: 100% @btn-height-base;
+    }
   }
 }
+.ant-btn {
+  &.primary-btn,
+  &.primary-btn:hover,
+  &.primary-btn:focus {
+    width: 88px;
+    height: 32px;
+    background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid #0094FF;
+    color: @text-color;
+  }
+  &.danger-btn,
+  &.danger-btn:hover,
+  &.danger-btn:focus {
+    width: 88px;
+    height: 32px;
+    background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid #FF5353;
+    color: @text-color;
+  }
 
-.ant-btn.primary-btn,
-.ant-btn.primary-btn:hover,
-.ant-btn.primary-btn:focus {
-  width: 88px;
-  height: 32px;
-  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
-  border-radius: 2px 2px 2px 2px;
-  border: 1px solid #0094FF;
-  color: @text-color;
-}
-.ant-btn.danger-btn,
-.ant-btn.danger-btn:hover,
-.ant-btn.danger-btn:focus {
-  width: 88px;
-  height: 32px;
-  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
-  border-radius: 2px 2px 2px 2px;
-  border: 1px solid #FF5353;
-  color: @text-color;
-}
+  &.ant-btn-primary,
+  &.ant-btn-primary:hover,
+  &.ant-btn-primary:focus {
+    background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+    border: 1px solid #0094FF;
+    color: @text-color;
+  }
+  &.ant-btn-primary[disabled],
+  &.ant-btn-primary[disabled]:hover,
+  &.ant-btn-primary[disabled]:focus {
+    color: @text-color;
+    background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(0, 148, 255, 0.6) 100%);
+  }
 
-.ant-btn.ant-btn-primary,
-.ant-btn.ant-btn-primary:hover,
-.ant-btn.ant-btn-primary:focus {
-  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
-  border: 1px solid #0094FF;
-  color: @text-color;
-}
-.ant-btn.ant-btn-primary[disabled],
-.ant-btn.ant-btn-primary[disabled]:hover,
-.ant-btn.ant-btn-primary[disabled]:focus {
-  color: @text-color;
-  background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(0, 148, 255, 0.6) 100%);
+  &.ant-btn-danger,
+  &.ant-btn-danger:hover,
+  &.ant-btn-danger:focus {
+    background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+    border: 1px solid #FF5353;
+    color: @text-color;
+  }
 }
+.mobile-html {
+  .ant-btn {
+    font-size: 0.14rem;
+    line-height: 0.16rem;
+    height: 0.36rem;
+  }
+  .custom-btns-box {
+    .ant-btn {
+      .btn-icon {
+        margin-right: 0.03rem;
+        margin-bottom: 0.03rem;
+        width: 0.14rem;
+      }
+      .btn-text {
+        font-size: 0.14rem;
+        line-height: 0.16rem;
+      }
+      // 蓝色按钮
+      &.btn-blue {
+        width: 0.88rem;
+      }
+      &.btn-blue-long {
+        width: 1.28rem;
+      }
+      &.btn-blue-small {
+        width: 0.36rem;
+      }
+      // 青色按钮
+      &.btn-cyan {
+        width: 0.88rem;
+      }
+      &.btn-cyan-medium {
+        width: 1.08rem;
+      }
+      &.btn-blue,
+      &.btn-cyan,
+      &.btn-blue-small,
+      &.btn-blue-long,
+      &.btn-cyan-medium {
+        background-size: 100% 0.36rem;
+      }
+    }
+  }
 
-.ant-btn.ant-btn-danger,
-.ant-btn.ant-btn-danger:hover,
-.ant-btn.ant-btn-danger:focus {
-  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
-  border: 1px solid #FF5353;
-  color: @text-color;
+  .ant-btn.primary-btn,
+  .ant-btn.primary-btn:hover,
+  .ant-btn.primary-btn:focus,
+  .ant-btn.danger-btn,
+  .ant-btn.danger-btn:hover,
+  .ant-btn.danger-btn:focus {
+    width: 0.88rem;
+    height: 0.32rem;
+    border-radius: 0.02rem;
+    border-width: 0.01rem;
+  }
+
+  .ant-btn.ant-btn-primary,
+  .ant-btn.ant-btn-primary:hover,
+  .ant-btn.ant-btn-primary:focus,
+  .ant-btn.ant-btn-danger,
+  .ant-btn.ant-btn-danger:hover,
+  .ant-btn.ant-btn-danger:focus {
+    border-width: 0.01rem;
+  }
 }
 /* 部分组件end */
 
+// 一些间距
 .ml-8 {
   margin-left: 8px;
 }
@@ -408,12 +477,42 @@ div.ant-table table,
 .mr-10 {
   margin-right: 10px;
 }
+// 移动端下的样式
+.mobile-html {
+  .mb-12 {
+    margin-bottom: .12rem;
+  }
+  .mb-8 {
+    margin-bottom: 0.08rem;
+  }
+  .mb-6 {
+    margin-bottom: 0.06rem;
+  }
+  .mr-6 {
+    margin-right: 0.06rem;
+  }
+}
 // 分割线
 .divider-vertical {
   width: 1px;
   margin: 0 20px;
   background-color: rgba(108, 128, 151, 0.3);
 }
+.divider-horizontal {
+  height: 1px;
+  margin: 20px 0;
+  background-color: rgba(108, 128, 151, 0.3);
+}
+
+// 移动端下的样式
+.mobile-html {
+  .divider-vertical {
+    margin: 0 .1rem;
+  }
+  .divider-horizontal {
+    margin: .12rem 0;
+  }
+}
 
 // 一行的内容
 .info-row {
@@ -448,6 +547,21 @@ div.ant-table table,
   word-break: break-all;
   white-space: nowrap;
 }
+
+// 移动端下的样式
+.mobile-html {
+  .info-row {
+    .info-label {
+      font-size: 0.12rem;
+      line-height: 0.14rem;
+    }
+
+    .info-value {
+      font-size: 0.12rem;
+      line-height: 0.14rem;
+    }
+  }
+}
 // 运行
 .working::before {
   content: '';
@@ -468,7 +582,14 @@ div.ant-table table,
   border-radius: 50%;
   background-color: #FF5353;
 }
-
+.mobile-html {
+  .working::before,
+  .cease::before {
+    width: 0.06rem;
+    height: 0.06rem;
+    margin-right: 0.04rem;
+  }
+}
 // 特殊大数字
 .big-number {
   font-family: Audiowide, Audiowide, sans-serif;
@@ -479,10 +600,14 @@ div.ant-table table,
   background: linear-gradient(90deg, #FFFFFF 0%, #96D0F9 100%);
   -webkit-background-clip: text;
 }
+.mobile-html .big-number {
+  font-size: 0.22rem;
+  line-height: 0.32rem;
+}
 
 // 标题加渐变背景
 .title-background {
-  margin-bottom: 9px;
+  margin-bottom: 10px;
   font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -495,20 +620,40 @@ div.ant-table table,
     content: '';
     display: block;
     position: absolute;
-    top: 6px;
+    top: 4px;
     left: 0;
-    width: 100%;
+    width: calc(100% + 8px);
     height: 16px;
     background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
   }
 
   .title-background-text {
-    padding: 0 4px;
+    margin-left: 4px;
     position: relative;
     height: 22px;
   }
 }
+// 移动端-标题加渐变背景
+.mobile-html {
+  .title-background {
+    margin-bottom: 0.05rem;
+    font-size: 0.14rem;
+    line-height: 0.16rem;
 
+    &::before {
+      top: 0.04rem;
+      height: 0.15rem;
+      width: calc(100% + 0.08rem);
+      background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
+    }
+
+    .title-background-text {
+      margin-left: 0.04rem;
+      position: relative;
+      height: 0.21rem;
+    }
+  }
+}
 // 青色
 .text-cyan { color: @custom-cyan; }
 
@@ -546,6 +691,64 @@ div.ant-table table,
     line-height: 35.5px;
   }
 }
+.mobile-html {
+  .ant-input {
+    height: 0.36rem;
+    border-radius: 0.04rem;
+    padding: 0.04rem 0.11rem;
+    font-size: 0.14rem;
+    border-width: 0.01rem;
+  }
+  textarea.ant-input {
+    height: auto;
+  }
+  .ant-select {
+    display: block;
+    font-size: 0.14rem;
+    .ant-select-selection--single {
+      height: 0.36rem;
+    }
+    .ant-select-selection__rendered {
+      line-height: 0.36rem;
+      margin-left: 0.11rem;
+    }
+    .ant-select-selection--single .ant-select-selection__rendered {
+      margin-right: 0.24rem;
+    }
+    .ant-select-selection__placeholder, .ant-select-search__field__placeholder {
+      right: 0.09rem;
+      height: 0.2rem;
+      margin-top: -0.1rem;
+      line-height: 0.2rem;
+    }
+  }
+  .ant-form-explain, .ant-form-extra {
+    min-height: 0.22rem;
+    font-size: 0.14rem;
+  }
+  .ant-form-item-required::before {
+    font-size: 0.14rem;
+    margin-right: 0.04rem;
+  }
+  .ant-form label {
+    font-size: 0.14rem;
+  }
+
+  .ant-form-item-label {
+    padding: 0;
+    line-height: 0.22rem;
+    margin-bottom: 0.04rem;
+  }
+  .ant-form-item {
+    margin-bottom: 0.12rem;
+  }
+  .ant-form-item-label > label::after {
+    display: none;
+  }
+  .ant-form-item-control {
+    line-height: 0.36rem;
+  }
+}
 /* 表单end */
 
 // flex居中
@@ -561,6 +764,11 @@ div.ant-table table,
   flex-direction: column;
   justify-content: space-between;
 }
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
 // 表格中的tag对齐inline-block导致错位，父元素字体调整为0，解决tag对齐问题
 .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-blue),
@@ -596,4 +804,69 @@ div.ant-table table,
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
+}
+
+// 内容卡片
+.custom-content-card {
+  padding: 12px 16px;
+  position: relative;
+  border: 1px solid;
+  background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
+  border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
+  border-left: none;
+  border-right: none;
+
+  // 伪元素装饰
+  &::before,
+  &::after {
+    pointer-events: none;
+    user-select: none;
+    content: '';
+    display: block;
+    position: absolute;
+  }
+
+  // 四个角
+  &::before {
+    top: -2px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 4px);
+    background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
+    background-repeat: no-repeat;
+    background-position: left top, left bottom, right top, right bottom;
+  }
+  // 两侧的边框
+  &::after {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid;
+    border-top: none;
+    border-bottom: none;
+    border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
+  }
+}
+// 移动端-内容卡片
+.mobile-html {
+  .custom-content-card {
+    padding: 0.1rem 0.08rem;
+    border-width: 0.01rem;
+
+    // 四个角
+    &::before {
+      top: -0.02rem;
+      left: -0.01rem;
+      width: calc(100% + 0.02rem);
+      height: calc(100% + 0.04rem);
+    }
+    // 两侧的边框
+    &::after {
+      border-width: 0.01rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/less/modifyLessVars.js b/src/assets/less/modifyLessVars.js
index d884464..e758961 100644
--- a/src/assets/less/modifyLessVars.js
+++ b/src/assets/less/modifyLessVars.js
@@ -26,5 +26,11 @@ module.exports = {
   'input-height-base': '36px',
 
   // 其他
-  'red-6': '#FF5353'
+  'red-6': '#FF5353',
+
+  // vant
+  white: '#001B36',
+  black: 'rgba(255, 255, 255, 0.96)',
+  red: '#0094FF',
+  'dialog-has-title-message-text-color': 'rgba(255, 255, 255, 0.96)'
 }
diff --git a/src/components/CommonCard.vue b/src/components/CommonCard.vue
index bb46c79..a821551 100644
--- a/src/components/CommonCard.vue
+++ b/src/components/CommonCard.vue
@@ -118,4 +118,50 @@ export default {
   line-height: 16px;
   text-shadow: 1px 1px 0px rgba(21,154,255,0.7), 1px 1px 0px #000000;
 }
+// 如果是移动端设置为rem单位
+.mobile-html {
+  .common-card {
+    border: .01rem solid rgba(0,148,255,0.24);
+    border-bottom: .01rem @primary-color solid;
+
+    // 左下右下高亮边框
+    &::before, &::after {
+      min-width: 0.16rem;
+      height: 0.01rem;
+      bottom: -0.01rem;
+    }
+    &::before {
+      left: 0;
+    }
+    &::after {
+      right: 0;
+    }
+
+    /deep/ .ant-card-head {
+      background-size: 0.01rem 100%, calc(100% - 0.02rem) 100%, 0.01rem 100%;
+      border: none;
+      min-height: 0.42rem;
+      height: 0.42rem;
+      padding: 0 0.16rem;
+    }
+    /deep/ .ant-card-head-title {
+      font-size: 0.14rem;
+      line-height: 0.36rem;
+    }
+    /deep/ .ant-card-head-title::before {
+      width: 0.12rem;
+      height: 0.12rem;
+    }
+    /deep/ .ant-card-body {
+      padding: 0.08rem 0.12rem 0.12rem !important;
+      height: calc(100% - 0.42rem);
+    }
+  }
+  .card-title {
+    margin-left: 0.08rem;
+    font-size: 0.14rem;
+    color: @text-color;
+    line-height: 0.16rem;
+  }
+}
 </style>
diff --git a/src/components/CommonCardInfo.vue b/src/components/CommonCardInfo.vue
index d8df789..52f5a04 100644
--- a/src/components/CommonCardInfo.vue
+++ b/src/components/CommonCardInfo.vue
@@ -76,4 +76,17 @@ export default {
 .mb-15 {
   margin-bottom: 15px;
 }
+
+// 移动端样式
+.mobile-html {
+  .info-row {
+    height: 0.17rem;
+  }
+  .mb-12 {
+    margin-bottom: 0.12rem;
+  }
+  .mb-15 {
+    margin-bottom: 0.15rem;
+  }
+}
 </style>
diff --git a/src/components/CommonEmpty.vue b/src/components/CommonEmpty.vue
index 9cf8371..ae7d51e 100644
--- a/src/components/CommonEmpty.vue
+++ b/src/components/CommonEmpty.vue
@@ -20,4 +20,16 @@ export default {
     color: #0094FF;
   }
 }
+// 移动端字体大小
+.mobile-html {
+  .empty {
+    /deep/.ant-empty-image {
+      height: 1rem;
+      margin-bottom: 0.08rem;
+    }
+    .empty-text {
+      font-size: 0.14rem;
+    }
+  }
+}
 </style>
diff --git a/src/components/dict/JDictSelectTag.vue b/src/components/dict/JDictSelectTag.vue
index 79e67c5..cdb360e 100644
--- a/src/components/dict/JDictSelectTag.vue
+++ b/src/components/dict/JDictSelectTag.vue
@@ -31,6 +31,12 @@ export default {
     getPopupContainer: {
       type: Function,
       default: (node) => node.parentNode
+    },
+    // 过滤的值
+    filterDictValues: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   data () {
@@ -66,14 +72,14 @@ export default {
     initDictData () {
       // 优先从缓存中读取字典配置
       if (getDictItemsFromCache(this.dictCode)) {
-        this.dictOptions = getDictItemsFromCache(this.dictCode)
+        this.dictOptions = (getDictItemsFromCache(this.dictCode) || []).filter(item => !this.filterDictValues.includes(item.value))
         return
       }
 
       // 根据字典Code, 初始化字典数组
       ajaxGetDictItems(this.dictCode, null).then((res) => {
         if (res.success) {
-          this.dictOptions = res.result
+          this.dictOptions = (res.result || []).filter(item => !this.filterDictValues.includes(item.value))
         }
       })
     },
diff --git a/src/components/layouts/TabLayout.vue b/src/components/layouts/TabLayout.vue
index a56c5c9..7d1053d 100644
--- a/src/components/layouts/TabLayout.vue
+++ b/src/components/layouts/TabLayout.vue
@@ -1,27 +1,6 @@
 <template>
   <global-layout @dynamicRouterShow="dynamicRouterShow">
-    <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
-    <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-    <div class='topHeadertabList'>
-      <a-tabs
-        @contextmenu.native="e => onContextmenu(e)"
-        v-if="multipage"
-        :active-key="activePage"
-        class="tab-layout-tabs "
-        style="height:52px"
-        :hide-add="true"
-        type="editable-card"
-        @change="changePage"
-        @tabClick="tabCallBack"
-        @edit="editPage">
-        <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"  >
-          <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title}}</span>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-
-    <div style="margin-left: 24px;">
+    <div :style="isDesktop() && 'margin-left: 24px;'">
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
         <router-view v-if="reloadFlag"/>
diff --git a/src/components/lazy_vant.js b/src/components/lazy_vant.js
new file mode 100644
index 0000000..dc073e9
--- /dev/null
+++ b/src/components/lazy_vant.js
@@ -0,0 +1,15 @@
+/**
+ * 按需加载vant组件
+ */
+import Vue from 'vue'
+
+import {
+  Picker,
+  Popup,
+  Dialog
+} from 'vant'
+import 'vant/lib/index.less'
+Vue.use(Picker)
+Vue.use(Popup)
+Vue.prototype.$vantDialog = Dialog
+Vue.prototype.$vantConfirm = Dialog.confirm
diff --git a/src/components/menu/FirstLevelMenu.vue b/src/components/menu/FirstLevelMenu.vue
index 6a5d1a0..fc00294 100644
--- a/src/components/menu/FirstLevelMenu.vue
+++ b/src/components/menu/FirstLevelMenu.vue
@@ -35,11 +35,6 @@ export default {
     menu: {
       type: Array,
       required: true
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   data () {
@@ -119,7 +114,7 @@ export default {
 
       // update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
       if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
-        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+        this.openKeys = openKeys
       }
       // update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
     },
diff --git a/src/components/menu/MobileMenu.vue b/src/components/menu/MobileMenu.vue
index 2843a49..a05b7fc 100644
--- a/src/components/menu/MobileMenu.vue
+++ b/src/components/menu/MobileMenu.vue
@@ -116,6 +116,7 @@ export default {
 
 <style lang="less" scoped>
 .mobile-menu {
+  background-color: #001125;
   width: 100%;
   height: 100%;
 
@@ -128,8 +129,8 @@ export default {
     margin: 0;
 
     li {
-      height: 1.12rem;
-      padding: 0.12rem;
+      height: 0.56rem;
+      padding: 0.06rem;
       text-align: center;
 
       .menu-item {
@@ -138,13 +139,13 @@ export default {
         background-size: 100%;
         background-repeat: no-repeat;
         background-position: center center;
-        width: .8rem;
-        height: .8rem;
+        width: 0.4rem;
+        height: 0.4rem;
         font-size: 0;
 
         img {
-          width: .36rem;
-          height: .36rem;
+          width: 0.18rem;
+          height: 0.18rem;
           position: absolute;
           left: 50%;
           top: 50%;
@@ -154,9 +155,9 @@ export default {
 
       .menu-item-title {
         font-weight: bold;
-        font-size: 0.2rem;
+        font-size: 0.1rem;
         color: #FFC97A;
-        line-height: 0.23rem;
+        line-height: 0.12rem;
         font-style: normal;
         text-transform: none;
         word-break: break-all;
@@ -167,7 +168,7 @@ export default {
         font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
         color: rgba(255,255,255,0.96);
         text-shadow: 0 4px 4px rgba(0,0,0,0.25);
-        transform: translateY(-0.1rem);
+        transform: translateY(-0.05rem);
       }
 
       // 选中的样式
@@ -179,9 +180,9 @@ export default {
         .menu-item-title {
           font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
           font-weight: bold;
-          font-size: 0.2rem;
+          font-size: 0.1rem;
           color: #FFC97A;
-          line-height: 0.23rem;
+          line-height: 0.12rem;
         }
       }
     }
diff --git a/src/components/page/GlobalHeader.vue b/src/components/page/GlobalHeader.vue
index 6f7591e..b7bed1a 100644
--- a/src/components/page/GlobalHeader.vue
+++ b/src/components/page/GlobalHeader.vue
@@ -15,7 +15,6 @@
       <user-menu :theme="theme"/>
       <!--  头部一级菜单    -->
       <first-level-menu :menu="menus"
-                        :collapsed="collapsed"
                         @select="selectFirstLevelMenu"/>
     </div>
     <!--  移动端头部  -->
@@ -25,7 +24,7 @@
       <div class="mobile-header-right">
         <a-dropdown>
           <a class="ant-dropdown-link">
-            <a-icon type="setting" />
+            <a-icon type="setting" style="font-size: 0.14rem;line-height: 0.44rem" />
           </a>
           <a-menu slot="overlay">
             <user-menu :theme="theme"/>
@@ -295,24 +294,24 @@ export default {
   }
   // 移动端
   .global-header-mobile {
-    height: .88rem;
+    height: 0.44rem;
     background-color: #001125;
     background-repeat: no-repeat;
     background-image: url("~@/assets/images/system-title.png");
     background-position: center center;
-    background-size: 2.88rem;
+    background-size: 1.44rem;
   }
   .mobile-header {
     display: flex;
     justify-content: space-between;
-    height: .88rem;
+    height: 0.44rem;
 
     .mobile-header-left {
-      width: .88rem;
+      width: 0.44rem;
     }
 
     .mobile-header-right {
-      width: .88rem;
+      width: 0.44rem;
       text-align: center;
     }
   }
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 767c285..dc9bb20 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -36,7 +36,7 @@
       </a-layout>
 
       <!--   移动端内容布局   -->
-      <a-layout :style="{backgroundColor: '#001125', padding: '.24rem .24rem 1.12rem'}" v-else-if="device === 'mobile'">
+      <a-layout :style="{backgroundColor: '#001125', padding: '0.12rem 0.12rem 0.56rem'}" v-else-if="device === 'mobile'">
         <!-- layout content -->
         <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
           <slot></slot>
@@ -175,7 +175,7 @@ export default {
 .mobile-footer {
   position: fixed;
   bottom: 0;
-  height: 1.12rem;
+  height: 0.56rem;
   width: 100%;
   padding: 0;
   background-color: transparent;
diff --git a/src/components/tools/UserMenu.vue b/src/components/tools/UserMenu.vue
index e0e2015..9fe6994 100644
--- a/src/components/tools/UserMenu.vue
+++ b/src/components/tools/UserMenu.vue
@@ -1,73 +1,70 @@
 <template>
-  <div class="user-wrapper" :class="theme">
-    <span class="action">
-      <a class="logout_title" @click="handleHelp">
-        <div class="operate" title="帮助">
-          <img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
-          <span class="operate-text">帮助</span>
-        </div>
-      </a>
-    </span>
-<!--    <header-notice class="action"/>-->
-<!--    <span style="display:inline-block;padding: 0 0 0 16px">-->
-<!--      <template v-if='getAvatar()'>-->
-<!--         <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
-<!--      </template>-->
-<!--       <template v-else>-->
-<!--         <a-avatar :size="20">-->
-<!--          <template #icon>  <a-icon type="user"></a-icon></template>-->
-<!--        </a-avatar>-->
-<!--      </template>-->
-<!--    </span>-->
-    <a-dropdown>
+  <div class="user-wrapper" :class="[theme, {mobile: isMobile()}]">
+    <template v-if="isDesktop()">
+      <span class="action">
+        <a class="logout_title" @click="handleHelp">
+          <div class="operate" title="帮助">
+            <img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
+            <span class="operate-text">帮助</span>
+          </div>
+        </a>
+      </span>
+      <a-dropdown>
       <span class=" small-action">
         <div class="operate" :title="nickname()">
           <img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
           <span class="operate-text">{{ nickname() }}</span>
         </div>
       </span>
-      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
-<!--        <a-menu-item key="0">-->
-<!--          <router-link :to="{ name: 'account-center' }">-->
-<!--            <a-icon type="user"/>-->
-<!--            <span>个人中心</span>-->
-<!--          </router-link>-->
-<!--        </a-menu-item>-->
-<!--        <a-menu-item key="1">-->
-<!--          <router-link :to="{ name: 'account-settings-base' }">-->
-<!--            <a-icon type="setting"/>-->
-<!--            <span>账户设置</span>-->
-<!--          </router-link>-->
-<!--        </a-menu-item>-->
-<!--        <a-menu-item key="3"  @click="systemSetting">-->
-<!--           <a-icon type="tool"/>-->
-<!--           <span>系统设置</span>-->
-<!--        </a-menu-item>-->
-<!--        <a-menu-item key="4" @click="updatePassword">-->
-<!--          <a-icon type="setting"/>-->
-<!--          <span>密码修改</span>-->
-<!--        </a-menu-item>-->
-<!--        <a-menu-item key="5" @click="updateCurrentDepart">-->
-<!--          <a-icon type="cluster"/>-->
-<!--          <span>切换部门</span>-->
-<!--        </a-menu-item>-->
-        <a-menu-item key="6" @click="clearCache">
-          <a-icon type="sync"/>
-          <span>清理缓存</span>
-        </a-menu-item>
-       <!-- <a-menu-item key="2" disabled>
-          <a-icon type="setting"/>
-          <span>测试</span>
-        </a-menu-item>
-        <a-menu-divider/>-->
-        <a-menu-item key="3">
-          <a href="javascript:;" @click="handleLogout">
-            <a-icon type="logout"/>
-            <span>退出登录</span>
-          </a>
-        </a-menu-item>
-      </a-menu>
-    </a-dropdown>
+        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+          <!--        <a-menu-item key="0">-->
+          <!--          <router-link :to="{ name: 'account-center' }">-->
+          <!--            <a-icon type="user"/>-->
+          <!--            <span>个人中心</span>-->
+          <!--          </router-link>-->
+          <!--        </a-menu-item>-->
+          <!--        <a-menu-item key="1">-->
+          <!--          <router-link :to="{ name: 'account-settings-base' }">-->
+          <!--            <a-icon type="setting"/>-->
+          <!--            <span>账户设置</span>-->
+          <!--          </router-link>-->
+          <!--        </a-menu-item>-->
+          <!--        <a-menu-item key="3"  @click="systemSetting">-->
+          <!--           <a-icon type="tool"/>-->
+          <!--           <span>系统设置</span>-->
+          <!--        </a-menu-item>-->
+          <!--        <a-menu-item key="4" @click="updatePassword">-->
+          <!--          <a-icon type="setting"/>-->
+          <!--          <span>密码修改</span>-->
+          <!--        </a-menu-item>-->
+          <!--        <a-menu-item key="5" @click="updateCurrentDepart">-->
+          <!--          <a-icon type="cluster"/>-->
+          <!--          <span>切换部门</span>-->
+          <!--        </a-menu-item>-->
+          <a-menu-item key="6" @click="clearCache">
+            <a-icon type="sync"/>
+            <span>清理缓存</span>
+          </a-menu-item>
+          <!-- <a-menu-item key="2" disabled>
+             <a-icon type="setting"/>
+             <span>测试</span>
+           </a-menu-item>
+           <a-menu-divider/>-->
+          <a-menu-item key="3">
+            <a href="javascript:;" @click="handleLogout">
+              <a-icon type="logout"/>
+              <span>退出登录</span>
+            </a>
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </template>
+    <template v-else-if="isMobile()">
+      <a href="javascript:;" @click="handleLogout">
+        <a-icon type="logout"/>
+        <span>退出登录</span>
+      </a>
+    </template>
     <user-password ref="userPassword"></user-password>
     <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
     <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
@@ -161,7 +158,23 @@ export default {
     },
     handleLogout () {
       const that = this
-
+      // 移动端登出弹框
+      if (this.isMobile()) {
+        this.$vantConfirm({
+          title: '提示',
+          message: '真的要注销登录吗 ?'
+        }).then(() => {
+          return that.Logout({}).then(() => {
+            window.location.replace('/user/login')
+          }).catch(err => {
+            that.$message.error({
+              title: '错误',
+              description: err.message
+            })
+          })
+        }).catch(() => {})
+        return
+      }
       this.$confirm({
         title: '提示',
         content: '真的要注销登录吗 ?',
@@ -285,6 +298,11 @@ export default {
       }
     }
   }
+  .user-wrapper.mobile {
+    height: auto;
+    font-size: 0.12rem;
+    padding: 0.08rem;
+  }
   /* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
   /* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
 </style>
diff --git a/src/components/vant/DictPicker.vue b/src/components/vant/DictPicker.vue
new file mode 100644
index 0000000..8fc666e
--- /dev/null
+++ b/src/components/vant/DictPicker.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <j-dict-select-tag v-bind="$attrs"
+                       v-on="$listeners"
+                       :placeholder="placeholder"
+                       :open="false"
+                       ref="dictSelect"
+                       :value="value"
+                       @click.capture.native="onOpen"></j-dict-select-tag>
+    <!-- 移动端下拉框 -->
+    <van-popup v-model="show"
+               class="dict-picker"
+               position="bottom"
+               safe-area-inset-bottom>
+      <van-picker
+        :loading="loading"
+        :title="placeholder"
+        :columns="dictOptions"
+        show-toolbar
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DictPicker',
+  props: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    value: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      show: false,
+      loading: false,
+      dictOptions: []
+    }
+  },
+  methods: {
+    // 打开下拉，并且获取下拉数据
+    onOpen () {
+      this.show = true
+      this.dictOptions = [
+        { text: '请选择', value: undefined },
+        ...this.$refs.dictSelect.getCurrentDictOptions()
+      ]
+    },
+    // 确认
+    onConfirm (value) {
+      this.$emit('change', value.value)
+      this.onCancel()
+    },
+    // 取消
+    onCancel () {
+      this.show = false
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@assets/less/modifyLessVars.less";
+.dict-picker {
+  /deep/.van-picker__confirm {
+    color: #fff;
+  }
+  /deep/.van-picker__cancel {
+    color: @text-color-secondary
+  }
+  /deep/.van-picker__mask {
+    background: transparent;
+  }
+}
+</style>
diff --git a/src/components/vant/SelectPicker.vue b/src/components/vant/SelectPicker.vue
new file mode 100644
index 0000000..d606d61
--- /dev/null
+++ b/src/components/vant/SelectPicker.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <a-select v-bind="$attrs"
+              v-on="$listeners"
+              :placeholder="placeholder"
+              :open="false"
+              :value="value"
+              @click.capture.native="onOpen">
+      <a-select-option v-for="item in options" :key="item[valueKey]" :value="item[valueKey]">{{item[labelKey]}}</a-select-option>
+    </a-select>
+    <!-- 移动端下拉框 -->
+    <van-popup v-model="show"
+               class="select-picker"
+               position="bottom"
+               safe-area-inset-bottom>
+      <van-picker
+        :loading="loading"
+        :title="placeholder"
+        :columns="options"
+        show-toolbar
+        :value-key="labelKey"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SelectPicker',
+  props: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    list: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    // 显示的字段
+    labelKey: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+    // 实际的值
+    valueKey: {
+      type: String,
+      required: false,
+      default: 'id'
+    },
+    value: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      show: false,
+      loading: false,
+      options: []
+    }
+  },
+  methods: {
+    // 打开下拉，并且获取下拉数据
+    onOpen () {
+      this.show = true
+      this.options = [
+        { [this.labelKey]: '请选择', [this.valueKey]: undefined },
+        ...this.list
+      ]
+    },
+    // 确认
+    onConfirm (value) {
+      this.$emit('change', value[this.valueKey])
+      this.onCancel()
+    },
+    // 取消
+    onCancel () {
+      this.show = false
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@assets/less/modifyLessVars.less";
+.select-picker {
+  /deep/.van-picker__confirm {
+    color: #fff;
+  }
+  /deep/.van-picker__cancel {
+    color: @text-color-secondary
+  }
+  /deep/.van-picker__mask {
+    background: transparent;
+  }
+}
+</style>
diff --git a/src/enums/commonEnums.js b/src/enums/commonEnums.js
index 9d6606f..4e75d45 100644
--- a/src/enums/commonEnums.js
+++ b/src/enums/commonEnums.js
@@ -33,3 +33,10 @@ export const msgType = {
   hostToDevice: { label: 'Host-》Device', value: 'hostToDevice' },
   deviceToHost: { label: 'Device-》Host', value: 'deviceToHost' }
 }
+
+// 移动端设备类型字典
+export const deviceType = {
+  rtuController: { label: 'RTU控制器', value: '1' },
+  transmissionTerminal: { label: '天然气数据远传终端', value: '2' },
+  wellheadEquipment: { label: '井口设备', value: '3' }
+}
diff --git a/src/main.js b/src/main.js
index 769e70e..6b63df7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,8 @@ import '@/components/jero/JVxeTable/install'
 import '@/components/JVxeCells/install'
 // 表单验证
 import { rules } from '@/utils/rules'
+// 导入vant
+import '@/components/lazy_vant'
 
 require('@/components/onlineForm/onlineForm')
 require('@/components/onlineForm/OnlineForm.css')
diff --git a/src/views/mobile/home/Home.vue b/src/views/mobile/home/Home.vue
index 80ee5c3..fa2174b 100644
--- a/src/views/mobile/home/Home.vue
+++ b/src/views/mobile/home/Home.vue
@@ -1,15 +1,551 @@
 <template>
-  <div>
-    Home
-  </div>
+  <a-spin :spinning="loading">
+    <!-- 查询区域 -->
+    <div class="mb-12 header-search">
+      <a-form>
+        <a-row type="flex" justify="space-between">
+          <a-col flex="2.51rem">
+            <a-form-item label="设备类型" :labelCol="{span:6}" :wrapperCol="{span:18}">
+              <dict-picker :triggerChange="true"
+                           style="width: 100%"
+                           class="search-input"
+                           dictCode="device_type"
+                           :filter-dict-values="[deviceType.rtuController.value]"
+                           @change="changeDeviceType"
+                           v-model="queryParam.deviceType"
+                           placeholder="请选择设备类型"/>
+            </a-form-item>
+          </a-col>
+          <a-col flex="0.88rem">
+            <span class="search-operate-btns custom-btns-box">
+              <a-button class="btn-blue" type="primary" @click="searchQuery">
+                <span class="btn-text">检索设备</span>
+              </a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div v-if="hasData" class="all-data-container">
+      <!-- 井口设备 -->
+      <template v-if="lastQuery.deviceType === deviceType.wellheadEquipment.value">
+        <!-- 油井基础信息 -->
+        <div class="mb-12">
+          <common-card title="油井基础信息">
+            <common-card-info :data="allData"
+                              :left-list="labelData.oilWellLeft || []"
+                              :right-list="labelData.oilWellRight || []"
+                              gutter="12"/>
+          </common-card>
+        </div>
+        <!-- 油井实时参数 -->
+        <div class="mb-12">
+          <common-card title="油井实时参数">
+            <common-card-info :data="allData"
+                              :left-list="labelData.oilWellsRealTimeParamsLeft || []"
+                              :right-list="labelData.oilWellsRealTimeParamsRight || []"/>
+          </common-card>
+        </div>
+        <!-- 实时示功图 -->
+        <div class="mb-12">
+          <common-card title="实时示功图">
+            <div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
+              <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
+            </div>
+            <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="2.03rem"/>
+          </common-card>
+        </div>
+        <!-- 底部查询 -->
+        <div class="bottom-search">
+          <a-form>
+            <a-row type="flex" justify="space-between">
+              <a-col flex="2.59rem">
+                <a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}">
+                  <span slot="label" class="vertical-label">油<br/>井</span>
+                  <dict-picker :triggerChange="true"
+                               class="search-input mb-8"
+                               style="width: 100%;"
+                               dictCode="wellhead_area"
+                               @change="changeWellSite"
+                               v-model="queryParam.wellheadArea"
+                               placeholder="请选择所属井场"/>
+                  <select-picker class="search-input"
+                                 style="width: 100%"
+                                 v-model="queryParam.singleWell"
+                                 placeholder="请选择单井"
+                                 label-key="wellheadName"
+                                 :list="singleWellList"
+                                 allowClear/>
+                </a-form-item>
+              </a-col>
+              <a-col flex="0.8rem">
+                <span class="search-operate-btns custom-btns-box">
+                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
+                    <span class="btn-text">查询</span>
+                  </a-button>
+                  <div class="flex-between">
+                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                      <span class="btn-text"><a-icon type="left" /></span>
+                    </a-button>
+                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                      <span class="btn-text"><a-icon type="right" /></span>
+                    </a-button>
+                  </div>
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+      </template>
+      <!-- 天然气远程终端 -->
+      <template v-else-if="lastQuery.deviceType === deviceType.transmissionTerminal.value">
+        <!-- 油井基础信息 -->
+        <div class="mb-12">
+          <common-card title="门站信息">
+            <common-card-info :data="allData"
+                              :left-list="labelData.gateStationLeft || []"
+                              :right-list="labelData.gateStationRight || []"
+                              gutter="12"/>
+          </common-card>
+        </div>
+        <!-- 实时运行参数 -->
+        <div class="mb-12">
+          <common-card title="实时运行参数">
+            <template v-for="(item, index) in allData.realTimeRunningParamsList">
+              <common-card-info :data="item"
+                                :key="(item.id || item.channelNo) + 'info'"
+                                :left-list="labelData.realTimeRunningParamsLeft || []"
+                                :right-list="labelData.realTimeRunningParamsRight || []"/>
+                <div class="divider-horizontal"
+                     v-if="index !== allData.realTimeRunningParamsList.length - 1"
+                     :key="(item.id || item.channelNo) + 'horizontal-line'"></div>
+            </template>
+          </common-card>
+        </div>
+        <!-- 底部查询 -->
+        <div class="bottom-search">
+          <a-form>
+            <a-row type="flex" justify="space-between">
+              <a-col flex="2.59rem">
+                <a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}">
+                  <span slot="label" class="vertical-label">场站<br/>门站</span>
+                  <dict-picker :triggerChange="true"
+                               class="search-input mb-8"
+                               style="width: 100%"
+                               dictCode="wellhead_area"
+                               @change="changeWellSite"
+                               v-model="queryParam.wellheadArea"
+                               placeholder="请选择场站门站"/>
+                  <select-picker class="search-input"
+                                 style="width: 100%"
+                                 v-model="queryParam.singleWell"
+                                 placeholder="请选择数采设备"
+                                 label-key="wellheadName"
+                                 :list="singleWellList"
+                                 allowClear/>
+                </a-form-item>
+              </a-col>
+              <a-col flex="0.8rem">
+                <span class="search-operate-btns custom-btns-box">
+                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
+                    <span class="btn-text">查询</span>
+                  </a-button>
+                  <div class="flex-between">
+                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                      <span class="btn-text"><a-icon type="left" /></span>
+                    </a-button>
+                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                      <span class="btn-text"><a-icon type="right" /></span>
+                    </a-button>
+                  </div>
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+      </template>
+    </div>
+    <!--  没有数据查询为空  -->
+    <div v-else class="empty-box">
+      <common-empty/>
+    </div>
+  </a-spin>
 </template>
 
 <script>
+// 默认写死数据
+import CommonCard from '@comp/CommonCard'
+import CommonCardInfo from '@comp/CommonCardInfo'
+import ResponsiveChart from '@comp/ResponsiveChart'
+import CommonEmpty from '@comp/CommonEmpty'
+import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
+import { generateBaseOption } from '@/utils/charts'
+import * as echarts from 'echarts'
+import { deviceType, wellheadType } from '@/enums/commonEnums'
+import DictPicker from '@comp/vant/DictPicker'
+import SelectPicker from '@comp/vant/SelectPicker'
+
+const staticData = {
+  wellName: '华H62-1',
+  pumpingType: '抽油机',
+  wellType: '水平井',
+  wellField: '华H62井场',
+  productionLayer: '长_7_2',
+  productionDate: '2020-03-27',
+  realTimeMoisture: '11.1',
+  hourlyMoisture: '11.8',
+  twentyFourHourMoisture: '12.3',
+  dynamicLiquidPressure: '1.55',
+  dynamicLiquidSoundVelocity: '370',
+  dynamicLiquidDepth: '96',
+  timeRate: '100',
+  openingDuration: '15时0分',
+  dailyWaterProduction: '4.34',
+  dailyLiquidProduction: '19.09',
+  dailyOilProduction: '14.75',
+  electricityUsage: '0.00',
+  wellCondition: '功图错误',
+  pumpDepth: '1340',
+  pumpDiameter: '57',
+  pumpEfficiency: '20.05',
+  comment: '当前工作状态良好，请按时检查',
+  pumpType: '常规泵',
+  // 门站信息
+  stationName: '济源1#2号站',
+  region: '济宁区域',
+  terminalType: '电池供电设备',
+  flowmetersNumber: '30',
+  dataAcquisitionTerminals: '5',
+  equipmentInstallationTime: '2024-12-25',
+  // 实时运行参数
+  realTimeRunningParamsList: [
+    ...new Array(4).fill(0).map((_, i) => {
+      return {
+        channelNo: '济源1#通道' + i,
+        cumulativeFlow: '1232222',
+        instantaneousStandardCondition: '236.33',
+        realTimeTemperature: '35',
+        realTimePressure: '1.23',
+        instantaneousWorkingConditions: '256.33'
+      }
+    })
+  ]
+}
+
 export default {
-  name: 'Home'
+  name: 'Home',
+  components: { SelectPicker, DictPicker, CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
+  data () {
+    return {
+      deviceType,
+      loading: false,
+      queryParam: {},
+      lastQuery: {},
+      defaultId: 'default', // 默认数据的id
+      hasData: false, // 有没有请求到数据
+      // 油井实时数据
+      oilWellRealTimeData: {},
+      // 所有面板展示的数据
+      allData: {},
+      // 定时器，用于10秒请求一次
+      timer: null,
+      // 页面显示label和对应数据字段
+      labelData: {
+        // 油井基础信息
+        oilWellLeft: [
+          { label: '油井名称', valueField: 'wellName' },
+          { label: '机采类型', valueField: 'pumpingType' },
+          { label: '井型', valueField: 'wellType' }
+        ],
+        oilWellRight: [
+          { label: '所属井场', valueField: 'wellField' },
+          { label: '开采层位', valueField: 'productionLayer' },
+          { label: '投产日期', valueField: 'productionDate' }
+        ],
+        // 油井实时参数
+        oilWellsRealTimeParamsLeft: [
+          { label: '油压', valueField: 'oilPressure', unit: 'MPa' },
+          { label: 'A相电流', valueField: 'currentA', unit: 'A' },
+          { label: 'B相电流', valueField: 'currentB', unit: 'A' },
+          { label: 'C相电流', valueField: 'currentC', unit: 'A' },
+          { label: '有功功率', valueField: 'activePower', unit: 'KW' },
+          { label: '功率因素', valueField: 'powerFactor', unit: '' },
+          { label: '最大载荷', valueField: 'maxLoad', unit: 'KN' },
+          { label: '冲程', valueField: 'stroke', unit: 'm' }
+        ],
+        oilWellsRealTimeParamsRight: [
+          { label: '套压', valueField: 'casingPressure', unit: 'MPa' },
+          { label: 'A相电压', valueField: 'voltageA', unit: 'V' },
+          { label: 'B相电压', valueField: 'voltageB', unit: 'V' },
+          { label: 'C相电压', valueField: 'voltageC', unit: 'V' },
+          { label: '无功功率', valueField: 'reactivePower', unit: 'KW' },
+          { label: '输出频率', valueField: 'outputFrequency', unit: 'Hz' },
+          { label: '最小载荷', valueField: 'minLoad', unit: 'KN' },
+          { label: '冲次', valueField: 'strokeCount', unit: '次/分' }
+        ],
+        // 门站信息
+        gateStationLeft: [
+          { label: '场站名称', valueField: 'stationName' },
+          { label: '所属区域', valueField: 'region' },
+          { label: '终端类型', valueField: 'terminalType' }
+        ],
+        gateStationRight: [
+          { label: '流量计数量', valueField: 'flowmetersNumber', unit: '台' },
+          { label: '数采终端数量', valueField: 'dataAcquisitionTerminals', unit: '台' },
+          { label: '设备安装时间', valueField: 'equipmentInstallationTime', unit: '' }
+        ],
+        // 实时运行参数
+        realTimeRunningParamsLeft: [
+          { label: '通道编号', valueField: 'channelNo', unit: '' },
+          { label: '累计流量', valueField: 'cumulativeFlow', unit: 'm³' },
+          { label: '标况瞬时', valueField: 'instantaneousStandardCondition', unit: 'm³/d' }
+        ],
+        realTimeRunningParamsRight: [
+          { label: '实时温度', valueField: 'realTimeTemperature', unit: '℃' },
+          { label: '实时压力', valueField: 'realTimePressure', unit: 'Mpa' },
+          { label: '工况瞬时', valueField: 'instantaneousWorkingConditions', unit: 'm³/d' }
+        ]
+      },
+      // 油井下拉
+      singleWellList: []
+    }
+  },
+  mounted () {
+    this.searchQuery()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    searchQuery () {
+      const params = Object.assign({}, this.queryParam)
+      // 保存最后一次搜索参数
+      this.lastQuery = params
+      // 根据设备类型区分
+      switch (params.deviceType + '') {
+        // 天然气数据远传终端
+        case deviceType.transmissionTerminal.value:
+          this.loadOilWellRealTimeData()
+          clearInterval(this.timer)
+          this.timer = null
+          break
+        // 井口设备
+        case deviceType.wellheadEquipment.value:
+          // 每10秒请求一次实时数据
+          this.loadOilWellRealTimeData()
+          clearInterval(this.timer)
+          this.timer = setInterval(() => {
+            this.loadOilWellRealTimeData()
+          }, 1000 * 10)
+          break
+        default:
+          // 如果没有就置空数据，不请求实时数据
+          this.allData = {}
+          clearInterval(this.timer)
+          this.timer = null
+          this.hasData = false
+          return
+      }
+    },
+    // 加载实时数据(实时示功图)(每10s请求一次)
+    loadOilWellRealTimeData () {
+      this.loading = true
+      getOilWellRealTimeData({ id: this.defaultId }).then(res => {
+        if (res.success) {
+          this.hasData = !!res.result
+          const data = res.result || {}
+          this.oilWellRealTimeData = data
+          // 将油井实时参数放进全部数据中
+          this.allData = Object.assign({}, staticData, data['油井实时参数'])
+          this.initIndicatorDiagram(data['实时示功图'])
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 初始化 实时示功图
+    initIndicatorDiagram (data) {
+      // 没有渲染出组件就不执行
+      if (!this.$refs.indicatorDiagram) {
+        return
+      }
+      // 置空数据
+      if (!data || Object.keys(data).length === 0) {
+        this.$refs.indicatorDiagram.updateMyChartOption()
+        return
+      }
+      // 获取基础配置
+      const legendData = ['上冲程', '下冲程']
+      const option = generateBaseOption()
+      option.legend.data = legendData
+      option.xAxis[0].data = data['X轴']
+      option.yAxis[0].name = '载荷(KN)'
+      option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
+      option.series = [
+        {
+          name: legendData[0],
+          type: 'line',
+          stack: 'upStroke',
+          color: '#FF5353',
+          symbol: 'none',
+          smooth: true,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255,83,83,0.2)' },
+              { offset: 1, color: 'rgba(255,83,83,0)' }
+            ])
+          },
+          data: data['上冲程']
+        },
+        {
+          name: legendData[1],
+          type: 'line',
+          stack: 'downStroke',
+          color: '#0094FF',
+          symbol: 'none',
+          smooth: true,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(0,148,255,0.2)' },
+              { offset: 1, color: 'rgba(0,148,255,0)' }
+            ])
+          },
+          data: data['下冲程']
+        }
+      ]
+      // 设置数据
+      JSON.stringify(option).replaceAll('px', 'rem')
+      this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
+    },
+    // 油井下拉
+    loadOilWellList (wellheadArea) {
+      getWellheadList({
+        wellheadArea: wellheadArea,
+        wellheadType: wellheadType.oil.value
+      }).then(res => {
+        if (res.success) {
+          this.singleWellList = res.result || []
+        }
+      })
+    },
+    // 修改井场获取油井下拉
+    changeWellSite (value) {
+      if (value) {
+        this.loadOilWellList(value)
+      } else {
+        this.singleWellList = []
+        this.$set(this.queryParam, 'singleWell', undefined)
+      }
+    },
+    // 修改设备类型把底部表单置空
+    changeDeviceType (value) {
+      this.queryParam = {
+        deviceType: value
+      }
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
+/deep/ .ant-form-item {
+  margin-bottom: 0;
+  font-size: 0;
+}
+.header-search {
+  /deep/ .ant-form-item-label {
+    line-height: 0.36rem;
+    text-align: left;
+    padding: 0;
+  }
+  // 输入框错位
+  /deep/ .ant-form-item-control {
+    height: 0.36rem;
+  }
+  /deep/ .ant-form-item-control-wrapper {
+    font-size: 0;
+  }
+  /deep/.van-cell {
+    height: 100%;
+    padding: 0;
+    background-color: transparent;
 
+    .van-field__label {
+      padding: 0.07rem 0;
+      width: 0.56rem;
+      height: 0.22rem;
+      font-family: PingFang SC, PingFang SC, sans-serif;
+      font-weight: 400;
+      font-size: 0.14rem;
+      color: #FFFFFF;
+      line-height: 0.22rem;
+    }
+    .van-field__value {
+      padding: 0.07rem 0.12rem;
+      width: 1.83rem;
+      height: 0.36rem;
+    }
+  }
+}
+// 展示数据的容器空出来底部搜索的高度
+.all-data-container {
+  margin-bottom: 1.12rem;
+}
+
+.bottom-search {
+  height: 1.12rem;
+  width: 100%;
+  padding: 0.16rem 0.12rem;
+  position: fixed;
+  overflow: hidden;
+  z-index: 2;
+  left: 0;
+  bottom: 0.56rem;
+  background-color: #001125;
+
+  // 实现垂直居中 label
+  /deep/.ant-form-item-label {
+    padding: 0;
+  }
+  .vertical-label {
+    display: block;
+    margin: 0.18rem 0;
+    font-family: PingFang SC, PingFang SC, sans-serif;
+    font-weight: 400;
+    font-size: 0.14rem;
+    color: #FFFFFF;
+    line-height: 0.22rem;
+    text-align: left;
+  }
+  .bottom-search-btn {
+    width: 0.8rem !important;
+  }
+}
+
+// 实时示功图头部
+.indicator-diagram-extra {
+
+  .info-row .info-label,
+  .info-row .info-value,
+  .time {
+    font-family: Rubik, Rubik, sans-serif;
+    font-weight: 400;
+    font-size: 0.13rem;
+    color: #D0DEEE;
+    line-height: 0.15rem;
+  }
+
+  .info-row .info-value {
+    color: #2EE4FD;
+  }
+  .divider-vertical {
+    width: 0.01rem;
+    height: 0.12rem;
+    background: rgba(108,128,151,0.3);
+    margin: 0 0.12rem;
+    display: inline-block;
+  }
+}
 </style>
diff --git a/src/views/mobile/manage/Manage.vue b/src/views/mobile/manage/Manage.vue
index ff1f3a0..a0acce9 100644
--- a/src/views/mobile/manage/Manage.vue
+++ b/src/views/mobile/manage/Manage.vue
@@ -1,13 +1,591 @@
 <template>
-  <div>manage</div>
+  <a-spin :spinning="loading">
+    <div class="mb-12">
+      <common-card title="系统设备概况">
+        <div class="overview-grid">
+          <div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
+            <div class="title-background">
+              <div class="title-background-text">{{ item.title }}</div>
+            </div>
+            <div class="overview-card-main custom-content-card">
+              <div class="overview-card-img">
+                <img :src="item.icon" alt=''>
+              </div>
+              <div class="overview-card-content">
+                <div class="first-content" v-if="sysDeviceOverviewData[item.countField] || sysDeviceOverviewData[item.countField] === 0">
+                  <span class="big-number">{{sysDeviceOverviewData[item.countField]}}</span>台
+                </div>
+                <!-- 在线 -->
+                <div v-if="sysDeviceOverviewData[item.onLineField] || sysDeviceOverviewData[item.onLineField] === 0"
+                     class="working">在线：{{ sysDeviceOverviewData[item.onLineField] }}台</div>
+                <!-- 离线 -->
+                <div v-if="sysDeviceOverviewData[item.offLineField] || sysDeviceOverviewData[item.offLineField] === 0"
+                     class="cease">离线：{{ sysDeviceOverviewData[item.offLineField] }}台</div>
+                <!-- 其他数据 -->
+                <template v-if="item.otherData">
+                  <div v-for="it in item.otherData" :key="it.id || it.label">
+                    {{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </common-card>
+    </div>
+    <div class="mb-12">
+      <common-card title="设备列表" :isEmpty="deviceDataSource.length === 0">
+        <div class="device-list">
+          <div class="device-list-item custom-content-card"
+               v-for="(item, index) in deviceDataSource"
+               :key="item.id"
+               :class="{ 'mb-8': index !== deviceDataSource.length - 1}">
+            <div class="status mb-6"
+                 :class="getDeviceStatusClass(item.deviceStatus)"
+            >{{ item.deviceStatus_dictText }}</div>
+            <div class="device-list-item-main">
+              <div class="device-list-item-main-img">
+                <img :src="deviceOverview[0].icon" alt=''>
+              </div>
+              <div class="device-list-item-main-content">
+                <p>{{ item.deviceName }}</p>
+                <p>{{ item.deviceSn }}</p>
+                <p>{{ item.wellheadId_dictText }}</p>
+              </div>
+              <div class="device-list-item-main-btns">
+                <a-button type="primary" class="mr-6"
+                          @click="handleChangeStatus(item, index)"
+                >{{ item.changeDeviceStatus_dictText }}</a-button>
+                <a-button type="danger"
+                          @click="handleDelete(item, index)"
+                >删除</a-button>
+              </div>
+            </div>
+          </div>
+          <!-- 数据大于5条显示折叠 -->
+          <div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList">
+            {{deviceData.showAll ? '收起' : '展开'}}<div class="list-toggle-arrow" :class="`list-toggle-arrow-${deviceData.showAll ? 'up' : 'down'}`"></div>
+          </div>
+        </div>
+      </common-card>
+    </div>
+    <div class="mb-12">
+      <common-card title="添加设备">
+        <a-form :form="deviceForm" class="custom-vertical-form">
+          <div class="mb-12">
+            <a-form-item label="设备名称">
+              <a-input placeholder="请输入设备名称" :max-length="50"
+                       @change="event => event.target.value = event.target.value.trim()"
+                       v-decorator.trim="['deviceName', validatorRules.deviceName]"/>
+            </a-form-item>
+            <a-form-item label="设备类型">
+              <dict-picker :triggerChange="true"
+                           dictCode="device_type"
+                           v-decorator="['deviceType', validatorRules.deviceType]"
+                           placeholder="请选择设备类型"/>
+<!--              <j-dict-select-tag :triggerChange="true"-->
+<!--                                 dictCode="device_type"-->
+<!--                                 v-decorator="['deviceType', validatorRules.deviceType]"-->
+<!--                                 placeholder="请选择设备类型">-->
+<!--              </j-dict-select-tag>-->
+            </a-form-item>
+            <a-form-item label="所属井口">
+              <select-picker v-decorator="['wellheadId', validatorRules.wellheadId]"
+                             allowClear
+                             label-key="wellheadName"
+                             :list="wellheadList"
+                             placeholder="请选择所属井口"/>
+<!--              <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear-->
+<!--                        placeholder="请选择所属井口">-->
+<!--                <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>-->
+<!--              </a-select>-->
+            </a-form-item>
+            <a-form-item label="设备描述">
+              <a-textarea
+                placeholder="请输入设备描述"
+                :rows="4"
+                :max-length="500"
+                @change="event => event.target.value = event.target.value.trim()"
+                v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
+            </a-form-item>
+          </div>
+          <div class="flex-center custom-btns-box">
+            <a-button class="btn-blue btn-blue-155" @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;">
+              <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
+              <span class="btn-text">重置</span>
+            </a-button>
+            <a-button class="btn-cyan btn-cyan-155" @click="handleAddDevice">
+              <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
+              <span class="btn-text">添加</span>
+            </a-button>
+          </div>
+        </a-form>
+      </common-card>
+    </div>
+    <div class="mb-12">
+      <common-card title="添加井口">
+        <a-form :form="wellheadForm" class="custom-vertical-form">
+          <div class="mb-12">
+            <a-form-item label="所属作业区">
+              <a-input placeholder="请输入所属作业区" :max-length="50"
+                       @change="event => event.target.value = event.target.value.trim()"
+                       v-decorator.trim="['operateArea', validatorRules.operateArea]"/>
+            </a-form-item>
+            <a-form-item label="所属井场">
+              <dict-picker :triggerChange="true"
+                           dictCode="wellhead_area"
+                           v-decorator="['wellheadArea', validatorRules.wellheadArea]"
+                           placeholder="请选择所属井场"/>
+<!--              <j-dict-select-tag :triggerChange="true"-->
+<!--                                 dictCode="wellhead_area"-->
+<!--                                 v-decorator="['wellheadArea', validatorRules.wellheadArea]"-->
+<!--                                 placeholder="请选择所属井场">-->
+<!--              </j-dict-select-tag>-->
+            </a-form-item>
+            <a-form-item label="井口类型">
+              <dict-picker :triggerChange="true"
+                           dictCode="wellhead_type"
+                           v-decorator="['wellheadType', validatorRules.wellheadType]"
+                           placeholder="请选择井口类型"/>
+<!--              <j-dict-select-tag :triggerChange="true"-->
+<!--                                 dictCode="wellhead_type"-->
+<!--                                 v-decorator="['wellheadType', validatorRules.wellheadType]"-->
+<!--                                 placeholder="请选择井口类型">-->
+<!--              </j-dict-select-tag>-->
+            </a-form-item>
+            <a-form-item label="井口名称">
+              <a-input placeholder="请输入井口名称" :max-length="50"
+                       @change="event => event.target.value = event.target.value.trim()"
+                       v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
+            </a-form-item>
+          </div>
+          <div class="flex-center custom-btns-box">
+            <a-button class="btn-cyan btn-cyan-327" @click="handleAddWellhead">
+              <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
+              <span class="btn-text">添加</span>
+            </a-button>
+          </div>
+        </a-form>
+      </common-card>
+    </div>
+  </a-spin>
 </template>
 
 <script>
+import CommonCard from '@comp/CommonCard'
+import {
+  addDevice,
+  addWellhead,
+  delDevice,
+  editDevice,
+  getDevicePage,
+  getSysDeviceOverview,
+  getWellheadList
+} from '@api/systemOverview'
+import { deviceStatus } from '@/enums/commonEnums'
+import DictPicker from '@comp/vant/DictPicker'
+import SelectPicker from '@comp/vant/SelectPicker'
 export default {
-  name: 'Manage'
+  name: 'Manage',
+  components: { SelectPicker, DictPicker, CommonCard },
+  data () {
+    return {
+      deviceStatus,
+      loading: false,
+      // 系统设备概况
+      deviceOverview: [
+        {
+          title: '设备总数',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/device.png'),
+          countField: 'deviceCount',
+          onLineField: 'onlineDeviceCount',
+          offLineField: 'offlineDeviceCount'
+        },
+        {
+          title: '井口数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/wellhead.png'),
+          otherData: [
+            { label: '总井数', unit: '口', valueField: 'wellCount' },
+            { label: '水井数', unit: '口', valueField: 'waterWellCount' },
+            { label: '油井数', unit: '口', valueField: 'oilWellCount' }
+          ]
+        },
+        {
+          title: 'RTU控制器数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/controller.png'),
+          countField: 'rtuCount',
+          onLineField: 'onlineRtuCount',
+          offLineField: 'offlineRtuCount'
+        },
+        {
+          title: '天然气数据远传终端数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/terminal.png'),
+          countField: 'ngCount',
+          onLineField: 'onlineNgCount',
+          offLineField: 'offlineNgCount'
+        }
+      ],
+      // 系统设备概况数据
+      sysDeviceOverviewData: {},
+      // 设备列表相关
+      deviceData: {
+        loading: false,
+        dataSource: [],
+        showAll: false // true显示全部，默认显示前五
+      },
+      // 添加设备表单
+      deviceForm: this.$form.createForm(this),
+      // 添加井口表单
+      wellheadForm: this.$form.createForm(this),
+      // 表单校验
+      validatorRules: {
+        deviceName: { rules: [{ required: true, message: '请输入设备名称' }], validateTrigger: 'blur' },
+        deviceType: { rules: [{ required: true, message: '请选择设备类型' }], validateTrigger: 'change' },
+        wellheadId: { rules: [{ required: true, message: '请选择所属井口' }], validateTrigger: 'change' },
+        deviceDesc: { rules: [{ required: true, message: '请输入设备描述' }], validateTrigger: 'blur' },
+        operateArea: { rules: [{ required: true, message: '请输入所属作业区' }], validateTrigger: 'blur' },
+        wellheadArea: { rules: [{ required: true, message: '请选择所属井场' }], validateTrigger: 'change' },
+        wellheadType: { rules: [{ required: true, message: '请选择井口类型' }], validateTrigger: 'change' },
+        wellheadName: { rules: [{ required: true, message: '请输入井口名称' }], validateTrigger: 'blur' }
+      },
+      // 井口列表
+      wellheadList: []
+    }
+  },
+  computed: {
+    // 展示的设备列表数据，默认显示前五
+    deviceDataSource () {
+      if (this.deviceData.showAll) {
+        return this.deviceData.dataSource
+      } else {
+        return this.deviceData.dataSource.slice(0, 5)
+      }
+    }
+  },
+  created () {
+    this.loadPage()
+  },
+  methods: {
+    // 加载全部数据
+    loadPage () {
+      // 下拉菜单
+      this.loadWellheadList()
+      // 页面数据
+      this.loadSysDeviceOverview()
+      this.loadDeviceList()
+    },
+    // 加载系统设备概况数据
+    loadSysDeviceOverview () {
+      getSysDeviceOverview().then(res => {
+        if (res.success) {
+          this.sysDeviceOverviewData = res.result || {}
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 加载设备列表
+    loadDeviceList () {
+      this.deviceData.loading = true
+      getDevicePage({
+        pageNo: 1,
+        pageSize: 10,
+        column: 'createTime',
+        order: 'desc'
+      }).then((res) => {
+        if (res.success) {
+          const data = res.result.records || res.result || []
+          // 翻译设备状态，加修改设备状态的字段
+          this.deviceData.dataSource = data.map(item => {
+            if (item.deviceStatus === deviceStatus.onLine.value) {
+              item.deviceStatus_dictText = deviceStatus.onLine.label
+              item.changeDeviceStatus = deviceStatus.offLine.value
+              item.changeDeviceStatus_dictText = deviceStatus.offLine.label
+            } else if (item.deviceStatus === deviceStatus.offLine.value) {
+              item.deviceStatus_dictText = deviceStatus.offLine.label
+              item.changeDeviceStatus = deviceStatus.onLine.value
+              item.changeDeviceStatus_dictText = deviceStatus.onLine.label
+            }
+            return item
+          })
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.deviceData.loading = false
+      })
+    },
+    // 获取设备状态样式
+    getDeviceStatusClass (status) {
+      switch (status + '') {
+        case deviceStatus.onLine.value:
+          return 'working'
+        case deviceStatus.offLine.value:
+          return 'cease'
+        default:
+          return ''
+      }
+    },
+    // 设备状态改变
+    handleChangeStatus (record) {
+      const { id } = record
+      this.$vantConfirm({
+        title: '确认' + record.changeDeviceStatus_dictText + '设备',
+        message: `确定要修改设备状态为${record.changeDeviceStatus_dictText}吗?`
+      }).then(() => {
+        const params = { id, deviceStatus: record.changeDeviceStatus }
+        editDevice(params).then((res) => {
+          if (res.success) {
+            this.$message.success(res.message)
+          } else {
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loadSysDeviceOverview()
+          this.loadDeviceList()
+        })
+      }).catch(() => {})
+    },
+    // 删除设备
+    handleDelete (record) {
+      const { id } = record
+      this.$vantConfirm({
+        title: '确认删除',
+        message: '确定要删除此条数据吗?'
+      }).then(() => {
+        delDevice({ id }).then((res) => {
+          if (res.success) {
+            this.$message.success(res.message)
+          } else {
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loadSysDeviceOverview()
+          this.loadDeviceList()
+        })
+      }).catch(() => {})
+    },
+    // 切换展开折叠列表
+    toggleDeviceList () {
+      this.deviceData.showAll = !this.deviceData.showAll
+    },
+    // 添加设备
+    handleAddDevice () {
+      this.deviceForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          addDevice(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            // 重置表单
+            this.deviceForm.resetFields()
+            // 更新系统设备概况和设备列表
+            this.loadSysDeviceOverview()
+            this.loadDeviceList()
+          })
+        }
+      })
+    },
+    // 添加井口
+    handleAddWellhead () {
+      this.wellheadForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          addWellhead(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            // 重置表单
+            this.wellheadForm.resetFields()
+            // 更新系统设备概况
+            this.loadSysDeviceOverview()
+            // 更新井口下拉
+            this.loadWellheadList()
+          })
+        }
+      })
+    },
+    // 获取井口下拉
+    loadWellheadList () {
+      getWellheadList().then(res => {
+        if (res.success) {
+          this.wellheadList = res.result || []
+        }
+      })
+    },
+    // 重置表单
+    handleResetForm (form) {
+      form && form.resetFields && form.resetFields()
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+@import "~@/assets/less/modifyLessVars.less";
+// 系统设备概况
+.overview-grid {
+  display: grid;
+  grid-gap: 0.08rem;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'a b'
+                       'c d';
+}
+.overview-card {
+  .overview-card-main {
+    display: flex;
+    justify-content: space-between;
 
+    .overview-card-img {
+      flex: 0 0 0.56rem;
+      margin-right: 0.1rem;
+
+      img {
+        width: 100%;
+      }
+    }
+    .overview-card-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      flex: auto;
+      font-family: Rubik, Rubik, sans-serif;
+      font-weight: 400;
+      font-size: 0.12rem;
+      color: @text-color;
+      line-height: 0.14rem;
+
+      .first-content {
+        padding-left: 0.16rem;
+      }
+    }
+  }
+}
+
+// 设备列表
+.device-list {
+  &-item {
+    .status {
+      font-size: 0.12rem;
+      line-height: 0.14rem;
+    }
+    &-main {
+      position: relative;
+      display: flex;
+
+      // 图片
+      &-img {
+        flex: 0 0 0.56rem;
+        width: 0.56rem;
+        height: 0.56rem;
+        margin-right: 0.12rem;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      // 内容
+      &-content {
+        flex: auto;
+        margin: 0;
+        font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
+        font-size: 0.12rem;
+        line-height: 0.14rem;
+
+        & > p {
+          margin: 0;
+          padding: 0;
+          margin-bottom: 0.06rem;
+          // 内容宽度 = 100% - 按钮部分宽度 - 距离按钮间距
+          width: calc(100% - 1.46rem - 0.08rem);
+        }
+
+        & > p:first-child {
+          width: 100%;
+          min-height: 0.16rem;
+          font-size: 0.14rem;
+          line-height: 0.16rem;
+          margin-bottom: 0.07rem;
+        }
+      }
+
+      // 按钮
+      &-btns {
+        width: 1.46rem;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        font-family: PingFang SC, PingFang SC, sans-serif;
+        font-weight: 500;
+        font-size: 0.14rem;
+        color: #FFFFFF;
+        line-height: 0.16rem;
+
+        /deep/.ant-btn {
+          width: 0.7rem;
+          height: 0.32rem;
+          border: none;
+        }
+        /deep/.ant-btn-primary {
+          background: url("~@assets/images/componentImg/btn-blue-70.png");
+          background-size: 100% 100%;
+        }
+        /deep/.ant-btn-danger {
+          background: url("~@assets/images/componentImg/btn-red-70.png");
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
+.list-toggle {
+  width: 0.48rem;
+  height: 0.14rem;
+  margin: 0.12rem auto 0;
+  font-family: Rubik, Rubik, sans-serif;
+  font-size: 0.12rem;
+  color: #A5B8CE;
+  line-height: 0.14rem;
+
+  .list-toggle-arrow {
+    display: inline-block;
+    width: 0.18rem;
+    height: 0.07rem;
+    background: url("~@assets/images/icon/list-arrow.png");
+    background-size: 100% 100%;
+    margin-left: 0.06rem;
+
+    &-up {
+      transform: rotate(180deg);
+    }
+    &-down {
+      transform: rotate(0deg);
+    }
+  }
+}
+.custom-btns-box {
+  /deep/.ant-btn {
+    &.btn-blue.btn-blue-155 {
+      width: 1.55rem;
+      background-image: url("~@assets/images/componentImg/btn-blue-155.png");
+    }
+    &.btn-cyan.btn-cyan-155 {
+      width: 1.55rem;
+      background-image: url("~@assets/images/componentImg/btn-cyan-155.png");
+    }
+    &.btn-cyan.btn-cyan-327 {
+      width: 3.27rem;
+      background-image: url("~@assets/images/componentImg/btn-cyan-327.png");
+    }
+  }
+}
 </style>
diff --git a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
index bc4bc9e..8ca5768 100644
--- a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+++ b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
@@ -4,7 +4,7 @@
       <a-col flex="545px">
         <common-card title="系统设备概况">
           <div class="overview-grid">
-            <div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
+            <div class="overview-card custom-content-card" v-for="item in deviceOverview" :key="item.id || item.title">
               <div class="title-background">
                 <div class="title-background-text">{{ item.title }}</div>
               </div>
@@ -405,7 +405,6 @@ export default {
               if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
                 this.deviceData.ipagination.current -= 1
               }
-              this.loadData()
             } else {
               this.$message.warning(res.message)
             }
@@ -430,7 +429,6 @@ export default {
               if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
                 this.deviceData.ipagination.current -= 1
               }
-              this.loadData()
             } else {
               this.$message.warning(res.message)
             }
@@ -572,49 +570,6 @@ export default {
                        'c d';
 }
 .overview-card {
-  padding: 12px;
-  position: relative;
-  border: 1px solid;
-  background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
-  border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
-  border-left: none;
-  border-right: none;
-
-  // 伪元素装饰
-  &::before,
-  &::after {
-    pointer-events: none;
-    user-select: none;
-    content: '';
-    display: block;
-    position: absolute;
-  }
-
-  // 四个角
-  &::before {
-    top: -2px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 4px);
-    background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
-    background-repeat: no-repeat;
-    background-position: left top, left bottom, right top, right bottom;
-  }
-  // 两侧的边框
-  &::after {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px solid;
-    border-top: none;
-    border-bottom: none;
-    border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
-  }
-
   .overview-card-main {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
index a7266a0..124ee97 100644
--- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
@@ -58,7 +58,7 @@
         </a-col>
         <a-col :xl="12" :xxl="6" class="mb-20">
           <common-card title="油井实时参数">
-            <common-card-info :data="oilWellRealTimeData['油井实时参数']"
+            <common-card-info :data="allData"
                               :left-list="labelData.oilWellsRealTimeParamsLeft || []"
                               :right-list="labelData.oilWellsRealTimeParamsRight || []"/>
           </common-card>
@@ -554,7 +554,7 @@ export default {
     searchQuery () {
       const params = Object.assign({}, this.queryParam)
       // 没有条件恢复默认数据
-      if (Object.values(params).length === 0) {
+      if (Object.values(params).filter(item => item || item !== 0).length === 0) {
         this.allData = staticData
         this.dataSource = staticTableData
         setTimeout(() => {
@@ -607,6 +607,8 @@ export default {
         if (res.success) {
           const data = res.result || {}
           this.oilWellRealTimeData = data
+          // 将油井实时参数放进全部数据中
+          this.allData = Object.assign({}, staticData, data['油井实时参数'])
           this.initIndicatorDiagram(data['实时示功图'])
           this.initLoadDistribution(data['载荷分布图'])
         } else {
@@ -617,19 +619,19 @@ export default {
     // 初始化 实时示功图
     initIndicatorDiagram (data) {
       // 没有渲染出组件就不执行
-      if (!this.$refs.productionMonitoring) {
+      if (!this.$refs.indicatorDiagram) {
         return
       }
       // 置空数据
       if (!data || Object.keys(data).length === 0) {
-        this.$refs.productionMonitoring.updateMyChartOption()
+        this.$refs.indicatorDiagram.updateMyChartOption()
         return
       }
       // 获取基础配置
       const legendData = ['上冲程', '下冲程']
       const option = generateBaseOption()
       option.legend.data = legendData
-      option.xAxis.data = data['X轴']
+      option.xAxis[0].data = data['X轴']
       option.yAxis[0].name = '载荷(KN)'
       option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
       option.series = [
@@ -682,7 +684,7 @@ export default {
       const legendData = ['产油量(t/d)', '产液量(m³/d)']
       const option = generateBaseOption()
       option.legend.data = legendData
-      option.xAxis.data = data['X轴']
+      option.xAxis[0].data = data['X轴']
       option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
       option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
       option.series = [
@@ -725,19 +727,19 @@ export default {
     // 初始化 载荷分布图
     initLoadDistribution (data) {
       // 没有渲染出组件就不执行
-      if (!this.$refs.productionMonitoring) {
+      if (!this.$refs.loadDistribution) {
         return
       }
       // 置空数据
       if (!data || Object.keys(data).length === 0) {
-        this.$refs.productionMonitoring.updateMyChartOption()
+        this.$refs.loadDistribution.updateMyChartOption()
         return
       }
       // 获取基础配置
       const legendData = ['最大载荷(KN)', '最小载荷(KN)']
       const option = generateBaseOption()
       option.legend.data = legendData
-      option.xAxis.data = data['X轴']
+      option.xAxis[0].data = data['X轴']
       option.yAxis[0].name = '载荷(KN)'
       option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
       option.series = [
@@ -984,7 +986,7 @@ export default {
   right: 10px;
   top: 40px;
   bottom: 0;
-  width: 6px;
+  width: 5px;
   overflow: hidden;
   .border-table {
     position: absolute;
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 2207f73..957b728 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -549,9 +549,9 @@ function isMobile () {
         top: 0;
         display: block;
         width: 100%;
-        height: 4.8rem;
+        height: 2.4rem;
         background: url("~@/assets/mobile-login-bg.png") no-repeat;
-        background-position-y: -0.88rem;
+        background-position-y: -0.44rem;
         background-size: cover;
       }
 
@@ -559,8 +559,8 @@ function isMobile () {
         user-select: none;
         position: absolute;
         left: 50%;
-        top: 4rem;
-        width: 3.84rem;
+        top: 2rem;
+        width: 1.92rem;
         transform: translateX(-50%);
 
         img {
@@ -570,32 +570,32 @@ function isMobile () {
 
       // 移动端登录表单样式
       .login-form {
-        padding: 5.62rem 0.48rem 0;
+        padding: 2.81rem 0.24rem 0;
 
         /deep/.ant-input-affix-wrapper .ant-input-prefix {
           left: 0;
           .prefix-icon {
-            width: .48rem;
+            width: 0.24rem;
           }
         }
         /deep/.ant-input {
           border: none;
           border-radius: 0;
           background: none !important;
-          border-bottom: 0.02rem solid rgba(0,148,255,0.4);
+          border-bottom: 0.01rem solid rgba(0,148,255,0.4);
           box-shadow: none;
-          height: .96rem;
-          padding-left: .72rem;
+          height: 0.48rem;
+          padding-left: 0.36rem;
           font-family: PingFang SC, PingFang SC, sans-serif;
           font-weight: 400;
-          font-size: 0.32rem;
-          line-height: 0.48rem;
+          font-size: 0.16rem;
+          line-height: 0.24rem;
         }
         .login-btn {
           .ant-btn {
             background: url("~@assets/images/login-btn.png") no-repeat;
             background-size: 100% 100%;
-            height: 0.96rem;
+            height: 0.48rem;
           }
         }
       }