lb #18
@@ -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 fs3 = this.calcFontsize(3 /** px*/)
 | 
			
		||||
      // const fs1 = this.calcFontsize(1 /** 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*/)
 | 
			
		||||
 
 | 
			
		||||
@@ -1,63 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="techy-fake-table">
 | 
			
		||||
    <div class="table-inner">
 | 
			
		||||
      <section class="table-header" />
 | 
			
		||||
      <section class="table-body" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
  name: '',
 | 
			
		||||
  props: {
 | 
			
		||||
    tableProps: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      default: () => []
 | 
			
		||||
    },
 | 
			
		||||
    tableData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      default: () => []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      headMap: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  created() {},
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.renderHeadRow().then(() => {
 | 
			
		||||
      this.renderCommonRow()
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    renderHeadRow() {
 | 
			
		||||
      return new Promise((resolve, reject) => {
 | 
			
		||||
        // do something...
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    renderCommonRow() {
 | 
			
		||||
      return new Promise((resolve, reject) => {
 | 
			
		||||
        // do something...
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.techy-fake-table {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100px;
 | 
			
		||||
  background: #3333;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  overflow-x: scroll;
 | 
			
		||||
}
 | 
			
		||||
.table-inner {
 | 
			
		||||
  max-width: 10000px;
 | 
			
		||||
  color: white;
 | 
			
		||||
  white-space: nowrap;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -286,19 +286,11 @@ 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%; */
 | 
			
		||||
 
 | 
			
		||||
@@ -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,
 | 
			
		||||
    productionRateHeader
 | 
			
		||||
    NewLineStack
 | 
			
		||||
    // productionRateHeader
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    const quexianDatalist = [
 | 
			
		||||
@@ -668,47 +668,13 @@ 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>
 | 
			
		||||
 
 | 
			
		||||
@@ -126,8 +126,9 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.visual-base-table-container >>> ::-webkit-scrollbar-button {
 | 
			
		||||
  width: calc(8px * var(--beilv));
 | 
			
		||||
  height: calc(8px * var(--beilv));
 | 
			
		||||
  /* width: calc(8px * var(--beilv));
 | 
			
		||||
  height: calc(8px * var(--beilv)); */
 | 
			
		||||
  display: none;
 | 
			
		||||
  background: #5bc4bf9f;
 | 
			
		||||
  position: relative;
 | 
			
		||||
}
 | 
			
		||||
@@ -137,15 +138,10 @@ export default {
 | 
			
		||||
  background: #5bc4bf9f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* .visual-base-table-container {
 | 
			
		||||
  min-width: 30vw;
 | 
			
		||||
} */
 | 
			
		||||
.visual-base-table-container {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
/* .visual-base-table-container >>> .el-table {
 | 
			
		||||
  min-width: 120%;
 | 
			
		||||
} */
 | 
			
		||||
 | 
			
		||||
/* 清除默认样式 */
 | 
			
		||||
.visual-base-table-container >>> th.gutter {
 | 
			
		||||
  display: none;
 | 
			
		||||
 
 | 
			
		||||
@@ -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,21 +306,19 @@ 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
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user