mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2023-12-29 09:00:00 +08:00
parent 6d8889bbec
commit 9e2da2ddc2
12 changed files with 1153 additions and 1283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/OperationalOverview/components/baseTable.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 10:11:09
* @LastEditTime: 2023-12-28 09:00:44
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
@@ -16,9 +16,8 @@
style="width: 100%; background: transparent"
>
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
label="序号"
:width="70"
align="center"
/>

177
src/views/OperationalOverview/components/doubleYChart .vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2023-10-16 14:20:45
* @LastEditTime: 2023-12-27 18:28:45
* @LastEditors: zhp
* @Description:
-->
@@ -60,98 +60,17 @@ export default {
data() {
return {
chart: null,
series: []
nameList: [],
series: [{
type: 'bar',
data: [],
barWidth: 6
}]
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
this.series = [
{
name: this.dataList[0].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[0].data,
barWidth: 6
},
{
name: this.dataList[1].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[1].data,
barWidth: 6
},
{
name: this.dataList[2].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[2].topColor },
{ offset: 1, color: this.dataList[2].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[2].data,
barWidth: 6
},
{
name: this.dataList[3].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[3].topColor },
{ offset: 1, color: this.dataList[3].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[3].data,
barWidth: 6
},
{
name: this.dataList[4].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[4].topColor },
{ offset: 1, color: this.dataList[4].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[4].data,
barWidth: 6
},
{
name: this.dataList[5].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[5].topColor },
{ offset: 1, color: this.dataList[5].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[5].data,
barWidth: 6
}
]
this.$nextTick(() => {
this.initChart()
})
@@ -164,8 +83,50 @@ export default {
this.chart = null
},
methods: {
initChart() {
console.log(1)
initChart(nameList, passRateList, outputNumList) {
let series= [
{
name: '产线产量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 1, color: '#1295FF' }
])
// barBorderRadius: this.borderRadius
},
barWidth: 12,
data: outputNumList
},
{
name: '产线良品率',
type: 'line',
yAxisIndex: 0,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 209, 96, 0.18)'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
}
}
},
data: passRateList
}
]
const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
@@ -177,7 +138,12 @@ export default {
}
},
grid: {
right: '20%'
left: "3%",
right: "4%",
bottom: "3%",
width: 'auto',
height: "auto",
containLabel: true
},
legend: {
data: ['产线产量', '产线良品率'],
@@ -205,7 +171,7 @@ export default {
color: '#213259'
}
},
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
data: nameList
},
// yAxis: {
@@ -236,8 +202,7 @@ export default {
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value} 片'
formatter: '{value}%'
}
},
splitLine: {
@@ -295,29 +260,7 @@ export default {
// },
}
],
series: [
{
name: '产线产量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 1, color: '#1295FF' }
])
// barBorderRadius: this.borderRadius
},
data: [
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
]
},
{
name: '产线良品率',
type: 'line',
yAxisIndex: 0,
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
}
]
series: series
})
}
}

163
src/views/OperationalOverview/components/linearBarChart.vue
View File

@@ -41,113 +41,39 @@ export default {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
// nameList: {
// type: Array,
// default: () => []
// },
// dataList: {
// type: Array,
// default: () => []
// }
},
data() {
return {
chart: null,
series: []
nameList: [],
series: [{
type: 'bar',
data: [],
barWidth: 6
}]
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
this.series = [
{
name: this.dataList[0].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[0].data,
barWidth: 6
},
{
name: this.dataList[1].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[1].data,
barWidth: 6
},
{
name: this.dataList[2].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[2].topColor },
{ offset: 1, color: this.dataList[2].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[2].data,
barWidth: 6
},
{
name: this.dataList[3].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[3].topColor },
{ offset: 1, color: this.dataList[3].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[3].data,
barWidth: 6
},
{
name: this.dataList[4].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[4].topColor },
{ offset: 1, color: this.dataList[4].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[4].data,
barWidth: 6
},
{
name: this.dataList[5].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[5].topColor },
{ offset: 1, color: this.dataList[5].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[5].data,
barWidth: 6
}
]
this.$nextTick(() => {
this.initChart()
})
// console.log('33333', this.dataList)
// let arr = []
// this.dataList.forEach(ele => {
// console.log(ele);
// this.series = []
this.initChart()
// this.$nextTick(() => {
// // this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
@@ -157,9 +83,20 @@ export default {
this.chart = null
},
methods: {
initChart() {
console.log(1)
initChart(nameList,dataList) {
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
this.series = [{
type: 'bar',
data: dataList,
barWidth: 6
}]
}
if (nameList.length !== 0) {
this.nameList = nameList
}
this.chart.setOption({
tooltip: {
trigger: 'axis',
@@ -216,19 +153,19 @@ export default {
},
type: 'value'
},
legend: {
itemHeight: 10,
itemWidth: 10,
x: 'center', // 可设定图例在左、右、居中
y: 'top', // 可设定图例在上、下、居中
show: this.showLegend,
data: this.dataList,
right: '1%',
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
// legend: {
// itemHeight: 10,
// itemWidth: 10,
// x: 'center', // 可设定图例在左、右、居中
// y: 'top', // 可设定图例在上、下、居中
// show: this.showLegend,
// data: this.dataList,
// right: '1%',
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
series: this.series
})
}

235
src/views/OperationalOverview/components/pileBarChart.vue Normal file
View File

@@ -0,0 +1,235 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2023-12-27 19:47:27
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'linearBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
borderRadius: {
type: Array,
default: () => [9, 9, 0, 0]
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
// nameList: {
// type: Array,
// default: () => []
// },
// dataList: {
// type: Array,
// default: () => []
// }
},
data() {
return {
chart: null,
nameList: [],
series: [{
type: 'bar',
data: [],
barWidth: 6
}]
}
},
mounted() {
console.log('mounted')
// console.log('borderRadius: ', this.borderRadius)
// console.log('33333', this.dataList)
// let arr = []
// this.dataList.forEach(ele => {
// console.log(ele);
// this.series = []
this.initChart()
// this.$nextTick(() => {
// // this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
let series = [{
name: '成品面积',
type: 'bar',
stack: 'total',
// label: {
// show: true
// },
emphasis: {
focus: 'series'
},
data: passRateList,
itemStyle: {
normal: { color: '#2359ec' }
}
},
{
name: '废片面积',
type: 'bar',
stack: 'total',
// label: {
// show: true
// },
emphasis: {
focus: 'series'
},
barWidth: 12,
data: wasteList,
itemStyle: {
normal: { color: '#745fe4' }
}
},]
// for (i = 0; i < 5; i++) {
// series.push({
// })
// }
const yAxisDataLeft = topNameList;
// const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
const yAxisDataRight = nameWasteList
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
// legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
width: 'auto',
height: 'auto',
containLabel: true
},
xAxis: {
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
},
},
yAxis: [
{
inverse: true,
data: yAxisDataLeft,
axisLabel: {
show: true,
inside: true,
textStyle: {
color: '#ffffff',
fontSize: 12,
align: 'left',
},
formatter: '{value}\n{a|占位}\n{a|占位}',
rich: {
a: {
color: 'transparent',
lineHeight: 24,
}
}
},
//offset: 30,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
{
inverse: false,
data: yAxisDataRight,
axisLabel: {
inside: true,
textStyle: {
color: '#ffffff',
fontSize: 12,
align: 'right',
},
formatter: '{value}\n{a|占位}\n{a|占位}',
rich: {
a: {
color: 'transparent',
lineHeight: 24,
fontFamily: 'digital'
}
}
},
offset: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}
],
series: series
})
}
}
}
</script>