Compare commits

...

7 Commits

9 changed files with 382 additions and 351 deletions

View File

@ -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-11 09:55:04 * @LastEditTime: 2024-04-16 13:44:14
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -635,6 +635,7 @@ 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 = []
@ -662,6 +663,7 @@ export default {
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
}) })
} }
}
}; };
// if (typeof (WebSocket) === 'undefined') { // if (typeof (WebSocket) === 'undefined') {
// alert('WebSocket') // alert('WebSocket')

View File

@ -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-15 09:28:21 * @LastEditTime: 2024-04-16 13:43:05
* @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: 16 fontSize: 18
} }
} }
}, },

View File

@ -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-09 15:24:39 * @LastEditTime: 2024-04-16 13:39:25
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -156,6 +156,8 @@ 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'
@ -318,8 +320,16 @@ 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>

View File

@ -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-09 15:24:28 * @LastEditTime: 2024-04-16 13:37:38
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -162,6 +162,8 @@ 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'
@ -327,4 +329,13 @@ 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>

View File

@ -128,6 +128,8 @@ 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'
@ -226,4 +228,13 @@ 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>

View File

@ -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-03 18:12:18 * @LastEditTime: 2024-04-16 13:16:34
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -101,6 +101,9 @@ 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) {
return
} else {
let rawData = [] let rawData = []
let colors = ['#0fdedb', '#2359ec'] let colors = ['#0fdedb', '#2359ec']
rawData.push(passRateList, wasteList) rawData.push(passRateList, wasteList)
@ -136,7 +139,7 @@ export default {
// 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)
) : [] ) : []
@ -176,11 +179,11 @@ export default {
icon: 'roundRect', icon: 'roundRect',
textStyle: { textStyle: {
color: 'rgba(255,255,255,.9)', color: 'rgba(255,255,255,.9)',
fontSize:12, fontSize: 12,
} }
}, },
grid: { grid: {
top:'0', top: '0',
left: '3%', left: '3%',
right: '4%', right: '4%',
// bottom: '3%', // bottom: '3%',
@ -250,13 +253,15 @@ export default {
// max: 120, // max: 120,
show: false, show: false,
}, },
series:series series: series
}) })
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.resize() this.resize()
},1000); }, 1000);
}) })
}
// this.chart.resize({ // this.chart.resize({
// width: 'auto', // width: 'auto',
// height: 90 // height: 90

View File

@ -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-10 16:10:11 * @LastEditTime: 2024-04-16 13:42:27
* @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 == '' ? '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.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.eqConfig.data = eqArr;
// this.$nextTick(() => { // this.$nextTick(() => {
@ -790,7 +790,23 @@ export default {
outputNumList 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);
// })
} }
}; };
}, },

View File

@ -2,40 +2,39 @@
<div <div
id="analysischartLine" id="analysischartLine"
style="width: 100%" style="width: 100%"
:style="{ height: chartHeight + 'px' }" :style="{ height: chartHeight + 'px' }"></div>
></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() {
@ -44,95 +43,89 @@ export default {
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,
position: 'top'
}
}, },
{ {
name: '上期', name: '上期',
type: 'bar', type: 'bar',
data: [], data: [],
barWidth: 20, barWidth: 20,
label: { },
show: true, ];
position: 'top'
}
}
]
for (let j = 0; j < arr.length; j++) { for (let j = 0; j < arr.length; j++) {
for (let k = 0; k < keys.length; k++) { for (let k = 0; k < keys.length; k++) {
if (keys[k].indexOf(arr[j]+'_上期') > -1) { if (keys[k].indexOf(arr[j] + '_上期') > -1) {
yData[1].data.push(this.chartData[0][keys[k]]) yData[1].data.push(this.chartData[0][keys[k]]);
} }
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) { if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
yData[0].data.push(this.chartData[0][keys[k]]) yData[0].data.push(this.chartData[0][keys[k]]);
} }
} }
} }
var option = { var option = {
color:['#288AFF','#8EF0AB'], color: ['#288AFF', '#8EF0AB'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
}, },
formatter: function(params) { formatter: function (params) {
return ( return (
params[0].axisValue + params[0].axisValue +
`<br>` + `<br>` +
params.map((item) => { params
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>` .map((item) => {
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>` 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 value = item.value ? item.value : '-' let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</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"> 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>

View File

@ -74,29 +74,12 @@ export default {
}, },
// excel // excel
exportExl(params) { exportExl(params) {
exportTrend({ ...params }).then((res) => { exportTrend({ ...params })
// let fileName = ''; .then((response) => {
// const contentDisposition = res.headers['content-disposition']; this.$download.excel(response, '走势分析.xls');
// 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(() => {});
}, },
}, },
}; };