From 95796fbb84be82e8aeb13bab3d7f8c72e44a0889 Mon Sep 17 00:00:00 2001 From: zzyuan <781948537@qq.com> Date: Mon, 15 Sep 2025 17:50:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=B8=82=E5=A4=A7=E5=B1=8F=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/screen/cityScreen.js | 85 ++++++ src/assets/cityScreen/tableHeader2.png | Bin 0 -> 2395 bytes src/assets/cityScreen/tableTr2.png | Bin 0 -> 4114 bytes src/store/modules/user.js | 1 + .../components/engineerUsing/index.vue | 261 ++++++++++-------- .../components/equiQuantity/index.vue | 197 ++++++++----- .../components/equiStatus/index.vue | 43 +-- .../components/equiTurnover/index.vue | 142 +++------- .../cityScreen/components/equiUse/index.vue | 49 ++-- .../components/maintenance/index.vue | 250 ++++++++--------- .../cityScreen/components/retire/index.vue | 248 +++++++---------- .../cityScreen/components/topIcons/index.vue | 33 ++- .../components/topIconsTwo/index.vue | 22 +- src/views/screen/cityScreen/index.vue | 18 +- src/views/screen/cityScreen/temp.vue | 73 ----- 15 files changed, 732 insertions(+), 690 deletions(-) create mode 100644 src/api/screen/cityScreen.js create mode 100644 src/assets/cityScreen/tableHeader2.png create mode 100644 src/assets/cityScreen/tableTr2.png delete mode 100644 src/views/screen/cityScreen/temp.vue diff --git a/src/api/screen/cityScreen.js b/src/api/screen/cityScreen.js new file mode 100644 index 00000000..08d68497 --- /dev/null +++ b/src/api/screen/cityScreen.js @@ -0,0 +1,85 @@ +import request from '@/utils/request' + + + +// 装备总数、价值、配置率、今日入库数、出库数 +export const getBasicHeadApi = (data) => { + return request({ + url: '/material-mall/city_screen/getBasicHead', + method: 'GET', + params: data, + }) +} + +// 装备数量价值 +export const equipmentQuantityValueApi = (data) => { + return request({ + url: '/material-mall/city_screen/equipmentQuantityValue', + method: 'GET', + params: data, + }) +} + +// 装备状态 +export const equipmentStatusApi = (data) => { + return request({ + url: '/material-mall/city_screen/equipmentStatus', + method: 'GET', + params: data, + }) +} + +// 维保预警 +export const maintenanceAlarmApi = (data) => { + return request({ + url: '/material-mall/city_screen/maintenanceAlarm', + method: 'GET', + params: data, + }) +} + +// 退役报警 +export const retirementAlarmApi = (data) => { + return request({ + url: '/material-mall/city_screen/retirementAlarm', + method: 'GET', + params: data, + }) +} + +// 装备在用率 +export const equipmentInServiceRateApi = (data) => { + return request({ + url: '/material-mall/city_screen/equipmentInServiceRate', + method: 'GET', + params: data, + }) +} + +// 装备周转率 +export const equipmentTurnoverRateApi = (data) => { + return request({ + url: '/material-mall/city_screen/equipmentTurnoverRate', + method: 'GET', + params: data, + }) +} +// 工程在用装备情况 +export const equipmentInUseInTheProjectApi = (data) => { + return request({ + url: '/material-mall/city_screen/equipmentInUseInTheProject', + method: 'GET', + params: data, + }) +} + + +// 电压等级下拉选 +export function getVoltageLevelApi(data) { + return request({ + url: '/material-mall/decChange/getVoltageLevel', + method: 'post', + data: data, + }) +} + diff --git a/src/assets/cityScreen/tableHeader2.png b/src/assets/cityScreen/tableHeader2.png new file mode 100644 index 0000000000000000000000000000000000000000..fb51d9a5a97ef6010f11ce7911a3a7777ba8de1c GIT binary patch literal 2395 zcmaJ@e^3)=8je3sIIB>qgH(~ma57LKn+*_>m_RWhg=zpHC?F^ySs*~NAz4TWpi;eB zR8+35ASeh9r+^kgDIyxAj5vx28Igl1AYu;rA*l$Y74U8Y`O!a)+u7NC`+e{8ywCf* z@6IGAIPmMWt2eI3U@&U~{Fxyb%0U_w%!L?A{4un4PXW)1QiLnwK>P%~Aqv=-kb z`3zY8(pq*bi3LzGfWEVT>a=kS9UuMDG`HxBY4RZvI_?s5u0M1(*UMa2s{Mm^f3%C93mZGE%Y&ZVMt+lb*tXLj2gb(wuTh+_%LU(LGuPoPfI@j^!Kc=R zcAz)2!fj9TE*_I6&Wj<({AjVY?5m2ABYoZzE#rZ*{ItfQT`j*7pa18ju6U|5D{HpD zrP#ZdGd{OPcfHKH=}V|X8`Su#b@5}s`4@`^Dfaq%>m)v2Md;dj39Lg3((4>uz3u9j z*U|1Ro~E43%!t1+>aoVp`FQyJk*58LYrPIqmBET=g?Is;5=E*{tEHS>8)oT8*F{O? zWA_ey(yi4jJ2gbs-)(QY1NYB+ogB;>+n8p3|J6S!k5)WoEF2Ay@t5{(@9ljXIzJoK z{u1xUg@JeUtwuHW)1Y%_iQ0u=$xV3x}3~P@vFA95=ku#wnVYCiIeb#pt&E@ z-wkidIWXRw?Ka(v%?798>1`S6#JPAUQTe#pdDZtBMd62N=`mSs?&J#&biJ{>^|X;(k#y@|RgdS@ z%}R1bNxem5Vdebr<@^v+XSCnnmgUT3ziu93PK?rzrG_a_+-Qq5iTj5i4OK2WNkE>5KVk{xWj&6BNbct%QcJv0#ozRJ0iS7+gyf2GA}Zr{FY zmY*&qOY9VOM_|1??o8C5yoIN#qRTV|{rM5Df$x?X)c+n0keOfIJXm4PuWh|hGhSs= zr*?CUw>GM9(skw7N?ie~LLQ~n;;3Q%WPSE+?cL$trSZ7}xb6xY2wP?9e&ZPP2g=zS zj6`46?}rUEa}&H%8kXu=3BBPA=ro?)7|Ev}Ma>xb1dFPC&rIUq;HlOZmYGd1dSDU<`jV8~CJBLpk$hV*}T0{jA*Kktb7_P@Em4J7~o literal 0 HcmV?d00001 diff --git a/src/assets/cityScreen/tableTr2.png b/src/assets/cityScreen/tableTr2.png new file mode 100644 index 0000000000000000000000000000000000000000..fd3ae0d4d6bd274948b2eab15f1c4e5ff01de326 GIT binary patch literal 4114 zcmaJ^dmz(`-}b9hIZhO%PAF?Qoy2Bto4KWCnsP~^vXaYUm|dB~w zI&KffOGRZ_2XJk!x)L~E9kM4>1mqPcWDPG=hp#FgcI_!I1(&2wsGMU>5ZW z!A?bGxdGAp5aW>BK6DV71PcIbU@;^L(5<3k=NLl?2nr`KAc2GsVx&EE`hEixLJYQt z`dYb}xlwi#LWz4~X@mo@?%qMM;XyXRP)7%dT?`rkAQ2b=kQh=#Bpn@N4^`r#fot$F z912mEFv9JjUxqs5<_XzNrV$`kFl*Bwge3}sw1FY4EzK;fO(5oG2phN=3XZTaHAA4y ztkG6T$k!hfV50?}Kzm`ZU%7xgduS+wK|#aeOePb?w1AOmA#j9^4S-<|H#av0Dop9D zNJc=6X(Zj?8v=$v526t%3?exa0wM+klA{>*P+-z8E08Gv!bZ}+$^-}oj|rf_5im1w zrEi69ZvTHNiS%zZo#93J@4WvfFx{I)A;7%|baE6e2r%x10Z2tb@1_v~7-X6^nH=#= zMbA(&gG>)4Qy}KRNRVHBiIKr%CVjiI!Oabgi=;CGB7+Dxj6D>9fDwtofSgXw2qf0o z27$0dAh2dm&KA3zkQOKlq>Z%`5{3EJiy;R^kqD8DZ@t0)?Ztk#7t8{Q0x)9;G-5O% z7)v9QAj+N5#P83t`@48wdxO6}3+B7Ma9|iX=`+cuwL#$=it$Rf5Exjos)N_E&>DbsN}HSl3GEjzz{ zr~l;@DNyEvefz6+Ua-E=Y3QleeI3K?>MXjptG7Rq$y$4Ew4i3MBx?}zLrz9h&!xjo z@(ns&yHC^z89y@tvL|1PQr)J z4tHu@p3{;SJ6zG}8CVw{Vez_w1h7EoZ4o_mT#P9i*_gmSXGfBf%_tDb0=l(ZS=+%KhEjCXW=) zS(qJ9Yhq(z!xly}e4Dp(KLQq4^K)Q_Ky_<5vU=cQwU zQK4@c_8Q*$ubY;ocDCKkf_+WqZcSZLY^eQQIH6ia6kRtRmRC3MZ?j^e zMfnap?O+;-lQX&*3hENJN@4!w;B#txjiKFV&D?W?k$nR3j6sHC03SH7|K8)lg#Y@Z z0~(uMpy`hH9RfbRd|DUA7xzq0w-vTdHaJegd(Kb4^k16KupP`)loVFY{gx^1s=@r; z&1qjh$f!?@-SP=}Nzv^Pf3rdA_iM^#3>7$W6*Y-T=9+g?A>R3d9P$(>N>C$vtuC45fZR%l=Gl!kjRPdh2i z)f}AvJ$I3!omV!5kaxRH!yWp>@)p%M@U0{F;an*y}7nLd1_Ak z8r$6Lsc8j1%x=(blDE*>l<~29GrRMJtkz#*rN^dq=2!G0?@~WBKqZoTN_yNY-8o&! z_5N^_d^A2#uAuq@P=yP@la=_m%4pt5!F+J6y!GUobWS_nQ>i;)dzj5qFO&E8X*suSb#= zGLf6vT@ts?EkO-El*LdzQvD~zrNfDIS+(t&DM3Sne}09X@9L>>+|(muU)O7Q420JS zsgk2=5-&+=2fL zm7Y>9`!z|g*?>#;k)!8PVMA^Gvv2iHk~PmzE2vviLs$xtW^?p0b`GDq<esetg>n*;HJ?(XFs{Nl&Y&>5gB_McZ}(5AK?iWqe8g z;f0Lcpb#bAdd@HLidEo>%@>~ywX~j?`Y;~LrVhlc-)gGnaV?3*;Jv8h#?LP+r5P1F zZ;<{DETr#tJoRC9{Hs+%M|r3c!<+pXE!qQBuZFJ7>K;7fq8(OAt%z^#amlo0?~*j? z8$a$m`_b%Ts4cY5CUxs$c9F#N@m1HVYE)s%x)At&^|fLjS(nQh+kv`E$*Ad-96G}x zOU!k=_s=+K?*1Aymz>e|m~!L^ZDR=izvt^|v1gJE^O7m8(JPdI~~x#0{$h{Z6Vy zh2;<&uT;oZKf% zh4$;7;MeyZwej?V8dR8J_-DV|w`e1@xSw##6OJ`J zc=3^lP}X`pLpmnUd4siQ6Kpmt+(03J)F8gy z+fr?~?&tdIuAI-IXp(r=2Db9QjLAJlnpo;3HW^#qu;mPyl3;=0J;g z5&c(T|E-p#WmMQn)cx|n^VJdeMCJS1P4dRqe3qvglmGA{>TM62x=J!GyL~X>k8)JD z;6gocaO!Q%;#d%Mxy^Z1Y0fFYRWa$zPv%73_8bA?rd_J{6w<4|CVRHEyi^iigS>U( z!IAc3Je&wZ3c9Nr*E2_1C*%P(7n<+rSA zy;y8QkI};T!;-7{%X8g%J&zhUXrP9lZqQi7Ylp;iR)?*hyxzFFI_&KVF5jaUix7kr z^Usc?MZdUQFJ{enPF*w#XQre4o`p2y^ZkMi7l51_=oVp4IOqL?)5`$Z>{$EmI&)rg3p%UYMn?q``3JA@HK$A4O- z9bzm51w{C^*yICD;0!~>B#4mGe6dO$0Gx5P1Svs}Ylv&9$#FFBMOwC?(e3m~<(t(m zU7;>*_rKy4%g4rf4~eBNi7GxVJaC6(@Rq-RZP)v1G8F=W6MPdIUzK*=A1xPPCIJeWvLJ zpoxDS-q*VlSQDImiU&sMHD~fB$08?G$)ya{xE4TMiUEL(hgXOEv`SeHr1#O+9g{;I zgX2(>!AxV<17iUd27s2EsK=n`|6~cSP@h}hBmNBmv;cGl!&9R5Y(qLlsg6b#xRyAc ze&#oDycFdq27o;fA$l8Nt~#oy))>gpAIf!M)9#!fzsJGP! z7&slO90jz1!xw^I-}3a*iWI;>&|2)5oWTI%(|~2?OQAxFfCBmIn8`jRpk_!+GRO^3 zfj(lCNdr{?Y!n*}b4-c4I>4s+D*^REf73znj5{NSRF#g40}epV|KlLr#U`3KXLGl8 zbSK>_?jI~8cTtVvH7>|-i$~7PU&vg7%|`ur@10iA(W~_vEKhWGCslAUg(c0bj2}8o z-^Upa#E;AxN>`6=e+s|LDzUG=ar*^Ngb%+kHutpM>e-~s?uicOXklsig;yO9Pg-fn zHq~%CetXz4{%3d4dBj3UbXSKYlb$w(#o>)##ihJdz#ppQswZ8>rtai`|I%^J?wE>Q H$CLgCJmazg literal 0 HcmV?d00001 diff --git a/src/store/modules/user.js b/src/store/modules/user.js index b660b65c..99c847e4 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -114,6 +114,7 @@ const user = { return getInfo() .then(res => { const user = res.user + sessionStorage.setItem('companyId', res.user.companyId) const avatar = user.avatar ? user.avatar : require('@/assets/images/profile.jpg') commit('SET_ROLES', res.roles && res.roles.length > 0 ? res.roles : ['ROLE_DEFAULT']) commit('SET_PERMISSIONS', res.permissions) diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue index 84b8ac22..9aa39b57 100644 --- a/src/views/screen/cityScreen/components/engineerUsing/index.vue +++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue @@ -2,27 +2,42 @@
- 装备状态 + 工程在用装备情况
+
+ + +
线路
-
变电
-
电缆
+
变电
+
电缆
项目数: - 10 + {{total}} 个
在用装备数: - 10 + {{useNum}} 台
@@ -38,26 +53,26 @@
-
+
{{ index+1 }}
- {{ item.major }} + {{ item.projectName }}
- {{ item.devicesNum }} + {{ item.useNum }}
- {{ item.amount }} + {{ (item.investAmount/10000).toFixed(2) }}
- {{ item.person }} + {{ item.scenePersonNum }}
{{ item.riskLevel }}
- {{ item.geography }} + {{ item.geoFeature }}
@@ -67,110 +82,67 @@ @@ -194,6 +166,30 @@ export default { top: 23%; left: 8%; } +.select-view{ + width: 15%; + height: 54%; + position: absolute; + top: 21%; + right: 2%; +} +.select-box { + width: 70%; /*设置宽度确保内容 和 下拉icon的距离*/ + height: 75%; + background: #113F67; + color: #ccc; + border: none; + border-radius: 10%; + border-color: #113F67; + font-size: 20px; + /*清除select聚焦时候的边框颜色*/ + outline: none; + option { + font-size: 20px; + border: none; + } +} + .content-view{ width: 100%; height: 85%; @@ -267,8 +263,8 @@ export default { color: #ccc; } .icon{ - width: 60px; - height: 60px; + width: 70px; + height: 70px; } .tableHeader{ @@ -281,12 +277,12 @@ export default { } .tableBox{ width: 100%; - height: 78%; + height: 76%; overflow-y: auto; } .tableTr{ width: 100%; - height: 12%; + height: 18%; background-image: url("../../../../../assets/cityScreen/tableTr.png"); background-size: 100% 100%; margin-bottom: 2px; @@ -313,7 +309,22 @@ export default { justify-content: center; font-size: 24px; } -@media screen and (min-width: 1920px) { +::-webkit-scrollbar{ + width: 4px; + height: 4px; +} +//定义背景颜色和圆角 +::-webkit-scrollbar-thumb{ + border-radius: 1em; + background-color: rgba(50,50,50,.3); +} +//定义滚动条轨道 内阴影+圆角 +::-webkit-scrollbar-track{ + border-radius: 1em; + background-color: rgba(50,50,50,.1); +} + +@media screen and (min-width: 1080px) { .title{ font-size: 10px; } @@ -326,20 +337,26 @@ export default { margin: 0 2px; } .unit{ - font-size: 10px; + font-size: 8px; } .icon{ - width: 30px; - height: 30px; + width: 35px; + height: 35px; } .text{ font-size: 10px; } .tableTd{ - font-size: 10px; + font-size: 8px; } .fs-24{ - font-size: 10px; + font-size: 8px; + } + .select-box { + font-size: 10px; + option { + font-size: 10px; + } } } @media screen and (min-width: 3000px) { @@ -347,22 +364,22 @@ export default { font-size: 24px; } .header{ - font-size: 24px; + font-size: 26px; } .num{ color: #83D3F8; - font-size: 24px; + font-size: 26px; margin: 0 10px; } .unit{ - font-size: 20px; + font-size: 16px; } .icon{ - width: 60px; - height: 60px; + width: 70px; + height: 70px; } .text{ - font-size: 20px; + font-size: 26px; } .tableTd{ font-size: 24px; @@ -370,6 +387,12 @@ export default { .fs-24{ font-size: 24px; } + .select-box { + font-size: 20px; + option { + font-size: 20px; + } + } } diff --git a/src/views/screen/cityScreen/components/equiQuantity/index.vue b/src/views/screen/cityScreen/components/equiQuantity/index.vue index 88c2dc6a..f6acbaa3 100644 --- a/src/views/screen/cityScreen/components/equiQuantity/index.vue +++ b/src/views/screen/cityScreen/components/equiQuantity/index.vue @@ -17,30 +17,32 @@
- 50 + {{lineData.deviceQuantity}} 台
- 0.027 - 亿元 + {{(lineData.totalValue/100000000).toFixed(3)}} + {{(lineData.totalValue/10000).toFixed(2)}} + 亿元 + 万元
5年 - 30 - 73% + {{lineData.fiveYearCount}} + {{lineData.fiveYearRatio}}%
5-10年 - 15 - 23% + {{lineData.fiveToTenYearCount}} + {{lineData.fiveToTenYearRatio}}%
10年以上 - 15 - 0% + {{lineData.aboveTenYearCount}} + {{lineData.aboveTenYearRatio}}%
@@ -55,30 +57,32 @@
- 50 + {{bdData.deviceQuantity}} 台
- 0.027 - 亿元 + {{(bdData.totalValue/100000000).toFixed(3)}} + {{(bdData.totalValue/10000).toFixed(2)}} + 亿元 + 万元
5年 - 30 - 73% + {{bdData.fiveYearCount}} + {{bdData.fiveYearRatio}}%
5-10年 - 15 - 23% + {{bdData.fiveToTenYearCount}} + {{bdData.fiveToTenYearRatio}}%
10年以上 - 15 - 0% + {{bdData.aboveTenYearCount}} + {{bdData.aboveTenYearRatio}}%
@@ -93,30 +97,32 @@
- 50 + {{dlData.deviceQuantity}} 台
- 0.027 - 亿元 + {{(dlData.totalValue/100000000).toFixed(3)}} + {{(dlData.totalValue/10000).toFixed(2)}} + 亿元 + 万元
5年 - 30 - 73% + {{dlData.fiveYearCount}} + {{dlData.fiveYearRatio}}%
5-10年 - 15 - 23% + {{dlData.fiveToTenYearCount}} + {{dlData.fiveToTenYearRatio}}%
10年以上 - 15 - 0% + {{dlData.aboveTenYearCount}} + {{dlData.aboveTenYearRatio}}%
@@ -129,46 +135,107 @@ @@ -178,19 +97,21 @@ export default { } .tableBox{ width: 100%; - height: 88%; + height: 84%; overflow-y: auto; } .tableTr{ width: 100%; - height: 12%; + height: 16%; background-image: url("../../../../../assets/cityScreen/tableTr.png"); background-size: 100% 100%; margin-bottom: 2px; display: flex; + cursor: pointer; } .tableTd{ - width: 20%; + width: 18%; + margin: 0 1%; height: 100%; display: flex; align-items: center; @@ -203,14 +124,29 @@ export default { } .header{ color: #72B1F1; - width: 20%; + width: 18%; height: 100%; + margin: 0 auto; display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: 26px; } -@media screen and (min-width: 1920px) { +::-webkit-scrollbar{ + width: 4px; + height: 4px; +} +//定义背景颜色和圆角 +::-webkit-scrollbar-thumb{ + border-radius: 1em; + background-color: rgba(50,50,50,.3); +} +//定义滚动条轨道 内阴影+圆角 +::-webkit-scrollbar-track{ + border-radius: 1em; + background-color: rgba(50,50,50,.1); +} +@media screen and (min-width: 1080px) { .title{ font-size: 10px; } @@ -218,7 +154,7 @@ export default { font-size: 10px; } .tableTd{ - font-size: 10px; + font-size: 8px; } } @media screen and (min-width: 3000px) { @@ -226,7 +162,7 @@ export default { font-size: 24px; } .header{ - font-size: 24px; + font-size: 26px; } .tableTd{ font-size: 24px; diff --git a/src/views/screen/cityScreen/components/equiUse/index.vue b/src/views/screen/cityScreen/components/equiUse/index.vue index 8eaf103c..ded1358f 100644 --- a/src/views/screen/cityScreen/components/equiUse/index.vue +++ b/src/views/screen/cityScreen/components/equiUse/index.vue @@ -8,19 +8,19 @@
-
60%
+
{{allRate}}%
总体在用率
-
60%
+
{{rate1}}%
变电装备在用率
-
60%
+
{{rate2}}%
线路装备在用率
-
60%
+
{{rate3}}%
电缆装备在用率
@@ -29,17 +29,32 @@ @@ -104,7 +119,7 @@ export default { font-size: 28px; font-weight: 800; position: absolute; - top:38%; + top:39%; left: 12%; } .line-box{ @@ -118,7 +133,7 @@ export default { font-size: 28px; font-weight: 800; position: absolute; - top:19%; + top:20%; right: 0%; } .cable-box{ @@ -132,21 +147,21 @@ export default { font-size: 28px; font-weight: 800; position: absolute; - top:74%; + top:73%; right: 0%; } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .title{ font-size: 10px; } .title2{ - font-size: 10px; - padding-top: 5px; + font-size: 8px; + padding-top: 2px; } .title3{ - font-size: 10px; - padding-top: 10px; + font-size: 8px; + padding-top: 12px; } .all-box{ font-size: 12px; @@ -171,7 +186,7 @@ export default { } .title3{ font-size: 20px; - padding-top: 30px; + padding-top: 28px; } .all-box{ font-size: 28px; diff --git a/src/views/screen/cityScreen/components/maintenance/index.vue b/src/views/screen/cityScreen/components/maintenance/index.vue index 03935cb3..0f448a9e 100644 --- a/src/views/screen/cityScreen/components/maintenance/index.vue +++ b/src/views/screen/cityScreen/components/maintenance/index.vue @@ -9,81 +9,65 @@
装备预警总数: - 10 + {{totalNum}} 台
- - - - - - +
+
序号
+
工序
+
设备
+
维保情况
+
+
+
+
+ {{ index+1 }} +
+
+ {{ item.procedureName }} +
+
+ {{ item.deviceName }} +
+
+ {{ item.situation }} + {{ item.situation }} +
+
+
@@ -127,70 +111,72 @@ export default { color: #ccc; } .icon{ - width: 60px; - height: 60px; -} -/*最外层透明*/ -::v-deep .el-table, -::v-deep .el-table__expanded-cell { - background-color: transparent !important; -} -/* 表格内背景颜色 */ -::v-deep .el-table th, -::v-deep .el-table tr, -::v-deep .el-table td { - background-color: transparent !important; - border: 1px solid rgba(3, 40, 70, 0.9) !important; -} -/*去除底边框*/ -::v-deep.el-table td.el-table__cell { - border: 0; -} -::v-deep.el-table th.el-table__cell.is-leaf { - border: 0; -} -::v-deep.el-table::before { - height: 0; + width: 70px; + height: 70px; } -/* 滚动条 */ -::v-deep .el-table__body-wrapper::-webkit-scrollbar { - width: 6px; - height: 6px; +.tableHeader{ + width: 100%; + height: 12%; + background-color: #082D6E; + opacity: 0.8; + display: flex; + align-items: center; } -::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { - background-color: #2893cc; - border-radius: 3px; +.tableBox{ + width: 100%; + height: 84%; + overflow-y: auto; +} +.tableTr{ + width: 100%; + height: 16%; + // background-image: url("../../../../../assets/cityScreen/tableTr2.png"); + // background-size: 100% 100%; + border-bottom: 1px dashed #eee; + margin-bottom: 2px; + display: flex; + cursor: pointer; +} +.tableTd{ + width: auto; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #ccc; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.header{ + color: #ccc; + width: 25%; + height: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 26px; } -/* 标题行 */ -::v-deep .el-table__header-wrapper { - /* border: 1px solid #15c0ff !important; */ - background-color: rgba(65, 129, 255, 0.4); +::-webkit-scrollbar{ + width: 4px; + height: 4px; +} +//定义背景颜色和圆角 +::-webkit-scrollbar-thumb{ + border-radius: 1em; + background-color: rgba(50,50,50,.3); +} +//定义滚动条轨道 内阴影+圆角 +::-webkit-scrollbar-track{ + border-radius: 1em; + background-color: rgba(50,50,50,.1); } -::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; - font-size: 10px!important; -} -::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; - font-size: 10px!important; -} - -/* 高亮当前行 */ -::v-deep .el-table__body tr.current-row > td { - background-color: #15c0ff20 !important; -} -::v-deep .el-table__body tr.current-row .cell { - color: #ffffff !important; - -} -::v-deep .el-table__body tr:hover > td { - background-color: #15c0ff20 !important; -} -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .title{ font-size: 10px; } @@ -200,23 +186,20 @@ export default { margin: 0 2px; } .unit{ - font-size: 10px; + font-size: 8px; } .icon{ - width: 30px; - height: 30px; + width: 35px; + height: 35px; } .text{ font-size: 10px; } - ::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; - font-size: 10px!important; - } - ::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; - font-size: 10px!important; + .header{ + font-size: 10px; + } + .tableTd{ + font-size: 8px; } } @media screen and (min-width: 3000px) { @@ -229,23 +212,20 @@ export default { margin: 0 10px; } .unit{ - font-size: 20px; + font-size: 16px; } .icon{ - width: 60px; - height: 60px; + width: 70px; + height: 70px; } .text{ - font-size: 20px; + font-size: 26px; } - ::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; - font-size: 20px!important; - } - ::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; - font-size: 20px!important; + .header{ + font-size: 26px; + } + .tableTd{ + font-size: 24px; } } diff --git a/src/views/screen/cityScreen/components/retire/index.vue b/src/views/screen/cityScreen/components/retire/index.vue index 466b39a9..3a3b3d04 100644 --- a/src/views/screen/cityScreen/components/retire/index.vue +++ b/src/views/screen/cityScreen/components/retire/index.vue @@ -8,17 +8,33 @@
- 退役预警总数: - 10 + 退役预警总数: + {{totalNum}} 台
- - - - - - +
+
序号
+
工序
+
设备
+
预警情况
+
+
+
+
+ {{ index+1 }} +
+
+ {{ item.procedureName }} +
+
+ {{ item.deviceName }} +
+
+ {{ item.situation }} +
+
+
@@ -26,65 +42,28 @@ @@ -92,7 +71,7 @@ export default { .content{ width: 100%; height: 100%; - background-image: url("../../../../../assets/cityScreen/maintenanceBg.png"); + background-image: url("../../../../../assets/cityScreen/retireBg.png"); background-size: 110% 100%; } @@ -113,9 +92,9 @@ export default { height: 85%; padding-left: 8%; } -.text{ +.label{ color: #C0C2C6; - font-size: 26px; + font-size: 24px; } .num{ color: #83D3F8; @@ -128,67 +107,58 @@ export default { color: #ccc; } .icon{ - width: 60px; - height: 60px; -} -/*最外层透明*/ -::v-deep .el-table, -::v-deep .el-table__expanded-cell { - background-color: transparent !important; -} -/* 表格内背景颜色 */ -::v-deep .el-table th, -::v-deep .el-table tr, -::v-deep .el-table td { - background-color: transparent !important; - border: 1px solid rgba(3, 40, 70, 0.9) !important; -} -/*去除底边框*/ -::v-deep.el-table td.el-table__cell { - border: 0; -} -::v-deep.el-table th.el-table__cell.is-leaf { - border: 0; -} -::v-deep.el-table::before { - height: 0; + width: 70px; + height: 70px; } -/* 滚动条 */ -::v-deep .el-table__body-wrapper::-webkit-scrollbar { - width: 6px; - height: 6px; +.tableHeader{ + width: 100%; + height: 12%; + background-color: #082D6E; + opacity: 0.8; + display: flex; + align-items: center; } -::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { - background-color: #2893cc; - border-radius: 3px; +.tableBox{ + width: 100%; + height: 84%; + overflow-y: auto; +} +.tableTr{ + width: 100%; + height: 16%; + border-bottom: 1px dashed #eee; + // background-image: url("../../../../../assets/cityScreen/tableTr2.png"); + // background-size: 100% 100%; + margin-bottom: 2px; + display: flex; + cursor: pointer; +} +.tableTd{ + width: auto; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #ccc; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.header{ + color: #ccc; + width: 25%; + height: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 26px; } -/* 标题行 */ -::v-deep .el-table__header-wrapper { - /* border: 1px solid #15c0ff !important; */ - background-color: rgba(65, 129, 255, 0.4); -} -::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; -} -::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; -} - -/* 高亮当前行 */ -::v-deep .el-table__body tr.current-row > td { - background-color: #15c0ff20 !important; -} -::v-deep .el-table__body tr.current-row .cell { - color: #ffffff !important; -} -::v-deep .el-table__body tr:hover > td { - background-color: #15c0ff20 !important; -} -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .title{ font-size: 10px; } @@ -198,23 +168,20 @@ export default { margin: 0 2px; } .unit{ - font-size: 10px; + font-size: 8px; } .icon{ - width: 30px; - height: 30px; + width: 35px; + height: 35px; } - .text{ + .label{ font-size: 10px; } - ::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; - font-size: 10px!important; - } - ::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; - font-size: 10px!important; + .header{ + font-size: 10px; + } + .tableTd{ + font-size: 8px; } } @media screen and (min-width: 3000px) { @@ -227,23 +194,20 @@ export default { margin: 0 10px; } .unit{ - font-size: 20px; + font-size: 16px; } .icon{ - width: 60px; - height: 60px; + width: 70px; + height: 70px; } - .text{ - font-size: 20px; + .label{ + font-size: 26px; } - ::v-deep .el-table .cell { - // color: #15c0ff !important; - color: #fff; - font-size: 20px!important; - } - ::v-deep .el-table th.el-table__cell > .cell { - color: #e1f1fe !important; - font-size: 20px!important; + .header{ + font-size: 26px; + } + .tableTd{ + font-size: 24px; } } diff --git a/src/views/screen/cityScreen/components/topIcons/index.vue b/src/views/screen/cityScreen/components/topIcons/index.vue index d8bd06a7..949571ed 100644 --- a/src/views/screen/cityScreen/components/topIcons/index.vue +++ b/src/views/screen/cityScreen/components/topIcons/index.vue @@ -4,7 +4,7 @@
装备总量
- 73 + {{totalCount}} 台
@@ -14,8 +14,10 @@
装备总价值
- 0.027 - 亿元 + {{(totalValue/100000000).toFixed(3)}} + {{(totalValue/10000).toFixed(2)}} + 亿元 + 万元
@@ -23,7 +25,7 @@
装备配置率
- 100 + {{allocationRate}} %
@@ -31,18 +33,31 @@ - @@ -93,7 +108,7 @@ export default { margin-left: 10px; } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .title{ font-size: 12px; } diff --git a/src/views/screen/cityScreen/components/topIconsTwo/index.vue b/src/views/screen/cityScreen/components/topIconsTwo/index.vue index fe15771a..97bb15a4 100644 --- a/src/views/screen/cityScreen/components/topIconsTwo/index.vue +++ b/src/views/screen/cityScreen/components/topIconsTwo/index.vue @@ -4,7 +4,7 @@
今日入库
- 5 + {{enterNum}} 台
@@ -13,7 +13,7 @@
今日出库
- 10 + {{outNum}} 台
@@ -22,17 +22,27 @@ @@ -81,7 +91,7 @@ export default { margin-left: 10px; } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .title{ font-size: 12px; } diff --git a/src/views/screen/cityScreen/index.vue b/src/views/screen/cityScreen/index.vue index 7514486e..388377e1 100644 --- a/src/views/screen/cityScreen/index.vue +++ b/src/views/screen/cityScreen/index.vue @@ -78,7 +78,7 @@ export default { background-size: 100% 100%; display: flex; } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 1080px) { .main-view { height: 60vh; } @@ -98,6 +98,7 @@ export default { .center_view{ width: 36%; height: 100%; + border: 1px solid red; } .right_view{ @@ -106,6 +107,19 @@ export default { padding: 2%; // border: 1px solid red; } - +::-webkit-scrollbar{ + width: 4px; + height: 4px; +} +//定义背景颜色和圆角 +::-webkit-scrollbar-thumb{ + border-radius: 1em; + background-color: rgba(50,50,50,.3); +} +//定义滚动条轨道 内阴影+圆角 +::-webkit-scrollbar-track{ + border-radius: 1em; + background-color: rgba(50,50,50,.1); +} diff --git a/src/views/screen/cityScreen/temp.vue b/src/views/screen/cityScreen/temp.vue deleted file mode 100644 index 768fa8af..00000000 --- a/src/views/screen/cityScreen/temp.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - -