Merge pull request 'lb' (#12) from lb into master

Reviewed-on: #12

src/views/3DOverview/components/DianChart.vue

@@ -36,11 +36,29 @@ export default {
     // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
     let data = [
       // 温度走势
-      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
+      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
       // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
+      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
       // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
+      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      })
     ]
     let wendu = data[0]
     let dianliu = data[1]
@@ -52,6 +70,7 @@ export default {
         color: colors,
         legend: {
           top: 4,
+          right: 50,
           itemWidth: 8,
           itemHeight: 8,
           textStyle: {
@@ -85,10 +104,10 @@ export default {
             name: '电流/A',
             nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             onZero: true,
             position: 'left',
-            offset: 42,
+            offset: 40,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -112,7 +131,7 @@ export default {
             name: '电压/V',
             nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             axisTick: { show: false },
             onZero: true,
             position: 'left',
@@ -147,7 +166,7 @@ export default {
               }
             },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             splitLine: {
               lineStyle: {
                 color: '#fff3'

src/views/3DOverview/components/LeftContentEquipmentCheck.vue

@@ -9,37 +9,6 @@
         :table-config="tableProps"
         :table-data="tableData"
       ></TechyTable>
-
-      <!-- <el-table
-        key="LeftContentEquipmentCheck1"
-        border
-        :data="tableData"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-      >
-        <el-table-column label="设备名称" prop="eqName" align="center" />
-        <el-table-column label="所属产线" prop="pl" align="center" />
-        <el-table-column label="提示等级" prop="warningLevel" align="center">
-          <template slot-scope="scope">
-            <PriorityComponent :injectData="scope.row"></PriorityComponent>
-          </template>
-        </el-table-column>
-        <el-table-column label="巡检内容" prop="checkContent" align="center" />
-      </el-table>
-    </div> -->
-
-      <!-- <div class="el-table-wrapper">
-      <el-table
-        key="LeftContentEquipmentCheck2"
-        border
-        :data="tableData2"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-      >
-        <el-table-column label="设备名称" prop="eqName" />
-        <el-table-column label="所属产线" prop="pl" />
-        <el-table-column label="提示等级" prop="warningLevel" />
-        <el-table-column label="提示等级" prop="checkContent" />
-      </el-table>
-    </div> -->
     </div>
   </div>
 </template>
@@ -68,11 +37,6 @@ const PriorityComponent = {
       {
         style: {
           display: 'inline-block',
-          // borderRadius: '2px',
-          // padding: '2px 6px',
-          // color: '#fff',
-          // opacity: '0.6',
-          // fontSize: '12px',
           borderRadius: 'calc(2px * var(--beilv))',
           padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
           color: '#fff',
@@ -94,15 +58,26 @@ const tableProps = [
   { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
 ]
 const tableData = [
-  { eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
+  { eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
-  { eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
+  { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
+  { eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
-  { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
+  { eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
-  { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
+  { eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
+  { eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
-  { eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' },
+  { eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
-  { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
+  { eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
+  { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
+  { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
+  { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
+  { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
+  { eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
+  { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
+  { eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
+  { eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
+  { eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
+  { eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
+  { eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
+  { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
 ]
 
 export default {

src/views/3DOverview/components/LeftContentMonitor.vue

@@ -25,6 +25,7 @@ export default {
 
 <style scoped>
 .left-content-monitoring {
+  flex: 1;
   width: 100%;
   height: calc(100% - 32px);
   display: flex;

src/views/3DOverview/components/LeftContentOrder.vue

@@ -45,13 +45,26 @@ const tableProps = [
   { prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
 ]
 const tableData = [
-  { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
+  { orderCode: 'ODFG20210724195124', clientName: '阿特斯阳光电力集团', specs: '3.2-1032*1747', finished: 72 },
-  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
+  { orderCode: 'ODPG20220712231003', clientName: '阳光能源控股有限公司', specs: '2.0-1128*1716', finished: 67 },
-  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
+  { orderCode: 'ODFG20210819002810', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1128*1716', finished: 46 },
-  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
+  { orderCode: 'ODPG20201003193028', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2251', finished: 89 },
-  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
+  { orderCode: 'ODPG20200113134639', clientName: '协鑫集成科技股份有限公司', specs: '3.2-1128*1718', finished: 54 },
-  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
+  { orderCode: 'ODFG20211115145712', clientName: '晶科能源股份有限公司', specs: '3.2-1033*2089', finished: 93 },
-  { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
+  { orderCode: 'ODFG20211102234340', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1032*1747', finished: 57 },
+  { orderCode: 'ODFG20200303145849', clientName: '晶澳太阳能科技股份有限公司', specs: '2.0-1128*2272', finished: 76 },
+  { orderCode: 'ODFG20220208030640', clientName: '苏州中来光伏新材股份有限公司', specs: '2.0-1128*2251', finished: 62 },
+  { orderCode: 'ODFG20200916123727', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 23 },
+  { orderCode: 'ODFG20200117065400', clientName: '晶澳太阳能科技股份有限公司', specs: '3.2-1033*2089', finished: 75 },
+  { orderCode: 'ODPG20211020214146', clientName: '英利绿色能源控股有限公司', specs: '3.2-1128*1716', finished: 44 },
+  { orderCode: 'ODPG20221015223506', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2272', finished: 3 },
+  { orderCode: 'ODFG20211112131234', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 90 },
+  { orderCode: 'ODPG20200411040019', clientName: '阳光能源控股有限公司', specs: '3.2-1033*2089', finished: 4 },
+  { orderCode: 'ODPG20220622002234', clientName: '苏州中来光伏新材股份有限公司', specs: '3.2-1128*1718', finished: 43 },
+  { orderCode: 'ODPG20220806035106', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 60 },
+  { orderCode: 'ODPG20220530081525', clientName: '晶科能源股份有限公司', specs: '2.0-1128*2272', finished: 21 },
+  { orderCode: 'ODPG20210228222705', clientName: '阿特斯阳光电力集团', specs: '3.2-1128*1718', finished: 75 },
+  { orderCode: 'ODPG20210408102029', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 99 }
 ]
 
 export default {

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -9,7 +9,7 @@
         <div class="content-part">
           <div class="row">
             <span class="name">纯 &nbsp;&nbsp;&nbsp;水</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-1 color-1" />
             <span class="amount">
               39m
               <sup>3</sup>
@@ -17,17 +17,17 @@
           </div>
           <div class="row">
             <span class="name">循环水</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-2 color-2" />
             <span class="amount">
-              239m
+              23m
               <sup>3</sup>
             </span>
           </div>
           <div class="row">
             <span class="name">自来水</span>
-            <span class="diy-process-bar color-3" />
+            <span class="diy-process-bar bar-width-3 color-3" />
             <span class="amount">
-              23m
+              239m
               <sup>3</sup>
             </span>
           </div>
@@ -44,25 +44,25 @@
         <div class="content-part">
           <div class="row">
             <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-4 color-1" />
+            <span class="amount">
+              23Pa
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">CDA</span>
+            <span class="diy-process-bar bar-width-5 color-2" />
             <span class="amount">
               39Pa
             </span>
           </div>
           <div class="row">
-            <span class="name">CDA</span>
+            <span class="name">天然气</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-6 color-3" />
             <span class="amount">
               239pa
             </span>
           </div>
-          <div class="row">
-            <span class="name">天然气</span>
-            <span class="diy-process-bar color-3" />
-            <span class="amount">
-              23Pa
-            </span>
-          </div>
         </div>
       </TechyBox>
     </div>
@@ -85,8 +85,9 @@
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
           <span>发电</span>
         </div>
-        <div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
+        <div style="height: 100%; flex: 1;  ">
-          <FadianChart />
+          <!-- <FadianChart /> -->
+          <DianChart />
         </div>
       </TechyBox>
     </div>
@@ -199,6 +200,25 @@ export default {
   height: 100%;
 }
 
+.bar-width-1::after {
+  width: 60%;
+}
+.bar-width-2::after {
+  width: 34%;
+}
+.bar-width-3::after {
+  width: 99%;
+}
+.bar-width-4::after {
+  width: 20%;
+}
+.bar-width-5::after {
+  width: 29%;
+}
+.bar-width-6::after {
+  width: 79%;
+}
+
 .diy-process-bar.color-1::after {
   background: linear-gradient(to right, #178be9, #67b3f2);
 }

src/views/3DOverview/components/RightContentAlert.vue

@@ -9,35 +9,6 @@
         :table-config="tableProps"
         :table-data="tableData"
       ></TechyTable>
-      <!--       
-      <el-table
-        key="RightContentAlertTable"
-        border
-        :data="tableData"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-      >
-        <el-table-column
-          label="设备名称"
-          prop="eqName"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column
-          label="所属产线"
-          prop="plName"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
-          <template slot-scope="scope">
-            <PriorityComponent :injectData="scope.row"></PriorityComponent>
-          </template>
-        </el-table-column>
-        <el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
-        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
-      </el-table> -->
     </div>
   </div>
 </template>
@@ -66,11 +37,6 @@ const PriorityComponent = {
       {
         style: {
           display: 'inline-block',
-          // borderRadius: '2px',
-          // padding: '2px 6px',
-          // color: '#fff',
-          // opacity: '0.6',
-          // fontSize: '12px',
           borderRadius: 'calc(2px * var(--beilv))',
           padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
           color: '#fff',
@@ -86,26 +52,53 @@ const PriorityComponent = {
 }
 
 const tableProps = [
-  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
+  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
-  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
+  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
-  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
+  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
   { prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
-  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
+  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
 ]
 
 const tableData = [
-  { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
-  { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
+  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
-  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
+  { eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
-  { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
+  { eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
-  { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
+  { eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
+  { eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
+  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
+  { eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
+  {
+    eqName: '磨边后清洗机',
+    plName: 'A',
+    content: '马华部地般平感为转出形就特务把提存。',
+    priority: 2,
+    duration: '18 min'
+  },
+  { eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
+  { eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
+  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 4, duration: '29 min' },
+  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 4, duration: '47 min' },
+  { eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
+  { eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
+  { eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
+  {
+    eqName: '钢后清洗机',
+    plName: 'A',
+    content: '就门务程过志率难每维原就快没省为满候。',
+    priority: 2,
+    duration: '33 min'
+  },
+  { eqName: '预热', plName: 'A', content: '金单能信较生七族接处人门例图取之。', priority: 2, duration: '34 min' },
+  { eqName: '预热', plName: 'B', content: '会带给山气己进相构位节采调而音集。', priority: 3, duration: '6 min' }
 ]
 
 export default {
   name: 'RightContentAlert',
   components: { TechyTable },
   data() {
-    return {tableProps, tableData }
+    return { tableProps, tableData }
   },
   created() {},
   mounted() {},

src/views/3DOverview/components/RightContentFaultAnalysis.vue

@@ -48,7 +48,7 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0.5,
         y: 1,
         x2: 0,
         y2: 0,
@@ -61,7 +61,7 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0.5,
         y: 1,
         x2: 0,
         y2: 0,
@@ -75,9 +75,9 @@ export default {
       {
         type: 'linear',
         x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
-        y2: 0,
+        y2: 0.5,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
           { color: '#49FBD600', offset: 0.1 },
@@ -88,11 +88,11 @@ export default {
     ]
 
     const demoData = [
-      { value: 55, name: 'A' },
+      { value: 107, name: '破片' },
-      { value: 33, name: 'B' },
+      { value: 146, name: '崩边' },
-      { value: 22, name: 'C' },
+      { value: 43, name: '脏污' },
-      { value: 11, name: 'D' },
+      { value: 83, name: '划擦伤' },
-      { value: 32, name: 'E' }
+      { value: 20, name: '崩孔' }
     ]
 
     return {
@@ -103,7 +103,7 @@ export default {
           textAlign: 'center',
           left: '63%',
           top: '35%',
-          text: '33039',
+          text: demoData.reduce((prev, curr) => prev + curr.value, 0),
           textStyle: {
             color: '#fff',
             fontSize: 16,
@@ -120,10 +120,10 @@ export default {
         legend: {
           top: 0,
           bottom: 0,
-          left: -10,
+          left: -15,
           orient: 'vertical',
           icon: 'none',
-          itemGap: 5,
+          itemGap: 8,
           itemWidth: 10,
           formatter: function(name) {
             // test data - dynamic
@@ -163,7 +163,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#FB418C'
-                // backgroundColor: '#1A99FF'
               },
               d: {
                 // verticalAlign: 'top',
@@ -172,7 +171,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#DDB112'
-                // backgroundColor: '#A691FF'
               },
               e: {
                 // verticalAlign: 'top',
@@ -181,7 +179,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#1A99FF'
-                // backgroundColor: '#FB418C'
               },
               f: {
                 // verticalAlign: 'top',
@@ -190,7 +187,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#A691FF'
-                // backgroundColor: '#49FBD6'
               },
               g: {
                 // verticalAlign: 'top',
@@ -199,7 +195,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#49FBD6'
-                // backgroundColor: '#DDB112'
               }
             }
           }
@@ -236,7 +231,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -249,7 +244,7 @@ export default {
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 }
 
                 totalRate += percent

src/views/3DOverview/components/RightContentProductRate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: calc(100% - 36px); width: 100%;">
+  <div style="height: calc(100% - 36px); width: 100%; position: relative;">
     <div :id="id" ref="techy-line-chart" class="techy-chart" />
   </div>
 </template>
@@ -35,14 +35,15 @@ export default {
       option: {
         color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
         grid: {
-          top: '20%',
+          top: '45%',
           left: 0,
           right: 12,
-          bottom: 0,
+          bottom: '5%',
           containLabel: true
         },
         legend: {
           width: '72%',
+          top: '20%',
           right: 12,
           itemWidth: 12,
           itemHeight: 8,
@@ -73,6 +74,8 @@ export default {
         yAxis: {
           type: 'value',
           name: '成品率',
+          min: 'dataMin',
+          splitNumber: 2,
           nameTextStyle: {
             color: '#fffc',
             align: 'right',
@@ -95,11 +98,10 @@ export default {
         },
         series: [
           {
-            name: '产线1',
+            name: 'A',
             type: 'line',
             symbol: 'none',
             areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
               color: {
                 type: 'linear',
                 x: 0,
@@ -121,14 +123,19 @@ export default {
             },
             data: Array(12)
               .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
+              .map(_ => {
+                let v = Math.floor(Math.random() * 100)
+                while (v < 80) {
+                  v = Math.floor(Math.random() * 100)
+                }
+                return v
+              })
           },
           {
-            name: '产线2',
+            name: 'B',
             type: 'line',
             symbol: 'none',
             areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
               color: {
                 type: 'linear',
                 x: 0,
@@ -150,95 +157,98 @@ export default {
             },
             data: Array(12)
               .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
+              .map(_ => {
-          },
+                let v = Math.floor(Math.random() * 100)
-          {
+                while (v < 80) {
-            name: '产线3',
+                  v = Math.floor(Math.random() * 100)
-            type: 'line',
+                }
-            symbol: 'none',
+                return v
-            areaStyle: {
+              })
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#FF734566' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线4',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#9452FF66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线5',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#6A6E8766' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
           }
+          // {
+          //   name: '产线3',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   areaStyle: {
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#FF734566' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   data: Array(12)
+          //     .fill(0)
+          //     .map(_ => Math.floor(Math.random() * 100))
+          // },
+          // {
+          //   name: '产线4',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   areaStyle: {
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#9452FF66' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   data: Array(12)
+          //     .fill(0)
+          //     .map(_ => Math.floor(Math.random() * 100))
+          // },
+          // {
+          //   name: '产线5',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   areaStyle: {
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#6A6E8766' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   data: Array(12)
+          //     .fill(0)
+          //     .map(_ => Math.floor(Math.random() * 100))
+          // }
         ]
       }
     }
@@ -258,7 +268,10 @@ export default {
 </script>
 <style scoped>
 .techy-chart {
-  height: 100%;
+  /* background: #cccc; */
+  position: absolute;
+  top: -36%;
+  height: 150%;
   width: 100%;
 }
 

src/views/3DOverview/components/RightContentQualityAnalysis.vue

@@ -26,16 +26,16 @@ export default {
   data() {
     return {
       datalist: [
-        { name: '热端', value: 2332039120, color: '#0b88ff' },
+        { name: '热端', value: 2023233, color: '#0b88ff' },
-        { name: '原片上片', value: 30, color: '#0bffa6' },
+        { name: '丝印', value: 2023233, color: '#0bffa6' },
-        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '原片', value: 20, color: '#0bffa6' },
-        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '钢化', value: 20, color: '#e3ff0b' },
-        { name: '原片磨边', value: 30, color: '#0bffa6' },
+        { name: '上片磨边', value: 20, color: '#e3ff0b' },
-        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '下片铺纸', value: 202324, color: '#950bff' },
-        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '镀膜', value: 20, color: '#950bff' },
-        { name: '磨边镀膜膜', value: 23, color: '#950bff' },
+        { name: '物流仓储', value: 202324, color: '#ff7d0b' },
-        { name: '镀膜', value: 10, color: '#ff0bc2' },
+        { name: '清洗', value: 20, color: '#0bffa6' },
-        { name: '清晰', value: 66, color: '#ff7d0b' }
+        { name: '包装', value: 2, color: '#ff0bc2' }
       ]
     }
   },
@@ -55,6 +55,7 @@ export default {
   grid-auto-rows: min-content;
   gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
   justify-content: end;
+  align-content: center;
 }
 
 .analysis-item {

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
+  <techy-box style="width: 100%; height: calc(100% - 36px);">
     <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
 
     <new-bar
@@ -24,116 +24,16 @@
 </template>
 
 <script>
-import echarts from 'echarts'
 import TechyBox from './TechyBox.vue'
 import newBar from './newBar.vue'
-import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
   name: 'RealtimeProductionHorizontalBarChart',
   components: { TechyBox, newBar },
-  mixins: [resize],
+  props: {},
-  props: {
-    id: {
-      type: String,
-      default: 'default-linechart-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
-    return {
+    return {}
-      chart: null,
+  }
-      option: {
-        color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
-        grid: {
-          top: 0,
-          left: 0,
-          right: '5%',
-          bottom: 0,
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          boundaryGap: [0, 0.001],
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 8
-            // rotate: 10
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#fffa'
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 10,
-            color: '#fffa'
-          },
-          axisTick: { show: false },
-          splitLine: {
-            lineStyle: {
-              color: '#fffa'
-            }
-          }
-        },
-        series: [
-          {
-            name: '2011',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          },
-          {
-            name: '2012',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          }
-        ]
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
-    })
-  },
-  beforeDestroy() {
-    if (this.chart) this.chart.dispose()
-    this.chart = null
-  },
-  methods: {}
 }
 </script>
 <style scoped>

src/views/3DOverview/components/TechyAnalysisBar.vue

@@ -12,7 +12,9 @@
     <span class="quality-analysis-bar__name">
       {{ name }}
     </span>
-    <span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
+    <span class="quality-analysis-bar__amount" :title="'数量:' + amount">
+      {{ amount | amountFilter }}
+    </span>
   </div>
 </template>
 
@@ -22,7 +24,7 @@ export default {
   filters: {
     amountFilter: val => {
       const sVal = val.toString()
-      return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
+      return sVal.length > 9 ? sVal.slice(0, 8) + '...' : sVal
     }
   },
   props: {
@@ -97,17 +99,17 @@ export default {
 }
 
 .block-green-5 {
-  background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
+  background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.75));
   /* margin-left: 4px; */
 }
 .block-green-4 {
-  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.75), hsla(181, 53%, 44%, 0.44));
 }
 .block-green-3 {
-  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.44), hsla(181, 53%, 44%, 0.15));
 }
 .block-green-2 {
-  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.15), hsla(181, 53%, 44%, 0));
 }
 .block-green-1 {
   /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
@@ -187,10 +189,10 @@ export default {
   color: rgba(255, 255, 255, 0.725);
   display: inline-block;
   /* min-width: 35%; */
-  width: 35%;
+  width: 45%;
   text-align: left;
   padding: calc(3px * var(--beilv)) 0;
-  font-size: calc(14px * var(--beilv));;
+  font-size: calc(14px * var(--beilv));
-  line-height: calc(12px * var(--beilv));;
+  line-height: calc(12px * var(--beilv));
 }
 </style>

src/views/3DOverview/components/TechyTable.vue

@@ -200,11 +200,11 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203ecc;
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #213961cc;
 }
 </style>

src/views/3DOverview/components/newBar.vue

@@ -89,8 +89,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [-12, 10],
             position: 'top',
@@ -113,6 +113,7 @@ export default {
           name: this.dataList[1].name,
           type: 'bar',
           barWidth: 20,
+          yAxisIndex: 1,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[1].topColor },
@@ -124,6 +125,7 @@ export default {
         {
           // 柱顶
           name: this.dataList[1].name,
+          yAxisIndex: 1,
           type: 'pictorialBar',
           barWidth: 20,
           symbol: 'circle',
@@ -143,8 +145,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [12, 10],
             position: 'top',
@@ -154,6 +156,7 @@ export default {
         {
           // 柱底
           name: this.dataList[1].name,
+          yAxisIndex: 1,
           type: 'pictorialBar',
           barWidth: 20,
           symbol: 'circle',
@@ -170,7 +173,6 @@ export default {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          // barWidth: 26,
           barWidth: barWidth,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -191,7 +193,6 @@ export default {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolPosition: 'end',
@@ -209,8 +210,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [0, 10],
             position: 'top',
@@ -222,7 +223,6 @@ export default {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolOffset: [0, '50%'],
@@ -249,15 +249,16 @@ export default {
       this.chart = echarts.init(this.$refs.chartContainer)
       this.chart.setOption({
         grid: {
-          top: '16%',
+          top: '24%',
-          left: '2%',
+          left: '8%',
-          right: '2%',
+          right: '5%',
           bottom: '3%',
           containLabel: true
         },
         legend: {
           itemWidth: 8,
           itemHeight: 8,
+          top: '2%',
           right: '2%',
           textStyle: {
             color: '#fff9'
@@ -281,31 +282,68 @@ export default {
           },
           data: this.nameList
         },
-        yAxis: {
+        yAxis: [
-          axisLine: {
+          {
-            lineStyle: {
+            name: '产量/m²',
-              type: 'solid',
+            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-              color: this.dataList[0].bottomColor,
+            type: 'value',
-              // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+            splitNumber: 3,
-              width: '1' // 坐标线的宽度
+            axisTick: { show: false },
-            }
+            onZero: true,
+            position: 'left',
+            offset: 10,
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: this.dataList[0].bottomColor,
+                // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dotted',
+                color: 'rgba(119, 255, 242, 0.2)'
+              }
+            },
+            type: 'value'
           },
-          axisTick: {
+          {
-            show: false
+            name: '能耗kw/h',
-          },
+            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-          axisLabel: {
+            type: 'value',
-            textStyle: {
+            splitNumber: 3,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            axisTick: { show: false },
-            }
+            onZero: true,
-          },
+            position: 'left',
-          splitLine: {
+            offset: 48,
-            lineStyle: {
+            axisLine: {
-              type: 'dotted',
+              lineStyle: {
-              color: 'rgba(119, 255, 242, 0.2)'
+                type: 'solid',
-            }
+                color: this.dataList[1].bottomColor,
-          },
+                width: '1' // 坐标线的宽度
-          type: 'value'
+              }
-        },
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+              }
+            },
+            splitLine: {
+              show: false,
+              // lineStyle: {
+              //   type: 'dotted',
+              //   color: 'rgba(119, 255, 242, 0.2)'
+              // }
+            },
+            type: 'value'
+          }
+        ],
         series: this.series
       })
     }
@@ -354,10 +392,12 @@ export default {
     left: calc(100vw/1920 * 48); */
   /* bottom: calc(10% + 100vh/1920 * 28); */
   bottom: 20px;
-  left: 9%;
+  left: 6%;
   height: 30px;
   width: 90%;
-  background: linear-gradient(to top, #49fbd789, transparent);
+  border-radius: 3px;
+  /* border: 1px solid #49fbd7; */
+  background: linear-gradient(to top, #49fbd789 5%, transparent);
   transform: skew(-35deg);
   z-index: 0;
 }

src/views/3DOverview/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <!-- <V3DApp @3d-loaded="handle3DLoaded" />
+    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
-    <div v-if="showPage" id="v3d-main-content"> -->
+    <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -19,31 +20,38 @@
               </techy-container>
             </div>
 
-            <div class="techy-body-part__middle">
+            <div class="techy-body-part__middle" v-if="currentEquipment">
               <TechyBox>
                 <div class="techy-body-part__middle__inner">
                   <p>
                     <b>产线名称 :</b>
-                    <span>A产线</span>
+                    <span>{{ currentEquipment.pl }}</span>
                   </p>
                   <p>
                     <b>设备名称 :</b>
-                    <span>清洗机</span>
+                    <span>{{ currentEquipment.name }}</span>
                   </p>
                   <p>
                     <b>累计加工 :</b>
-                    <span>20</span>
+                    <span>{{ currentEquipment.amount }}</span>
                   </p>
                   <p>
                     <b>通信状态 :</b>
-                    <span class="round-dot">运行中</span>
+                    <span
+                      class="round-dot"
+                      :class="{
+                        'danger-dot': currentEquipment.status === '故障',
+                        'warning-dot': currentEquipment.status === '调试中'
+                      }"
+                    >
+                      {{ currentEquipment.status }}
+                    </span>
                   </p>
                 </div>
               </TechyBox>
             </div>
           </div>
 
-
           <div class="techy-body-part__right">
             <div class="realtime">
               <techy-container title="实时产量和能耗" icon="折角的菜单图标">
@@ -73,7 +81,7 @@
             </techy-container>
           </div>
           <div class="ft-monitor" style="flex: 1;">
-            <techy-container title="现场实时监控" icon="安全帽图标">
+            <techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
               <LeftContentMonitor />
             </techy-container>
           </div>
@@ -110,6 +118,8 @@ import TechyBox from './components/TechyBox.vue'
 
 import screenfull from 'screenfull'
 
+import eqList from './v3dApp/data'
+
 export default {
   name: '',
   components: {
@@ -129,6 +139,8 @@ export default {
   },
   data() {
     return {
+      eqId: null,
+      currentEquipment: null,
       showPage: false,
       toggleResize: 'toggle-1' // <=== no need to worry this
     }
@@ -153,6 +165,12 @@ export default {
     },
     handle3DLoaded() {
       this.showPage = true
+    },
+    handle3DClick() {
+      this.eqId = document.getElementById('V3DData').rel
+      if (this.eqId) {
+        this.currentEquipment = eqList.find(item => item.id === this.eqId)
+      }
     }
   }
 }
@@ -349,4 +367,12 @@ export default {
   background-color: rgb(82, 231, 82);
   border-radius: calc(4px * var(--beilv));
 }
+
+.danger-dot::before {
+  background-color: #e71837;
+}
+
+.warning-dot::before {
+  background-color: #d6961f;
+}
 </style>

src/views/3DOverview/v3dApp/data.js

@@ -0,0 +1,73 @@
+export default [
+  { id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' },
+  { id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' },
+  { id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' },
+  { id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' },
+  { id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' },
+  { id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' },
+  { id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' },
+  { id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' },
+  { id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' },
+  { id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  // { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' },
+  { id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
+  // { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  // { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
+]

src/views/EquipmentManager/HomePage.vue

@@ -96,19 +96,19 @@
           <div class="techy-container__inner">
             <div>
               <TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" />
             </div>
             <div>
               <TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" />
             </div>
             <div>
               <TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" />
             </div>
             <div>
               <TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" />
             </div>
           </div>
         </techy-container>
@@ -136,8 +136,14 @@ import {
   equipmentAnalysisData,
   sparepartsProps,
   sparepartsDatalist,
-  rightSideProps,
+  suddenMaintainProps,
-  rightSideDatalist
+  inPlanMaintainProps,
+  defenceMaintainProps,
+  wwwOrderProps,
+  rightSideDatalist,
+  rightSideDatalist2,
+  rightSideDatalist3,
+  rightSideDatalist4
 } from './mockData'
 
 import { mapGetters } from 'vuex'
@@ -171,8 +177,14 @@ export default {
       equipmentAnalysisData,
       sparepartsProps,
       sparepartsDatalist,
-      rightSideProps,
+      suddenMaintainProps,
-      rightSideDatalist
+      inPlanMaintainProps,
+      defenceMaintainProps,
+      wwwOrderProps,
+      rightSideDatalist,
+      rightSideDatalist2,
+      rightSideDatalist3,
+      rightSideDatalist4
       // refreshKey: 0
     }
   },
@@ -268,13 +280,13 @@ export default {
 .techy-container__inner {
   display: flex;
   flex-direction: column;
-  gap: calc(8px * var(--beilv));
+  gap: calc(32px * var(--beilv));
-  height: calc(100% - 4vh);
+  height: calc(100% - 3vh);
   /* overflow-y: scroll; */
   overflow-y: auto;
 }
 .techy-container__inner > div {
-  flex: 1 1;
+  flex: 0;
 }
 
 .row-1,
@@ -346,7 +358,7 @@ export default {
 .grid-2-3 {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 1fr 1fr;
-  gap: calc(8px * var(--beilv)) calc(4px * var(--beilv));
+  gap: calc(8px * var(--beilv)) calc(8px * var(--beilv));
 }
 
 .product-line-selection {

src/views/EquipmentManager/components/EquipmentAnalysisBox.vue

@@ -14,16 +14,16 @@
       <div class="flex items-center gap-8">
         <span class="param-name">MTBR</span>
         <div class="progress-bar grow">
-          <ProgreeBar :process="+mtbr * 100" :colors="['#2EC6B4', '#85F6E9']" />
+          <ProgreeBar :process="+mtbr" :max="30" :colors="['#2EC6B4', '#85F6E9']" />
         </div>
-        <span class="param-value">{{ mtbr | noDecimalFilter }}%</span>
+        <span class="param-value">{{ mtbr }}min</span>
       </div>
       <div class="flex items-center gap-8">
         <span class="param-name">MTBF</span>
         <div class="progress-bar grow">
-          <ProgreeBar :process="+mtbf * 100" :colors="['#EB46A1', '#FF8BC3']" />
+          <ProgreeBar :process="+mtbf" :max="99999" :colors="['#EB46A1', '#FF8BC3']" />
         </div>
-        <span class="param-value">{{ mtbf | noDecimalFilter }}%</span>
+        <span class="param-value">{{ mtbf }}h</span>
       </div>
     </div>
   </TechyBox>
@@ -39,6 +39,10 @@ const ProgreeBar = {
       type: Number,
       default: 0
     },
+    max: {
+      type: Number,
+      default: 100
+    },
     colors: {
       type: Array,
       default: () => ['#1295FF', '#9DD5FF']
@@ -68,7 +72,7 @@ const ProgreeBar = {
               position: 'absolute',
               left: 0,
               top: 0,
-              width: this.process + '%',
+              width: this.process / this.max * 100 + '%',
               height: '100%',
               borderRadius: 'calc(8px * var(--beilv))',
               background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})`
@@ -141,7 +145,7 @@ export default {
   width: 24px; */
   font-size: calc(12px * var(--beilv));
   line-height: calc(14px * var(--beilv));
-  width: 15%;
+  width: 18%;
 }
 
 .param-list::before {

src/views/EquipmentManager/components/TechyAnalysisHeader.vue

@@ -1,17 +1,29 @@
 <template>
   <div class="techy-analysis-header">
-    <span v-html="titleLeftSVG" />
+    <template v-if="type === 'special'">
-    <span class="techy-analysis-header__title">
+      <div style="background: #cccc; width: 200px; height: 20px;"></div>
-      <slot />
+    </template>
-    </span>
+
-    <span v-html="titleRightSVG" />
+    <template v-else>
+      <span
+        style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
+        v-html="titleLeftSVG"
+      />
+      <span class="techy-analysis-header__title">
+        <slot />
+      </span>
+      <span
+        style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
+        v-html="titleRightSVG"
+      />
+    </template>
   </div>
 </template>
 
 <script>
 const titleLeftSVG = `<svg
-                    width="56px"
+                    width="100%"
-                    height="13px"
+                    height="100%"
                     viewBox="0 0 56 13"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
@@ -59,8 +71,8 @@ const titleLeftSVG = `<svg
                     </g>
                   </svg>`
 const titleRightSVG = `<svg
-                    width="56px"
+                    width="100%"
-                    height="13px"
+                    height="100%"
                     viewBox="0 0 56 13"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
@@ -109,6 +121,12 @@ const titleRightSVG = `<svg
 
 export default {
   name: 'TechyAnalysisHeader',
+  props: {
+    type: {
+      type: String,
+      default: 'default-type'
+    }
+  },
   data() {
     return { titleLeftSVG, titleRightSVG }
   }

src/views/EquipmentManager/components/TechyTable.vue

@@ -126,14 +126,14 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));;
+  width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv));;
+  height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
   position: relative;
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-thumb {
-  border-radius: calc(8px * var(--beilv));;
+  border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
 
@@ -200,12 +200,11 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e;
+  background-color: #0e203ecc;
-  /* background-color: #0e203e; */
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #203760;
+  background-color: #213961cc;
 }
 </style>

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -49,18 +49,21 @@ export default {
   width: 100%;
   white-space: nowrap;
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
+  justify-content: stretch;
   align-items: stretch;
-  margin-bottom: 1px;
+}
+
+.trow:not(:last-of-type) {
+  border-bottom: 1px solid #0d1728;
 }
 
 .thead,
 .tbody {
   /* min-width: calc(100vw / 1920 * 96); */
-  background-color: #20376080;
+  background-color: rgba(33, 57, 97, 0.8);
   white-space: nowrap;
   overflow: hidden;
-  margin-right: 1px;
   text-align: left;
   padding-left: calc(12px * var(--beilv));
   padding-right: calc(12px * var(--beilv));
@@ -70,16 +73,20 @@ export default {
 }
 
 .thead {
-  width: 25%;
+  min-width: 25%;
   font-size: calc(14px * var(--beilv));
-  line-height: 1.8;
+  /* line-height: 1.8; */
+  line-height: 2.1;
+  flex: 0;
 }
 
 .tbody {
-  width: 24%;
+  min-width: 24%;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.8);
   font-size: calc(12px * var(--beilv));
-  line-height: 2;
+  /* line-height: 2; */
+  line-height: 2.3;
+  flex: 1 0;
 }
 
 .tbody:last-child {

src/views/EquipmentManager/mockData.js

@@ -33,30 +33,36 @@ const PriorityComponent = {
 }
 
 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 },
+  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
-  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 },
+  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
   { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
-  { label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
+  { label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
   { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 }
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
 ]
 
 export const equipmentExceptionDatalist = [
-  { 'eqName': 'A1一次固化机', 'pl': 'E线', 'content': '开化是专品直', 'creator': '郭娜', 'time': '1997-06-08 06:14:37', 'priority': 1 },
+  { "eqName": "冷却", "pl": "A", "content": "路因同义价带本知生联矿列。", "creator": "马磊", "time": "2021-04-15 22:00:34", "priority": 3 },
-  { 'eqName': 'B1一次冷却机', 'pl': 'B线', 'content': '书记因地观同展土军信', 'creator': '薛洋', 'time': '2006-03-15 10:39:30', 'priority': 2 },
+  { "eqName": "固化", "pl": "B", "content": "将海构组过重开每活原总价着。", "creator": "贺刚", "time": "2021-03-15 06:30:01", "priority": 2 },
-  { 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
+  { "eqName": "固化", "pl": "B", "content": "形管始会回从观且明确意主照根受步究。", "creator": "冯丽", "time": "2020-11-21 07:09:16", "priority": 2 },
-  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
+  { "eqName": "磨边", "pl": "A", "content": "己由九保先造线后还单省于手。", "creator": "梁秀兰", "time": "2020-03-21 08:21:36", "priority": 3 },
-  { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
+  { "eqName": "一镀", "pl": "B", "content": "变西列场展越备线活酸被究他压建院家。", "creator": "卢敏", "time": "2022-10-23 04:45:00", "priority": 2 },
-  { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
+  { "eqName": "钢化", "pl": "A", "content": "解听共将取色照品起族西全日色。", "creator": "方勇", "time": "2020-12-11 06:41:06", "priority": 2 },
-  { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
+  { "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-20 03:36:47", "priority": 2 },
-  { 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
+  { "eqName": "下片", "pl": "A", "content": "厂积各克性型世型我地得圆与时速。", "creator": "姜洋", "time": "2021-11-30 07:56:26", "priority": 3 },
-  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
+  { "eqName": "钢化", "pl": "A", "content": "证法作无群只放科可少头生广水。", "creator": "赖艳", "time": "2022-10-10 12:01:14", "priority": 1 },
-  { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
+  { "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
-  { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
+  { "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
-  { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
+  { "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
-  { 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
+  { "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 21:15:10", "priority": 2 },
-  { 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
+  { "eqName": "一镀", "pl": "A", "content": "位构命利整线两计统被约张以导理。", "creator": "叶娜", "time": "2022-05-05 22:45:13", "priority": 1 },
-  { 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
+  { "eqName": "冷却", "pl": "A", "content": "东改近装商了整标革并该青外育放般体。", "creator": "田磊", "time": "2021-12-01 07:24:59", "priority": 2 },
+  { "eqName": "打孔后清洗机", "pl": "A", "content": "查的分口眼约三委斯该的品通身式子听。", "creator": "邱平", "time": "2020-01-31 17:53:18", "priority": 2 },
+  { "eqName": "下片", "pl": "B", "content": "连程复而前置很不团数行三西较响运。", "creator": "赵艳", "time": "2021-09-20 18:10:32", "priority": 2 },
+  { "eqName": "冷却", "pl": "B", "content": "育进品石完立行按效安标真。", "creator": "江伟", "time": "2022-08-05 17:29:44", "priority": 2 },
+  { "eqName": "钢后清洗机", "pl": "B", "content": "委且到示为位要强等住整县值八。", "creator": "周洋", "time": "2021-01-26 02:49:09", "priority": 3 },
+  { "eqName": "上片", "pl": "A", "content": "报据深广一统南车步约果龙值区识车深。", "creator": "邱超", "time": "2021-12-21 20:41:53", "priority": 1 },
+]
 
 /** 设备异常报警 */
 const LifeRemainComponent = {
@@ -65,22 +71,29 @@ const LifeRemainComponent = {
     injectData: Object
   },
   computed: {
+    remainLeftPercentage() {
+      return this.injectData.remain / 300
+    },
     statusColor() {
       const colors = [
-        'rgba(255,84,76,0.6)', // red < 0
+        'rgba(255,84,76,0.6)', // red < 10%
-        '#FFBD43', // yellow  < 10
+        '#FFBD43', // yellow  < 20%
-        'rgba(142,254,83,0.6)' // green >= 10
+        'rgba(142,254,83,0.6)' // green 
       ]
-      return this.injectData.remain < 0 ? colors[0] : this.injectData.remain < 10 ? colors[1] : colors[2]
+      return this.remainLeftPercentage < 0.1 ? colors[0] : this.remainLeftPercentage < 0.2 ? colors[1] : colors[2]
     }
 
   },
   render: function (h) {
     return h('span', {
       style:
-        { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
+        { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }
+      // { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
     },
-      this.injectData.remain)
+      [
+        h('span', { style: { color: this.remainLeftPercentage < 0.1 ? 'rgba(255,84,76,0.6)' : this.remainLeftPercentage < 0.2 ? '#FFBD43' : '#ffffffee' } }, this.injectData.remain),
+        h('span', { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: this.remainLeftPercentage * 100 + '%', opacity: 0.8, backgroundColor: this.statusColor, } })
+      ])
   }
 }
 
@@ -93,26 +106,36 @@ export const equipmentAlarmProps = [
 ]
 
 export const equipmentAlarmDatalist = [
-  { 'eqName': 'A1预热机', 'eqCode': 'SB501464', 'pl': 'C线', 'content': '使决方不相动', 'priority': 3 },
-  { 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 1 },
-  { 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
-  { 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
-  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
-  { 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
-  { 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
-  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
   {
-    'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
+    "pl": "B", "eqName": "丝印", "eqCode": "B5SP20200109025453", "content": "常下命般里究千么间龙该海战据运更。", "priority": 3
   },
-  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
+  { "pl": "A", "eqName": "下片", "eqCode": "A2UL20210605043851", "content": "而至收选查万众家除候包要意集。", "priority": 2 },
+  { "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200328154356", "content": "石十求四指么放与程到置身技红。", "priority": 1 },
+  { "pl": "B", "eqName": "一镀", "eqCode": "B5FC20220307070115", "content": "即计报做切除听见济共金然维走。", "priority": 2 },
+  { "pl": "B", "eqName": "固化", "eqCode": "B7CO20190927110003", "content": "应其得候解北运样价可强先们速。", "priority": 2 },
   {
-    'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
+    "pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3
   },
-  { 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 2 },
+  { "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 1 },
+  {
-  { 'eqName': 'A钢化炉', 'eqCode': 'SB19064', 'pl': 'D线', 'content': '很这置合它里革民', 'priority': 4 }
+    "pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2
+  },
+  { "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 },
+  {
+    "pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2
+  },
+  { "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 },
+  {
+    "pl": "B", "eqName": "预热", "eqCode": "B1PR20201220183649", "content": "志收一支习于何况支于自原地书飞感。", "priority": 2
+  },
+  { "pl": "A", "eqName": "二镀", "eqCode": "A3SC20220414054819", "content": "义点做产往新以速结工情最六素难强干。", "priority": 2 },
+  { "pl": "A", "eqName": "固化", "eqCode": "A8CO20200704010549", "content": "例强起取南然任都来因山该收次代相。", "priority": 2 },
+  { "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
+  { "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
+  { "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
+  { "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
+  { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
+  { "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
 ]
 
 /** 设备分析 */
@@ -126,41 +149,34 @@ export const OEE_PER_LINE = {
 }
 
 export const equipmentAnalysisData = [
-  { 'name': '冷端下片单元', 'oee': '0.14', 'mtbr': '0.60', 'mtbf': '0.32' },
+  { 'name': '冷端下片单元', "oee": 0.62, "mtbr": 25, "mtbf": 54875 },
-  { 'name': '磨边单元', 'oee': '0.51', 'mtbr': '0.85', 'mtbf': '0.22' },
+  { 'name': '磨边单元', "oee": 0.789, "mtbr": 25, "mtbf": 61323 },
-  { 'name': '丝印', 'oee': '0.75', 'mtbr': '0.92', 'mtbf': '0.93' },
+  { 'name': '丝印', "oee": 0.83, "mtbr": 19, "mtbf": 89653 },
-  { 'name': '上片机器人', 'oee': '0.89', 'mtbr': '0.25', 'mtbf': '0.26' },
+  { 'name': '上片机器人', "oee": 0.66, "mtbr": 30, "mtbf": 71839 },
-  { 'name': '激光打孔', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
+  { 'name': '激光打孔', "oee": 0.71, "mtbr": 11, "mtbf": 39362 },
-  { 'name': '镀膜', 'oee': '0.55', 'mtbr': '0.85', 'mtbf': '0.65' }
+  { 'name': '镀膜', "oee": 0.686, "mtbr": 25, "mtbf": 62901 },
 ]
 
 export const sparepartsProps = [
-  { prop: 'name', label: '部件名称', align: 'center' },
+  { prop: 'name', label: '部件名称', align: 'center', 'min-width': 100 },
-  { prop: 'eq', label: '所属设备', align: 'center' },
+  { prop: 'eq', label: '所属设备', align: 'center', 'min-width': 60 },
-  { prop: 'pl', label: '所属产线', align: 'center' },
+  { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 60 },
-  { prop: 'update_time', label: '更换时间', align: 'center' },
+  { prop: 'update_time', label: '更换时间', align: 'center', 'min-width': 100 },
-  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
+  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent, 'min-width': 100 },
-  { prop: 'stock', label: '备件库存量', align: 'center' },
+  { prop: 'stock', label: '备件库存量', align: 'center', 'min-width': 50 },
-  { prop: 'location', label: '库位', align: 'center' }
+  { prop: 'location', label: '库位', align: 'center', 'min-width': 100 },
 ]
 
 export const sparepartsDatalist = [
-  { 'name': '激光打孔', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
+  { "pl": "B", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-09-12 13:05:54", "remain": 104, "stock": 2, "location": "备件库-A-3" },
-  { 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' },
+  { "pl": "A", "name": "镀膜液、异丙醇", "eq": "镀膜机", "update_time": "2022-09-24 08:34:36", "remain": 152, "stock": 10, "location": "备件库-D-1" },
-  { 'name': '激光打孔', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' },
+  { "pl": "B", "name": "磨轮", "eq": "磨边机", "update_time": "2022-10-09 09:15:08", "remain": 169, "stock": 9, "location": "备件库-A-3" },
-  { 'name': '磨边单元', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2018-07-18 13:15:01', 'remain': 86, 'stock': 2342, 'location': '库位83' },
+  { "pl": "B", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-02 12:26:07", "remain": 33, "stock": 12, "location": "备件库-C-3" },
-  { 'name': '上片机器人', 'eq': 'A2一次固化机', 'pl': 'E线', 'update_time': '1998-06-11 09:01:10', 'remain': 84, 'stock': 4359, 'location': '库位12' },
+  { "pl": "A", "name": "磨轮", "eq": "磨边机", "update_time": "2022-11-14 04:43:21", "remain": 20, "stock": 11, "location": "备件库-E-9" },
-  { 'name': '丝印', 'eq': 'A1一次固化机', 'pl': 'E线', 'update_time': '2016-02-13 16:20:01', 'remain': -23, 'stock': 888, 'location': '库位69' },
+  { "pl": "A", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-25 15:19:57", "remain": 192, "stock": 8, "location": "备件库-D-9" },
-  { 'name': '激光打孔', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' },
+  { "pl": "A", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-10-31 03:21:29", "remain": 96, "stock": 19, "location": "备件库-E-10" },
-  { 'name': '丝印', 'eq': 'A1一次固化机', 'update_time': '1980-01-17 04:29:56', 'remain': 73, 'stock': 305, 'location': '库位68' },
+  { "pl": "B", "name": "网板", "eq": "丝印机", "update_time": "2022-09-01 15:49:08", "remain": 127, "stock": 8, "location": "备件库-E-10" },
-  { 'name': '激光打孔', 'eq': 'A2一次冷却机', 'pl': 'B线', 'update_time': '2014-02-25 17:19:43', 'remain': 36, 'stock': 199, 'location': '库位86' },
+  { "pl": "A", "name": "网板", "eq": "丝印机", "update_time": "2022-09-25 04:47:04", "remain": 83, "stock": 8, "location": "备件库-C-6" },
-  { 'name': '上片机器人', 'eq': 'A2一次冷却机', 'pl': 'C线', 'update_time': '2017-01-23 17:01:29', 'remain': -3, 'stock': 146, 'location': '库位79' },
-  { 'name': '激光打孔', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' },
-  { 'name': '丝印', 'eq': 'A1一次固化机', 'update_time': '1980-01-17 04:29:56', 'remain': 73, 'stock': 305, 'location': '库位68' },
-  { 'name': '激光打孔', 'eq': 'A2一次冷却机', 'pl': 'B线', 'update_time': '2014-02-25 17:19:43', 'remain': 36, 'stock': 199, 'location': '库位86' },
-  { 'name': '上片机器人', 'eq': 'A2一次冷却机', 'pl': 'C线', 'update_time': '2017-01-23 17:01:29', 'remain': -3, 'stock': 146, 'location': '库位79' },
-  { 'name': '镀膜', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2013-02-19 01:29:19', 'remain': 37, 'stock': 6977, 'location': '库位85' },
-  { 'name': '激光打孔', 'eq': 'A1预热机', 'pl': 'B线', 'update_time': '1972-04-26 06:54:43', 'remain': -82, 'stock': 5039, 'location': '库位38' }
 ]
 
 import { default as blue } from './blue.png'
@@ -198,24 +214,68 @@ const StatusComponent = {
   },
   render: function (h) {
     return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [
-      h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%',  marginRight: 'calc(8px * var(--beilv))' } }, ''),
+      h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(4px * var(--beilv))' } }, ''),
       h('span', this.statusText)
     ])
   }
 }
 
-export const rightSideProps = [
+// 突发性维护
+export const suddenMaintainProps = [
   { prop: 'orderId', label: '工单编号' },
-  { prop: 'pl', label: '产线名称' },
+  { prop: 'time', label: '时间' },
   { prop: 'eq', label: '设备名称' },
   { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
-  { prop: 'charger', label: '执行人' },
+  { prop: 'team', label: '班组' },
   { prop: 'duration', label: '时长' }
 ]
 
-export const rightSideDatalist = [
+// 计划内保养
-  { 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 1, 'charger': '任洋', 'duration': 5 },
+export const inPlanMaintainProps = [
-  { 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 1, 'charger': '廖丽', 'duration': 6 },
+  { prop: 'orderId', label: '工单编号' },
-  { 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 }
+  { prop: 'pl', label: '产线名称' },
-  // { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'duration', label: '时长' }
 ]
+
+// 防御性维护
+export const defenceMaintainProps = [
+  { prop: 'orderId', label: '工单编号' },
+  { prop: 'eq', label: '设备名称' },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'duration', label: '时长' }
+]
+
+// 点检工单
+export const wwwOrderProps = [
+  { prop: 'orderId', label: '工单编号' },
+  { prop: 'pl', label: '产线名称' },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'time', label: '时间' }
+]
+
+export const rightSideDatalist = [
+  { "orderId": "WOD20200807030135", "time": "2021-02-12 14:08:04", "eq": "磨边", "status": 3, "team": "白班", "duration": "26min" },
+  { "orderId": "WOD20200413103728", "time": "2020-11-26 20:11:39", "eq": "固化", "status": 1, "team": "夜班", "duration": "24min" },
+  { "orderId": "WOD20210217143647", "time": "2021-08-15 18:48:40", "eq": "预热", "status": 2, "team": "白班", "duration": "27min" },
+]
+export const rightSideDatalist2 = [
+  { "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
+  { "orderId": "WOD20211026022742", "pl": "A", "status": 2, "team": "夜班", "duration": "28min" },
+  { "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
+]
+export const rightSideDatalist3 = [
+  { "orderId": "WOD20210829073921", "eq": "钢后清洗机", "status": 2, "team": "白班", "duration": "29min" },
+  { "orderId": "WOD20220429180823", "eq": "丝印", "status": 2, "team": "夜班", "duration": "26min" },
+  { "orderId": "WOD20220915050149", "eq": "磨边后清洗机", "status": 3, "team": "白班", "duration": "21min" },
+]
+export const rightSideDatalist4 = [
+  { "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2021-12-17 13:31:24" },
+  { "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-06-27 10:52:19" },
+  { "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
+]
+
+

src/views/QualityManager/HomePage.vue

@@ -4,7 +4,7 @@
     <section class="techy-body">
       <div class="part-1">
         <div>
-          <techy-container :title="'质量异常上报'" icon="质量1">
+          <techy-container :title="'离线异常上报'" icon="质量1">
             <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
@@ -18,7 +18,7 @@
         </div>
 
         <div class=" fix-table-exception-alert">
-          <techy-container :title="'质量异常报警'" icon="质量2">
+          <techy-container :title="'在线异常上报'" icon="质量2">
             <div class="table-wrapper">
               <techy-table
                 :page="1"
@@ -38,67 +38,116 @@
             <!-- 第一行 -->
             <div class="quality-analysis__body__row-1">
               <!-- 第一列 -->
-              <div class="grow-8 flex gap-16">
+              <div class="flex gap-16">
-                <div class="grow">
+                <div class="grow" style="max-width: 24vw;">
-                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                  <techy-box class="" style="padding: calc(8px * var(--beilv));">
-                    <techy-analysis-header>缺陷分类分析</techy-analysis-header>
+                    <techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
-                    <new-bar
+                    <div
-                      :xlabel-font-size="10"
+                      class="absolute top-0 left-0"
-                      :xlabel-rotate="30"
+                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-                      :name-list="[
+                    >
-                        '擦划伤1',
+                      <new-bar
-                        '擦划伤2',
+                        chart-name="realtime-cost-production"
-                        '擦划伤3',
+                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
-                        '擦划伤4',
+                        :data-list="[
-                        '擦划伤5',
+                          {
-                        '擦划伤6',
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                        '擦划伤7',
+                            bottomColor: '#49FBD6',
-                        '擦划伤8',
+                            name: '产线A',
-                        '擦划伤9',
+                            data: [163, 184, 110, 22, 96, 74]
-                        '擦划伤0',
+                          },
-                        '擦划伤11',
+                          {
-                        '擦划伤12'
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                      ]"
+                            bottomColor: '#31A2FF',
-                      chart-name="fault-category"
+                            name: '产线B',
-                      :data-list="[
+                            data: [162, 172, 122, 15, 82, 74]
-                        {
+                          }
-                          topColor: 'rgba(59, 76, 118, 0.2)',
+                        ]"
-                          bottomColor: '#31A2FF',
+                      />
-                          name: '库存',
+                    </div>
-                          data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
-                        }
-                      ]"
-                    />
                   </techy-box>
                 </div>
-                <div class="grow">
+                <div class="grow" style="max-width: 24vw;">
-                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                  <techy-box class="" style="padding: calc(8px * var(--beilv));">
-                    <techy-analysis-header>工序缺陷分析</techy-analysis-header>
+                    <techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
-                    <new-bar
+                    <div
-                      chart-name="process-fault"
+                      class="absolute top-0 left-0"
-                      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
+                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-                      :data-list="[
+                    >
-                        {
+                      <new-bar
-                          topColor: 'rgba(59, 76, 118, 0.2)',
+                        chart-name="realtime-cost-production"
-                          bottomColor: '#49FBD6',
+                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
-                          name: '库存',
+                        unit-name="单位: 千片"
-                          data: [64, 91, 55, 65, 37, 77]
+                        :data-list="[
-                        }
+                          {
-                      ]"
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                    />
+                            bottomColor: '#49FBD6',
+                            name: '产线A',
+                            data: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
+                          },
+                          {
+                            topColor: 'rgba(59, 76, 118, 0.2)',
+                            bottomColor: '#31A2FF',
+                            name: '产线B',
+                            data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
+                          }
+                        ]"
+                      />
+                    </div>
                   </techy-box>
                 </div>
               </div>
 
               <!-- 第二列 -->
-              <div class="grow-6 flex gap-16">
+              <div class="grow flex gap-16">
                 <div class="width-222">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header>产线缺陷分析</techy-analysis-header>
+                    <techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
-                    <pl-fault-analysis-pie-chart />
+                    <div style="position: absolute;  top: 0; left:0; width: 100%; height: 100%;">
+                      <span
+                        style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
+                      >
+                        单位: 千片
+                      </span>
+                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
+                    </div>
+                    <div class="pl-select">
+                      <span
+                        :class="{ 'pl-select__active': plMode === 'a' }"
+                        @click="
+                          plMode = 'a'
+                          chosenDatalist = quexianDatalist[0]
+                        "
+                      >
+                        A
+                      </span>
+                      <span
+                        :class="{ 'pl-select__active': plMode === 'b' }"
+                        @click="
+                          plMode = 'b'
+                          chosenDatalist = quexianDatalist[1]
+                        "
+                      >
+                        B
+                      </span>
+                    </div>
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span
-                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                        :class="{ 'date-select__active': dateMode === 'day' }"
+                        @click="
+                          dateMode = 'day'
+                          chosenDatalist = quexianDatalist[2]
+                        "
+                      >
+                        日
+                      </span>
+                      <span
+                        :class="{ 'date-select__active': dateMode === 'month' }"
+                        @click="
+                          dateMode = 'month'
+                          chosenDatalist = quexianDatalist[3]
+                        "
+                      >
                         月
                       </span>
                     </div>
@@ -107,10 +156,26 @@
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
-                    <new-line-stack />
+                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                      <new-line-stack :data-update-token="dataUpdateToken" />
+                    </div>
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
+                      <span
-                      <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
+                        :class="{ 'date-select__active': dateMode2 === 'day' }"
+                        @click="
+                          dateMode2 = 'day'
+                          dataUpdateToken = '' + Math.random()
+                        "
+                      >
+                        日
+                      </span>
+                      <span
+                        :class="{ 'date-select__active': dateMode2 === 'month' }"
+                        @click="
+                          dateMode2 = 'month'
+                          dataUpdateToken = '' + Math.random()
+                        "
+                      >
                         月
                       </span>
                     </div>
@@ -123,19 +188,7 @@
             <!-- 第二行 -->
             <div class="quality-analysis__body__row-2">
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线A工序质量分析(日)</techy-analysis-header>
-                <div class="grow grid gap-16-8 column-2 row-5">
-                  <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
-                    :key="index"
-                    :name="item.name"
-                    :amount="item.amount"
-                    color="green"
-                  />
-                </div>
-              </techy-box>
-              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
                     v-for="(item, index) in qualityAnalysisDatalist"
@@ -147,10 +200,22 @@
                 </div>
               </techy-box>
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线A工序质量分析(月)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
+                    v-for="(item, index) in qualityAnalysisDatalistMonth"
+                    :key="index"
+                    :name="item.name"
+                    :amount="item.amount"
+                    color="blue"
+                  />
+                </div>
+              </techy-box>
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
+                <techy-analysis-header>产线B工序质量分析(日)</techy-analysis-header>
+                <div class="grow grid gap-16-8 column-2 row-5">
+                  <techy-analysis-bar
+                    v-for="(item, index) in qualityAnalysisDatalistB"
                     :key="index"
                     :name="item.name"
                     :amount="item.amount"
@@ -159,14 +224,14 @@
                 </div>
               </techy-box>
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线B工序质量分析(月)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
+                    v-for="(item, index) in qualityAnalysisDatalistMonthB"
                     :key="index"
                     :name="item.name"
                     :amount="item.amount"
-                    color="pink"
+                    color="orange"
                   />
                 </div>
               </techy-box>
@@ -209,7 +274,44 @@ export default {
     NewLineStack
   },
   data() {
+    const quexianDatalist = [
+      [
+        { value: 4.34, name: '破片' },
+        { value: 3.4, name: '崩边' },
+        { value: 4.1, name: '脏污' },
+        { value: 2.4, name: '划擦伤' },
+        { value: 0.23, name: '崩孔' },
+        { value: 2.14, name: '其他' }
+      ],
+      [
+        { value: 4.17, name: '破片' },
+        { value: 3.6, name: '崩边' },
+        { value: 4, name: '脏污' },
+        { value: 2.2, name: '划擦伤' },
+        { value: 0.2, name: '崩孔' },
+        { value: 1.9, name: '其他' }
+      ],
+      [
+        { value: 3.33, name: '破片' },
+        { value: 3, name: '崩边' },
+        { value: 4.3, name: '脏污' },
+        { value: 2.1, name: '划擦伤' },
+        { value: 1, name: '崩孔' },
+        { value: 1.8, name: '其他' }
+      ],
+      [
+        { value: 2.7, name: '破片' },
+        { value: 1.56, name: '崩边' },
+        { value: 2.3, name: '脏污' },
+        { value: 1.2, name: '划擦伤' },
+        { value: 0.23, name: '崩孔' },
+        { value: 2, name: '其他' }
+      ]
+    ]
+
     return {
+      dataUpdateToken: 'xx-token',
+      plMode: 'a',
       dateMode: 'month',
       dateMode2: 'month',
       qualityTableProps,
@@ -217,17 +319,55 @@ export default {
       qualityExceptionDatalist,
       qualityExceptionTableProps,
       qualityAnalysisDatalist: [
-        { name: '热端', amount: 20233 },
+        { name: '上片', amount: 22 },
-        { name: '丝印', amount: 20233328 },
+        { name: '钢化', amount: 2 },
-        { name: '原片', amount: 20 },
+        { name: '磨边', amount: 221 },
-        { name: '钢化', amount: 2000 },
+        { name: '下片', amount: 27 },
-        { name: '上片磨边', amount: 20 },
+        { name: '丝印', amount: 93 },
-        { name: '下片铺纸', amount: 202423 },
+        { name: '包装', amount: 3 },
-        { name: '镀膜', amount: 20 },
+        { name: '打孔', amount: 31 },
-        { name: '包装', amount: 20 },
+        { name: '清洗', amount: 2 },
-        { name: '清晰', amount: 20 },
+        { name: '镀膜', amount: 95 },
-        { name: '物流仓储', amount: 233920 }
+        { name: '其他', amount: 171 }
-      ]
+      ],
+      qualityAnalysisDatalistMonth: [
+        { name: '上片', amount: 665 },
+        { name: '钢化', amount: 56 },
+        { name: '磨边', amount: 6541 },
+        { name: '下片', amount: 820 },
+        { name: '丝印', amount: 2790 },
+        { name: '包装', amount: 83 },
+        { name: '打孔', amount: 964 },
+        { name: '清洗', amount: 61 },
+        { name: '镀膜', amount: 2470 },
+        { name: '其他', amount: 4959 }
+      ],
+      qualityAnalysisDatalistB: [
+        { name: '上片', amount: 16 },
+        { name: '钢化', amount: 4 },
+        { name: '磨边', amount: 201 },
+        { name: '下片', amount: 21 },
+        { name: '丝印', amount: 100 },
+        { name: '包装', amount: 1 },
+        { name: '打孔', amount: 27 },
+        { name: '清洗', amount: 2 },
+        { name: '镀膜', amount: 93 },
+        { name: '其他', amount: 163 }
+      ],
+      qualityAnalysisDatalistMonthB: [
+        { name: '上片', amount: 698 },
+        { name: '钢化', amount: 49 },
+        { name: '磨边', amount: 6321 },
+        { name: '下片', amount: 799 },
+        { name: '丝印', amount: 2782 },
+        { name: '包装', amount: 72 },
+        { name: '打孔', amount: 992 },
+        { name: '清洗', amount: 63 },
+        { name: '镀膜', amount: 2510 },
+        { name: '其他', amount: 4920 }
+      ],
+      quexianDatalist,
+      chosenDatalist: quexianDatalist[0]
     }
   },
   computed: {
@@ -349,7 +489,8 @@ export default {
 
 .quality-analysis__body__row-1 {
   height: calc(216px * var(--beilv));
-  overflow: hidden;
+  /* overflow: hidden; */
+  overflow: initial;
   display: flex;
   gap: calc(16px * var(--beilv));
 }
@@ -409,16 +550,23 @@ export default {
   gap: calc(16px * var(--beilv));
 }
 
+.pl-select,
 .date-select {
   position: absolute;
   top: calc(16px * var(--beilv));
-  right: calc(10px * var(--beilv));
+  right: calc(22px * var(--beilv));
   border-radius: calc(2px * var(--beilv));
   overflow: hidden;
   display: flex;
   cursor: pointer;
 }
 
+.pl-select {
+  right: unset;
+  left: calc(10px * var(--beilv));
+}
+
+.pl-select span,
 .date-select span {
   display: inline-block;
   width: calc(40px * var(--beilv));
@@ -429,6 +577,7 @@ export default {
   background-color: #31878c94;
 }
 
+.pl-select span.pl-select__active,
 .date-select span.date-select__active {
   background-color: #42bbb7;
 }

src/views/QualityManager/components/TechyAnalysisHeader.vue

@@ -1,110 +1,237 @@
 <template>
   <div class="techy-analysis-header">
-    <span class="top-icon">
+    <template v-if="type === 'special'">
-      <svg
+      <div
-        width="100%"
+        style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
-        height="100%"
-        viewBox="0 0 56 13"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
       >
-        <title>left</title>
+        <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
-        <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+
-          <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
+        <div style="flex: 1; white-space: nowrap; overflow: hidden;">
-            <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+          <span class="top-icon">
-              <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+            <svg
-                <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+              width="100%"
-                  <g
+              height="100%"
-                    id="编组-2备份"
+              viewBox="0 0 56 13"
-                    transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
+              version="1.1"
-                  >
+              xmlns="http://www.w3.org/2000/svg"
-                    <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+              xmlns:xlink="http://www.w3.org/1999/xlink"
-                    <polygon
+            >
-                      id="路径-11备份"
+              <title>left</title>
-                      opacity="0.8"
+              <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                      points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
-                    ></polygon>
+                  <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
-                    <polygon
+                    <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
-                      id="路径-11备份-3"
+                      <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
-                      opacity="0.4"
+                        <g
-                      points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                          id="编组-2备份"
-                    ></polygon>
+                          transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
-                    <polygon
+                        >
-                      id="路径-11备份-2"
+                          <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
-                      opacity="0.601434"
+                          <polygon
-                      points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                            id="路径-11备份"
-                    ></polygon>
+                            opacity="0.8"
-                    <polygon
+                            points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
-                      id="路径-11备份-4"
+                          ></polygon>
-                      opacity="0.201434"
+                          <polygon
-                      points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                            id="路径-11备份-3"
-                    ></polygon>
+                            opacity="0.4"
+                            points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                          ></polygon>
+                          <polygon
+                            id="路径-11备份-2"
+                            opacity="0.601434"
+                            points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                          ></polygon>
+                          <polygon
+                            id="路径-11备份-4"
+                            opacity="0.201434"
+                            points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                          ></polygon>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </span>
+          <span class="techy-analysis-header__title">
+            <slot />
+          </span>
+          <span class="top-icon">
+            <svg
+              width="100%"
+              height="100%"
+              viewBox="0 0 56 13"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>right</title>
+              <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
+                  <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                    <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                      <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                        <g
+                          id="编组-2备份-2"
+                          transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
+                        >
+                          <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                          <polygon
+                            id="路径-11备份"
+                            opacity="0.8"
+                            points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                          ></polygon>
+                          <polygon
+                            id="路径-11备份-3"
+                            opacity="0.4"
+                            points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                          ></polygon>
+                          <polygon
+                            id="路径-11备份-2"
+                            opacity="0.601434"
+                            points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                          ></polygon>
+                          <polygon
+                            id="路径-11备份-4"
+                            opacity="0.201434"
+                            points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                          ></polygon>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </span>
+        </div>
+
+        <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
+          <div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
+          <div class="legend-item plb">产线B</div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <span v-if="showTopIcon" class="top-icon">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 56 13"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>left</title>
+          <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
+              <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                  <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                    <g
+                      id="编组-2备份"
+                      transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
+                    >
+                      <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                      <polygon
+                        id="路径-11备份"
+                        opacity="0.8"
+                        points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                      ></polygon>
+                      <polygon
+                        id="路径-11备份-3"
+                        opacity="0.4"
+                        points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                      ></polygon>
+                      <polygon
+                        id="路径-11备份-2"
+                        opacity="0.601434"
+                        points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                      ></polygon>
+                      <polygon
+                        id="路径-11备份-4"
+                        opacity="0.201434"
+                        points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                      ></polygon>
+                    </g>
                   </g>
                 </g>
               </g>
             </g>
           </g>
-        </g>
+        </svg>
-      </svg>
+      </span>
-    </span>
+      <span class="techy-analysis-header__title">
-    <span class="techy-analysis-header__title">
+        <slot />
-      <slot />
+      </span>
-    </span>
+      <span v-if="showTopIcon" class="top-icon">
-    <span class="top-icon">
+        <svg
-      <svg
+          width="100%"
-        width="100%"
+          height="100%"
-        height="100%"
+          viewBox="0 0 56 13"
-        viewBox="0 0 56 13"
+          version="1.1"
-        version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
-        xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
-      >
+          <title>right</title>
-        <title>right</title>
+          <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
-          <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
+              <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
-            <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
-              <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                  <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
-                <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                    <g
-                  <g
+                      id="编组-2备份-2"
-                    id="编组-2备份-2"
+                      transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
-                    transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
+                    >
-                  >
+                      <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
-                    <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                      <polygon
-                    <polygon
+                        id="路径-11备份"
-                      id="路径-11备份"
+                        opacity="0.8"
-                      opacity="0.8"
+                        points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
-                      points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                      ></polygon>
-                    ></polygon>
+                      <polygon
-                    <polygon
+                        id="路径-11备份-3"
-                      id="路径-11备份-3"
+                        opacity="0.4"
-                      opacity="0.4"
+                        points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
-                      points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                      ></polygon>
-                    ></polygon>
+                      <polygon
-                    <polygon
+                        id="路径-11备份-2"
-                      id="路径-11备份-2"
+                        opacity="0.601434"
-                      opacity="0.601434"
+                        points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
-                      points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                      ></polygon>
-                    ></polygon>
+                      <polygon
-                    <polygon
+                        id="路径-11备份-4"
-                      id="路径-11备份-4"
+                        opacity="0.201434"
-                      opacity="0.201434"
+                        points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
-                      points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                      ></polygon>
-                    ></polygon>
+                    </g>
                   </g>
                 </g>
               </g>
             </g>
           </g>
-        </g>
+        </svg>
-      </svg>
+      </span>
-    </span>
+    </template>
   </div>
 </template>
 
 <script>
 export default {
   name: 'TechyAnalysisHeader',
+  props: {
+    type: {
+      type: String,
+      default: 'dafault-type'
+    },
+    showTopIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {}
   }
@@ -126,6 +253,30 @@ export default {
 .top-icon {
   display: inline-block;
   width: calc(56px * var(--beilv));
-  height: calc(13px * var(--beilv));
+  height: calc(12px * var(--beilv));
+  margin-bottom: calc(2px * var(--beilv));
+}
+
+.legend-item {
+  font-size: calc(10px * var(--beilv));
+  line-height: 1.5;
+  color: #dff1fe;
+  display: inline-block;
+}
+
+.legend-item::before {
+  content: '';
+  display: inline-block;
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #fffc;
+  margin-right: calc(8px * var(--beilv));
+}
+
+.pla::before {
+  background: linear-gradient(to top, #49fbd6, transparent);
+}
+.plb::before {
+  background: linear-gradient(to top, #49b2ff, transparent);
 }
 </style>

src/views/QualityManager/components/TechyTable.vue

@@ -200,13 +200,13 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e;
+  /* background-color: #0e203e; */
-  /* background-color: #0e203e90; */
+  background-color: #0e203ecc;
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #203760;
+  /* background-color: #203760; */
-  /* background-color: #20376090; */
+  background-color: #213961cc;
 }
 </style>

src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue

@@ -13,6 +13,10 @@ export default {
     id: {
       type: String,
       default: 'default-fault-analysis-id'
+    },
+    dataList: {
+      type: Array,
+      required: true
     }
   },
   data() {
@@ -37,10 +41,23 @@ export default {
         y: 0,
         x2: 1,
         y2: 1,
+        colorStops: [
+          { color: '#DDB112', offset: 0 }, // 黄
+          { color: '#DDB112b0', offset: 0.2 },
+          { color: '#FFFFFF00', offset: 1 }
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 1,
+        y: 1,
+        x2: 0,
+        y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
-          { color: '#DDB11200', offset: 0.1 },
+          { color: '#49FBD600', offset: 0.1 },
-          { color: '#DDB112', offset: 1 } // 黄
+          { color: '#74DC85', offset: 1 } // 浅绿
         ],
         global: false
       },
@@ -59,9 +76,9 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
         y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
@@ -73,8 +90,8 @@ export default {
       {
         type: 'linear',
         x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
         y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
@@ -85,47 +102,39 @@ export default {
       }
     ]
 
-    const demoData = [
-      { value: 55, name: 'A' },
-      { value: 33, name: 'B' },
-      { value: 22, name: 'C' },
-      { value: 11, name: 'D' },
-      { value: 32, name: 'E' }
-    ]
-
     return {
       chart: null,
       // default configs
       configs: {
         title: {
           textAlign: 'center',
-          left: '63%',
+          textVerticalAlign: 'middle',
-          top: '35%',
+          left: '69%',
-          text: '33039',
+          top: '46%',
+          text: '',
           textStyle: {
             color: '#fff',
             fontSize: 16,
             fontWeight: 'normal'
           },
-          itemGap: 2,
+          itemGap: 5,
-          subtext: '总数',
+          subtext: '总数/片',
           subtextStyle: {
             color: '#fff',
-            fontSize: 12,
+            fontSize: 12
-            fontWeight: 'lighter'
           }
         },
         legend: {
-          top: 0,
+          top: '12%',
           bottom: 0,
-          left: -10,
+          left: 0,
           orient: 'vertical',
           icon: 'none',
-          itemGap: 5,
+          itemGap: 8,
           itemWidth: 10,
-          formatter: function(name) {
+          // 在下面动态设置
-            // test data - dynamic
+          formatter: name => {
-            const testData = demoData
+            const testData = this.dataList
 
             let pieLegendVale = {}
             testData.filter((item, index) => {
@@ -133,7 +142,7 @@ export default {
                 pieLegendVale = item
               }
             })
-            const color = ['c', 'd', 'e', 'f', 'g']
+            const color = ['c', 'd', 'h', 'e', 'f', 'g']
             const arr = [
               '{' + color[testData.findIndex(item => item.name === name)] + '|}',
               '{b|' + pieLegendVale.name + '}',
@@ -146,58 +155,51 @@ export default {
               a: {
                 fontSize: 10,
                 color: 'rgba(255, 255, 255, 0.7)',
-                lineHeight: 16
+                lineHeight: 16,
+                width: 48,
+                align: 'left'
               },
               b: {
-                // verticalAlign: 'top',
+                width: 40,
-                // align: 'center',
+                align: 'left',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255)'
               },
               c: {
-                // verticalAlign: 'top',
-                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#FB418C'
-                // backgroundColor: '#1A99FF'
               },
               d: {
-                // verticalAlign: 'top',
-                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#DDB112'
-                // backgroundColor: '#A691FF'
+              },
+              h: {
+                width: 10,
+                borderRadius: 5,
+                height: 10,
+                backgroundColor: '#74DC85'
               },
               e: {
-                // verticalAlign: 'top',
-                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#1A99FF'
-                // backgroundColor: '#FB418C'
               },
               f: {
-                // verticalAlign: 'top',
-                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#A691FF'
-                // backgroundColor: '#49FBD6'
               },
               g: {
-                // verticalAlign: 'top',
-                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#49FBD6'
-                // backgroundColor: '#DDB112'
               }
             }
           }
@@ -207,12 +209,12 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['65%', '48%'],
+            center: ['70%', '56%'],
-            radius: ['60%', '85%'],
+            radius: ['45%', '65%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
-                const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
+                const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
                 return `{${colorMap[params.dataIndex]}|${params.percent} %}`
               },
               rich: {
@@ -220,7 +222,8 @@ export default {
                 second: { color: '#DDB112', fontSize: 8 },
                 third: { color: '#1A99FF', fontSize: 8 },
                 fourth: { color: '#A691FF', fontSize: 8 },
-                fifth: { color: '#49FBD6', fontSize: 8 }
+                fifth: { color: '#49FBD6', fontSize: 8 },
+                sixth: { color: '#74DC85', fontSize: 8 }
               }
             },
             labelLine: {
@@ -234,7 +237,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -247,19 +250,28 @@ export default {
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 }
 
                 totalRate += percent
                 return colorGradient
               }
             },
-            data: demoData
+            data: this.dataList
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataList: function(val) {
+      if (val && Array.isArray(val) && val.length) {
+        this.applyChartOption(val)
+      }
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', () => {
       if (this.chart) {
@@ -284,55 +296,61 @@ export default {
       const beilv = document.documentElement.style.getPropertyValue('--beilv')
       return beilv * baseSize
     },
-    // calcRate(baseRate) {
+
-    //   const beilv = document.documentElement.style.getPropertyValue('--beilv')
+    applyChartOption(datalist) {
-    //   return baseRate * beilv
-    // },
-    applyChartOption() {
-      const fs1 = this.calcFontsize(1 /** px*/)
-      const fs3 = this.calcFontsize(3 /** px*/)
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)
-      const fs14 = this.calcFontsize(14 /** px*/)
+      const fs12 = this.calcFontsize(12 /** px*/)
-      const fs16 = this.calcFontsize(16 /** px*/)
+      const fs13 = this.calcFontsize(13 /** px*/)
-      const rate10 = this.calcFontsize(10 /** % */)
+      const fs18 = this.calcFontsize(18 /** px*/)
-      const rate3 = this.calcFontsize(3 /** % */)
+      const fs20 = this.calcFontsize(20 /** px*/)
+      const legendTextFixWidth = this.calcFontsize(56 /** px*/)
+      const legnedTop = this.calcFontsize(64 /** px*/)
+      const legendTopRate = this.calcFontsize(30 /** % */)
 
-      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
-      this.configs.title.subtextStyle.fontSize = fs10
+      this.configs.title.textStyle.fontSize = fs20
+      this.configs.title.subtextStyle.fontSize = fs13
 
-      this.configs.legend.top = rate10 + '%'
+      // this.configs.legend.top = legendTopRate + '%'
-      this.configs.legend.left = rate3 + '%'
+      this.configs.legend.top = legnedTop
-      this.configs.legend.itemGap = fs5
+      this.configs.legend.left = 0 + '%'
-      this.configs.legend.itemWidth = fs10
+      this.configs.legend.itemGap = fs8
+      this.configs.legend.itemWidth = fs8
 
-      this.configs.legend.textStyle.rich.a.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.fontSize = fs12
-      this.configs.legend.textStyle.rich.a.lineHeight = fs10
+      this.configs.legend.textStyle.rich.a.lineHeight = fs12
-      this.configs.legend.textStyle.rich.b.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.width = legendTextFixWidth
+      this.configs.legend.textStyle.rich.b.fontSize = fs12
+      this.configs.legend.textStyle.rich.b.width = legendTextFixWidth
       // this.configs.legend.textStyle.rich.b.lineHeight = fs16
-      this.configs.legend.textStyle.rich.c.width = fs10
+      this.configs.legend.textStyle.rich.c.width = fs8
-      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.height = fs8
       this.configs.legend.textStyle.rich.c.borderRadius = fs5
-      this.configs.legend.textStyle.rich.d.width = fs10
+      this.configs.legend.textStyle.rich.d.width = fs8
-      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.height = fs8
       this.configs.legend.textStyle.rich.d.borderRadius = fs5
-      this.configs.legend.textStyle.rich.e.width = fs10
+      this.configs.legend.textStyle.rich.e.width = fs8
-      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.height = fs8
       this.configs.legend.textStyle.rich.e.borderRadius = fs5
-      this.configs.legend.textStyle.rich.f.width = fs10
+      this.configs.legend.textStyle.rich.f.width = fs8
-      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.height = fs8
       this.configs.legend.textStyle.rich.f.borderRadius = fs5
-      this.configs.legend.textStyle.rich.g.width = fs10
+      this.configs.legend.textStyle.rich.g.width = fs8
-      this.configs.legend.textStyle.rich.g.height = fs10
+      this.configs.legend.textStyle.rich.g.height = fs8
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
+      this.configs.legend.textStyle.rich.h.width = fs8
+      this.configs.legend.textStyle.rich.h.height = fs8
+      this.configs.legend.textStyle.rich.h.borderRadius = fs5
 
-      this.configs.series[0].label.rich.first.fontSize = fs10
+      this.configs.series[0].label.rich.first.fontSize = fs12
-      this.configs.series[0].label.rich.second.fontSize = fs10
+      this.configs.series[0].label.rich.second.fontSize = fs12
-      this.configs.series[0].label.rich.third.fontSize = fs10
+      this.configs.series[0].label.rich.third.fontSize = fs12
-      this.configs.series[0].label.rich.fourth.fontSize = fs10
+      this.configs.series[0].label.rich.fourth.fontSize = fs12
-      this.configs.series[0].label.rich.fifth.fontSize = fs10
+      this.configs.series[0].label.rich.fifth.fontSize = fs12
-
+      this.configs.series[0].label.rich.sixth.fontSize = fs12
+      if (datalist) this.configs.series[0].data = datalist
       this.chart.setOption(this.configs)
     }
   }
@@ -341,9 +359,13 @@ export default {
 
 <style scoped>
 .chartContainer {
-  height: calc(100% - (36px * var(--beilv)));
+  /* height: calc(100% - (36px * var(--beilv))); */
-  position: relative;
+  /* position: relative; */
+  /* position: absolute;
+  top: 0;
+  left: 0; */
   width: 100%;
+  height: 100%;
 }
 
 .chartContainer > div {

src/views/QualityManager/components/charts/newBar.vue

@@ -3,7 +3,7 @@
     ref="chartContainer"
     class="chartContainer"
     :class="bindClass"
-    style="position: relative; width: 100%; height: calc(100% - 36px)"
+    style="position: relative; width: 100%; height:100%"
   />
 </template>
 
@@ -15,6 +15,10 @@ export default {
   name: 'OverviewBar',
   mixins: [resize],
   props: {
+    unitName: {
+      type: String,
+      default: '单位: 片'
+    },
     chartName: {
       type: String,
       default: ''
@@ -46,19 +50,19 @@ export default {
     bindClass() {
       return {
         'fault-category-chart': this.chartName === 'fault-category',
-        'process-fault-chart': this.chartName === 'process-fault'
+        'process-fault-chart': this.chartName === 'process-fault',
+        'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
       }
     }
   },
   mounted() {
     if (this.dataList.length > 1) {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
       this.series = [
         {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          barWidth,
+          barWidth: 20,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[0].topColor },
@@ -71,23 +75,40 @@ export default {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth,
+          barWidth: 20,
-          symbol: 'diamond',
+          symbol: 'circle',
           symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
+          symbolOffset: ['-70%', '-50%'],
-          symbolSize: [30, 12],
+          symbolSize: [20, 6],
           zlevel: 2,
-          itemStyle: { color: this.dataList[0].topColor },
+          itemStyle: {
-          data: this.dataList[0].data
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
+              { offset: 1, color: '#2c6e7d' }
+            ])
+          },
+          data: this.dataList[0].data,
+          label: {
+            color:
+              this.chartName === 'process-fault'
+                ? 'rgba(119, 255, 242, 1)'
+                : this.chartName === 'fault-category'
+                ? '#31a2ff'
+                : '#fff9',
+            show: true,
+            offset: [-12, 10],
+            position: 'top',
+            vertialAlign: 'bottom'
+          }
         },
         {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth,
+          barWidth: 20,
-          symbol: 'diamond',
+          symbol: 'circle',
-          symbolOffset: [0, '50%'],
+          symbolOffset: ['-62%', '50%'],
-          symbolSize: [30, 15],
+          symbolSize: [20, 6],
           itemStyle: { color: this.dataList[0].bottomColor },
           data: this.dataList[0].data
         },
@@ -95,7 +116,7 @@ export default {
           // 柱体
           name: this.dataList[1].name,
           type: 'bar',
-          barWidth,
+          barWidth: 20,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[1].topColor },
@@ -108,56 +129,64 @@ export default {
           // 柱顶
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth,
+          barWidth: 20,
-          symbol: 'diamond',
+          symbol: 'circle',
           symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
+          symbolOffset: ['66%', '-50%'],
-          symbolSize: [30, 12],
+          symbolSize: [20, 6],
           zlevel: 2,
-          itemStyle: { color: this.dataList[1].topColor },
+          itemStyle: {
-          data: this.dataList[1].data
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[1].topColor },
+              { offset: 1, color: this.dataList[1].bottomColor }
+            ])
+          },
+          data: this.dataList[1].data,
+          label: {
+            color:
+              this.chartName === 'process-fault'
+                ? 'rgba(119, 255, 242, 1)'
+                : this.chartName === 'fault-category'
+                ? '#31a2ff'
+                : '#fff9',
+            show: true,
+            offset: [12, 10],
+            position: 'top',
+            vertialAlign: 'bottom'
+          }
         },
         {
           // 柱底
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth,
+          barWidth: 20,
-          symbol: 'diamond',
+          symbol: 'circle',
-          symbolOffset: [0, '50%'],
+          symbolOffset: ['66%', '50%'],
-          symbolSize: [30, 15],
+          symbolSize: [20, 6],
-          itemStyle: { color: this.dataList[1].topColor },
+          itemStyle: { color: this.dataList[1].bottomColor },
           data: this.dataList[1].data
         }
       ]
     } else {
-      const barWidth = 320 / 2 / this.dataList[0].data.length
+      const barWidth = 400 / 2 / this.dataList[0].data.length
       this.series = [
         {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          // barWidth: 26,
           barWidth: barWidth,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[0].topColor },
               { offset: 1, color: this.dataList[0].bottomColor }
             ])
-            // borderWidth: 1,
-            // borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
           },
           data: this.dataList[0].data
-          // backgroundStyle: {
-          //   // borderColor: this.dataList[0].bottomColor,
-          //   borderColor: '#ff0000',
-          //   borderWidth: 1
-          // }
         },
         {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolPosition: 'end',
@@ -167,11 +196,16 @@ export default {
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: this.dataList[0].bottomColor }
+              { offset: 1, color: '#2c6e7d' }
             ])
           },
           label: {
-            color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
+            color:
+              this.chartName === 'process-fault'
+                ? 'rgba(119, 255, 242, 1)'
+                : this.chartName === 'fault-category'
+                ? '#31a2ff'
+                : '#fff9',
             show: true,
             offset: [0, 10],
             position: 'top',
@@ -183,12 +217,11 @@ export default {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolOffset: [0, '50%'],
           symbolSize: [barWidth, 6],
-          itemStyle: { color: this.dataList[0].bottomColor + '9f' },
+          itemStyle: { color: '#2c6e7d' },
           data: this.dataList[0].data
         }
       ]
@@ -210,12 +243,24 @@ export default {
       this.chart = echarts.init(this.$refs.chartContainer)
       this.chart.setOption({
         grid: {
-          top: 10,
+          top: '24%',
-          left: '2%',
+          left: '8%',
-          right: '2%',
+          right: '5%',
-          bottom: '3%',
+          bottom: '5%',
           containLabel: true
         },
+        legend: {
+          show: false,
+          itemWidth: 10,
+          itemHeight: 10,
+          selectedMode: false,
+          top: '7%',
+          right: '2%',
+          textStyle: {
+            color: '#fff9',
+            fontSize: 12
+          }
+        },
         xAxis: {
           type: 'category',
           axisLine: {
@@ -225,40 +270,77 @@ export default {
             show: false
           },
           axisLabel: {
+            margin: 16,
             textStyle: {
               fontSize: this.xlabelFontSize,
               color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
             },
-            margin: 20,
             rotate: this.xlabelRotate
           },
           data: this.nameList
         },
-        yAxis: {
+        yAxis: [
-          axisLine: {
+          {
-            lineStyle: {
+            name: this.unitName, // '单位: 片',
-              type: 'solid',
+            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-              color: this.dataList[0].bottomColor,
+            type: 'value',
-              // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+            splitNumber: 3,
-              width: '1' // 坐标线的宽度
+            axisTick: { show: false },
-            }
+            onZero: true,
-          },
+            position: 'left',
-          axisTick: {
+            offset: 10,
-            show: false
+            axisLine: {
-          },
+              lineStyle: {
-          axisLabel: {
+                type: 'solid',
-            textStyle: {
+                color: this.dataList[0].bottomColor,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+                // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-            }
+                width: '1' // 坐标线的宽度
-          },
+              }
-          splitLine: {
+            },
-            lineStyle: {
+            axisLabel: {
-              type: 'dotted',
+              textStyle: {
-              color: 'rgba(119, 255, 242, 0.2)'
+                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            }
+              }
-          },
+            },
-          type: 'value'
+            splitLine: {
-        },
+              lineStyle: {
+                type: 'dotted',
+                color: 'rgba(119, 255, 242, 0.2)'
+              }
+            },
+            type: 'value'
+          }
+          // {
+          //   name: '能耗kw/h',
+          //   nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
+          //   type: 'value',
+          //   splitNumber: 3,
+          //   axisTick: { show: false },
+          //   onZero: true,
+          //   position: 'left',
+          //   offset: 48,
+          //   axisLine: {
+          //     lineStyle: {
+          //       type: 'solid',
+          //       color: this.dataList[1].bottomColor,
+          //       width: '1' // 坐标线的宽度
+          //     }
+          //   },
+          //   axisLabel: {
+          //     textStyle: {
+          //       color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+          //     }
+          //   },
+          //   splitLine: {
+          //     show: false
+          //     // lineStyle: {
+          //     //   type: 'dotted',
+          //     //   color: 'rgba(119, 255, 242, 0.2)'
+          //     // }
+          //   },
+          //   type: 'value'
+          // }
+        ],
         series: this.series
       })
     }
@@ -276,27 +358,40 @@ export default {
   /* .fault-category-chart::before { */
   content: '';
   position: absolute;
-  bottom: calc(36px * var(--beilv));
+  /* bottom: calc(100vh/1920 * 80);
-  /* top: 63%; */
+  left: calc(100vw/1920 * 48); */
+  /* bottom: calc(10% + 100vh/1920 * 28); */
+  bottom: 25px;
   left: 9%;
-  height: calc(32px * var(--beilv));
+  height: 52px;
   width: 90%;
   background: linear-gradient(to top, #31a2ff6d, transparent);
-  transform: skew(-35deg);
+  transform: skew(-45deg);
   z-index: 0;
 }
 .process-fault-chart >>> div::before {
   /* .process-fault-chart::before { */
   content: '';
   position: absolute;
-  top: 65%;
+  bottom: 26px;
-  left: 8%;
+  left: 10%;
-  height: calc(32px * var(--beilv));
+  height: 48px;
-  /* bottom: calc(20px * var(--beilv));
-  left: calc(36px * var(--beilv));
-  height: calc(32px * var(--beilv)); */
   width: 90%;
   background: linear-gradient(to top, #49fbd789, transparent);
+  transform: skew(-45deg);
+  z-index: 0;
+}
+.realtime-production-cost-chart >>> div::before {
+  /* .fault-category-chart::before { */
+  content: '';
+  position: absolute;
+  bottom: 12%;
+  left: 6%;
+  height: 30px;
+  width: 90%;
+  border-radius: 3px;
+  /* border: 1px solid #49fbd7; */
+  background: linear-gradient(to top, #49fbd789 5%, transparent);
   transform: skew(-35deg);
   z-index: 0;
 }

src/views/QualityManager/components/charts/newLineStack.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
+  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
 </template>
 
 <script>
@@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
 export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
-  props: {},
+  props: {
+    dataUpdateToken: {
+      type: String,
+      default: 'default-token'
+    }
+  },
   data() {
     return {
       chart: null,
@@ -17,6 +22,7 @@ export default {
         color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
         tooltip: {
           trigger: 'axis',
+          extraCssText: 'width: 180px !important; ',
           axisPointer: {
             type: 'cross',
             label: {
@@ -24,14 +30,11 @@ export default {
             }
           }
         },
-        // legend: {
-        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-        // },
         grid: {
-          top: '15%',
+          top: '25%',
           left: '2%',
-          right: '2%',
+          right: '5%',
-          bottom: '2%',
+          bottom: '5%',
           containLabel: true
         },
         xAxis: [
@@ -48,7 +51,7 @@ export default {
               textStyle: {
                 color: 'rgba(255,255,255,1)' //
               },
-              margin: 20
+              margin: 12
             },
             data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
           }
@@ -57,9 +60,11 @@ export default {
           {
             name: '成品率',
             type: 'value',
+            min: 'dataMin',
+            splitNumber: 4,
             nameTextStyle: {
               color: 'rgba(255,255,255,0.7)',
-              fontSize: 10,
+              fontSize: 12,
               align: 'right'
             },
             axisLine: {
@@ -73,6 +78,7 @@ export default {
               show: false
             },
             axisLabel: {
+              formatter: '{value} %',
               textStyle: {
                 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
               }
@@ -114,7 +120,13 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [11, 199, 140, 63, 185, 5, 78]
+            data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              while (v < 80) {
+                v = Math.floor(Math.random() * 100)
+              }
+              return v
+            })
           },
           {
             name: '磨边机',
@@ -145,7 +157,13 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [151, 57, 31, 7, 77, 88, 119]
+            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              while (v < 80) {
+                v = Math.floor(Math.random() * 100)
+              }
+              return v
+            })
           },
           {
             name: '镀膜机',
@@ -176,7 +194,13 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [58, 3, 67, 100, 42, 96, 124]
+            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              while (v < 80) {
+                v = Math.floor(Math.random() * 100)
+              }
+              return v
+            })
           },
           {
             name: '包装纸',
@@ -207,7 +231,13 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [92, 88, 122, 169, 108, 130, 147]
+            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              while (v < 80) {
+                v = Math.floor(Math.random() * 100)
+              }
+              return v
+            })
           },
           {
             name: '丝印',
@@ -242,12 +272,25 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [44, 40, 118, 197, 123, 95, 96]
+            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              while (v < 80) {
+                v = Math.floor(Math.random() * 100)
+              }
+              return v
+            })
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataUpdateToken(val) {
+      this.refreshData()
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', function() {
       if (this.chart) {
@@ -263,7 +306,20 @@ export default {
       this.chart.resize()
     })
   },
-  methods: {}
+  methods: {
+    refreshData() {
+      this.configs.series.forEach(item => {
+        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
+          let v = Math.floor(Math.random() * 100)
+          while (v < 80) {
+            v = Math.floor(Math.random() * 100)
+          }
+          return v
+        })
+      })
+      if (this.chart) this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
@@ -271,4 +327,8 @@ export default {
 .chartContainer >>> div {
   width: 100% !important;
 }
+
+.diy-linestack-tooltip {
+  color: red;
+}
 </style>

src/views/QualityManager/mockData.js

@@ -38,34 +38,35 @@ const PriorityComponent = {
 console.log('is component?', PriorityComponent)
 
 export const qualityTableProps = [
-  { label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
+  { label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
-  { label: '所属产线', width: 130, prop: 'pl', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
-  { label: '异常内容', align: 'center', prop: 'content' },
+  { label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
-  { label: '报告人', width: 120, prop: 'creator', align: 'center' },
+  { label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
   { label: '时间', prop: 'time', align: 'center' },
-  { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
 ]
 
 export const qualityDatalist = [
-  { 'wsName': '工序0', 'pl': '产线1', 'content': '争近才百子', 'creator': '毛刚', 'time': '1995-03-10 22:06:23', 'priority': 3 },
+  { 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
-  { 'wsName': '工序1', 'pl': '产线10', 'content': '确规面这又间级', 'creator': '毛勇', 'time': '1997-11-26 16:27:32', 'priority': 1 },
+  { 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
-  { 'wsName': '工序2', 'pl': '产线8', 'content': '成思体高原法厂清', 'creator': '林平', 'time': '1990-09-18 03:16:44', 'priority': 2 },
+  { 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
-  { 'wsName': '工序3', 'pl': '产线6', 'content': '社色增设长放统展', 'creator': '叶静', 'time': '1970-12-02 09:44:01', 'priority': 4 },
+  { 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
-  { 'wsName': '工序4', 'pl': '产线10', 'content': '今西', 'creator': '罗磊', 'time': '2017-10-21 00:00:27', 'priority': 2 },
+  { 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
-  { 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 1 },
+  { 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
-  { 'wsName': '工序6', 'pl': '产线4', 'content': '志矿正算片大料水断特', 'creator': '熊磊', 'time': '1999-07-20 19:13:32', 'priority': 3 },
+  { 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
-  { 'wsName': '工序7', 'pl': '产线3', 'content': '目式却属采精国', 'creator': '马磊', 'time': '2001-07-16 03:50:54', 'priority': 4 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
-  { 'wsName': '工序8', 'pl': '产线7', 'content': '做较代你', 'creator': '曾敏', 'time': '1986-01-07 03:20:21', 'priority': 3 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
-  { 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '上片磨边', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '下片铺纸', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 4 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '丝印', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '清洗', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '包装', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
-  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
+  { 'wsName': ' 物流仓储', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
-]
+  { 'wsName': '清洗', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
 
 /** 质量异常报警 */
 
@@ -104,32 +105,32 @@ const StatusComponent = {
 }
 
 export const qualityExceptionTableProps = [
-  { label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
+  { label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
-  { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
+  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 50 },
-  { label: '异常内容', prop: 'content', align: 'center' },
+  { label: '异常内容', prop: 'content', align: 'center', 'min-width': 50 },
-  { label: '发现人', prop: 'creator', align: 'center', width: 100 },
+  { label: '设备', prop: 'eq', align: 'center', 'min-width': 55 },
-  { label: '时间', prop: 'time', align: 'center' },
+  { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 },
-  // { label: '处理人', prop: 'charger', align: 'center', width: 100 },
-  // { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 150 }
 ]
 
 export const qualityExceptionDatalist = [
-  { 'wsName': '工序0', 'pl': '产线1', 'content': '说红要称或各眼华家书', 'creator': '罗霞', 'time': '2013-04-08 15:23:55', 'priority': 1, 'charger': '冯敏', 'status': 4 },
+  { 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 3 },
-  { 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 2, 'charger': '万静', 'status': 2 },
+  { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
-  { 'wsName': '工序2', 'pl': '产线10', 'content': '铁收王', 'creator': '黎艳', 'time': '2006-10-25 19:20:41', 'priority': 2, 'charger': '徐秀兰', 'status': 1 },
+  { 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
-  { 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 3, 'charger': '白秀兰', 'status': 2 },
+  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
-  { 'wsName': '工序4', 'pl': '产线3', 'content': '特适院', 'creator': '魏超', 'time': '1982-12-26 16:19:57', 'priority': 1, 'charger': '姚静', 'status': 3 },
+  { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
-  { 'wsName': '工序5', 'pl': '产线1', 'content': '快准很问无', 'creator': '于桂英', 'time': '1976-09-26 21:53:11', 'priority': 4, 'charger': '白刚', 'status': 2 },
+  { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
-  { 'wsName': '工序6', 'pl': '产线7', 'content': '研开', 'creator': '何桂英', 'time': '1977-04-23 05:34:45', 'priority': 3, 'charger': '秦涛', 'status': 4 },
+  { 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
-  { 'wsName': '工序7', 'pl': '产线2', 'content': '四取各广水儿强想华', 'creator': '唐军', 'time': '1988-03-11 22:40:42', 'priority': 2, 'charger': '龙艳', 'status': 1 },
+  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
-  { 'wsName': '工序8', 'pl': '产线7', 'content': '样无商口', 'creator': '高娟', 'time': '2012-03-14 06:40:16', 'priority': 3, 'charger': '沈涛', 'status': 1 },
+  { 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
-  { 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 },
+  { 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
+  { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 1 },
+  { 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透过率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 2 },
+  { 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
+  { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 2 },
+  { 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 1 },
+  { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 3 },
-  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }
+  { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
-]
+  { 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
+  { 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
+  { 'pl': 'B', 'eq': '丝印', 'wsName': '丝印', 'content': '完整性', 'time': '2022-11-18 12:45:49', 'priority': 3 }]

src/views/UserPage/TestTree.vue

@@ -142,4 +142,8 @@ export default {
 .routes-area >>> .el-menu-item span {
 }
 */
+
+#app .hideSidebar .routes-area >>>  .el-submenu>.el-submenu__title {
+  padding: 0 20px !important;
+}
 </style>

src/views/report-manage/ReportSortChoise.vue

@@ -27,14 +27,18 @@
             <ul class="report-item__list">
               <li v-if="!item.quantity">
                 <span class="icon icon-no-reports" />
-                <span>暂无报表</span>
+                <span style="color: #909090;">暂无报表</span>
               </li>
 
               <template v-else>
-                <li v-for="n in item.quantity" :key="n">
+                <li v-for="n in item.reportNames" :key="n">
+                  <span class="icon" />
+                  <span>{{ n }}</span>
+                </li>
+                <!-- <li v-for="n in item.quantity" :key="n">
                   <span class="icon" />
                   <span>报表{{ n }}</span>
-                </li>
+                </li> -->
               </template>
             </ul>
           </div>
@@ -212,7 +216,21 @@ export default {
     init() {
       list({}).then(res => {
         this.allNum = 0
-        this.sortList = res.data
+        this.sortList = res.data.map(item => {
+          if (item.name === '能源') {
+            return { ...item, reportNames: ['产线电量日能耗统计'] }
+          } else if (item.name === '订单') {
+            return { ...item, reportNames: ['订单历史记录', '在线订单进度'] }
+          } else if (item.name === '设备') {
+            return { ...item, reportNames: ['设备报警', '设备加工数量统计', '设备OEE'] }
+          } else if (item.name === '人员') {
+            return { ...item, reportNames: ['班组加工数量统计'] }
+          } else if (item.name === '产线') {
+            return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
+          } else {
+            return item
+          }
+        })
         res.data.forEach(item => {
           this.allNum += item.quantity
         })