1

Reviewed-on: #19

src/App.vue

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

src/filters/index.js

@@ -127,6 +127,14 @@ export function rateFormatter(rateObj) {
   }
 }
 
+export function rateFormatter2(rateObj) {
+  if (rateObj) {
+    return rateObj + '%'
+  } else {
+    return '0.00%'
+  }
+}
+
 export function amountFormatter(param) {
   if (param) {
     return parseFloat(param).toFixed(2)

src/icons/svg/orange_dot.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 25</title>
+    <defs>
+        <rect id="path-1" x="0" y="234" width="6" height="6" rx="3"></rect>
+        <filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.301960784   0 0 0 0 0.0666666667  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="2-2工单管理" transform="translate(-1784.000000, -561.000000)">
+            <g id="编组-16备份-6" transform="translate(1016.000000, 229.000000)">
+                <g id="编组-19" transform="translate(32.000000, 64.000000)">
+                    <g id="编组-28备份-4" transform="translate(736.000000, 8.000000)">
+                        <g id="矩形备份-25" transform="translate(4.000000, 30.000000)">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill="#FF4D11" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/layout/components/Sidebar/Logo.vue

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

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

@@ -5,6 +5,245 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+class ChartOption {
+  constructor() {
+    this.color = ['#E02094', '#F0D63C', '#1A99FF']
+
+    this.legend = {
+      top: 11,
+      right: 32,
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: {
+        color: '#fff9',
+        fontSize: 10
+      }
+    }
+
+    this.grid = {
+      top: 36,
+      left: 64,
+      bottom: 36
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      // position: [200,10],
+      // position: ['25%', '25%'],
+      position: pointer => {
+        return [pointer[1], 0]
+      },
+      axisPointer: {
+        type: 'line',
+        axis: 'x',
+        lineStyle: {
+          color: '#7BFFFB',
+          type: 'dotted'
+        }
+      },
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      extraCssText: 'width: auto !important; height: auto !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+            </div>
+            `
+      }
+    }
+
+    this.xAxis = {
+      type: 'category',
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff9',
+        fontSize: 12,
+        margin: 10
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.yAxis = [
+      {
+        name: '电流/A    ',
+        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+        type: 'value',
+        splitNumber: 4,
+        onZero: true,
+        position: 'left',
+        offset: 28,
+        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: '  电压/V  ',
+        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'
+          }
+        }
+      },
+      {
+        name: '        温度',
+        nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
+        axisTick: { show: false },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff9',
+            width: 1
+          }
+        },
+        type: 'value',
+        splitNumber: 4,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: 'ABC三相电压/v',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        showSymbol: false
+      },
+      {
+        name: 'ABC三相电流/a',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        showSymbol: false
+      },
+      {
+        name: '电缆温度',
+        type: 'line',
+        yAxisIndex: 2,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        showSymbol: false
+      }
+    ]
+  }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
 
 export default {
   name: 'DianLineChart',
@@ -15,186 +254,13 @@ export default {
   props: {
     id: {
       type: String,
-      default: 'default-dian-id'
+      default: 'default-dian-line-chart'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
     }
   },
   data() {
-    const colors = ['#E02094', '#F0D63C', '#1A99FF']
-
-    // 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],
-      // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
-      // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
-    ]
-    let wendu = data[0]
-    let dianliu = data[1]
-    let dianya = data[2]
-
     return {
       chart: null,
-      option: {
+      option: null
-        color: colors,
-        legend: {
-          top: 4,
-          itemWidth: 8,
-          itemHeight: 8,
-          textStyle: {
-            color: '#fff9',
-            fontSize: 8
-          }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
-        },
-        grid: {
-          top: 32,
-          left: 64,
-          bottom: 28
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-            axisTick: { show: false },
-            axisLabel: {
-              color: '#fff9'
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#fff3'
-              }
-            }
-          }
-        ],
-        yAxis: [
-          {
-            name: '电流/A',
-            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            onZero: true,
-            position: 'left',
-            offset: 42,
-            axisTick: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            },
-            splitLine: {
-              show: false
-              // lineStyle: {
-              //   color: '#fff3'
-              // }
-            }
-          },
-          {
-            name: '电压/V',
-            nameTextStyle: { align: 'right', fontSize: 9, 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: false
-              // lineStyle: {
-              //   color: '#fff3'
-              // }
-            }
-          },
-          {
-            name: '温度',
-            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
-            axisTick: { show: false },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff9',
-                width: 1
-              }
-            },
-            type: 'value',
-            splitNumber: 4,
-            splitLine: {
-              lineStyle: {
-                color: '#fff3'
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'ABC三相电压/v',
-            type: 'line',
-            yAxisIndex: 0,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianliu,
-            symbol: 'none'
-          },
-          {
-            name: 'ABC三相电流/a',
-            type: 'line',
-            yAxisIndex: 1,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianya,
-            symbol: 'none'
-          },
-          {
-            name: '电缆温度',
-            type: 'line',
-            yAxisIndex: 2,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: wendu,
-            symbol: 'none'
-          }
-        ]
-      }
     }
   },
   computed: {
@@ -212,14 +278,23 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+    }
+  }
 }
 </script>
 <style scoped>

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

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+  <div id="techy-line-chart" ref="techy-line-chart" class="techy-chart" />
 </template>
 
 <script>
@@ -13,22 +13,7 @@ export default {
   inject: ['resizeStatus'],
   /** End Fn.1 */
   props: {
-    id: {
+
-      type: String,
-      default: 'default-fadian-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -46,11 +31,20 @@ export default {
         color: ['#E02094', '#F0D63C', '#1A99FF'],
         grid: {
           top: '30%',
-          left: 0,
+          left: '120%',
           right: '5%',
           bottom: 0,
           containLabel: true
         },
+        // tooltip: {
+        //   show: true,
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'line',
+        //     axis: 'x'
+        //   },
+        //   extraCssText: 'position: absolute; width: 152px !important; height: 100px !important;'
+        // },
         xAxis: {
           type: 'category',
           boundaryGap: false,
@@ -62,7 +56,7 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: 8,
+            fontSize: 10,
             color: '#fffa'
           },
           axisLine: {
@@ -83,14 +77,16 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: 8,
+            fontSize: 10,
             color: '#fffa'
             // formatter: '{value} %'
           },
           axisTick: { show: false },
           splitLine: {
+            show: true,
             lineStyle: {
-              color: '#fff3'
+              color: '#fff1',
+              type: 'dotted'
             }
           }
         },

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

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

@@ -25,8 +25,9 @@ export default {
 
 <style scoped>
 .left-content-monitoring {
+  flex: 1;
   width: 100%;
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   display: flex;
   gap: calc(100vw / 1920 * 16);
 }

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

@@ -1,58 +1,6 @@
 <template>
   <div class="left-content-order fix-table">
     <techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
-
-    <!--               
-      <el-table
-        key="LeftContentOrder1"
-        border
-        :data="tableData"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-        height="100%"
-      >
-        <el-table-column
-          label="订单编号"
-          prop="orderCode"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column
-          label="客户名称"
-          prop="clientName"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column label="规格" prop="specs" :resizable="true" align="center" :width="100" />
-        <el-table-column label="完成度" prop="finished" :resizable="true" align="center" :width="100">
-          <template slot-scope="scope">
-            <el-progress
-              class="lb-progress-bar"
-              type="circle"
-              :percentage="scope.row.finished"
-              :width="14"
-              :stroke-width="2"
-              color="#47FF27"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-    </div> -->
-
-    <!-- <div class="el-table-wrapper">
-      <el-table
-        key="LeftContentOrder2"
-        border
-        :data="tableData2"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-      >
-        <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="规格" prop="specs" :resizable="true" />
-        <el-table-column label="完成度" prop="finished" :resizable="true" />
-      </el-table>
-    </div> -->
   </div>
 </template>
 
@@ -67,24 +15,16 @@ const ProcessCircle = {
       default: () => ({})
     }
   },
-  mounted() {
-    console.log('finished', this.injectData.finished)
-  },
   methods: {},
   render: function(h) {
     return h('el-progress', {
-      class: {
-        'lb-progress-bar': true
-      },
       props: {
         type: 'circle',
         percentage: this.injectData.finished,
         width: 14,
         'stroke-width': 2,
-        color: '#47FF27'
+        color: '#47FF27',
-      },
+        'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
-      style: {
-        color: 'blue'
       }
     })
   }
@@ -97,13 +37,26 @@ const tableProps = [
   { prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
 ]
 const tableData = [
-  { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
+  { orderCode: 'ODFG20210724195124', clientName: '阿特斯阳光电力集团', specs: '3.2-1032*1747', finished: 72 },
-  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
+  { orderCode: 'ODPG20220712231003', clientName: '阳光能源控股有限公司', specs: '2.0-1128*1716', finished: 67 },
-  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
+  { orderCode: 'ODFG20210819002810', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1128*1716', finished: 46 },
-  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
+  { orderCode: 'ODPG20201003193028', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2251', finished: 89 },
-  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
+  { orderCode: 'ODPG20200113134639', clientName: '协鑫集成科技股份有限公司', specs: '3.2-1128*1718', finished: 54 },
-  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
+  { orderCode: 'ODFG20211115145712', clientName: '晶科能源股份有限公司', specs: '3.2-1033*2089', finished: 93 },
-  { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
+  { orderCode: 'ODFG20211102234340', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1032*1747', finished: 57 },
+  { orderCode: 'ODFG20200303145849', clientName: '晶澳太阳能科技股份有限公司', specs: '2.0-1128*2272', finished: 76 },
+  { orderCode: 'ODFG20220208030640', clientName: '苏州中来光伏新材股份有限公司', specs: '2.0-1128*2251', finished: 62 },
+  { orderCode: 'ODFG20200916123727', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 23 },
+  { orderCode: 'ODFG20200117065400', clientName: '晶澳太阳能科技股份有限公司', specs: '3.2-1033*2089', finished: 75 },
+  { orderCode: 'ODPG20211020214146', clientName: '英利绿色能源控股有限公司', specs: '3.2-1128*1716', finished: 44 },
+  { orderCode: 'ODPG20221015223506', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2272', finished: 3 },
+  { orderCode: 'ODFG20211112131234', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 90 },
+  { orderCode: 'ODPG20200411040019', clientName: '阳光能源控股有限公司', specs: '3.2-1033*2089', finished: 4 },
+  { orderCode: 'ODPG20220622002234', clientName: '苏州中来光伏新材股份有限公司', specs: '3.2-1128*1718', finished: 43 },
+  { orderCode: 'ODPG20220806035106', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 60 },
+  { orderCode: 'ODPG20220530081525', clientName: '晶科能源股份有限公司', specs: '2.0-1128*2272', finished: 21 },
+  { orderCode: 'ODPG20210228222705', clientName: '阿特斯阳光电力集团', specs: '3.2-1128*1718', finished: 75 },
+  { orderCode: 'ODPG20210408102029', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 99 }
 ]
 
 export default {
@@ -138,4 +91,8 @@ export default {
   left: calc(-2px * var(--beilv));
   color: #ffffffb3 !important;
 }
+
+.left-content-order >>> .el-progress-circle__track {
+  stroke: #283851;
+}
 </style>

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

@@ -9,7 +9,7 @@
         <div class="content-part">
           <div class="row">
             <span class="name">纯 &nbsp;&nbsp;&nbsp;水</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-1 color-1" />
             <span class="amount">
               39m
               <sup>3</sup>
@@ -17,17 +17,17 @@
           </div>
           <div class="row">
             <span class="name">循环水</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-2 color-2" />
             <span class="amount">
-              239m
+              23m
               <sup>3</sup>
             </span>
           </div>
           <div class="row">
             <span class="name">自来水</span>
-            <span class="diy-process-bar color-3" />
+            <span class="diy-process-bar bar-width-3 color-3" />
             <span class="amount">
-              23m
+              239m
               <sup>3</sup>
             </span>
           </div>
@@ -44,49 +44,50 @@
         <div class="content-part">
           <div class="row">
             <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-4 color-1" />
+            <span class="amount">
+              23Pa
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">CDA</span>
+            <span class="diy-process-bar bar-width-5 color-2" />
             <span class="amount">
               39Pa
             </span>
           </div>
           <div class="row">
-            <span class="name">CDA</span>
+            <span class="name">天然气</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-6 color-3" />
             <span class="amount">
               239pa
             </span>
           </div>
-          <div class="row">
-            <span class="name">天然气</span>
-            <span class="diy-process-bar color-3" />
-            <span class="amount">
-              23Pa
-            </span>
-          </div>
         </div>
       </TechyBox>
     </div>
 
-    <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" />
           <span>电</span>
         </div>
-        <div style="height: 100%; flex: 1;">
+        <div style="height: 100%; flex: 1; overflow: hidden">
-          <DianChart />
+          <DianChart id="dian" key="dian" />
         </div>
       </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" />
           <span>发电</span>
         </div>
-        <div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
+        <div style="height: 100%; flex: 1; overflow: hidden">
-          <FadianChart />
+          <!-- <FadianChart /> -->
+          <DianChart id="fa-dian" key="fa-dian" />
         </div>
       </TechyBox>
     </div>
@@ -115,7 +116,7 @@ export default {
 .public-consume__inner {
   overflow: hidden;
   overflow-y: auto;
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -152,6 +153,7 @@ export default {
 .header-part > span {
   color: #fffc;
   font-size: calc(12px * var(--beilv));
+  white-space: nowrap;
 }
 
 .content-part {
@@ -159,7 +161,7 @@ export default {
   flex-direction: column;
   font-size: calc(12px * var(--beilv));
   color: #fff9;
-  height: 10px;
+  height: calc(48px * var(--beilv));
   flex: 1 1;
   gap: calc(4px * var(--beilv));
 }
@@ -199,6 +201,25 @@ export default {
   height: 100%;
 }
 
+.bar-width-1::after {
+  width: 60%;
+}
+.bar-width-2::after {
+  width: 34%;
+}
+.bar-width-3::after {
+  width: 99%;
+}
+.bar-width-4::after {
+  width: 20%;
+}
+.bar-width-5::after {
+  width: 29%;
+}
+.bar-width-6::after {
+  width: 79%;
+}
+
 .diy-process-bar.color-1::after {
   background: linear-gradient(to right, #178be9, #67b3f2);
 }

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

@@ -9,35 +9,6 @@
         :table-config="tableProps"
         :table-data="tableData"
       ></TechyTable>
-      <!--       
-      <el-table
-        key="RightContentAlertTable"
-        border
-        :data="tableData"
-        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
-      >
-        <el-table-column
-          label="设备名称"
-          prop="eqName"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column
-          label="所属产线"
-          prop="plName"
-          :show-overflow-tooltip="true"
-          :resizable="true"
-          align="center"
-        />
-        <el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
-          <template slot-scope="scope">
-            <PriorityComponent :injectData="scope.row"></PriorityComponent>
-          </template>
-        </el-table-column>
-        <el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
-        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
-      </el-table> -->
     </div>
   </div>
 </template>
@@ -66,11 +37,6 @@ const PriorityComponent = {
       {
         style: {
           display: 'inline-block',
-          // borderRadius: '2px',
-          // padding: '2px 6px',
-          // color: '#fff',
-          // opacity: '0.6',
-          // fontSize: '12px',
           borderRadius: 'calc(2px * var(--beilv))',
           padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
           color: '#fff',
@@ -86,26 +52,46 @@ const PriorityComponent = {
 }
 
 const tableProps = [
-  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
+  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
-  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
+  // { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
-  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
+  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 70, subcomponent: PriorityComponent },
-  { prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
+  { prop: 'content', label: '报警内容', align: 'center', 'min-width': 120 },
-  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
+  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
 ]
 
 const tableData = [
-  { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
+  { eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 1, duration: '30 min' },
-  { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
+  { eqName: 'A2丝印', plName: 'A', content: '网版推出异常', priority: 2, duration: '57 min' },
-  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
+  { eqName: 'B1打孔后清洗', plName: 'B', content: '毛刷过载', priority: 3, duration: '17 min' },
-  { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
+  { eqName: 'B1固化', plName: 'B', content: '传动变频器故障', priority: 2, duration: '22 min' },
-  { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
+  { eqName: 'A钢化', plName: 'A', content: '加热炉体超温报警', priority: 2, duration: '23 min' },
+  { eqName: 'B2磨边', plName: 'B', content: '磨轮过载', priority: 3, duration: '6 min' },
+  { eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 2, duration: '23 min' },
+  {
+    eqName: 'A2磨边后清洗',
+    plName: 'A',
+    content: '进料检测异常',
+    priority: 2,
+    duration: '18 min'
+  },
+  { eqName: 'A3打孔后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '48 min' },
+  { eqName: 'A3磨边', plName: 'A', content: '磨轮过载', priority: 3, duration: '29 min' },
+  { eqName: 'A2钢化后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '47 min' },
+  { eqName: 'A2下片', plName: 'A', content: '磨轮过载', priority: 2, duration: '49 min' },
+  {
+    eqName: 'A3钢化后清洗',
+    plName: 'A',
+    content: '输送变频报警',
+    priority: 2,
+    duration: '33 min'
+  }
 ]
 
 export default {
   name: 'RightContentAlert',
   components: { TechyTable },
   data() {
-    return {tableProps, tableData }
+    return { tableProps, tableData }
   },
   created() {},
   mounted() {},
@@ -121,7 +107,7 @@ export default {
 }
 
 .right-content-alert {
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   display: flex;
   gap: calc(100vw / 1920 * 16);
   overflow: hidden;
@@ -151,7 +137,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
-    <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
+    :id="id"
+    ref="fault-pie-chart"
+    class="right-content-quality-analysis"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+  >
+    <!-- <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" /> -->
   </div>
 </template>
 
@@ -48,7 +53,7 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0.5,
         y: 1,
         x2: 0,
         y2: 0,
@@ -61,7 +66,7 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0.5,
         y: 1,
         x2: 0,
         y2: 0,
@@ -75,9 +80,9 @@ export default {
       {
         type: 'linear',
         x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
-        y2: 0,
+        y2: 0.5,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
           { color: '#49FBD600', offset: 0.1 },
@@ -88,11 +93,11 @@ export default {
     ]
 
     const demoData = [
-      { value: 100, name: 'A' },
+      { value: 107, name: '破片' },
-      { value: 100, name: 'B' },
+      { value: 146, name: '崩边' },
-      { value: 100, name: 'C' },
+      { value: 43, name: '脏污' },
-      { value: 100, name: 'D' },
+      { value: 83, name: '划擦伤' },
-      { value: 100, name: 'E' }
+      { value: 20, name: '崩孔' }
     ]
 
     return {
@@ -101,14 +106,15 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '62%',
+          left: '67%',
-          top: '35%',
+          top: '50%',
-          text: '33039',
+          text: demoData.reduce((prev, curr) => prev + curr.value, 0),
           textStyle: {
             color: '#fff',
             fontSize: 16,
             fontWeight: 'normal'
           },
+          itemGap: 2,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -116,13 +122,15 @@ export default {
             fontWeight: 'lighter'
           }
         },
+
         legend: {
-          top: '5%',
+          selectedMode: false,
+          top: 0,
           bottom: 0,
-          left: -10,
+          left: 0,
           orient: 'vertical',
           icon: 'none',
-          itemGap: 5,
+          itemGap: 8,
           itemWidth: 10,
           formatter: function(name) {
             // test data - dynamic
@@ -162,7 +170,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#FB418C'
-                // backgroundColor: '#1A99FF'
               },
               d: {
                 // verticalAlign: 'top',
@@ -171,7 +178,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#DDB112'
-                // backgroundColor: '#A691FF'
               },
               e: {
                 // verticalAlign: 'top',
@@ -180,7 +186,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#1A99FF'
-                // backgroundColor: '#FB418C'
               },
               f: {
                 // verticalAlign: 'top',
@@ -189,7 +194,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#A691FF'
-                // backgroundColor: '#49FBD6'
               },
               g: {
                 // verticalAlign: 'top',
@@ -198,7 +202,6 @@ export default {
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#49FBD6'
-                // backgroundColor: '#DDB112'
               }
             }
           }
@@ -206,10 +209,11 @@ export default {
 
         series: [
           {
+            silent: true,
             name: 'PieForm',
             type: 'pie',
-            center: ['63%', '50%'],
+            center: ['68%', '61%'],
-            radius: ['55%', '80%'],
+            radius: ['42%', '60%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -224,6 +228,10 @@ export default {
                 fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -231,15 +239,20 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex === 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -277,43 +290,49 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      const fs5 = this.calcFontsize(5 /**px*/)
+      // const fs1 = this.calcFontsize(1 /** px*/)
-      const fs8 = this.calcFontsize(8 /**px*/)
+      // const fs3 = this.calcFontsize(3 /** px*/)
-      const fs10 = this.calcFontsize(10 /**px*/)
+      const fs5 = this.calcFontsize(5 /** px*/)
-      const fs12 = this.calcFontsize(12 /**px*/)
+      const fs8 = this.calcFontsize(8 /** px*/)
-      const fs16 = this.calcFontsize(16 /**px*/)
+      const fs10 = this.calcFontsize(10 /** px*/)
+      const 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 = fs16
+      this.configs.title.textStyle.fontSize = titleSize
-      this.configs.title.subtextStyle.fontSize = fs12
+      this.configs.title.subtextStyle.fontSize = subtitleSize
 
-      this.configs.legend.itemGap = fs5
+      this.configs.legend.top = '26%'
-      this.configs.legend.itemWidth = fs10
+      this.configs.legend.left = fs8
+      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 = fs10
+      this.configs.legend.textStyle.rich.c.width = fs8
-      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.height = fs8
       this.configs.legend.textStyle.rich.c.borderRadius = fs5
-      this.configs.legend.textStyle.rich.d.width = fs10
+      this.configs.legend.textStyle.rich.d.width = fs8
-      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.height = fs8
       this.configs.legend.textStyle.rich.d.borderRadius = fs5
-      this.configs.legend.textStyle.rich.e.width = fs10
+      this.configs.legend.textStyle.rich.e.width = fs8
-      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.height = fs8
       this.configs.legend.textStyle.rich.e.borderRadius = fs5
-      this.configs.legend.textStyle.rich.f.width = fs10
+      this.configs.legend.textStyle.rich.f.width = fs8
-      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.height = fs8
       this.configs.legend.textStyle.rich.f.borderRadius = fs5
-      this.configs.legend.textStyle.rich.g.width = fs10
+      this.configs.legend.textStyle.rich.g.width = fs8
-      this.configs.legend.textStyle.rich.g.height = fs10
+      this.configs.legend.textStyle.rich.g.height = fs8
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
 
-      this.configs.series[0].label.rich.first.fontSize = fs8
+      this.configs.series[0].label.rich.first.fontSize = fs10
-      this.configs.series[0].label.rich.second.fontSize = fs8
+      this.configs.series[0].label.rich.second.fontSize = fs10
-      this.configs.series[0].label.rich.third.fontSize = fs8
+      this.configs.series[0].label.rich.third.fontSize = fs10
-      this.configs.series[0].label.rich.fourth.fontSize = fs8
+      this.configs.series[0].label.rich.fourth.fontSize = fs10
-      this.configs.series[0].label.rich.fifth.fontSize = fs8
+      this.configs.series[0].label.rich.fifth.fontSize = fs10
 
       this.chart.setOption(this.configs)
     }
@@ -322,9 +341,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,264 +1,261 @@
 <template>
-  <div style="height: calc(100% - 36px); width: 100%;">
+  <div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
-    <div :id="id" ref="techy-line-chart" class="techy-chart" />
-  </div>
 </template>
 
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+class ChartOption {
+  constructor() {
+    // const wenduData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+    // const dianyaData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+    // const dianliuData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+
+    this.color = ['#1A99FF', '#E02094', '#F0D63C']
+
+    this.legend = {
+      top: 24,
+      right: 40,
+      itemWidth: 18,
+      itemHeight: 12,
+      textStyle: {
+        fontSize: 12,
+        color: '#fffc'
+      }
+    }
+
+    this.grid = {
+      top: 72,
+      left: 26,
+      right: 24,
+      bottom: 16,
+      containLabel: true
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12
+      },
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: '#7BFFFB',
+          type: 'dotted'
+        }
+      },
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      // formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+      }
+    }
+
+    let d = new Date()
+    this.xAxis = {
+      type: 'category',
+      boundaryGap: false,
+      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      data: Array(7)
+        .fill(0)
+        .map((_, idx) => {
+          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
+        }),
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#fffa'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+    this.yAxis = {
+      type: 'value',
+      name: '成品率              ',
+      // min: 'dataMin',
+      min: 80,
+      splitNumber: 3,
+      nameTextStyle: {
+        color: '#fff9',
+        fontSize: 12
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#fffa',
+        formatter: '{value} %'
+      },
+      axisTick: { show: false },
+      splitLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.series = [
+      {
+        name: 'A',
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#59CBE866' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(93, 98))
+      },
+      {
+        name: 'B',
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E93CAC66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(93, 98))
+      }
+    ]
+  }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'min', 'max', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
 
 export default {
   name: 'ProductRateLineChart',
   mixins: [resize],
-  props: {
+  props: {},
-    id: {
-      type: String,
-      default: 'default-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
       chart: null,
-      option: {
+      option: null
-        color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
-        grid: {
-          top: '20%',
-          left: 0,
-          right: 12,
-          bottom: 0,
-          containLabel: true
-        },
-        legend: {
-          width: '72%',
-          right: 12,
-          itemWidth: 12,
-          itemHeight: 8,
-          textStyle: {
-            color: '#fffc'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          data: Array(12)
-            .fill(0)
-            .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 8,
-            color: '#fffa'
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '成品率',
-          nameTextStyle: {
-            color: '#fffc',
-            align: 'right',
-            fontSize: 8
-          },
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 10,
-            color: '#fffa',
-            formatter: '{value} %'
-          },
-          axisTick: { show: false },
-          splitLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        series: [
-          {
-            name: '产线1',
-            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: '#59CBE866' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线2',
-            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: '#E93CAC66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线3',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#FF734566' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线4',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#9452FF66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          },
-          {
-            name: '产线5',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#6A6E8766' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => Math.floor(Math.random() * 100))
-          }
-        ]
-      }
     }
   },
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+    }
+  }
 }
 </script>
 <style scoped>
 .techy-chart {
-  height: 100%;
+  /* background: #cccc; */
+  position: absolute;
+
+  height: 150%;
   width: 100%;
 }
 

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

@@ -26,16 +26,16 @@ export default {
   data() {
     return {
       datalist: [
-        { name: '热端', value: 2332039120, color: '#0b88ff' },
+        { name: '热端', value: 66, color: '#0b88ff' },
-        { name: '原片上片', value: 30, color: '#0bffa6' },
+        { name: '丝印', value: 93, color: '#0bffa6' },
-        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '原片', value: 121, color: '#0bffa6' },
-        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '钢化', value: 2, color: '#e3ff0b' },
-        { name: '原片磨边', value: 30, color: '#0bffa6' },
+        { name: '上片磨边', value: 211, color: '#e3ff0b' },
-        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '下片铺纸', value: 27, color: '#950bff' },
-        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '镀膜', value: 44, color: '#950bff' },
-        { name: '磨边镀膜膜', value: 23, color: '#950bff' },
+        { name: '物流仓储', value: 3, color: '#ff7d0b' },
-        { name: '镀膜', value: 10, color: '#ff0bc2' },
+        { name: '清洗', value: 2, color: '#0bffa6' },
-        { name: '清晰', value: 66, color: '#ff7d0b' }
+        { name: '包装', value: 22, color: '#ff0bc2' }
       ]
     }
   },
@@ -47,7 +47,7 @@ export default {
 
 <style scoped>
 .right-content-quality-analysis {
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   overflow: hidden;
   overflow-y: auto; /** 右边会有多的padding给滑道 */
   display: grid;
@@ -55,6 +55,7 @@ export default {
   grid-auto-rows: min-content;
   gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
   justify-content: end;
+  align-content: flex-start;
 }
 
 .analysis-item {

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

@@ -1,143 +1,394 @@
 <template>
-  <techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
+  <!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
-    <!-- <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="[
         {
-          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]
         }
-      ]"
+      ]" /> -->
-    />
+  <div class="techy-chart" ref="realtimeLineChart"></div>
-  </techy-box>
 </template>
 
 <script>
 import echarts from 'echarts'
-import TechyBox from './TechyBox.vue'
-import newBar from './newBar.vue'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+class ChartOption {
+  constructor() {
+    this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
+
+    this.legend = {
+      top: 28,
+      right: 40,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#fff9',
+        fontSize: 10
+      }
+    }
+
+    this.grid = {
+      top: 80,
+      left: 88,
+      right: 24,
+      bottom: 32
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12
+      },
+      axisPointer: {
+        type: 'line',
+        axis: 'x',
+        lineStyle: {
+          color: '#7BFFFB',
+          type: 'dotted'
+        }
+      },
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[3]
+              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+            </div>
+            `
+      }
+    }
+
+    let d = new Date()
+    this.xAxis = {
+      type: 'category',
+      data: Array(7)
+        .fill(1)
+        .map((_, idx) => {
+          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
+        }),
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff9',
+        fontSize: 12
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.yAxis = [
+      {
+        name: '能耗        ',
+        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, 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, lineHeight: 14, 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'
+          }
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: 'A能耗',
+        type: 'line',
+        yAxisIndex: 0,
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        areaStyle: {
+          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
+          }
+        }
+      },
+      {
+        name: 'A产量',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#F0D63C66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: 'B能耗',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E0209466' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: 'B产量',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#52FFF166' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+    ]
+  }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
 
 export default {
-  name: 'RealtimeProductionHorizontalBarChart',
+  name: 'RealtimeLineChart',
-  components: { TechyBox, newBar },
   mixins: [resize],
-  props: {
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
-    id: {
+  inject: ['resizeStatus'],
-      type: String,
+  /** End Fn.1 */
-      default: 'default-linechart-id'
+  props: {},
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
       chart: null,
-      option: {
+      option: null
-        color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
+    }
-        grid: {
+  },
-          top: 0,
+  computed: {
-          left: 0,
+    shouldResize() {
-          right: '5%',
+      return this.resizeStatus()
-          bottom: 0,
+    }
-          containLabel: true
+  },
-        },
+  watch: {
-        xAxis: {
+    shouldResize(val, oldVal) {
-          type: 'value',
+      console.log('fullscreen resize')
-          boundaryGap: [0, 0.001],
+      setTimeout(() => {
-          axisTick: {
+        this.chart.resize()
-            show: false
+      }, 250)
-          },
-          axisLabel: {
-            fontSize: 8
-            // rotate: 10
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#fffa'
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 10,
-            color: '#fffa'
-          },
-          axisTick: { show: false },
-          splitLine: {
-            lineStyle: {
-              color: '#fffa'
-            }
-          }
-        },
-        series: [
-          {
-            name: '2011',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          },
-          {
-            name: '2012',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          }
-        ]
-      }
     }
   },
   mounted() {
     this.$nextTick(() => {
-      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+    }
+  }
 }
 </script>
+
 <style scoped>
 .techy-chart {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
 }

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

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

src/views/3DOverview/components/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/TechyFakeTable.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="techy-fake-table">
-    <div class="table-inner">
-      <section class="table-header" />
-      <section class="table-body" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  props: {
-    tableProps: {
-      type: Array,
-      default: () => []
-    },
-    tableData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      headMap: {}
-    }
-  },
-  created() {},
-  mounted() {
-    this.renderHeadRow().then(() => {
-      this.renderCommonRow()
-    })
-  },
-  methods: {
-    renderHeadRow() {
-      return new Promise((resolve, reject) => {
-        // do something...
-      })
-    },
-    renderCommonRow() {
-      return new Promise((resolve, reject) => {
-        // do something...
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.techy-fake-table {
-  position: relative;
-  width: 100%;
-  height: 100px;
-  background: #3333;
-  overflow: hidden;
-  overflow-x: scroll;
-}
-.table-inner {
-  max-width: 10000px;
-  color: white;
-  white-space: nowrap;
-}
-</style>

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="date">{{ now.format('yyyy.MM.DD') }}</div>
-    <div class="time">20:12:24</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/components/TechyTable.vue

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

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

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

src/views/3DOverview/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <V3DApp @3d-loaded="handle3DLoaded" />
+    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
+    <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
     <div v-if="showPage" id="v3d-main-content">
-    <!-- <div v-if="true" id="v3d-main-content"> -->
+      <!-- <div v-if="true" id="v3d-main-content"> -->
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -18,29 +19,39 @@
                 <LeftContentPublicConsume />
               </techy-container>
             </div>
-          </div>
 
-          <div class="techy-body-part__middle">
+            <div v-if="currentEquipment" class="techy-body-part__middle">
-            <TechyBox>
+              <TechyBox>
-              <div class="techy-body-part__middle__inner">
+                <div class="techy-body-part__middle__inner">
-                <p>
+                  <p>
-                  <b>产线名称 :</b>
+                    <b>产线名称 :</b>
-                  <span>A产线</span>
+                    <span>{{ currentEquipment.pl }}</span>
-                </p>
+                  </p>
-                <p>
+                  <p>
-                  <b>设备名称 :</b>
+                    <b>设备名称 :</b>
-                  <span>清洗机</span>
+                    <span>{{ currentEquipment.name }}</span>
-                </p>
+                  </p>
-                <p>
+                  <p>
-                  <b>累计加工 :</b>
+                    <b>累计加工 :</b>
-                  <span>20</span>
+                    <span>{{ currentEquipment.amount }}</span>
-                </p>
+                  </p>
-                <p>
+                  <p>
-                  <b>通信状态 :</b>
+                    <b>通信状态 :</b>
-                  <span class="round-dot">运行中</span>
+                    <span class="round-dot">
-                </p>
+                      <span
-              </div>
+                        class="dot-icon"
-            </TechyBox>
+                        :class="{
+                          'green-dot': currentEquipment.status === '生产中',
+                          'red-dot': currentEquipment.status === '故障',
+                          'yellow-dot': currentEquipment.status === '调试中'
+                        }"
+                      />
+                      {{ currentEquipment.status }}
+                    </span>
+                  </p>
+                </div>
+              </TechyBox>
+            </div>
           </div>
 
           <div class="techy-body-part__right">
@@ -72,7 +83,7 @@
             </techy-container>
           </div>
           <div class="ft-monitor" style="flex: 1;">
-            <techy-container title="现场实时监控" icon="安全帽图标">
+            <techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
               <LeftContentMonitor />
             </techy-container>
           </div>
@@ -109,6 +120,8 @@ import TechyBox from './components/TechyBox.vue'
 
 import screenfull from 'screenfull'
 
+import eqList from './v3dApp/data'
+
 export default {
   name: '',
   components: {
@@ -128,6 +141,8 @@ export default {
   },
   data() {
     return {
+      eqId: null,
+      currentEquipment: null,
       showPage: false,
       toggleResize: 'toggle-1' // <=== no need to worry this
     }
@@ -152,6 +167,12 @@ export default {
     },
     handle3DLoaded() {
       this.showPage = true
+    },
+    handle3DClick() {
+      this.eqId = document.getElementById('V3DData').rel
+      if (this.eqId) {
+        this.currentEquipment = eqList.find(item => item.id === this.eqId)
+      }
     }
   }
 }
@@ -183,6 +204,7 @@ export default {
 }
 
 #v3d-outter *::-webkit-scrollbar-button {
+  display: none;
   width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
@@ -218,6 +240,7 @@ export default {
   padding: calc(24px * var(--beilv));
   padding-bottom: 0;
   display: flex;
+  justify-content: space-between;
   gap: calc(16px * var(--beilv));
 }
 
@@ -235,16 +258,19 @@ export default {
 
 /* 实时产量和能耗 */
 .realtime {
-  height: calc(256px * var(--beilv));
+  height: calc(240px * var(--beilv));
 }
 /* 工序质量分析 */
 .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(200px * var(--beilv));
+  flex: 1 0;
+  position: relative;
 }
 
 .bottom-part {
@@ -260,30 +286,23 @@ export default {
   width: calc(472px * var(--beilv));
 }
 
-/* 现场实时监控 */
-.ft-monitor {
-}
-
 /* 缺陷分类分析  */
 .fault-analysis {
   width: calc(290px * var(--beilv));
 }
 
-/* 设备报警提示 */
-.eq-alert {
-}
-
 .techy-body-part__left,
 .techy-body-part__right {
   /* height: 100%; */
   /* height: calc(512px * var(--beilv));
   flex: 1; */
   width: calc(472px * var(--beilv));
-  overflow: hidden;
+  overflow: unset;
 
   display: flex;
   flex-direction: column;
   gap: calc(16px * var(--beilv));
+  position: relative;
 }
 
 .techy-body-part__right-col-2 {
@@ -292,17 +311,23 @@ export default {
   gap: calc(100vmin / 1920 * 36);
 }
 
-.techy-body-part__middle {
+/* .techy-body-part__middle {
   flex: 1;
   position: relative;
+} */
+
+.techy-body-part__middle {
+  position: absolute;
+  top: 0;
+  right: calc(-16px * var(--beilv));
 }
 
 .techy-body-part__middle .techy-box {
   position: absolute;
   top: 0;
   left: 0;
-  height: calc(136px * var(--beilv));
+  height: calc(128px * var(--beilv));
-  width: calc(176px * var(--beilv));
+  width: calc(188px * var(--beilv));
 }
 
 .techy-body-part__middle__inner {
@@ -311,6 +336,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  /* gap: calc(6px * var(--beilv)); */
 }
 
 .techy-body-part__middle__inner p {
@@ -319,6 +345,7 @@ export default {
   font-size: calc(12px * var(--beilv));
   line-height: 1.5;
   color: #fff;
+  display: flex;
 }
 
 .techy-body-part__middle__inner p > span {
@@ -327,17 +354,46 @@ export default {
 }
 
 .techy-body-part__middle__inner p > span.round-dot {
-  padding-left: calc(28px * var(--beilv));
+  /* padding-left: calc(28px * var(--beilv)); */
+  display: flex;
+  align-items: center;
+  gap: calc(4px * var(--beilv));
 }
 
-.round-dot::before {
+.dot-icon {
-  content: '';
+  height: calc(16px * var(--beilv));
-  position: absolute;
+  width: calc(16px * var(--beilv));
+}
+
+.red-dot {
+  background: url(./components/assets/red.png) 20% center / 100% no-repeat;
+}
+.green-dot {
+  background: url(./components/assets/green.png) 20% center / 100% no-repeat;
+}
+.yellow-dot {
+  background: url(./components/assets/orange.png) 20% center / 100% no-repeat;
+}
+.blue-dot {
+  background: url(./components/assets/blue.png) 20% center / 100% no-repeat;
+}
+
+/* .round-dot::before {
+  content: ''; */
+/* position: absolute;
   top: calc(4px * var(--beilv));
-  left: calc(16px * var(--beilv));
+  left: calc(16px * var(--beilv)); */
-  width: calc(8px * var(--beilv));
+/* width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background-color: rgb(82, 231, 82);
   border-radius: calc(4px * var(--beilv));
+} */
+
+.danger-dot::before {
+  background-color: #e71837;
+}
+
+.warning-dot::before {
+  background-color: #d6961f;
 }
 </style>

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

@@ -0,0 +1,66 @@
+export default [
+  { id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
+  { id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
+  { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' },
+  { id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
+  { id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
+  { id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
+  { id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
+  { id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
+  { id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' },
+  { id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
+
+  { id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
+  { id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
+  { id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
+  { id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
+  { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' },
+  { id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
+  { id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
+  { id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
+  { id: 'C2-8', pl: 'A2', name: 'A2钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C2-9', pl: 'A2', name: 'A2下片', amount: 32, status: '生产中' },
+
+  { id: 'C3-0', pl: 'A3', name: 'A3上片', amount: 32, status: '生产中' },
+  { id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
+  { id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
+  { id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
+  { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' },
+  { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' },
+  { id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
+  { id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
+  { id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C3-9', pl: 'A3', name: 'A3下片', amount: 32, status: '生产中' },
+
+  { id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
+  { id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
+  { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' },
+  { id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
+  { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' },
+  { id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
+  { id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
+  { id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
+  { id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' },
+  { id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
+
+  { id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
+  { id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
+  { id: 'C5-2', pl: 'B2', name: 'B2磨边后清洗', amount: 32, status: '生产中' },
+  { id: 'C5-3', pl: 'B2', name: 'B2打孔', amount: 32, status: '生产中' },
+  { id: 'C5-4', pl: 'B2', name: 'B2打孔后清洗', amount: 32, status: '生产中' },
+  { id: 'C5-5', pl: 'B2', name: 'B2丝印', amount: 32, status: '生产中' },
+  { id: 'C5-6', pl: 'B2', name: 'B2固化', amount: 32, status: '生产中' },
+  { id: 'C5-7', pl: 'B2', name: 'B2储片', amount: 32, status: '生产中' },
+  { id: 'C5-8', pl: 'B2', name: 'B2钢化后清洗', amount: 32, status: '生产中' },
+
+  { id: 'C6-0', pl: 'B3', name: 'B3上片', amount: 32, status: '生产中' },
+  { id: 'C6-1', pl: 'B3', name: 'B3磨边', amount: 32, status: '生产中' },
+  { id: 'C6-2', pl: 'B3', name: 'B3磨边后清洗', amount: 32, status: '生产中' },
+  { id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
+  { id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
+  { id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
+  { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' },
+  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
+]

src/views/EquipmentManager/HomePage.vue

@@ -11,7 +11,7 @@
               <div class="table-wrapper fix-table-exception-report">
                 <techy-table
                   :page="1"
-                  :limit="7"
+                  :limit="12"
                   :show-index="false"
                   :table-config="equipmentExceptionProps"
                   :table-data="equipmentExceptionDatalist"
@@ -25,7 +25,7 @@
               <div class="table-wrapper fix-table-eq-exception">
                 <techy-table
                   :page="1"
-                  :limit="7"
+                  :limit="12"
                   :show-index="false"
                   :table-config="equipmentAlarmProps"
                   :table-data="equipmentAlarmDatalist"
@@ -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">
@@ -54,7 +70,7 @@
                       lineHeight: '18px',
                       fontSize: '0.85vw'
                     }"
-                  > 
+                  >
                     各产线稼动率
                   </h2> -->
                   <span class="pl-jdl__title">各产线稼动率</span>
@@ -77,10 +93,10 @@
         <div class="row-3">
           <!-- 设备备件管理 -->
           <techy-container :title="'设备备件管理'" icon="清单齿轮">
-            <div class="table-wrapper">
+            <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
-                :limit="7"
+                :limit="12"
                 :show-index="false"
                 :table-config="sparepartsProps"
                 :table-data="sparepartsDatalist"
@@ -96,19 +112,19 @@
           <div class="techy-container__inner">
             <div>
               <TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" />
             </div>
             <div>
               <TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" />
             </div>
             <div>
               <TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" />
             </div>
             <div>
               <TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
-              <TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
+              <TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" />
             </div>
           </div>
         </techy-container>
@@ -136,8 +152,14 @@ import {
   equipmentAnalysisData,
   sparepartsProps,
   sparepartsDatalist,
-  rightSideProps,
+  suddenMaintainProps,
-  rightSideDatalist
+  inPlanMaintainProps,
+  defenceMaintainProps,
+  wwwOrderProps,
+  rightSideDatalist,
+  rightSideDatalist2,
+  rightSideDatalist3,
+  rightSideDatalist4
 } from './mockData'
 
 import { mapGetters } from 'vuex'
@@ -163,6 +185,7 @@ export default {
   props: {},
   data() {
     return {
+      plSelect: null,
       equipmentExceptionProps,
       equipmentExceptionDatalist,
       equipmentAlarmProps,
@@ -171,8 +194,14 @@ export default {
       equipmentAnalysisData,
       sparepartsProps,
       sparepartsDatalist,
-      rightSideProps,
+      suddenMaintainProps,
-      rightSideDatalist
+      inPlanMaintainProps,
+      defenceMaintainProps,
+      wwwOrderProps,
+      rightSideDatalist,
+      rightSideDatalist2,
+      rightSideDatalist3,
+      rightSideDatalist4
       // refreshKey: 0
     }
   },
@@ -197,23 +226,22 @@ export default {
 </script>
 
 <style scoped>
-::-webkit-scrollbar {
+.visual-container >>> ::-webkit-scrollbar {
   width: calc(8px * var(--beilv));
 }
 
-::-webkit-scrollbar-track {
+.visual-container >>> ::-webkit-scrollbar-track {
   background-color: #14243f;
   border-radius: 0;
 }
 
-::-webkit-scrollbar-button {
+.visual-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  display: none;
-  height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
   position: relative;
 }
 
-::-webkit-scrollbar-thumb {
+.visual-container >>> ::-webkit-scrollbar-thumb {
   border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
@@ -268,13 +296,13 @@ export default {
 .techy-container__inner {
   display: flex;
   flex-direction: column;
-  gap: calc(8px * var(--beilv));
+  gap: calc(32px * var(--beilv));
-  height: calc(100% - 4vh);
+  height: calc(100% - 3vh);
   /* overflow-y: scroll; */
   overflow-y: auto;
 }
 .techy-container__inner > div {
-  flex: 1 1;
+  flex: 0;
 }
 
 .row-1,
@@ -346,7 +374,7 @@ export default {
 .grid-2-3 {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 1fr 1fr;
-  gap: calc(8px * var(--beilv)) calc(4px * var(--beilv));
+  gap: calc(8px * var(--beilv)) calc(8px * var(--beilv));
 }
 
 .product-line-selection {
@@ -364,4 +392,12 @@ export default {
   top: calc(24px * var(--beilv));
   left: calc(140px * var(--beilv));
 }
+
+.pl-select >>> input {
+  /* height: 100%; */
+  outline: none;
+  border: none;
+  background: #31878c45;
+  color: white;
+}
 </style>

src/views/EquipmentManager/components/EquipmentAnalysisBox.vue

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

src/views/EquipmentManager/components/TechyAnalysisHeader.vue

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

src/views/EquipmentManager/components/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/TechyHeader.vue

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

src/views/EquipmentManager/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -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" />
@@ -126,14 +126,15 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));;
+  display: none;
-  height: calc(8px * var(--beilv));;
+  /* width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
   background: #5bc4bf9f;
   position: relative;
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-thumb {
-  border-radius: calc(8px * var(--beilv));;
+  border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
 
@@ -178,7 +179,7 @@ export default {
 }
 
 .visual-base-table-container >>> td span {
-  color: #ffffff50;
+  color: #ffffffb3;
   font-size: calc(12px * var(--beilv));
   line-height: calc(14px * var(--beilv));
 }
@@ -200,11 +201,11 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203ecc;
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #213961cc;
 }
 </style>

src/views/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>
@@ -45,37 +45,70 @@ export default {
   color: white;
 }
 
+.techy-vertical-table >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-button {
+  display: none;
+  /* width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
 .trow {
   width: 100%;
   white-space: nowrap;
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
+  justify-content: stretch;
   align-items: stretch;
-  margin-bottom: 1px;
+}
+
+.trow:not(:last-of-type) {
+  border-bottom: 1px solid #0d1728;
 }
 
 .thead,
 .tbody {
-  min-width: calc(100vw / 1920 * 96);
+  /* min-width: calc(100vw / 1920 * 96); */
-  background-color: #20376080;
+  background-color: rgba(33, 57, 97, 0.8);
   white-space: nowrap;
   overflow: hidden;
-  margin-right: 1px;
+  text-align: left;
-  text-align: center;
+  padding-left: calc(12px * var(--beilv));
+  padding-right: calc(12px * var(--beilv));
   font-weight: 400;
+  flex: 0 1 calc(100vw / 1920 * 96);
+  text-overflow: ellipsis;
 }
 
 .thead {
-  width: 25%;
+  min-width: 25%;
   font-size: calc(14px * var(--beilv));
-  line-height: 1.8;
+  /* line-height: 1.8; */
+  line-height: 2.1;
+  flex: 0;
 }
 
 .tbody {
-  width: 24%;
+  min-width: 24%;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.8);
-  font-size: calc(12px *  var(--beilv));
+  font-size: calc(12px * var(--beilv));
-  line-height: 2;
+  /* line-height: 2; */
+  line-height: 2.3;
+  flex: 1 0;
 }
 
 .tbody:last-child {

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

@@ -25,23 +25,26 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        xAxis: [
+        tooltip: {
-          {
+          show: true,
-            type: 'category',
+          type: 'shadow',
-            data: ['A', 'B', 'C', 'D', 'E'],
+          trigger: 'item'
-            axisTick: {
+        },
-              alignWithLabel: true
+        xAxis: {
-            },
+          type: 'category',
-            axisLine: {
+          data: ['A', 'B' ],
-              lineStyle: {
+          axisTick: {
-                color: '#5982B233'
+            alignWithLabel: true
-              }
+          },
-            },
+          axisLine: {
-            axisLabel: {
+            lineStyle: {
-              color: '#fff'
+              color: '#5982B233'
             }
+          },
+          axisLabel: {
+            color: '#fff'
           }
-        ],
+        },
         yAxis: [
           {
             type: 'value',
@@ -58,7 +61,7 @@ export default {
             axisLabel: {
               color: '#ffffff9d'
             },
-            axisTick: { show : false }
+            axisTick: { show: false }
           }
         ],
         series: [
@@ -113,75 +116,75 @@ export default {
                   }
                 }
               },
-              {
+              // {
-                value: 200,
+              //   value: 200,
-                itemStyle: {
+              //   itemStyle: {
-                  color: {
+              //     color: {
-                    type: 'linear',
+              //       type: 'linear',
-                    x: 0,
+              //       x: 0,
-                    y: 0,
+              //       y: 0,
-                    x2: 0,
+              //       x2: 0,
-                    y2: 1,
+              //       y2: 1,
-                    colorStops: [
+              //       colorStops: [
-                      {
+              //         {
-                        offset: 0,
+              //           offset: 0,
-                        color: '#85F6E9'
+              //           color: '#85F6E9'
-                      },
+              //         },
-                      {
+              //         {
-                        offset: 1,
+              //           offset: 1,
-                        color: '#2EC6B4'
+              //           color: '#2EC6B4'
-                      }
+              //         }
-                    ],
+              //       ],
-                    global: false
+              //       global: false
-                  }
+              //     }
-                }
+              //   }
-              },
+              // },
-              {
+              // {
-                value: 320,
+              //   value: 320,
-                itemStyle: {
+              //   itemStyle: {
-                  color: {
+              //     color: {
-                    type: 'linear',
+              //       type: 'linear',
-                    x: 0,
+              //       x: 0,
-                    y: 0,
+              //       y: 0,
-                    x2: 0,
+              //       x2: 0,
-                    y2: 1,
+              //       y2: 1,
-                    colorStops: [
+              //       colorStops: [
-                      {
+              //         {
-                        offset: 0,
+              //           offset: 0,
-                        color: '#C79DFF'
+              //           color: '#C79DFF'
-                      },
+              //         },
-                      {
+              //         {
-                        offset: 1,
+              //           offset: 1,
-                        color: '#A490FF'
+              //           color: '#A490FF'
-                      }
+              //         }
-                    ],
+              //       ],
-                    global: false
+              //       global: false
-                  }
+              //     }
-                }
+              //   }
-              },
+              // },
-              {
+              // {
-                value: 95,
+              //   value: 95,
-                itemStyle: {
+              //   itemStyle: {
-                  color: {
+              //     color: {
-                    type: 'linear',
+              //       type: 'linear',
-                    x: 0,
+              //       x: 0,
-                    y: 0,
+              //       y: 0,
-                    x2: 0,
+              //       x2: 0,
-                    y2: 1,
+              //       y2: 1,
-                    colorStops: [
+              //       colorStops: [
-                      {
+              //         {
-                        offset: 0,
+              //           offset: 0,
-                        color: '#FFE873'
+              //           color: '#FFE873'
-                      },
+              //         },
-                      {
+              //         {
-                        offset: 1,
+              //           offset: 1,
-                        color: '#E7AE2A'
+              //           color: '#E7AE2A'
-                      }
+              //         }
-                    ],
+              //       ],
-                    global: false
+              //       global: false
-                  }
+              //     }
-                }
+              //   }
-              }
+              // }
             ]
           }
         ]

src/views/EquipmentManager/equipmentMonitoring/currentState.vue

@@ -185,7 +185,10 @@ export default {
 
       list({ ...this.listQuery, pdlId, name }).then(response => {
         if (response.data.records) {
-          this.dataList = response.data.records
+          // this.dataList = response.data.records
+          // 11-mes 修改模拟数据
+          this.dataList = response.data.records.map(item => ({...item, error: '无故障'}))
+          
         } else {
           this.dataList.splice(0)
         }

src/views/EquipmentManager/inspectionManage/inspectionRecord.vue

@@ -33,7 +33,10 @@
     </div>
     <!-- right -->
     <div class="right-container">
-      <top-title :base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')" style="font-size: 14px; padding-bottom: 14px;" />
+      <top-title
+        :base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')"
+        style="font-size: 14px; padding-bottom: 14px;"
+      />
       <base-table
         :page="1"
         :limit="999"
@@ -64,13 +67,22 @@ import BaseTable from '@/components/BaseTable'
 import Pagination from '@/components/Pagination'
 import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 import { tableHeight } from '@/utils/index'
-import { equipmentList, inspectionLog, einspectionLogD, einspectionItList, einspectionItemLogU } from '@/api/equipment/inspectionManager'
+import {
+  equipmentList,
+  inspectionLog,
+  einspectionLogD,
+  einspectionItList,
+  einspectionItemLogU
+} from '@/api/equipment/inspectionManager'
 import einspectionitemAdd from './components/einspectionitemAdd.vue'
 import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue'
 import { timeFormatter } from '@/filters'
 import StatusBtn from './components/statusBtn.vue'
 import statusTag from './components/statusTag.vue'
 // import newBasicData from '@/filters/newBasicData'
+
+import { Random } from 'mockjs'
+
 const topBtnConfig = [
   {
     type: 'add',
@@ -246,21 +258,23 @@ export default {
             cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
             type: 'warning'
           }
-        ).then(() => {
+        )
-          einspectionLogD({
+          .then(() => {
-            id: raw.data.id
+            einspectionLogD({
-          }).then(res => {
+              id: raw.data.id
-            this.$message({
+            }).then(res => {
-              message: this.$t('module.basicData.visual.success'),
+              this.$message({
-              type: 'success',
+                message: this.$t('module.basicData.visual.success'),
-              duration: 1500,
+                type: 'success',
-              onClose: () => {
+                duration: 1500,
-                this.listQuery.current = 1
+                onClose: () => {
-                this.getList()
+                  this.listQuery.current = 1
-              }
+                  this.getList()
+                }
+              })
             })
           })
-        }).catch(() => { })
+          .catch(() => {})
       } else if (raw.type === 'detail') {
         this.addNew(raw.data.id, 'detail')
       } else if (raw.type === 'edit') {
@@ -274,8 +288,25 @@ export default {
       this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
       inspectionLog(this.listQuery).then(res => {
         if (res.data.records) {
-          this.list = res.data.records
+          // this.list = res.data.records
+          // 11-mes 修改模拟时间
+          this.list = res.data.records.map(item => {
+            let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
+            let startHour = Random.integer(1, 22)
+            return {
+              ...item,
+              inspectionStartTime:
+                startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
+              inspectionEndTime:
+                startDate +
+                ' ' +
+                (startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
+                Random.datetime(':mm:ss')
+            }
+          })
+          // console.log('list;', this.list)
           this.equipmentInspectionId = this.list[0].id
+
           this.getInspectionItem()
         } else {
           this.list = []
@@ -299,7 +330,8 @@ export default {
         })
       }
     },
-    selectRow(val) { // 点击左侧列表
+    selectRow(val) {
+      // 点击左侧列表
       this.equipmentInspectionId = val.id
       this.getInspectionItem()
     },
@@ -340,7 +372,7 @@ export default {
       })
     },
     handleClickR(raw) {
-      if ((raw.type === 'detail') || (raw.type === 'edit')) {
+      if (raw.type === 'detail' || raw.type === 'edit') {
         this.addOrUpdateVisibleR = true
         this.$nextTick(() => {
           this.$refs.addOrUpdateR.init(raw.data.id, raw.type)
@@ -351,23 +383,23 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .app-container {
+.app-container {
-    padding-top: 0;
+  padding-top: 0;
-    .left-container {
+  .left-container {
-      display: inline-block;
+    display: inline-block;
-      // width: 500px;
+    // width: 500px;
-      width: 50%;
+    width: 50%;
-      border-right: 8px solid #f2f4f9;
+    border-right: 8px solid #f2f4f9;
-      height: 100%;
+    height: 100%;
-      padding-top: 16px;
+    padding-top: 16px;
-    }
-    .right-container {
-      display: inline-block;
-      // width: calc(100% - 510px);
-      width: 49%;
-      vertical-align: top;
-      height: 100%;
-      padding-top: 23px;
-    }
   }
-  </style>
+  .right-container {
+    display: inline-block;
+    // width: calc(100% - 510px);
+    width: 49%;
+    vertical-align: top;
+    height: 100%;
+    padding-top: 23px;
+  }
+}
+</style>

src/views/EquipmentManager/mockData.js

@@ -33,25 +33,36 @@ const PriorityComponent = {
 }
 
 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 },
+  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
-  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 },
+  // { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
   { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
-  { label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
+  { label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
   { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
 ]
 
 export const equipmentExceptionDatalist = [
-  { 'eqName': 'A1一次固化机', 'pl': 'E线', 'content': '开化是专品直', 'creator': '郭娜', 'time': '1997-06-08 06:14:37', 'priority': 1 },
+  { "eqName": "A1丝印", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
-  { 'eqName': 'B1一次冷却机', 'pl': 'B线', 'content': '书记因地观同展土军信', 'creator': '薛洋', 'time': '2006-03-15 10:39:30', 'priority': 2 },
+  { "eqName": "B1磨边后清洗", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
-  { 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
+  { "eqName": "B1磨边", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
-  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
+  // { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
-  { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
+  { "eqName": "B2丝印", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
-  { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
+  { "eqName": "A3磨边", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
-  { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
+  { "eqName": "B2打孔后清洗", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
-  { 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
+  // { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
-  { 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
+  { "eqName": "A2磨边", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
-  { 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
+  { "eqName": "A2丝印", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
+  { "eqName": "B1打孔后清洗", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
+  { "eqName": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
+  { "eqName": "B3丝印", "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": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
+  { "eqName": "A钢化", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
+  { "eqName": "B2磨边后清洗", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
+  { "eqName": "B钢化", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
+  { "eqName": "B3磨边后清洗", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
+  { "eqName": "A1磨边", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
+]
 
 /** 设备异常报警 */
 const LifeRemainComponent = {
@@ -60,46 +71,71 @@ const LifeRemainComponent = {
     injectData: Object
   },
   computed: {
+    remainLeftPercentage() {
+      return this.injectData.remain / 300
+    },
     statusColor() {
       const colors = [
-        'rgba(255,84,76,0.6)', // red < 0
+        'rgba(255,84,76,0.6)', // red < 10%
-        '#FFBD43', // yellow  < 10
+        '#FFBD43', // yellow  < 20%
-        'rgba(142,254,83,0.6)' // green >= 10
+        'rgba(142,254,83,0.6)' // green 
       ]
-      return this.injectData.remain < 0 ? colors[0] : this.injectData.remain < 10 ? colors[1] : colors[2]
+      return this.remainLeftPercentage < 0.1 ? colors[0] : this.remainLeftPercentage < 0.2 ? colors[1] : colors[2]
     }
 
   },
   render: function (h) {
     return h('span', {
       style:
-        { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
+        { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }
+      // { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
     },
-      this.injectData.remain)
+      [
+        h('span', { style: { color: this.remainLeftPercentage < 0.1 ? 'rgba(255,84,76,0.6)' : this.remainLeftPercentage < 0.2 ? '#FFBD43' : '#ffffffee' } }, this.injectData.remain),
+        h('span', { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: this.remainLeftPercentage * 100 + '%', opacity: 0.8, backgroundColor: this.statusColor, } })
+      ])
   }
 }
 
 export const equipmentAlarmProps = [
   { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
   { label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
-  { label: '所属产线', prop: 'pl', align: 'center' },
+  // { label: '所属产线', prop: 'pl', align: 'center' },
   { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
   { label: '报警内容', prop: 'content', align: 'center' }
 ]
 
 export const equipmentAlarmDatalist = [
-  { 'eqName': 'A1预热机', 'eqCode': 'SB501464', 'pl': 'C线', 'content': '使决方不相动', 'priority': 3 },
-  { 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 1 },
-  { 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
-  { 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
-  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
   {
-    'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
+    "pl": "B", "eqName": "B1丝印", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
   },
-  { 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 2 },
+  { "pl": "A", "eqName": "A2磨边后清洗", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 1 },
+  { "pl": "B", "eqName": "B2磨边", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
-  { 'eqName': 'A钢化炉', 'eqCode': 'SB19064', 'pl': 'D线', 'content': '很这置合它里革民', 'priority': 4 }
+  // { "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
+  { "pl": "B", "eqName": "B2丝印", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
+  {
+    "pl": "A", "eqName": "A1磨边后清洗", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
+  },
+  { "pl": "A", "eqName": "A3丝印", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
+  {
+    "pl": "A", "eqName": "A2磨边", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
+  },
+  { "pl": "B", "eqName": "B钢化", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
+  {
+    "pl": "B", "eqName": "B1磨边后清洗", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
+  },
+  { "pl": "A", "eqName": "A1磨边", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
+  {
+    "pl": "B", "eqName": "B1丝印", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
+  },
+  // { "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
+  { "pl": "A", "eqName": "A3磨边", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
+  { "pl": "B", "eqName": "B3磨边后清洗", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
+  { "pl": "A", "eqName": "A3丝印", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
+  { "pl": "A", "eqName": "A钢化", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
+  // { "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
+  { "pl": "A", "eqName": "A钢化", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
+  { "pl": "B", "eqName": "B2磨边后清洗", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
 ]
 
 /** 设备分析 */
@@ -113,39 +149,43 @@ export const OEE_PER_LINE = {
 }
 
 export const equipmentAnalysisData = [
-  { 'name': '冷端下片单元', 'oee': '0.14', 'mtbr': '0.60', 'mtbf': '0.32' },
+  { 'name': '冷端下片单元', "oee": 0.62, "mtbr": 25, "mtbf": 54875 },
-  { 'name': '磨边单元', 'oee': '0.51', 'mtbr': '0.85', 'mtbf': '0.22' },
+  { 'name': '磨边单元', "oee": 0.789, "mtbr": 25, "mtbf": 61323 },
-  { 'name': '丝印', 'oee': '0.75', 'mtbr': '0.92', 'mtbf': '0.93' },
+  { 'name': '丝印', "oee": 0.83, "mtbr": 19, "mtbf": 89653 },
-  { 'name': '上片机器人', 'oee': '0.89', 'mtbr': '0.25', 'mtbf': '0.26' },
+  { 'name': '上片机器人', "oee": 0.66, "mtbr": 30, "mtbf": 71839 },
-  { 'name': '激光打印', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
+  { 'name': '激光打孔', "oee": 0.71, "mtbr": 11, "mtbf": 39362 },
-  { 'name': '镀膜', 'oee': '0.55', 'mtbr': '0.85', 'mtbf': '0.65' }
+  { 'name': '镀膜', "oee": 0.686, "mtbr": 25, "mtbf": 62901 },
 ]
 
 export const sparepartsProps = [
-  { prop: 'name', label: '部件名称', align: 'center' },
+  { prop: 'name', label: '部件名称', align: 'center', 'min-width': 100 },
-  { prop: 'eq', label: '所属设备', align: 'center' },
+  { prop: 'eq', label: '所属设备', align: 'center', 'min-width': 60 },
-  { prop: 'pl', label: '所属产线', align: 'center' },
+  { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 60 },
-  { prop: 'update_time', label: '更换时间', align: 'center' },
+  { prop: 'update_time', label: '更换时间', align: 'center', 'min-width': 100 },
-  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
+  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent, 'min-width': 100 },
-  { prop: 'stock', label: '备件库存量', align: 'center' },
+  { prop: 'stock', label: '备件库存量', align: 'center', 'min-width': 50 },
-  { prop: 'location', label: '库位', align: 'center' }
+  { prop: 'location', label: '库位', align: 'center', 'min-width': 100 },
 ]
 
 export const sparepartsDatalist = [
-  { 'name': '激光打印', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
+  { "pl": "B", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-09-12 13:05:54", "remain": 104, "stock": 2, "location": "备件库-A-3" },
-  { 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' },
+  { "pl": "A", "name": "镀膜液、异丙醇", "eq": "镀膜机", "update_time": "2022-09-24 08:34:36", "remain": 152, "stock": 10, "location": "备件库-D-1" },
-  { 'name': '激光打印', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' },
+  { "pl": "B", "name": "磨轮", "eq": "磨边机", "update_time": "2022-10-09 09:15:08", "remain": 169, "stock": 9, "location": "备件库-A-3" },
-  { 'name': '磨边单元', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2018-07-18 13:15:01', 'remain': 86, 'stock': 2342, 'location': '库位83' },
+  { "pl": "B", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-02 12:26:07", "remain": 33, "stock": 12, "location": "备件库-C-3" },
-  { 'name': '上片机器人', 'eq': 'A2一次固化机', 'pl': 'E线', 'update_time': '1998-06-11 09:01:10', 'remain': 84, 'stock': 4359, 'location': '库位12' },
+  { "pl": "A", "name": "磨轮", "eq": "磨边机", "update_time": "2022-11-14 04:43:21", "remain": 20, "stock": 11, "location": "备件库-E-9" },
-  { 'name': '丝印', 'eq': 'A1一次固化机', 'pl': 'E线', 'update_time': '2016-02-13 16:20:01', 'remain': -23, 'stock': 888, 'location': '库位69' },
+  { "pl": "A", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-25 15:19:57", "remain": 192, "stock": 8, "location": "备件库-D-9" },
-  { 'name': '激光打印', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' },
+  { "pl": "A", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-10-31 03:21:29", "remain": 96, "stock": 19, "location": "备件库-E-10" },
-  { 'name': '丝印', 'eq': 'A1一次固化机', 'update_time': '1980-01-17 04:29:56', 'remain': 73, 'stock': 305, 'location': '库位68' },
+  { "pl": "B", "name": "网板", "eq": "丝印机", "update_time": "2022-09-01 15:49:08", "remain": 127, "stock": 8, "location": "备件库-E-10" },
-  { 'name': '激光打印', 'eq': 'A2一次冷却机', 'pl': 'B线', 'update_time': '2014-02-25 17:19:43', 'remain': 36, 'stock': 199, 'location': '库位86' },
+  { "pl": "A", "name": "网板", "eq": "丝印机", "update_time": "2022-09-25 04:47:04", "remain": 83, "stock": 8, "location": "备件库-C-6" },
-  { 'name': '上片机器人', 'eq': 'A2一次冷却机', 'pl': 'C线', 'update_time': '2017-01-23 17:01:29', 'remain': -3, 'stock': 146, 'location': '库位79' },
-  { 'name': '镀膜', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2013-02-19 01:29:19', 'remain': 37, 'stock': 6977, 'location': '库位85' },
-  { 'name': '激光打印', 'eq': 'A1预热机', 'pl': 'B线', 'update_time': '1972-04-26 06:54:43', 'remain': -82, 'stock': 5039, 'location': '库位38' }
 ]
 
+import { default as blue } from './blue.png'
+import { default as orange } from './orange.png'
+import { default as green } from './green.png'
+import { default as red } from './red.png'
+
+console.log('blue', blue)
+
 const StatusComponent = {
   name: 'StatusComponent',
   props: {
@@ -153,19 +193,19 @@ const StatusComponent = {
   },
   computed: {
     statusColor() {
-      const colors = [
+      const colors = [green, orange, blue, red
-        '#67ff55',
+        // '#67ff55',
-        'green',
+        // '#e0e0e0',
-        '#ffb70c',
+        // '#ffb70c',
-        '#0b58ff',
+        // '#0b58ff',
-        '#ff0c0c'
+        // '#ff0c0c'
       ]
       return colors[this.injectData.status - 1]
     },
     statusText() {
       return [
         '已完成',
-        '已下发',
+        // '已下发',
         '已暂定',
         '进行中',
         '已结束'
@@ -173,25 +213,69 @@ const StatusComponent = {
     }
   },
   render: function (h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+    return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
+      h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(4px * var(--beilv))' } }, ''),
       h('span', this.statusText)
     ])
   }
 }
 
-export const rightSideProps = [
+// 突发性维护
+export const suddenMaintainProps = [
   { prop: 'orderId', label: '工单编号' },
-  { prop: 'pl', label: '产线名称' },
+  { prop: 'time', label: '时间' },
   { prop: 'eq', label: '设备名称' },
   { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
-  { prop: 'charger', label: '执行人' },
+  { prop: 'team', label: '班组' },
   { prop: 'duration', label: '时长' }
 ]
 
-export const rightSideDatalist = [
+// 计划内保养
-  { 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 2, 'charger': '任洋', 'duration': 5 },
+export const inPlanMaintainProps = [
-  { 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 2, 'charger': '廖丽', 'duration': 6 },
+  { prop: 'orderId', label: '工单编号' },
-  { 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 }
+  { prop: 'pl', label: '产线名称' },
-  // { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'duration', label: '时长' }
 ]
+
+// 防御性维护
+export const defenceMaintainProps = [
+  { prop: 'orderId', label: '工单编号' },
+  { prop: 'eq', label: '设备名称' },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'duration', label: '时长' }
+]
+
+// 点检工单
+export const wwwOrderProps = [
+  { prop: 'orderId', label: '工单编号' },
+  { prop: 'pl', label: '产线名称' },
+  { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
+  { prop: 'team', label: '班组' },
+  { prop: 'time', label: '时间' }
+]
+
+export const rightSideDatalist = [
+  { "orderId": "WOD20200807030135", "time": "2022-11-12 14:08:04", "eq": "A1磨边", "status": 3, "team": "白班", "duration": "26min" },
+  { "orderId": "WOD20210217143647", "time": "2022-11-15 18:48:40", "eq": "A1打孔", "status": 2, "team": "白班", "duration": "27min" },
+  { "orderId": "WOD20200413103728", "time": "2022-11-26 20:11:39", "eq": "A1固化", "status": 1, "team": "夜班", "duration": "24min" },
+]
+export const rightSideDatalist2 = [
+  { "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
+  { "orderId": "WOD20211026022742", "pl": "A", "status": 2, "team": "夜班", "duration": "28min" },
+  { "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
+]
+export const rightSideDatalist3 = [
+  { "orderId": "WOD20210829073921", "eq": "A3钢化后清洗", "status": 2, "team": "白班", "duration": "29min" },
+  { "orderId": "WOD20220429180823", "eq": "A3丝印", "status": 2, "team": "夜班", "duration": "26min" },
+  { "orderId": "WOD20220915050149", "eq": "A3磨边后清洗", "status": 3, "team": "白班", "duration": "21min" },
+]
+export const rightSideDatalist4 = [
+  { "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2022-12-17 13:31:24" },
+  { "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
+  { "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-11-27 10:52:19" },
+]
+
+

src/views/FactoryManage/AbnormalAlarm.vue

@@ -99,23 +99,19 @@ const tableProps = [
   {
     prop: 'createTime',
     label: i18n.t('module.factory.abnormalAlarm.alarmTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'alarmType',
-    label: i18n.t('module.factory.abnormalAlarm.alarmType'),
+    label: i18n.t('module.factory.abnormalAlarm.alarmType')
-    align: 'center'
   },
   {
     prop: 'alarmGrade',
-    label: i18n.t('module.factory.abnormalAlarm.alarmLevel'),
+    label: i18n.t('module.factory.abnormalAlarm.alarmLevel')
-    align: 'center'
   },
   {
     prop: 'alarmContent',
-    label: i18n.t('module.factory.abnormalAlarm.alarmReason'),
+    label: i18n.t('module.factory.abnormalAlarm.alarmReason')
-    align: 'center'
   },
   // {
   //   prop: 'alarmNotify',
@@ -131,7 +127,6 @@ const tableProps = [
   {
     prop: 'status',
     label: i18n.t('module.factory.abnormalAlarm.status'),
-    align: 'center',
     filter: factory('alarmStatus')
   }
   // {

src/views/FactoryManage/EquipmentAlarm.vue

@@ -88,50 +88,41 @@ const tableProps = [
   {
     prop: 'createTime',
     label: i18n.t('module.factory.abnormalAlarm.alarmStartTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'handleTime',
     label: i18n.t('module.factory.abnormalAlarm.alarmEndTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'equipmentName',
-    label: i18n.t('module.factory.abnormalAlarm.equipmentName'),
+    label: i18n.t('module.factory.abnormalAlarm.equipmentName')
-    align: 'center'
   },
   {
     prop: 'alarmGrade',
-    label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
+    label: i18n.t('module.basicData.alarmManagement.AlarmLevel')
-    align: 'center'
   },
   {
     prop: 'equipmentArea',
-    label: i18n.t('module.factory.abnormalAlarm.equipmentArea'),
+    label: i18n.t('module.factory.abnormalAlarm.equipmentArea')
-    align: 'center'
   },
   {
     prop: 'alarmContent',
-    label: i18n.t('module.factory.abnormalAlarm.alarmInfo'),
+    label: i18n.t('module.factory.abnormalAlarm.alarmInfo')
-    align: 'center'
   },
   {
     prop: 'alarmNotify',
-    label: i18n.t('module.factory.abnormalAlarm.alarmNotify'),
+    label: i18n.t('module.factory.abnormalAlarm.alarmNotify')
-    align: 'center'
   },
   {
     prop: 'status',
     label: i18n.t('module.factory.abnormalAlarm.alarmStatus'),
-    align: 'center',
     subcomponent: AlarmStatus
   },
   {
     prop: 'remark',
-    label: i18n.t('module.basicData.visual.Remarks'),
+    label: i18n.t('module.basicData.visual.Remarks')
-    align: 'center'
   }
 ]
 export default {

src/views/FactoryManage/RealtimeDataOfOrder.vue

@@ -147,21 +147,22 @@ export default {
       fetchList('order').then(response => {
         if (response.data) {
           this.dataList = response.data
-          this.dataList.push({
+          // 11-mes:
-            orderName: '22订单',
+          // this.dataList.push({
-            productName: 'xxx光伏玻璃2.0B',
+          //   orderName: '22订单',
-            productSize: '2*1128*2272',
+          //   productName: 'xxx光伏玻璃2.0B',
-            productionLine: 'C线 D线 A线',
+          //   productSize: '2*1128*2272',
-            det: Array(3).fill({
+          //   productionLine: 'C线 D线 A线',
-              inputNum: '-259730',
+          //   det: Array(3).fill({
-              outputNum: '-772443',
+          //     inputNum: '-259730',
-              passRate: 100,
+          //     outputNum: '-772443',
-              recordTime: '2022-09-06T14:00:00',
+          //     passRate: 100,
-              scrapNum: '0',
+          //     recordTime: '2022-09-06T14:00:00',
-              sumInputNum: '259730',
+          //     scrapNum: '0',
-              sumOutputNum: '772443'
+          //     sumInputNum: '259730',
-            })
+          //     sumOutputNum: '772443'
-          })
+          //   })
+          // })
           this.transformData()
         } else {
           this.dataList.splice(0)

src/views/FactoryManage/ShiftManager.vue

@@ -107,29 +107,24 @@ const tableProps = [
   {
     prop: 'planHandoverTime',
     label: i18n.t('module.teamManager.shift.onlineTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'planOfflineTime',
     label: i18n.t('module.teamManager.shift.offlineTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'className',
-    label: i18n.t('module.teamManager.shift.teamName'),
+    label: i18n.t('module.teamManager.shift.teamName')
-    align: 'center'
   },
   {
     prop: 'classCode',
-    label: i18n.t('module.teamManager.shift.teamCode'),
+    label: i18n.t('module.teamManager.shift.teamCode')
-    align: 'center'
   },
   {
     prop: 'planSection',
     label: i18n.t('module.teamManager.shift.lineOrProcess'),
-    align: 'center',
     // subcomponent: shiftManagerLine
     subcomponent: {
       props: {
@@ -161,18 +156,15 @@ const tableProps = [
   },
   {
     prop: 'planTeamName',
-    label: i18n.t('module.teamManager.shift.handoverTeam'),
+    label: i18n.t('module.teamManager.shift.handoverTeam')
-    align: 'center'
   },
   {
     prop: 'planTeamLeader',
-    label: i18n.t('module.teamManager.shift.handoverMonitor'),
+    label: i18n.t('module.teamManager.shift.handoverMonitor')
-    align: 'center'
   },
   {
     prop: 'handoverStatus',
     label: i18n.t('module.teamManager.shift.status'),
-    align: 'center',
     subcomponent: shiftManagerStatus
   },
   // {

src/views/FactoryManage/TeamInfo.vue

@@ -8,10 +8,7 @@
 -->
 <template>
   <div class="app-container">
-    <head-form
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
-      :form-config="headFormConfig"
-      @headBtnClick="btnClick"
-    />
     <base-table
       :top-btn-config="topBtnConfig"
       :page="listQuery.current"
@@ -21,12 +18,7 @@
       :is-loading="listLoading"
       @clickTopBtn="clickTopBtn"
     >
-      <method-btn
+      <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
-        slot="handleBtn"
-        :width="trueWidth"
-        :method-list="tableBtn"
-        @clickBtn="handleClick"
-      />
     </base-table>
     <pagination
       v-show="total > 0"
@@ -35,11 +27,7 @@
       :limit.sync="listQuery.size"
       @pagination="getList()"
     />
-    <team-info-detail
+    <team-info-detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
-      v-if="addOrUpdateVisible"
-      ref="addOrUpdate"
-      @refreshDataList="getList"
-    />
     <team-info-add
       v-if="addVisible"
       ref="addNew"
@@ -61,6 +49,7 @@ import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 import { timeFormatter } from '@/filters'
 import i18n from '@/lang'
 // import data from '../pdf/content'
+import { Random } from 'mockjs'
 
 /**
  * 表格表头配置项 TypeScript接口注释
@@ -98,35 +87,29 @@ const tableProps = [
   // },
   {
     prop: 'className',
-    label: i18n.t('module.teamManager.teamInfo.className'),
+    label: i18n.t('module.teamManager.teamInfo.className')
-    align: 'center'
   },
   {
     prop: 'classCode',
-    label: i18n.t('module.teamManager.teamInfo.classCode'),
+    label: i18n.t('module.teamManager.teamInfo.classCode')
-    align: 'center'
   },
   {
     prop: 'planTeamName',
-    label: i18n.t('module.teamManager.teamInfo.planTeamName'),
+    label: i18n.t('module.teamManager.teamInfo.planTeamName')
-    align: 'center'
   },
   {
     prop: 'planPreTeamName',
-    label: i18n.t('module.teamManager.teamInfo.planPreTeamName'),
+    label: i18n.t('module.teamManager.teamInfo.planPreTeamName')
-    align: 'center'
   },
   {
     prop: 'planHandoverTime',
     label: i18n.t('module.teamManager.teamInfo.onlineTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   },
   {
     prop: 'planOfflineTime',
     label: i18n.t('module.teamManager.teamInfo.offlineTime'),
-    filter: timeFormatter,
+    filter: timeFormatter
-    align: 'center'
   }
   // {
   //   prop: 'workStatus',
@@ -224,9 +207,31 @@ export default {
       this.listQuery.planHandoverEndTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : ''
       this.$nextTick(() => {
         this.listLoading = true
-        list(this.listQuery).then((response) => {
+        list(this.listQuery).then(response => {
           if (response.data.records) {
-            this.list = response.data.records
+            // this.list = response.data.records
+            // 11-mes 数据模拟修改
+
+            this.list = response.data.records.map(item => {
+              let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
+              let endDate = startDate.split('-')
+              endDate[2] = +endDate[2] + Random.integer(0, 3)
+
+              let startHour = Random.integer(1, 22)
+
+              return {
+                ...item,
+                planHandoverTime:
+                  startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
+                planOfflineTime:
+                  endDate.join('-') +
+                  ' ' +
+                  (startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
+                  Random.datetime(':mm:ss')
+              }
+            })
+
+            console.log("list;', ", this.list)
           } else {
             this.list.splice(0, this.list.length)
           }
@@ -269,7 +274,7 @@ export default {
           const blob = new Blob([response.data])
           const reader = new FileReader()
           reader.readAsDataURL(blob)
-          reader.onload = (e) => {
+          reader.onload = e => {
             const a = document.createElement('a')
             a.download = fileName
             a.href = e.target.result
@@ -291,7 +296,7 @@ export default {
     },
     clickTopBtn(val) {
       if (val === 'add') {
-        this.addNewInfo()// 新增
+        this.addNewInfo() // 新增
       }
     }
   }

src/views/OperationalOverview/components/mixins/resize.js

@@ -10,7 +10,13 @@ export default {
   mounted() {
     this.$_resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        if (this.setChartOption) {
+          this.setChartOption()
+          this.$nextTick(() => {
+            this.chart.resize()
+          })
+        } else
+          this.chart.resize()
       }
     }, 100)
     this.$_initResizeEvent()

src/views/QualityManager/HomePage.vue

@@ -4,11 +4,11 @@
     <section class="techy-body">
       <div class="part-1">
         <div>
-          <techy-container :title="'质量异常上报'" icon="质量1">
+          <techy-container :title="'离线异常上报'" icon="质量1">
             <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityTableProps"
                 :table-data="qualityDatalist"
@@ -18,11 +18,11 @@
         </div>
 
         <div class=" fix-table-exception-alert">
-          <techy-container :title="'质量异常报警'" icon="质量2">
+          <techy-container :title="'在线异常上报'" icon="质量2">
             <div class="table-wrapper">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityExceptionTableProps"
                 :table-data="qualityExceptionDatalist"
@@ -38,75 +38,203 @@
             <!-- 第一行 -->
             <div class="quality-analysis__body__row-1">
               <!-- 第一列 -->
-              <div class="grow-8 flex gap-16">
+              <div class="flex gap-16" style="flex: 1;">
-                <div class="grow">
+                <div style="width: calc(400px * var(--beilv)); flex: 1;">
-                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                  <techy-box class="" style="padding: calc(8px * var(--beilv));">
-                    <techy-analysis-header>缺陷分类分析</techy-analysis-header>
+                    <techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
-                    <new-bar
+                    <div
-                      :xlabel-font-size="8"
+                      class="absolute top-0 left-0"
-                      :xlabel-rotate="20"
+                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-                      :name-list="[
+                    >
-                        '擦划伤1',
+                      <!-- <new-bar
-                        '擦划伤2',
+                        chart-name="realtime-cost-production"
-                        '擦划伤3',
+                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
-                        '擦划伤4',
+                        :data-list="[
-                        '擦划伤5',
+                          {
-                        '擦划伤6',
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                        '擦划伤7',
+                            bottomColor: '#49FBD6',
-                        '擦划伤8',
+                            name: '产线A',
-                        '擦划伤9',
+                            data: [163, 184, 110, 22, 96, 74]
-                        '擦划伤0',
+                          },
-                        '擦划伤11',
+                          {
-                        '擦划伤12'
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                      ]"
+                            bottomColor: '#31A2FF',
-                      chart-name="fault-category"
+                            name: '产线B',
-                      :data-list="[
+                            data: [162, 172, 122, 15, 82, 74]
-                        {
+                          }
-                          topColor: 'rgba(59, 76, 118, 0.2)',
+                        ]"
-                          bottomColor: '#31A2FF',
+                      /> -->
-                          name: '库存',
+                      <techy-bar
-                          data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
+                        unit-name="单位/片"
-                        }
+                        :datainfo="[
-                      ]"
+                          {
-                    />
+                            name: '产线A',
+                            list: [163, 184, 110, 22, 96, 74]
+                          },
+                          {
+                            name: '产线B',
+                            list: [162, 172, 122, 15, 82, 74]
+                          }
+                        ]"
+                      />
+                    </div>
                   </techy-box>
                 </div>
-                <div class="grow">
+                <div style="width: calc(400px * var(--beilv)); flex: 1;">
-                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                  <techy-box class="" style="padding: calc(8px * var(--beilv));">
-                    <techy-analysis-header>工序缺陷分析</techy-analysis-header>
+                    <techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
-                    <new-bar
+                    <div
-                      chart-name="process-fault"
+                      class="absolute top-0 left-0"
-                      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
+                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-                      :data-list="[
+                    >
-                        {
+                      <!-- <new-bar
-                          topColor: 'rgba(59, 76, 118, 0.2)',
+                        chart-name="realtime-cost-production"
-                          bottomColor: '#49FBD6',
+                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
-                          name: '库存',
+                        unit-name="单位: 千片"
-                          data: [64, 91, 55, 65, 37, 77]
+                        :data-list="[
-                        }
+                          {
-                      ]"
+                            topColor: 'rgba(59, 76, 118, 0.2)',
-                    />
+                            bottomColor: '#49FBD6',
+                            name: '产线A',
+                            data: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
+                          },
+                          {
+                            topColor: 'rgba(59, 76, 118, 0.2)',
+                            bottomColor: '#31A2FF',
+                            name: '产线B',
+                            data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
+                          }
+                        ]"
+                      /> -->
+                      <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>
                 </div>
               </div>
 
               <!-- 第二列 -->
-              <div class="grow-6 flex gap-16">
+              <div class="flex gap-16" style="flex: 1; width: 1px;">
-                <div class="grow">
+                <div class="" style="width: calc(380px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header>产线缺陷分析</techy-analysis-header>
+                    <techy-analysis-header :show-top-icon="false">
-                    <pl-fault-analysis-pie-chart />
+                      产线缺陷分析
+                      <template v-slot:dateSelect>
+                        <div class="pl-select">
+                          <span
+                            :class="{ 'pl-select__active': plMode === 'a' }"
+                            @click="
+                              plMode = 'a'
+                              chosenDatalist = getFaultDataList()
+                            "
+                          >
+                            A
+                          </span>
+                          <span
+                            :class="{ 'pl-select__active': plMode === 'b' }"
+                            @click="
+                              plMode = 'b'
+                              chosenDatalist = getFaultDataList()
+                            "
+                          >
+                            B
+                          </span>
+                        </div>
+                        <div class="date-select">
+                          <span
+                            :class="{ 'date-select__active': dateMode === 'day' }"
+                            @click="
+                              dateMode = 'day'
+                              chosenDatalist = getFaultDataList()
+                            "
+                          >
+                            日
+                          </span>
+                          <span
+                            :class="{ 'date-select__active': dateMode === 'month' }"
+                            @click="
+                              dateMode = 'month'
+                              chosenDatalist = getFaultDataList()
+                            "
+                          >
+                            月
+                          </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(28px * var(--beilv));"
+                      >
+                        <!--单位千片和单位片 -->
+                        {{ unit }}
+                      </span>
+                      <!-- data-period 是指数据是月数据还是日数据 -->
+                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" :data-period="dateMode" />
+                    </div>
                   </techy-box>
                 </div>
-                <div class="grow">
+                <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header>产品成品率</techy-analysis-header>
+                    <!-- <productionRateHeader
-                    <new-line-stack />
+                      @update-data="
-                    <div class="date-select">
+                        obj => {
-                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                          dataUpdateToken = obj.str
-                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                          dateMode2 = obj.mode
-                        月
+                        }
-                      </span>
+                      "
+                    >
+                      产品成品率
+                    </productionRateHeader> -->
+
+                    <techy-analysis-header :show-top-icon="false">
+                      产线成品率
+                      <template v-slot:dateSelect>
+                        <div class="pl-select">
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'day' }"
+                            @click="
+                              dateMode2 = 'day'
+                              dataUpdateToken = Math.random() + ''
+                            "
+                          >
+                            日
+                          </span>
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'month' }"
+                            @click="
+                              dateMode2 = 'month'
+                              dataUpdateToken = Math.random() + ''
+                            "
+                          >
+                            月
+                          </span>
+                        </div>
+                        <div class="date-select fake-legend">
+                          <span>
+                            <!-- 产线A -->
+                          </span>
+                          <span>
+                            <!-- 产线B -->
+                          </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>
@@ -117,19 +245,7 @@
             <!-- 第二行 -->
             <div class="quality-analysis__body__row-2">
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线A工序质量分析(日)</techy-analysis-header>
-                <div class="grow grid gap-16-8 column-2 row-5">
-                  <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
-                    :key="index"
-                    :name="item.name"
-                    :amount="item.amount"
-                    color="green"
-                  />
-                </div>
-              </techy-box>
-              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
                     v-for="(item, index) in qualityAnalysisDatalist"
@@ -141,10 +257,22 @@
                 </div>
               </techy-box>
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线A工序质量分析(月)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
+                    v-for="(item, index) in qualityAnalysisDatalistMonth"
+                    :key="index"
+                    :name="item.name"
+                    :amount="item.amount"
+                    color="blue"
+                  />
+                </div>
+              </techy-box>
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
+                <techy-analysis-header>产线B工序质量分析(日)</techy-analysis-header>
+                <div class="grow grid gap-16-8 column-2 row-5">
+                  <techy-analysis-bar
+                    v-for="(item, index) in qualityAnalysisDatalistB"
                     :key="index"
                     :name="item.name"
                     :amount="item.amount"
@@ -153,14 +281,14 @@
                 </div>
               </techy-box>
               <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
-                <techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
+                <techy-analysis-header>产线B工序质量分析(月)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
-                    v-for="(item, index) in qualityAnalysisDatalist"
+                    v-for="(item, index) in qualityAnalysisDatalistMonthB"
                     :key="index"
                     :name="item.name"
                     :amount="item.amount"
-                    color="pink"
+                    color="orange"
                   />
                 </div>
               </techy-box>
@@ -179,11 +307,13 @@ import TechyBox from './components/TechyBox.vue'
 import TechyTable from './components/TechyTable.vue'
 import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
 import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
+// import productionRateHeader from './components/productionRateHeader.vue'
 // import FaultCategoryChart from './components/charts/FaultCategoryChart.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'
@@ -199,32 +329,116 @@ export default {
     TechyTable,
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
-    NewBar,
+    TechyBar,
     NewLineStack
+    // productionRateHeader
   },
   data() {
+    const quexianDatalist = [
+      [
+        // 月a
+        { value: 5.21, name: '破片' },
+        { value: 3.2, name: '崩边' },
+        { value: 4.12, name: '脏污' },
+        { value: 2.61, name: '划擦伤' },
+        { value: 0.96, name: '崩孔' },
+        { value: 2.2, name: '其他' }
+      ],
+      [
+        // 月b
+        { value: 4.34, name: '破片' },
+        { value: 3.4, name: '崩边' },
+        { value: 4.1, name: '脏污' },
+        { value: 2.4, name: '划擦伤' },
+        { value: 0.32, name: '崩孔' },
+        { value: 2.14, name: '其他' }
+      ],
+      [
+        // 日a
+        { value: 184, name: '破片' },
+        { value: 110, name: '崩边' },
+        { value: 163, name: '脏污' },
+        { value: 96, name: '划擦伤' },
+        { value: 22, name: '崩孔' },
+        { value: 74, name: '其他' }
+      ],
+      [
+        // 日b
+        { value: 172, name: '破片' },
+        { value: 122, name: '崩边' },
+        { value: 162, name: '脏污' },
+        { value: 82, name: '划擦伤' },
+        { value: 15, name: '崩孔' },
+        { value: 74, name: '其他' }
+      ]
+    ]
+
     return {
+      dataUpdateToken: 'xx-token',
+      plMode: 'a',
       dateMode: 'month',
+      dateMode2: 'day',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
       qualityExceptionTableProps,
       qualityAnalysisDatalist: [
-        { name: '热端', amount: 20233 },
+        { name: '上片', amount: 22 },
-        { name: '丝印', amount: 20233328 },
+        { name: '钢化', amount: 2 },
-        { name: '原片', amount: 20 },
+        { name: '磨边', amount: 221 },
-        { name: '钢化', amount: 2000 },
+        { name: '下片', amount: 27 },
-        { name: '上片磨边', amount: 20 },
+        { name: '丝印', amount: 93 },
-        { name: '下片铺纸', amount: 202423 },
+        { name: '包装', amount: 3 },
-        { name: '镀膜', amount: 20 },
+        { name: '打孔', amount: 31 },
-        { name: '包装', amount: 20 },
+        { name: '清洗', amount: 2 },
-        { name: '清晰', amount: 20 },
+        { name: '镀膜', amount: 95 },
-        { name: '物流仓储', amount: 233920 }
+        { name: '其他', amount: 171 }
-      ]
+      ],
+      qualityAnalysisDatalistMonth: [
+        { name: '上片', amount: 665 },
+        { name: '钢化', amount: 56 },
+        { name: '磨边', amount: 6541 },
+        { name: '下片', amount: 820 },
+        { name: '丝印', amount: 2790 },
+        { name: '包装', amount: 83 },
+        { name: '打孔', amount: 964 },
+        { name: '清洗', amount: 61 },
+        { name: '镀膜', amount: 2470 },
+        { name: '其他', amount: 4959 }
+      ],
+      qualityAnalysisDatalistB: [
+        { name: '上片', amount: 16 },
+        { name: '钢化', amount: 4 },
+        { name: '磨边', amount: 201 },
+        { name: '下片', amount: 21 },
+        { name: '丝印', amount: 100 },
+        { name: '包装', amount: 1 },
+        { name: '打孔', amount: 27 },
+        { name: '清洗', amount: 2 },
+        { name: '镀膜', amount: 93 },
+        { name: '其他', amount: 163 }
+      ],
+      qualityAnalysisDatalistMonthB: [
+        { name: '上片', amount: 698 },
+        { name: '钢化', amount: 49 },
+        { name: '磨边', amount: 6321 },
+        { name: '下片', amount: 799 },
+        { name: '丝印', amount: 2782 },
+        { name: '包装', amount: 72 },
+        { name: '打孔', amount: 992 },
+        { name: '清洗', amount: 63 },
+        { name: '镀膜', amount: 2510 },
+        { name: '其他', amount: 4920 }
+      ],
+      quexianDatalist,
+      chosenDatalist: quexianDatalist[0]
     }
   },
   computed: {
-    ...mapGetters(['sidebar'])
+    ...mapGetters(['sidebar']),
+    unit() {
+      return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
+    }
   },
   methods: {
     changeFullScreen() {
@@ -236,29 +450,39 @@ export default {
         return false
       }
       screenfull.toggle(this.$refs['cockpit-container-quality'])
+    },
+    getFaultDataList() {
+      const { dateMode, plMode, quexianDatalist } = this
+      if (dateMode === 'month' && plMode === 'a') return quexianDatalist[0]
+      else if (dateMode === 'month' && plMode === 'b') return quexianDatalist[1]
+      else if (dateMode === 'day' && plMode === 'a') return quexianDatalist[2]
+      else if (dateMode === 'day' && plMode === 'b') return quexianDatalist[3]
     }
   }
 }
 </script>
 
 <style scoped>
-::-webkit-scrollbar {
+.visual-container >>> ::-webkit-scrollbar {
   width: calc(8px * var(--beilv));
 }
 
-::-webkit-scrollbar-track {
+.visual-container >>> ::-webkit-scrollbar-track {
   background-color: #14243f;
   border-radius: 0;
 }
 
-::-webkit-scrollbar-button {
+.visual-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  /* width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
+  display: none;
+  width: 0;
+  height: 0;
   background: #5bc4bf9f;
   position: relative;
 }
 
-::-webkit-scrollbar-thumb {
+.visual-container >>> ::-webkit-scrollbar-thumb {
   border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
@@ -342,7 +566,8 @@ export default {
 
 .quality-analysis__body__row-1 {
   height: calc(216px * var(--beilv));
-  overflow: hidden;
+  /* overflow: hidden; */
+  overflow: initial;
   display: flex;
   gap: calc(16px * var(--beilv));
 }
@@ -402,16 +627,28 @@ export default {
   gap: calc(16px * var(--beilv));
 }
 
+.pl-select,
 .date-select {
   position: absolute;
-  top: calc(16px * var(--beilv));
+  top: 0;
-  right: calc(10px * var(--beilv));
+  right: 0;
+  /* top: calc(16px * var(--beilv)); */
+  /* right: calc(22px * var(--beilv)); */
   border-radius: calc(2px * var(--beilv));
   overflow: hidden;
   display: flex;
+  align-items: center;
+  height: 100%;
   cursor: pointer;
 }
 
+.pl-select {
+  right: unset;
+  left: 0;
+  /* left: calc(10px * var(--beilv)); */
+}
+
+.pl-select span,
 .date-select span {
   display: inline-block;
   width: calc(40px * var(--beilv));
@@ -422,7 +659,22 @@ export default {
   background-color: #31878c94;
 }
 
+.pl-select span.pl-select__active,
 .date-select span.date-select__active {
   background-color: #42bbb7;
 }
+
+.width-222 {
+  width: calc(375px * var(--beilv));
+}
+
+.fake-legend {
+  cursor: unset;
+}
+
+.fake-legend span {
+  background: none;
+  cursor: none;
+  color: #dff1fe;
+}
 </style>

src/views/QualityManager/components/TechyAnalysisHeader.vue

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

src/views/QualityManager/components/TechyHeader.vue

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

src/views/QualityManager/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -126,8 +126,9 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  /* width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
+  display: none;
   background: #5bc4bf9f;
   position: relative;
 }
@@ -137,15 +138,10 @@ export default {
   background: #5bc4bf9f;
 }
 
-/* .visual-base-table-container {
-  min-width: 30vw;
-} */
 .visual-base-table-container {
   height: 100%;
 }
-/* .visual-base-table-container >>> .el-table {
+
-  min-width: 120%;
-} */
 /* 清除默认样式 */
 .visual-base-table-container >>> th.gutter {
   display: none;
@@ -178,7 +174,7 @@ export default {
 }
 
 .visual-base-table-container >>> td span {
-  color: #ffffff50;
+  color: #ffffffb3;
   font-size: calc(12px * var(--beilv));
   line-height: calc(14px * var(--beilv));
 }
@@ -200,11 +196,13 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  /* background-color: #0e203e; */
+  background-color: #0e203ecc;
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  /* background-color: #203760; */
+  background-color: #213961cc;
 }
 </style>

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

@@ -1,16 +1,28 @@
 <template>
-  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
+  <div ref="chartContainer" class="chartContainer" />
 </template>
 
 <script>
 import echarts from 'echarts'
-// import 'echarts/theme/macarons'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
-  name: 'PlFaultAnalysisPieChart',
+  name: 'RightContentFaultAnalysis',
   mixins: [resize],
-  props: {},
+  props: {
+    id: {
+      type: String,
+      default: 'default-fault-analysis-id'
+    },
+    dataList: {
+      type: Array,
+      required: true
+    },
+    dataPeriod: {
+      type: String,
+      default: 'month'
+    }
+  },
   data() {
     let totalRate = 0
     const colors = [
@@ -33,10 +45,23 @@ export default {
         y: 0,
         x2: 1,
         y2: 1,
+        colorStops: [
+          { color: '#DDB112', offset: 0 }, // 黄
+          { color: '#DDB112b0', offset: 0.2 },
+          { color: '#FFFFFF00', offset: 1 }
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 1,
+        y: 1,
+        x2: 0,
+        y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
-          { color: '#DDB11200', offset: 0.1 },
+          { color: '#49FBD600', offset: 0.1 },
-          { color: '#DDB112', offset: 1 } // 黄
+          { color: '#74DC85', offset: 1 } // 浅绿
         ],
         global: false
       },
@@ -55,9 +80,9 @@ export default {
       },
       {
         type: 'linear',
-        x: 1,
+        x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
         y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
@@ -69,8 +94,8 @@ export default {
       {
         type: 'linear',
         x: 0,
-        y: 1,
+        y: 0.5,
-        x2: 0,
+        x2: 1,
         y2: 0,
         colorStops: [
           { color: '#FFFFFF00', offset: 0 },
@@ -87,44 +112,42 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '59%',
+          textVerticalAlign: 'middle',
-          top: '30%',
+          left: '65%',
-          text: '33039',
+          top: '46%',
+          text: '',
           textStyle: {
             color: '#fff',
-            fontSize: 22,
+            fontSize: 16,
             fontWeight: 'normal'
           },
-          subtext: '总数',
+          itemGap: 5,
+          subtext: '总数/片',
           subtextStyle: {
             color: '#fff',
-            fontSize: 12,
+            fontSize: 12
-            fontWeight: 'lighter'
           }
         },
         legend: {
-          height: '100%',
+          selectedMode: false,
-          align: 'center',
+          top: '12%',
-          verticalAlign: 'center',
+          bottom: 0,
           left: 0,
           orient: 'vertical',
           icon: 'none',
-          formatter: function(name) {
+          itemGap: 8,
-            // test data - dynamic
+          itemWidth: 10,
-            const testData = [
+          // 在下面动态设置
-              { name: 'A', value: 100 },
+          formatter: name => {
-              { name: 'B', value: 200 },
+            const testData = this.dataList
-              { name: 'C', value: 300 },
+
-              { name: 'D', value: 400 },
-              { name: 'E', value: 500 }
-            ]
             let pieLegendVale = {}
             testData.filter((item, index) => {
               if (item.name === name) {
                 pieLegendVale = item
               }
             })
-            const color = ['c', 'd', 'e', 'f', 'g']
+            const color = ['c', 'd', 'h', 'e', 'f', 'g']
             const arr = [
               '{' + color[testData.findIndex(item => item.name === name)] + '|}',
               '{b|' + pieLegendVale.name + '}',
@@ -135,61 +158,53 @@ export default {
           textStyle: {
             rich: {
               a: {
-                align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255, 0.7)',
-                lineHeight: 16
+                lineHeight: 16,
+                width: 48,
+                align: 'left'
               },
               b: {
-                // verticalAlign: 'top',
+                width: 40,
-                align: 'center',
+                align: 'left',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255)'
               },
               c: {
-                // verticalAlign: 'top',
-                align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#FB418C'
-                // backgroundColor: '#1A99FF'
               },
               d: {
-                // verticalAlign: 'top',
-                align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#DDB112'
-                // backgroundColor: '#A691FF'
+              },
+              h: {
+                width: 10,
+                borderRadius: 5,
+                height: 10,
+                backgroundColor: '#74DC85'
               },
               e: {
-                // verticalAlign: 'top',
-                align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#1A99FF'
-                // backgroundColor: '#FB418C'
               },
               f: {
-                // verticalAlign: 'top',
-                align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#A691FF'
-                // backgroundColor: '#49FBD6'
               },
               g: {
-                // verticalAlign: 'top',
-                align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
                 backgroundColor: '#49FBD6'
-                // backgroundColor: '#DDB112'
               }
             }
           }
@@ -199,22 +214,28 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['60%', '45%'],
+            silent: true,
-            radius: ['50%', '70%'],
+            center: ['66%', '56%'],
+            radius: ['45%', '65%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
-                const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
+                const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
                 return `{${colorMap[params.dataIndex]}|${params.percent} %}`
               },
               rich: {
-                first: { color: '#FB418C', fontSize: 10 },
+                first: { color: '#FB418C', fontSize: 8 },
-                second: { color: '#DDB112', fontSize: 10 },
+                second: { color: '#DDB112', fontSize: 8 },
-                third: { color: '#1A99FF', fontSize: 10 },
+                third: { color: '#1A99FF', fontSize: 8 },
-                fourth: { color: '#A691FF', fontSize: 10 },
+                fourth: { color: '#A691FF', fontSize: 8 },
-                fifth: { color: '#49FBD6', fontSize: 10 }
+                fifth: { color: '#49FBD6', fontSize: 8 },
+                sixth: { color: '#74DC85', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -228,6 +249,11 @@ export default {
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex === 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
                   (() => {})()
@@ -237,40 +263,121 @@ export default {
                 return colorGradient
               }
             },
-            data: [
+            data: this.dataList
-              { value: 100, name: 'A' },
-              { value: 200, name: 'B' },
-              { value: 300, name: 'C' },
-              { value: 400, name: 'D' },
-              { value: 500, name: 'E' }
-            ]
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataList: function(val) {
+      if (val && Array.isArray(val) && val.length) {
+        this.applyChartOption(val)
+      }
+    }
+  },
+
   mounted() {
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', () => {
       if (this.chart) {
         this.chart.resize()
+        this.$nextTick(() => {
+          // 重新绘制文本大小
+          this.applyChartOption()
+        })
       }
     })
 
     this.$nextTick(() => {
       // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
-      if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
+      if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
-
+      this.applyChartOption()
-      this.chart.setOption(this.configs)
-
       this.chart.resize()
     })
   },
-  methods: {}
+
+  methods: {
+    calcFontsize(baseSize) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return beilv * baseSize
+    },
+
+    applyChartOption(datalist) {
+      const fs5 = this.calcFontsize(5 /** px*/)
+      const fs8 = this.calcFontsize(8 /** px*/)
+      // const fs10 = this.calcFontsize(10 /** px*/)
+      const fs12 = this.calcFontsize(12 /** px*/)
+      const fs13 = this.calcFontsize(13 /** px*/)
+      // const fs18 = this.calcFontsize(18 /** px*/)
+      const fs20 = this.calcFontsize(20 /** px*/)
+      const legendTextFixWidth = this.calcFontsize(48 /** px*/)
+      const legnedTop = this.calcFontsize(72 /** px*/)
+      // const legendTopRate = this.calcFontsize(30 /** % */)
+
+      this.configs.title.text =
+        this.dataPeriod === 'month'
+          ? this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0) // 如果是月数据，单位为 千片
+          : this.dataList.reduce((prev, curr) => prev + curr.value, 0) // 如果是日数据，单位为 片
+      this.configs.title.textStyle.fontSize = fs20
+      this.configs.title.subtextStyle.fontSize = fs13
+
+      // this.configs.legend.top = legendTopRate + '%'
+      this.configs.legend.top = legnedTop
+      this.configs.legend.left = 3 + '%'
+      this.configs.legend.itemGap = fs8
+      this.configs.legend.itemWidth = fs8
+
+      this.configs.legend.textStyle.rich.a.fontSize = fs12
+      this.configs.legend.textStyle.rich.a.lineHeight = fs12
+      this.configs.legend.textStyle.rich.a.width = legendTextFixWidth
+      this.configs.legend.textStyle.rich.b.fontSize = fs12
+      this.configs.legend.textStyle.rich.b.width = legendTextFixWidth
+      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
+      this.configs.legend.textStyle.rich.c.width = fs8
+      this.configs.legend.textStyle.rich.c.height = fs8
+      this.configs.legend.textStyle.rich.c.borderRadius = fs5
+      this.configs.legend.textStyle.rich.d.width = fs8
+      this.configs.legend.textStyle.rich.d.height = fs8
+      this.configs.legend.textStyle.rich.d.borderRadius = fs5
+      this.configs.legend.textStyle.rich.e.width = fs8
+      this.configs.legend.textStyle.rich.e.height = fs8
+      this.configs.legend.textStyle.rich.e.borderRadius = fs5
+      this.configs.legend.textStyle.rich.f.width = fs8
+      this.configs.legend.textStyle.rich.f.height = fs8
+      this.configs.legend.textStyle.rich.f.borderRadius = fs5
+      this.configs.legend.textStyle.rich.g.width = fs8
+      this.configs.legend.textStyle.rich.g.height = fs8
+      this.configs.legend.textStyle.rich.g.borderRadius = fs5
+      this.configs.legend.textStyle.rich.h.width = fs8
+      this.configs.legend.textStyle.rich.h.height = fs8
+      this.configs.legend.textStyle.rich.h.borderRadius = fs5
+
+      this.configs.series[0].label.rich.first.fontSize = 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.configs.series[0].label.rich.sixth.fontSize = fs12
+      if (datalist) this.configs.series[0].data = datalist
+      this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
 <style scoped>
-.chartContainer >>> div {
+.chartContainer {
+  /* height: calc(100% - (36px * var(--beilv))); */
+  /* position: relative; */
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  width: 100%;
+  height: 100%;
+}
+
+.chartContainer > div {
   width: 100% !important;
 }
 </style>

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

@@ -0,0 +1,323 @@
+<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: 72,
+          bottom: 28
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(255,255,255,0.1)'
+            }
+          },
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 128px !important; height: auto !important;',
+          formatter: params => {
+            const [, a, , , b] = params
+            return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
+                      <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                        a.name
+                      }</h2>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
+                          a.color.colorStops[0].color
+                        }, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
+                      </div>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
+                          b.color.colorStops[0].color
+                        }, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
+                      </div>
+                    </div>`
+          }
+        },
+        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: 12,
+            verticalAlign: 'top',
+            align: 'right'
+          },
+          nameGap: 20,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 12,
+            /** 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,302 +0,0 @@
-<template>
-  <div
-    ref="chartContainer"
-    class="chartContainer"
-    :class="bindClass"
-    style="position: relative; width: 100%; height: calc(100% - 36px)"
-  />
-</template>
-
-<script>
-import echarts from 'echarts' // echarts theme
-import resize from '@/views/OperationalOverview/components/mixins/resize'
-
-export default {
-  name: 'OverviewBar',
-  mixins: [resize],
-  props: {
-    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'
-      }
-    }
-  },
-  mounted() {
-    if (this.dataList.length > 1) {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
-      this.series = [
-        {
-          // 柱体
-          name: this.dataList[0].name,
-          type: 'bar',
-          barWidth,
-          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,
-          symbol: 'diamond',
-          symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [30, 12],
-          zlevel: 2,
-          itemStyle: { color: this.dataList[0].topColor },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth,
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [30, 15],
-          itemStyle: { color: this.dataList[0].bottomColor },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱体
-          name: this.dataList[1].name,
-          type: 'bar',
-          barWidth,
-          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,
-          symbol: 'diamond',
-          symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [30, 12],
-          zlevel: 2,
-          itemStyle: { color: this.dataList[1].topColor },
-          data: this.dataList[1].data
-        },
-        {
-          // 柱底
-          name: this.dataList[1].name,
-          type: 'pictorialBar',
-          barWidth,
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [30, 15],
-          itemStyle: { color: this.dataList[1].topColor },
-          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: 26,
-          barWidth: barWidth,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[0].topColor },
-              { offset: 1, color: this.dataList[0].bottomColor }
-            ])
-            // borderWidth: 1,
-            // borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
-          },
-          data: this.dataList[0].data
-          // backgroundStyle: {
-          //   // borderColor: this.dataList[0].bottomColor,
-          //   borderColor: '#ff0000',
-          //   borderWidth: 1
-          // }
-        },
-        {
-          // 柱顶
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          // barWidth: 26,
-          barWidth: barWidth,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          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)' : '#31a2ff',
-            show: true,
-            offset: [0, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          // barWidth: 26,
-          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: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              fontSize: this.xlabelFontSize,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            },
-            margin: 20,
-            rotate: this.xlabelRotate
-          },
-          data: this.nameList
-        },
-        yAxis: {
-          axisLine: {
-            lineStyle: {
-              type: 'solid',
-              color: this.dataList[0].bottomColor,
-              // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-              width: '1' // 坐标线的宽度
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            }
-          },
-          splitLine: {
-            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(30px * var(--beilv));
-  left: 9%;
-  height: calc(32px * var(--beilv));
-  width: 90%;
-  background: linear-gradient(to top, #31a2ff6d, transparent);
-  transform: skew(-35deg);
-  z-index: 0;
-}
-.process-fault-chart >>> div::before {
-  /* .process-fault-chart::before { */
-  content: '';
-  position: absolute;
-  bottom: 12%;
-  left: 8%;
-  height: calc(32px * var(--beilv));
-  /* bottom: calc(20px * var(--beilv));
-  left: calc(36px * var(--beilv));
-  height: calc(32px * var(--beilv)); */
-  width: 90%;
-  background: linear-gradient(to top, #49fbd789, transparent);
-  transform: skew(-35deg);
-  z-index: 0;
-}
-</style>

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

@@ -1,269 +1,375 @@
 <template>
-  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
+  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
 </template>
 
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+class ChartOption {
+  constructor() {
+    this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
+
+    this.legend = {
+      top: 14,
+      right: 22,
+      itemWidth: 6,
+      itemHeight: 8,
+      textStyle: {
+        color: '#DFF1FECC',
+        fontSize: 12
+      }
+    }
+
+    this.grid = {
+      top: 72,
+      left: 12,
+      right: 28,
+      bottom: 20,
+      containLabel: true
+    }
+
+    this.tooltip = {
+      trigger: 'axis',
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      extraCssText: 'width: 180px !important; ',
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          type: 'dotted',
+          color: '#7BFFFB'
+        }
+      },
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+      }
+    }
+
+    let today = new Date()
+    this.xAxis = {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        textStyle: {
+          fontSize: 12,
+          color: '#fff8' //
+        },
+        margin: 12
+      },
+      data:
+        this.mode === 'month'
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
+          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    }
+
+    this.yAxis = [
+      {
+        name: '成品率            ',
+        type: 'value',
+        min: '80',
+        splitNumber: 4,
+        nameGap: 16,
+        nameTextStyle: {
+          color: 'rgba(255,255,255,0.7)',
+          fontSize: 12,
+          align: 'left',
+          verticalAlign: 'bottom'
+        },
+        axisLine: {
+          lineStyle: {
+            type: 'solid',
+            color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+            width: '1' // 坐标线的宽度
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          formatter: '{value} %',
+          textStyle: {
+            fontSize: 12,
+            color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: 'rgba(119, 255, 242, 0.2)'
+          }
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: 'A1下片机',
+        type: 'line',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        // smooth: true,
+        areaStyle: {
+          // color: 'rgba(50,145,152,0.5)'
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#DDB11266' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          focus: 'series',
+          scale: 1.2
+        },
+        data:
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+      },
+      {
+        name: '磨边机',
+        type: 'line',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        // smooth: true,
+        areaStyle: {
+          // color: 'rgba(50,145,152,0.5)'
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#1A99FFCC' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data:
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+      }
+    ]
+  }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
 
 export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
-  props: {},
+  props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => ['month', 'day'].indexOf(val) !== -1
+    },
+    dataUpdateToken: {
+      type: String,
+      default: 'default-token'
+    }
+  },
   data() {
     return {
       chart: null,
-      configs: {
+      configs: null
-        color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
-        },
-        // legend: {
-        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-        // },
-        grid: {
-          top: '15%',
-          left: '2%',
-          right: '2%',
-          bottom: '2%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLine: {
-              lineStyle: {
-                color: '#ffffff66'
-              }
-            },
-            axisTick: { show: false },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,1)' //
-              },
-              margin: 20
-            },
-            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
-          }
-        ],
-        yAxis: [
-          {
-            name: '成品率',
-            type: 'value',
-            nameTextStyle: {
-              color: 'rgba(255,255,255,0.7)',
-              fontSize: 10,
-              align: 'right'
-            },
-            axisLine: {
-              lineStyle: {
-                type: 'solid',
-                color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-                width: '1' // 坐标线的宽度
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'dotted',
-                color: 'rgba(119, 255, 242, 0.2)'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'A1下片机',
-            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: '#FB418C66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [11, 199, 140, 63, 185, 5, 78]
-          },
-          {
-            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: '#DDB11266' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [151, 57, 31, 7, 77, 88, 119]
-          },
-          {
-            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]
-          },
-          {
-            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]
-          },
-          {
-            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]
-          }
-        ]
-      }
     }
   },
+
+  watch: {
+    dataUpdateToken(val) {
+      this.refreshData()
+    }
+  },
+
   mounted() {
-    window.addEventListener('resize', function() {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    })
-
     this.$nextTick(() => {
-      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
       if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
-
+      this.setChartOption()
-      this.chart.setOption(this.configs)
-      this.chart.resize()
     })
   },
-  methods: {}
+  methods: {
+    refreshData() {
+      // update xaxis
+      let today = new Date()
+      this.configs.xAxis.data =
+        this.mode === 'month'
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
+          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+      // update tooltip
+      if (this.mode === 'month') {
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: params => {
+            const currentMonth = new Date().getMonth() + 1
+            return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
+              params[0].axisValue
+            }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
+        }
+      } else if (this.mode === 'day') {
+        this.configs.tooltip = null
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: params => {
+            return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
+        }
+      }
+
+      // update series
+      this.configs.series.forEach(item => {
+        item.data =
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
+      })
+
+      if (this.chart) this.chart.setOption(this.configs)
+    },
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
+      this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
@@ -271,4 +377,8 @@ export default {
 .chartContainer >>> div {
   width: 100% !important;
 }
+
+.diy-linestack-tooltip {
+  color: red;
+}
 </style>

src/views/QualityManager/components/productionRateHeader.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="techy-analysis-header">
+    <div class="special-wrapper">
+      <div class="special-wrapper__left"></div>
+      <div class="special-wrapper__middle">
+        <div class="special-wrapper__middle--inner">
+          <div style="transform: translateX(4%)">
+            <span class="top-icon">
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 56 13"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <title>left</title>
+                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
+                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                          <g
+                            id="编组-2备份"
+                            transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
+                          >
+                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                            <polygon
+                              id="路径-11备份"
+                              opacity="0.8"
+                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-3"
+                              opacity="0.4"
+                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-2"
+                              opacity="0.601434"
+                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-4"
+                              opacity="0.201434"
+                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                            ></polygon>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+            <span class="techy-analysis-header__title">
+              <slot />
+            </span>
+            <span class="top-icon">
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 56 13"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <title>right</title>
+                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
+                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                          <g
+                            id="编组-2备份-2"
+                            transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
+                          >
+                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                            <polygon
+                              id="路径-11备份"
+                              opacity="0.8"
+                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-3"
+                              opacity="0.4"
+                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-2"
+                              opacity="0.601434"
+                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-4"
+                              opacity="0.201434"
+                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                            ></polygon>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="special-wrapper__right">
+        <div class="special-wrapper__right--inner">
+          <span
+            :class="{ 'date-select__active': dateMode === 'day' }"
+            @click="
+              dateMode = 'day'
+              $emit('update-data', { str: '' + Math.random(), mode: dateMode })
+            "
+          >
+            日
+          </span>
+          <span
+            :class="{ 'date-select__active': dateMode === 'month' }"
+            @click="
+              dateMode = 'month'
+              $emit('update-data', { str: '' + Math.random(), mode: dateMode })
+            "
+          >
+            月
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TechyAnalysisHeader',
+  props: {
+    type: {
+      type: String,
+      default: 'dafault-type'
+    },
+    showTopIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dateMode: 'day'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-analysis-header {
+  text-align: center;
+  margin-bottom: calc(16px * var(--beilv));
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.techy-analysis-header__title {
+  color: #01cfcc;
+  font-size: calc(15px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
+}
+
+.top-icon {
+  display: inline-block;
+  width: calc(56px * var(--beilv));
+  height: calc(12px * var(--beilv));
+  margin-bottom: calc(2px * var(--beilv));
+}
+
+.special-wrapper {
+  position: absolute;
+  top: calc(12px * var(--beilv));
+  left: 0;
+  transform: skewX(35deg);
+  background: #fff0;
+  width: 100%;
+  height: calc(22px * var(--beilv));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.special-wrapper__left {
+  flex: 1;
+  min-width: calc(56px * var(--beilv));
+}
+
+.special-wrapper__middle {
+  overflow: hidden;
+}
+
+.special-wrapper__middle--inner {
+  transform: skewX(-35deg);
+  white-space: nowrap;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.special-wrapper__right {
+  width: calc(100px * var(--beilv));
+  padding-left: calc(8px * var(--beilv));
+  padding-right: calc(8px * var(--beilv));
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.special-wrapper__right--inner {
+  transform: skewX(-35deg);
+  border-radius: calc(2px * var(--beilv));
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+}
+
+.special-wrapper__right--inner > span {
+  display: inline-block;
+  width: calc(40px * var(--beilv));
+  text-align: center;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
+  color: white;
+  background-color: #31878c94;
+}
+
+.special-wrapper__right--inner span.pl-select__active,
+.special-wrapper__right--inner span.date-select__active {
+  background-color: #42bbb7;
+}
+</style>

src/views/QualityManager/mockData.js

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

src/views/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,46 +157,59 @@ export default {
     }
   },
   created() {
+    this.showList = false
+
     this.init()
 
     this.fetchList('eq-tree').then(res => {
       if (res.data) {
         const eqTree = res.data[0] // 只会返回一条工厂数据
         this.factoryName = eqTree.name
-        // 构造tree展示的结构
+        this.treeData = this.preHandleList(eqTree)
-        eqTree.pdlList.forEach(item => {
+        this.showList = true
-          const treeItem = {}
-          treeItem.label = item.name
-          if (item.wsList.length) {
-            treeItem.children = []
-            item.wsList.forEach(workSection => {
-              const wsItem = {}
-              wsItem.label = workSection.name
-              if (workSection.eqList.length) {
-                wsItem.children = []
-                workSection.eqList.forEach(eq => {
-                  const eqItem = {}
-                  eqItem.label = eq.eqName
-                  eqItem.id = eq.eqId
-                  wsItem.children.push(eqItem)
-                })
-              }
-              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 }))
       }
     })
   },
+
   methods: {
+    preHandleList(list) {
+      let result = []
+
+      list.pdlList.forEach(item => {
+        const treeItem = {}
+        treeItem.name = item.name
+        // 整理产线
+        if (item.wsList.length) {
+          treeItem.children = []
+          item.wsList.forEach(workSection => {
+            const wsItem = {}
+            wsItem.name = workSection.name
+            // 整理设备
+            if (workSection.eqList.length) {
+              wsItem.children = []
+              workSection.eqList.forEach(eq => {
+                const eqItem = {}
+                eqItem.name = eq.eqName
+                eqItem.id = eq.eqId
+                wsItem.children.push(eqItem)
+              })
+            }
+            treeItem.children.push(wsItem)
+          })
+        }
+
+        // 产线
+        result.push(treeItem)
+      })
+
+      return result
+    },
     init() {
       this.productLineList.splice(0)
       this.headFormConfig[0].selectOptions.splice(0)
@@ -281,6 +334,10 @@ export default {
       if (data.id) {
         this.selectedEquipmentId = data.id
       }
+    },
+    handleSelect(index, indexPath) {
+      const [id, name] = index.split('$--$')
+      this.selectedEquipmentId = id
     }
   }
 }
@@ -295,14 +352,13 @@ export default {
 .custom-container__common {
   background-color: #fff;
   padding: 0;
-  border-radius: 4px;
+  border-radius: 8px;
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
 }
 
 .left-side-container {
   height: calc(100vh - 147px);
   padding: 0;
-  background: #fafafa;
+  // background: #fafafa;
   display: flex;
   flex-direction: column;
 
@@ -320,7 +376,7 @@ export default {
 
   .left-side-container__content {
     flex: 1 1;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 
@@ -356,4 +412,25 @@ export default {
 .custom-tree >>> .is-current .el-tree-node__content {
   background: #fafafa;
 }
+
+.title-area {
+  height: 72px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 24px;
+}
+
+.routes-area {
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.title-icon {
+  height: 24px;
+  width: 24px;
+}
 </style>

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

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

src/views/RoleManager/index.vue

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

src/views/UserPage/=.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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="#373738"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/UserPage/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

@@ -0,0 +1,149 @@
+<template>
+  <div class="test-tree">
+    <section class="title-area">
+      <span class="title-icon">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 24 24"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>工厂</title>
+          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
+              <g id="工厂" transform="translate(376.000000, 152.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
+                <path
+                  id="形状"
+                  d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
+                  fill="#0B58FF"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>
+      </span>
+      <span class="title-content">合肥新能源工厂</span>
+    </section>
+    <section class="routes-area" v-if="showList">
+      <el-menu @select="handleSelect">
+        <!-- 此处假设了只有一个根节点 -->
+        <template v-for="(menuItem, index) in menuListTrue[0].children" >
+          <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
+        </template>
+      </el-menu>
+    </section>
+  </div>
+</template>
+
+<script>
+import TestMenuItem from './TestMenuItem.vue'
+export default {
+  name: 'TestTree',
+  props: {
+    menuList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: { TestMenuItem },
+  data() {
+    return {
+      menuListTrue: [],
+      showList: false
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.reconstructMenuList()
+    })
+  },
+
+  methods: {
+    reconstructMenuList() {
+      this.showList = false
+      this.menuListTrue.splice(0)
+      if (this.menuList) {
+        this.menuList.forEach(item => {
+          if (item.parentId === '-1') {
+            this.menuListTrue.push(item)
+          } else {
+            this.constructMenuList(item)
+          }
+        })
+      }
+
+      this.showList = true
+    },
+    constructMenuList(child) {
+      this.menuList.forEach(item => {
+        if (child.parentId === item.id) {
+          if (!('children' in item)) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    },
+    handleSelect(index, indexPath) {
+      const [id, name] = index.split('$--$')
+      this.$emit('getOrganization', { id, name })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.test-tree {
+  height: 100%;
+  padding: 24px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title-area {
+  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;
+}
+
+.title-content {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.routes-area >>> .el-submenu__title,
+.routes-area >>> .el-menu-item {
+  font-size: 14px;
+  line-height: 40px;
+  height: 40px;
+  letter-spacing: 0.88px;
+}
+/* 
+.routes-area >>> .el-submenu__title span,
+.routes-area >>> .el-menu-item span {
+}
+*/
+
+#app .hideSidebar .routes-area >>>  .el-submenu>.el-submenu__title {
+  padding: 0 20px !important;
+}
+</style>

src/views/UserPage/o.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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="#373738" 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>

src/views/UserPage/usermanage.vue

@@ -9,31 +9,33 @@
   <div class="app-container system-manage-landpage">
     <el-container>
       <el-aside>
-        <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
+        <TestTree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
+        <!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
       </el-aside>
       <el-main>
-        <el-form
+        <el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left">
-          ref="dataForm"
+          <el-row>
-          :model="dataForm"
+            <el-col style="margin: 0 0 28px;">
-          :inline="true"
+              <!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> -->
-          size="medium"
+              <el-form-item class="has-icon">
-          label-width="100px"
+                <span v-if="dataForm.orgName">{{ dataForm.orgName }}</span>
-          label-position="left"
+                <span v-else>用户管理</span>
-        >
+              </el-form-item>
-          <el-form-item label-width="60px" :label="$t('userManage.orgName') + '：'">
+            </el-col>
-            <span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
+            <el-col>
-          </el-form-item>
+              <el-form-item :label="$t('userManage.userName')" prop="name">
-          <el-form-item :label="$t('userManage.userName') + '：'" prop="name">
+                <el-input
-            <el-input
+                  v-model="dataForm.name"
-              v-model="dataForm.name"
+                  :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
-              :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
+                  clearable
-              clearable
+                  :style="{ width: '100%' }"
-              :style="{ width: '100%' }"
+                />
-            />
+              </el-form-item>
-          </el-form-item>
+              <el-form-item>
-          <el-form-item>
+                <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
-            <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+              </el-form-item>
-          </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
         <base-table
           :top-btn-config="topBtnConfig"
@@ -69,6 +71,7 @@
 </template>
 
 <script>
+import TestTree from './TestTree.vue'
 import sideTree from '../system-manage/sideTree'
 import { getOrgList } from '@/api/org'
 import AddUserForm from './AddUserForm'
@@ -112,59 +115,52 @@ const tableBtn = [
 const tableProps = [
   {
     prop: 'name',
-    label: i18n.t('userManage.userName'),
+    label: i18n.t('userManage.userName')
-    align: 'center'
   },
   {
     prop: 'email',
-    label: i18n.t('userManage.email'),
+    label: i18n.t('userManage.email')
-    align: 'center'
   },
   {
     prop: 'mobile',
-    label: i18n.t('userManage.mobile'),
+    label: i18n.t('userManage.mobile')
-    align: 'center'
   },
   // {
   //   prop: 'birthday',
   //   label: i18n.t('userManage.birthday'),
-  //   align: 'center'
+  //
   // },
   {
     prop: 'orgName',
-    label: i18n.t('userManage.orgName'),
+    label: i18n.t('userManage.orgName')
-    align: 'center'
   },
   {
     prop: 'roleName',
-    label: i18n.t('roleManage.roleName'),
+    label: i18n.t('roleManage.roleName')
-    align: 'center'
   },
   // {
   //   prop: 'sex',
   //   label: i18n.t('userManage.sex'),
-  //   align: 'center',
+  //
   //   filter: dataDict('sex')
   // },
   {
     prop: 'code',
-    label: i18n.t('userManage.code'),
+    label: i18n.t('userManage.code')
-    align: 'center'
   },
   {
     prop: 'enabled',
     label: i18n.t('userManage.status'),
-    align: 'center',
+
     filter: dataDict('enableState')
   },
   {
     prop: 'remark',
-    label: i18n.t('userManage.remark'),
+    label: i18n.t('userManage.remark')
-    align: 'center'
   }
 ]
 export default {
-  components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
+  components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
   data() {
     return {
       topBtnConfig,
@@ -230,6 +226,7 @@ export default {
       const res1 = await getOrgList(params)
       if (res1.code === 0) {
         this.menuList = res1.data.records
+        console.log('menulist===>', this.menuList)
       }
     },
     getOrganization(data) {
@@ -301,11 +298,13 @@ export default {
   border-radius: 8px;
   background-color: #fff;
   width: 256px !important;
-  padding-top: 20px;
   margin: 0;
   padding-left: 0;
   padding-right: 0;
 }
+aside {
+  padding: 0;
+}
 .el-container >>> .el-main {
   border-radius: 8px;
   background-color: #fff;
@@ -356,4 +355,49 @@ export default {
   letter-spacing: 0.88px;
   color: #161616;
 }
+
+.has-icon {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.has-icon::before {
+  content: '';
+  width: 4px;
+  border-radius: 2px;
+  height: 55%;
+  position: absolute;
+  /* top: 13%; */
+  left: 0;
+  background: #0b58ff;
+}
+
+:not(.has-icon) >>> .el-form-item__label {
+  font-size: 14px;
+}
+
+.has-icon >>> .el-form-item__label {
+  position: relative;
+  left: 12px;
+  font-size: 16px;
+}
+.has-icon >>> .el-form-item__content {
+  font-size: 16px;
+  margin-left: 12px;
+}
+
+.el-button--mini {
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+/* .has-icon >>> .el-form-item__content {
+  position: absolute;
+  left: 24px;
+} */
+
+.el-form-item {
+  margin: 0;
+}
 </style>

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

@@ -7,7 +7,7 @@
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
 <template>
-  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+  <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
     <div class="line" />
     <div class="line line-vertical" />
     <div class="line line-right" />
@@ -75,6 +75,7 @@ export default {
 .base-container {
   color: #fff;
   width: 100%;
+  height: 100%;
   background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
   border: 2px solid;
@@ -138,8 +139,11 @@ export default {
     font-size: 1.5em;
     padding: .67em;
   }
-  // .bar-content{
+  .bar-item {
-  //   padding: 1em;
+    height: 100%;
-  // }
+  }
+  .bar-content{
+    height: calc(100% - 4em);
+  }
 }
 </style>

src/views/material-manage/cockpit/components/baseTable.vue

@@ -7,26 +7,29 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-    >
-      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
       <el-table-column
-        v-for="item in renderTableHeadList"
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70 * beilv"
+        align="center"
+      />
+      <el-table-column
+        v-for="(item, index) in renderTableHeadList"
         :key="item.prop"
         :show-overflow-tooltip="showOverflow"
         v-bind="item"
       >
         <template slot-scope="scope">
-
+          <component
-          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :key="index"
+            :inject-data="{ ...scope.row, ...item }"
+            @emitData="emitData"
+          />
           <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
-
         </template>
       </el-table-column>
       <slot name="content" />
@@ -36,7 +39,7 @@
 <script>
 import { isObject, isString } from 'lodash'
 export default {
-  name: 'BaseTable',
+  name: 'TechyTable',
   filters: {
     commonFilter: (source, filterType = a => a) => {
       return filterType(source)
@@ -107,70 +110,103 @@ export default {
   methods: {
     emitData(val) {
       this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(14, 32, 62, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      } else {
-        return {
-          background: 'rgba(32, 55, 96, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      }
-    },
-    setCellStyle(v) {
-      return {
-        lineHeight: 23 * this.beilv + 'px'
-      }
     }
   }
 }
 </script>
-<style lang="scss">
+
-@import "~@/styles/index.scss";
+<style scoped>
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .visual-base-table-container {
-  .el-table {
+  height: 100%;
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
-
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-  }
 }
-.setting {
+/* .visual-base-table-container >>> .el-table {
-  text-align: right;
+  min-width: 120%;
-  padding: 15px;
+} */
-  .setting-box {
+/* 清除默认样式 */
-    width: 100px;
+.visual-base-table-container >>> th.gutter {
-  }
+  display: none;
-  i {
+}
-    color: #aaa;
+.visual-base-table-container >>> table {
-    @extend .pointer;
+  background: transparent;
-  }
 }
 
+.visual-base-table-container >>> .el-table,
+.visual-base-table-container >>> th,
+.visual-base-table-container >>> tr {
+  background: unset;
+}
+
+/* 设置设计稿样式 */
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
+}
+
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
+}
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
+}
+
+.visual-base-table-container >>> td span {
+  color: #ffffffb3;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
+  padding: 0;
+}
+
+.visual-base-table-container >>> thead th .cell {
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #203760;
+  /* background-color: #20376090; */
+}
 </style>

src/views/material-manage/cockpit/components/bomList.vue

@@ -1,11 +1,9 @@
 <template>
-  <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px '+ 24 * beilv + 'px' }" class="box">
+  <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px 0'}" class="box">
     <div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}">
-      <img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'">
+      <img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
-      <p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}">
+      <p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
-        <span class="leftTriangle" />
         <span>{{ item.name }}</span>
-        <span class="rightTriangle" />
       </p>
     </div>
   </div>
@@ -28,29 +26,19 @@ export default {
 <style lang="scss" scoped>
 .box {
   display: flex;
+  flex: 1;
+  height: 100%;
+  width: 100%;
   flex-flow: row wrap;
   justify-content: space-between;
   .bom-box {
     position: relative;
+    width: 48%;
     .bom-name {
       position: absolute;
       width: 100%;
       text-align: center;
-      .leftTriangle,
+      bottom: 6%;
-      .rightTriangle {
-        display: inline-block;
-        width: 0px;
-        height: 0px;
-        border: 5px solid transparent;
-      }
-      .leftTriangle {
-        border-right-color: #fff;
-        margin-right: 10px;
-      }
-      .rightTriangle {
-        border-left-color: #fff;
-        margin-left: 10px;
-      }
     }
   }
 }

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

@@ -29,32 +29,15 @@
           <bom-list :beilv="beilv" :bom-msg="bomMsg" />
         </base-container>
       </el-col>
-      <el-col :span="14">
+      <el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
         <!-- 右上 -->
-        <el-row>
+        <div class="right-box">
-          <el-col :style="{ marginTop: 16 * beilv + 'px' }">
+          <div class="right-top">
-            <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
-              <div class="box-padding specil-table1">
-                <base-table
-                  :page="1"
-                  :limit="14"
-                  :show-index="false"
-                  :beilv="beilv"
-                  :table-config="originalFilm"
-                  :table-data="originalFilmList"
-                />
-              </div>
-            </base-container>
-          </el-col>
-        </el-row>
-        <!-- 右下 -->
-        <el-row>
-          <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
             <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
               <div class="box-padding specil-table1">
                 <base-table
                   :page="1"
-                  :limit="14"
+                  :limit="15"
                   :show-index="false"
                   :beilv="beilv"
                   :table-config="material"
@@ -62,8 +45,22 @@
                 />
               </div>
             </base-container>
-          </el-col>
+          </div>
-        </el-row>
+          <div class="right-bottom">
+            <base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
+              <div class="box-padding specil-table1">
+                <base-table
+                  :page="1"
+                  :limit="15"
+                  :show-index="false"
+                  :beilv="beilv"
+                  :table-config="originalFilm"
+                  :table-data="originalFilmList"
+                />
+              </div>
+            </base-container>
+          </div>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -114,7 +111,7 @@ const material = [
   },
   {
     prop: 'spec',
-    label: '辅料规格',
+    label: '辅料名称',
     minWidth: 32.4
   },
   {
@@ -178,37 +175,54 @@ export default {
     getMsg() {
       const arr = []
       const temp = []
+      const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
+      let cnum = 1
       for (let i = 0; i < 20; i++) {
         const obj = {}
-        const sj = parseInt(Math.random() * 200)
+        const sj = parseInt(Math.random() * 3 + 1)
-        obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
+        cnum += sj
-        obj.productLine = '产线A'
+        obj.time = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYY-MM-DD HH:mm:ss')
-        obj.spec = '光伏玻璃2.0'
+        obj.productLine = sj % 2 ? 'A' : 'B'
-        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.spec = productList[parseInt(Math.random() * (productList.length))]
-        obj.num = parseInt(Math.random() * 800 + 100)
+        obj.batch = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYYMMDDHH')
+        obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
         arr.push(obj)
       }
+      arr.sort(function (a, b) {
+        return new Date(a.time) - new Date(b.time)
+      })
       this.originalFilmList = arr
-      const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206']
+      const eqList = [
-      const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100']
+        {name: '磨边机', fc: ''},
+        {name: '丝印机', fc: ['油墨', '刮胶']},
+        {name: '镀膜机', fc: ['镀膜液', '异丙醇']},
+        {name: '包装机', fc: ['隔离纸', '包装辅材']}
+      ]
+      let cnum2 = 1
       for (let i = 0; i < 20; i++) {
         const obj = {}
-        const sj = parseInt(Math.random() * 200)
+        const sj = parseInt(Math.random() * 3 + 1)
-        obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
+        const sj2 = parseInt(Math.random() * eqList.length)
-        obj.eqName = eqList[parseInt(Math.random() * eqList.length)]
+        const sj3 = sj % 2 ? 1 : 0
-        obj.spec = spcList[parseInt(Math.random() * spcList.length)]
+        cnum2 += sj
-        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.time = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYY-MM-DD HH:mm:ss')
+        obj.eqName = eqList[sj2].name
+        obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
+        obj.batch = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYYMMDD')
         obj.num = parseInt(Math.random() * 800 + 100)
         temp.push(obj)
       }
+      temp.sort(function (a, b) {
+        return new Date(a.time) - new Date(b.time)
+      })
       this.materialList = temp
       this.bomMsg = [
-        { name: '隔离纸' },
+        { name: '2.0-1128*1716' },
-        { name: '异丙醇' },
+        { name: '2.0-1128*2251' },
-        { name: '镀膜液' },
+        { name: '2.0-1128*2272' },
-        { name: '磨轮' },
+        { name: '3.2-1128*1716' },
-        { name: '包装辅材' },
+        { name: '3.2-1128*1718' },
-        { name: '网板' }
+        { name: '3.2-1032*1747' }
       ]
     },
     change() {
@@ -256,12 +270,32 @@ export default {
     }
   }
   .box-padding {
-    padding: 0 16px;
+    padding: 0 16px 16px;
+    height: 100%;
+    opacity: 0.8;
   }
 }
 </style>
 <style lang="scss">
 .material-cockpit {
+  .container-main {
+    height: calc(100vh - 100px * var(--beilv));
+    display: flex;
+    flex: 1;
+  }
+  .right-box {
+    height: 100%;
+    display: flex;
+    // flex: 1;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+  }
+  .right-top {
+    height: 49.4%;
+  }
+  .right-bottom {
+    height: 49.4%;
+  }
   .specil-table1 {
     .el-table .cell {
       padding-left: 40px;

src/views/orderManage/orderManagerCockpit/cockpit.vue

@@ -24,7 +24,7 @@
     </el-row>
     <el-row class="container-main">
       <!-- 上 -->
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
         <el-col :span="10">
           <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
             <work-order :beilv="beilv" :order-msg="orderList" />
@@ -46,13 +46,13 @@
         </el-col>
       </el-row>
       <!-- 下 -->
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
         <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
           <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
             <div class="box-padding specil-table2">
               <base-table
                 :page="1"
-                :limit="16"
+                :limit="17"
                 :show-index="false"
                 :beilv="beilv"
                 :table-config="orderMonitiring"
@@ -72,21 +72,22 @@ import screenfull from 'screenfull'
 import BaseTable from './components/baseTable.vue'
 import moment from 'moment'
 import orderStatus from './components/orderStatus.vue'
+import { rateFormatter2 } from '@/filters/index'
 const orderPool = [
   {
     prop: 'customerName',
     label: '客户名称',
-    minWidth: 35.2
+    minWidth: 38
   },
   {
     prop: 'orderCode',
     label: '订单编号',
-    minWidth: 32
+    minWidth: 36
   },
   {
     prop: 'productName',
     label: '产品名称',
-    minWidth: 32
+    minWidth: 30
   },
   {
     prop: 'planNum',
@@ -96,35 +97,36 @@ const orderPool = [
   {
     prop: 'planDelivery',
     label: '计划交货期',
-    minWidth: 28.8
+    minWidth: 25
   },
   {
     prop: 'status',
     label: '订单状态',
     subcomponent: orderStatus,
-    minWidth: 19
+    minWidth: 21
   }
 ]
 const orderMonitiring = [
   {
     prop: 'customerName',
     label: '客户名称',
-    minWidth: 35.2
+    minWidth: 40
   },
   {
     prop: 'orderCode',
     label: '订单编号',
-    minWidth: 33.2
+    minWidth: 38
   },
   {
     prop: 'status',
     label: '订单状态',
     subcomponent: orderStatus,
-    minWidth: 27
+    minWidth: 28
   },
   {
     prop: 'completion',
     label: '完成率',
+    filter: rateFormatter2,
     minWidth: 24.8
   },
   {
@@ -206,42 +208,60 @@ export default {
   },
   methods: {
     getMsg() {
-      this.orderList = [
+      const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
-        { code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' },
+      const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
-        { code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' },
+      const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
-        { code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' },
+      const arr1 = []
-        { code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' }
+      const arr2 = []
-      ]
-      const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
-      const arr = []
       const temp = []
-      for (let i = 0; i < 20; i++) {
+      for(let i = 0; i < 4; i++) {
-        const obj = {}
         const sj = parseInt(Math.random() * 200)
-        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
+        const obj = {}
-        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
-        obj.productName = '光伏玻璃2.0'
+        obj.state = '激活'
-        obj.planNum = parseInt(Math.random() * 800 + 100)
+        obj.name = daping[i].name
-        obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
+        obj.line = sj % 2 ? 'A' : 'B'
-        obj.status = parseInt(Math.random() * 3 + 1)
+        obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
-        arr.push(obj)
+        obj.percentage = daping[i].percentage
+        arr1.push(obj)
       }
-      this.orderPoolList = arr
+      this.orderList = arr1
+      const timeArr = ["2022-10-01", "2022-10-03", "2022-10-04", "2022-10-07","2022-10-11", "2022-10-12", "2022-10-15", "2022-10-18", "2022-10-19", "2022-10-21", "2022-10-23", "2022-10-26", "2022-10-27"]
       for (let i = 0; i < 20; i++) {
         const obj = {}
         const sj = parseInt(Math.random() * 200)
         obj.customerName = compList[parseInt(Math.random() * (compList.length))]
-        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
+        obj.productName = productList[parseInt(Math.random() * (productList.length))]
+        obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
+        obj.planDelivery = timeArr[i]
+        obj.status = 4
+        arr2.push(obj)
+      }
+      this.orderPoolList = arr2
+      for (let i = 0; i < 20; i++) {
+        const obj = {}
+        const sj = parseInt(Math.random() * 200)
+        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
+        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
         obj.status = parseInt(Math.random() * 3 + 1)
-        obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
+        obj.completion = obj.status === 1 ? 0.00 : (obj.status === 3 ? 100 : parseInt(Math.random() * 100))
-        obj.yield = parseInt(Math.random() * 50 + 50) + '%'
+        obj.yield = parseInt(Math.random() * 10 + 90) + '%'
-        obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
+        // obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
+        obj.shiftCosts = '0'
+        obj.energyCosts = '0'
+        obj.equipmentCost = '0'
+        obj.materialCost = '0'
+        obj.totalCost = '0'
         temp.push(obj)
       }
+      temp.sort(function (a, b) {
+        return new Date(a.completion) - new Date(b.completion)
+      })
       this.orderMonitiringList = temp
     },
     change() {
@@ -290,9 +310,21 @@ export default {
   }
   .container-main {
     padding: 16px 8px;
+    .top-container {
+      height: calc((100vh - 100px * var(--beilv)) * 0.42);
+      display: flex;
+      flex: 1;
+    }
+    .bottom-container {
+      height: calc((100vh - 100px * var(--beilv)) * 0.56);
+      display: flex;
+      flex: 1;
+    }
   }
   .box-padding {
     padding: 0 16px;
+    height: 100%;
+    opacity: 0.8;
   }
 }
 </style>
@@ -310,11 +342,11 @@ export default {
   }
   .specil-table2 {
     .el-table .cell {
-      padding-left: 50px;
+      padding-left: 25px;
     }
     .el-table--border th:first-child .cell,
     .el-table--border td:first-child .cell {
-      padding-left: 50px;
+      padding-left: 25px;
     }
   }
 }

src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
 <template>
-  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+  <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
     <div class="line" />
     <div class="line line-vertical" />
     <div class="line line-right" />
@@ -75,6 +75,7 @@ export default {
 .base-container {
   color: #fff;
   width: 100%;
+  height: 100%;
   background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
   border: 2px solid;
@@ -138,8 +139,11 @@ export default {
     font-size: 1.5em;
     padding: .67em;
   }
-  // .bar-content{
+  .bar-item {
-  //   padding: 1em;
+    height: 100%;
-  // }
+  }
+  .bar-content{
+    height: calc(100% - 6em);
+  }
 }
 </style>

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

@@ -7,26 +7,29 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-    >
-      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
       <el-table-column
-        v-for="item in renderTableHeadList"
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70 * beilv"
+        align="center"
+      />
+      <el-table-column
+        v-for="(item, index) in renderTableHeadList"
         :key="item.prop"
         :show-overflow-tooltip="showOverflow"
         v-bind="item"
       >
         <template slot-scope="scope">
-
+          <component
-          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :key="index"
+            :inject-data="{ ...scope.row, ...item }"
+            @emitData="emitData"
+          />
           <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
-
         </template>
       </el-table-column>
       <slot name="content" />
@@ -36,7 +39,7 @@
 <script>
 import { isObject, isString } from 'lodash'
 export default {
-  name: 'BaseTable',
+  name: 'TechyTable',
   filters: {
     commonFilter: (source, filterType = a => a) => {
       return filterType(source)
@@ -107,70 +110,103 @@ export default {
   methods: {
     emitData(val) {
       this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(14, 32, 62, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      } else {
-        return {
-          background: 'rgba(32, 55, 96, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      }
-    },
-    setCellStyle(v) {
-      return {
-        lineHeight: 23 * this.beilv + 'px'
-      }
     }
   }
 }
 </script>
-<style lang="scss">
+
-@import "~@/styles/index.scss";
+<style scoped>
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .visual-base-table-container {
-  .el-table {
+  height: 100%;
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
-
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-  }
 }
-.setting {
+/* .visual-base-table-container >>> .el-table {
-  text-align: right;
+  min-width: 120%;
-  padding: 15px;
+} */
-  .setting-box {
+/* 清除默认样式 */
-    width: 100px;
+.visual-base-table-container >>> th.gutter {
-  }
+  display: none;
-  i {
+}
-    color: #aaa;
+.visual-base-table-container >>> table {
-    @extend .pointer;
+  background: transparent;
-  }
 }
 
+.visual-base-table-container >>> .el-table,
+.visual-base-table-container >>> th,
+.visual-base-table-container >>> tr {
+  background: unset;
+}
+
+/* 设置设计稿样式 */
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
+}
+
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
+}
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
+}
+
+.visual-base-table-container >>> td span {
+  color: #ffffffb3;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
+  padding: 0;
+}
+
+.visual-base-table-container >>> thead th .cell {
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #203760;
+  /* background-color: #20376090; */
+}
 </style>

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

@@ -1,17 +1,21 @@
 <template>
-  <div :style="{ height: 15 * beilv + 'px' }">
+  <div class="state-box">
-    <span v-if="this.injectData.status === 3">
-      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
-      已完成
-    </span>
     <span v-if="this.injectData.status === 1">
-      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="yellow_dot" class="tip"/>
       在途
     </span>
     <span v-if="this.injectData.status === 2">
-      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="blue_dot" class="tip"/>
       已下发
     </span>
+    <span v-if="this.injectData.status === 3">
+      <svg-icon icon-class="green_dot" class="tip" />
+      已完成
+    </span>
+    <span v-if="this.injectData.status === 4">
+      <svg-icon icon-class="orange_dot" class="tip" />
+      待下发
+    </span>
   </div>
 </template>
 <script>
@@ -40,3 +44,11 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.state-box {
+  .tip {
+    font-size: calc(14px * var(--beilv));
+    vertical-align: middle;
+  }
+}
+</style>

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

@@ -5,7 +5,7 @@
       v-for="(item,index) in orderMsg"
       :key="index"
       :style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
-        + 'px', height: 168 * beilv + 'px'}"
+        + 'px'}"
       class="box"
     >
       <p class="line1">
@@ -15,17 +15,17 @@
           <span class="state">{{ item.state }}</span>
         </span>
       </p>
-      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <p style="paddingLeft: 15px">
         <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
         <span class="fr">
           产线：
           <span class="light-color" :style="{marginRight: 25 * beilv + 'px'}">{{ item.line }}</span>
         </span>
       </p>
-      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <p style="paddingLeft: 15px">
         <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
       </p>
-      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
+      <div style="paddingLeft: 15px">
         <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
         <span v-else class="light-color">订单进度</span>
         <span class="light-color fr">{{ item.percentage }}</span>
@@ -57,10 +57,13 @@ export default {
 <style lang='scss' scoped>
 .order-box {
   display: flex;
+  flex: 1;
+  height: 100%;
   flex-flow: row wrap;
   justify-content: space-between;
   .box {
     width: 49.5%;
+    height: 49.5%;
     margin-bottom: 8px;
     background-image: url('../../../../assets/img/cockpit/module-back.png');
     background-repeat: no-repeat;
@@ -76,10 +79,10 @@ export default {
       display: inline-block;
       content: "";
       width: 4px;
-      height: 14px;
+      height: calc(14px * var(--beilv));
       border-radius: 2px;
       margin-right: 8px;
-      vertical-align: middle;
+      vertical-align: top;
       background-color: #4BFFC8;
     }
     .state {
@@ -90,6 +93,26 @@ export default {
       background: #366F5D;
     }
   }
+  ::-webkit-scrollbar {
+    width: calc(8px * var(--beilv));
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #14243f;
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-button {
+    width: calc(8px * var(--beilv));
+    height: calc(8px * var(--beilv));
+    background: #5bc4bf9f;
+    position: relative;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: calc(8px * var(--beilv));
+    background: #5bc4bf9f;
+  }
 }
 .progress-box {
   border-radius: 5px;

src/views/report-manage/ReportSort/index.vue

@@ -7,7 +7,6 @@
 -->
 <template>
   <div class="app-container">
-    <top-title />
     <head-form
       :form-config="headFormConfig"
       @headBtnClick="btnClick"
@@ -45,11 +44,16 @@ const tableBtn = [{
   btnName: 'btn.delete'
 }]
 const tableProps = [{
+  prop: '',
+  label: '',
+  width: 700
+}, {
   prop: 'name',
-  label: i18n.t('module.formManage.formSort.name'),
+  label: i18n.t('module.formManage.formSort.name')
-  align: 'center'
 }]
-import TopTitle from '@/components/TopTitle'
+
+let resizeEventListener = null
+
 import HeadForm from '@/components/basicData/HeadForm'
 import AddForm from './AddForm'
 import EditForm from './EditForm'
@@ -61,7 +65,7 @@ import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 import i18n from '@/lang'
 export default {
   name: 'OrgManager',
-  components: { TopTitle, HeadForm, Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  components: { HeadForm, Pagination, BaseTable, MethodBtn, AddForm, EditForm },
   props: {},
   data() {
     return {
@@ -100,7 +104,15 @@ export default {
     this.getList()
     // this.listLoading = false
   },
-  mounted() {},
+  mounted() {
+    this.$set(this.tableProps[0], 'width', 700 * (document.body.offsetWidth / 1920))
+    addEventListener('resize', resizeEventListener = () => {
+      this.$set(this.tableProps[0], 'width', 700 * (document.body.offsetWidth / 1920))
+    })
+  },
+  destroyed() {
+    removeEventListener('resize', resizeEventListener)
+  },
   methods: {
     handleClick(raw) {
       console.log(raw)

src/views/report-manage/ReportSortChoise.vue

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