Reviewed-on: http://git.picaiba.com/mt-fe-group/11-mes-new/pulls/18pull/19/head
@@ -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%; */ | |||
@@ -226,23 +226,22 @@ export default { | |||
</script> | |||
<style scoped> | |||
::-webkit-scrollbar { | |||
.visual-container >>> ::-webkit-scrollbar { | |||
width: calc(8px * var(--beilv)); | |||
} | |||
::-webkit-scrollbar-track { | |||
.visual-container >>> ::-webkit-scrollbar-track { | |||
background-color: #14243f; | |||
border-radius: 0; | |||
} | |||
::-webkit-scrollbar-button { | |||
width: calc(8px * var(--beilv)); | |||
height: calc(8px * var(--beilv)); | |||
.visual-container >>> ::-webkit-scrollbar-button { | |||
display: none; | |||
background: #5bc4bf9f; | |||
position: relative; | |||
} | |||
::-webkit-scrollbar-thumb { | |||
.visual-container >>> ::-webkit-scrollbar-thumb { | |||
border-radius: calc(8px * var(--beilv)); | |||
background: #5bc4bf9f; | |||
} | |||
@@ -394,10 +393,6 @@ export default { | |||
left: calc(140px * var(--beilv)); | |||
} | |||
.pl-select { | |||
/* height: calc(18px * var(--beilv)); */ | |||
} | |||
.pl-select >>> input { | |||
/* height: 100%; */ | |||
outline: none; | |||
@@ -126,8 +126,9 @@ export default { | |||
} | |||
.visual-base-table-container >>> ::-webkit-scrollbar-button { | |||
width: calc(8px * var(--beilv)); | |||
height: calc(8px * var(--beilv)); | |||
display: none; | |||
/* width: calc(8px * var(--beilv)); | |||
height: calc(8px * var(--beilv)); */ | |||
background: #5bc4bf9f; | |||
position: relative; | |||
} | |||
@@ -45,6 +45,28 @@ export default { | |||
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 { | |||
width: 100%; | |||
white-space: nowrap; | |||
@@ -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 | |||