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

@@ -239,7 +239,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -252,7 +252,7 @@ export default {
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 }
 
                 totalRate += percent
@@ -290,8 +290,8 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      // const fs1 = this.calcFontsize(1 /** px*/)
+      const fs1 = this.calcFontsize(1 /** px*/)
-      // const fs3 = this.calcFontsize(3 /** px*/)
+      const fs3 = this.calcFontsize(3 /** px*/)
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)

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

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

src/views/3DOverview/index.vue

@@ -286,11 +286,19 @@ export default {
   width: calc(472px * var(--beilv));
 }
 
+/* 现场实时监控 */
+.ft-monitor {
+}
+
 /* 缺陷分类分析  */
 .fault-analysis {
   width: calc(290px * var(--beilv));
 }
 
+/* 设备报警提示 */
+.eq-alert {
+}
+
 .techy-body-part__left,
 .techy-body-part__right {
   /* height: 100%; */

src/views/EquipmentManager/HomePage.vue

@@ -393,6 +393,10 @@ export default {
   left: calc(140px * var(--beilv));
 }
 
+.pl-select {
+  /* height: calc(18px * var(--beilv)); */
+}
+
 .pl-select >>> input {
   /* height: 100%; */
   outline: none;

src/views/QualityManager/HomePage.vue

@@ -207,7 +207,7 @@
                             :class="{ 'pl-select__active': dateMode2 === 'day' }"
                             @click="
                               dateMode2 = 'day'
-                              dataUpdateToken = Math.random() + ''
+                              dataUpdateToken = Math.random()+''
                             "
                           >
                             日
@@ -216,7 +216,7 @@
                             :class="{ 'pl-select__active': dateMode2 === 'month' }"
                             @click="
                               dateMode2 = 'month'
-                              dataUpdateToken = Math.random() + ''
+                              dataUpdateToken = Math.random()+''
                             "
                           >
                             月
@@ -307,7 +307,7 @@ import TechyBox from './components/TechyBox.vue'
 import TechyTable from './components/TechyTable.vue'
 import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
 import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
-// import productionRateHeader from './components/productionRateHeader.vue'
+import productionRateHeader from './components/productionRateHeader.vue'
 // import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
 import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
 import { mapGetters } from 'vuex'
@@ -330,8 +330,8 @@ export default {
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
     TechyBar,
-    NewLineStack
+    NewLineStack,
-    // productionRateHeader
+    productionRateHeader
   },
   data() {
     const quexianDatalist = [
@@ -668,13 +668,47 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
-.fake-legend {
+.fake-legend{
   cursor: unset;
 }
 
 .fake-legend span {
   background: none;
   cursor: none;
-  color: #dff1fe;
+  color: #DFF1FE;
 }
+/* @media all and (max-width: 1680px) {
+  .production-rate {
+    text-align: center;
+  }
+
+  .production-rate >>> .top-icon,
+  .production-rate >>> .date-select {
+    display: none;
+  }
+}
+
+@media all and (min-width: 1680px) {
+  .production-rate {
+    text-align: left;
+  }
+
+  .production-rate >>> .top-icon {
+    display: none;
+  }
+}
+
+@media all and (min-width: 2048px) {
+  .production-rate {
+    text-align: center;
+  }
+
+  .production-rate >>> .date-select > span {
+    background-color: #568588;
+  }
+
+  .production-rate >>> .date-select > span.date-select__active {
+    background-color: #42bbb7;
+  }
+} */
 </style>

src/views/QualityManager/components/TechyTable.vue

@@ -126,9 +126,8 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  /* width: calc(8px * var(--beilv));
+  width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv)); */
+  height: calc(8px * var(--beilv));
-  display: none;
   background: #5bc4bf9f;
   position: relative;
 }
@@ -138,10 +137,15 @@ export default {
   background: #5bc4bf9f;
 }
 
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .visual-base-table-container {
   height: 100%;
 }
-
+/* .visual-base-table-container >>> .el-table {
+  min-width: 120%;
+} */
 /* 清除默认样式 */
 .visual-base-table-container >>> th.gutter {
   display: none;

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

@@ -243,20 +243,20 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
-                } else if (totalRate + percent >= 50 && dataIndex === 1) {
+                } else if (totalRate + percent >= 50 && dataIndex == 1) {
                   colorGradient.x = 1
                   colorGradient.y = 1
                   colorGradient.x2 = 0
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 }
 
                 totalRate += percent
@@ -306,19 +306,21 @@ export default {
     applyChartOption(datalist) {
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
-      // const fs10 = this.calcFontsize(10 /** px*/)
+      const fs10 = this.calcFontsize(10 /** px*/)
       const fs12 = this.calcFontsize(12 /** px*/)
       const fs13 = this.calcFontsize(13 /** px*/)
-      // const fs18 = this.calcFontsize(18 /** px*/)
+      const fs18 = this.calcFontsize(18 /** px*/)
       const fs20 = this.calcFontsize(20 /** px*/)
       const legendTextFixWidth = this.calcFontsize(48 /** px*/)
       const legnedTop = this.calcFontsize(72 /** px*/)
-      // const legendTopRate = this.calcFontsize(30 /** % */)
+      const legendTopRate = this.calcFontsize(30 /** % */)
 
       this.configs.title.text =
         this.dataPeriod === 'month'
-          ? this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0) // 如果是月数据，单位为 千片
+          ? // 如果是月数据，单位为 千片
-          : this.dataList.reduce((prev, curr) => prev + curr.value, 0) // 如果是日数据，单位为 片
+            this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
+          : // 如果是日数据，单位为 片
+            this.dataList.reduce((prev, curr) => prev + curr.value, 0)
       this.configs.title.textStyle.fontSize = fs20
       this.configs.title.subtextStyle.fontSize = fs13