before update 系统管理

src/App.vue

@@ -16,7 +16,9 @@ export default {
     })
   },
   data() {
-    beilv: 1
+    return {
+      beilv: 1
+    }
   }
 }
 </script>

src/layout/components/Sidebar/Logo.vue

@@ -82,7 +82,7 @@ export default {
       display: inline-block;
       margin: 0;
       color: #fff;
-      width: calc(189px * var(--beilv));
+      // width: calc(189px * var(--beilv));
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -88,11 +88,11 @@ export default {
     ]
 
     const demoData = [
-      { value: 100, name: 'A' },
+      { value: 55, name: 'A' },
-      { value: 100, name: 'B' },
+      { value: 33, name: 'B' },
-      { value: 100, name: 'C' },
+      { value: 22, name: 'C' },
-      { value: 100, name: 'D' },
+      { value: 11, name: 'D' },
-      { value: 100, name: 'E' }
+      { value: 32, name: 'E' }
     ]
 
     return {
@@ -101,7 +101,7 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '62%',
+          left: '63%',
           top: '35%',
           text: '33039',
           textStyle: {
@@ -109,6 +109,7 @@ export default {
             fontSize: 16,
             fontWeight: 'normal'
           },
+          itemGap: 2,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -117,7 +118,7 @@ export default {
           }
         },
         legend: {
-          top: '5%',
+          top: 0,
           bottom: 0,
           left: -10,
           orient: 'vertical',
@@ -208,8 +209,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['63%', '50%'],
+            center: ['65%', '50%'],
-            radius: ['55%', '80%'],
+            radius: ['60%', '80%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -224,6 +225,10 @@ export default {
                 fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -231,15 +236,20 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex === 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -277,43 +287,46 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      const fs5 = this.calcFontsize(5 /**px*/)
+      const fs1 = this.calcFontsize(1 /** px*/)
-      const fs8 = this.calcFontsize(8 /**px*/)
+      const fs3 = this.calcFontsize(3 /** px*/)
-      const fs10 = this.calcFontsize(10 /**px*/)
+      const fs5 = this.calcFontsize(5 /** px*/)
-      const fs12 = this.calcFontsize(12 /**px*/)
+      const fs8 = this.calcFontsize(8 /** px*/)
-      const fs16 = this.calcFontsize(16 /**px*/)
+      const fs10 = this.calcFontsize(10 /** px*/)
+      const fs14 = this.calcFontsize(14 /** px*/)
+      const fs16 = this.calcFontsize(16 /** px*/)
 
-      this.configs.title.textStyle.fontSize = fs16
+      this.configs.title.textStyle.fontSize = fs14
-      this.configs.title.subtextStyle.fontSize = fs12
+      this.configs.title.subtextStyle.fontSize = fs10
 
-      this.configs.legend.itemGap = fs5
+      this.configs.legend.top = '10%'
-      this.configs.legend.itemWidth = fs10
+      this.configs.legend.itemGap = 0
+      this.configs.legend.itemWidth = fs8
 
       this.configs.legend.textStyle.rich.a.fontSize = fs10
       this.configs.legend.textStyle.rich.a.lineHeight = fs16
       this.configs.legend.textStyle.rich.b.fontSize = fs10
       // 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.series[0].label.rich.first.fontSize = fs8
+      this.configs.series[0].label.rich.first.fontSize = fs10
-      this.configs.series[0].label.rich.second.fontSize = fs8
+      this.configs.series[0].label.rich.second.fontSize = fs10
-      this.configs.series[0].label.rich.third.fontSize = fs8
+      this.configs.series[0].label.rich.third.fontSize = fs10
-      this.configs.series[0].label.rich.fourth.fontSize = fs8
+      this.configs.series[0].label.rich.fourth.fontSize = fs10
-      this.configs.series[0].label.rich.fifth.fontSize = fs8
+      this.configs.series[0].label.rich.fifth.fontSize = fs10
 
       this.chart.setOption(this.configs)
     }

src/views/3DOverview/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <V3DApp @3d-loaded="handle3DLoaded" />
+    <!-- <V3DApp @3d-loaded="handle3DLoaded" />
-    <div v-if="showPage" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content"> -->
-    <!-- <div v-if="true" 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">

src/views/EquipmentManager/HomePage.vue

@@ -11,7 +11,7 @@
               <div class="table-wrapper fix-table-exception-report">
                 <techy-table
                   :page="1"
-                  :limit="7"
+                  :limit="12"
                   :show-index="false"
                   :table-config="equipmentExceptionProps"
                   :table-data="equipmentExceptionDatalist"
@@ -25,7 +25,7 @@
               <div class="table-wrapper fix-table-eq-exception">
                 <techy-table
                   :page="1"
-                  :limit="7"
+                  :limit="12"
                   :show-index="false"
                   :table-config="equipmentAlarmProps"
                   :table-data="equipmentAlarmDatalist"
@@ -77,10 +77,10 @@
         <div class="row-3">
           <!-- 设备备件管理 -->
           <techy-container :title="'设备备件管理'" icon="清单齿轮">
-            <div class="table-wrapper">
+            <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
-                :limit="7"
+                :limit="12"
                 :show-index="false"
                 :table-config="sparepartsProps"
                 :table-data="sparepartsDatalist"

src/views/EquipmentManager/components/TechyHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <div class="center-header">
-    <span class="techy-header__title">{{ headTitle }}</span>
+      <img class="logo-img" src="./logo.png" alt="cnbm">
+      <span class="techy-header__title">{{ headTitle }}</span>
+    </div>
 
     <!-- <div class="date">2022.10.14</div>
     <div class="time">20:12:24</div> -->
@@ -102,11 +104,19 @@ export default {
   /* background-position: bottom left 40px;  */
   /* background-size: cover; */
   background-size: 100% 100%;
-  /* background-position: bottom left calc(100vw / 1920 * 40); */
+  background-position: bottom;
-  background-position: bottom left calc(32px * var(--beilv));
+  /* background-position: bottom left calc(32px * var(--beilv)); */
   height: calc(96px * var(--beilv));
 }
 
+.center-header {
+  /* transform: translateX(calc(-18px * var(--beilv))); */
+  transform: translateX(-8%) translateY(18%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .logo-img {
   width: calc(28px * var(--beilv));
 }

src/views/EquipmentManager/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -178,7 +178,7 @@ export default {
 }
 
 .visual-base-table-container >>> td span {
-  color: #ffffff50;
+  color: #ffffffb3;
   font-size: calc(12px * var(--beilv));
   line-height: calc(14px * var(--beilv));
 }
@@ -200,11 +200,12 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203e;
+  /* background-color: #0e203e; */
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #203760;
 }
 </style>

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -56,13 +56,17 @@ export default {
 
 .thead,
 .tbody {
-  min-width: calc(100vw / 1920 * 96);
+  /* min-width: calc(100vw / 1920 * 96); */
   background-color: #20376080;
   white-space: nowrap;
   overflow: hidden;
   margin-right: 1px;
-  text-align: center;
+  text-align: left;
+  padding-left: calc(12px * var(--beilv));
+  padding-right: calc(12px * var(--beilv));
   font-weight: 400;
+  flex: 0 1 calc(100vw / 1920 * 96);
+  text-overflow: ellipsis;
 }
 
 .thead {
@@ -74,7 +78,7 @@ export default {
 .tbody {
   width: 24%;
   color: rgba(255, 255, 255, 0.7);
-  font-size: calc(12px *  var(--beilv));
+  font-size: calc(12px * var(--beilv));
   line-height: 2;
 }
 

src/views/EquipmentManager/mockData.js

@@ -38,7 +38,7 @@ export const equipmentExceptionProps = [
   { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
   { label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
   { 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': 60 }
 ]
 
 export const equipmentExceptionDatalist = [
@@ -49,6 +49,11 @@ export const equipmentExceptionDatalist = [
   { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
   { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
   { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
+  { 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
+  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
+  { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
+  { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
+  { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
   { 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
   { 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
   { 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
@@ -94,6 +99,14 @@ export const equipmentAlarmDatalist = [
   { '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
+  },
+  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
   {
     'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
   },
@@ -117,7 +130,7 @@ export const equipmentAnalysisData = [
   { 'name': '磨边单元', 'oee': '0.51', 'mtbr': '0.85', 'mtbf': '0.22' },
   { 'name': '丝印', 'oee': '0.75', 'mtbr': '0.92', 'mtbf': '0.93' },
   { 'name': '上片机器人', 'oee': '0.89', 'mtbr': '0.25', 'mtbf': '0.26' },
-  { 'name': '激光打印', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
+  { 'name': '激光打孔', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
   { 'name': '镀膜', 'oee': '0.55', 'mtbr': '0.85', 'mtbf': '0.65' }
 ]
 
@@ -132,20 +145,31 @@ export const sparepartsProps = [
 ]
 
 export const sparepartsDatalist = [
-  { 'name': '激光打印', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
+  { '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' },
-  { 'name': '激光打印', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' },
+  { 'name': '激光打孔', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' },
   { 'name': '磨边单元', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2018-07-18 13:15:01', 'remain': 86, 'stock': 2342, 'location': '库位83' },
   { 'name': '上片机器人', 'eq': 'A2一次固化机', 'pl': 'E线', 'update_time': '1998-06-11 09:01:10', 'remain': 84, 'stock': 4359, 'location': '库位12' },
   { 'name': '丝印', 'eq': 'A1一次固化机', 'pl': 'E线', 'update_time': '2016-02-13 16:20:01', 'remain': -23, 'stock': 888, 'location': '库位69' },
-  { 'name': '激光打印', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' },
+  { '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': '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': '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' }
+  { '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'
+import { default as orange } from './orange.png'
+import { default as green } from './green.png'
+import { default as red } from './red.png'
+
+console.log('blue', blue)
+
 const StatusComponent = {
   name: 'StatusComponent',
   props: {
@@ -153,19 +177,19 @@ const StatusComponent = {
   },
   computed: {
     statusColor() {
-      const colors = [
+      const colors = [green, orange, blue, red
-        '#67ff55',
+        // '#67ff55',
-        'green',
+        // '#e0e0e0',
-        '#ffb70c',
+        // '#ffb70c',
-        '#0b58ff',
+        // '#0b58ff',
-        '#ff0c0c'
+        // '#ff0c0c'
       ]
       return colors[this.injectData.status - 1]
     },
     statusText() {
       return [
         '已完成',
-        '已下发',
+        // '已下发',
         '已暂定',
         '进行中',
         '已结束'
@@ -173,8 +197,8 @@ const StatusComponent = {
     }
   },
   render: function (h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+    return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
+      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', this.statusText)
     ])
   }
@@ -190,8 +214,8 @@ export const rightSideProps = [
 ]
 
 export const rightSideDatalist = [
-  { 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 2, 'charger': '任洋', 'duration': 5 },
+  { 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 1, 'charger': '任洋', 'duration': 5 },
-  { 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 2, 'charger': '廖丽', 'duration': 6 },
+  { 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 1, 'charger': '廖丽', 'duration': 6 },
   { 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 }
   // { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 },
 ]

src/views/QualityManager/HomePage.vue

@@ -8,7 +8,7 @@
             <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityTableProps"
                 :table-data="qualityDatalist"
@@ -22,7 +22,7 @@
             <div class="table-wrapper">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityExceptionTableProps"
                 :table-data="qualityExceptionDatalist"
@@ -43,8 +43,8 @@
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>缺陷分类分析</techy-analysis-header>
                     <new-bar
-                      :xlabel-font-size="8"
+                      :xlabel-font-size="10"
-                      :xlabel-rotate="20"
+                      :xlabel-rotate="30"
                       :name-list="[
                         '擦划伤1',
                         '擦划伤2',
@@ -92,10 +92,16 @@
 
               <!-- 第二列 -->
               <div class="grow-6 flex gap-16">
-                <div class="grow">
+                <div class="width-222">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产线缺陷分析</techy-analysis-header>
                     <pl-fault-analysis-pie-chart />
+                    <div class="date-select">
+                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                        月
+                      </span>
+                    </div>
                   </techy-box>
                 </div>
                 <div class="grow">
@@ -103,8 +109,8 @@
                     <techy-analysis-header>产品成品率</techy-analysis-header>
                     <new-line-stack />
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
-                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                      <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
                         月
                       </span>
                     </div>
@@ -205,6 +211,7 @@ export default {
   data() {
     return {
       dateMode: 'month',
+      dateMode2: 'month',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
@@ -425,4 +432,8 @@ export default {
 .date-select span.date-select__active {
   background-color: #42bbb7;
 }
+
+.width-222 {
+  width: calc(375px * var(--beilv));
+}
 </style>

src/views/QualityManager/components/TechyHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <div class="center-header">
-    <span class="techy-header__title">{{ headTitle }}</span>
+      <img class="logo-img" src="./logo.png" alt="cnbm">
+      <span class="techy-header__title">{{ headTitle }}</span>
+    </div>
 
     <!-- <div class="date">2022.10.14</div>
     <div class="time">20:12:24</div> -->
@@ -52,8 +54,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
         </g>
     </g>
 </svg>`
-
-
 export default {
   name: 'TechyHeader',
   props: ['headTitle'],
@@ -104,11 +104,19 @@ export default {
   /* background-position: bottom left 40px;  */
   /* background-size: cover; */
   background-size: 100% 100%;
-  /* background-position: bottom left calc(100vw / 1920 * 40); */
+  background-position: bottom;
-  background-position: bottom left calc(32px * var(--beilv));
+  /* background-position: bottom left calc(32px * var(--beilv)); */
   height: calc(96px * var(--beilv));
 }
 
+.center-header {
+  /* transform: translateX(calc(-18px * var(--beilv))); */
+  transform: translateX(-8%) translateY(18%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .logo-img {
   width: calc(28px * var(--beilv));
 }

src/views/QualityManager/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -178,7 +178,7 @@ export default {
 }
 
 .visual-base-table-container >>> td span {
-  color: #ffffff50;
+  color: #ffffffb3;
   font-size: calc(12px * var(--beilv));
   line-height: calc(14px * var(--beilv));
 }
@@ -200,11 +200,13 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #203760;
+  /* background-color: #20376090; */
 }
 </style>

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

@@ -1,16 +1,20 @@
 <template>
-  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
+  <div ref="chartContainer" class="chartContainer" />
 </template>
 
 <script>
 import echarts from 'echarts'
-// import 'echarts/theme/macarons'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
-  name: 'PlFaultAnalysisPieChart',
+  name: 'RightContentFaultAnalysis',
   mixins: [resize],
-  props: {},
+  props: {
+    id: {
+      type: String,
+      default: 'default-fault-analysis-id'
+    }
+  },
   data() {
     let totalRate = 0
     const colors = [
@@ -81,20 +85,29 @@ 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: '59%',
+          left: '63%',
-          top: '30%',
+          top: '35%',
           text: '33039',
           textStyle: {
             color: '#fff',
-            fontSize: 22,
+            fontSize: 16,
             fontWeight: 'normal'
           },
+          itemGap: 2,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -103,21 +116,17 @@ export default {
           }
         },
         legend: {
-          height: '100%',
+          top: 0,
-          align: 'center',
+          bottom: 0,
-          verticalAlign: 'center',
+          left: -10,
-          left: 0,
           orient: 'vertical',
           icon: 'none',
+          itemGap: 5,
+          itemWidth: 10,
           formatter: function(name) {
             // test data - dynamic
-            const testData = [
+            const testData = demoData
-              { name: 'A', value: 100 },
+
-              { name: 'B', value: 200 },
-              { name: 'C', value: 300 },
-              { name: 'D', value: 400 },
-              { name: 'E', value: 500 }
-            ]
             let pieLegendVale = {}
             testData.filter((item, index) => {
               if (item.name === name) {
@@ -135,20 +144,19 @@ export default {
           textStyle: {
             rich: {
               a: {
-                align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255, 0.7)',
                 lineHeight: 16
               },
               b: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255)'
               },
               c: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -157,7 +165,7 @@ export default {
               },
               d: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -166,7 +174,7 @@ export default {
               },
               e: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -175,7 +183,7 @@ export default {
               },
               f: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -184,7 +192,7 @@ export default {
               },
               g: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -199,8 +207,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['60%', '45%'],
+            center: ['65%', '48%'],
-            radius: ['50%', '70%'],
+            radius: ['60%', '85%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -208,13 +216,17 @@ export default {
                 return `{${colorMap[params.dataIndex]}|${params.percent} %}`
               },
               rich: {
-                first: { color: '#FB418C', fontSize: 10 },
+                first: { color: '#FB418C', fontSize: 8 },
-                second: { color: '#DDB112', fontSize: 10 },
+                second: { color: '#DDB112', fontSize: 8 },
-                third: { color: '#1A99FF', fontSize: 10 },
+                third: { color: '#1A99FF', fontSize: 8 },
-                fourth: { color: '#A691FF', fontSize: 10 },
+                fourth: { color: '#A691FF', fontSize: 8 },
-                fifth: { color: '#49FBD6', fontSize: 10 }
+                fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -228,6 +240,11 @@ export default {
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex == 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
                   (() => {})()
@@ -237,40 +254,99 @@ export default {
                 return colorGradient
               }
             },
-            data: [
+            data: demoData
-              { value: 100, name: 'A' },
-              { value: 200, name: 'B' },
-              { value: 300, name: 'C' },
-              { value: 400, name: 'D' },
-              { value: 500, name: 'E' }
-            ]
           }
         ]
       }
     }
   },
   mounted() {
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', () => {
       if (this.chart) {
         this.chart.resize()
+        this.$nextTick(() => {
+          // 重新绘制文本大小
+          this.applyChartOption()
+        })
       }
     })
 
     this.$nextTick(() => {
       // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
-      if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
+      if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
-
+      this.applyChartOption()
-      this.chart.setOption(this.configs)
-
       this.chart.resize()
     })
   },
-  methods: {}
+
+  methods: {
+    calcFontsize(baseSize) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return beilv * baseSize
+    },
+    // calcRate(baseRate) {
+    //   const beilv = document.documentElement.style.getPropertyValue('--beilv')
+    //   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 rate10 = this.calcFontsize(10 /** % */)
+      const rate3 = this.calcFontsize(3 /** % */)
+
+      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.subtextStyle.fontSize = fs10
+
+      this.configs.legend.top = rate10 + '%'
+      this.configs.legend.left = rate3 + '%'
+      this.configs.legend.itemGap = fs5
+      this.configs.legend.itemWidth = fs10
+
+      this.configs.legend.textStyle.rich.a.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.lineHeight = fs10
+      this.configs.legend.textStyle.rich.b.fontSize = fs10
+      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
+      this.configs.legend.textStyle.rich.c.width = fs10
+      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.borderRadius = fs5
+      this.configs.legend.textStyle.rich.d.width = fs10
+      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.borderRadius = fs5
+      this.configs.legend.textStyle.rich.e.width = fs10
+      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.borderRadius = fs5
+      this.configs.legend.textStyle.rich.f.width = fs10
+      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.borderRadius = fs5
+      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.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.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
 <style scoped>
-.chartContainer >>> div {
+.chartContainer {
+  height: calc(100% - (36px * var(--beilv)));
+  position: relative;
+  width: 100%;
+}
+
+.chartContainer > div {
   width: 100% !important;
 }
 </style>

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

@@ -130,7 +130,7 @@ export default {
         }
       ]
     } else {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
+      const barWidth = 320 / 2 / this.dataList[0].data.length
       this.series = [
         {
           // 柱体
@@ -167,7 +167,7 @@ export default {
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
+              { offset: 1, color: this.dataList[0].bottomColor }
             ])
           },
           label: {
@@ -188,7 +188,7 @@ export default {
           symbol: 'circle',
           symbolOffset: [0, '50%'],
           symbolSize: [barWidth, 6],
-          itemStyle: { color: '#2c6e7d' },
+          itemStyle: { color: this.dataList[0].bottomColor + '9f' },
           data: this.dataList[0].data
         }
       ]
@@ -276,7 +276,8 @@ export default {
   /* .fault-category-chart::before { */
   content: '';
   position: absolute;
-  bottom: calc(30px * var(--beilv));
+  bottom: calc(36px * var(--beilv));
+  /* top: 63%; */
   left: 9%;
   height: calc(32px * var(--beilv));
   width: 90%;
@@ -288,7 +289,7 @@ export default {
   /* .process-fault-chart::before { */
   content: '';
   position: absolute;
-  bottom: 12%;
+  top: 65%;
   left: 8%;
   height: calc(32px * var(--beilv));
   /* bottom: calc(20px * var(--beilv));

src/views/QualityManager/mockData.js

@@ -52,11 +52,19 @@ export const qualityDatalist = [
   { 'wsName': '工序2', 'pl': '产线8', 'content': '成思体高原法厂清', 'creator': '林平', 'time': '1990-09-18 03:16:44', 'priority': 2 },
   { 'wsName': '工序3', 'pl': '产线6', 'content': '社色增设长放统展', 'creator': '叶静', 'time': '1970-12-02 09:44:01', 'priority': 4 },
   { 'wsName': '工序4', 'pl': '产线10', 'content': '今西', 'creator': '罗磊', 'time': '2017-10-21 00:00:27', 'priority': 2 },
-  { 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 5 },
+  { 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 1 },
   { 'wsName': '工序6', 'pl': '产线4', 'content': '志矿正算片大料水断特', 'creator': '熊磊', 'time': '1999-07-20 19:13:32', 'priority': 3 },
   { 'wsName': '工序7', 'pl': '产线3', 'content': '目式却属采精国', 'creator': '马磊', 'time': '2001-07-16 03:50:54', 'priority': 4 },
   { 'wsName': '工序8', 'pl': '产线7', 'content': '做较代你', 'creator': '曾敏', 'time': '1986-01-07 03:20:21', 'priority': 3 },
-  { 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
+  { 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 4 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
 ]
 
 /** 质量异常报警 */
@@ -70,7 +78,7 @@ const StatusComponent = {
     statusColor() {
       const colors = [
         '#67ff55',
-        'green',
+        '#e0e0e0',
         '#ffb70c',
         '#0b58ff',
         '#ff0c0c'
@@ -102,19 +110,26 @@ export const qualityExceptionTableProps = [
   { label: '发现人', prop: 'creator', align: 'center', width: 100 },
   { label: '时间', prop: 'time', align: 'center' },
   { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
-  { label: '处理人', prop: 'charger', align: 'center', width: 100 },
+  // { label: '处理人', prop: 'charger', align: 'center', width: 100 },
-  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, 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 },
-  { 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 1, 'charger': '万静', 'status': 2 },
+  { 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 2, 'charger': '万静', 'status': 2 },
   { 'wsName': '工序2', 'pl': '产线10', 'content': '铁收王', 'creator': '黎艳', 'time': '2006-10-25 19:20:41', 'priority': 2, 'charger': '徐秀兰', 'status': 1 },
-  { 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 5, 'charger': '白秀兰', 'status': 5 },
+  { 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 3, 'charger': '白秀兰', 'status': 2 },
   { 'wsName': '工序4', 'pl': '产线3', 'content': '特适院', 'creator': '魏超', 'time': '1982-12-26 16:19:57', 'priority': 1, 'charger': '姚静', 'status': 3 },
   { 'wsName': '工序5', 'pl': '产线1', 'content': '快准很问无', 'creator': '于桂英', 'time': '1976-09-26 21:53:11', 'priority': 4, 'charger': '白刚', 'status': 2 },
   { 'wsName': '工序6', 'pl': '产线7', 'content': '研开', 'creator': '何桂英', 'time': '1977-04-23 05:34:45', 'priority': 3, 'charger': '秦涛', 'status': 4 },
   { 'wsName': '工序7', 'pl': '产线2', 'content': '四取各广水儿强想华', 'creator': '唐军', 'time': '1988-03-11 22:40:42', 'priority': 2, 'charger': '龙艳', 'status': 1 },
   { 'wsName': '工序8', 'pl': '产线7', 'content': '样无商口', 'creator': '高娟', 'time': '2012-03-14 06:40:16', 'priority': 3, 'charger': '沈涛', 'status': 1 },
-  { 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }
+  { 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 1 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 2 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 2 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 1 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }
 ]

src/views/RoleManager/index.vue

@@ -7,10 +7,7 @@
 -->
 <template>
   <div class="app-container">
-    <head-form
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
-      :form-config="headFormConfig"
-      @headBtnClick="btnClick"
-    />
     <base-table
       :top-btn-config="topBtnConfig"
       :table-config="tableProps"
@@ -20,16 +17,17 @@
       :limit="listQuery.size"
       @clickTopBtn="clickTopBtn"
     >
-      <method-btn
+      <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
-        slot="handleBtn"
-        :width="trueWidth"
-        :method-list="tableBtn"
-        @clickBtn="handleClick"
-      />
     </base-table>
-    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList"
+    />
     <add-form :visible.sync="showDialog" @done="getList" />
-    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @done="getList" />
     <menu-empower ref="empowerRef" :visible.sync="empowerDialog" @done="getList" />
   </div>
 </template>
@@ -45,42 +43,46 @@ const topBtnConfig = [
   }
 ]
 // edit here
-const tableBtn = [{
+const tableBtn = [
-  type: 'edit',
+  {
-  btnName: 'btn.edit'
+    type: 'edit',
-}, {
+    btnName: 'btn.edit'
-  type: 'EmPower',
+  },
-  btnName: i18n.t('roleManage.roleEmPower')
+  {
-}, {
+    type: 'EmPower',
-  type: 'delete',
+    btnName: i18n.t('roleManage.roleEmPower')
-  btnName: 'btn.delete'
+  },
-}
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'code',
+    label: i18n.t('roleManage.roleCode')
+  },
+  {
+    prop: 'name',
+    label: i18n.t('roleManage.roleName')
+  },
+  {
+    prop: 'enabled',
+    label: i18n.t('roleManage.status'),
+
+    filter: basicData('enableState')
+  },
+  // {
+  //   prop: 'category',
+  //   label: i18n.t('roleManage.roleType'),
+  //   align: 'center',
+  //   filter: basicData('roleType')
+  // },
+  {
+    prop: 'remark',
+    label: i18n.t('roleManage.remark')
+  }
 ]
-const tableProps = [{
-  prop: 'code',
-  label: i18n.t('roleManage.roleCode'),
-  align: 'center'
-}, {
-  prop: 'name',
-  label: i18n.t('roleManage.roleName'),
-  align: 'center'
-}, {
-  prop: 'enabled',
-  label: i18n.t('roleManage.status'),
-  align: 'center',
-  filter: basicData('enableState')
-},
-// {
-//   prop: 'category',
-//   label: i18n.t('roleManage.roleType'),
-//   align: 'center',
-//   filter: basicData('roleType')
-// },
-{
-  prop: 'remark',
-  label: i18n.t('roleManage.remark'),
-  align: 'center'
-}]
 import AddForm from './AddForm'
 import EditForm from './EditForm'
 import menuEmpower from './menuEmpower'
@@ -193,7 +195,7 @@ export default {
     },
     clickTopBtn(val) {
       if (val === 'add') {
-        this.addNew()// 新增
+        this.addNew() // 新增
       }
     }
   }

src/views/UserPage/TestTree.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="test-tree">
+    <section class="title-area">
+      <span class="title-icon">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 24 24"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>工厂</title>
+          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
+              <g id="工厂" transform="translate(376.000000, 152.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
+                <path
+                  id="形状"
+                  d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
+                  fill="#0B58FF"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>
+      </span>
+      <span class="title-content">合肥新能源工厂</span>
+    </section>
+    <section class="routes-area">
+      <ul class="root-routes">
+        <li class="parent-route">
+          <div class="route-title">
+            <div>
+              <span class="menu-icon">
+                <span class="line" />
+                <span class="line" />
+                <span class="line" />
+              </span>
+              <span>制造部</span>
+            </div>
+            <span class="arrow-icon rotate-down">
+              <span class="arrow-line1" />
+              <span class="arrow-line2" />
+            </span>
+          </div>
+          <ul class="children-routes">
+            <li class="parent-route">
+              <div class="route-title" style="padding-left: 16px;">
+                <div>
+                  <span class="menu-icon">
+                    <!-- level - 2 -->
+                    <span class="circle" />
+                  </span>
+                  <span>人力资源</span>
+                </div>
+                <span class="arrow-icon">
+                  <span class="arrow-line1" />
+                  <span class="arrow-line2" />
+                </span>
+              </div>
+              <ul class="children-routes">
+                <li class="leaf-route" style="padding-left: 32px;">小组1</li>
+                <li class="leaf-route" style="padding-left: 32px;">小组2</li>
+              </ul>
+            </li>
+            <li class="leaf-route" style="padding-left: 16px;">小组2</li>
+          </ul>
+        </li>
+        <li class="leaf-route">财政部</li>
+      </ul>
+    </section>
+    <section class="footer-area" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestTree',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.test-tree {
+  background: lightblue;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.title-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.routes-area {
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.title-icon {
+  height: 24px;
+  width: 24px;
+}
+
+.title-content {
+  font-size: 16px;
+  line-height: 1;
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.parent-route div {
+  display: flex;
+  align-items: center;
+}
+
+.route-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+span.menu-icon {
+  height: 14px;
+  width: 14px;
+  margin-right: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.line {
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0.508);
+}
+
+.arrow-icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.arrow-line1,
+.arrow-line2 {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 8px;
+  border-radius: 1px;
+  background-color: #000a;
+  transform-origin: top 50% left 0;
+}
+
+.arrow-line1 {
+  top: 1px;
+  left: 0;
+  transform: rotateZ(-45deg);
+}
+
+.arrow-line2 {
+  left: 0;
+  bottom: 1px;
+  transform: rotateZ(45deg);
+}
+
+.rotate-down {
+  /* transform-origin: top 50%; */
+  transform: rotateZ(90deg);
+}
+.circle {
+  width: 70%;
+  height: 70%;
+  background-color: #000c;
+  border-radius: 50%;
+  position: relative;
+}
+
+.circle::after {
+  content: '';
+  position: absolute;
+  width: 70%;
+  height: 70%;
+  border-radius: 50%;
+  top: 15%;
+  left: 15%;
+  background-color: #fff;
+}
+
+/* span.arrow-icon {
+  background: url('./right.png') 100% 100% / contain no-repeat;
+  width: 12px;
+  height: 12px;
+} */
+
+li.parent-route {
+  display: flex;
+  flex-direction: column;
+  /* background: lightpink; */
+}
+
+li.leaf-route::before {
+  content: '\25E6';
+  padding-right: 8px;
+}
+
+li.parent-route div.route-title:hover,
+li.parent-route div.route-title:hover .circle::after,
+li.leaf-route:hover {
+  background: #ccc;
+}
+</style>

src/views/UserPage/usermanage.vue

@@ -112,55 +112,48 @@ const tableBtn = [
 const tableProps = [
   {
     prop: 'name',
-    label: i18n.t('userManage.userName'),
+    label: i18n.t('userManage.userName')
-    align: 'center'
   },
   {
     prop: 'email',
-    label: i18n.t('userManage.email'),
+    label: i18n.t('userManage.email')
-    align: 'center'
   },
   {
     prop: 'mobile',
-    label: i18n.t('userManage.mobile'),
+    label: i18n.t('userManage.mobile')
-    align: 'center'
   },
   // {
   //   prop: 'birthday',
   //   label: i18n.t('userManage.birthday'),
-  //   align: 'center'
+  //
   // },
   {
     prop: 'orgName',
-    label: i18n.t('userManage.orgName'),
+    label: i18n.t('userManage.orgName')
-    align: 'center'
   },
   {
     prop: 'roleName',
-    label: i18n.t('roleManage.roleName'),
+    label: i18n.t('roleManage.roleName')
-    align: 'center'
   },
   // {
   //   prop: 'sex',
   //   label: i18n.t('userManage.sex'),
-  //   align: 'center',
+  //
   //   filter: dataDict('sex')
   // },
   {
     prop: 'code',
-    label: i18n.t('userManage.code'),
+    label: i18n.t('userManage.code')
-    align: 'center'
   },
   {
     prop: 'enabled',
     label: i18n.t('userManage.status'),
-    align: 'center',
+
     filter: dataDict('enableState')
   },
   {
     prop: 'remark',
-    label: i18n.t('userManage.remark'),
+    label: i18n.t('userManage.remark')
-    align: 'center'
   }
 ]
 export default {
@@ -244,7 +237,7 @@ export default {
             confirmButtonText: i18n.t('btn.confirm'),
             cancelButtonText: i18n.t('btn.cancel'),
             type: 'warning'
-          }).then(async () => {
+          }).then(async() => {
             // 走接口
             const result = await delUser({
               id: raw.data.id