Compare commits
No commits in common. "4cd6f748a98a77184ea2cc2a971e0a84a93cbcf2" and "3964f8541ee6286d4cd8bf3f0707a11ba98cf9d6" have entirely different histories.
4cd6f748a9
...
3964f8541e
@ -239,7 +239,7 @@ export default {
|
|||||||
const colorGradient = colors[dataIndex]
|
const colorGradient = colors[dataIndex]
|
||||||
if (totalRate + percent < 25) {
|
if (totalRate + percent < 25) {
|
||||||
/** 也许这里需要完善,但目前工作良好 */
|
/** 也许这里需要完善,但目前工作良好 */
|
||||||
(() => {})()
|
;(() => {})()
|
||||||
} else if (totalRate + percent < 50) {
|
} else if (totalRate + percent < 50) {
|
||||||
colorGradient.x = 0
|
colorGradient.x = 0
|
||||||
colorGradient.y = 0
|
colorGradient.y = 0
|
||||||
@ -252,7 +252,7 @@ export default {
|
|||||||
colorGradient.y2 = 0
|
colorGradient.y2 = 0
|
||||||
} else if (totalRate + percent < 100) {
|
} else if (totalRate + percent < 100) {
|
||||||
/** 也许这里需要完善,但目前工作良好 */
|
/** 也许这里需要完善,但目前工作良好 */
|
||||||
(() => {})()
|
;(() => {})()
|
||||||
}
|
}
|
||||||
|
|
||||||
totalRate += percent
|
totalRate += percent
|
||||||
@ -290,8 +290,8 @@ export default {
|
|||||||
return beilv * baseSize
|
return beilv * baseSize
|
||||||
},
|
},
|
||||||
applyChartOption() {
|
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 fs5 = this.calcFontsize(5 /** px*/)
|
||||||
const fs8 = this.calcFontsize(8 /** px*/)
|
const fs8 = this.calcFontsize(8 /** px*/)
|
||||||
const fs10 = this.calcFontsize(10 /** px*/)
|
const fs10 = this.calcFontsize(10 /** px*/)
|
||||||
|
63
src/views/3DOverview/components/TechyFakeTable.vue
Normal file
63
src/views/3DOverview/components/TechyFakeTable.vue
Normal file
@ -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>
|
@ -286,11 +286,19 @@ export default {
|
|||||||
width: calc(472px * var(--beilv));
|
width: calc(472px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 现场实时监控 */
|
||||||
|
.ft-monitor {
|
||||||
|
}
|
||||||
|
|
||||||
/* 缺陷分类分析 */
|
/* 缺陷分类分析 */
|
||||||
.fault-analysis {
|
.fault-analysis {
|
||||||
width: calc(290px * var(--beilv));
|
width: calc(290px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设备报警提示 */
|
||||||
|
.eq-alert {
|
||||||
|
}
|
||||||
|
|
||||||
.techy-body-part__left,
|
.techy-body-part__left,
|
||||||
.techy-body-part__right {
|
.techy-body-part__right {
|
||||||
/* height: 100%; */
|
/* height: 100%; */
|
||||||
|
@ -393,6 +393,10 @@ export default {
|
|||||||
left: calc(140px * var(--beilv));
|
left: calc(140px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-select {
|
||||||
|
/* height: calc(18px * var(--beilv)); */
|
||||||
|
}
|
||||||
|
|
||||||
.pl-select >>> input {
|
.pl-select >>> input {
|
||||||
/* height: 100%; */
|
/* height: 100%; */
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -307,7 +307,7 @@ import TechyBox from './components/TechyBox.vue'
|
|||||||
import TechyTable from './components/TechyTable.vue'
|
import TechyTable from './components/TechyTable.vue'
|
||||||
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
|
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
|
||||||
import TechyAnalysisHeader from './components/TechyAnalysisHeader.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 FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
|
||||||
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
@ -330,8 +330,8 @@ export default {
|
|||||||
// FaultCategoryChart,
|
// FaultCategoryChart,
|
||||||
PlFaultAnalysisPieChart,
|
PlFaultAnalysisPieChart,
|
||||||
TechyBar,
|
TechyBar,
|
||||||
NewLineStack
|
NewLineStack,
|
||||||
// productionRateHeader
|
productionRateHeader
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const quexianDatalist = [
|
const quexianDatalist = [
|
||||||
@ -675,6 +675,40 @@ export default {
|
|||||||
.fake-legend span {
|
.fake-legend span {
|
||||||
background: none;
|
background: none;
|
||||||
cursor: 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>
|
</style>
|
||||||
|
@ -126,9 +126,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.visual-base-table-container >>> ::-webkit-scrollbar-button {
|
.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;
|
background: #5bc4bf9f;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -138,10 +137,15 @@ export default {
|
|||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* .visual-base-table-container {
|
||||||
|
min-width: 30vw;
|
||||||
|
} */
|
||||||
.visual-base-table-container {
|
.visual-base-table-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
/* .visual-base-table-container >>> .el-table {
|
||||||
|
min-width: 120%;
|
||||||
|
} */
|
||||||
/* 清除默认样式 */
|
/* 清除默认样式 */
|
||||||
.visual-base-table-container >>> th.gutter {
|
.visual-base-table-container >>> th.gutter {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -243,20 +243,20 @@ export default {
|
|||||||
const colorGradient = colors[dataIndex]
|
const colorGradient = colors[dataIndex]
|
||||||
if (totalRate + percent < 25) {
|
if (totalRate + percent < 25) {
|
||||||
/** 也许这里需要完善,但目前工作良好 */
|
/** 也许这里需要完善,但目前工作良好 */
|
||||||
(() => {})()
|
;(() => {})()
|
||||||
} else if (totalRate + percent < 50) {
|
} else if (totalRate + percent < 50) {
|
||||||
colorGradient.x = 0
|
colorGradient.x = 0
|
||||||
colorGradient.y = 0
|
colorGradient.y = 0
|
||||||
colorGradient.x2 = 1
|
colorGradient.x2 = 1
|
||||||
colorGradient.y2 = 1
|
colorGradient.y2 = 1
|
||||||
} else if (totalRate + percent >= 50 && dataIndex === 1) {
|
} else if (totalRate + percent >= 50 && dataIndex == 1) {
|
||||||
colorGradient.x = 1
|
colorGradient.x = 1
|
||||||
colorGradient.y = 1
|
colorGradient.y = 1
|
||||||
colorGradient.x2 = 0
|
colorGradient.x2 = 0
|
||||||
colorGradient.y2 = 0
|
colorGradient.y2 = 0
|
||||||
} else if (totalRate + percent < 100) {
|
} else if (totalRate + percent < 100) {
|
||||||
/** 也许这里需要完善,但目前工作良好 */
|
/** 也许这里需要完善,但目前工作良好 */
|
||||||
(() => {})()
|
;(() => {})()
|
||||||
}
|
}
|
||||||
|
|
||||||
totalRate += percent
|
totalRate += percent
|
||||||
@ -306,19 +306,21 @@ export default {
|
|||||||
applyChartOption(datalist) {
|
applyChartOption(datalist) {
|
||||||
const fs5 = this.calcFontsize(5 /** px*/)
|
const fs5 = this.calcFontsize(5 /** px*/)
|
||||||
const fs8 = this.calcFontsize(8 /** 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 fs12 = this.calcFontsize(12 /** px*/)
|
||||||
const fs13 = this.calcFontsize(13 /** 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 fs20 = this.calcFontsize(20 /** px*/)
|
||||||
const legendTextFixWidth = this.calcFontsize(48 /** px*/)
|
const legendTextFixWidth = this.calcFontsize(48 /** px*/)
|
||||||
const legnedTop = this.calcFontsize(72 /** px*/)
|
const legnedTop = this.calcFontsize(72 /** px*/)
|
||||||
// const legendTopRate = this.calcFontsize(30 /** % */)
|
const legendTopRate = this.calcFontsize(30 /** % */)
|
||||||
|
|
||||||
this.configs.title.text =
|
this.configs.title.text =
|
||||||
this.dataPeriod === 'month'
|
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.textStyle.fontSize = fs20
|
||||||
this.configs.title.subtextStyle.fontSize = fs13
|
this.configs.title.subtextStyle.fontSize = fs13
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user