Compare commits
5 Commits
b45818e2a4
...
5444ff92f7
Author | SHA1 | Date | |
---|---|---|---|
|
5444ff92f7 | ||
|
0713cb1650 | ||
9da2e20b24 | |||
|
efa5a7c383 | ||
6ba4c90767 |
@ -70,7 +70,7 @@ const LOCATIONS = [
|
|||||||
// 蚌埠2
|
// 蚌埠2
|
||||||
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
|
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
|
||||||
// 江西 瑞昌
|
// 江西 瑞昌
|
||||||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
|
{ x: 60, y: 58, tx: 68, ty: 50,lx:61,ly:61.5,ltx:69.5,lty:51.2, path: 'factoryData/factory-data' },
|
||||||
// 湖南 株洲
|
// 湖南 株洲
|
||||||
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
|
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
|
||||||
// 邯郸
|
// 邯郸
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-07-10 09:58:59
|
* @LastEditTime: 2024-07-17 08:55:15
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -17,15 +17,15 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
|
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
||||||
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }">
|
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ firstDayOfWeek: 1 }">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
|
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
|
||||||
style="width: 180px" @change="onValueChange">
|
style="width: 180px" @change="onValueChange">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
至
|
至
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
|
||||||
style="width: 180px" @change="onValueChange">
|
style="width: 180px" @change="onValueChange">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
|
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
|
||||||
@ -115,7 +115,7 @@ import moment from 'moment'
|
|||||||
import ButtonNav from '@/components/ButtonNav'
|
import ButtonNav from '@/components/ButtonNav'
|
||||||
import basicPage from '@/mixins/basic-page'
|
import basicPage from '@/mixins/basic-page'
|
||||||
import AddOrUpdate from './add-or-updata'
|
import AddOrUpdate from './add-or-updata'
|
||||||
import { factoryList, factoryArray } from "@/utils/constants";
|
import { factoryList, factoryArray, factoryListabbr } from "@/utils/constants";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { lineChart, ButtonNav, AddOrUpdate },
|
components: { lineChart, ButtonNav, AddOrUpdate },
|
||||||
@ -124,7 +124,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
factoryList,
|
factoryList,
|
||||||
factoryArray,
|
factoryArray,
|
||||||
// factoryArray1,
|
factoryListabbr,
|
||||||
listQuery: {
|
listQuery: {
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
@ -253,7 +253,7 @@ export default {
|
|||||||
// },
|
// },
|
||||||
created() {
|
created() {
|
||||||
const today = new Date()
|
const today = new Date()
|
||||||
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
|
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
|
||||||
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
|
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
|
||||||
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
|
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
|
||||||
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
|
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
|
||||||
@ -385,115 +385,72 @@ export default {
|
|||||||
this.seriesList = []
|
this.seriesList = []
|
||||||
// x轴数据
|
// x轴数据
|
||||||
xAxisData = Object.keys(data)
|
xAxisData = Object.keys(data)
|
||||||
let arr = []
|
|
||||||
if (this.listQuery.factory.length === 0) {
|
|
||||||
arr = this.factoryArray
|
|
||||||
} else {
|
|
||||||
this.listQuery.factory.forEach((ele, index) => {
|
|
||||||
|
|
||||||
let i = this.factoryArray.findIndex((item) => item.id == ele)
|
// 构造series
|
||||||
if (i != -1) {
|
// 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
|
||||||
arr.push({
|
const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
|
||||||
id: this.factoryArray[i].id,
|
// 工厂名称 this.factoryListabbr
|
||||||
name: this.factoryArray[i].name
|
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
||||||
})
|
const seriesArray = []
|
||||||
}
|
typeArray.forEach((type, typeIndex) => {
|
||||||
})
|
factoryNameArray.forEach((fac, facIndex) => {
|
||||||
}
|
const series = {
|
||||||
|
|
||||||
// y轴数据
|
|
||||||
arr.forEach((fac,index) => {
|
|
||||||
console.log('fac',fac);
|
|
||||||
let i = 0
|
|
||||||
let position = fac.id == 1 ? [1, -16,] : [-8, -16,]
|
|
||||||
while ( i < 3) {
|
|
||||||
// 下标
|
|
||||||
const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
|
|
||||||
// let oneChart = {}
|
|
||||||
xAxisData.forEach((x, index) => {
|
|
||||||
if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
|
|
||||||
let series = {
|
|
||||||
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
|
|
||||||
type: 'bar',
|
|
||||||
stack: String(fac.id),
|
|
||||||
data: Array(xAxisData.length).fill(0),
|
data: Array(xAxisData.length).fill(0),
|
||||||
|
type: 'bar',
|
||||||
|
stack: String(fac),
|
||||||
barWidth: 16,
|
barWidth: 16,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: this.colorList[i]
|
color: this.colorList[type]
|
||||||
},
|
},
|
||||||
label: {
|
name: this.factoryListabbr[fac] + '-' + type
|
||||||
show: i === 2 ? true : false,
|
|
||||||
position: 'top',
|
|
||||||
// fontSize:10,
|
|
||||||
position: position,
|
|
||||||
formatter(params) {
|
|
||||||
return fac.name.substring(0, 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dataList.forEach(item => {
|
|
||||||
if (fac.id === item.factory && item.datestr === x) {
|
|
||||||
series.data[index] = item[index1]
|
|
||||||
}
|
}
|
||||||
|
seriesArray.push(series)
|
||||||
})
|
})
|
||||||
this.seriesList.push(series)
|
})
|
||||||
} else {
|
// 构造series的data
|
||||||
this.listQuery.glass.forEach(gl => {
|
const seriesDataArray = []
|
||||||
if (gl === i) {
|
Object.values(data).forEach((item) => {
|
||||||
let series = {
|
let seriesData = []
|
||||||
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
|
// item[0].datestr 为日期
|
||||||
type: 'bar',
|
typeArray.forEach(t => {
|
||||||
stack: String(fac.id),
|
const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
|
||||||
|
item.forEach(it => {
|
||||||
|
seriesData.push(it[zidr])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
seriesDataArray.push(seriesData)
|
||||||
|
})
|
||||||
|
for (let y = 0; y < seriesArray.length; y ++) {
|
||||||
|
const days = []
|
||||||
|
seriesDataArray.forEach(a => {
|
||||||
|
days.push(a[y])
|
||||||
|
})
|
||||||
|
// 赋值完成
|
||||||
|
seriesArray[y].data = days
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加工厂
|
||||||
|
const validSeriesArray = []
|
||||||
|
factoryNameArray.forEach(f => {
|
||||||
|
const s = {
|
||||||
|
name: '显示工厂',
|
||||||
data: Array(xAxisData.length).fill(0),
|
data: Array(xAxisData.length).fill(0),
|
||||||
|
type: 'bar',
|
||||||
|
stack: String(f),
|
||||||
barWidth: 16,
|
barWidth: 16,
|
||||||
itemStyle: {
|
|
||||||
color: this.colorList[i]
|
|
||||||
},
|
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top',
|
position: 'top',
|
||||||
position: position,
|
// position: f > 0 ? [2, -16] : [-10, -16],
|
||||||
formatter(params) {
|
formatter(params) {
|
||||||
if (params.value === 0) {
|
return factoryListabbr[f]
|
||||||
return ''
|
|
||||||
} else {
|
|
||||||
// return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
|
|
||||||
return fac.name.substring(0, 2)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
validSeriesArray.push(s)
|
||||||
dataList.forEach(item => {
|
|
||||||
if (fac.id === item.factory && item.datestr === x) {
|
|
||||||
series.data[index] = item[index1]
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
this.seriesList.push(series)
|
this.seriesList = [...seriesArray, ...validSeriesArray]
|
||||||
}
|
this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
|
||||||
})
|
|
||||||
}
|
|
||||||
// let series = {
|
|
||||||
// name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
|
|
||||||
// type: 'bar',
|
|
||||||
// stack: String(fac.id),
|
|
||||||
// data: Array(xAxisData.length).fill(0),
|
|
||||||
// barWidth: 16,
|
|
||||||
// itemStyle: {
|
|
||||||
// color: this.colorList[i]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// dataList.forEach(item => {
|
|
||||||
// if (fac.id === item.factory && item.datestr === x) {
|
|
||||||
// series.data[index] = item[index1]
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// this.seriesList.push(series)
|
|
||||||
})
|
|
||||||
i ++
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log('你好', this.seriesList)
|
|
||||||
this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr)
|
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2022-01-21 14:43:06
|
* @Date: 2022-01-21 14:43:06
|
||||||
* @LastEditors: zhp
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-07-04 09:37:49
|
* @LastEditTime: 2024-07-16 18:41:27
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -73,7 +73,7 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart(xAxis, seriesList,arr) {
|
initChart(xAxis, seriesList, facs) {
|
||||||
if (xAxis.length === 0) {
|
if (xAxis.length === 0) {
|
||||||
this.chart.clear()
|
this.chart.clear()
|
||||||
}
|
}
|
||||||
@ -93,9 +93,9 @@ export default {
|
|||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
itemGap: 40,
|
itemGap: 40,
|
||||||
formatter(name) {
|
formatter(name) {
|
||||||
return name.split('-')[0]
|
return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]]
|
||||||
},
|
},
|
||||||
data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
|
data: ['瑞昌-0', '瑞昌-1', '瑞昌-2']
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -103,48 +103,41 @@ export default {
|
|||||||
type: 'shadow',
|
type: 'shadow',
|
||||||
color: "rgba(237,237,237,0.5)"
|
color: "rgba(237,237,237,0.5)"
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter(params) {
|
||||||
// console.log(params)
|
|
||||||
let str = ''
|
let str = ''
|
||||||
arr.forEach(ele => {
|
facs.forEach(ele => {
|
||||||
str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>`
|
str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
|
||||||
})
|
})
|
||||||
console.log(str);
|
|
||||||
let result = `
|
let result = `
|
||||||
<div style="width: 270px; display: flex">
|
<div style="width: 270px; display: flex">
|
||||||
<div style="width: 150px">${params[0].name}</div>
|
<div style="width: 150px">${params[0].name}</div>
|
||||||
${str}
|
${ str }
|
||||||
</div>`
|
</div>`
|
||||||
const newArray = params.map(p => {
|
const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => {
|
||||||
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
|
const obj = {
|
||||||
return {
|
glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // 玻璃类型
|
||||||
glass: p.seriesName.split('-')[0], // 玻璃类型
|
factoryName: item.seriesName.split('-')[0], // 工厂名称
|
||||||
factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称
|
value: item.value,
|
||||||
value: p.value,
|
name: item.name,
|
||||||
name: p.name,
|
marker: item.marker,
|
||||||
marker: p.marker,
|
color: item.color
|
||||||
color: p.color
|
|
||||||
}
|
}
|
||||||
|
return obj
|
||||||
})
|
})
|
||||||
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
|
const analyzeList = Object.groupBy(analyzeArray, (member) => member.glass)
|
||||||
for (let g in analyzeList) {
|
for (let g in analyzeList) {
|
||||||
// date => 玻璃类型
|
// date => 玻璃类型
|
||||||
let oneData = `<div style="width: 270px; display: flex">
|
let oneData = `<div style="width: 270px; display: flex">
|
||||||
<div style="width: 150px; display: flex; align-items: center">
|
<div style="width: 150px; display: flex; align-items: center">
|
||||||
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
|
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
|
||||||
<div>${g}</div></div>`
|
<div>${g}</div></div>`
|
||||||
for (let fac of arr) {
|
|
||||||
let goodNum = 0
|
let goodNum = 0
|
||||||
for (let ana of analyzeList[g]) {
|
for (let ana of analyzeList[g]) {
|
||||||
if (ana.factoryName === fac && ana.value !== 0) {
|
|
||||||
goodNum = ana.value
|
goodNum = ana.value
|
||||||
}
|
|
||||||
}
|
|
||||||
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
|
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
|
||||||
}
|
}
|
||||||
result = result + oneData + '</div>'
|
result = result + oneData + '</div>'
|
||||||
}
|
}
|
||||||
// console.log('result', result);
|
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user