update 质量-产品成品率

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

@@ -58,26 +58,26 @@ const tableProps = [
   { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
 ]
 const tableData = [
-  { eqName: '磨边', pl: 'B', priority: 3, checkContent: '火中山为华证低军线少真及容南一用别。' },
+  { eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
-  { eqName: '固化', pl: 'A', priority: 3, checkContent: '油报往目亲没己话构这题家感。' },
+  { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: '下片', pl: 'B', priority: 1, checkContent: '不决系入几切斗回史亲和全自管。' },
+  { eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
-  { eqName: '冷却', pl: 'B', priority: 2, checkContent: '近温志用建将面连机次些民石变分教集加。' },
+  { eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
-  { eqName: '钢化', pl: 'B', priority: 4, checkContent: '家地派众几又斯管把来资活听是强。' },
+  { eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: '二镀', pl: 'B', priority: 1, checkContent: '全是治群况布这越新划回路一量根步到料。' },
+  { eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
-  { eqName: '打孔', pl: 'B', priority: 3, checkContent: '西心往各产有矿及红构更往术路外光参因。' },
+  { eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
-  { eqName: '磨边', pl: 'A', priority: 1, checkContent: '严音五今通住包作世不如半志。' },
+  { eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '一镀', pl: 'A', priority: 3, checkContent: '相史亲运界工按越清引具产。' },
+  { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '钢后清洗机', pl: 'A', priority: 1, checkContent: '合题基则关大大边听律安来革号其干。' },
+  { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: '丝印', pl: 'A', priority: 1, checkContent: '身米识可见报求起放之过影。' },
+  { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
-  { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '始单方实度构斯手研习任压识。' },
+  { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
-  { eqName: '打孔', pl: 'B', priority: 3, checkContent: '共特场新收关式往劳极段前步产角至高。' },
+  { eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
-  { eqName: '钢后清洗机', pl: 'A', priority: 3, checkContent: '消理几包山教满得五期那改计。' },
+  { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
-  { eqName: '一镀', pl: 'B', priority: 4, checkContent: '而能研区有关点回劳之直近际她处而基步。' },
+  { eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
-  { eqName: '二镀', pl: 'A', priority: 3, checkContent: '状复思式样要热间王才整金确。' },
+  { eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
-  { eqName: '打孔', pl: 'B', priority: 2, checkContent: '即组明对省队内难军领把完六论技。' },
+  { eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
-  { eqName: '打孔后清洗机', pl: 'A', priority: 2, checkContent: '度些心万则它书专干又分因直政论九。' },
+  { eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
-  { eqName: '丝印', pl: 'A', priority: 1, checkContent: '加示队酸得如生改及效车流王西高阶面。' },
+  { eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '打孔后清洗机', pl: 'B', priority: 2, 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/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

@@ -52,23 +52,23 @@ 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: '磨边', plName: 'B', content: '所受第按政酸南角写作给还些。', priority: 4, duration: '30 min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
-  { eqName: '冷却', plName: 'A', content: '自变流门行极声将通确为用目很导处种。', priority: 4, duration: '1 min' },
+  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
-  { eqName: '丝印', plName: 'A', content: '从小定需间太则选下上又原。', priority: 2, duration: '57 min' },
+  { eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
-  { eqName: '打孔后清洗机', plName: 'B', content: '表新和新总我音层采示道产当列。', priority: 3, duration: '17 min' },
+  { eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
-  { eqName: '固化', plName: 'B', content: '义往历安日况整家小心什会。', priority: 2, duration: '22 min' },
+  { eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
-  { eqName: '一镀', plName: 'B', content: '收直素新要府收强而着明速省。', priority: 3, duration: '2 min' },
+  { eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
-  { eqName: '钢化', plName: 'A', content: '它养土党把采商发活门没千联同设和。', priority: 4, duration: '23 min' },
+  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
-  { eqName: '磨边', plName: 'B', content: '拉养必型制规想科得价向别任。', priority: 3, duration: '6 min' },
+  { eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
-  { eqName: '磨边', plName: 'B', content: '确验效五什第也片什八装所红。', priority: 2, duration: '23 min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
   {
     eqName: '磨边后清洗机',
     plName: 'A',

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/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/mockData.js

@@ -73,9 +73,9 @@ const LifeRemainComponent = {
   computed: {
     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]
     }
@@ -160,6 +160,8 @@ export const sparepartsProps = [
   { prop: 'location', label: '库位', align: 'center' }
 ]
 
+
+// TODO: 2022.11.17 修改数据和剩余寿命组件
 export const sparepartsDatalist = [
   { 'name': '激光打孔', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
   { 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' },

src/views/QualityManager/HomePage.vue

@@ -94,11 +94,52 @@
               <div class="grow-6 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 +148,24 @@
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
-                    <new-line-stack />
+                    <new-line-stack :data-update-token="dataUpdateToken" />
                     <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>
@@ -209,7 +264,44 @@ export default {
     NewLineStack
   },
   data() {
+    const quexianDatalist = [
+      [
+        { value: 107, name: '破片' },
+        { value: 146, name: '崩边' },
+        { value: 43, name: '脏污' },
+        { value: 83, name: '划擦伤' },
+        { value: 20, name: '崩孔' },
+        { value: 21, name: '其他' }
+      ],
+      [
+        { value: 117, name: '破片' },
+        { value: 106, name: '崩边' },
+        { value: 40, name: '脏污' },
+        { value: 82, name: '划擦伤' },
+        { value: 22, name: '崩孔' },
+        { value: 19, name: '其他' }
+      ],
+      [
+        { value: 97, name: '破片' },
+        { value: 96, name: '崩边' },
+        { value: 33, name: '脏污' },
+        { value: 43, name: '划擦伤' },
+        { value: 10, name: '崩孔' },
+        { value: 18, name: '其他' }
+      ],
+      [
+        { value: 127, name: '破片' },
+        { value: 156, name: '崩边' },
+        { value: 53, name: '脏污' },
+        { value: 93, name: '划擦伤' },
+        { value: 25, name: '崩孔' },
+        { value: 22, name: '其他' }
+      ]
+    ]
+
     return {
+      dataUpdateToken: 'xx-token',
+      plMode: 'a',
       dateMode: 'month',
       dateMode2: 'month',
       qualityTableProps,
@@ -227,7 +319,9 @@ export default {
         { name: '包装', amount: 20 },
         { name: '清晰', amount: 20 },
         { name: '物流仓储', amount: 233920 }
-      ]
+      ],
+      quexianDatalist,
+      chosenDatalist: quexianDatalist[0]
     }
   },
   computed: {
@@ -349,7 +443,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,6 +504,7 @@ export default {
   gap: calc(16px * var(--beilv));
 }
 
+.pl-select,
 .date-select {
   position: absolute;
   top: calc(16px * var(--beilv));
@@ -419,6 +515,12 @@ export default {
   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 +531,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,6 +1,6 @@
 <template>
   <div class="techy-analysis-header">
-    <span class="top-icon">
+    <span v-if="showTopIcon" class="top-icon">
       <svg
         width="100%"
         height="100%"
@@ -51,7 +51,7 @@
     <span class="techy-analysis-header__title">
       <slot />
     </span>
-    <span class="top-icon">
+    <span v-if="showTopIcon" class="top-icon">
       <svg
         width="100%"
         height="100%"
@@ -105,6 +105,12 @@
 <script>
 export default {
   name: 'TechyAnalysisHeader',
+  props: {
+    showTopIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {}
   }

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() {
@@ -44,6 +48,19 @@ export default {
         ],
         global: false
       },
+      {
+        type: 'linear',
+        x: 0,
+        y: 1,
+        x2: 0,
+        y2: 0,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#49FBD600', offset: 0.1 },
+          { color: '#74DC85', offset: 1 } // 浅绿
+        ],
+        global: false
+      },
       {
         type: 'linear',
         x: 1,
@@ -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,29 +102,21 @@ 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%',
+          left: '69%',
-          top: '35%',
+          top: '46%',
-          text: '33039',
+          text: '',
           textStyle: {
             color: '#fff',
             fontSize: 16,
             fontWeight: 'normal'
           },
-          itemGap: 2,
+          itemGap: 5,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -116,16 +125,15 @@ export default {
           }
         },
         legend: {
-          top: 0,
+          top: '10%',
           bottom: 0,
-          left: -10,
+          left: 0,
           orient: 'vertical',
           icon: 'none',
           itemGap: 5,
           itemWidth: 10,
-          formatter: function(name) {
+          formatter: name => {
-            // test data - dynamic
+            const testData = this.dataList
-            const testData = demoData
 
             let pieLegendVale = {}
             testData.filter((item, index) => {
@@ -133,7 +141,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 +154,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 +208,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 +221,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 +236,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -247,19 +249,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,26 +295,20 @@ 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 fs16 = this.calcFontsize(16 /** px*/)
+      const fs18 = this.calcFontsize(18 /** px*/)
-      const rate10 = this.calcFontsize(10 /** % */)
+      const legendTopRate = this.calcFontsize(28 /** % */)
-      const rate3 = this.calcFontsize(3 /** % */)
 
-      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
-      this.configs.title.subtextStyle.fontSize = fs10
+      this.configs.title.textStyle.fontSize = fs18
+      this.configs.title.subtextStyle.fontSize = fs14
 
-      this.configs.legend.top = rate10 + '%'
+      this.configs.legend.top = legendTopRate + '%'
-      this.configs.legend.left = rate3 + '%'
+      this.configs.legend.left = 0 + '%'
       this.configs.legend.itemGap = fs5
       this.configs.legend.itemWidth = fs10
 
@@ -326,13 +331,17 @@ export default {
       this.configs.legend.textStyle.rich.g.width = fs10
       this.configs.legend.textStyle.rich.g.height = fs10
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
+      this.configs.legend.textStyle.rich.h.width = fs10
+      this.configs.legend.textStyle.rich.h.height = fs10
+      this.configs.legend.textStyle.rich.h.borderRadius = fs5
 
       this.configs.series[0].label.rich.first.fontSize = fs10
       this.configs.series[0].label.rich.second.fontSize = fs10
       this.configs.series[0].label.rich.third.fontSize = fs10
       this.configs.series[0].label.rich.fourth.fontSize = fs10
       this.configs.series[0].label.rich.fifth.fontSize = fs10
-
+      this.configs.series[0].label.rich.sixth.fontSize = fs10
+      if (datalist) this.configs.series[0].data = datalist
       this.chart.setOption(this.configs)
     }
   }
@@ -341,9 +350,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/newLineStack.vue

@@ -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,9 +30,6 @@ export default {
             }
           }
         },
-        // legend: {
-        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-        // },
         grid: {
           top: '15%',
           left: '2%',
@@ -73,6 +76,7 @@ export default {
               show: false
             },
             axisLabel: {
+              formatter: '{value} %',
               textStyle: {
                 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
               }
@@ -114,7 +118,10 @@ 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)
+              return v
+            })
           },
           {
             name: '磨边机',
@@ -145,7 +152,10 @@ 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)
+              return v
+            })
           },
           {
             name: '镀膜机',
@@ -176,7 +186,10 @@ 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)
+              return v
+            })
           },
           {
             name: '包装纸',
@@ -207,7 +220,10 @@ 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)
+              return v
+            })
           },
           {
             name: '丝印',
@@ -242,12 +258,22 @@ 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)
+              return v
+            })
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataUpdateToken(val) {
+      this.refreshData()
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', function() {
       if (this.chart) {
@@ -263,7 +289,17 @@ 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)
+          return v
+        })
+      })
+      if (this.chart) this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
@@ -271,4 +307,8 @@ export default {
 .chartContainer >>> div {
   width: 100% !important;
 }
+
+.diy-linestack-tooltip {
+  color: red;
+}
 </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
         })