From c052f32a6504e5d1bff6b21b5905b89e62185a58 Mon Sep 17 00:00:00 2001
From: xuyoubin <1562013420@qq.com>
Date: Thu, 11 Jan 2024 15:23:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B1=BD=E8=BD=A6=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=E4=BB=B6=E5=B7=A5=E4=B8=9A=E8=A7=86=E8=A7=89=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E9=A1=B9=E7=9B=AE=20=E6=B1=BD=E8=BD=A6?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E4=BB=B6=E5=B7=A5=E4=B8=9A=E8=A7=86=E8=A7=89?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E5=B9=B3=E5=8F=B0=20=E6=B1=BD=E8=BD=A6?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E4=BB=B6=E8=B4=A8=E9=87=8F=E4=B8=80=E5=BC=A0?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../qcfgquality/assets/top1.png               | Bin 0 -> 851 bytes
 .../qcfgquality/assets/top2.png               | Bin 0 -> 1129 bytes
 .../qcfgquality/assets/top3.png               | Bin 0 -> 1670 bytes
 .../qcfgquality/assets/top4.png               | Bin 0 -> 1097 bytes
 .../qcfgquality/assets/top5.png               | Bin 0 -> 1190 bytes
 .../qcfgquality/index.vue                     | 372 ++++++++++++++++--
 6 files changed, 342 insertions(+), 30 deletions(-)
 create mode 100644 god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top1.png
 create mode 100644 god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top2.png
 create mode 100644 god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top3.png
 create mode 100644 god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top4.png
 create mode 100644 god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top5.png

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top1.png b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e54f7b5c6fb7ead0f17f966492c128dfb3dca2fa
GIT binary patch
literal 851
zcmV-Z1FZasP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00001b5ch_0Itp)
z=>Px&4M{{nRA@u(na^tzK@`Wovw`ZN1<9rr6~U}UMG$*1h<B;r573(jMKAsbf@Tev
zLbFl4dGV?scoRG*C|=ci@L&ZIsk@?3p=KAMJxDP7?8FF3&F)TSc9XbdubF(`eCEBG
zdGj7aN<Nkn4vavC&683d$r;5xnwDv-EX{w46G%l@7$j?$*8vn5r~t637Qi<E3j{2B
zwpEsaic2>VWNNy!`<G9*8R&TEL<z6zo9NW)hpH<AG`YV#?*FXc0dOvSJiUXDOYZ0D
z>#%X5Abhpf2lTYk4QkB%aBjX0Gpg?@9)`viM1cQ}Az&`d>wzFL#<)=eYMyOPhJqO8
zDuD4`K={~<rcDR!%U}?rxCpQVy&7x51g@T*zjhalF39P!C!Sq7(e1xoL9&KfW&q#Z
z(jSp_%yZ_SwF_kPS7#a1o=S`U@p##@t+|aFT|soid<fu-ia`)cu47f&HFEjlWn%1>
ziY@_<J=;1d3bG7fn~FgY9=VQny2B%e`G5gum2^QXu3g<43Br%thVL(_8RIcP%dS)1
z(XOK#<`)1vRkaytZ_TcLY}ffGv|<AR;M!J)zHXT7A+G)jfp9arVXB8#VjzN{)dEr9
z><NMNwAtf0e))nV5n4eveDH;sH(!F`h)P5!0CL~8t@FYcA|E)huc(jJS#6j=w9R7^
z-`|(ldII5tx8$!J)L7;@19CDzF?wVTJ{=9qfFsj*4j{W{VgVs`&vhynqZU#KqzRKR
z%`*4}{<s2vTrsviN?a1;D*-PwqBlNh(Q|He<ZD4Tg+ZbwJ?P&@AcOWmWYRcn6BM0~
zaA>7sv;X(UZz?Xt)TAhS8j?oYJ+bkGk-XVM532rGQIdO)^tp<X5D5BSMM(?<5Gp>z
zRz(?fIViR&%AgB$u~kuqp=27z@ta@~yKALCskTDbih0x9{cI~V4N7#C`2U8k(IZ=Q
zNU-%5=w&|F$oEJpnxXAU4?h3^97>=)9gA+HN4jNjDvkZHj8H{a3PkiB-Oq6&kbbVV
dh^^Fk<TunC?m}d)@qhpT002ovPDHLkV1imlgN*<H

literal 0
HcmV?d00001

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top2.png b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5fdf3a94c44d0cbf84bd2bf36f12118ab6d983d
GIT binary patch
literal 1129
zcmV-v1eW`WP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00001b5ch_0Itp)
z=>Px(BS}O-RA@u(noVpQRS?JjvukhMB62_=YP%9W6uNexLTWiwLLxo&(rdVZ_=u>)
z&AGs>?X8zRAOV7YsF8X>h)WS5!GT0V1%#SIQJmdW0R=T)r%(y0fQWbPH}F~q+0J_3
z?%EEuWnbUSd-L0wc^@+-jL45hgacy`l_&T8ZBA=C%>bAI=q8vy1&gb0W_4Ain`FH2
z9?ARWF##$OOMsvsS?M%ezmQ!`VsJN|zJcWV@P6U@a|D!{i(LZaGsBoz^nLGu5Ijv9
zW&uoru?}L(HJo?*1=AOhyjLhO^Bjow1N^ln$lA!*UvwJz2p^oxcqu6-VJDerK_j**
zDf{zYfqDYT*NQVtER8xwpr0A?E8Fj@jM~RjMa>s;0A9Z@%a;Xf*5<@YS*6?8(CWwo
z0fJRe>DI5bd^?UI*)8(~=~@ZQCji_9v(+#R>o)!PSDbmIY%Gs-<^eN*q7hjY!~Q<*
z!maW-uOK}mJv#;P4bn)4+m$$TMh0om16&8gawqJM;w%;>doO?LsS=oE$W4N9l|fcD
zz4A?zHIyK&c>uy4fURumA!~`2{3r{=mFdhM0^Z@eZn=AxZ-vbj3X-dtXFzoNehkui
z2w_z+&ds>SC6RB>A99GqYn8O~UF>9UfhdD`&P_XCB{8U1oo4=A1n@g)c&Xb~9q5s)
zXC5KY^?$DyWs%li+@$hKuLkv^-wf}M30STe_A^0q1%l-K!dqaRWALe};ha|)k*}L4
zxq+i9xu9_&Fu%FSSy$=iyy9hmU(tnr@K$E|r%w4`5U+3pz+o+|J-I>UHT5Ee_W-=9
zk_-Nl{A$H;=2f~`uP{r%1qNQO8aub<ZXhftb`4v(t4X;hxR9-F@gbElLF4s5dFjq$
ztAD6;o44r&FrRfNoHJ295*Z}FWj@tl<Wz=)jc@L87FGI#2l31w81$UV5XJbcYuJ~<
zWCji*laRp&dIAxAu9|Va{9i$O0*IkJaF56ZNT<^TOvkXRMU>`6L!4D@!2<=!`NikK
z9O+W0fL!03_RTd~t96qbEJ*W^V(`(b;VdQbNZu=c$lx~!;pfRfL9$+9L55V+^Ck%N
zzdK!*^I=<O3=-vJAA6)F#>S!5k#Id-8poma;DuK46oEgGXF#I?<>M%5`_)p~+p?}D
z8hkwL7MyhZjr6d3yjFNxC&-e}RFcDRTZe(gs$m}wn<Lr7D#lay(cca|Y)sNg0Er$}
z(C}@P!bYN}?#L7$q>D$Q9JC#)BT=B+h8c;HY3nYsD@E*<CQ#pt*ljQ!?X{t7E3^T%
zH#~>0(bIWg4Snlv2hgxLL&Ne1!0@%FL-Hr!`t*SRVPI#t6`#HLCjlKVfN297UxTh+
vb1A%qmh|!&soI`&^4-)MgY4$lj<VK2I4U_{^AZ{J00000NkvXXu0mjfnvEO=

literal 0
HcmV?d00001

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top3.png b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top3.png
new file mode 100644
index 0000000000000000000000000000000000000000..fad9532f893842d176d6c84650e71ca06021e9ba
GIT binary patch
literal 1670
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
Qs{jB107*qoM6N<$f{ASumH+?%

literal 0
HcmV?d00001

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top4.png b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top4.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a1cb98ce6e2b87069fe7f2e0c3624967007fc45
GIT binary patch
literal 1097
zcmV-P1h)H$P)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00001b5ch_0Itp)
z=>Px(14%?dRA@u(SzU<SR22SBW>?w=A53Nor4OB4e~XpASkO|`#VzfFf>5f^CsEWw
zeGrswlc{tUnxtFtryvDUp$|T_B7#CegdHDhwIE1sku6SUq*#QVWCfwc{@ha&8#_(2
zlgVVJvz^^}OwPII`_6anxpz(o1M;H*;eo*-QY`I$>P}XsQQuz)714yrcQO&rwP}gS
zLQ-%MD8gJ}qVIZ;^<Xcib;_1D#QY?PZfZ{RE5cmyYR+g6h~!>U(~apRB6-rN>g8>u
zK=-QFfjsL(zI{_f6XqoV!_0Waui2mECDRuoMPVFa(6$@kd8_9-U*sWk+lhoFMSLU%
z`YK5|7F;RfWYm(mSwhbIRo`E4MfA24(S&&(z{&(rvyw43SF=wwztcqdG{6r7sDm)+
zRqew`gnB|G$hu#%j>ZFO!u%A#OD!@xgCTm_J8S(B*r>vsAYgBT{b5Do;B4Lgxo4YQ
z(+v|u*091W{`}3EjRL8nyp_P8x3LetUw-N0*o9@wbdq!?#lFtqgTCv0&^1MhtId^M
zfc<X?ych&0@X?0rJpX^jg!v1AwJ~4;(UDuh($@g=>m}8a3jwDZuDz}+L`L-T6O#B{
z0FT}rm3Dfrbx0HCDS*f0h)7XJS;`jx>}W%&WE0|DUe!5}n~16#FB8$c=Kx7L%8D`_
zN5Q~HzH5gBin?)(iMF&N!@wjlUI#&Iwxi2;t!kW`IG=;agrbUn4iV_Jmf2*k#P2`=
ze)n9v6!{e&9KV~d4E+eknt9UxljmBY+Uk98KTa&SgLwx)GoEXO<=PPuZT0vX6o!Jc
zAYSurRS2`P*{|*UrrG$Od(E{9^GSe~#}|>r8|SLd@#g0vV$c0oA-DUkJ=qZvN%A=b
zg`l-=N<tl$Kyu3r&6((9ziPdj<XaTRGYtAF_HN2^?cHe^>PV6Q0^&=63QYmdfnj<z
z`!h|LCjqQa2!7gg?MGUH(sXkt2p?Xzne$v*O(W5fBGLa5O&C)EMV)AxC7FKR`XOAj
zWIP0ge!ZnjfuC)-PS9Fg{#4y~hlt(+lue$y@7px{Ttq@=VIF6qGnWg)=HF*08qEP!
zVZ1@0_oHVFe$RKEH`@Uf*aR2L=5r{`ucOk67S$douZpe{i8Zg6k1_EUFiv<idqWzS
zJnwT6Neir&%8!x4Cz85Uns3(kJtY!=QH8lTYLQvNWwGx$kt|^H*e+foU6^aNGsDU(
zPPVyL=H>hAun0z`{Y`M@=!2)oz<jaFtmOi9NE`7lK*-6E79Wvdh}I8z6e%l7Bi1;U
zwiW5um)~GIvqU7Rgq9S^xv{!lTKzmUyShhmCbsA9ZFjAnBgq+HV2E4;LOOm?7Ie*!
P00000NkvXXu0mjfX3h_F

literal 0
HcmV?d00001

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top5.png b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/assets/top5.png
new file mode 100644
index 0000000000000000000000000000000000000000..469a114718fcbb3739b6a99d9dfa39b960d4ba07
GIT binary patch
literal 1190
zcmV;X1X=ruP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00001b5ch_0Itp)
z=>Px(U`a$lRA@u(na^(<MHI)sZyZW5mEtu>xj>7`Izm0bAAn@{45CQTO8huPfEsF>
zN>v4i9_sdv1QOacDMD}nfszW4;KBjy`~ek3qJnr_spY}}vN56JK<#;Gw%zT<wY}qw
zy-Cyf=y~tW`@CN>9us!Rhjs`Dc0smVCdqQ-#~{3B>KHTr6yP^k%lWTNb<&U{%ayFU
zIBdF^m_mUW#kG=ctYd0>Gjbt_nBp8*ygba9qMN6M5_3$Vu+2f};&718WA`P9Rcn0$
z=D9n;;R{|VKfjq08l>A(TI0<~)|GW4G*k!6LZ~7`9ASl1Nk9~-838d9=(a2N`%ycS
z2Vu4Bm1oaoot1Bh#E~QreRY_>@XGnHr#FH?yfCy!aP!P4J>q911o^E2WS(3r+u0;A
z!E|lEWjC^p{E3)<_A2?XZ2OO2!c!a4)>Taw;$QupUm}K6Yhoag00n-M<*b|oiK=Oo
z^nsXR@$_GngUvXd4IpmwTLL{Br!%x7x;X4-q#sDHq6X6u=Pu3%Ya)ZXSF%UGmjxRt
zB^o-DfOtkJyqyGw1nR63fCLBL^arw-6r|7iUGhr#V@W_Z^vEa~83)L8?bic>Gnc$l
zK4&@dT|nK?6YQP?(GKSv`B|6nkpM1s_UxTqf8!DFo&?F(<SV3<%|zB(DSt8vgx1;8
z(h8iOc4Yz7x!ykU#I+<K!DMAdJJcs`6X+eUWH0IO?wUlw)EY;RL_yjmdpQY2kPQZZ
z2Uh#;fQSc)`TL;fCIVtP@^y5v<ejwF^~O3QQIKg@KF1kc`Fq~JY67Rr3arjY2Sx8$
zG7%6ziZxmFPT1jD6m{5g<OQ#6A2)#rGO}eLrcRp3rJ51TX?;lCU0SWo{$S!<AmdLp
z;PFA(+meiA7p^|KHh=K<z)8!MM*%EG!S1^1EMD1zV~74520v0pa!zxO!3P*z1d07%
zbv-anBnn{m>zzQ?R?GQMO`?7q<fvD&{cDMK$n?&(Z(-%32Rf+u`w&%`)iN=K<C_H)
zw2uU8=)0WX?4#a*dmC>M)Mh{|SN;OvkV(M8b0qjlI;>8^a;eE`?{kozP<p*r-vq?J
zlun`0s~<hd<6yFG>qkE$n+2IrM*R0S{rlrS0+IDJGExPrTkmBgs;138T4^N*d6igw
z9+z^x?oYvR{E2^v`I3pAhBhy)1RyzAe$Bx148+#1k;4Oo2q<=xdTG5f`(>ORzsE;y
z_FPTY_0%#gkvJ!Y3<_2Xr+Oda`pNHtY}<@jPU|#?Uu4GKxKbcMzrW5XPWFZyXFpgM
z0`D=S1>i=k4xxR!M^=s##DbnNaUW&^jr_tDXLZneyg&YA)ILR<UB8+eZJD9{P@L!u
z*U0{@xqaDGmNIm9<f&z9JWaVocdaxXG~H_lfh0H(O{0{iT%rRpO$SZ)+66I<R9bR7
zFC&)QTmbVQX+?0{`{;kz!pnx`%0&hq9``0`*dyTb|5OCmM$98~p8x;=07*qoM6N<$
Ef{?m2vj6}9

literal 0
HcmV?d00001

diff --git a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue
index 737f69c3..3f010c84 100644
--- a/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue
+++ b/god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue
@@ -1,46 +1,358 @@
 <template>
-    <div class="box">
-        <!-- 顶部 -->
-        <div class="top">
-
+  <div class="box">
+    <!-- 顶部 -->
+    <div class="top">
+      <div v-for="(item, index) in topList" :key="index" class="top-item">
+        <div :class="['top-icon', 'top-icon-' + (index + 1).toString()]"></div>
+        <div>
+          <div>{{ item.title }}</div>
+          <div style="font-family: 'TITLEFONT'; margin-top: 10px">
+            {{ item.val }}
+          </div>
         </div>
-        <!-- 质量问题类型 -->
-        <div class="problemType"></div>
-        <!-- 质量检测合格率统计 -->
-        <div class="testIng"></div>
-
+      </div>
     </div>
+    <!-- 质量问题类型 -->
+    <div class="problemType">
+      <div class="left">
+        <div class="box-title">质量问题类型</div>
+        <div class="left-item">
+          <div id="chart1"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="box-title">质量报警问题</div>
+        <div class="right-item">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="type" label="报警类型" align="center">
+            </el-table-column>
+            <el-table-column prop="because" label="报警原因" align="center">
+            </el-table-column>
+            <el-table-column prop="time" label="记录时间" align="center">
+            </el-table-column>
+            <el-table-column prop="status" label="处理状态" align="center">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 质量检测合格率统计 -->
+    <div class="testIng">
+      <div class="left">
+        <div class="box-title">质量检测合格率统计</div>
+        <div class="left-item">
+          <div id="chart2"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="box-title">综合质量统计</div>
+        <div class="left-item">
+          <el-table :data="tableData2" border style="width: 100%;">
+            <el-table-column prop="product" label="产品" align="center" >
+            </el-table-column>
+            <el-table-column prop="statistics" label="统计纬度" align="center" >
+            </el-table-column>
+            <el-table-column prop="yield" label="合格率" align="center" >
+            </el-table-column>
+            <el-table-column prop="dispose" label="处理措施" align="center" >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
 export default {
-    data() {
-        return {
-            
+  data() {
+    return {
+      topList: [
+        {
+          title: "覆盖件大类",
+          val: "3种",
+        },
+        {
+          title: "覆盖件数量",
+          val: "10894个",
+        },
+        {
+          title: "覆盖件报警次数",
+          val: "35种",
+        },
+        {
+          title: "视频监控设备",
+          val: "15台",
+        },
+        {
+          title: "冲压自动化设备数",
+          val: "254台",
+        },
+      ],
+      tableData: [
+        {
+          type: "划痕",
+          because: "镜面出现多条划痕",
+          time: "2023-11-13 10:11:37",
+          status: "已处理",
+        },
+        {
+          type: "压痕",
+          because: "车门出现明显的凹陷痕迹",
+          time: "2023-10-06 10:10:28",
+          status: "已处理",
+        },
+        {
+          type: "少孔",
+          because: "引擎盖缺少一个安装孔位",
+          time: "2023-10-12 10:10:46",
+          status: "已处理",
+        },
+        {
+          type: "缺料",
+          because: "车顶缺少一块安装材料",
+          time: "2023-10-02 10:10:55",
+          status: "已处理",
+        },
+      ],
+      tableData2: [
+        {
+          product: "后备箱盖",
+          statistics: "季度",
+          yield: "98.12%",
+          dispose: "优化工艺流程",
+        },
+        {
+          product: "顶盖流水槽",
+          statistics: "季度",
+          yield: "96.12%",
+          dispose: "加强质检力度",
+        },
+        {
+          product: "引擎盖外板",
+          statistics: "季度",
+          yield: "97.43%",
+          dispose: "提高供应商质量要求",
+        },
+        {
+          product: "保险杠",
+          statistics: "季度",
+          yield: "98.56%",
+          dispose: "优化工艺流程",
+        },
+        {
+          product: "翼子板",
+          statistics: "季度",
+          yield: "95.12%",
+          dispose: "更换原材料",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart1();
+    this.initChart2();
+  },
+  methods: {
+    initChart1() {
+      initChartStatic(
+        "chart1",
+        generatePieOptions({
+          legend: {
+            show: true,
+            left: "right",
+            textStyle:{
+                color:"#000"
+            }
+          },
+          color: ["#61a4e7", "#7ece51", "#edca5f", "#e2925d", "#e06757"],
+          series: [
+            {
+              name: "质量问题类型",
+              type: "pie",
+              top: -20,
+              radius: '70%',
+              center: ["50%", "50%"],
+              data: [
+                {
+                  name: "划痕",
+                  value: 35,
+                },
+                {
+                  name: "压痕",
+                  value: 26,
+                },
+                {
+                  name: "少孔",
+                  value: 14,
+                },
+                {
+                  name: "缺料",
+                  value: 19,
+                },
+                {
+                  name: "尺寸",
+                  value: 15,
+                },
+              ],
+              label: {
+                formatter: "{b|{b}}",
+                rich: {
+                  c: {
+                    color: "#fff",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
+    },
+    initChart2() {
+        initChartStatic(
+        "chart2",
+        generateBaseOptions({
+          xAxis: {
+            data: [
+              "前车门",
+              "行李箱盖",
+              "顶盖",
+              "后翼子板",
+            ],
+            axisLine:{
+                show: true,
+            },
+            axisTick:{
+                alignWithLabel:true, 
+            }
+          },
+         legend:{show: false,},
+          yAxis: {
+            type: "value",
+            axisLine:{
+                show: true,
+            },
+            splitLine: {                                //网格线
+          show: true,                                  //是否显示
+          lineStyle: {                                //网格线样式
+            color: '#0735a2',                        //网格线颜色
+            width: 1,                                //网格线的加粗程度
+            type: 'dashed'                            //网格线类型
+          }
         }
+          },
+          series: [
+            {
+              name: "质量检测合格率统计",
+              data: [8.4,10,6.3,5],
+              type:'bar',
+              barWidth:'35',
+              itemStyle:{
+              
+                    color:function(params){
+                        var arr= ['#61a4e7','#7ece51','#edca5f','#9470e4' ]
+                        return  arr[params.dataIndex]
+                    }
+                }
+            },
+          ],
+          grid: {
+            top:'5%',
+            bottom: "10%",
+          },
+        })
+      );
     },
-    mounted() {
-        this.initChart1()
-        this.initChart2()
-    },
-    methods: {
-        initChart1(){},
-        initChart2(){},
-    },
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 @font-face {
-    font-family: 'TITLEFONT';
-    src: url(../../../assets/biaoti.ttf);
+  font-family: "TITLEFONT";
+  src: url(../../../assets/biaoti.ttf);
 }
-.box{
+.box {
+  width: 100%;
+  background: #f1f1f1;
+  padding: 10px 15px;
+}
+.box-title {
+  font-family: "TITLEFONT";
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+//顶部
+.top {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+  .top-item {
+    background: #fff;
+    display: flex;
+    padding: 15px;
+    justify-content: space-around;
+
+    .top-icon {
+      width: 3rem;
+      height: 3rem;
+      background-size: 100% 100%;
+    }
+  }
+}
+//质量问题类型
+.problemType {
+  margin-top: 15px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .left,
+  .right {
+    width: 49.5%;
+    padding: 15px;
+    background: #fff;
+  }
+  .left-item,
+  .right-item {
     width: 100%;
-    height: calc(100vh - 84px);
-    background: #f1f1f1;
+    height: calc(350px - 2rem);
+  }
+  #chart1 {
+    width: 100%;
+    height: 100%;
+  }
 }
-.box-title{
-    font-family: 'TITLEFONT';
-    font-size: 20px;
-    margin-bottom: 10px;
+
+// 质量检测合格率统计
+.testIng {
+  margin-top: 15px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .left,
+  .right {
+    width: 49.5%;
+    padding: 15px;
+    background: #fff;
+  }
+  .left-item,
+  .right-item {
+    width: 100%;
+    height: calc(350px - 2rem);
+  }
+  #chart2 {
+    width: 100%;
+    height: 100%;
+  }
+}
+@for $i from 1 through 5 {
+  .top-icon-#{$i} {
+    background-image: url(./assets/top#{$i}.png);
+  }
 }
 </style>
\ No newline at end of file