Compare commits
7 Commits
bfa17e422d
...
bd0f9e24fd
Author | SHA1 | Date | |
---|---|---|---|
|
bd0f9e24fd | ||
|
f3043ee11f | ||
5584a47575 | |||
b0078cb099 | |||
e5acd497b5 | |||
6b452dce36 | |||
aacf87f6d3 |
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 16:50:26
|
||||
* @LastEditTime: 2024-04-11 09:55:04
|
||||
* @LastEditTime: 2024-04-16 13:44:14
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -635,6 +635,7 @@ export default {
|
||||
// this.cutConfig.data = cutArr
|
||||
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||
if (this.cutWsData.coldDetData.length !== 0) {
|
||||
let nameList = []
|
||||
let nameWasteList = []
|
||||
let topNameList = []
|
||||
@ -662,6 +663,7 @@ export default {
|
||||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
// if (typeof (WebSocket) === 'undefined') {
|
||||
// alert('您的浏览器不支持WebSocket')
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 13:45:56
|
||||
* @LastEditTime: 2024-04-15 09:28:21
|
||||
* @LastEditTime: 2024-04-16 13:43:05
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -126,22 +126,22 @@ export default {
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
itemWidth: 12,
|
||||
itemHeight:12,
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||
name:item.name,
|
||||
itemStyle:{
|
||||
color: this.colors[index%4]
|
||||
}
|
||||
}))
|
||||
},
|
||||
// legend: {
|
||||
// bottom: '10%',
|
||||
// left: 'center',
|
||||
// itemWidth: 12,
|
||||
// itemHeight:12,
|
||||
// icon: 'roundRect',
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// },
|
||||
// data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||
// name:item.name,
|
||||
// itemStyle:{
|
||||
// color: this.colors[index%4]
|
||||
// }
|
||||
// }))
|
||||
// },
|
||||
series:[{
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
@ -168,7 +168,7 @@ export default {
|
||||
},
|
||||
textStyle: { // 提示文字的样式
|
||||
// color: '#595959',
|
||||
fontSize: 16
|
||||
fontSize: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -2,7 +2,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-04-09 15:24:39
|
||||
* @LastEditTime: 2024-04-16 13:39:25
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -156,6 +156,8 @@ export default {
|
||||
this.chart.setOption({
|
||||
// color: colors,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip",
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
@ -318,8 +320,16 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.coldProductChart{
|
||||
top: -10px;
|
||||
}
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-04-09 15:24:28
|
||||
* @LastEditTime: 2024-04-16 13:37:38
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -162,6 +162,8 @@ export default {
|
||||
this.chart.setOption({
|
||||
// color: colors,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip",
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
@ -327,4 +329,13 @@ export default {
|
||||
width: 100%;
|
||||
top: -30px;
|
||||
}
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -128,6 +128,8 @@ export default {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
@ -226,4 +228,13 @@ export default {
|
||||
width: 100%;
|
||||
top: -30px;
|
||||
}
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2024-04-03 18:12:18
|
||||
* @LastEditTime: 2024-04-16 13:16:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -101,6 +101,9 @@ export default {
|
||||
});;
|
||||
},
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
|
||||
return
|
||||
} else {
|
||||
let rawData = []
|
||||
let colors = ['#0fdedb', '#2359ec']
|
||||
rawData.push(passRateList, wasteList)
|
||||
@ -136,7 +139,7 @@ export default {
|
||||
// show: true,
|
||||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||
// },
|
||||
color:colors[sid],
|
||||
color: colors[sid],
|
||||
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
||||
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
||||
) : []
|
||||
@ -176,11 +179,11 @@ export default {
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
fontSize:12,
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top:'0',
|
||||
top: '0',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
// bottom: '3%',
|
||||
@ -250,13 +253,15 @@ export default {
|
||||
// max: 120,
|
||||
show: false,
|
||||
},
|
||||
series:series
|
||||
series: series
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.resize()
|
||||
},1000);
|
||||
}, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
// this.chart.resize({
|
||||
// width: 'auto',
|
||||
// height: 90
|
||||
|
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-04-10 16:10:11
|
||||
* @LastEditTime: 2024-04-16 13:42:27
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -747,8 +747,8 @@ export default {
|
||||
`<span style="color:rgba(255,255,255,0.5)">${
|
||||
item.code || ''
|
||||
}</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 == '是' ? '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>`,
|
||||
`<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>`,
|
||||
]);
|
||||
this.eqConfig.data = eqArr;
|
||||
// this.$nextTick(() => {
|
||||
@ -790,7 +790,23 @@ export default {
|
||||
outputNumList
|
||||
);
|
||||
})
|
||||
} else if (this.SJGInitWebSocket === 'inspection') {
|
||||
} else if (this.SJGWsData.type === '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);
|
||||
// })
|
||||
}
|
||||
};
|
||||
},
|
||||
|
@ -2,40 +2,39 @@
|
||||
<div
|
||||
id="analysischartLine"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
:style="{ height: chartHeight + 'px' }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
import * as echarts from 'echarts';
|
||||
import resize from '@/utils/chartMixins/resize';
|
||||
export default {
|
||||
name: "LineChart",
|
||||
name: 'LineChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(370)
|
||||
}
|
||||
chartHeight: this.tableHeight(370),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
this.getChart();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(370)
|
||||
})
|
||||
this.chartHeight = this.tableHeight(370);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
@ -44,95 +43,89 @@ export default {
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartLine')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
this.chartDom = document.getElementById('analysischartLine');
|
||||
this.chart = echarts.init(this.chartDom);
|
||||
if (this.chartData.length === 0) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
let arr = this.chartData[0].type // [水,电,煤]
|
||||
let keys = Object.keys(this.chartData[0])
|
||||
let arr = this.chartData[0].type; // [水,电,煤]
|
||||
let keys = Object.keys(this.chartData[0]);
|
||||
let yData = [
|
||||
{
|
||||
name: '本期',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '上期',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
];
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
for (let k = 0; k < keys.length; k++) {
|
||||
if (keys[k].indexOf(arr[j]+'_上期') > -1) {
|
||||
yData[1].data.push(this.chartData[0][keys[k]])
|
||||
if (keys[k].indexOf(arr[j] + '_上期') > -1) {
|
||||
yData[1].data.push(this.chartData[0][keys[k]]);
|
||||
}
|
||||
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
|
||||
yData[0].data.push(this.chartData[0][keys[k]])
|
||||
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
||||
yData[0].data.push(this.chartData[0][keys[k]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
color:['#288AFF','#8EF0AB'],
|
||||
color: ['#288AFF', '#8EF0AB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function(params) {
|
||||
formatter: function (params) {
|
||||
return (
|
||||
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>`
|
||||
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>${valueStr}</span>
|
||||
</span>`
|
||||
}).join(``)
|
||||
)
|
||||
}
|
||||
</span>`;
|
||||
})
|
||||
.join(``)
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right: '1%',
|
||||
icon: 'rect',
|
||||
itemHeight: 8,
|
||||
itemWidth: 8
|
||||
itemWidth: 8,
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
boundaryGap: [0, 0.01],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: arr
|
||||
data: arr,
|
||||
},
|
||||
series: yData
|
||||
}
|
||||
series: yData,
|
||||
};
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
@ -74,29 +74,12 @@ export default {
|
||||
},
|
||||
// 导出excel
|
||||
exportExl(params) {
|
||||
exportTrend({ ...params }).then((res) => {
|
||||
// let fileName = '';
|
||||
// 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);
|
||||
exportTrend({ ...params })
|
||||
.then((response) => {
|
||||
this.$download.excel(response, '走势分析.xls');
|
||||
this.$message.success('导出成功');
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user