commit
29dfb47b4b
@ -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*/)
|
||||||
|
@ -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));
|
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%; */
|
||||||
|
@ -226,23 +226,22 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
::-webkit-scrollbar {
|
.visual-container >>> ::-webkit-scrollbar {
|
||||||
width: calc(8px * var(--beilv));
|
width: calc(8px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
.visual-container >>> ::-webkit-scrollbar-track {
|
||||||
background-color: #14243f;
|
background-color: #14243f;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
.visual-container >>> ::-webkit-scrollbar-button {
|
||||||
width: calc(8px * var(--beilv));
|
display: none;
|
||||||
height: calc(8px * var(--beilv));
|
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
.visual-container >>> ::-webkit-scrollbar-thumb {
|
||||||
border-radius: calc(8px * var(--beilv));
|
border-radius: calc(8px * var(--beilv));
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
}
|
}
|
||||||
@ -394,10 +393,6 @@ 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;
|
||||||
|
@ -126,8 +126,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.visual-base-table-container >>> ::-webkit-scrollbar-button {
|
.visual-base-table-container >>> ::-webkit-scrollbar-button {
|
||||||
width: calc(8px * var(--beilv));
|
display: none;
|
||||||
height: calc(8px * var(--beilv));
|
/* width: calc(8px * var(--beilv));
|
||||||
|
height: calc(8px * var(--beilv)); */
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -45,6 +45,28 @@ export default {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.techy-vertical-table >>> ::-webkit-scrollbar {
|
||||||
|
width: calc(8px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.techy-vertical-table >>> ::-webkit-scrollbar-track {
|
||||||
|
background-color: #14243f;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techy-vertical-table >>> ::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
|
/* width: calc(8px * var(--beilv));
|
||||||
|
height: calc(8px * var(--beilv)); */
|
||||||
|
background: #5bc4bf9f;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techy-vertical-table >>> ::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: calc(8px * var(--beilv));
|
||||||
|
background: #5bc4bf9f;
|
||||||
|
}
|
||||||
|
|
||||||
.trow {
|
.trow {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -207,7 +207,7 @@
|
|||||||
:class="{ 'pl-select__active': dateMode2 === 'day' }"
|
:class="{ 'pl-select__active': dateMode2 === 'day' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode2 = 'day'
|
dateMode2 = 'day'
|
||||||
dataUpdateToken = Math.random()+''
|
dataUpdateToken = Math.random() + ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
日
|
日
|
||||||
@ -216,7 +216,7 @@
|
|||||||
:class="{ 'pl-select__active': dateMode2 === 'month' }"
|
:class="{ 'pl-select__active': dateMode2 === 'month' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode2 = 'month'
|
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 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 = [
|
||||||
@ -668,47 +668,13 @@ export default {
|
|||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.fake-legend{
|
.fake-legend {
|
||||||
cursor: unset;
|
cursor: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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,8 +126,9 @@ 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;
|
||||||
}
|
}
|
||||||
@ -137,15 +138,10 @@ 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,21 +306,19 @@ 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 * 1000, 0)
|
: this.dataList.reduce((prev, curr) => prev + curr.value, 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