From beff76831bd49145f571df65c84ae3f18e82c5e3 Mon Sep 17 00:00:00 2001
From: loveflow <5269966+loveflow@user.noreply.gitee.com>
Date: Thu, 7 Mar 2024 01:12:43 +0800
Subject: [PATCH] update

---
 src/assets/images/topic/dljtl.png             | Bin 0 -> 7779 bytes
 src/assets/images/topic/dljtr.png             | Bin 0 -> 6635 bytes
 src/loveflow/assets/reset.scss                |  46 ++
 .../components/tableCustom.vue                |   2 +-
 .../enterpriseTopic/components/totalHead.vue  |  43 ++
 .../enterpriseTopic/fireSafety/index.vue      |  58 ++-
 src/views/enterpriseTopic/netSafety/index.vue |  54 +-
 src/views/enterpriseTopic/roadSafety/bar.vue  | 123 +++++
 src/views/enterpriseTopic/roadSafety/dpie.vue | 331 +++++++++++++
 .../enterpriseTopic/roadSafety/index.vue      | 462 +++++++++++++++++-
 src/views/enterpriseTopic/roadSafety/pie.vue  | 193 ++++++++
 .../enterpriseTopic/roadSafety/qyzgTable.vue  | 120 +++++
 .../enterpriseTopic/roadSafety/ytTable.vue    | 121 +++++
 13 files changed, 1542 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/images/topic/dljtl.png
 create mode 100644 src/assets/images/topic/dljtr.png
 create mode 100644 src/views/enterpriseTopic/components/totalHead.vue
 create mode 100644 src/views/enterpriseTopic/roadSafety/bar.vue
 create mode 100644 src/views/enterpriseTopic/roadSafety/dpie.vue
 create mode 100644 src/views/enterpriseTopic/roadSafety/pie.vue
 create mode 100644 src/views/enterpriseTopic/roadSafety/qyzgTable.vue
 create mode 100644 src/views/enterpriseTopic/roadSafety/ytTable.vue

diff --git a/src/assets/images/topic/dljtl.png b/src/assets/images/topic/dljtl.png
new file mode 100644
index 0000000000000000000000000000000000000000..446724ee8a6f1f746764311eb9023c1ce405bef6
GIT binary patch
literal 7779
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/topic/dljtr.png b/src/assets/images/topic/dljtr.png
new file mode 100644
index 0000000000000000000000000000000000000000..718148c3334336f521c34d515600fb4cf3360eee
GIT binary patch
literal 6635
zcmV<H85HJ;P)<h;3K|Lk000e1NJLTq003G5002h_1^@s6hu~0000001b5ch_0Itp)
z=>Py3rAb6VRCr$Pn|XK~#g)KcRUgxHX=I(YWEmM_;}ZkIHi3i~v)ExtHhf9Qk|hL)
z0kgXyVIdm=;V=n-C4_`5`94k)2f~KHhTIEw5^x*{@gZZdjg4)PEK9O(Ycy9+Pgm9Q
z`WUrFGa5;jjsI}zo3C5lb^iMGt5>gH6F8BM2?26US~<}OoB(}{gy00|6QGX~fn(In
z35h-d`WO*7M$Md%=o6ri5rJdW%yB2t$=y$Uh6}hAgg6ZV)G=}}fRMK-f%^h;u6=Qg
zWshq1;|g?Q*Aur1BJKfkg!VlFK?J!yIPcnfk1D+}RDRrmj_-VY1yFbi`%VN|E4X+S
z2sg(t79bP?0_c?>;A22Q0Edf0^RHVsmO74B-s1waSiPDiF0I)G0JA}en?mzf{cyYk
z7UFp+`A+{Y1;D2PU{COc_IYIWYChijCaT<V0Xnhk@rwk&{|SKC!}G5D=#dUCw(qG*
z$Yk~tK}s0FKSt(VXT2#OW;!lF$KQTrtsvw|LE(~;dDs7DB7nqpJn|y|@>L>WZRoV?
zubzlHkED*{0`$P9hYkXeiYQ}cb?4laI+6joW#ij^bOATTpFlus$&wrECZf(GspCTj
z-Tvxh6&mz+3n1GQrut2la+R3?LZSi~08k-tfRdoX1QS4_0?+Z55JJd;Tla;a0wgX3
zm#iZPNe<D}9|(Zl1*Mgzp1-Q+NI)HF*$)-;>eYf?b>>62hUI~KkQQ}DW0A|7@Xp9x
zMq>jL7X*ltHD-oxU%Tz5`&O?eAKIjN6hN=0(9kYfqiu9(Ev>Oe-w<oJ+QZ9pQ#Irl
zcZ6@NR(kKEaCFDdfkHQ{Tz%=?(fj=VcHwpl!gjy1$>|?7)_m~7Osu6c@t{w+!B?p=
zWyk=ka>TO>;0M>tKjZw01M5{tYe)K8j;6dJeEOdc&${sIzi!+PT_cz1hAIQzS#6A_
z-qGfnaM0DKT@jq5l@x{dlP}diI9+bJa<m<th<r`vw4Yx6blc6v>QYMw^tabPlPH#N
zEcYiIbVI{+5w5AhkvdU7wIcMLvlHveM0Y*rGpIk)&a2lkLiJkGb+KQ>{dnD;1`8)w
z2M^6hAS#u0bg<HOrPP>RDGn`>a1sT8UMO$AYfI_!{Y`C2{GU>JNDG{s77y9r@y5o-
zqhkSCEboMaUcC6<%el%U-iC9<`-}zkRbM%&X?=+Ghf#mN1#=(&{>JtP%!J@Ku9)`a
zMReD<Br&-9&UVrz>r8m=!8<=DXjuR4z}(B9`|IBAGioOV{^Ja`wvHWW!2ZOg(%6p=
zOke)yj^@0|Lx;50ZEBd&&6}U@Ee3Ba_a_|m1xv1}CO#<hb|P2Voil&NNh_=N{9emM
zB|{3p%c*%+|7ugyCM<LIf>|@Jtl0S*%^Yxzkg<#hy4Bj|?>72A6YU?+vEYptO#RwI
zWBV#R*Odrc(>42(TX(*9V5CY-Y98LOVQt5l8ZMG~!a-lO^qQ#zNX1C)o;kaA>gA>T
zpAV#a{EVv5sGae>pS<4wb1d_@B{j>><2&wGOzZ6)bBbxz(dT;VzPN2)XRAgD{pz{l
z?@y2KIv*=a`pQ$!_RswMwmogFBULOw^t`m;$r1C6wPO<w`jVwr)l-ls=j#X|)Y6HQ
z%eBz8Gh)w1`kSip|5&J|f1g~p))XW?OLSaSI&i?c4q4qW`e6wwK}YHA?M<2Ri)AXG
zJ3Y4NvpyqcSwYd#`pzfb3t!&RtH-U{1-Hge2y=9`Z7eCm=zMO&+UC)>T0G~3gZ|>u
zm8THGYq9C9mX+;}I0x(e+J@lWwe8zJZqIlExa<Q#2uK<0jdxOR_lnGp*<uu!q5)+F
z5N53*ktVd(oVoGI#^jyZ>YWbe_EVy??Pu%O>@SXQ^f@LR^i|8RnoWh6=Iw$Pu=@bc
zpIv&^qU5f-rT!jyaI$mc*x{L-`<%)KtqZrrQ1B#YvUKy~WiwJ?ZVAl0>#uwIx4K|u
zu-8>?GOaZ~04Jnn?fSKQMvt+0&It$o)#X>r7a&b9*7TgI>a=C>-h;HW-8X^}QLLI#
z-)EC+(yzjdn|HSwEp8z}#gOq6LaZl87;F0P_0Q}ab>*YTIH92N1-<p6FP+W-W_a5c
zV(5VI-kd4&Ngsu#d!eI45jh6)pk(H%kX+S~U$S%UZ%fc8S7%;>lW*I7$Q;q)z!oJ!
z_TTr?)7!~-CW!*jj~Fz<_168JPh5UhMuJmEe8^nT8C7J~c~Z+QW_!0RJd++#73iHg
z8xF>X){sR^aI4Gy&%3qgcA_o}P`+;u2qOdT1H%WY)Kr;&;dS5J-$C|L$<Yx`6RrZW
z)HzOu0Po)M^0QmLJvdV6;{u%v*XfW|*Zmh?b~Xn($GYZP!W@7DlVTZBa+vY@ev>Vn
zS|VoMSk+ajxAzU{1NABJ_p<5mi+vObK11(a*Lmks&oftkekO;r``!blXR@3SxLQ*N
z4|P=bwZ-WEh(vajsp`J4MEWH{hVM&qbI+|WJ^zMN!LS*4JkZAkIuBsCeD?UzColUb
zNHEXpBm>BRkbBast}|mUPH{5Z6ui=UJt@GdIcYcz`oKtLEaOA=Ne~N!;gR<v(3+s=
zZ?=BJt-L{rw(T=CD$p%Tpf<?i-%gG~I1vM8FaSzG4Jhz7FNMeUXuuptAtj{WPsrX%
zRoYUi(DzhIv+F8_kexUD?&q(2>`NE+5a?q8J}S^f0WV!jAQmH#N|B$;oPVA{$!VyU
zdkj|HqO%JUrkF2?9it&j63B`Sgc3lXeTig1jo$#72<S;sXpT!oeH_K+9!daC3NxtC
zIGBP!TT+D>SAY@<sHQR*2BwLEY`r38KqC95s?r~;6zL!#gv&&{eeJ%T8^P}v(Aa3(
zpLQBI@DV{50ZgEw!7iUl5ikq_rb+&1VZ*XCA!jz}d|`XqT+RfP5K6(PsvyY{FlIUf
zb?n<>)I6^Kf>U83bI@D2ZAydWJZM>#fPWCFlh)I~IC@-2s!|~vPYtTCD<*5aVrSzk
zAj<+&Ran5oVF4R9xUk0zyddZt$X*p;14g(2(40(C*))m7IiZY^*A_3na8E|Qrp;h0
zEN$TPfvPH?r_*3$G9%C9g>>&I9>#dGD2fc4<^yIjNa;EV4x&mSuPspFhnH^KvhEOS
zKT3ru%c4FI;G+RvNS)*bJu1k_Bt;1Z&IvGPAIr+fGc!-UY`ZQV=7RV_;h-hK$&@~U
zhSGSDj$B6b`M{^C5Q`;nPGI#4yX9-|?|&Tn`UFtii<ImmO1KMrP^Ao$?tHL^fzAWj
z&ePC9QHoK5>pg&b7^4-Xr8a2J$#-YYy(13vCX^JMoDi~QJ&Y-h&R#COe^{t|;ZCTk
z42r5iBAx=jFdx2i|L!|2xRi>X{(ey*N!$hA?3M7wMt2|1tIKi3xfAEm#yy~sj{R$B
zAp4_HdWvb1Lxw@8pae5U0RfvPbs>Wg<ofBe@2?5^SE7U<U|qL;yd$Rk>yAN=qvc+#
zokI5sfTAd%$Py%zI<zO!YaVTS=N7<~q5~UbnL~d+N;f|wNn(ns^8K<bPKiXgXTr?F
z9uag7Wb78T^l>ywLDy}dnGA(U1l0x|Fil#5t3Lb%0@m?#|D=0AS6j7Glkk!s7~^21
z4ckmBkj5^5<0U%098Qq3qFD1tBAEi6ad@${XU)b`?`@$(!Um1NQKD`2!66#upeVeR
zQZZH2I1Iw}O7{?{&c4%mRR*dH7cv4yDK06oAme$QF&YX6ZM7i;NeV&cX(jhmg~DI{
zm+DeLZxIeamSxCf3=4W*;KL@tLL#06s$e-M->|j#V0nDos6;{aDZoq)hGBrg0e;@m
z4_%4aQ@iwm+XD#Lk?MFNAwstL;1=wG0sCB0I1Iu@(0NrzKG3$hK-;*hi?$97NK?I#
z4Fl~W3Vy#09;KOc(#M$ejaY2ihO+Aa?DGfbP16GK#VHY}Q0#?-BFjK27Gah-CGh7O
zOF1gs)#=`)xrNAanGEyl4O`LJ6%IZw`-xZsBh&(n_B<D8Q=90QhHgW^&pM)TP)|Zx
zDzR&6U*`kg3x{7RlO#4os#7VHY!0f*T-dFO!l#y$FsQ2HuwjD>+G^BQA%#F&Dx<l#
zSE@G*+G7|}1xhkPHccs^X%b<K2819x4MSU<OkRFih|f%xr2pMIdD_fwDt!qXQK<wM
zl!f8KNg4zt8y~`^l4RMmXvg9pt)mOwCYmF<qm*!ODW?dwiVs?%)LtYBY?lMaw+jTs
z7{K~I9bP>=02yvOJIXnGdT~d~z7EDdH;IrJR|f*m&R11ENr(`V#DludK$aQ8?im>1
z6{^abRh8G5morCSyOLcH^bl!=fdQ#Iot7%YVaW@bnx^FEoUTkHKGDM1U8h%6>|d#A
zH`nWWZ-W}X;Si-adB?0#8O|;B!?_VZ%=A-S726Vq%Vzv@FW}H!htZH1aF}dcvXYe&
zJh2vecAakB?gO({@$PaSZDRrOZc@PO(G<K9O+q>+40{UaKWH>!4>xOC`5Ik+aC=YB
zDbpnB?lr;S%PC4Zmu2RK-5rauN}rEG9;q%Q(XN$Y>*i!q0)(7SBWM|XJ}H&S$la9s
zuJ7&r?!qZkE?YHc&P(;Xc6|*@lc7Fap#;z0A}ee1PgevgRUa%4tFR!X!t4NrN!G5w
zFx}y~k`+z6N`z*+jkBn;4t_fx&#un%Qs86iH39Y{1nfwpVe>#5`ZDO+$Ui|ZGBYdJ
zWfHGiYEhP@=6Ume^w{p*7rk}p&~uNLmw&60^R!=4Oh~6us!c%1u^59ufH@OmR#y)J
zJ<O!TNwBw9f>g=|t?P2!=aWOGDfJtMdU+!8`1K1HF8|c@>3z`HxGWuwCVc=RO^A4t
zQuUKs>EAek()_RouTmnxRG$JTYZ6TJD{zt~L#;|-k^)dFf#v@gOUej<s7avD1ZYij
zIG~$wK+nMYI)g*$3~(zna^yq>^#5M(Kj#e24WAGs4M2R6NB|ldUin>9Q`w_$y|w;l
zq0qIH6eSavWfn@OP0%#c0`2!Ru+_(qNfBXN;*tZJ!rZy`B#4r1OSBAV(PuL97X}8t
z{I81_fBU@JS}=9}m-3b^w_zQYwQLwTOY<dx((76X{YJ4t6}pekAAATAnL?>V!G|6=
z3ZSCB>!=xn3orygh6CtaK))$qfSG`Cr1%?esuS#i&B^Fv7@i8MN_<X5=AuRS%9{4s
zjcsl4$mY#=K2=iklqJ=Mff8+jZuR+?H7UOH4t8LOo-PO)^|Pfif<f6*8xH8TH8rnX
zHFxezY`?9q@0XQ3cHEBVDj}9cgJJL{q0(ic&@(zAi^n_Q52KtW_?B0V_!af&-cwbI
z5^XrUL){A&+*4at_F3%L+IQaBcU61)GH^ko`bZ>f6*4Z+x-LT~Wa;Omq9`Pjk-L^G
zdH1A}5-Vium4gTSN_X#GK3`RnE@)pS!_$QDU(0gnCMEP}iqf+`3}|C*Qv<Q-hiQG)
zC1xt_6N07{B@23|VFdc;%vryzuFeV!IxsMhs@k;aRG}zlAd|^hdO99wmI@gc=sXgg
zS-SLhiY%Xw4fdzguxj19b!)=mn^i(MPKE+)OvA8j&CU-(bU&q)T+v49^&CjvSdXy+
zndtlyh|Vb>9{YVV`co^I1lI_vN(mlqiKZ)Ku?HVpv0_E3&sHQE)7-9X*zl<dk!aM>
zKG(GK=xBD<Sr<!@$Ybt+Uu|uL?{C`l*RKQuw_X$o^jhj8lR@a*f=(&l%Q^jq5?r*G
zN*BZlxzHq}=q~w01NGJ?foKVH{>Pb&{pkTSxoH;mlXDj?1xK1+N+!#HoJ`*L^(9L_
zcK+0<*(z8xx=Px*^$%IlKA(vuUV4l=8l6Z5tqz<J`FZEvMt#2P-Io8}(E<OpWy|4G
z(|q_lk;n^mijqznhVW6!b$bcRwRGBEQ4u1p_J?O|rqVw|1zDsMIOAwbI~CCF1F<av
zVoL+d{P~%5Vz0BJrMl0DJ{+o{g~2)XsVX^`$@uPwMlbD`<r}`aXwjszCl9`iJe_`&
zZrpe;LLRf#;jui1+tIihbo6vWRpp>*N}#F|G&HP)K;RYtu->O=It@?m+66B+H61D?
z<hjo)$_tkUgIx&Lf=!6f5VWq_{sTe;eih{Z;CPD?sM#pXr*{Kgs1tHh2FNs%h&lme
zNU&rvDJKH@We_cj5C?rk9H`*r?Q_lan?Ep9ttlah6ANrR!8DENj(R}Ic<qHmqU!lf
z=F)y4F8jpv=~J$mHxD9?y08qZWb%G!Y+M6|!4kM=L5suH&$uKnW=9VLjV8Zq;-R0z
zv88eO4Vq>xT8OGj+RT}=ptABVkmYk-2wlk}{QAB3;1A8sEUD|8t0-Of5n2ArwIwAj
z!Uc}-0YGzM>v|Tt3m@zIm8u5U32AaKRe~wX{Ru$>X#xRUtEfUGgG40#jHJq_NStr#
zonJ6bD@ehGnmuZo1z8t@U<ffD5iAjcJTWjZ?G4lXco*j@0-Cn?;`(~&k{L6gDuB&6
ziLuu{@cVpQ-?wkCFbrmyb?!3Uv7xj64%@WL`a6pGIxO{3$k&0e5qgSqiKr^o7A*J(
zL?YLKBrSD=4A5coW>*(%XlsK_9Uah_NVEh1woamS+sU%L^PdBOcV{X}8ezN8aaeBT
z9bUJf6%%9Uz9p?LM0|*z|6REIG8x}5lF3uwH_iEnIX^QAa8`9NIBm(~$*{Dx7S5=u
z0y^li;=tGjh(@2(ckFmW7zX!KYWp}w_H_(ftYB9Pd+!{nhGdd<rczQhdg@Sxpo`RT
zECulz=Tt}OMk$##Z5m9O@@Y`je*#KR@iJ<Q$Kmas9@x>_3wsYAhWDdUlXKpp64Imr
zGzSQ2E0Lr_<%D!r0rWNae0_^GE$#v@#v7${v#y64)9JD<fU;g8ss|XGk`$s=2dFoM
zIGIvfcXA{m&zdv|7L=F6X%!Vv8ww4rn)Cf&7{7%>hkgSsEiI__G{Zm-9#423O6V$$
z$62Q&@oHQV;ucqqG&_J@FWz7~`Ih3iv!dxb&F3mj_<RzYLFmat;C@ZB^&kG~>+5+%
z#WL#iodcAf1(Xi?3IJWDZHWXNjK$z!JPw`7B%s>qPNgif5r0Y3<U|OA5L^jEnm9j4
z)%k=yKlp?YK0$~YkY$P{82&2#e(UwG4g{bs6oR^N7;1w-%ZoQ8aUKQExAJuQZ?vc9
z6=-g5&dwn?pHRxtV}}-05PchYT%@|Dac8F`uQU&lXpf%uUbiifXq2|<I#n_mD&ZcX
z$N6vhq|rCcIZZJ}{Vr$+x}_I6r{<hFv*b`{0aw*|gwi=gl1>IPa=^OfFXkK!#vsiY
z7|uC%P?aQ5F^mC^k^~C6UvnMRxvzl`J%X|K1?Rh|VeB&F@g4H+-FtPkid-kZGg+qy
z5q^7Dg#-GaJx+ggjWS8%8T3OBcltXh2Yu1QKo@{*Z)ah60q%So2JJ@Rkq9lrofT)d
z1%W60ej3D`7RD$}Gzc9hB%I-gO-86ktEwWbqN1K?S}jOY4V9!SptKw)EdxqR1?PT3
z2nOD0KrFX|`@^nUQVv4kQ5Purl%|05e&D<hIPc|*bpd1TLf6}*o}OmCtIPTT$U84s
zbAYZ3w0;mSPLTmg;t4`TFb8lSrGiDHyb^a+RF&uKh!@<(Dh7JEWP5hOJ2M$tji4hD
z+Hab))DAnaR#S1mpN5?6Eq4b7kA<v(e3O{>S~30X-uLSBe3Pm_pLOGIz&a8gr&NRx
zu(MCtPpK$%_6a*F71fHu^X!5b4LLaCxQ;CFvNC())|GNsh2Z}=`-+y~gx9TC$o3#+
z?Of*^uep}QXhFLc3QDI{r(>sE<(+G|Ernmlc=rRry9tZ=5G-!QqU84V2^a8$#&x)Z
zDi984!*OHnaB~1-JiLK4ZWw|S=iv=Su%z7qk8^#3bAlfvCWNq#xVekfyB2KHc^Dpx
zHZODcv!VdP!Frrr2ot}`47x{3h4t|YZnV0)+uo1@H?+VBD;N?ugTXVn+ii!2c_lbE
zej~3FJ+DN2M>As7($b~i1~<B~cln~1vXM*<`~l8MiAS1Usm6!k8e4IE3jiR;_$nye
z7C_98(uv;`;<*DpE6s$60RSj*fx1VGM9LSHG=|u_Vv(gqL0deAhXlFh29KV2yj<v=
zj1k8(W|@9{rKR@T+EpL9M*zq^jM3^1EaO6S%ebID$36fkLy2`H89j{E-jFXBuBE$<
zQ8a1p7)JnZX~FCQC^yO!@0uoQHBDmqz+AA5k#5e36)^3U@bYr7-h!NTm~%48xpo);
zCb<B;`4C#K^U<rLm%9O=(v6|Ryp#(3h;S-G#UCa&Y821yxH?D1hHNa3N=@XGjZsN-
zzJjBGZo_xg3;yRspjr}-k*KCgtdGH+2jQL`;+#y$X%ydzeEqPb(UUL&bc*)@I3V$(
z!Fn%LEQ1n@X=q5U3)ro7+;F}98aHT9FY?uqd(Hd54IdK*ue-^82mr9(FvyVgdp^Pi
zuHnalr=WDY$%W|x#p7U{b6%MFw#SR<;9^}oV$it_6!^XcvyBAbt!8K*_kk1}g?rxy
z=uP=7fZS_^tc0;`!58V{go7Rf`22A5ceq$TM+0TVJVz?A#blw_0E(4AqWdFA{}I(&
psPNH-IZ~%TRM1C-=5bo-{{xw!bqfr0BxL{q002ovPDHLkV1l<xrd0p{

literal 0
HcmV?d00001

diff --git a/src/loveflow/assets/reset.scss b/src/loveflow/assets/reset.scss
index 46850a6..a8efc61 100644
--- a/src/loveflow/assets/reset.scss
+++ b/src/loveflow/assets/reset.scss
@@ -161,4 +161,50 @@
       }
     }
   }
+
+  .el-tabs {
+    .el-tabs__header {
+      margin: 0 0 vw(10);
+      .el-tabs__nav-wrap {
+        .el-tabs__nav {
+          .el-tabs__active-bar {
+            width: vw(108) !important;
+            background-color: #33cccc;
+          }
+          .el-tabs__item {
+            padding: 0;
+            width: vw(108);
+            height: vw(40);
+            line-height: vw(48);
+            font-size: vw(14);
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+            text-align: center;
+            &:hover {
+              color: #ebfff4;
+              background: linear-gradient(
+                180deg,
+                rgba(51, 204, 204, 0) 0%,
+                rgba(60, 199, 176, 0.3) 100%
+              );
+            }
+            &.is-active {
+              font-weight: 500;
+              color: #ebfff4;
+              background: linear-gradient(
+                180deg,
+                rgba(51, 204, 204, 0) 0%,
+                rgba(60, 199, 176, 0.3) 100%
+              );
+            }
+          }
+        }
+        &::after {
+          height: 0.5px;
+          background-color: #5b748c;
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/enterpriseTopic/components/tableCustom.vue b/src/views/enterpriseTopic/components/tableCustom.vue
index dfe2ef5..62ded90 100644
--- a/src/views/enterpriseTopic/components/tableCustom.vue
+++ b/src/views/enterpriseTopic/components/tableCustom.vue
@@ -67,7 +67,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/loveflow/assets/index.scss";
 .loveflowscreen {
   height: 100%;
diff --git a/src/views/enterpriseTopic/components/totalHead.vue b/src/views/enterpriseTopic/components/totalHead.vue
new file mode 100644
index 0000000..9e95a97
--- /dev/null
+++ b/src/views/enterpriseTopic/components/totalHead.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="totalWrap">
+    <div>{{ dataObj.name }}</div>
+    <div class="totalText">{{ dataObj.value }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.totalWrap {
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: vw(46);
+  background: url("~@/assets/images/screen/total.png") no-repeat center center;
+  background-size: 100% 100%;
+  font-size: vw(18);
+  font-weight: 500;
+  color: #d0deee;
+  .totalText {
+    margin-left: 16px;
+    font-size: vw(26);
+    color: #ebf9ff;
+    letter-spacing: 3px;
+    text-shadow: 0px 0px 9px #159aff;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/fireSafety/index.vue b/src/views/enterpriseTopic/fireSafety/index.vue
index 1e09c07..b3e724b 100644
--- a/src/views/enterpriseTopic/fireSafety/index.vue
+++ b/src/views/enterpriseTopic/fireSafety/index.vue
@@ -1,5 +1,61 @@
 <template>
-  <div>
+  <div class="fireSafetyWrap">
     <!-- 消防安全 -->
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mb14 mr16">
+        <colWrap class="mr16" title="消防设施数据"> </colWrap>
+        <colWrap title="消防事件发生"> </colWrap>
+      </div>
+
+      <div class="screenRight mb14">
+        <colWrap title="消防制度执行"> </colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
+        <colWrap class="" title="企业台账数据"> </colWrap>
+      </div>
+      <div class="screenRight">
+        <colWrap title="异常企业台账"> </colWrap>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import colWrap from "../components/colWrap.vue";
+
+export default {
+  components: {
+    colWrap,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.fireSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 3.4;
+      display: flex;
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+    }
+  }
+  .screenRowTop {
+    height: 62%;
+  }
+  .screenRowBtm {
+    height: 38%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/netSafety/index.vue b/src/views/enterpriseTopic/netSafety/index.vue
index 965b577..d79d09e 100644
--- a/src/views/enterpriseTopic/netSafety/index.vue
+++ b/src/views/enterpriseTopic/netSafety/index.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="netSafetyWrap">
     <!-- 网络安全 -->
-    <div class="screenRow screenRowTop mb14">
-      <div class="screenLeft">
-        <colWrap class="mb14" title="漏斗整改"> </colWrap>
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mr16">
+        <colWrap class="mb14" title="漏斗整改">
+          <div class=""></div>
+        </colWrap>
         <colWrap title="行政案件"> </colWrap>
       </div>
-      <div class="screenMid">
+      <div class="screenMid mr16">
         <colWrap title="等保定级评审"> </colWrap>
       </div>
       <div class="screenRight">
@@ -14,11 +16,11 @@
       </div>
     </div>
 
-    <div class="screenRow screenRowBtm mb14">
-      <div class="screenLeft mr18">
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
         <colWrap class="" title="网站应用系统备案"> </colWrap>
       </div>
-      <div class="screenMid mr18">
+      <div class="screenMid mr16">
         <colWrap title="重大网络安全事故"> </colWrap>
       </div>
       <div class="screenRight">
@@ -34,6 +36,42 @@ export default {
   components: {
     colWrap,
   },
-  data() {},
+  data() {
+    return {};
+  },
 };
 </script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.netSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .screenMid {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .screenRowTop {
+    padding-bottom: 16px;
+    height: 68%;
+  }
+  .screenRowBtm {
+    height: 32%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/bar.vue b/src/views/enterpriseTopic/roadSafety/bar.vue
new file mode 100644
index 0000000..c36afe3
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/bar.vue
@@ -0,0 +1,123 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "18%",
+          bottom: "15%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：件",
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "bar",
+            barWidth: 20,
+            color: "#5ED0A3",
+            data: this.chartObj.yData,
+            label: {
+              show: false,
+              position: "top",
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#66E1DF",
+                },
+                {
+                  offset: 1,
+                  color: " rgba(0,89,84,0)",
+                },
+              ]),
+            },
+          },
+
+          {
+            name: "外圆",
+            type: "scatter",
+            emphasis: {
+              scale: false,
+            },
+            symbol: "roundRect",
+            symbolSize: [26, 4], // 进度条白点
+            itemStyle: {
+              show: true,
+              barBorderRadius: [10, 10, 10, 10],
+              color: "#FFF",
+              shadowColor: "rgba(255, 255, 255, 1)",
+              shadowBlur: 8,
+              borderWidth: 1,
+              opacity: 1,
+            },
+            z: 2,
+            data: this.chartObj.yData,
+            animationDelay: 500,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/roadSafety/dpie.vue b/src/views/enterpriseTopic/roadSafety/dpie.vue
new file mode 100644
index 0000000..0eacfec
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/dpie.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in chartObj" :key="item.name">
+        <div class="flex-center">
+          <div
+            class="dpieIcon"
+            :style="{ backgroundColor: item.itemStyle.color }"
+          ></div>
+          <div class="dpieName">{{ item.name }}</div>
+        </div>
+        <div class="dpieValue">{{ item.value }}</div>
+      </div>
+    </div>
+    <div class="" style="flex: 1">
+      <div class="dpiebg">
+        <div ref="dpieWrapRef" class="dpieWrap"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  props: {
+    chartObj: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      total: 1,
+    };
+  },
+  mounted() {
+    this.total = 1;
+    for (let i = 0; i < this.chartObj.length; i++) {
+      this.total += this.chartObj[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.chartObj;
+      let hoveredIndex = "";
+      let chartDom = this.$refs["dpieWrapRef"];
+      let myChart = echarts.init(chartDom);
+      const getPie3D = (pieData, internalDiameterRatio) => {
+        //internalDiameterRatio:透明的空心占比
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let k = 1 / 5;
+        pieData.sort((a, b) => {
+          return b.value - a.value;
+        });
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+            radius: "90%",
+            center: ["30%", "40%"],
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+          startValue = endValue;
+        }
+        let boxHeight = getHeight3D(series, 6); //通过传参设定3d饼/环的高度，26代表26px
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          // backgroundColor: "#fff",
+          tooltip: {
+            show: false,
+          },
+          legend: {
+            show: false,
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            left: 0,
+            top: -16, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20, //角度
+              distance: 120, //调整视角到主体的距离，类似调整zoom
+              rotateSensitivity: 0, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: false, //自动旋转
+            },
+          },
+          series: series,
+        };
+        return option;
+      };
+
+      //获取3d丙图的最高扇区的高度
+      const getHeight3D = (series, height) => {
+        series.sort((a, b) => {
+          return b.pieData.value - a.pieData.value;
+        });
+        return (height * 50) / series[0].pieData.value;
+      };
+
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      const getParametricEquation = (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) => {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      };
+
+      let option = getPie3D(this.chartObj, 0.8);
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      option.series.push({
+        // name: "pie3d",
+        type: "pie",
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{c}%",
+        },
+        // startAngle: -25, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["80%", "80%"],
+        center: ["40%", "40%"], //指示线的位置
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      option && myChart.setOption(option);
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dpiePanel {
+  position: relative;
+  flex: 1;
+  .dpieLegend {
+    position: absolute;
+    top: 10px;
+    right: vw(50);
+    width: vw(240);
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: vw(16);
+      padding: 0 vw(12);
+      width: 100%;
+      height: 32px;
+      background-color: rgba(108, 128, 151, 0.1);
+      .dpieIcon {
+        margin-right: 6px;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .dpieName {
+        margin-right: 18px;
+        font-size: 12px;
+        color: #d0deee;
+      }
+      .dpieValue {
+        font-size: 16px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.dpieWrap {
+  width: 240px;
+  height: 120px;
+}
+.dpiebg {
+  margin-top: vw(10);
+  margin-left: vw(30);
+  width: 240px;
+  height: 120px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/index.vue b/src/views/enterpriseTopic/roadSafety/index.vue
index b997910..a8d3368 100644
--- a/src/views/enterpriseTopic/roadSafety/index.vue
+++ b/src/views/enterpriseTopic/roadSafety/index.vue
@@ -1,5 +1,465 @@
 <template>
-  <div>
+  <div class="roadSafetyWrap loveflowscreen">
     <!-- 道路安全 -->
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mr16 mb14">
+        <colWrap class="" title="源头检查数据">
+          <total-head :dataObj="ytObj"></total-head>
+          <div class="dpieWrap">
+            <dpie :chartObj="ytPie"></dpie>
+          </div>
+          <div class="ytTableWrap">
+            <ytTable></ytTable>
+          </div>
+        </colWrap>
+      </div>
+
+      <div class="screenRight mb14">
+        <colWrap class="mr16" title="交通设施检查数据">
+          <total-head :dataObj="ytObj"></total-head>
+          <div class="dpieWrap">
+            <dpie :chartObj="jtssPie"></dpie>
+          </div>
+          <div class="ytTableWrap">
+            <el-tabs v-model="jtssTab" @tab-click="handleClick">
+              <el-tab-pane label="设施完善企业" name="ws">
+                <tableWrap :columns="column"></tableWrap>
+              </el-tab-pane>
+              <el-tab-pane label="设施损失企业" name="ss">
+                <tableWrap :columns="column"></tableWrap>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </colWrap>
+        <colWrap title="违章数据">
+          <div class="wzsjWrap">
+            <div class="top">
+              <barOne :chartObj="tlObj"></barOne>
+            </div>
+            <div class="btm">
+              <div class="left mr14">
+                <sub-col title="车辆异常状态分析"></sub-col>
+                <pieWrap :chartObj="carlObj"></pieWrap>
+              </div>
+              <div class="right">
+                <sub-col title="人员异常状态分析"></sub-col>
+                <pieWrap :chartObj="carrObj"></pieWrap>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
+        <colWrap title="交通事故">
+          <div class="jtsgHead">
+            <div class="left">
+              <div class="icon"></div>
+              <div class="nameWrap">
+                <div class="name">交通事故数</div>
+                <div class="value">1323</div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="icon"></div>
+              <div class="nameWrap">
+                <div class="name">关联车辆数</div>
+                <div class="value">2134</div>
+              </div>
+            </div>
+          </div>
+          <div class="jtsgBody">
+            <dpie :chartObj="jtPie"></dpie>
+          </div>
+        </colWrap>
+      </div>
+      <div class="screenRight">
+        <colWrap title="企业整改数据">
+          <div class="qyzgWrap">
+            <div class="left">
+              <sub-col title="企业整改进度"></sub-col>
+              <div class="flex-center" style="flex: 1">
+                <dpie :chartObj="qyzgPie"></dpie>
+              </div>
+            </div>
+            <div class="right">
+              <sub-col title="企业整改详情"></sub-col>
+              <div class="qyzgTable">
+                <el-tabs v-model="qyzgTab" @tab-click="handleClick">
+                  <el-tab-pane label="待整改" name="dzg">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                  <el-tab-pane label="整改中" name="zgz">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                  <el-tab-pane label="整改完成" name="zgwc">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import colWrap from "../components/colWrap.vue";
+import SubCol from "../components/subCol.vue";
+import TotalHead from "../components/totalHead.vue";
+import totalHead from "../components/totalHead.vue";
+import dpie from "./dpie.vue";
+import pieWrap from "./pie.vue";
+
+import ytTable from "./ytTable.vue";
+import qyzgTable from "./qyzgTable.vue";
+import tableWrap from "../components/tableWrap.vue";
+import barOne from "./bar.vue";
+
+export default {
+  components: {
+    dpie,
+    colWrap,
+    totalHead,
+    SubCol,
+    TotalHead,
+    ytTable,
+    tableWrap,
+    barOne,
+    pieWrap,
+    qyzgTable,
+  },
+  data() {
+    return {
+      qyzgTab: "dzg",
+      tlObj: {
+        xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
+        yData: [3, 4, 3, 1, 3, 4, 2],
+        name: "违章数据",
+      },
+      ytObj: {
+        name: "源头检查总数",
+        value: 31876,
+      },
+      ytPie: [
+        {
+          name: "区内检查数据",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "资质异常企业数",
+          value: 86,
+          itemStyle: {
+            color: "#49ECC9",
+          },
+        },
+      ],
+      qyzgPie: [
+        {
+          name: "待整改",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "整改中",
+          value: 86,
+          itemStyle: {
+            color: "#FEF699",
+          },
+        },
+        {
+          name: "整改完成",
+          value: 86,
+          itemStyle: {
+            color: "#49ECC9",
+          },
+        },
+      ],
+      jtPie: [
+        {
+          name: "经济损失事故",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "伤亡事故",
+          value: 86,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      jtssPie: [
+        {
+          name: "设施完善企业",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "设施损失企业数",
+          value: 86,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      jtssTab: "ws",
+      column: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "超载查处点",
+        },
+        {
+          prop: "isQ",
+          label: "超载比例",
+        },
+        {
+          prop: "personType",
+          label: "处理详情",
+        },
+        {
+          prop: "address",
+          label: "处理单位",
+        },
+      ],
+      carlObj: {
+        color: ["#2B82F3", "#66C3FF", "#FEF699"],
+        data: [
+          { value: 484, name: "超速" },
+          { value: 567, name: "闯禁" },
+          { value: 489, name: "违停" },
+        ],
+        name: "车辆违规总数",
+      },
+      carrObj: {
+        color: ["#2B82F3", "#66C3FF", "#FEF699"],
+        data: [
+          { value: 484, name: "超速" },
+          { value: 567, name: "闯禁" },
+          { value: 489, name: "违停" },
+        ],
+        name: "驾驶员违章总数",
+      },
+    };
+  },
+  methods: {
+    handleClick(tab) {
+      console.log(tab);
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.roadSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 1;
+      display: flex;
+      .dpieWrap {
+        height: 120px;
+      }
+      .screenChart {
+        display: flex;
+        flex-direction: column;
+      }
+      .ytTableWrap {
+        height: calc(100% - 200px);
+        flex: 1;
+        margin-bottom: 6px;
+      }
+      .jtsgHead {
+        display: flex;
+        .left {
+          margin-right: vw(20);
+          flex: 1;
+          height: vw(82);
+          display: flex;
+          align-items: center;
+          background: url("~@/assets/images/topic/gunb3.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(90);
+            height: vw(70);
+            background: url("~@/assets/images/topic/dljtl.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .nameWrap {
+            .name {
+              color: #d9e7ff;
+              font-size: vw(16);
+            }
+            .value {
+              color: #ebf9ff;
+              font-size: vw(18);
+            }
+          }
+        }
+        .right {
+          flex: 1;
+          height: vw(82);
+          display: flex;
+          align-items: center;
+          background: url("~@/assets/images/topic/gunb2.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(90);
+            height: vw(70);
+            background: url("~@/assets/images/topic/dljtr.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .nameWrap {
+            .name {
+              color: #d9e7ff;
+              font-size: vw(16);
+            }
+            .value {
+              color: #ebf9ff;
+              font-size: vw(18);
+            }
+          }
+        }
+      }
+      .jtsgBody {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .screenRight {
+      flex: 2;
+      display: flex;
+    }
+  }
+  .screenRowTop {
+    height: 60%;
+    .screenRight {
+      .screenChart {
+        display: flex;
+        flex-direction: column;
+        .dpieWrap {
+          height: 120px;
+        }
+        .ytTableWrap {
+          height: calc(100% - 200px);
+          flex: 1;
+          margin-bottom: 6px;
+          .el-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .el-tabs__content {
+              flex: 1;
+              .el-tab-pane {
+                height: 100%;
+                overflow-y: scroll;
+                &::-webkit-scrollbar {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+      .wzsjWrap {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .top {
+          flex: 1;
+        }
+        .btm {
+          flex: 1;
+          display: flex;
+          .left {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(108, 128, 151, 0.1);
+            margin-bottom: 14px;
+          }
+          .right {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(108, 128, 151, 0.1);
+            margin-bottom: 14px;
+          }
+        }
+      }
+    }
+  }
+  .screenRowBtm {
+    height: 40%;
+
+    .qyzgWrap {
+      height: 100%;
+      display: flex;
+      .left {
+        margin-bottom: 14px;
+        margin-right: 14px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(108, 128, 151, 0.1);
+        margin-bottom: 14px;
+      }
+      .right {
+        padding: 14px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .qyzgTable {
+          background-color: rgba(108, 128, 151, 0.1);
+          height: calc(100% - 40px);
+          flex: 1;
+          padding: 10px 10px 0;
+          .el-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .el-tabs__content {
+              flex: 1;
+              .el-tab-pane {
+                height: 100%;
+                overflow-y: scroll;
+                &::-webkit-scrollbar {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/pie.vue b/src/views/enterpriseTopic/roadSafety/pie.vue
new file mode 100644
index 0000000..5f67c45
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/pie.vue
@@ -0,0 +1,193 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/topic/pie.png");
+let iconImg = require("@/assets/images/topic/pieIcon.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 2) - 20;
+      //console.log(height);
+      let total = 0;
+      let data = [];
+      let barChartList = this.chartObj.data;
+      let legend = [];
+      for (var i = 0; i < barChartList.length; i++) {
+        legend.push(barChartList[i]["name"]);
+        total = total + barChartList[i].value;
+        data.push(
+          {
+            value: barChartList[i].value,
+            name: barChartList[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: [
+          {
+            text: "放射源总数",
+            top: 44,
+            textAlign: "center",
+            left: "48%",
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 10,
+            },
+          },
+          {
+            text: total,
+            top: 60,
+            textAlign: "center",
+            left: "48%",
+            textStyle: {
+              fontWeight: "400",
+              color: "#92E0FF",
+              fontSize: 18,
+            },
+          },
+        ],
+        legend: {
+          data: legend,
+          orient: "vertical",
+          bottom: 20,
+          icon: "diamond",
+          left: "center",
+          width: "100%",
+          height: 80,
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 10,
+          padding: 0,
+          //backgroundColor: "rgba(108,128,151,0.2)",
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 10,
+                padding: [0, 4, 0, 0],
+                color: "#D0DEEE",
+              },
+              value: {
+                width: 32,
+                color: "#FFFFFF;",
+                fontSize: 12,
+              },
+              rate: {
+                color: "#FFFFFF;",
+                fontSize: 12,
+              },
+            },
+          },
+          formatter: function (name) {
+            const item = barChartList.filter((item) => item.name === name)[0];
+            let rate = ((100 * item.value) / total).toFixed(0);
+            console.log(rate);
+            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 80,
+                height: 80,
+                zIndex: 1,
+              },
+              left: "center",
+              top: 20,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: [38, 48],
+            center: ["center", 60],
+            clockWise: false,
+            hoverAnimation: false,
+            itemStyle: {},
+            label: {
+              show: false,
+              position: "right",
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/roadSafety/qyzgTable.vue b/src/views/enterpriseTopic/roadSafety/qyzgTable.vue
new file mode 100644
index 0000000..7012cb9
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/qyzgTable.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.car }}</div>
+          </div>
+          <div class="item">
+            <div class="label">检查人：</div>
+            <div class="value">{{ item.date }}</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="item">
+            <div class="label">检查时间：</div>
+            <div class="value">{{ item.qyT }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <gScreenTable
+        stripe
+        ref="gScreenTable"
+        :tableData="dataSource"
+        :columns="column"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gScreenTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      column: [
+        {
+          prop: "id",
+          label: "查处点",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    this.ipagination.pageSize = 6;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+  overflow: hidden;
+  .tableCustomWrap {
+    height: calc(100% - 36px);
+    overflow: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .cusWrap {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      height: vw(58);
+      background: url("~@/assets/images/topic/cust.png") no-repeat center center;
+      background-size: 100% 100%;
+      padding: 0 8px;
+      .line {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .item {
+          font-size: vw(12);
+          display: flex;
+          align-items: center;
+          flex: 1;
+          .label {
+            color: #d0deee;
+          }
+          .value {
+            flex: 1;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .tableWrap {
+    .gScreenTableWrap {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/ytTable.vue b/src/views/enterpriseTopic/roadSafety/ytTable.vue
new file mode 100644
index 0000000..9210d9d
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/ytTable.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.car }}</div>
+          </div>
+          <div class="item">
+            <div class="label">检查人：</div>
+            <div class="value">{{ item.date }}</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="item">
+            <div class="label">检查时间：</div>
+            <div class="value">{{ item.qyT }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <gScreenTable
+        stripe
+        ref="gScreenTable"
+        :tableData="dataSource"
+        :columns="column"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gScreenTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      column: [
+        {
+          prop: "id",
+          label: "查处点",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    this.ipagination.pageSize = 6;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+
+  .tableCustomWrap {
+    height: calc(100% - 30px);
+    overflow: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .cusWrap {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      height: vw(58);
+      background: url("~@/assets/images/topic/cust.png") no-repeat center center;
+      background-size: 100% 100%;
+      padding: 0 8px;
+      .line {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .item {
+          font-size: vw(12);
+          display: flex;
+          align-items: center;
+          flex: 1;
+          .label {
+            color: #d0deee;
+          }
+          .value {
+            flex: 1;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .tableWrap {
+    height: 100%;
+    .gScreenTableWrap {
+      display: none;
+    }
+  }
+}
+</style>