mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lb #17

Merged
gtz217 merged 29 commits from lb into master 2022-11-25 16:46:41 +08:00
Conversation 0 Commits 29 Files Changed 28 +93 -10
4 changed files with 93 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fbe6cf41e4 - Show all commits

18
src/views/3DOverview/components/DianChart.vue
View File

@ -46,7 +46,23 @@ class ChartOption {
}, },
padding: 10, padding: 10,
backgroundColor: 'rgba(13, 29, 53, 0.8)', backgroundColor: 'rgba(13, 29, 53, 0.8)',
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;' extraCssText: 'width: auto !important; height: auto !important;',
formatter: params => {
return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
</div>
`
}
} }
this.xAxis = { this.xAxis = {

19
src/views/3DOverview/components/RightContentProductRate.vue
View File

@ -55,8 +55,23 @@ class ChartOption {
}, },
padding: 10, padding: 10,
backgroundColor: 'rgba(13, 29, 53, 0.8)', backgroundColor: 'rgba(13, 29, 53, 0.8)',
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%', // formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
extraCssText: 'width: calc(100px*var(--beilv)) !important;' extraCssText: 'width: calc(100px*var(--beilv)) !important;',
formatter: params => {
return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue
}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div>
`
}
} }
let d = new Date() let d = new Date()

21
src/views/3DOverview/components/RightContentRealtimeProduction.vue
View File

@ -55,7 +55,26 @@ class ChartOption {
}, },
padding: 10, padding: 10,
backgroundColor: 'rgba(13, 29, 53, 0.8)', backgroundColor: 'rgba(13, 29, 53, 0.8)',
extraCssText: 'width: calc(100px*var(--beilv)) !important;' extraCssText: 'width: calc(100px*var(--beilv)) !important;',
formatter: params => {
return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[3]
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
</div>
`
}
} }
let d = new Date() let d = new Date()

45
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -41,6 +41,19 @@ class ChartOption {
type: 'dotted', type: 'dotted',
color: '#7BFFFB' color: '#7BFFFB'
} }
},
formatter: params => {
return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div>
`
} }
} }
@ -285,12 +298,18 @@ export default {
} }
}, },
formatter: params => { formatter: params => {
const currentMonth = new Date().getMonth() + 1 const currentMonth = new Date().getMonth() + 1
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="margin: 0; font-size: calc(14px * var(--beilv)); ">${currentMonth}-${params[0].axisValue}</h2> <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[0]}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> params[0].axisValue
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[1]}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.configs.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.configs.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div> </div>
` `
} }
@ -309,8 +328,22 @@ export default {
color: '#7BFFFB' color: '#7BFFFB'
} }
}, },
formatter: undefined formatter: params => {
} return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue
}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.configs.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.configs.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div>
`
}
}
} }
// update series // update series