From f3043ee11f4688fc04c76bcad743f689c3ac0e37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Tue, 16 Apr 2024 13:45:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/OperationalOverview/coldBoard.vue | 56 ++-- .../components/ISRAChart.vue | 36 +-- .../components/coldDoubleYChart.vue | 14 +- .../components/doubleYChart .vue | 13 +- .../components/linearBarChart.vue | 11 + .../components/pileBarChart.vue | 295 +++++++++--------- .../OperationalOverview/processingBoard.vue | 24 +- 7 files changed, 252 insertions(+), 197 deletions(-) diff --git a/src/views/OperationalOverview/coldBoard.vue b/src/views/OperationalOverview/coldBoard.vue index 5025e36f..b9fbc41f 100644 --- a/src/views/OperationalOverview/coldBoard.vue +++ b/src/views/OperationalOverview/coldBoard.vue @@ -1,7 +1,7 @@ @@ -635,32 +635,34 @@ 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') { - let nameList = [] - let nameWasteList = [] - let topNameList = [] - let productList = [] - let wasteList = [] - let sumAreaList = [] - let yieldList = [] - this.coldDetData = this.cutWsData.coldDetData - // this.cutTableDataList = - this.cutWsData.coldDetData.forEach((ele, index) => { - nameList.push(ele.lineName) - topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡') - productList.push(ele.productArea) - wasteList.push(ele.wastArea) - nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡') - sumAreaList.push(ele.sumArea) - yieldList.push(parseFloat((ele.yield * 100).toFixed(0))) - }) - this.$nextTick(() => { - 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.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.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]]) - this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) - }) + if (this.cutWsData.coldDetData.length !== 0) { + let nameList = [] + let nameWasteList = [] + let topNameList = [] + let productList = [] + let wasteList = [] + let sumAreaList = [] + let yieldList = [] + this.coldDetData = this.cutWsData.coldDetData + // this.cutTableDataList = + this.cutWsData.coldDetData.forEach((ele, index) => { + nameList.push(ele.lineName) + topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡') + productList.push(ele.productArea) + wasteList.push(ele.wastArea) + nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡') + sumAreaList.push(ele.sumArea) + yieldList.push(parseFloat((ele.yield * 100).toFixed(0))) + }) + this.$nextTick(() => { + 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.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.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]]) + this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) + }) + } } }; // if (typeof (WebSocket) === 'undefined') { diff --git a/src/views/OperationalOverview/components/ISRAChart.vue b/src/views/OperationalOverview/components/ISRAChart.vue index 13c780bb..b38edf38 100644 --- a/src/views/OperationalOverview/components/ISRAChart.vue +++ b/src/views/OperationalOverview/components/ISRAChart.vue @@ -1,7 +1,7 @@ @@ -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 } } }, diff --git a/src/views/OperationalOverview/components/coldDoubleYChart.vue b/src/views/OperationalOverview/components/coldDoubleYChart.vue index 57c58dec..ba946fd7 100644 --- a/src/views/OperationalOverview/components/coldDoubleYChart.vue +++ b/src/views/OperationalOverview/components/coldDoubleYChart.vue @@ -2,7 +2,7 @@ @@ -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 { } diff --git a/src/views/OperationalOverview/components/doubleYChart .vue b/src/views/OperationalOverview/components/doubleYChart .vue index 07c646a1..b8febfad 100644 --- a/src/views/OperationalOverview/components/doubleYChart .vue +++ b/src/views/OperationalOverview/components/doubleYChart .vue @@ -1,7 +1,7 @@ @@ -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; + } diff --git a/src/views/OperationalOverview/components/linearBarChart.vue b/src/views/OperationalOverview/components/linearBarChart.vue index 91e03307..bd3cdeb7 100644 --- a/src/views/OperationalOverview/components/linearBarChart.vue +++ b/src/views/OperationalOverview/components/linearBarChart.vue @@ -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; +} diff --git a/src/views/OperationalOverview/components/pileBarChart.vue b/src/views/OperationalOverview/components/pileBarChart.vue index eb5a2066..80da4bb5 100644 --- a/src/views/OperationalOverview/components/pileBarChart.vue +++ b/src/views/OperationalOverview/components/pileBarChart.vue @@ -1,7 +1,7 @@ @@ -101,11 +101,14 @@ export default { });; }, initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) { - let rawData = [] - let colors = ['#0fdedb', '#2359ec'] + if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) { + return + } else { + let rawData = [] + let colors = ['#0fdedb', '#2359ec'] rawData.push(passRateList, wasteList) - const totalData = []; - // if (rawData.length != 0 && raw,Data,length != 0) { + const totalData = []; + // if (rawData.length != 0 && raw,Data,length != 0) { for (let i = 0; i < rawData[0].length; ++i) { let sum = 0; for (let j = 0; j < rawData.length; ++j) { @@ -113,150 +116,152 @@ export default { } totalData.push(sum); } - // } - // rawData[1].map((d, did) => - // console.log((d / totalData[did]).toFixed(3)) - // // totalData[did] <= 0 ? 0 : d / totalData[did] - // ) - console.log('total', totalData) - const series = [ - '良品', - '废品', - // 'Affiliate Ad', - // 'Video Ad', - // 'Search Engine' - ].map((name, sid) => { - // console.log(sid) - return { - name, - type: 'bar', - stack: 'total', - barWidth: 12, - // label: { - // show: true, - // formatter: (params) => Math.round(params.value * 1000) / 10 + '%' - // }, - color:colors[sid], - data: rawData.length != 0 ? rawData[sid].map((d, did) => - totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4) - ) : [] - }; - }); - // this.charts.resize({ - // //width: width, - // //height: height, - // // es6解构 - // width, - // height - // }) - this.chart = echarts.init(document.getElementById(this.id)) - let isFinished = false //标记 isFinished - this.chart.on('finished', _ => { - if (!isFinished) { - console.log('我只执行一次') - isFinished = true - // this.isLoading = false //关闭loading - 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, + // } + // rawData[1].map((d, did) => + // console.log((d / totalData[did]).toFixed(3)) + // // totalData[did] <= 0 ? 0 : d / totalData[did] + // ) + console.log('total', totalData) + const series = [ + '良品', + '废品', + // 'Affiliate Ad', + // 'Video Ad', + // 'Search Engine' + ].map((name, sid) => { + // console.log(sid) + return { + name, + type: 'bar', + stack: 'total', + barWidth: 12, + // label: { + // show: true, + // formatter: (params) => Math.round(params.value * 1000) / 10 + '%' + // }, + color: colors[sid], + data: rawData.length != 0 ? rawData[sid].map((d, did) => + totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4) + ) : [] + }; + }); + // this.charts.resize({ + // //width: width, + // //height: height, + // // es6解构 + // width, + // height + // }) + this.chart = echarts.init(document.getElementById(this.id)) + let isFinished = false //标记 isFinished + this.chart.on('finished', _ => { + if (!isFinished) { + console.log('我只执行一次') + isFinished = true + // this.isLoading = false //关闭loading + this.chart.resize() //重新渲染charts大小 } - }, - grid: { - top:'0', - left: '3%', - right: '4%', - // bottom: '3%', - width: 'auto', - height: '95', - containLabel: true - }, - yAxis: [ - { - type: 'category', - inverse: true, - splitLine: { - show: false + 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)) + '%' }, - 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 + itemWidth: 12, + itemHeight: 12, + bottom: '20', + left: '20', + icon: 'roundRect', + textStyle: { + color: 'rgba(255,255,255,.9)', + fontSize: 12, + } }, - { - type: 'category', - inverse: true, - splitLine: { - show: false + 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 }, - 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); - }) + { + 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: 'right', + padding: [0, 0, 10, -5] + } + }, + data: nameWasteList + } + ], + xAxis: { + // max: 120, + show: false, + }, + series: series + }) + this.$nextTick(() => { + setTimeout(() => { + this.resize() + }, 1000); + }) + } + // this.chart.resize({ // width: 'auto', // height: 90 diff --git a/src/views/OperationalOverview/processingBoard.vue b/src/views/OperationalOverview/processingBoard.vue index 979d0686..468a512c 100644 --- a/src/views/OperationalOverview/processingBoard.vue +++ b/src/views/OperationalOverview/processingBoard.vue @@ -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: -->