Compare commits
No commits in common. "bd0f9e24fd3889c4f759c4aa85373c8592c62e43" and "bfa17e422d77e65381756ce2773544aec1e0eb09" have entirely different histories.
bd0f9e24fd
...
bfa17e422d
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 16:50:26
|
* @Date: 2024-01-29 16:50:26
|
||||||
* @LastEditTime: 2024-04-16 13:44:14
|
* @LastEditTime: 2024-04-11 09:55:04
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -635,34 +635,32 @@ export default {
|
|||||||
// this.cutConfig.data = cutArr
|
// this.cutConfig.data = cutArr
|
||||||
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||||
if (this.cutWsData.coldDetData.length !== 0) {
|
let nameList = []
|
||||||
let nameList = []
|
let nameWasteList = []
|
||||||
let nameWasteList = []
|
let topNameList = []
|
||||||
let topNameList = []
|
let productList = []
|
||||||
let productList = []
|
let wasteList = []
|
||||||
let wasteList = []
|
let sumAreaList = []
|
||||||
let sumAreaList = []
|
let yieldList = []
|
||||||
let yieldList = []
|
this.coldDetData = this.cutWsData.coldDetData
|
||||||
this.coldDetData = this.cutWsData.coldDetData
|
// this.cutTableDataList =
|
||||||
// this.cutTableDataList =
|
this.cutWsData.coldDetData.forEach((ele, index) => {
|
||||||
this.cutWsData.coldDetData.forEach((ele, index) => {
|
nameList.push(ele.lineName)
|
||||||
nameList.push(ele.lineName)
|
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
||||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡')
|
productList.push(ele.productArea)
|
||||||
productList.push(ele.productArea)
|
wasteList.push(ele.wastArea)
|
||||||
wasteList.push(ele.wastArea)
|
nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
|
||||||
nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
|
sumAreaList.push(ele.sumArea)
|
||||||
sumAreaList.push(ele.sumArea)
|
yieldList.push(parseFloat((ele.yield * 100).toFixed(0)))
|
||||||
yieldList.push(parseFloat((ele.yield * 100).toFixed(0)))
|
})
|
||||||
})
|
this.$nextTick(() => {
|
||||||
this.$nextTick(() => {
|
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
||||||
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
|
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
|
||||||
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
|
this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
|
||||||
this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
|
this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
|
||||||
this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
|
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
|
||||||
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
|
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
})
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// if (typeof (WebSocket) === 'undefined') {
|
// if (typeof (WebSocket) === 'undefined') {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 13:45:56
|
* @Date: 2024-01-29 13:45:56
|
||||||
* @LastEditTime: 2024-04-16 13:43:05
|
* @LastEditTime: 2024-04-15 09:28:21
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -126,22 +126,22 @@ export default {
|
|||||||
color: '#fff00',
|
color: '#fff00',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// legend: {
|
legend: {
|
||||||
// bottom: '10%',
|
bottom: '10%',
|
||||||
// left: 'center',
|
left: 'center',
|
||||||
// itemWidth: 12,
|
itemWidth: 12,
|
||||||
// itemHeight:12,
|
itemHeight:12,
|
||||||
// icon: 'roundRect',
|
icon: 'roundRect',
|
||||||
// textStyle: {
|
textStyle: {
|
||||||
// color: '#fff'
|
color: '#fff'
|
||||||
// },
|
},
|
||||||
// data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||||
// name:item.name,
|
name:item.name,
|
||||||
// itemStyle:{
|
itemStyle:{
|
||||||
// color: this.colors[index%4]
|
color: this.colors[index%4]
|
||||||
// }
|
}
|
||||||
// }))
|
}))
|
||||||
// },
|
},
|
||||||
series:[{
|
series:[{
|
||||||
name: 'ISRA缺陷检测',
|
name: 'ISRA缺陷检测',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -168,7 +168,7 @@ export default {
|
|||||||
},
|
},
|
||||||
textStyle: { // 提示文字的样式
|
textStyle: { // 提示文字的样式
|
||||||
// color: '#595959',
|
// color: '#595959',
|
||||||
fontSize: 18
|
fontSize: 16
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2024-04-16 13:39:25
|
* @LastEditTime: 2024-04-09 15:24:39
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -156,8 +156,6 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
// color: colors,
|
// color: colors,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
|
||||||
className: "isra-chart-tooltip",
|
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross'
|
type: 'cross'
|
||||||
@ -320,16 +318,8 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.coldProductChart{
|
.coldProductChart{
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
.isra-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.isra-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2024-04-16 13:37:38
|
* @LastEditTime: 2024-04-09 15:24:28
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -162,8 +162,6 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
// color: colors,
|
// color: colors,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
|
||||||
className: "isra-chart-tooltip",
|
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross'
|
type: 'cross'
|
||||||
@ -329,13 +327,4 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
.isra-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.isra-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -128,8 +128,6 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
trigger: 'item',
|
|
||||||
className: "isra-chart-tooltip",
|
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器，坐标轴触发有效
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
@ -228,13 +226,4 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
.isra-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.isra-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-27 13:54:52
|
* @Date: 2023-12-27 13:54:52
|
||||||
* @LastEditTime: 2024-04-16 13:16:34
|
* @LastEditTime: 2024-04-03 18:12:18
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -101,14 +101,11 @@ export default {
|
|||||||
});;
|
});;
|
||||||
},
|
},
|
||||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||||
if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
|
let rawData = []
|
||||||
return
|
let colors = ['#0fdedb', '#2359ec']
|
||||||
} else {
|
|
||||||
let rawData = []
|
|
||||||
let colors = ['#0fdedb', '#2359ec']
|
|
||||||
rawData.push(passRateList, wasteList)
|
rawData.push(passRateList, wasteList)
|
||||||
const totalData = [];
|
const totalData = [];
|
||||||
// if (rawData.length != 0 && raw,Data,length != 0) {
|
// if (rawData.length != 0 && raw,Data,length != 0) {
|
||||||
for (let i = 0; i < rawData[0].length; ++i) {
|
for (let i = 0; i < rawData[0].length; ++i) {
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
for (let j = 0; j < rawData.length; ++j) {
|
for (let j = 0; j < rawData.length; ++j) {
|
||||||
@ -116,152 +113,150 @@ export default {
|
|||||||
}
|
}
|
||||||
totalData.push(sum);
|
totalData.push(sum);
|
||||||
}
|
}
|
||||||
// }
|
// }
|
||||||
// rawData[1].map((d, did) =>
|
// rawData[1].map((d, did) =>
|
||||||
// console.log((d / totalData[did]).toFixed(3))
|
// console.log((d / totalData[did]).toFixed(3))
|
||||||
// // totalData[did] <= 0 ? 0 : d / totalData[did]
|
// // totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||||
// )
|
// )
|
||||||
console.log('total', totalData)
|
console.log('total', totalData)
|
||||||
const series = [
|
const series = [
|
||||||
'良品',
|
'良品',
|
||||||
'废品',
|
'废品',
|
||||||
// 'Affiliate Ad',
|
// 'Affiliate Ad',
|
||||||
// 'Video Ad',
|
// 'Video Ad',
|
||||||
// 'Search Engine'
|
// 'Search Engine'
|
||||||
].map((name, sid) => {
|
].map((name, sid) => {
|
||||||
// console.log(sid)
|
// console.log(sid)
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
stack: 'total',
|
stack: 'total',
|
||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
// label: {
|
// label: {
|
||||||
// show: true,
|
// show: true,
|
||||||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||||
// },
|
// },
|
||||||
color: colors[sid],
|
color:colors[sid],
|
||||||
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
||||||
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
||||||
) : []
|
) : []
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
// this.charts.resize({
|
// this.charts.resize({
|
||||||
// //width: width,
|
// //width: width,
|
||||||
// //height: height,
|
// //height: height,
|
||||||
// // es6解构
|
// // es6解构
|
||||||
// width,
|
// width,
|
||||||
// height
|
// height
|
||||||
// })
|
// })
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
let isFinished = false //标记 isFinished
|
let isFinished = false //标记 isFinished
|
||||||
this.chart.on('finished', _ => {
|
this.chart.on('finished', _ => {
|
||||||
if (!isFinished) {
|
if (!isFinished) {
|
||||||
console.log('我只执行一次')
|
console.log('我只执行一次')
|
||||||
isFinished = true
|
isFinished = true
|
||||||
// this.isLoading = false //关闭loading
|
// this.isLoading = false //关闭loading
|
||||||
this.chart.resize() //重新渲染charts大小
|
this.chart.resize() //重新渲染charts大小
|
||||||
|
}
|
||||||
|
console.log(113, 'finished')
|
||||||
|
})
|
||||||
|
this.chart.setOption({
|
||||||
|
legend: {
|
||||||
|
formatter: function (name) {
|
||||||
|
//通过name获取到数组对象中的单个对象
|
||||||
|
let singleData = series.filter(function (item) {
|
||||||
|
return item.name == name
|
||||||
|
})
|
||||||
|
return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
|
||||||
|
},
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
bottom: '20',
|
||||||
|
left: '20',
|
||||||
|
icon: 'roundRect',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,.9)',
|
||||||
|
fontSize:12,
|
||||||
}
|
}
|
||||||
console.log(113, 'finished')
|
},
|
||||||
})
|
grid: {
|
||||||
this.chart.setOption({
|
top:'0',
|
||||||
legend: {
|
left: '3%',
|
||||||
formatter: function (name) {
|
right: '4%',
|
||||||
//通过name获取到数组对象中的单个对象
|
// bottom: '3%',
|
||||||
let singleData = series.filter(function (item) {
|
width: 'auto',
|
||||||
return item.name == name
|
height: '95',
|
||||||
})
|
containLabel: true
|
||||||
return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
},
|
},
|
||||||
itemWidth: 12,
|
axisTick: {
|
||||||
itemHeight: 12,
|
show: false
|
||||||
bottom: '20',
|
|
||||||
left: '20',
|
|
||||||
icon: 'roundRect',
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,.9)',
|
|
||||||
fontSize: 12,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '0',
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
// bottom: '3%',
|
|
||||||
width: 'auto',
|
|
||||||
height: '95',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
inverse: true,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
inside: true,
|
|
||||||
interval: 0, //横轴信息全部显
|
|
||||||
splitNumber: 50,
|
|
||||||
// boundaryGap: [20, 20],
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,.9)',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 16,
|
|
||||||
align: 'left',
|
|
||||||
padding: [0, 0, 10, -5]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: topNameList
|
|
||||||
},
|
},
|
||||||
{
|
axisLine: {
|
||||||
type: 'category',
|
show: false
|
||||||
inverse: true,
|
},
|
||||||
splitLine: {
|
axisLabel: {
|
||||||
show: false
|
show: true,
|
||||||
},
|
inside: true,
|
||||||
axisTick: {
|
interval: 0, //横轴信息全部显
|
||||||
show: false
|
splitNumber: 50,
|
||||||
},
|
// boundaryGap: [20, 20],
|
||||||
axisLine: {
|
textStyle: {
|
||||||
show: false
|
color: 'rgba(255,255,255,.9)',
|
||||||
},
|
verticalAlign: 'bottom',
|
||||||
axisLabel: {
|
fontSize: 16,
|
||||||
show: true,
|
align: 'left',
|
||||||
inside: true,
|
padding: [0, 0, 10, -5]
|
||||||
interval: 0, //横轴信息全部显
|
}
|
||||||
splitNumber: 50,
|
},
|
||||||
// boundaryGap: [20, 20],
|
data: topNameList
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,.9)',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 16,
|
|
||||||
align: 'right',
|
|
||||||
padding: [0, 0, 10, -5]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: nameWasteList
|
|
||||||
}
|
|
||||||
],
|
|
||||||
xAxis: {
|
|
||||||
// max: 120,
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
series: series
|
{
|
||||||
})
|
type: 'category',
|
||||||
this.$nextTick(() => {
|
inverse: true,
|
||||||
setTimeout(() => {
|
splitLine: {
|
||||||
this.resize()
|
show: false
|
||||||
}, 1000);
|
},
|
||||||
})
|
axisTick: {
|
||||||
}
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
inside: true,
|
||||||
|
interval: 0, //横轴信息全部显
|
||||||
|
splitNumber: 50,
|
||||||
|
// boundaryGap: [20, 20],
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,.9)',
|
||||||
|
verticalAlign: 'bottom',
|
||||||
|
fontSize: 16,
|
||||||
|
align: 'right',
|
||||||
|
padding: [0, 0, 10, -5]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: nameWasteList
|
||||||
|
}
|
||||||
|
],
|
||||||
|
xAxis: {
|
||||||
|
// max: 120,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
series:series
|
||||||
|
})
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.resize()
|
||||||
|
},1000);
|
||||||
|
})
|
||||||
// this.chart.resize({
|
// this.chart.resize({
|
||||||
// width: 'auto',
|
// width: 'auto',
|
||||||
// height: 90
|
// height: 90
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-04-16 13:42:27
|
* @LastEditTime: 2024-04-10 16:10:11
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -747,8 +747,8 @@ export default {
|
|||||||
`<span style="color:rgba(255,255,255,0.5)">${
|
`<span style="color:rgba(255,255,255,0.5)">${
|
||||||
item.code || ''
|
item.code || ''
|
||||||
}</span>`,
|
}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.status || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.status || ''}</span>`,
|
||||||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == 'true' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:10px 10px 0 0 '}"></div> ${item.error || ''}</span>`,
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.error || ''}</span>`,
|
||||||
]);
|
]);
|
||||||
this.eqConfig.data = eqArr;
|
this.eqConfig.data = eqArr;
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
@ -790,23 +790,7 @@ export default {
|
|||||||
outputNumList
|
outputNumList
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
} else if (this.SJGWsData.type === 'inspection') {
|
} else if (this.SJGInitWebSocket === 'inspection') {
|
||||||
let processArr = this.SJGWsData.detData.map((item, index) => [
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
|
||||||
</span>`,
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
|
||||||
</span>`,
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''
|
|
||||||
}</span>`,
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''
|
|
||||||
}</span>`,
|
|
||||||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''
|
|
||||||
}</span>`,
|
|
||||||
]);
|
|
||||||
this.processConfig.data = processArr;
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
this.$refs['processScrollBoard'].updateRows(processArr);
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,131 +1,138 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
id="analysischartLine"
|
id="analysischartLine"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
:style="{ height: chartHeight + 'px' }"></div>
|
:style="{ height: chartHeight + 'px' }"
|
||||||
|
></div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts'
|
||||||
import resize from '@/utils/chartMixins/resize';
|
import resize from '@/utils/chartMixins/resize'
|
||||||
export default {
|
export default {
|
||||||
name: 'LineChart',
|
name: "LineChart",
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(370),
|
chartHeight: this.tableHeight(370)
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => {
|
default: () => {
|
||||||
return [];
|
return []
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
chartData: function () {
|
chartData: function () {
|
||||||
this.getChart();
|
this.getChart()
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.chartHeight = this.tableHeight(370);
|
this.chartHeight = this.tableHeight(370)
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getChart() {
|
getChart() {
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||||
}
|
}
|
||||||
this.chartDom = document.getElementById('analysischartLine');
|
this.chartDom = document.getElementById('analysischartLine')
|
||||||
this.chart = echarts.init(this.chartDom);
|
this.chart = echarts.init(this.chartDom)
|
||||||
if (this.chartData.length === 0) {
|
if (this.chartData.length === 0) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
let arr = this.chartData[0].type; // [水，电，煤]
|
let arr = this.chartData[0].type // [水，电，煤]
|
||||||
let keys = Object.keys(this.chartData[0]);
|
let keys = Object.keys(this.chartData[0])
|
||||||
let yData = [
|
let yData = [
|
||||||
{
|
{
|
||||||
name: '本期',
|
name: '本期',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: [],
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
},
|
label: {
|
||||||
{
|
show: true,
|
||||||
name: '上期',
|
position: 'top'
|
||||||
type: 'bar',
|
}
|
||||||
data: [],
|
},
|
||||||
barWidth: 20,
|
{
|
||||||
},
|
name: '上期',
|
||||||
];
|
type: 'bar',
|
||||||
for (let j = 0; j < arr.length; j++) {
|
data: [],
|
||||||
for (let k = 0; k < keys.length; k++) {
|
barWidth: 20,
|
||||||
if (keys[k].indexOf(arr[j] + '_上期') > -1) {
|
label: {
|
||||||
yData[1].data.push(this.chartData[0][keys[k]]);
|
show: true,
|
||||||
}
|
position: 'top'
|
||||||
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
}
|
||||||
yData[0].data.push(this.chartData[0][keys[k]]);
|
}
|
||||||
}
|
]
|
||||||
}
|
for (let j = 0; j < arr.length; j++) {
|
||||||
}
|
for (let k = 0; k < keys.length; k++) {
|
||||||
var option = {
|
if (keys[k].indexOf(arr[j]+'_上期') > -1) {
|
||||||
color: ['#288AFF', '#8EF0AB'],
|
yData[1].data.push(this.chartData[0][keys[k]])
|
||||||
tooltip: {
|
}
|
||||||
trigger: 'axis',
|
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
|
||||||
axisPointer: {
|
yData[0].data.push(this.chartData[0][keys[k]])
|
||||||
type: 'shadow',
|
}
|
||||||
},
|
}
|
||||||
formatter: function (params) {
|
}
|
||||||
return (
|
var option = {
|
||||||
params[0].axisValue +
|
color:['#288AFF','#8EF0AB'],
|
||||||
`<br>` +
|
tooltip: {
|
||||||
params
|
trigger: 'axis',
|
||||||
.map((item) => {
|
axisPointer: {
|
||||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
|
type: 'shadow'
|
||||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
|
},
|
||||||
let value = item.value ? item.value : '-';
|
formatter: function(params) {
|
||||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
|
return (
|
||||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
params[0].axisValue +
|
||||||
|
`<br>` +
|
||||||
|
params.map((item) => {
|
||||||
|
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
|
||||||
|
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
|
||||||
|
let value = item.value ? item.value : '-'
|
||||||
|
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
|
||||||
|
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||||
<span>${str}${seriesNameStr}</span>
|
<span>${str}${seriesNameStr}</span>
|
||||||
<span>${valueStr}</span>
|
<span>${valueStr}</span>
|
||||||
</span>`;
|
</span>`
|
||||||
})
|
}).join(``)
|
||||||
.join(``)
|
)
|
||||||
);
|
}
|
||||||
},
|
},
|
||||||
},
|
legend: {
|
||||||
legend: {
|
right: '1%',
|
||||||
right: '1%',
|
icon: 'rect',
|
||||||
icon: 'rect',
|
itemHeight: 8,
|
||||||
itemHeight: 8,
|
itemWidth: 8
|
||||||
itemWidth: 8,
|
},
|
||||||
},
|
grid: {
|
||||||
grid: {
|
left: '1%',
|
||||||
left: '1%',
|
right: '1%',
|
||||||
right: '1%',
|
bottom: '3%',
|
||||||
bottom: '3%',
|
containLabel: true
|
||||||
containLabel: true,
|
},
|
||||||
},
|
yAxis: {
|
||||||
yAxis: {
|
type: 'value',
|
||||||
type: 'value',
|
boundaryGap: [0, 0.01]
|
||||||
boundaryGap: [0, 0.01],
|
},
|
||||||
},
|
xAxis: {
|
||||||
xAxis: {
|
type: 'category',
|
||||||
type: 'category',
|
data: arr
|
||||||
data: arr,
|
},
|
||||||
},
|
series: yData
|
||||||
series: yData,
|
}
|
||||||
};
|
option && this.chart.setOption(option);
|
||||||
option && this.chart.setOption(option);
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
@ -74,12 +74,29 @@ export default {
|
|||||||
},
|
},
|
||||||
// 导出excel
|
// 导出excel
|
||||||
exportExl(params) {
|
exportExl(params) {
|
||||||
exportTrend({ ...params })
|
exportTrend({ ...params }).then((res) => {
|
||||||
.then((response) => {
|
// let fileName = '';
|
||||||
this.$download.excel(response, '走势分析.xls');
|
// const contentDisposition = res.headers['content-disposition'];
|
||||||
|
// if (contentDisposition) {
|
||||||
|
// fileName = decodeURIComponent(
|
||||||
|
// contentDisposition.slice(
|
||||||
|
// contentDisposition.indexOf('filename=') + 9
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
const blob = new Blob([res.data]);
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
reader.onload = (e) => {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.download = '走势分析';
|
||||||
|
a.href = e.target.result;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
this.$message.success('导出成功');
|
this.$message.success('导出成功');
|
||||||
})
|
};
|
||||||
.catch(() => {});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user