Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-init/pulls/83pull/99/head
@@ -1,4 +1,4 @@ | |||
export default ({ | |||
export default ({ | |||
titleValue, | |||
subtitle, | |||
previousSum, | |||
@@ -15,7 +15,12 @@ export default ({ | |||
top: 0, | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
tooltip: { | |||
trigger: "item", | |||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | |||
backgroundColor: '#001829', | |||
borderColor: '#001829', | |||
}, | |||
title: { | |||
text: titleValue, | |||
left: "48%", | |||
@@ -62,7 +67,8 @@ export default ({ | |||
value: currentSum, | |||
name: currentName, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` | |||
}, | |||
selected: false, | |||
itemStyle: { | |||
@@ -87,7 +93,8 @@ export default ({ | |||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | |||
name: currentName, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
@@ -111,7 +118,8 @@ export default ({ | |||
value: previousSum, | |||
name: preName, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` | |||
}, | |||
selected: false, | |||
itemStyle: { | |||
@@ -136,7 +144,8 @@ export default ({ | |||
value:previousSum === 0 ? 1 : 0, | |||
name: preName, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
@@ -14,7 +14,12 @@ export default ({ | |||
top: 0, | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
tooltip: { | |||
trigger: "item", | |||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | |||
backgroundColor: '#001829', | |||
borderColor: '#001829', | |||
}, | |||
title: { | |||
text: titleValue, | |||
left: "48.5%", | |||
@@ -62,7 +67,8 @@ export default ({ | |||
name: currentName, | |||
selected: false, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
@@ -86,7 +92,8 @@ export default ({ | |||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | |||
name: currentName, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
@@ -111,7 +118,8 @@ export default ({ | |||
name: preName, | |||
selected: false, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
@@ -136,7 +144,8 @@ export default ({ | |||
value:previousSum === 0 ? 1 : 0, | |||
name: preName, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-04-28 13:42:51 | |||
* @LastEditTime: 2024-07-03 15:56:48 | |||
* @LastEditTime: 2024-07-04 08:38:11 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -64,20 +64,20 @@ export default { | |||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | |||
backgroundColor: '#001829', | |||
borderColor: '#001829', | |||
formatter: params => { | |||
console.log('params', params) | |||
var res = ``; | |||
for (var i = 0, l = params.length; i < l; i++) { | |||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | |||
// console.log(item.color, color); | |||
res += | |||
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | |||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + | |||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | |||
} | |||
console.log('res',res) | |||
return res; | |||
}, | |||
// formatter: params => { | |||
// console.log('params', params) | |||
// var res = ``; | |||
// for (var i = 0, l = params.length; i < l; i++) { | |||
// let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | |||
// // console.log(item.color, color); | |||
// res += | |||
// // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | |||
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + | |||
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | |||
// } | |||
// console.log('res',res) | |||
// return res; | |||
// }, | |||
}, | |||
title: { | |||
text: "0%", | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-04-15 10:49:13 | |||
* @LastEditTime: 2024-07-02 16:33:59 | |||
* @LastEditors: DY | |||
* @LastEditTime: 2024-07-04 09:28:31 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -115,7 +115,7 @@ import moment from 'moment' | |||
import ButtonNav from '@/components/ButtonNav' | |||
import basicPage from '@/mixins/basic-page' | |||
import AddOrUpdate from './add-or-updata' | |||
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants"; | |||
import { factoryList, factoryArray } from "@/utils/constants"; | |||
export default { | |||
components: { lineChart, ButtonNav, AddOrUpdate }, | |||
@@ -124,7 +124,7 @@ export default { | |||
return { | |||
factoryList, | |||
factoryArray, | |||
factoryArray1, | |||
// factoryArray1, | |||
listQuery: { | |||
pageSize: 20, | |||
pageNo: 1, | |||
@@ -381,9 +381,24 @@ export default { | |||
this.seriesList = [] | |||
// x轴数据 | |||
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) | |||
if (i != -1) { | |||
arr.push({ | |||
id: this.factoryArray[i].id, | |||
name: this.factoryArray[i].name | |||
}) | |||
} | |||
}) | |||
} | |||
// y轴数据 | |||
this.factoryArray.forEach(fac => { | |||
arr.forEach(fac => { | |||
let i = 0 | |||
while ( i < 3) { | |||
// 下标 | |||
@@ -469,7 +484,7 @@ export default { | |||
} | |||
}) | |||
console.log('你好', this.seriesList) | |||
this.$refs.lineChart.initChart(xAxisData, this.seriesList) | |||
this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr) | |||
}, | |||
buttonClick(val) { | |||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
* @Author: zwq | |||
* @Date: 2022-01-21 14:43:06 | |||
* @LastEditors: DY | |||
* @LastEditTime: 2024-07-01 16:54:41 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-07-04 09:37:49 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -73,7 +73,7 @@ export default { | |||
this.chart = null | |||
}, | |||
methods: { | |||
initChart(xAxis, seriesList) { | |||
initChart(xAxis, seriesList,arr) { | |||
if (xAxis.length === 0) { | |||
this.chart.clear() | |||
} | |||
@@ -103,18 +103,23 @@ export default { | |||
type: 'shadow', | |||
color: "rgba(237,237,237,0.5)" | |||
}, | |||
formatter: function(params) { | |||
formatter: function (params) { | |||
// console.log(params) | |||
let str = '' | |||
arr.forEach(ele => { | |||
str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>` | |||
}) | |||
console.log(str); | |||
let result = ` | |||
<div style="width: 270px; display: flex"> | |||
<div style="width: 150px">${params[0].name}</div> | |||
<div style="width: 60px; text-align: right">${factoryListabbr[0]}</div> | |||
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div> | |||
${str} | |||
</div>` | |||
const newArray = params.map(p => { | |||
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0]) | |||
return { | |||
glass: p.seriesName.split('-')[0], // 玻璃类型 | |||
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 | |||
factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称 | |||
value: p.value, | |||
name: p.name, | |||
marker: p.marker, | |||
@@ -128,7 +133,7 @@ export default { | |||
<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>${g}</div></div>` | |||
for (let fac of factoryListabbr) { | |||
for (let fac of arr) { | |||
let goodNum = 0 | |||
for (let ana of analyzeList[g]) { | |||
if (ana.factoryName === fac && ana.value !== 0) { | |||
@@ -139,6 +144,7 @@ export default { | |||
} | |||
result = result + oneData + '</div>' | |||
} | |||
// console.log('result', result); | |||
return result | |||
} | |||
}, | |||