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

Reviewed-on: #14

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

@@ -84,6 +84,15 @@ export default {
           left: 64,
           bottom: 28
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            axis: 'x'
+          },
+          extraCssText: 'width: 152px !important; height: 100px !important;'
+        },
         xAxis: [
           {
             type: 'category',
@@ -121,10 +130,11 @@ export default {
               fontSize: 10
             },
             splitLine: {
-              show: false
-              // lineStyle: {
-              //   color: '#fff3'
-              // }
+              show: true,
+              lineStyle: {
+                color: '#fff1',
+                type: 'dotted'
+              }
             }
           },
           {
@@ -148,10 +158,11 @@ export default {
               fontSize: 10
             },
             splitLine: {
-              show: false
-              // lineStyle: {
-              //   color: '#fff3'
-              // }
+              show: true,
+              lineStyle: {
+                color: '#fff1',
+                type: 'dotted'
+              }
             }
           },
           {
@@ -168,8 +179,10 @@ export default {
             type: 'value',
             splitNumber: 3,
             splitLine: {
+              show: true,
               lineStyle: {
-                color: '#fff3'
+                color: '#fff1',
+                type: 'dotted'
               }
             },
             axisLabel: {

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

@@ -51,6 +51,15 @@ export default {
           bottom: 0,
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            axis: 'x'
+          },
+          extraCssText: 'width: 152px !important; height: 100px !important;'
+        },
         xAxis: {
           type: 'category',
           boundaryGap: false,
@@ -89,8 +98,10 @@ export default {
           },
           axisTick: { show: false },
           splitLine: {
+            show: true,
             lineStyle: {
-              color: '#fff3'
+              color: '#fff1',
+              type: 'dotted'
             }
           }
         },

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

@@ -58,7 +58,7 @@ const tableProps = [
   { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
 ]
 const tableData = [
-  { eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
+  { eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
   { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
   { eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
@@ -66,7 +66,7 @@ const tableData = [
   { eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
   { eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
   { eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
+  { eqName: '磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' },
   { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
   { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
@@ -74,7 +74,7 @@ const tableData = [
   { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
-  { eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
+  { eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
   { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
@@ -130,7 +130,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  overflow-y: auto;
+  /* overflow-y: auto; */
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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/RightContentAlert.vue

@@ -60,13 +60,13 @@ const tableProps = [
 ]
 
 const tableData = [
-  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
-  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' },
+  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' },
   { eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
   { eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
   { eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
   { eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
-  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
+  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' },
   { eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
   { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
   {
@@ -78,8 +78,8 @@ const tableData = [
   },
   { eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
   { eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
-  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 4, duration: '29 min' },
-  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 4, duration: '47 min' },
+  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' },
+  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' },
   { eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
   { eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
   { eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
@@ -144,7 +144,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  overflow-y: auto;
+  /* overflow-y: auto; */
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="right-content-quality-analysis">
-    <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
+  <div
+    :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%',
-          top: '35%',
+          left: '64%',
+          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%'],
-            radius: ['60%', '80%'],
+            center: ['65%', '60%'],
+            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.subtextStyle.fontSize = fs10
+      this.configs.title.textStyle.fontSize = titleSize
+      this.configs.title.subtextStyle.fontSize = subtitleSize
 
-      this.configs.legend.top = '10%'
-      this.configs.legend.itemGap = 0
+      this.configs.legend.top = '24%'
+      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.second.fontSize = fs10
-      this.configs.series[0].label.rich.third.fontSize = fs10
-      this.configs.series[0].label.rich.fourth.fontSize = fs10
-      this.configs.series[0].label.rich.fifth.fontSize = fs10
+      this.configs.series[0].label.rich.first.fontSize = fs12
+      this.configs.series[0].label.rich.second.fontSize = fs12
+      this.configs.series[0].label.rich.third.fontSize = fs12
+      this.configs.series[0].label.rich.fourth.fontSize = fs12
+      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" class="techy-chart" />
-  </div>
+  <div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
 </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%',
-          left: 0,
-          right: 12,
-          bottom: '5%',
+          top: '40%',
+          left: '5%',
+          right: '6%',
+          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/components/RightContentRealtimeProduction.vue

@@ -1,43 +1,240 @@
 <template>
-  <techy-box style="width: 100%; height: calc(100% - 36px);">
-    <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
-
-    <new-bar
-      chart-name="realtime-cost-production"
-      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
-      :data-list="[
+  <!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
         {
-          topColor: 'rgba(59, 76, 118, 0.2)',
-          bottomColor: '#49FBD6',
           name: '产量',
-          data: [64, 91, 55, 65, 37, 77]
+          list: [64, 91, 55, 65, 37, 77]
         },
         {
-          topColor: 'rgba(59, 76, 118, 0.2)',
-          bottomColor: '#31A2FF',
           name: '能耗',
-          data: [32, 65, 65, 54, 37, 77]
+          list: [32, 65, 65, 54, 37, 77]
         }
-      ]"
-    />
-  </techy-box>
+      ]" /> -->
+  <div class="techy-chart" ref="realtimeLineChart"></div>
 </template>
 
 <script>
-import TechyBox from './TechyBox.vue'
-import newBar from './newBar.vue'
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
-  name: 'RealtimeProductionHorizontalBarChart',
-  components: { TechyBox, newBar },
-  props: {},
-  data() {
-    return {}
+  name: 'RealtimeLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
     }
+  },
+  data() {
+    const colors = ['#1A99FF', '#F0D63C', '#E02094']
+
+    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
+    let data = [
+      // 温度走势
+      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
+      // 电流走势
+      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
+      // 电压走势
+      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      })
+    ]
+    let wendu = data[0]
+    let dianliu = data[1]
+    let dianya = data[2]
+
+    return {
+      chart: null,
+      option: {
+        color: colors,
+        legend: {
+          top: 28,
+          right: 40,
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: '#fff9',
+            fontSize: 10
+          }
+          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
+        },
+        grid: {
+          top: 80,
+          left: 88,
+          right: 24,
+          bottom: 32
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            axis: 'x'
+          },
+          extraCssText: 'width: 100px !important;'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
+            axisTick: { show: false },
+            axisLabel: {
+              color: '#fff9'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: '能耗        ',
+            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+            type: 'value',
+            splitNumber: 4,
+            onZero: true,
+            position: 'left',
+            offset: 40,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#5982B2',
+                width: 1
+              }
+            },
+            axisLabel: {
+              color: '#fff9',
+              fontSize: 10
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff1',
+                type: 'dotted'
+              }
+            }
+          },
+          {
+            name: '产量        ',
+            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+            type: 'value',
+            splitNumber: 4,
+            axisTick: { show: false },
+            onZero: true,
+            position: 'left',
+            offset: 0,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#5982B2',
+                width: 1
+              }
+            },
+            axisLabel: {
+              color: '#fff9',
+              fontSize: 10
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff1',
+                type: 'dotted'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '产线1',
+            type: 'line',
+            yAxisIndex: 0,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianliu,
+            symbol: 'none'
+          },
+          {
+            name: '产线2',
+            type: 'line',
+            yAxisIndex: 1,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianya,
+            symbol: 'none'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
 }
 </script>
+
 <style scoped>
 .techy-chart {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
 }

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

@@ -0,0 +1,286 @@
+<template>
+  <div ref="techyBar" class="techy-bar"></div>
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
+
+export default {
+  name: 'TechyBarFor3DPage',
+  props: {
+    datainfo: {
+      type: Array,
+      default: () => [
+        {
+          name: '产线A',
+          list: [100, 102, 104, 105, 100, 117]
+        },
+        {
+          name: '产线B',
+          list: [110, 92, 124, 85, 100, 120]
+        }
+      ]
+    },
+    unitName: {
+      type: String,
+      default: ''
+    },
+    extraSpaceBetweenZero: {
+      type: Number,
+      default: 25
+    }
+  },
+  mixins: [resize],
+  data() {
+    const color_gradients = [
+      /** 蓝 */
+      {
+        direction: 'to top',
+        from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
+        to: '#49B2FF00',
+        topAndBottom: '#49B2FF9F'
+      },
+      /** 绿 */
+      {
+        direction: 'to top',
+        from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
+        to: '#49FBD600',
+        topAndBottom: '#49FBD69F'
+      }
+    ]
+
+    let result = []
+
+    this.datainfo.map((pl, index) => {
+      let topCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolOffset: ['25%', '-50%'],
+        // symbolSize: ['100%', 6],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          // color: color_gradients[index].topAndBottom
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+      let bottomCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolOffset: ['-25%', '50%'],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          color: color_gradients[index].from
+        }
+      }
+
+      let mainBar = {
+        __position: 'main',
+        type: 'bar',
+        name: pl.name,
+        // barWidth: 20, // 不需要设置 barWidth
+        barGap: '10%',
+        barCategoryGap: '48%',
+        data: pl.list,
+        z: 0,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].from
+              },
+              {
+                offset: 0.15,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff8',
+          fontSize: 8,
+          offset: [0, 6]
+        }
+      }
+
+      result.push(topCircle)
+      result.push(mainBar)
+      result.push(bottomCircle)
+    })
+
+    return {
+      BottomPic,
+      width: 0,
+      chart: null,
+      option: {
+        legend: {
+          icon: 'rect',
+          itemWidth: 8,
+          itemHeight: 8,
+          top: '2%',
+          right: '10%',
+          textStyle: {
+            color: '#fff8'
+          },
+          data: this.datainfo.map(item => item.name)
+        },
+        grid: {
+          top: 24,
+          left: '8%',
+          bottom: 24
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {}
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10
+          },
+          data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F']
+        },
+        yAxis: {
+          type: 'value',
+          // min: -25,
+          min: this.extraSpaceBetweenZero * -1,
+          name: this.unitName,
+          nameTextStyle: {
+            color: '#fff8',
+            fontSize: 8,
+            verticalAlign: 'top',
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10,
+            /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
+            formatter: function(value, index) {
+              if (value < 0) {
+                return ''
+              }
+              return value
+            }
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#569acd',
+              type: 'dotted',
+              opacity: 0.2
+            }
+          }
+        },
+
+        series: result,
+
+        graphic: [
+          {
+            type: 'image',
+            left: 0,
+            bottom: 0,
+            style: {
+              image: 'image url',
+              height: 0,
+              width: 0
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.refreshOption)
+    if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
+
+    this.$nextTick(() => {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    })
+  },
+  methods: {
+    updateOption(option) {
+      // console.log('option', this.BottomPic.default)
+      let width = this.$refs.techyBar.querySelector('div').clientWidth
+      let height = this.$refs.techyBar.querySelector('div').clientHeight
+      option.graphic[0].style.width = width * 0.88
+      option.graphic[0].style.height = height * 0.3
+      option.graphic[0].style.image = this.BottomPic.default
+      option.graphic[0].left = '8%'
+      option.graphic[0].bottom = 24
+    },
+    refreshOption() {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.techy-bar >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

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

@@ -78,7 +78,7 @@ export default {
   border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
   display: inline-block;
   position: relative;
-  padding: calc(24px * var(--beilv));
+  padding: calc(20px * var(--beilv));
   width: 100%;
   height: 100%;
   box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);

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

@@ -3,8 +3,8 @@
     <img class="logo-img" src="./logo.png" alt="cnbm" />
     <span class="techy-header__title">{{ headTitle }}</span>
 
-    <div class="date">2022.10.14</div>
-    <div class="time">20:12:24</div>
+    <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
+    <div class="time">{{ now.format('HH:mm:ss') }}</div>
 
     <div class="fullscreen-btn">
       <span @click="handleClick('home')" v-html="homeSvg" />
@@ -16,6 +16,7 @@
 
 <script>
 import Cookie from 'js-cookie'
+import moment from 'moment'
 
 // const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -63,7 +64,20 @@ export default {
       fullScreenSvg,
       homeSvg,
       unfullScreenSvg,
-      isFullScreen: false
+      isFullScreen: false,
+      now: moment(),
+      interval: null
+    }
+  },
+  mounted() {
+    this.interval = setInterval(() => {
+      this.now = moment()
+    }, 1000)
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+      this.interval = null
     }
   },
   methods: {

src/views/3DOverview/index.vue

@@ -37,13 +37,15 @@
                   </p>
                   <p>
                     <b>通信状态 :</b>
+                    <span class="round-dot">
                       <span
-                      class="round-dot"
+                        class="dot-icon"
                         :class="{
-                        'danger-dot': currentEquipment.status === '故障',
-                        'warning-dot': currentEquipment.status === '调试中'
+                          'green-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));
-  width: calc(176px * var(--beilv));
+  height: calc(128px * 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 {
-  content: '';
-  position: absolute;
+.dot-icon {
+  height: calc(16px * var(--beilv));
+  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));
-  width: calc(8px * var(--beilv));
+  left: calc(16px * 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": "B", "content": "将海构组过重开每活原总价着。", "creator": "贺刚", "time": "2021-03-15 06:30:01", "priority": 2 },
-  { "eqName": "固化", "pl": "B", "content": "形管始会回从观且明确意主照根受步究。", "creator": "冯丽", "time": "2020-11-21 07:09:16", "priority": 2 },
-  { "eqName": "磨边", "pl": "A", "content": "己由九保先造线后还单省于手。", "creator": "梁秀兰", "time": "2020-03-21 08:21:36", "priority": 3 },
-  { "eqName": "一镀", "pl": "B", "content": "变西列场展越备线活酸被究他压建院家。", "creator": "卢敏", "time": "2022-10-23 04:45:00", "priority": 2 },
-  { "eqName": "钢化", "pl": "A", "content": "解听共将取色照品起族西全日色。", "creator": "方勇", "time": "2020-12-11 06:41:06", "priority": 2 },
-  { "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-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-10-10 12:01:14", "priority": 1 },
-  { "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
-  { "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
-  { "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
-  { "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 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": "2021-12-01 07:24:59", "priority": 2 },
-  { "eqName": "打孔后清洗机", "pl": "A", "content": "查的分口眼约三委斯该的品通身式子听。", "creator": "邱平", "time": "2020-01-31 17:53:18", "priority": 2 },
-  { "eqName": "下片", "pl": "B", "content": "连程复而前置很不团数行三西较响运。", "creator": "赵艳", "time": "2021-09-20 18:10:32", "priority": 2 },
-  { "eqName": "冷却", "pl": "B", "content": "育进品石完立行按效安标真。", "creator": "江伟", "time": "2022-08-05 17:29:44", "priority": 2 },
-  { "eqName": "钢后清洗机", "pl": "B", "content": "委且到示为位要强等住整县值八。", "creator": "周洋", "time": "2021-01-26 02:49:09", "priority": 3 },
-  { "eqName": "上片", "pl": "A", "content": "报据深广一统南车步约果龙值区识车深。", "creator": "邱超", "time": "2021-12-21 20:41:53", "priority": 1 },
+  { "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
+  { "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
+  { "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
+  { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
+  { "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
+  { "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
+  { "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
+  { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
+  { "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
+  { "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
+  { "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
+  { "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
+  { "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 },
+  { "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
+  { "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
+  { "eqName": "钢化炉", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
+  { "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
+  { "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": "B", "eqName": "冷却", "eqCode": "B4CL20200328154356", "content": "石十求四指么放与程到置身技红。", "priority": 1 },
-  { "pl": "B", "eqName": "一镀", "eqCode": "B5FC20220307070115", "content": "即计报做切除听见济共金然维走。", "priority": 2 },
-  { "pl": "B", "eqName": "固化", "eqCode": "B7CO20190927110003", "content": "应其得候解北运样价可强先们速。", "priority": 2 },
+  { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
+  { "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
+  { "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "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": "A8CO20200704010549", "content": "例强起取南然任都来因山该收次代相。", "priority": 2 },
-  { "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
-  { "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
-  { "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
-  { "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
-  { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
-  { "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
+  { "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
+  { "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
+  { "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
+  { "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
+  { "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
+  { "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
+  { "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
+  { "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
 ]
 
 /** 设备分析 */

src/views/QualityManager/HomePage.vue

@@ -46,7 +46,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         :data-list="[
@@ -63,6 +63,19 @@
                             data: [162, 172, 122, 15, 82, 74]
                           }
                         ]"
+                      /> -->
+                      <techy-bar
+                        unit-name="单位/片"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [163, 184, 110, 22, 96, 74]
+                          },
+                          {
+                            name: '产线B',
+                            list: [162, 172, 122, 15, 82, 74]
+                          }
+                        ]"
                       />
                     </div>
                   </techy-box>
@@ -74,7 +87,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         unit-name="单位: 千片"
@@ -92,6 +105,20 @@
                             data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
                           }
                         ]"
+                      /> -->
+                      <techy-bar
+                        unit-name="单位/千片"
+                        :extra-space-between-zero="0.8"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
+                          },
+                          {
+                            name: '产线B',
+                            list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
+                          }
+                        ]"
                       />
                     </div>
                   </techy-box>
@@ -102,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>
-                    <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-analysis-header :show-top-icon="false">
+                      产线缺陷分析
+                      <template v-slot:dateSelect>
                         <div class="pl-select">
                           <span
                             :class="{ 'pl-select__active': plMode === 'a' }"
@@ -151,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>
-                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                      <new-line-stack :data-update-token="dataUpdateToken" />
-                    </div>
+                    <techy-analysis-header class="production-rate">
+                      产品成品率
+                      <template v-slot:dateSelect>
                         <div class="date-select">
                           <span
                             :class="{ 'date-select__active': dateMode2 === 'day' }"
@@ -179,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>
@@ -254,7 +289,8 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
 import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
 import { mapGetters } from 'vuex'
 import screenfull from 'screenfull'
-import NewBar from './components/charts/newBar.vue'
+
+import TechyBar from './components/charts/TechyBar.vue'
 import NewLineStack from './components/charts/newLineStack.vue'
 
 import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
@@ -270,7 +306,7 @@ export default {
     TechyTable,
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
-    NewBar,
+    TechyBar,
     NewLineStack
   },
   data() {
@@ -553,17 +589,22 @@ export default {
 .pl-select,
 .date-select {
   position: absolute;
-  top: calc(16px * var(--beilv));
-  right: calc(22px * var(--beilv));
+  top: 0;
+  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,
@@ -585,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 class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
-          <div class="legend-item plb">产线B</div>
+        <div
+          class="legend legend-right"
+          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

@@ -0,0 +1,289 @@
+<template>
+  <div ref="techyBar" class="techy-bar"></div>
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
+
+export default {
+  name: 'TechyBar',
+  props: {
+    datainfo: {
+      type: Array,
+      default: () => [
+        {
+          name: '产线A',
+          list: [100, 102, 104, 105, 100, 117]
+        },
+        {
+          name: '产线B',
+          list: [110, 92, 124, 85, 100, 120]
+        }
+      ]
+    },
+    unitName: {
+      type: String,
+      default: ''
+    },
+    extraSpaceBetweenZero: {
+      type: Number,
+      default: 25
+    }
+  },
+  mixins: [resize],
+  data() {
+    const color_gradients = [
+      /** 蓝 */
+      {
+        direction: 'to top',
+        from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
+        to: '#49B2FF00',
+        topAndBottom: '#49B2FF9F'
+      },
+      /** 绿 */
+      {
+        direction: 'to top',
+        from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
+        to: '#49FBD600',
+        topAndBottom: '#49FBD69F'
+      }
+    ]
+
+    let result = []
+
+    this.datainfo.map((pl, index) => {
+      let topCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolOffset: ['25%', '-50%'],
+        // symbolSize: ['100%', 6],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          // color: color_gradients[index].topAndBottom
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+      let bottomCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolOffset: ['-25%', '50%'],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          color: color_gradients[index].from
+        }
+      }
+
+      let mainBar = {
+        __position: 'main',
+        type: 'bar',
+        name: pl.name,
+        // barWidth: 20, // 不需要设置 barWidth
+        barGap: '10%',
+        barCategoryGap: '48%',
+        data: pl.list,
+        z: 0,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].from
+              },
+              {
+                offset: 0.15,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff8',
+          fontSize: 10,
+          offset: [0, 6]
+        }
+      }
+
+      result.push(topCircle)
+      result.push(mainBar)
+      result.push(bottomCircle)
+    })
+
+    return {
+      BottomPic,
+      width: 0,
+      chart: null,
+      option: {
+        grid: {
+          left: '10%',
+          top: 48,
+          bottom: 28
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {}
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 12
+          },
+          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',
+          // min: -25,
+          min: this.extraSpaceBetweenZero * -1,
+          name: this.unitName,
+          nameTextStyle: {
+            color: '#fff8',
+            fontSize: 8,
+            verticalAlign: 'top',
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10,
+            /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
+            formatter: function(value, index) {
+              if (value < 0) {
+                return ''
+              }
+              return value
+            }
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#569acd',
+              type: 'dotted',
+              opacity: 0.2
+            }
+          }
+        },
+
+        series: result,
+
+        graphic: [
+          {
+            type: 'image',
+            left: 0,
+            bottom: 0,
+            scaleX: 0.8,
+            style: {
+              image: 'image url',
+              height: 0,
+              width: 0
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.refreshOption)
+    if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
+
+    this.$nextTick(() => {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    })
+  },
+  methods: {
+    updateOption(option) {
+      // console.log('option', this.BottomPic.default)
+      let width = this.$refs.techyBar.querySelector('div').clientWidth
+      let height = this.$refs.techyBar.querySelector('div').clientHeight
+      option.graphic[0].style.width = width * 0.85
+      option.graphic[0].style.height = height * 0.25
+      option.graphic[0].style.image = this.BottomPic.default
+      option.graphic[0].left = '10%'
+      option.graphic[0].bottom = 28
+    },
+    refreshOption() {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.techy-bar >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

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

@@ -1,398 +0,0 @@
-<template>
-  <div
-    ref="chartContainer"
-    class="chartContainer"
-    :class="bindClass"
-    style="position: relative; width: 100%; height:100%"
-  />
-</template>
-
-<script>
-import echarts from 'echarts' // echarts theme
-import resize from '@/views/OperationalOverview/components/mixins/resize'
-
-export default {
-  name: 'OverviewBar',
-  mixins: [resize],
-  props: {
-    unitName: {
-      type: String,
-      default: '单位: 片'
-    },
-    chartName: {
-      type: String,
-      default: ''
-    },
-    xlabelFontSize: {
-      type: Number,
-      default: 12
-    },
-    xlabelRotate: {
-      type: Number,
-      default: 0
-    },
-    nameList: {
-      type: Array,
-      default: () => []
-    },
-    dataList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      series: []
-    }
-  },
-  computed: {
-    bindClass() {
-      return {
-        'fault-category-chart': this.chartName === 'fault-category',
-        'process-fault-chart': this.chartName === 'process-fault',
-        'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
-      }
-    }
-  },
-  mounted() {
-    if (this.dataList.length > 1) {
-      this.series = [
-        {
-          // 柱体
-          name: this.dataList[0].name,
-          type: 'bar',
-          barWidth: 20,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[0].topColor },
-              { offset: 1, color: this.dataList[0].bottomColor }
-            ])
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: ['-70%', '-50%'],
-          symbolSize: [20, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
-            ])
-          },
-          data: this.dataList[0].data,
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [-12, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          }
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolOffset: ['-62%', '50%'],
-          symbolSize: [20, 6],
-          itemStyle: { color: this.dataList[0].bottomColor },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱体
-          name: this.dataList[1].name,
-          type: 'bar',
-          barWidth: 20,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[1].topColor },
-              { offset: 1, color: this.dataList[1].bottomColor }
-            ])
-          },
-          data: this.dataList[1].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[1].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: ['66%', '-50%'],
-          symbolSize: [20, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[1].topColor },
-              { offset: 1, color: this.dataList[1].bottomColor }
-            ])
-          },
-          data: this.dataList[1].data,
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [12, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          }
-        },
-        {
-          // 柱底
-          name: this.dataList[1].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolOffset: ['66%', '50%'],
-          symbolSize: [20, 6],
-          itemStyle: { color: this.dataList[1].bottomColor },
-          data: this.dataList[1].data
-        }
-      ]
-    } else {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
-      this.series = [
-        {
-          // 柱体
-          name: this.dataList[0].name,
-          type: 'bar',
-          barWidth: barWidth,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[0].topColor },
-              { offset: 1, color: this.dataList[0].bottomColor }
-            ])
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: barWidth,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [barWidth, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
-            ])
-          },
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [0, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: barWidth,
-          symbol: 'circle',
-          symbolOffset: [0, '50%'],
-          symbolSize: [barWidth, 6],
-          itemStyle: { color: '#2c6e7d' },
-          data: this.dataList[0].data
-        }
-      ]
-    }
-    this.$nextTick(() => {
-      console.log('on Mounted(): ')
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.chartContainer)
-      this.chart.setOption({
-        grid: {
-          top: '24%',
-          left: '8%',
-          right: '5%',
-          bottom: '5%',
-          containLabel: true
-        },
-        legend: {
-          show: false,
-          itemWidth: 10,
-          itemHeight: 10,
-          selectedMode: false,
-          top: '7%',
-          right: '2%',
-          textStyle: {
-            color: '#fff9',
-            fontSize: 12
-          }
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            margin: 16,
-            textStyle: {
-              fontSize: this.xlabelFontSize,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            },
-            rotate: this.xlabelRotate
-          },
-          data: this.nameList
-        },
-        yAxis: [
-          {
-            name: this.unitName, // '单位: 片',
-            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-            type: 'value',
-            splitNumber: 3,
-            axisTick: { show: false },
-            onZero: true,
-            position: 'left',
-            offset: 10,
-            axisLine: {
-              lineStyle: {
-                type: 'solid',
-                color: this.dataList[0].bottomColor,
-                // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-                width: '1' // 坐标线的宽度
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'dotted',
-                color: 'rgba(119, 255, 242, 0.2)'
-              }
-            },
-            type: 'value'
-          }
-          // {
-          //   name: '能耗kw/h',
-          //   nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-          //   type: 'value',
-          //   splitNumber: 3,
-          //   axisTick: { show: false },
-          //   onZero: true,
-          //   position: 'left',
-          //   offset: 48,
-          //   axisLine: {
-          //     lineStyle: {
-          //       type: 'solid',
-          //       color: this.dataList[1].bottomColor,
-          //       width: '1' // 坐标线的宽度
-          //     }
-          //   },
-          //   axisLabel: {
-          //     textStyle: {
-          //       color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-          //     }
-          //   },
-          //   splitLine: {
-          //     show: false
-          //     // lineStyle: {
-          //     //   type: 'dotted',
-          //     //   color: 'rgba(119, 255, 242, 0.2)'
-          //     // }
-          //   },
-          //   type: 'value'
-          // }
-        ],
-        series: this.series
-      })
-    }
-  }
-}
-</script>
-<style scoped>
-.chartContainer >>> div {
-  width: 100% !important;
-  height: 100% !important;
-  /* position: relative !important; */
-}
-
-.fault-category-chart >>> div::before {
-  /* .fault-category-chart::before { */
-  content: '';
-  position: absolute;
-  /* bottom: calc(100vh/1920 * 80);
-  left: calc(100vw/1920 * 48); */
-  /* bottom: calc(10% + 100vh/1920 * 28); */
-  bottom: 25px;
-  left: 9%;
-  height: 52px;
-  width: 90%;
-  background: linear-gradient(to top, #31a2ff6d, transparent);
-  transform: skew(-45deg);
-  z-index: 0;
-}
-.process-fault-chart >>> div::before {
-  /* .process-fault-chart::before { */
-  content: '';
-  position: absolute;
-  bottom: 26px;
-  left: 10%;
-  height: 48px;
-  width: 90%;
-  background: linear-gradient(to top, #49fbd789, transparent);
-  transform: skew(-45deg);
-  z-index: 0;
-}
-.realtime-production-cost-chart >>> div::before {
-  /* .fault-category-chart::before { */
-  content: '';
-  position: absolute;
-  bottom: 12%;
-  left: 6%;
-  height: 30px;
-  width: 90%;
-  border-radius: 3px;
-  /* border: 1px solid #49fbd7; */
-  background: linear-gradient(to top, #49fbd789 5%, transparent);
-  transform: skew(-35deg);
-  z-index: 0;
-}
-</style>

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

@@ -10,6 +10,11 @@ export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
   props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => ['month', 'day'].indexOf(val) !== -1
+    },
     dataUpdateToken: {
       type: String,
       default: 'default-token'
@@ -19,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; ',
@@ -31,14 +36,13 @@ export default {
           }
         },
         grid: {
-          top: '25%',
+          top: 56,
           left: '2%',
           right: '5%',
           bottom: '5%',
           containLabel: true
         },
-        xAxis: [
-          {
+        xAxis: {
           type: 'category',
           boundaryGap: false,
           axisLine: {
@@ -49,23 +53,28 @@ export default {
           axisTick: { show: false },
           axisLabel: {
             textStyle: {
-                color: 'rgba(255,255,255,1)' //
+              fontSize: 10,
+              color: '#fff8' //
             },
             margin: 12
           },
-            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
-          }
-        ],
+          data:
+            this.mode === 'month'
+              ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+              : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        },
+
         yAxis: [
           {
-            name: '成品率',
+            name: '成品率            ',
             type: 'value',
             min: 'dataMin',
             splitNumber: 4,
             nameTextStyle: {
               color: 'rgba(255,255,255,0.7)',
-              fontSize: 12,
-              align: 'right'
+              fontSize: 10,
+              align: 'left',
+              verticalAlign: 'bottom'
             },
             axisLine: {
               lineStyle: {
@@ -120,7 +129,18 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
                     let v = Math.floor(Math.random() * 100)
                     while (v < 80) {
                       v = Math.floor(Math.random() * 100)
@@ -157,129 +177,173 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
                       let v = Math.floor(Math.random() * 100)
                       while (v < 80) {
                         v = Math.floor(Math.random() * 100)
                       }
                       return v
                     })
-          },
-          {
-            name: '镀膜机',
-            type: 'line',
-            symbol: 'none',
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
+          }
+          // {
+          //   name: '镀膜机',
+          //   type: 'line',
+          //   symbol: 'none',
 
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#1A99FF66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          },
-          {
-            name: '包装纸',
-            type: 'line',
-            symbol: 'none',
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#1A99FF66' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data:
+          //     this.mode === 'month'
+          //       ? Array(30)
+          //           .fill(1)
+          //           .map(_ => {
+          //             let v = Math.floor(Math.random() * 100)
+          //             while (v < 80) {
+          //               v = Math.floor(Math.random() * 100)
+          //             }
+          //             return v
+          //           })
+          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+          //           let v = Math.floor(Math.random() * 100)
+          //           while (v < 80) {
+          //             v = Math.floor(Math.random() * 100)
+          //           }
+          //           return v
+          //         })
+          // },
+          // {
+          //   name: '包装纸',
+          //   type: 'line',
+          //   symbol: 'none',
 
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#A691FF66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          },
-          {
-            name: '丝印',
-            type: 'line',
-            symbol: 'none',
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#A691FF66' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data:
+          //     this.mode === 'month'
+          //       ? Array(30)
+          //           .fill(1)
+          //           .map(_ => {
+          //             let v = Math.floor(Math.random() * 100)
+          //             while (v < 80) {
+          //               v = Math.floor(Math.random() * 100)
+          //             }
+          //             return v
+          //           })
+          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+          //           let v = Math.floor(Math.random() * 100)
+          //           while (v < 80) {
+          //             v = Math.floor(Math.random() * 100)
+          //           }
+          //           return v
+          //         })
+          // },
+          // {
+          //   name: '丝印',
+          //   type: 'line',
+          //   symbol: 'none',
 
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#49FBD666' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          }
+          //   label: {
+          //     show: true,
+          //     position: 'top'
+          //   },
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#49FBD666' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data:
+          //     this.mode === 'month'
+          //       ? Array(30)
+          //           .fill(1)
+          //           .map(_ => {
+          //             let v = Math.floor(Math.random() * 100)
+          //             while (v < 80) {
+          //               v = Math.floor(Math.random() * 100)
+          //             }
+          //             return v
+          //           })
+          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+          //           let v = Math.floor(Math.random() * 100)
+          //           while (v < 80) {
+          //             v = Math.floor(Math.random() * 100)
+          //           }
+          //           return v
+          //         })
+          // }
         ]
       }
     }
@@ -308,8 +372,26 @@ export default {
   },
   methods: {
     refreshData() {
+      // update xaxis
+      this.configs.xAxis.data =
+        this.mode === 'month'
+          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+      // update series
       this.configs.series.forEach(item => {
-        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
+        item.data =
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => {
+                  let v = Math.floor(Math.random() * 100)
+                  while (v < 80) {
+                    v = Math.floor(Math.random() * 100)
+                  }
+                  return v
+                })
+            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
                 let v = Math.floor(Math.random() * 100)
                 while (v < 80) {
                   v = Math.floor(Math.random() * 100)
@@ -317,6 +399,7 @@ export default {
                 return v
               })
       })
+
       if (this.chart) this.chart.setOption(this.configs)
     }
   }

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展示的结构
-        eqTree.pdlList.forEach(item => {
+        this.treeData = this.preHandleList(eqTree)
+        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)
-        })
-        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 }))
-      }
+        result.push(treeItem)
       })
+
+      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;
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
 }
 
 .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">
-          <TestMenuItem :level="1" :menuItem="menuItem" />
+        <template v-for="(menuItem, index) in menuListTrue[0].children" >
+          <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
         </template>
       </el-menu>
     </section>