From 115411a50ade7081073d2e1bab55e868ee81fdff Mon Sep 17 00:00:00 2001 From: fengchenchen Date: Mon, 20 Mar 2023 15:56:44 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90add=E3=80=91-=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A7=E5=B1=8F=E6=A8=A1=E5=9D=97=E7=9A=84?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/screenNew/calendar_left_icon.png | Bin 0 -> 1361 bytes src/assets/screenNew/calendar_right_icon.png | Bin 0 -> 1278 bytes src/assets/screenNew/icon_expert.png | Bin 0 -> 942 bytes src/assets/screenNew/icon_foreign.png | Bin 0 -> 982 bytes src/assets/screenNew/icon_location.png | Bin 0 -> 4401 bytes src/assets/screenNew/icon_meeting.png | Bin 0 -> 511 bytes src/assets/screenNew/icon_meetingWp.png | Bin 0 -> 745 bytes src/assets/screenNew/icon_public.png | Bin 0 -> 785 bytes src/assets/screenNew/icon_regulation.png | Bin 0 -> 579 bytes src/assets/screenNew/icon_release.png | Bin 0 -> 743 bytes src/assets/screenNew/icon_research.png | Bin 0 -> 926 bytes src/assets/screenNew/icon_title.png | Bin 0 -> 456 bytes src/views/dashboard/Analysis.vue | 137 ++++++- .../dashboard/screen/iso/ExpertChart.vue | 177 +++++++++ .../screen/iso/LeadingStandardChart.vue | 262 +++++++++++++ .../dashboard/screen/iso/MeetingCalendar.vue | 361 +++++++++++++++++ src/views/dashboard/screen/iso/index.vue | 41 ++ .../preparationRevision/CentralizedChart.vue | 112 ++++++ .../CompletionProjectChart.vue | 132 +++++++ .../EnterpriseContributionChart.vue | 94 +++++ .../GeneralSituationChart.vue | 158 ++++++++ .../preparationRevision/OverdueChart.vue | 121 ++++++ .../PreparationRevisionChart.vue | 186 +++++++++ .../preparationRevision/ReleasePlanChart.vue | 214 ++++++++++ .../ReleaseStandardChart.vue | 209 ++++++++++ .../ShouldBeCompletedProjectChart.vue | 111 ++++++ .../screen/preparationRevision/index.vue | 184 +++++++++ .../screen/util/BarAndLineOptions.js | 214 ++++++++++ src/views/dashboard/screen/util/BarOptions.js | 263 +++++++++++++ .../dashboard/screen/util/LineOptions.js | 236 +++++++++++ src/views/dashboard/screen/util/PieOptions.js | 126 ++++++ .../screen/wp29/ExpertQuantityChart.vue | 115 ++++++ .../dashboard/screen/wp29/MeetingCalendar.vue | 368 ++++++++++++++++++ .../screen/wp29/MeetingInformationChart.vue | 338 ++++++++++++++++ .../screen/wp29/RegulationQuantityChart.vue | 145 +++++++ src/views/dashboard/screen/wp29/index.vue | 151 +++++++ 36 files changed, 4453 insertions(+), 2 deletions(-) create mode 100644 src/assets/screenNew/calendar_left_icon.png create mode 100644 src/assets/screenNew/calendar_right_icon.png create mode 100644 src/assets/screenNew/icon_expert.png create mode 100644 src/assets/screenNew/icon_foreign.png create mode 100644 src/assets/screenNew/icon_location.png create mode 100644 src/assets/screenNew/icon_meeting.png create mode 100644 src/assets/screenNew/icon_meetingWp.png create mode 100644 src/assets/screenNew/icon_public.png create mode 100644 src/assets/screenNew/icon_regulation.png create mode 100644 src/assets/screenNew/icon_release.png create mode 100644 src/assets/screenNew/icon_research.png create mode 100644 src/assets/screenNew/icon_title.png create mode 100644 src/views/dashboard/screen/iso/ExpertChart.vue create mode 100644 src/views/dashboard/screen/iso/LeadingStandardChart.vue create mode 100644 src/views/dashboard/screen/iso/MeetingCalendar.vue create mode 100644 src/views/dashboard/screen/iso/index.vue create mode 100644 src/views/dashboard/screen/preparationRevision/CentralizedChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/OverdueChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue create mode 100644 src/views/dashboard/screen/preparationRevision/index.vue create mode 100644 src/views/dashboard/screen/util/BarAndLineOptions.js create mode 100644 src/views/dashboard/screen/util/BarOptions.js create mode 100644 src/views/dashboard/screen/util/LineOptions.js create mode 100644 src/views/dashboard/screen/util/PieOptions.js create mode 100644 src/views/dashboard/screen/wp29/ExpertQuantityChart.vue create mode 100644 src/views/dashboard/screen/wp29/MeetingCalendar.vue create mode 100644 src/views/dashboard/screen/wp29/MeetingInformationChart.vue create mode 100644 src/views/dashboard/screen/wp29/RegulationQuantityChart.vue create mode 100644 src/views/dashboard/screen/wp29/index.vue diff --git a/src/assets/screenNew/calendar_left_icon.png b/src/assets/screenNew/calendar_left_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..61fde479d6de33a278d87d8fec64797956d1f46d GIT binary patch literal 1361 zcmV-X1+MyuP)Px)3rR#lR7gv`R!wXbRTTcto&WdOz9L8iSPU`I8VRyMLa;)NVPS}?vM>+`3s|Cw zu2{5<3qnkUgkThnc8Rbt{H%;7MuTo70mCElro(42BLKqrq z1~nht@&Sj31^W9lgi0&%@C=j8N)Bq>1xLu| znK25&>Cg;L;g_j73=c;MU<%e>vfP^6tH>M>0#^c`$8qRTw7d+@oii{!?c{|hN<-}c z(HQ`el(99i?Fo#HHIm3vu-;zVcIZil-bxVFP`H;dHWp;d-Z{hc9(>=;QKKXyevLry z0q__&=@|N0ZARY5)Ks&ay}brJ&$e{%G?+Jon25ypp*DZQty^KXvDyLCXjiUuy@Kdc zEDit|2EznUWzc}M{IR5*fKI@o$T3}W6B+1F8j?{9t>6;sP9s~+Lb>*qaF`V2B+u)HhKsHNR)?2e%%rFJB?YyJZ zV{E9C0A6hw=(C2bORFTV%Y5}(r|g=5DHxEmEnY)}4;b`f z3z!rFyL@R}gHnFM(}hrpmzYpq3Pzz+;sQ#g8U_btC+cegj*dDu!u0??1F*53s&GM& zKH^()D&O!tY3i4mP-wMd7B?fqxeC|yv1gC!#F$OM^Cw)Zp4(5L(*Q)fAsshZo^G%^ zW0~PIV6myAvq)bFl^8?096T8C)F~T|Q*<2cXT~uAR*S=N0`Ce!x&zOPEEPNl(ruL> z&3}ar^(7`J{RIYUan$V6c}B_Q&^15gCjhuvTOu5>gg#qqh#EYPvO}J=GlclUpK1J= zkU|F~SsaU{H1-OJ-Um?3IJ+(ccKhVrgX_vzHEbIjnDGL{;x!27-vcA}bwX(=&t{w~ z9sGHsF8E$CRJ0wSj{x+f_DsBAM&>0bRmH>vBj!#UPcUd3h+`%KnApSW1&kFEEpR|i#XGmoG)644%LyH!GQxoQpR}gsMjq|_$!p6oh&HF3YDl>{~@VF zW+opj!0B2sJ6o_VUJI>12C#`C2Ba1@P%O?R&Qdw6*R6aMbxD(VGP5HkKF7pF{o#6; z?enHH3-x-=p>Ty}d?>(UK}c^W&a#RhXL|d#iCivkn|dc}9+wh7KH7?rbl$v@n5LW8 zIwwti+z|R`!xwkj6d|q3Px(xJg7oR7gv$mQ83}RTRhn=ic`*)0b(RH2oMzm{P3BfD2uS6|rJbXvCGI3pZ*h zEd@)dsJKuwS-PxU8C(iNqpN}ov9;e?u(YTRMKBoAMw>S2Oy=vockey&-c05@VPl?wfasvf$=dIU2}ZBOnlYmOvRO5@PbM`;E++%Od^}tWw0Vb9QB7wqBETA)qUojxtGwB))8+H06ciBYtSb-pab zVgnipE1gaxg&5M7`5M6E0B*72H$t{% z{0*f$F*KWHEG#4wN!n&eo&%7nL+=pbP2bozK(vgxxu932oj`$1#&HnrWWsZeFTtb; zd^HI02j=GkWHJ_*Qx1Z+K=e_gsR{Sk@FBXC$t?{Yi=1=>Dglp-rRs1 z7&7LEK#N%n4k`qHCtTl3L(0p{7;d?y0)V5o5@$=sEMsuc$AJS;Z^utNus#IhDusHK z**x9e{Be6+4=d_dq*CnZWB-8@Q$zK=g@i?M~;NOD{K*u<;f=r^jNPcC4jTOk9)3* zVP^US;ISTY+K}0+3gM49b}WbnL;nhG9%DhBnS)_&DdF9$SGbdm_%3Rd4xk3phk+5F z_OCGN$C^@iGht8H9U5~Ztm@m1J0$BpVw~uJRf+MgwDDEBjC`wbR#)i;Yd;eP+f+)p z76kaMO{GF!Vqj~RN}#&z8tEOj(#M(e=eg}}jT6+gpq zivK-n>a*0{=#Cg*Uz`o2D22IDF^R~6YOYbArH+e(V0>Kf=3kiUU?_rF>4A|tqN=%;tI73>#?Mr!YttQ;&_-=XWc`ys#*jKvNj26dtr2d9L zH-(~HC0Qw~XU%8=M@BYVq_Zkjx{f7JVSZls+G*TPi5J-LoJ+UJaa0pJ#+I~6I7!2kdN07*qoM6N<$f_ENb@&Et; literal 0 HcmV?d00001 diff --git a/src/assets/screenNew/icon_expert.png b/src/assets/screenNew/icon_expert.png new file mode 100644 index 0000000000000000000000000000000000000000..8fc02762f65b126e5c339a6abee8d709c0eb4420 GIT binary patch literal 942 zcmV;f15x~mP)Px&Xh}ptR7gvel}%_IWf;eQ&!oE(Pzs{OOZ`CcAmZ1hcu_>EK@T3JY6Bt3Y;b35 zAkt73Wn$z zRc-?Q74&p%Eu3RwqSi3f#mG*02AcOPgBaqWTo3#Kd;vTJ+#WL(8LwN#`EHSH!81^E z!Fy6S^&G<8z@Lgt)~%x7gyj9oAw*_?+kjtCJsuWHi|s}dcnaPVy!)`A(}F%4KNOXh zYlUJANlu(d5pDj>`K~R(Ip8{AMbJ|=b zFo6reI&eUQqAFi@f-C4!XqATgeeYl-`WA36uqMLkNab5p?-zsDQ1+)~I1v^~ADg~+ zOhwNkGKA`4N4UaQb;~}Osp&yP;!tnMc)uy=(VA6?J#QQ{@ZM3hh{$kPIB+qv?16R} z%&Pl@sy>KeTna~upKPlr$BA-P_q-@Cs!|Z43Ov`YdE6iuLd$-7TN1Owt4YmH#u)Cq zGa^i)I*iB%s6M*`F6ehPtMo|M=4lV9T-La2&8j=E%8|YeC3HkxR*qJRgo0mpgWA>TQz9%HtqQ3i}L$ z$JR&euba#*cr!fT8&J^?)9SdW%E@}c{$WRg6Gx_j!>Kbv;b?KGG2GIQ?mEx&zIz7Y zc-nb$^?x>AVSM}=%gcTFzpuUul#|fq{aVy_l(Dh3b{RWwqEt(>>fWjGv{OBlY44j8 zDBnbpz7$WtZn@djnlpWGATsorXk&R?Ms+qUls@X1kBol*Z$Y;U-(x}l2Q;v@_>Gx% QhyVZp07*qoM6N<$f=tQ8761SM literal 0 HcmV?d00001 diff --git a/src/assets/screenNew/icon_foreign.png b/src/assets/screenNew/icon_foreign.png new file mode 100644 index 0000000000000000000000000000000000000000..f3ba9e6f3e55e7d18025f8e1a6d07a19a89a4ef0 GIT binary patch literal 982 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 literal 0 HcmV?d00001 diff --git a/src/assets/screenNew/icon_meeting.png b/src/assets/screenNew/icon_meeting.png new file mode 100644 index 0000000000000000000000000000000000000000..8f2323489c135e5572e1ecbc31810207c1aae4e5 GIT binary patch literal 511 zcmVPx$xk*GpR5(wyls#({Q51%scQ$j^Sg2S)p*R+oF;^Kj04&%I)8 zdB43}W>02zQfM4$FbMRD<}a;lfTqH|0ohC7y3*2vl{EcK6fNbNRiTUhP2k$!N!{!v z##buQdAWLR5NQ&4h}n#ZBSM#eTc9`XP+1ol>W!9Xohx&(&qt)Xk#!QY`8fO+wh^RL+{M1YGw;Lx zusP5v>8EX5WOVdEvRrQ8IE>s8rD~zI9gJ67}LKOAd@NhlvK_=+BB>u z&%$`(g|Op24((T9A%9LWs1l^5{mWxxAG)s0`<>3Q2=+|<^?UnL^{qZw$Pc?(8L&Ig zu*?pv{bvV(D?$ehlV~%)fS+rDk6B=MnnTsszX6LE*K(H1jrjlo002ovPDHLkV1kNp B=;QzZ literal 0 HcmV?d00001 diff --git a/src/assets/screenNew/icon_meetingWp.png b/src/assets/screenNew/icon_meetingWp.png new file mode 100644 index 0000000000000000000000000000000000000000..081ec977a74e65dd80376d1d3768af682f25ffe0 GIT binary patch literal 745 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 AUjP6A literal 0 HcmV?d00001 diff --git a/src/assets/screenNew/icon_title.png b/src/assets/screenNew/icon_title.png new file mode 100644 index 0000000000000000000000000000000000000000..096a4a0a734383b8a2ddcefddeb5b999a6065651 GIT binary patch literal 456 zcmV;(0XP1MP)Px$f=NU{R5(v#)LONQ?Ze+6-HZ$jF$@e0LJXvV_x~9f77H+Qlrl;$TR4G@nI%6( zU4ucMhnFN{9)9`EFz4nChM)ibbTUdWU-ULhQ(LG?--skbV2ax=o@1DH{pvfALI2xK z%o*ZT)WCAnu3u&7zjBG;``Ol)BS@A>KurL14a>`b<3k$&0000
+
+ + + + + +
大屏
+ +
+ +
@@ -63,6 +106,11 @@ import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts' import ThreeYearEcharts from '@views/dashboard/ThreeYearEcharts' import NotReceivedEcharts from '@views/dashboard/NotReceivedEcharts' + +import PreparationRevisionScreen from './screen/preparationRevision/index' +import WPScreen from './screen/wp29/index' +import ISOScreen from './screen/iso/index' + export default { name: 'Analysis', components: { @@ -73,7 +121,11 @@ export default { IncomeSortEcharts, AllMoneyTenEcharts, ThreeYearEcharts, - NotReceivedEcharts + NotReceivedEcharts, + // 大屏模块的组件 + PreparationRevisionScreen, + WPScreen, + ISOScreen }, computed: { // 所领导 部门负责人 还是其他角色 @@ -82,7 +134,14 @@ export default { } }, data() { - return {} + return { + menuData: [ + {name: '汽车标准化工作平台', value: '1', href: 'income'}, + {name: '汽车标准制修订管理系统', value: '2', href: 'preparationRevisionScreen'}, + {name: '中国汽车国际标准工作平台-ISO', value: '3', href: 'ISO'}, + {name: '中国汽车国际法规工作平台-WP.29', value: '4', href: 'WP'} + ] + } }, created() { console.log() @@ -178,4 +237,78 @@ export default { display: flex; justify-content: flex-end; } + +// 大屏模块的样式增加 +/* 右侧定位的按钮*/ +.location-icon{ + position: fixed; + z-index: 200; + top: 165px; + right: 10px; + cursor: pointer; + //background-color: rgba(6, 159, 153, 0.2); + //border-radius: 50%; + img{ + cursor: pointer; + width: 40px; + height: 40px; + border-radius: 50%; + } +} +// 大标题 +.first-title { + height: 60px; + line-height: 60px; + background: #FFFFFF; + border-radius: 1px; + margin: 10px 0 0; + padding: 0 20px; + &::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + background: #069F99; + vertical-align: middle; + margin-right: 8px; + } +} + +// 面板的标题 +/deep/.panel-box { + background: #FFFFFF; + border-radius: 4px; + margin-top: 10px; + .panel-title { + height: 58px; + box-shadow: 0 2px 9px 0 rgba(5,5,37,0.04); + border-radius: 2px 2px 0 0; + padding: 0 32px; + line-height: 58px; + font-size: 0px; + font-family: PingFang SC; + font-weight: 500; + color: #050525; + position: relative; + img { + width: 18px; + height: 18px; + margin-right: 11px; + vertical-align: middle; + } + & > span { + font-size: 18px; + display: inline-block; + vertical-align: middle; + } + } + .panel-content { + padding: 32px; + } +} +/deep/.full-box{ + width: 100%; +} + diff --git a/src/views/dashboard/screen/iso/ExpertChart.vue b/src/views/dashboard/screen/iso/ExpertChart.vue new file mode 100644 index 0000000..65bb626 --- /dev/null +++ b/src/views/dashboard/screen/iso/ExpertChart.vue @@ -0,0 +1,177 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/LeadingStandardChart.vue b/src/views/dashboard/screen/iso/LeadingStandardChart.vue new file mode 100644 index 0000000..a4bd8d9 --- /dev/null +++ b/src/views/dashboard/screen/iso/LeadingStandardChart.vue @@ -0,0 +1,262 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/MeetingCalendar.vue b/src/views/dashboard/screen/iso/MeetingCalendar.vue new file mode 100644 index 0000000..aaf81cc --- /dev/null +++ b/src/views/dashboard/screen/iso/MeetingCalendar.vue @@ -0,0 +1,361 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/index.vue b/src/views/dashboard/screen/iso/index.vue new file mode 100644 index 0000000..ca2602f --- /dev/null +++ b/src/views/dashboard/screen/iso/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue b/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue new file mode 100644 index 0000000..a99fe58 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue @@ -0,0 +1,112 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue b/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue new file mode 100644 index 0000000..f57c1ae --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue @@ -0,0 +1,132 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue b/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue new file mode 100644 index 0000000..8d084b4 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue @@ -0,0 +1,94 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue b/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue new file mode 100644 index 0000000..726cee7 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue @@ -0,0 +1,158 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/OverdueChart.vue b/src/views/dashboard/screen/preparationRevision/OverdueChart.vue new file mode 100644 index 0000000..7a966d4 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/OverdueChart.vue @@ -0,0 +1,121 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue b/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue new file mode 100644 index 0000000..d82782c --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue @@ -0,0 +1,186 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue b/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue new file mode 100644 index 0000000..706f974 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue @@ -0,0 +1,214 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue b/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue new file mode 100644 index 0000000..d8c1627 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue @@ -0,0 +1,209 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue b/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue new file mode 100644 index 0000000..346839e --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue @@ -0,0 +1,111 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/index.vue b/src/views/dashboard/screen/preparationRevision/index.vue new file mode 100644 index 0000000..d5b8512 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/index.vue @@ -0,0 +1,184 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/util/BarAndLineOptions.js b/src/views/dashboard/screen/util/BarAndLineOptions.js new file mode 100644 index 0000000..2633936 --- /dev/null +++ b/src/views/dashboard/screen/util/BarAndLineOptions.js @@ -0,0 +1,214 @@ +import * as echarts from 'echarts' + +import { deepMerge } from '@/utils/util' + + +export const BarAndLineOptions = { + color: ['#069F99', '#FFA17A', '#16CC9C'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + if(item.seriesType === 'bar') { + dataStr += `
+
+ + ${item.seriesName} + ${item.value} +
+
` + } else { + let valueText = item.value + // 求比例的时候特殊处理 + if(item.seriesName.indexOf('比例') > -1) { + valueText = item.value === undefined ? '-' : `${item.value}%` + } + dataStr += `
+
+ + ${item.seriesName} + ${valueText} +
+
` + } + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + lineStyle: { + opacity: 0 + }, + itemWidth: 14, + // itemHeight: 14, + right: '0', + // top: '1%' + }, + grid: { + left: '0', + right: '0', + bottom: '0', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 8 // 每行能显示的字的个数 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整 + /** + * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + /** 循环每一行,p表示行 */ + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''// 表示每一次截取的字符串 + let start = p * provideNumber // 开始截取的位置 + let end = start + provideNumber // 结束截取的位置 + // 此处特殊处理最后一行的索引值 + if (p === rowNumber - 1) { + // 最后一次不换行 + tempStr = params.substring(start, paramsNameNumber) + } else { + // 每一次拼接字符串并换行 + tempStr = params.substring(start, end) + '\n' + } + newParamsName += tempStr // 最终拼成的字符串 + } + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: [ + { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + }, + { + type: 'value', + // min: 0, + // max: 100, + axisLabel: { + show: false, + formatter: '{value} %', + }, + splitLine: { + show: false + } + } + ], + series: [ + { + name:'应完成项目数', + // data: this.yData[0], + type: 'bar', + barMaxWidth:20, + itemStyle:{ + borderRadius:[4,4,0,0] + } + }, + { + name:'实际完成项目数', + // data: this.yData[1], + type: 'bar', + barMaxWidth:20, + itemStyle:{ + borderRadius:[4,4,0,0] + } + }, + { + name:'实际完成比例', + // data: this.yData[2], + type: 'line', + yAxisIndex: 1, + showSymbol: false, + symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(22, 204, 156, 1)' + }, + { + offset: 1, + color: 'rgba(22, 204, 156, 0.1)' + } + ]) + }, + }, + ] +} + +// 生成柱折状图---制修订、各项目完成情况专用 +export function createBarAndLineChart(idName, option) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, BarAndLineOptions, option) + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/BarOptions.js b/src/views/dashboard/screen/util/BarOptions.js new file mode 100644 index 0000000..c74000d --- /dev/null +++ b/src/views/dashboard/screen/util/BarOptions.js @@ -0,0 +1,263 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' + +// 正常的柱状图配置 +export const BarOptions = { + // color: ['#4471EF', '#00D8F1', '#6CFBCE'], + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + dataStr += `
+
+
+ + ${item.seriesName} +
+
${formatMoney(item.value)}
+
+
` + }) + // return dataStr + `
完成比例：${percent}
` + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + itemWidth: 14, + // itemHeight: 14, + right: '0' + }, + grid: { + left: '0', + right: '0', + bottom: '0', + // top: '40px', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 8 // 每行能显示的字的个数 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整 + /** + * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + /** 循环每一行,p表示行 */ + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''// 表示每一次截取的字符串 + let start = p * provideNumber // 开始截取的位置 + let end = start + provideNumber // 结束截取的位置 + // 此处特殊处理最后一行的索引值 + if (p === rowNumber - 1) { + // 最后一次不换行 + tempStr = params.substring(start, paramsNameNumber) + } else { + // 每一次拼接字符串并换行 + tempStr = params.substring(start, end) + '\n' + } + newParamsName += tempStr // 最终拼成的字符串 + } + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + } +} + +// X轴是value的配置 +export const BarAxisTransformOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = `
${params[0].name}
` + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + dataStr += `
+
+ + ${item.seriesName} + ${item.value} +
+
` + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + itemWidth: 14, + right: '2%' + }, + grid: { + left: '0', + right: '3%', + bottom: '0', + containLabel: true + }, + toolbox: {}, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 10 // 每行能显示的字的个数 + // let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整 + /** + * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + let tempStr = params.substring(0, provideNumber) + '...' + newParamsName += tempStr + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + } +} + +/** + * 生成柱状图 + * @param idName --- 当前dom的id + * @param option --- 配置项 + * @param xValue --- 横坐标是否是value，默认不传 + */ +export function createBarChart(idName, option, xValue) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, BarOptions, option) + if(xValue) { + chartOption = deepMerge({},BarAxisTransformOptions, option) + } + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/LineOptions.js b/src/views/dashboard/screen/util/LineOptions.js new file mode 100644 index 0000000..a7ce094 --- /dev/null +++ b/src/views/dashboard/screen/util/LineOptions.js @@ -0,0 +1,236 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' + + +export const LineOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + dataStr += `
+
+ + ${item.seriesName} + ${formatMoney(item.data)} +
+
` + }) + return dataStr + }, + // alwaysShowContent: true, + // borderColor: 'rgba(255,255,50,1)', + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + data: [ '确认收入金额', '开票金额', '到账金额'], + icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + // itemWidth: 14, + // itemHeight: 14, + right: '0', + }, + grid: { + left: '2.4%', + right: '3%', + bottom: '0', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + type: 'category', + boundaryGap: ['30%','20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + }, + }, +} + + +export const ISOLineOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + dataStr += `
+
+ + ${item.seriesName} + ${item.data} +
+
` + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + data: [ '国际注册专家', '国内支撑专家'], + icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + right: '0', + }, + grid: { + left: '0', + right: '0', + bottom: '0%', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + type: 'category', + boundaryGap: ['30%','20%'], + // 刻度线设置 + axisTick: { + show: false + }, + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + }, + series: [ + { + name: '国际注册专家', + type: 'line', + showSymbol: false, + symbolSize: 8, + data: [], + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(6, 159, 153, 1)' + }, + { + offset: 1, + color: 'rgba(6, 159, 153, 0.2)' + } + ]) + }, + }, + { + name: '国内支撑专家', + type: 'line', + showSymbol: false, + symbolSize: 8, + data: [], + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#EBAB91' + }, + { + offset: 1, + color: '#ffffff' + } + ]) + }, + } + ] +} + +// 生成折线图 +export function createLineChart(idName, option, isISO) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, LineOptions, option) + if(isISO) { + chartOption = deepMerge({}, ISOLineOptions, option) + } + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/PieOptions.js b/src/views/dashboard/screen/util/PieOptions.js new file mode 100644 index 0000000..fd70ea7 --- /dev/null +++ b/src/views/dashboard/screen/util/PieOptions.js @@ -0,0 +1,126 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' +const color = ['#069F99', '#6D7FD0', '#8ACA9D', '#F58952', '#FAB152', '#6A956A', '#519FD1', '#55433B', '#9ABECA'] +export const PieOptions = { + title: { + show: false, + text: '', + textStyle: { + color: '#333', + fontWeight: 500, + fontSize: 14 + }, + left: 'center', + top: '10%' + }, + color, + tooltip: { + show: true, + trigger: 'item', + formatter: (param) => { + let color = '' + if(typeof param.color === 'string') { + color = param.color + } else { + color = param.color.colorStops[0].color + } + return `
+ +${param.name} +${formatMoney(param.data.money)} +
` + }, + // borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + show: false, + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + bottom: '0', + right: '0', + padding: [0,70, 0, 70], + itemGap: 40 // 图例之间的间距 + }, + + toolbox: {}, + labelLine: { + lineStyle: { + color: '#999999' + } + }, + series: [ + { + type: 'pie', + radius: ['20%', '60%'], + center: ['50%', '50%'], + // roseType: 'area', // 南丁格尔图，所有扇区圆心角相同，仅通过半径展现数据大小。 + roseType: 'radius', // 南丁格尔图，扇区圆心角展现数据的百分比，半径展现数据的大小。 + itemStyle: { + borderRadius: [0, 0, 5, 5] + }, + label: { + show: true, + color: '#333333', + formatter: '{b}: {d}%' + } + } + ] +} + +// 处理label中圆点 +function initPoint(data, color) { + // 这步主要是为了让小圆点的颜色和饼状图的块对应 + let setLabel = (data) => { + let opts = [] + for (let i = 0; i < data.length; i++) { + let item = {} + item.name = data[i].name + item.value = data[i].value + item.label = { + normal: { + //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示 + show: true, + formatter: '{point|}{a|}{c}', + rich: { + a: { + padding: [0, 0, 0, 4] + }, + point: { + height: 7, + width: 7, + lineHeight: 7, + borderRadius: 50, + backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致 + }, + } + }, + } + + opts.push(item) + } + return opts + } + return setLabel(data) +} + +// 生成柱状图 +export function createPieChart(idName, option) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, PieOptions, option) + chartOption.series[0].data = initPoint(chartOption.series[0].data, color) + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue b/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue new file mode 100644 index 0000000..8ce23cf --- /dev/null +++ b/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue @@ -0,0 +1,115 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/MeetingCalendar.vue b/src/views/dashboard/screen/wp29/MeetingCalendar.vue new file mode 100644 index 0000000..00134fa --- /dev/null +++ b/src/views/dashboard/screen/wp29/MeetingCalendar.vue @@ -0,0 +1,368 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/MeetingInformationChart.vue b/src/views/dashboard/screen/wp29/MeetingInformationChart.vue new file mode 100644 index 0000000..8f86679 --- /dev/null +++ b/src/views/dashboard/screen/wp29/MeetingInformationChart.vue @@ -0,0 +1,338 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue b/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue new file mode 100644 index 0000000..0258aa8 --- /dev/null +++ b/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue @@ -0,0 +1,145 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/index.vue b/src/views/dashboard/screen/wp29/index.vue new file mode 100644 index 0000000..adca404 --- /dev/null +++ b/src/views/dashboard/screen/wp29/index.vue @@ -0,0 +1,151 @@ + + + + + + \ No newline at end of file