Merge branch 'master' into lb

Reviewed-on: #13

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

@@ -51,6 +51,15 @@ export default {
           bottom: 0,
           containLabel: true
         },
+        // tooltip: {
+        //   show: true,
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'cross',
+        //     axis: 'y'
+        //   }
+        //   formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
+        // },
         xAxis: {
           type: 'category',
           boundaryGap: false,

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

@@ -67,7 +67,7 @@
       </TechyBox>
     </div>
 
-    <div style="min-height: calc(110px * var(--beilv)); flex: 1;">
+    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
       <TechyBox class="dian-consume">
         <div class="header-part">
           <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
@@ -79,7 +79,7 @@
       </TechyBox>
     </div>
 
-    <div style="min-height: calc(110px * var(--beilv)); flex: 1;">
+    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
       <TechyBox class="elec-consume">
         <div class="header-part">
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
@@ -153,6 +153,7 @@ export default {
 .header-part > span {
   color: #fffc;
   font-size: calc(12px * var(--beilv));
+  white-space: nowrap;
 }
 
 .content-part {

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="right-content-quality-analysis">
+  <div
-    <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
+    :id="id"
+    ref="fault-pie-chart"
+    class="right-content-quality-analysis"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+  >
+    <!-- <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" /> -->
   </div>
 </template>
 
@@ -101,8 +106,8 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '63%',
+          left: '64%',
-          top: '35%',
+          top: '48%',
           text: demoData.reduce((prev, curr) => prev + curr.value, 0),
           textStyle: {
             color: '#fff',
@@ -117,10 +122,11 @@ export default {
             fontWeight: 'lighter'
           }
         },
+
         legend: {
           top: 0,
           bottom: 0,
-          left: -15,
+          left: 0,
           orient: 'vertical',
           icon: 'none',
           itemGap: 8,
@@ -204,8 +210,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['65%', '50%'],
+            center: ['65%', '60%'],
-            radius: ['60%', '80%'],
+            radius: ['42%', '60%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -287,19 +293,21 @@ export default {
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)
-      const fs14 = this.calcFontsize(14 /** px*/)
+      const fs12 = this.calcFontsize(12 /** px*/)
       const fs16 = this.calcFontsize(16 /** px*/)
+      const titleSize = this.calcFontsize(22 /** px*/)
+      const subtitleSize = this.calcFontsize(14 /** px*/)
 
-      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.textStyle.fontSize = titleSize
-      this.configs.title.subtextStyle.fontSize = fs10
+      this.configs.title.subtextStyle.fontSize = subtitleSize
 
-      this.configs.legend.top = '10%'
+      this.configs.legend.top = '24%'
-      this.configs.legend.itemGap = 0
+      this.configs.legend.itemGap = fs8
       this.configs.legend.itemWidth = fs8
 
-      this.configs.legend.textStyle.rich.a.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.fontSize = fs12
       this.configs.legend.textStyle.rich.a.lineHeight = fs16
-      this.configs.legend.textStyle.rich.b.fontSize = fs10
+      this.configs.legend.textStyle.rich.b.fontSize = fs12
       // this.configs.legend.textStyle.rich.b.lineHeight = fs16
       this.configs.legend.textStyle.rich.c.width = fs8
       this.configs.legend.textStyle.rich.c.height = fs8
@@ -317,11 +325,11 @@ export default {
       this.configs.legend.textStyle.rich.g.height = fs8
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
 
-      this.configs.series[0].label.rich.first.fontSize = fs10
+      this.configs.series[0].label.rich.first.fontSize = fs12
-      this.configs.series[0].label.rich.second.fontSize = fs10
+      this.configs.series[0].label.rich.second.fontSize = fs12
-      this.configs.series[0].label.rich.third.fontSize = fs10
+      this.configs.series[0].label.rich.third.fontSize = fs12
-      this.configs.series[0].label.rich.fourth.fontSize = fs10
+      this.configs.series[0].label.rich.fourth.fontSize = fs12
-      this.configs.series[0].label.rich.fifth.fontSize = fs10
+      this.configs.series[0].label.rich.fifth.fontSize = fs12
 
       this.chart.setOption(this.configs)
     }
@@ -330,9 +338,9 @@ export default {
 </script>
 
 <style scoped>
-.right-content-quality-analysis {
+/* .right-content-quality-analysis {
   height: calc(100% - 32px);
-}
+} */
 
 .fault-pie-chart {
   height: 100%;

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

@@ -1,7 +1,5 @@
 <template>
-  <div style="height: calc(100% - 36px); width: 100%; position: relative;">
+  <div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
-    <div :id="id" ref="techy-line-chart" class="techy-chart" />
-  </div>
 </template>
 
 <script>
@@ -33,18 +31,26 @@ export default {
     return {
       chart: null,
       option: {
-        color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
+        color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
         grid: {
-          top: '45%',
+          top: '40%',
-          left: 0,
+          left: '5%',
-          right: 12,
+          right: '6%',
-          bottom: '5%',
+          bottom: '10%',
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
+        },
         legend: {
           width: '72%',
           top: '20%',
-          right: 12,
+          right: '6%',
           itemWidth: 12,
           itemHeight: 8,
           textStyle: {
@@ -62,7 +68,7 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: 8,
+            fontSize: 10,
             color: '#fffa'
           },
           axisLine: {
@@ -73,19 +79,20 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: '成品率',
+          name: '成品率              ',
           min: 'dataMin',
-          splitNumber: 2,
+          splitNumber: 3,
           nameTextStyle: {
             color: '#fffc',
             align: 'right',
-            fontSize: 8
+            verticalAlign: 'bottom',
+            fontSize: 12
           },
           axisLine: {
             show: false
           },
           axisLabel: {
-            fontSize: 10,
+            fontSize: 11,
             color: '#fffa',
             formatter: '{value} %'
           },
@@ -270,7 +277,7 @@ export default {
 .techy-chart {
   /* background: #cccc; */
   position: absolute;
-  top: -36%;
+
   height: 150%;
   width: 100%;
 }

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

@@ -55,7 +55,7 @@ export default {
   grid-auto-rows: min-content;
   gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
   justify-content: end;
-  align-content: center;
+  align-content: flex-start;
 }
 
 .analysis-item {

src/views/3DOverview/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
+    <!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
     <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <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">
@@ -37,13 +37,15 @@
                   </p>
                   <p>
                     <b>通信状态 :</b>
+                    <span class="round-dot">
                       <span
-                      class="round-dot"
+                        class="dot-icon"
                         :class="{
-                        'danger-dot': currentEquipment.status === '故障',
+                          'green-dot': currentEquipment.status === '生产中',
-                        'warning-dot': currentEquipment.status === '调试中'
+                          'red-dot': currentEquipment.status === '故障',
+                          'yellow-dot': currentEquipment.status === '调试中'
                         }"
-                    >
+                      ></span>
                       {{ currentEquipment.status }}
                     </span>
                   </p>
@@ -259,12 +261,14 @@ export default {
 }
 /* 工序质量分析 */
 .ws-quality {
-  height: calc(228px * var(--beilv));
+  /* height: calc(228px * var(--beilv)); */
+  min-height: calc(136px * var(--beilv));
   flex: 1;
 }
 /* 产线成品率 */
 .production {
-  height: calc(195px * var(--beilv));
+  height: calc(256px * var(--beilv));
+  position: relative;
 }
 
 .bottom-part {
@@ -328,8 +332,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  height: calc(136px * var(--beilv));
+  height: calc(128px * var(--beilv));
-  width: calc(176px * var(--beilv));
+  width: calc(188px * var(--beilv));
 }
 
 .techy-body-part__middle__inner {
@@ -338,6 +342,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  /* gap: calc(6px * var(--beilv)); */
 }
 
 .techy-body-part__middle__inner p {
@@ -346,6 +351,7 @@ export default {
   font-size: calc(12px * var(--beilv));
   line-height: 1.5;
   color: #fff;
+  display: flex;
 }
 
 .techy-body-part__middle__inner p > span {
@@ -354,19 +360,40 @@ export default {
 }
 
 .techy-body-part__middle__inner p > span.round-dot {
-  padding-left: calc(28px * var(--beilv));
+  /* padding-left: calc(28px * var(--beilv)); */
+  display: flex;
+  align-items: center;
+  gap: calc(4px * var(--beilv));
 }
 
-.round-dot::before {
+.dot-icon {
-  content: '';
+  height: calc(16px * var(--beilv));
-  position: absolute;
+  width: calc(16px * var(--beilv));
+}
+
+.red-dot {
+  background: url(./components/assets/red.png) 20% center / 100% no-repeat;
+}
+.green-dot {
+  background: url(./components/assets/green.png) 20% center / 100% no-repeat;
+}
+.yellow-dot {
+  background: url(./components/assets/orange.png) 20% center / 100% no-repeat;
+}
+.blue-dot {
+  background: url(./components/assets/blue.png) 20% center / 100% no-repeat;
+}
+
+/* .round-dot::before {
+  content: ''; */
+/* position: absolute;
   top: calc(4px * var(--beilv));
-  left: calc(16px * var(--beilv));
+  left: calc(16px * var(--beilv)); */
-  width: calc(8px * var(--beilv));
+/* width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background-color: rgb(82, 231, 82);
   border-radius: calc(4px * var(--beilv));
-}
+} */
 
 .danger-dot::before {
   background-color: #e71837;

src/views/EquipmentManager/HomePage.vue

@@ -37,11 +37,27 @@
         <div class="row-2">
           <!-- 设备分析 -->
           <techy-container :title="'设备分析'" icon="趋势搜索">
-            <select id="productLine" name="productLine" class="product-line-selection">
+            <!-- <select id="productLine" name="productLine" class="product-line-selection">
               <option value="1">产线一</option>
               <option value="2">产线二</option>
               <option value="3">产线三</option>
-            </select>
+            </select> -->
+
+            <template v-slot:titleSelect>
+              <el-select
+                v-model="plSelect"
+                size="mini"
+                :popper-append-to-body="false"
+                clearable
+                placeholder="请选择产线"
+                class="pl-select"
+                style="width: 140px; height: 100%; margin-left: 12px;"
+              >
+                <el-option label="产线A" value="1" />
+                <el-option label="产线B" value="2" />
+              </el-select>
+            </template>
+
             <div class="equipment-analysis__inner">
               <div>
                 <TechyBox class="pl-jdl">
@@ -169,6 +185,7 @@ export default {
   props: {},
   data() {
     return {
+      plSelect: null,
       equipmentExceptionProps,
       equipmentExceptionDatalist,
       equipmentAlarmProps,
@@ -376,4 +393,16 @@ export default {
   top: calc(24px * var(--beilv));
   left: calc(140px * var(--beilv));
 }
+
+.pl-select {
+  /* height: calc(18px * var(--beilv)); */
+}
+
+.pl-select >>> input {
+  /* height: 100%; */
+  outline: none;
+  border: none;
+  background: #31878c45;
+  color: white;
+}
 </style>

src/views/EquipmentManager/components/TechyContainer.vue

@@ -14,6 +14,8 @@
     <div class="container-title-wrapper">
       <span class="container-icon" v-html="computeIcon" />
       <span class="container-title">{{ title }}</span>
+
+      <slot name="titleSelect" />
     </div>
 
     <slot />

src/views/EquipmentManager/components/TechyTable.vue

@@ -29,7 +29,7 @@
             :inject-data="{ ...scope.row, ...item }"
             @emitData="emitData"
           />
-          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+          <span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
         </template>
       </el-table-column>
       <slot name="content" />

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -2,7 +2,7 @@
   <div class="techy-vertical-table">
     <div v-for="(row, index) in tableProps" :key="'row' + index" class="trow">
       <span class="thead">{{ row.label }}</span>
-      <span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody">
+      <span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody" :title="item[row.prop]">
         <template v-if="!row.subcomponent">
           {{ item[row.prop] }}
         </template>

src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue

@@ -25,8 +25,12 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        xAxis: [
+        tooltip: {
-          {
+          show: true,
+          type: 'shadow',
+          trigger: 'item'
+        },
+        xAxis: {
           type: 'category',
           data: ['A', 'B', 'C', 'D', 'E'],
           axisTick: {
@@ -40,8 +44,7 @@ export default {
           axisLabel: {
             color: '#fff'
           }
-          }
+        },
-        ],
         yAxis: [
           {
             type: 'value',
@@ -58,7 +61,7 @@ export default {
             axisLabel: {
               color: '#ffffff9d'
             },
-            axisTick: { show : false }
+            axisTick: { show: false }
           }
         ],
         series: [

src/views/EquipmentManager/mockData.js

@@ -42,26 +42,26 @@ export const equipmentExceptionProps = [
 ]
 
 export const equipmentExceptionDatalist = [
-  { "eqName": "冷却", "pl": "A", "content": "路因同义价带本知生联矿列。", "creator": "马磊", "time": "2021-04-15 22:00:34", "priority": 3 },
+  { "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
-  { "eqName": "固化", "pl": "B", "content": "将海构组过重开每活原总价着。", "creator": "贺刚", "time": "2021-03-15 06:30:01", "priority": 2 },
+  { "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
-  { "eqName": "固化", "pl": "B", "content": "形管始会回从观且明确意主照根受步究。", "creator": "冯丽", "time": "2020-11-21 07:09:16", "priority": 2 },
+  { "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
-  { "eqName": "磨边", "pl": "A", "content": "己由九保先造线后还单省于手。", "creator": "梁秀兰", "time": "2020-03-21 08:21:36", "priority": 3 },
+  { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
-  { "eqName": "一镀", "pl": "B", "content": "变西列场展越备线活酸被究他压建院家。", "creator": "卢敏", "time": "2022-10-23 04:45:00", "priority": 2 },
+  { "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
-  { "eqName": "钢化", "pl": "A", "content": "解听共将取色照品起族西全日色。", "creator": "方勇", "time": "2020-12-11 06:41:06", "priority": 2 },
+  { "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
-  { "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-20 03:36:47", "priority": 2 },
+  { "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
-  { "eqName": "下片", "pl": "A", "content": "厂积各克性型世型我地得圆与时速。", "creator": "姜洋", "time": "2021-11-30 07:56:26", "priority": 3 },
+  { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
-  { "eqName": "钢化", "pl": "A", "content": "证法作无群只放科可少头生广水。", "creator": "赖艳", "time": "2022-10-10 12:01:14", "priority": 1 },
+  { "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
-  { "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
+  { "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
-  { "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
+  { "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
-  { "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
-  { "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 21:15:10", "priority": 2 },
+  { "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
-  { "eqName": "一镀", "pl": "A", "content": "位构命利整线两计统被约张以导理。", "creator": "叶娜", "time": "2022-05-05 22:45:13", "priority": 1 },
+  { "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 },
-  { "eqName": "冷却", "pl": "A", "content": "东改近装商了整标革并该青外育放般体。", "creator": "田磊", "time": "2021-12-01 07:24:59", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
-  { "eqName": "打孔后清洗机", "pl": "A", "content": "查的分口眼约三委斯该的品通身式子听。", "creator": "邱平", "time": "2020-01-31 17:53:18", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
-  { "eqName": "下片", "pl": "B", "content": "连程复而前置很不团数行三西较响运。", "creator": "赵艳", "time": "2021-09-20 18:10:32", "priority": 2 },
+  { "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
-  { "eqName": "冷却", "pl": "B", "content": "育进品石完立行按效安标真。", "creator": "江伟", "time": "2022-08-05 17:29:44", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
-  { "eqName": "钢后清洗机", "pl": "B", "content": "委且到示为位要强等住整县值八。", "creator": "周洋", "time": "2021-01-26 02:49:09", "priority": 3 },
+  { "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
-  { "eqName": "上片", "pl": "A", "content": "报据深广一统南车步约果龙值区识车深。", "creator": "邱超", "time": "2021-12-21 20:41:53", "priority": 1 },
+  { "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
 ]
 
 /** 设备异常报警 */
@@ -107,35 +107,35 @@ export const equipmentAlarmProps = [
 
 export const equipmentAlarmDatalist = [
   {
-    "pl": "B", "eqName": "丝印", "eqCode": "B5SP20200109025453", "content": "常下命般里究千么间龙该海战据运更。", "priority": 3
+    "pl": "B", "eqName": "丝印机", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
   },
-  { "pl": "A", "eqName": "下片", "eqCode": "A2UL20210605043851", "content": "而至收选查万众家除候包要意集。", "priority": 2 },
+  { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
-  { "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200328154356", "content": "石十求四指么放与程到置身技红。", "priority": 1 },
+  { "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
-  { "pl": "B", "eqName": "一镀", "eqCode": "B5FC20220307070115", "content": "即计报做切除听见济共金然维走。", "priority": 2 },
+  { "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
-  { "pl": "B", "eqName": "固化", "eqCode": "B7CO20190927110003", "content": "应其得候解北运样价可强先们速。", "priority": 2 },
+  { "pl": "B", "eqName": "丝印机", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
   {
-    "pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3
+    "pl": "A", "eqName": "清洗机", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
   },
-  { "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 },
+  { "pl": "A", "eqName": "丝印机", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
   {
-    "pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2
+    "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
   },
-  { "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 },
+  { "pl": "B", "eqName": "钢化炉", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
   {
-    "pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2
+    "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
   },
-  { "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 },
+  { "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
   {
-    "pl": "B", "eqName": "预热", "eqCode": "B1PR20201220183649", "content": "志收一支习于何况支于自原地书飞感。", "priority": 2
+    "pl": "B", "eqName": "丝印机", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
   },
-  { "pl": "A", "eqName": "二镀", "eqCode": "A3SC20220414054819", "content": "义点做产往新以速结工情最六素难强干。", "priority": 2 },
+  { "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
-  { "pl": "A", "eqName": "固化", "eqCode": "A8CO20200704010549", "content": "例强起取南然任都来因山该收次代相。", "priority": 2 },
+  { "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
-  { "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
+  { "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
-  { "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
+  { "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
-  { "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
+  { "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
-  { "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
+  { "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
-  { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
+  { "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
-  { "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
+  { "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
 ]
 
 /** 设备分析 */

src/views/QualityManager/HomePage.vue

@@ -129,15 +129,9 @@
               <div class="grow flex gap-16">
                 <div class="width-222">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
+                    <techy-analysis-header :show-top-icon="false">
-                    <div style="position: absolute;  top: 0; left:0; width: 100%; height: 100%;">
+                      产线缺陷分析
-                      <span
+                      <template v-slot:dateSelect>
-                        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' }"
@@ -178,14 +172,23 @@
                             月
                           </span>
                         </div>
+                      </template>
+                    </techy-analysis-header>
+                    <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>
                   </techy-box>
                 </div>
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header>产品成品率</techy-analysis-header>
+                    <techy-analysis-header class="production-rate">
-                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                      产品成品率
-                      <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
+                      <template v-slot:dateSelect>
-                    </div>
                         <div class="date-select">
                           <span
                             :class="{ 'date-select__active': dateMode2 === 'day' }"
@@ -206,6 +209,11 @@
                             月
                           </span>
                         </div>
+                      </template>
+                    </techy-analysis-header>
+                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                      <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
+                    </div>
                   </techy-box>
                 </div>
               </div>
@@ -581,17 +589,22 @@ export default {
 .pl-select,
 .date-select {
   position: absolute;
-  top: calc(16px * var(--beilv));
+  top: 0;
-  right: calc(22px * var(--beilv));
+  right: 0;
+  /* top: calc(16px * var(--beilv)); */
+  /* right: calc(22px * var(--beilv)); */
   border-radius: calc(2px * var(--beilv));
   overflow: hidden;
   display: flex;
+  align-items: center;
+  height: 100%;
   cursor: pointer;
 }
 
 .pl-select {
   right: unset;
-  left: calc(10px * var(--beilv));
+  left: 0;
+  /* left: calc(10px * var(--beilv)); */
 }
 
 .pl-select span,
@@ -613,4 +626,14 @@ export default {
 .width-222 {
   width: calc(375px * var(--beilv));
 }
+
+@media all and (max-width: 2040px) {
+  .production-rate {
+    /* text-align: left; */
+  }
+
+  .production-rate >>> .top-icon:last-of-type {
+    display: none;
+  }
+}
 </style>

src/views/QualityManager/components/TechyAnalysisHeader.vue

@@ -2,12 +2,12 @@
   <div class="techy-analysis-header">
     <template v-if="type === 'special'">
       <div
-        style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
+        style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
       >
         <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
 
         <div style="flex: 1; white-space: nowrap; overflow: hidden;">
-          <span class="top-icon">
+          <span class="top-icon" style="transform: skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -55,10 +55,10 @@
               </g>
             </svg>
           </span>
-          <span class="techy-analysis-header__title">
+          <span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
             <slot />
           </span>
-          <span class="top-icon">
+          <span class="top-icon" style="transform: skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -108,9 +108,12 @@
           </span>
         </div>
 
-        <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
+        <div
-          <div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
+          class="legend legend-right"
-          <div class="legend-item plb">产线B</div>
+          style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
+        >
+          <div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
+          <div class="legend-item plb" style=" ">产线B</div>
         </div>
       </div>
     </template>
@@ -216,6 +219,8 @@
         </svg>
       </span>
     </template>
+
+    <slot name="dateSelect" />
   </div>
 </template>
 
@@ -242,6 +247,9 @@ export default {
 .techy-analysis-header {
   text-align: center;
   margin-bottom: calc(16px * var(--beilv));
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
 }
 
 .techy-analysis-header__title {
@@ -257,11 +265,19 @@ export default {
   margin-bottom: calc(2px * var(--beilv));
 }
 
+.legend-right {
+  display: flex;
+  gap: calc(8px * var(--beilv));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .legend-item {
   font-size: calc(10px * var(--beilv));
   line-height: 1.5;
   color: #dff1fe;
-  display: inline-block;
+  display: flex;
+  align-items: center;
 }
 
 .legend-item::before {

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

@@ -142,7 +142,7 @@ export default {
           show: true,
           position: 'top',
           color: '#fff8',
-          fontSize: 8,
+          fontSize: 10,
           offset: [0, 6]
         }
       }
@@ -174,9 +174,22 @@ export default {
           },
           axisLabel: {
             color: '#fff8',
-            fontSize: 10
+            fontSize: 12
           },
-          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
+          axisPointer: {
+            show: true,
+            type: 'shadow',
+            label: {
+              show: true,
+              formatter: params => {
+                let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
+                let v = [`<${info_arr[0].name}>详细数据: \n`]
+                info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
+                return v.join('\n')
+              }
+            }
+          }
         },
         yAxis: {
           type: 'value',

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

@@ -24,7 +24,7 @@ export default {
     return {
       chart: null,
       configs: {
-        color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
+        color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
         tooltip: {
           trigger: 'axis',
           extraCssText: 'width: 180px !important; ',
@@ -36,7 +36,7 @@ export default {
           }
         },
         grid: {
-          top: '25%',
+          top: 56,
           left: '2%',
           right: '5%',
           bottom: '5%',
@@ -66,14 +66,15 @@ export default {
 
         yAxis: [
           {
-            name: '成品率',
+            name: '成品率            ',
             type: 'value',
             min: 'dataMin',
             splitNumber: 4,
             nameTextStyle: {
               color: 'rgba(255,255,255,0.7)',
-              fontSize: 12,
+              fontSize: 10,
-              align: 'right'
+              align: 'left',
+              verticalAlign: 'bottom'
             },
             axisLine: {
               lineStyle: {

src/views/QualityManager/retrospect/equipment/parameter-test.vue

@@ -1,19 +1,47 @@
 <template>
   <div class="custom-container">
-    <el-row :gutter="20" style="height: calc(100vh - 150px)">
+    <el-row :gutter="8" style="height: calc(100vh - 150px)">
       <el-col :span="4">
         <aside class="custom-container__common left-side-container">
-          <section class="left-side-container__title">
+          <!-- <section class="left-side-container__title">
             <span v-if="logoUrl" class="logo">
               <img :src="logoUrl" alt="side container logo">
             </span>
             <span class="text-content">
               {{ factoryName }}
             </span>
+          </section> -->
+
+          <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="left-side-container__content">
           <!-- 导航栏 -->
+          <!-- <section class="left-side-container__content">
             <el-tree
               class="custom-tree"
               :icon-class="'el-icon-document-copy'"
@@ -21,6 +49,15 @@
               :props="defaultProps"
               @node-click="handleNodeClick"
             />
+          </section> -->
+
+          <section class="routes-area" v-if="showList">
+            <el-menu @select="handleSelect">
+              <!-- 此处假设了只有一个根节点 -->
+              <template v-for="(menuItem, index) in treeData">
+                <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
+              </template>
+            </el-menu>
           </section>
         </aside>
       </el-col>
@@ -53,12 +90,15 @@ import HeadForm from '@/components/basicData/HeadForm'
 import testData from './parameter.test.data.js'
 import moment from 'moment'
 import writeXlsxFile from 'write-excel-file'
+import TestMenuItem from './parameter/components/TestMenuItem.vue'
 
 export default {
   name: 'EquipmentRetrospectParameter',
-  components: { BaseTable, HeadForm },
+  components: { BaseTable, HeadForm, TestMenuItem },
   data() {
     return {
+      showList: false,
+      menuListTrue: [],
       factoryName: 'xxx工厂',
       logoUrl: require('../../../../assets/img/cnbm.png'),
       treeData: null,
@@ -117,26 +157,45 @@ export default {
     }
   },
   created() {
+    this.showList = false
+
     this.init()
 
     this.fetchList('eq-tree').then(res => {
       if (res.data) {
         const eqTree = res.data[0] // 只会返回一条工厂数据
         this.factoryName = eqTree.name
-        // 构造tree展示的结构
+        this.treeData = this.preHandleList(eqTree)
-        eqTree.pdlList.forEach(item => {
+        this.showList = true
+      }
+    })
+
+    this.fetchList('work-order').then(res => {
+      if (res.data.records) {
+        this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
+      }
+    })
+  },
+
+  methods: {
+    preHandleList(list) {
+      let result = []
+
+      list.pdlList.forEach(item => {
         const treeItem = {}
-          treeItem.label = item.name
+        treeItem.name = item.name
+        // 整理产线
         if (item.wsList.length) {
           treeItem.children = []
           item.wsList.forEach(workSection => {
             const wsItem = {}
-              wsItem.label = workSection.name
+            wsItem.name = workSection.name
+            // 整理设备
             if (workSection.eqList.length) {
               wsItem.children = []
               workSection.eqList.forEach(eq => {
                 const eqItem = {}
-                  eqItem.label = eq.eqName
+                eqItem.name = eq.eqName
                 eqItem.id = eq.eqId
                 wsItem.children.push(eqItem)
               })
@@ -144,19 +203,13 @@ export default {
             treeItem.children.push(wsItem)
           })
         }
+
         // 产线
-          this.productLineList.push(treeItem)
+        result.push(treeItem)
-        })
-        this.treeData = this.productLineList
-      }
-    })
-    this.fetchList('work-order').then(res => {
-      if (res.data.records) {
-        this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
-      }
       })
+
+      return result
     },
-  methods: {
     init() {
       this.productLineList.splice(0)
       this.headFormConfig[0].selectOptions.splice(0)
@@ -281,6 +334,10 @@ export default {
       if (data.id) {
         this.selectedEquipmentId = data.id
       }
+    },
+    handleSelect(index, indexPath) {
+      const [id, name] = index.split('$--$')
+      this.selectedEquipmentId = id
     }
   }
 }
@@ -295,14 +352,13 @@ export default {
 .custom-container__common {
   background-color: #fff;
   padding: 0;
-  border-radius: 4px;
+  border-radius: 8px;
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
 }
 
 .left-side-container {
   height: calc(100vh - 147px);
   padding: 0;
-  background: #fafafa;
+  // background: #fafafa;
   display: flex;
   flex-direction: column;
 
@@ -320,7 +376,7 @@ export default {
 
   .left-side-container__content {
     flex: 1 1;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 
@@ -356,4 +412,25 @@ export default {
 .custom-tree >>> .is-current .el-tree-node__content {
   background: #fafafa;
 }
+
+.title-area {
+  height: 72px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 24px;
+}
+
+.routes-area {
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.title-icon {
+  height: 24px;
+  width: 24px;
+}
 </style>

src/views/QualityManager/retrospect/equipment/parameter/components/TestMenuItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
+    <!-- 标题 -->
+    <template slot="title">
+      <!-- <i class="el-icon-menu"></i> -->
+      <i style="line-height: 1;">
+        <svg
+          width="16px"
+          height="16px"
+          viewBox="0 0 16 16"
+          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, -202.000000)" fill-rule="nonzero">
+              <g id="编组-7" transform="translate(376.000000, 200.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                  <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                  <path
+                    d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                    id="形状"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </i>
+      <span>{{ menuItem.name }}</span>
+    </template>
+
+    <!-- 主体 -->
+    <template v-for="(submenuItem, idx) in menuItem.children">
+      <TestMenuItem :menuItem="submenuItem" :level="level + 1" />
+    </template>
+  </el-submenu>
+
+  <!-- 一级菜单 -->
+  <el-menu-item v-else :index="constructIndex(menuItem)">
+    <!-- <i v-if="level !== 1" class="el-icon-aim"></i>
+      <i v-else class="el-icon-menu"></i> -->
+    <i style="line-height: 1px" v-if="level !== 1">
+      <svg
+        width="8px"
+        height="8px"
+        viewBox="0 0 8 8"
+        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(-396.000000, -246.000000)"
+            fill="currentColor"
+            fill-rule="nonzero"
+          >
+            <g id="编组-3" transform="translate(396.000000, 240.000000)">
+              <path
+                d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
+                id="椭圆形"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <i style="line-height: 1;" v-else>
+      <svg
+        width="16px"
+        height="16px"
+        viewBox="0 0 16 16"
+        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, -202.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(376.000000, 200.000000)">
+              <g id="菜单" transform="translate(0.000000, 2.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path
+                  d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                  id="形状"
+                  fill="currentColor"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <span slot="title">{{ menuItem.name }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'TestMenuItem',
+  props: {
+    level: {
+      type: Number,
+      default: 1
+    },
+    index: {
+      type: String,
+      default: ''
+    },
+    menuItem: {
+      default: () => ({})
+    },
+    defaultActive: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    constructIndex(menuItem) {
+      return menuItem.id + '$--$' + menuItem.name
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/views/UserPage/TestTree.vue

@@ -30,8 +30,8 @@
     <section class="routes-area" v-if="showList">
       <el-menu @select="handleSelect">
         <!-- 此处假设了只有一个根节点 -->
-        <template v-for="(menuItem, index) in menuListTrue[0].children">
+        <template v-for="(menuItem, index) in menuListTrue[0].children" >
-          <TestMenuItem :level="1" :menuItem="menuItem" />
+          <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
         </template>
       </el-menu>
     </section>

src/views/material-manage/cockpit/index.vue

@@ -262,6 +262,7 @@ export default {
   .box-padding {
     padding: 0 16px 16px;
     height: 100%;
+    opacity: 0.8;
   }
 }
 </style>

src/views/orderManage/orderManagerCockpit/cockpit.vue

@@ -319,6 +319,7 @@ export default {
   .box-padding {
     padding: 0 16px;
     height: 100%;
+    opacity: 0.8;
   }
 }
 </style>

src/views/orderManage/orderManagerCockpit/components/orderStatus.vue

@@ -46,6 +46,6 @@ export default {
 </script>
 <style scoped>
 .state-box {
-  height: 15px;
+  height: calc(15px * var(--beilv))
 }
 </style>

src/views/orderManage/orderManagerCockpit/components/workOrder.vue

@@ -15,17 +15,17 @@
           <span class="state">{{ item.state }}</span>
         </span>
       </p>
-      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <p style="paddingLeft: 15px">
         <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
         <span class="fr">
           产线：
           <span class="light-color" :style="{marginRight: 25 * beilv + 'px'}">{{ item.line }}</span>
         </span>
       </p>
-      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <p style="paddingLeft: 15px">
         <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
       </p>
-      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <div style="paddingLeft: 15px">
         <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
         <span v-else class="light-color">订单进度</span>
         <span class="light-color fr">{{ item.percentage }}</span>
@@ -78,10 +78,10 @@ export default {
       display: inline-block;
       content: "";
       width: 4px;
-      height: 14px;
+      height: calc(14px * var(--beilv));
       border-radius: 2px;
       margin-right: 8px;
-      vertical-align: middle;
+      vertical-align: top;
       background-color: #4BFFC8;
     }
     .state {