diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue
new file mode 100644
index 0000000..b345a8a
--- /dev/null
+++ b/src/views/3DOverview/components/DianChart.vue
@@ -0,0 +1,223 @@
+<template>
+  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'DianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    const colors = ['#5470C6', '#EE6666', '#339888']
+
+    // 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: {
+        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: 8 },
+            type: 'value',
+            splitNumber: 4,
+            onZero: true,
+            position: 'left',
+            offset: 42,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '电压/V',
+            nameTextStyle: { align: 'right', fontSize: 8 },
+            type: 'value',
+            splitNumber: 4,
+            axisTick: { show: false },
+            onZero: true,
+            position: 'left',
+            offset: 0,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '温度',
+            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
+            axisTick: { show: false },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            type: 'value',
+            splitNumber: 4,
+            splitLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        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: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.techy-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.techy-chart >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
diff --git a/src/views/3DOverview/components/FadianChart.vue b/src/views/3DOverview/components/FadianChart.vue
new file mode 100644
index 0000000..51f95c9
--- /dev/null
+++ b/src/views/3DOverview/components/FadianChart.vue
@@ -0,0 +1,161 @@
+<template>
+  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'FadianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  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 {
+      chart: null,
+      option: {
+        legend: {
+          itemGap: 8,
+          itemWidth: 10,
+          itemHeight: 10,
+          right: '5%',
+          textStyle: {
+            color: '#fff9'
+          }
+        },
+        color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
+        grid: {
+          top: '30%',
+          left: 0,
+          right: '5%',
+          bottom: 0,
+          containLabel: true
+        },
+        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: '压力/MPa',
+          nameTextStyle: {
+            fontSize: 10,
+            color: '#fff9',
+            align: 'right'
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 8,
+            color: '#fffa'
+            // formatter: '{value} %'
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#fff3'
+            }
+          }
+        },
+        series: [
+          {
+            name: '天然气',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '氧气',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: 'CDA',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.techy-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.techy-chart >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
diff --git a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
index 3cb3797..ccf9797 100644
--- a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
+++ b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
@@ -2,7 +2,7 @@
   <div class="left-content-equipment-check">
     <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
     <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
       <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
       <el-table
         key="LeftContentEquipmentCheck1"
@@ -10,10 +10,10 @@
         :data="tableData"
         :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-column label="设备名称" prop="eqName" align="center" />
+        <el-table-column label="所属产线" prop="pl" align="center" />
+        <el-table-column label="提示等级" prop="warningLevel" align="center" />
+        <el-table-column label="提示等级" prop="checkContent" align="center" />
       </el-table>
     </div>
     <!-- <div class="el-table-wrapper">
@@ -43,6 +43,11 @@ const tableProps = [
   { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
 ]
 const tableData = [
+  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
   { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
   { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
   // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
@@ -68,9 +73,17 @@ export default {
 </script>
 
 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 60% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
+  height: calc(100% - 32px);
   display: flex;
   gap: calc(100vmin / 1920 * 36);
+  overflow: hidden;
 }
 
 .el-table-wrapper {
@@ -79,7 +92,7 @@ export default {
 
 .left-content-equipment-check > div {
   overflow: hidden;
-  overflow-x: scroll;
+  /* overflow-x: scroll; */
 }
 
 .el-table-wrapper >>> * {
@@ -96,6 +109,8 @@ export default {
   background-color: transparent;
   color: #fff9;
   border: 0;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,
diff --git a/src/views/3DOverview/components/LeftContentMonitor.vue b/src/views/3DOverview/components/LeftContentMonitor.vue
index 79df0ef..c56bca7 100644
--- a/src/views/3DOverview/components/LeftContentMonitor.vue
+++ b/src/views/3DOverview/components/LeftContentMonitor.vue
@@ -7,14 +7,14 @@
 <script>
 import { default as pic1 } from './assets/monitor/1.png'
 import { default as pic2 } from './assets/monitor/2.png'
-import { default as pic3 } from './assets/monitor/3.png'
+// import { default as pic3 } from './assets/monitor/3.png'
 
 export default {
   name: '',
 
   data() {
     return {
-      images: [pic1, pic2, pic3]
+      images: [pic1, pic2]
     }
   },
   created() {},
@@ -26,15 +26,15 @@ export default {
 <style scoped>
 .left-content-monitoring {
   width: 100%;
-  /* height: calc(100% - 48px); */
+  height: calc(100% - 32px);
   display: flex;
   gap: calc(100vw / 1920 * 16);
 }
 
 .monitor-pic {
-  flex: 1;
-  height: 128px;
-  background-position: 100% 100%;
+  height: 100%;
+  width: 260px;
+  /* background-position: 100% 100%; */
   background-size: cover;
   background-repeat: no-repeat;
 }
diff --git a/src/views/3DOverview/components/LeftContentOrder.vue b/src/views/3DOverview/components/LeftContentOrder.vue
index 2b505e8..444c686 100644
--- a/src/views/3DOverview/components/LeftContentOrder.vue
+++ b/src/views/3DOverview/components/LeftContentOrder.vue
@@ -2,7 +2,7 @@
   <div class="left-content-equipment-check">
     <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
     <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
       <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
       <el-table
         key="LeftContentOrder1"
@@ -10,10 +10,33 @@
         :data="tableData"
         :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-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" />
+        <el-table-column label="完成度" prop="finished" :resizable="true" align="center">
+          <template slot-scope="scope">
+            <el-progress
+              class="lb-progress-bar"
+              type="circle"
+              :percentage="scope.row.finished"
+              :width="18"
+              :stroke-width="2"
+              color="#47FF27"
+            />
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <!-- <div class="el-table-wrapper">
@@ -41,8 +64,8 @@ const tableData = [
   { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
   { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
   { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
-  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
-  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
+  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
+  // { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
   // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
 ]
 const tableData2 = [
@@ -68,6 +91,12 @@ export default {
 </script>
 
 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
   display: flex;
   gap: calc(100vw / 1920 * 16);
@@ -79,7 +108,7 @@ export default {
 
 .left-content-equipment-check > div {
   overflow: hidden;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .el-table-wrapper >>> * {
@@ -131,4 +160,13 @@ export default {
 .el-table-wrapper >>> tbody > tr:nth-child(even) {
   background: rgba(76, 97, 123, 0.2);
 }
+
+.lb-progress-bar {
+  left: 30px;
+  display: flex;
+}
+.lb-progress-bar >>> .el-progress__text {
+  color: #fff9;
+  left: -75%;
+}
 </style>
diff --git a/src/views/3DOverview/components/LeftContentPublicConsume.vue b/src/views/3DOverview/components/LeftContentPublicConsume.vue
index 3863fab..b05c5ec 100644
--- a/src/views/3DOverview/components/LeftContentPublicConsume.vue
+++ b/src/views/3DOverview/components/LeftContentPublicConsume.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="public-consume__inner">
-    <div class="water-area">
+    <!-- <div class="water-area">
       <TechyBarChart
         :id="'water-chart'"
         key="waterchart"
@@ -23,6 +23,97 @@
         :x-data="['天然气', '氧气', 'CDA']"
         :series-data="[8.2, 10, 6.1]"
       />
+    </div> -->
+
+    <div>
+      <TechyBox class="water-consume">
+        <div class="header-part has-border">
+          <img src="./assets/consume/s.png" width="32" height="32" alt="water">
+          <span>水</span>
+        </div>
+        <div class="content-part">
+          <div class="row">
+            <span class="name">纯 &nbsp;&nbsp;&nbsp;水</span>
+            <span class="diy-process-bar color-1" />
+            <span class="amount">
+              39m
+              <sup>3</sup>
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">循环水</span>
+            <span class="diy-process-bar color-2" />
+            <span class="amount">
+              239m
+              <sup>3</sup>
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">自来水</span>
+            <span class="diy-process-bar color-3" />
+            <span class="amount">
+              23m
+              <sup>3</sup>
+            </span>
+          </div>
+        </div>
+      </TechyBox>
+    </div>
+
+    <div>
+      <TechyBox class="gas-consume">
+        <div class="header-part has-border">
+          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
+          <span>气</span>
+        </div>
+        <div class="content-part">
+          <div class="row">
+            <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
+            <span class="diy-process-bar color-1" />
+            <span class="amount">
+              39Pa
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">CDA</span>
+            <span class="diy-process-bar color-2" />
+            <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="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 class="content-part">
+          <DianChart />
+        </div>
+      </TechyBox>
+    </div>
+
+    <div style="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 class="content-part">
+          <FadianChart />
+        </div>
+      </TechyBox>
     </div>
   </div>
 </template>
@@ -30,10 +121,12 @@
 <script>
 import TechyBarChart from './TechyBarChart.vue'
 import TechyLineChart from './TechyLineChart.vue'
-
+import TechyBox from './TechyBox.vue'
+import FadianChart from './FadianChart.vue'
+import DianChart from './DianChart.vue'
 export default {
   name: 'LeftContentPublicConsume',
-  components: { TechyBarChart, TechyLineChart },
+  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
   data() {
     return {}
   },
@@ -47,10 +140,13 @@ export default {
 .public-consume__inner {
   height: calc(100% - 32px);
   width: 100%;
-  display: grid;
+  /* display: grid;
   grid-template-areas:
     'water  elec      elec      gas'
-    'water  elec-gen  elec-gen  gas';
+    'water  elec-gen  elec-gen  gas'; */
+  display: flex;
+  flex-direction: column;
+  gap: calc(100vmin / 1920 * 16);
 }
 
 .water-area {
@@ -69,4 +165,89 @@ export default {
 /* .elec-area,.elec-gen-area {
   max-height: calc((100% - 32px) / 2 - 16px);
 } */
+
+.techy-box {
+  padding: calc(100vmin / 1920 * 16);
+  display: flex;
+}
+
+.header-part {
+  height: 100%;
+  width: calc(100vmin / 1920 * 96);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  /* overflow: hidden; */
+  margin-right: 16px;
+  position: relative;
+}
+
+.header-part.has-border::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -8px;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent, #fff9, transparent);
+}
+
+.header-part > span {
+  color: #fffc;
+  font-size: 0.8em;
+}
+
+.content-part {
+  display: flex;
+  flex-direction: column;
+  font-size: calc(100vmin / 1920 * 18);
+  color: #fff9;
+  flex: 1 1;
+  gap: calc(100vmin / 1920 * 8);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.row > .name,
+.row > .amount {
+  white-space: nowrap;
+  width: 12%;
+}
+
+.row > .amount {
+  text-align: right;
+}
+
+.diy-process-bar {
+  margin: 0 8px;
+  border-radius: 7px;
+  height: 8px;
+  flex: 1 1;
+  background-color: #fff3;
+  overflow: hidden;
+  position: relative;
+}
+
+.diy-process-bar::after {
+  content: '';
+  position: absolute;
+  border-radius: 7px;
+  width: 30%;
+  height: 100%;
+}
+
+.diy-process-bar.color-1::after {
+  background: linear-gradient(to right, #178be9, #67b3f2);
+}
+.diy-process-bar.color-2::after {
+  background: linear-gradient(to right, #2ec6b4, #85f6e9);
+}
+.diy-process-bar.color-3::after {
+  background: linear-gradient(to right, #ff8bc3, #eb46a1);
+}
 </style>
diff --git a/src/views/3DOverview/components/RightContentAlert.vue b/src/views/3DOverview/components/RightContentAlert.vue
index 4fdf76e..a278573 100644
--- a/src/views/3DOverview/components/RightContentAlert.vue
+++ b/src/views/3DOverview/components/RightContentAlert.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="right-content-alert">
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
       <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" />
-        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="故障等级" prop="level" :resizable="true" />
-        <el-table-column label="故障内容" prop="content" :resizable="true" />
-        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
+        <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="level" :resizable="true" align="center" />
+        <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>
@@ -42,18 +42,26 @@ export default {
 </script>
 
 <style scoped>
-.left-content-equipment-check {
+.fix-table >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+
+.right-content-alert {
+  height: calc(100% - 32px);
   display: flex;
   gap: calc(100vw / 1920 * 16);
+  overflow: hidden;
 }
 
 .el-table-wrapper {
   flex: 1;
 }
 
-.left-content-equipment-check > div {
+.right-content-alert > div {
   overflow: hidden;
-  overflow-x: scroll;
+  /* overflow-x: scroll; */
 }
 
 .el-table-wrapper >>> * {
@@ -70,6 +78,8 @@ export default {
   background-color: transparent;
   color: #fff9;
   border: 0;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,
diff --git a/src/views/3DOverview/components/RightContentFaultAnalysis.vue b/src/views/3DOverview/components/RightContentFaultAnalysis.vue
index c514fa0..66c6b9e 100644
--- a/src/views/3DOverview/components/RightContentFaultAnalysis.vue
+++ b/src/views/3DOverview/components/RightContentFaultAnalysis.vue
@@ -14,74 +14,269 @@ export default {
   props: {
     id: {
       type: String,
-      default: 'default-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
+      default: 'default-fault-analysis-id'
     }
   },
   data() {
+    let totalRate = 0
+    const colors = [
+      {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 1,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#FB418C00', offset: 0.1 },
+          { color: '#FB418C', offset: 1 } // 红
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 1,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#DDB11200', offset: 0.1 },
+          { color: '#DDB112', offset: 1 } // 黄
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 1,
+        y: 1,
+        x2: 0,
+        y2: 0,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#1A99FF00', offset: 0.1 },
+          { color: '#1A99FF', offset: 1 } // 兰
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 1,
+        y: 1,
+        x2: 0,
+        y2: 0,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#A691FF00', offset: 0.1 },
+          { color: '#A691FF', offset: 1 } // 紫 3
+        ],
+        global: false
+      },
+      {
+        type: 'linear',
+        x: 0,
+        y: 1,
+        x2: 0,
+        y2: 0,
+        colorStops: [
+          { color: '#FFFFFF00', offset: 0 },
+          { color: '#49FBD600', offset: 0.1 },
+          { color: '#49FBD6', offset: 1 } // 绿
+        ],
+        global: false
+      }
+    ]
+
     return {
       chart: null,
-      option: {
+      // default configs
+      configs: {
         title: {
-          left: 'center',
-          top: '30%',
-          text: '总共',
+          textAlign: 'center',
+          left: '64%',
+          top: '35%',
+          text: '33039',
           textStyle: {
-            color: '#888',
-            fontSize: 10
+            color: '#fff',
+            fontSize: 14,
+            fontWeight: 'normal'
           },
-          subtext: 880,
+          subtext: '总数',
           subtextStyle: {
             color: '#fff',
-            fontSize: 24
+            fontSize: 10,
+            fontWeight: 'lighter'
           }
         },
+        legend: {
+          top: '5%',
+          bottom: '0%',
+          left: '-5%',
+          orient: 'vertical',
+          icon: 'none',
+          itemGap: 5,
+          itemWidth: 10,
+          formatter: function(name) {
+            // test data - dynamic
+            const testData = [
+              { name: 'A', value: 100 },
+              { name: 'B', value: 200 },
+              { name: 'C', value: 300 },
+              { name: 'D', value: 400 },
+              { name: 'E', value: 500 }
+            ]
+            let pieLegendVale = {}
+            testData.filter((item, index) => {
+              if (item.name === name) {
+                pieLegendVale = item
+              }
+            })
+            const color = ['c', 'd', 'e', 'f', 'g']
+            const arr = [
+              '{' + color[testData.findIndex(item => item.name === name)] + '|}',
+              '{b|' + pieLegendVale.name + '}',
+              '{a|' + pieLegendVale.value + '}'
+            ]
+            return arr.join(' ')
+          },
+          textStyle: {
+            rich: {
+              a: {
+                // align: 'center',
+                fontSize: 10,
+                color: 'rgba(255, 255, 255, 0.7)',
+                lineHeight: 16
+              },
+              b: {
+                // verticalAlign: 'top',
+                // align: 'center',
+                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'
+              },
+              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'
+              }
+            }
+          }
+        },
+
         series: [
           {
-            name: 'Fault Analysis Chart',
+            name: 'PieForm',
             type: 'pie',
+            center: ['65%', '50%'],
             radius: ['50%', '70%'],
-            avoidLabelOverlap: false,
-            label: {},
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '12'
+            avoidLabelOverlap: true,
+            label: {
+              formatter: params => {
+                const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
+                return `{${colorMap[params.dataIndex]}|${params.percent} %}`
+              },
+              rich: {
+                first: { color: '#FB418C', fontSize: 8 },
+                second: { color: '#DDB112', fontSize: 8 },
+                third: { color: '#1A99FF', fontSize: 8 },
+                fourth: { color: '#A691FF', fontSize: 8 },
+                fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
-            data: Array(7)
-              .fill(0)
-              .map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
+            itemStyle: {
+              color: params => {
+                /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
+                const { dataIndex, percent } = params
+                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 < 100) {
+                  /** 也许这里需要完善，但目前工作良好 */
+                  (() => {})()
+                }
+
+                totalRate += percent
+                return colorGradient
+              }
+            },
+            data: [
+              { value: 100, name: 'A' },
+              { value: 200, name: 'B' },
+              { value: 300, name: 'C' },
+              { value: 400, name: 'D' },
+              { value: 500, name: 'E' }
+            ]
           }
         ]
       }
     }
   },
   mounted() {
+    window.addEventListener('resize', function() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    })
+
     this.$nextTick(() => {
-      console.log('here...')
+      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
       if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
-      this.chart.setOption(this.option)
+
+      this.chart.setOption(this.configs)
+
+      this.chart.resize()
     })
   },
-  beforeDestroy() {
-    if (this.chart) this.chart.dispose()
-    this.chart = null
-  },
+
   methods: {}
 }
 </script>
+
 <style scoped>
 .right-content-quality-analysis {
   height: calc(100% - 32px);
diff --git a/src/views/3DOverview/components/RightContentProductRate.vue b/src/views/3DOverview/components/RightContentProductRate.vue
index 2e40130..f934bb0 100644
--- a/src/views/3DOverview/components/RightContentProductRate.vue
+++ b/src/views/3DOverview/components/RightContentProductRate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 10vh; width: 100%; ">
+  <div style="height: calc(100% - 36px); width: 100%;">
     <div :id="id" ref="techy-line-chart" class="techy-chart" />
   </div>
 </template>
@@ -35,12 +35,21 @@ export default {
       option: {
         color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
         grid: {
-          top: '5%',
+          top: '20%',
           left: 0,
-          right: '5%',
+          right: 12,
           bottom: 0,
           containLabel: true
         },
+        legend: {
+          width: '72%',
+          right: 12,
+          itemWidth: 12,
+          itemHeight: 8,
+          textStyle: {
+            color: '#fffc'
+          }
+        },
         xAxis: {
           type: 'category',
           boundaryGap: false,
@@ -63,6 +72,12 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: '成品率',
+          nameTextStyle: {
+            color: '#fffc',
+            align: 'right',
+            fontSize: 8
+          },
           axisLine: {
             show: false
           },
diff --git a/src/views/3DOverview/components/RightContentQualityAnalysis.vue b/src/views/3DOverview/components/RightContentQualityAnalysis.vue
index 18196e3..e273eae 100644
--- a/src/views/3DOverview/components/RightContentQualityAnalysis.vue
+++ b/src/views/3DOverview/components/RightContentQualityAnalysis.vue
@@ -1,28 +1,39 @@
 <template>
   <div class="right-content-quality-analysis">
-    <div v-for="item in datalist" :key="item.name" class="analysis-item">
+    <techy-analysis-bar
+      v-for="(item, index) in datalist"
+      :key="index"
+      :name="item.name"
+      :amount="item.value"
+      color="green"
+    />
+
+    <!-- <div v-for="item in datalist" :key="item.name" class="analysis-item">
       <span class="absolute" :style="{ backgroundColor: item.color }" />
       <span>{{ item.name }}</span>
       <span>{{ item.value }}</span>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import TechyAnalysisBar from './TechyAnalysisBar.vue'
+
 export default {
   name: 'RightContentQualityAnalysis',
+  components: { TechyAnalysisBar },
   props: {},
   data() {
     return {
       datalist: [
-        { name: '热端', value: 20, color: '#0b88ff' },
-        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '热端', value: 2332039120, color: '#0b88ff' },
+        { name: '原片上片', value: 30, color: '#0bffa6' },
         { name: '上片', value: 27, color: '#e3ff0b' },
         { name: '磨边', value: 23, color: '#950bff' },
-        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '原片磨边', value: 30, color: '#0bffa6' },
         { name: '原片', value: 30, color: '#0bffa6' },
         { name: '上片', value: 27, color: '#e3ff0b' },
-        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '磨边镀膜膜', value: 23, color: '#950bff' },
         { name: '镀膜', value: 10, color: '#ff0bc2' },
         { name: '清晰', value: 66, color: '#ff7d0b' }
       ]
@@ -38,11 +49,11 @@ export default {
 .right-content-quality-analysis {
   height: calc(100% - 32px);
   overflow: hidden;
-  overflow-y: scroll; /** 右边会有多的padding给滑道 */
+  overflow-y: auto; /** 右边会有多的padding给滑道 */
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: min-content;
-  gap: calc(100vw / 1920 * 8);
+  gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20);
   justify-content: end;
 }
 
diff --git a/src/views/3DOverview/components/RightContentRealtimeProduction.vue b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
index 35c0f32..5174820 100644
--- a/src/views/3DOverview/components/RightContentRealtimeProduction.vue
+++ b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
@@ -1,20 +1,42 @@
 <template>
-  <div style="height: 12vh; width: 100%; ">
-    <div :id="id" ref="techy-line-chart" class="techy-chart" />
-  </div>
+  <techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
+    <!-- <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]
+        },
+        {
+          topColor: 'rgba(59, 76, 118, 0.2)',
+          bottomColor: '#31A2FF',
+          name: '能耗',
+          data: [32, 65, 65, 54, 37, 77]
+        }
+      ]"
+    />
+  </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'
 
 export default {
   name: 'RealtimeProductionHorizontalBarChart',
+  components: { TechyBox, newBar },
   mixins: [resize],
   props: {
     id: {
       type: String,
-      default: 'default-id'
+      default: 'default-linechart-id'
     },
     title: {
       type: String,
@@ -103,7 +125,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      console.log('here...')
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
       this.chart.setOption(this.option)
     })
diff --git a/src/views/3DOverview/components/TechyAnalysisBar.vue b/src/views/3DOverview/components/TechyAnalysisBar.vue
new file mode 100644
index 0000000..c2c2c03
--- /dev/null
+++ b/src/views/3DOverview/components/TechyAnalysisBar.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="quality-analysis-bar" :class="`border-${color}`">
+    <div class="placeholder-block-wrapper">
+      <div class="justify-end">
+        <div class="placeholder-block" :class="`block-${color}-1`" />
+        <div class="placeholder-block" :class="`block-${color}-2`" />
+        <div class="placeholder-block" :class="`block-${color}-3`" />
+        <div class="placeholder-block" :class="`block-${color}-4`" />
+        <div class="placeholder-block" :class="`block-${color}-5`" />
+      </div>
+    </div>
+    <span class="quality-analysis-bar__name">
+      {{ name }}
+    </span>
+    <span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TechyAnalysisBar',
+  filters: {
+    amountFilter: val => {
+      const sVal = val.toString()
+      return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: 'null'
+    },
+    amount: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'green'
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.quality-analysis-bar {
+  border-radius: 2px;
+  padding: 2px;
+  display: flex;
+}
+
+.border-green {
+  border: 1px solid #35abad;
+}
+.border-blue {
+  border: 1px solid #49b2ff;
+}
+.border-orange {
+  border: 1px solid #ffb94d;
+}
+.border-pink {
+  border: 1px solid #ed879f;
+}
+
+.placeholder-block-wrapper {
+  flex-grow: 1;
+  overflow: hidden;
+  min-width: 32px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.placeholder-block-wrapper > div {
+  width: 200px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+}
+
+.placeholder-block {
+  width: 20px;
+  height: 20px;
+  margin-left: 3px;
+  /* border-radius: 1px; */
+}
+
+.block-green-5 {
+  background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-green-4 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
+}
+.block-green-3 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
+}
+.block-green-2 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
+}
+.block-green-1 {
+  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
+  background: transparent;
+}
+
+/* ================ blue ================ */
+.block-blue-5 {
+  background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-blue-4 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
+}
+.block-blue-3 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
+}
+.block-blue-2 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
+}
+.block-blue-1 {
+  /* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
+  background: transparent;
+}
+
+/* ================ orange ================ */
+.block-orange-5 {
+  background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-orange-4 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
+}
+.block-orange-3 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
+}
+.block-orange-2 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
+}
+.block-orange-1 {
+  /* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
+  background: transparent;
+}
+
+/* ================ pink ================ */
+.block-pink-5 {
+  background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-pink-4 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
+}
+.block-pink-3 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
+}
+.block-pink-2 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
+}
+.block-pink-1 {
+  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
+  background: transparent;
+}
+
+.quality-analysis-bar__name {
+  text-align: center;
+  white-space: nowrap;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  color: white;
+  display: inline-block;
+  padding: 3px 8px;
+  font-size: 14px;
+  line-height: 12px;
+}
+
+.quality-analysis-bar__amount {
+  color: rgba(255, 255, 255, 0.725);
+  display: inline-block;
+  /* min-width: 35%; */
+  width: 50%;
+  text-align: left;
+  padding: 3px 0;
+  font-size: 14px;
+  line-height: 12px;
+}
+</style>
diff --git a/src/views/3DOverview/components/TechyHeader.vue b/src/views/3DOverview/components/TechyHeader.vue
index b41225d..7bcf2cd 100644
--- a/src/views/3DOverview/components/TechyHeader.vue
+++ b/src/views/3DOverview/components/TechyHeader.vue
@@ -77,6 +77,16 @@ export default {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'zcoolqingkehuangyouti';
+  src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
+      url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
+      url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 .techy-header {
   background: transparent;
   display: flex;
@@ -114,6 +124,7 @@ export default {
 
 .date,
 .time {
+  font-family: zcoolqingkehuangyouti, sans-serif;
   font-size: calc(100vmin / 1920 * 42);
   line-height: 1.5;
   /* font-size: 28px;
@@ -121,7 +132,7 @@ export default {
   color: #49e1de;
   letter-spacing: 0.8px;
   position: absolute;
-  bottom: calc(100vmin / 1920 * 14 );
+  bottom: calc(100vmin / 1920 * 14);
 }
 
 .date {
diff --git a/src/views/3DOverview/components/assets/consume/d.png b/src/views/3DOverview/components/assets/consume/d.png
new file mode 100644
index 0000000..83a0afe
Binary files /dev/null and b/src/views/3DOverview/components/assets/consume/d.png differ
diff --git a/src/views/3DOverview/components/assets/consume/fad.png b/src/views/3DOverview/components/assets/consume/fad.png
new file mode 100644
index 0000000..6f3c57f
Binary files /dev/null and b/src/views/3DOverview/components/assets/consume/fad.png differ
diff --git a/src/views/3DOverview/components/assets/consume/gas.png b/src/views/3DOverview/components/assets/consume/gas.png
new file mode 100644
index 0000000..210f23c
Binary files /dev/null and b/src/views/3DOverview/components/assets/consume/gas.png differ
diff --git a/src/views/3DOverview/components/assets/consume/s.png b/src/views/3DOverview/components/assets/consume/s.png
new file mode 100644
index 0000000..bc91665
Binary files /dev/null and b/src/views/3DOverview/components/assets/consume/s.png differ
diff --git a/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.ttf b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.ttf
new file mode 100644
index 0000000..04aeb2e
Binary files /dev/null and b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.ttf differ
diff --git a/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff
new file mode 100644
index 0000000..f663ad1
Binary files /dev/null and b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff differ
diff --git a/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff2 b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff2
new file mode 100644
index 0000000..4a254e9
Binary files /dev/null and b/src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff2 differ
diff --git a/src/views/3DOverview/components/header-bg.svg b/src/views/3DOverview/components/header-bg.svg
deleted file mode 100644
index 5dc8c9b..0000000
--- a/src/views/3DOverview/components/header-bg.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 12备份 6</title>
-    <defs>
-        <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
-            <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
-            <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
-            <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
-            <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
-                <g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
-                <g id="编组-4" transform="translate(0.000000, 1.000000)">
-                    <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
-                    <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
-                    <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
-                    <g id="编组-3" transform="translate(43.807292, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                    <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                </g>
-                <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/views/3DOverview/components/newBar.vue b/src/views/3DOverview/components/newBar.vue
new file mode 100644
index 0000000..afe2317
--- /dev/null
+++ b/src/views/3DOverview/components/newBar.vue
@@ -0,0 +1,363 @@
+<template>
+  <div
+    ref="chartContainer"
+    class="chartContainer"
+    :class="bindClass"
+    style="position: relative; width: 100%; height:100%"
+  />
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    chartName: {
+      type: String,
+      default: ''
+    },
+    xlabelFontSize: {
+      type: Number,
+      default: 12
+    },
+    xlabelRotate: {
+      type: Number,
+      default: 0
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  computed: {
+    bindClass() {
+      return {
+        'fault-category-chart': this.chartName === 'fault-category',
+        'process-fault-chart': this.chartName === 'process-fault',
+        'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
+      }
+    }
+  },
+  mounted() {
+    if (this.dataList.length > 1) {
+      this.series = [
+        {
+          // 柱体
+          name: this.dataList[0].name,
+          type: 'bar',
+          barWidth: 20,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[0].topColor },
+              { offset: 1, color: this.dataList[0].bottomColor }
+            ])
+          },
+          data: this.dataList[0].data
+        },
+        {
+          // 柱顶
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'circle',
+          symbolPosition: 'end',
+          symbolOffset: ['-70%', '-50%'],
+          symbolSize: [20, 6],
+          zlevel: 2,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
+              { offset: 1, color: '#2c6e7d' }
+            ])
+          },
+          data: this.dataList[0].data,
+          label: {
+            color:
+              this.chartName === 'process-fault'
+                ? 'rgba(119, 255, 242, 1)'
+                : this.chartName === 'fault-category'
+                  ? '#31a2ff'
+                  : '#fff9',
+            show: true,
+            offset: [-12, 10],
+            position: 'top',
+            vertialAlign: 'bottom'
+          }
+        },
+        {
+          // 柱底
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'circle',
+          symbolOffset: ['-62%', '50%'],
+          symbolSize: [20, 6],
+          itemStyle: { color: this.dataList[0].bottomColor },
+          data: this.dataList[0].data
+        },
+        {
+          // 柱体
+          name: this.dataList[1].name,
+          type: 'bar',
+          barWidth: 20,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[1].topColor },
+              { offset: 1, color: this.dataList[1].bottomColor }
+            ])
+          },
+          data: this.dataList[1].data
+        },
+        {
+          // 柱顶
+          name: this.dataList[1].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'circle',
+          symbolPosition: 'end',
+          symbolOffset: ['66%', '-50%'],
+          symbolSize: [20, 6],
+          zlevel: 2,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[1].topColor },
+              { offset: 1, color: this.dataList[1].bottomColor }
+            ])
+          },
+          data: this.dataList[1].data,
+          label: {
+            color:
+              this.chartName === 'process-fault'
+                ? 'rgba(119, 255, 242, 1)'
+                : this.chartName === 'fault-category'
+                  ? '#31a2ff'
+                  : '#fff9',
+            show: true,
+            offset: [12, 10],
+            position: 'top',
+            vertialAlign: 'bottom'
+          }
+        },
+        {
+          // 柱底
+          name: this.dataList[1].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'circle',
+          symbolOffset: ['66%', '50%'],
+          symbolSize: [20, 6],
+          itemStyle: { color: this.dataList[1].bottomColor },
+          data: this.dataList[1].data
+        }
+      ]
+    } else {
+      const barWidth = 400 / 2 / this.dataList[0].data.length
+      this.series = [
+        {
+          // 柱体
+          name: this.dataList[0].name,
+          type: 'bar',
+          // barWidth: 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)'
+                : this.chartName === 'fault-category'
+                  ? '#31a2ff'
+                  : '#fff9',
+            show: true,
+            offset: [0, 10],
+            position: 'top',
+            vertialAlign: 'bottom'
+          },
+          data: this.dataList[0].data
+        },
+        {
+          // 柱底
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          // barWidth: 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: '16%',
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          itemWidth: 8,
+          itemHeight: 8,
+          right: '2%',
+          textStyle: {
+            color: '#fff9'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: this.xlabelFontSize,
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            },
+            rotate: this.xlabelRotate
+          },
+          data: this.nameList
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: this.dataList[1].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(100vh/1920 * 80);
+  left: calc(100vw/1920 * 48); */
+  /* bottom: calc(10% + 100vh/1920 * 28); */
+  bottom: 25px;
+  left: 9%;
+  height: 52px;
+  width: 90%;
+  background: linear-gradient(to top, #31a2ff6d, transparent);
+  transform: skew(-45deg);
+  z-index: 0;
+}
+.process-fault-chart >>> div::before {
+  /* .process-fault-chart::before { */
+  content: '';
+  position: absolute;
+  bottom: 26px;
+  left: 10%;
+  height: 48px;
+  width: 90%;
+  background: linear-gradient(to top, #49fbd789, transparent);
+  transform: skew(-45deg);
+  z-index: 0;
+}
+.realtime-production-cost-chart >>> div::before {
+  /* .fault-category-chart::before { */
+  content: '';
+  position: absolute;
+  /* bottom: calc(100vh/1920 * 80);
+    left: calc(100vw/1920 * 48); */
+  /* bottom: calc(10% + 100vh/1920 * 28); */
+  bottom: 8px;
+  left: 9%;
+  height: 30px;
+  width: 90%;
+  background: linear-gradient(to top, #31a2ff6d, transparent);
+  transform: skew(-45deg);
+  z-index: 0;
+}
+</style>
diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue
index a2fce66..5e0cd42 100644
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
+    <V3DApp @3d-loaded="handle3DLoaded" />
     <!-- 正式内容: -->
-    <!-- <div v-if="showPage" id="v3d-main-content"> -->
-    <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -19,7 +19,7 @@
 
           <div class="techy-body-part__middle">
             <TechyBox>
-              <div class="flex">
+              <div class="techy-body-part__middle__inner">
                 <p>
                   <b>产线名称 :</b>
                   <span>A产线</span>
@@ -29,7 +29,7 @@
                   <span>清洗机</span>
                 </p>
                 <p>
-                  <b>累计加工数量 :</b>
+                  <b>累计加工 :</b>
                   <span>20</span>
                 </p>
                 <p>
@@ -41,15 +41,15 @@
           </div>
 
           <div class="techy-body-part__right">
-            <techy-container title="实时产量和能耗" style="flex: 0">
+            <techy-container title="实时产量和能耗" style="height: 22vh">
               <RightContentRealtimeProduction />
             </techy-container>
-            <div class="techy-body-part__right-col-2">
-              <techy-container title="工序质量分析">
-                <RightContentQualityAnalysis />
-              </techy-container>
-            </div>
-            <techy-container title="产线成品率" style="flex: 0;">
+
+            <techy-container title="工序质量分析" style="flex: 0">
+              <RightContentQualityAnalysis />
+            </techy-container>
+
+            <techy-container title="产线成品率" style="flex: 1">
               <RightContentProductRate />
             </techy-container>
           </div>
@@ -57,23 +57,23 @@
 
         <!-- 底部 -->
         <div class="bottom-part">
-          <div style="width: 25%; min-width: 480px;  min-height: 240px; height: 20vh;">
-            <techy-container title="设备巡检提示" style="flex: 0;">
+          <div style="width: 25%; min-width: 480px; height: 100%;">
+            <techy-container title="设备巡检提示" style="flex: 0; align-self: stretch;">
               <LeftContentEquipmentCheck />
             </techy-container>
           </div>
-          <div style="flex: 1;">
+          <div>
             <techy-container title="现场实时监控">
               <LeftContentMonitor />
             </techy-container>
           </div>
-          <div>
+          <div style="flex: 1;">
             <techy-container title="缺陷分类分析">
               <RightContentFaultAnalysis />
             </techy-container>
           </div>
           <div style="width: 25%; min-width: 480px;">
-            <techy-container title="设备报警提示" style="flex: 0;">
+            <techy-container title="设备报警提示">
               <RightContentAlert />
             </techy-container>
           </div>
@@ -162,6 +162,28 @@ export default {
   position: relative;
 }
 
+#v3d-outter *::-webkit-scrollbar {
+  width: 8px;
+}
+
+#v3d-outter *::-webkit-scrollbar-track {
+  background-color: #14243f;
+  /* background-color: white; */
+  border-radius: 0;
+}
+
+#v3d-outter *::-webkit-scrollbar-button {
+  width: 8px;
+  height: 8px;
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+#v3d-outter *::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: #5bc4bf9f;
+}
+
 #v3d-main-content {
   width: 100%;
   height: 100%;
@@ -189,6 +211,7 @@ export default {
 }
 
 .bottom-part {
+  height: 22vh;
   padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
   display: flex;
   /* gap: 16px; */
@@ -221,19 +244,21 @@ export default {
 
 .techy-body-part__middle {
   position: absolute;
-  top: 12%;
-  left: 36%;
-  height: 96px;
-  width: 128px;
+  top: 9%;
+  left: 26%;
+  height: 136px;
+  width: 176px;
 }
 
-.flex {
+.techy-body-part__middle__inner {
+  height: 100%;
   padding: 12px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 
-.flex p {
+.techy-body-part__middle__inner p {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -241,15 +266,15 @@ export default {
   color: #fff;
 }
 
-.flex p > span {
+.techy-body-part__middle__inner p > span {
   position: relative;
-  padding-left: 6px;
+  padding-left: 16px;
 }
 .round-dot::before {
   content: '';
   position: absolute;
-  top: 5px;
-  left: -3px;
+  top: 4px;
+  left: 2px;
   width: 8px;
   height: 8px;
   background-color: rgb(82, 231, 82);
diff --git a/src/views/EquipmentManager/HomePage.vue b/src/views/EquipmentManager/HomePage.vue
index e3a81d4..9871822 100644
--- a/src/views/EquipmentManager/HomePage.vue
+++ b/src/views/EquipmentManager/HomePage.vue
@@ -8,7 +8,7 @@
           <div class="equipment-exception">
             <!-- 设备报修/异常上报 -->
             <techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-exception-report">
                 <techy-table
                   :page="1"
                   :limit="7"
@@ -22,7 +22,7 @@
           <div class="equipment-alarm">
             <!-- 设备异常报警 -->
             <techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-eq-exception">
                 <techy-table
                   :page="1"
                   :limit="7"
@@ -325,6 +325,17 @@ export default {
 </script>
 
 <style scoped>
+.fix-table-eq-exception >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .visual-container {
   width: 100%;
   min-width: 1280px;
diff --git a/src/views/EquipmentManager/components/header-bg.svg b/src/views/EquipmentManager/components/header-bg.svg
deleted file mode 100644
index 5dc8c9b..0000000
--- a/src/views/EquipmentManager/components/header-bg.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 12备份 6</title>
-    <defs>
-        <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
-            <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
-            <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
-            <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
-            <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
-                <g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
-                <g id="编组-4" transform="translate(0.000000, 1.000000)">
-                    <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
-                    <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
-                    <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
-                    <g id="编组-3" transform="translate(43.807292, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                    <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                </g>
-                <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/views/EquipmentManager/mockData.js b/src/views/EquipmentManager/mockData.js
index 11396dd..d7f154e 100644
--- a/src/views/EquipmentManager/mockData.js
+++ b/src/views/EquipmentManager/mockData.js
@@ -27,18 +27,18 @@ const PriorityComponent = {
     }
   },
   methods: {},
-  render: function(h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
+  render: function (h) {
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
   }
 }
 
 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报修/异常内容', prop: 'content' },
-  { label: '报修/发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '设备名称', prop: 'eqName', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center', width: 80 },
+  { label: '报修/异常内容', prop: 'content', align: 'center' },
+  { label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
 ]
 
 export const equipmentExceptionDatalist = [
@@ -70,21 +70,21 @@ const LifeRemainComponent = {
     }
 
   },
-  render: function(h) {
+  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' }
     },
-    this.injectData.remain)
+      this.injectData.remain)
   }
 }
 
 export const equipmentAlarmProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '设备编码', prop: 'eqCode' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '报警内容', prop: 'content' }
+  { label: '设备名称', prop: 'eqName', align: 'center' },
+  { label: '设备编码', prop: 'eqCode', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center' },
+  { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
+  { label: '报警内容', prop: 'content', align: 'center' }
 ]
 
 export const equipmentAlarmDatalist = [
@@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
 ]
 
 export const sparepartsProps = [
-  { prop: 'name', label: '部件名称' },
-  { prop: 'eq', label: '所属设备' },
-  { prop: 'pl', label: '所属产线' },
-  { prop: 'update_time', label: '更换时间' },
-  { prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
-  { prop: 'stock', label: '备件库存量' },
-  { prop: 'location', label: '库位' }
+  { prop: 'name', label: '部件名称', align: 'center' },
+  { prop: 'eq', label: '所属设备', align: 'center' },
+  { prop: 'pl', label: '所属产线', align: 'center' },
+  { prop: 'update_time', label: '更换时间', align: 'center' },
+  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
+  { prop: 'stock', label: '备件库存量', align: 'center' },
+  { prop: 'location', label: '库位', align: 'center' }
 ]
 
 export const sparepartsDatalist = [
@@ -172,9 +172,9 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
       h('span', this.statusText)
     ])
   }
diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index 779ec8b..7800bfd 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -5,7 +5,7 @@
       <div class="part-1">
         <div>
           <techy-container :title="'质量异常上报'" :icon="qualitySVG">
-            <div>
+            <div class="fix-table-exception-report">
               <techy-table
                 :page="1"
                 :limit="10"
@@ -17,7 +17,7 @@
           </techy-container>
         </div>
 
-        <div>
+        <div class="fix-table-exception-alert">
           <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
             <techy-table
               :page="1"
@@ -337,6 +337,19 @@ export default {
 </script>
 
 <style scoped>
+.fix-table-exception-alert >>> .el-table td .cell {
+  width: 75% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
+
+
 .visual-container {
   width: 100%;
   min-width: 1280px;
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index 218bfb8..b35c273 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -101,7 +101,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#FB418C' // 0% 处的颜色
+                    color: '#FB418C66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -132,7 +132,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#DDB112' // 0% 处的颜色
+                    color: '#DDB11266' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -163,7 +163,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#1A99FF' // 0% 处的颜色
+                    color: '#1A99FF66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -194,7 +194,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#A691FF' // 0% 处的颜色
+                    color: '#A691FF66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -229,7 +229,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#49FBD6' // 0% 处的颜色
+                    color: '#49FBD666' // 0% 处的颜色
                   },
                   {
                     offset: 1,
diff --git a/src/views/QualityManager/components/header-bg.svg b/src/views/QualityManager/components/header-bg.svg
deleted file mode 100644
index 5dc8c9b..0000000
--- a/src/views/QualityManager/components/header-bg.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 12备份 6</title>
-    <defs>
-        <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
-            <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
-            <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
-            <stop stop-color="#52FFF1" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
-            <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
-            <stop stop-color="#31A6AE" offset="0%"></stop>
-            <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
-            <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#31A6AE" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
-            <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
-                <g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
-                <g id="编组-4" transform="translate(0.000000, 1.000000)">
-                    <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
-                    <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
-                    <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
-                    <g id="编组-3" transform="translate(43.807292, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                    <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
-                        <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
-                        <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
-                        <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
-                        </g>
-                        <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
-                            <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
-                            <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
-                            <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
-                            <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
-                            <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
-                        </g>
-                        <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
-                        <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
-                    </g>
-                </g>
-                <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/views/QualityManager/mockData.js b/src/views/QualityManager/mockData.js
index be474df..995195d 100644
--- a/src/views/QualityManager/mockData.js
+++ b/src/views/QualityManager/mockData.js
@@ -30,20 +30,20 @@ const PriorityComponent = {
     console.log(this.injectData.priority)
   },
   methods: {},
-  render: function(h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
+  render: function (h) {
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
   }
 }
 
 console.log('is component?', PriorityComponent)
 
 export const qualityTableProps = [
-  { label: '工序名称', width: 80, prop: 'wsName' },
-  { label: '所属产线', width: 80, prop: 'pl' },
+  { label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
+  { label: '所属产线', width: 130, prop: 'pl', align: 'center' },
   { label: '异常内容', align: 'center', prop: 'content' },
-  { label: '报告人', width: 80, prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '报告人', width: 120, prop: 'creator', align: 'center' },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
 ]
 
 export const qualityDatalist = [
@@ -87,23 +87,23 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
       h('span', this.statusText)
     ])
   }
 }
 
 export const qualityExceptionTableProps = [
-  { label: '工序名称', prop: 'wsName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '异常内容', prop: 'content' },
-  { label: '发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '处理人', prop: 'charger' },
-  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
+  { label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
+  { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
+  { label: '异常内容', prop: 'content', align: 'center' },
+  { label: '发现人', prop: 'creator', align: 'center', width: 100 },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
+  { label: '处理人', prop: 'charger', align: 'center', width: 100 },
+  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
 ]
 
 export const qualityExceptionDatalist = [