From 16e7f9898c596f41ebcfbdf59a3ccc5ad40d9359 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Tue, 12 Nov 2024 11:03:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cs/index3.vue | 288 +++++++++++++++++++++++++++++++--------- 1 file changed, 227 insertions(+), 61 deletions(-) diff --git a/src/views/cs/index3.vue b/src/views/cs/index3.vue index bcb7048..4e0e56b 100644 --- a/src/views/cs/index3.vue +++ b/src/views/cs/index3.vue @@ -2,24 +2,24 @@
白坯车间数字应用大屏
烘房状态
- +
烘房耗电量
烘房白坯质量统计
近7天产量
- +
计划达成率
- - - - - - - - - - - - + + + + + + + + + + + +
计划生产数量：
实际生产数量：
车
@@ -77,7 +77,7 @@
- {{ (parseFloat(item.expend/item.yield)||0).toFixed(2) }}KWh + {{ (parseFloat(item.expend / item.yield) || 0).toFixed(2) }}KWh
@@ -137,7 +137,7 @@ export default { methods: { getData() { dryRoomDataCarousel().then(e => { - this.table1Data = e.data.dryingroomList.filter(v=>parseFloat(v.expend/v.yield)) || [] + this.table1Data = e.data.dryingroomList.filter(v => parseFloat(v.expend / v.yield)) || [] }) EnergyExpend().then(e => { this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2) @@ -165,7 +165,7 @@ export default { } }, xAxis: { - data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0])+"#"), + data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0]) + "#"), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { @@ -176,7 +176,7 @@ export default { show: true //隐藏X轴刻度 }, axisLabel: { - interval:0, + interval: 0, show: true, textStyle: { color: '#fff' //X轴文字颜色 @@ -241,8 +241,7 @@ export default { this.$refs.chart3.setData(option2) }) agvdata().then(e => { - console.log(e) - this.agvData = e.Data.filter(v=>v.State===2) + this.agvData = e.Data.filter(v => v.State === 2) }) PlanAchievementRate().then(e => { this.proData = e.data @@ -279,57 +278,144 @@ export default { createTimeStart: createTimeStart, createTimeEnd: createTimeEnd, chartType: 'cp' - }).then(e => { + }).then(vv => { + let e = vv.checkList + console.log(e) + let option = { + grid: { + top: '15%', + bottom: '10%', + left: '6%', + right: '6%' + }, tooltip: { trigger: 'axis', axisPointer: { - // Use axis to trigger tooltip - type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' + type: 'shadow', + label: { + show: true + } } }, legend: { + right: 0, textStyle: { color: '#eee' } }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, xAxis: { - type: 'value' - }, - yAxis: { - type: 'category', - axisLabel: { - color: '#ccc' + data: e.map(v => v.machineName), + axisLine: { + show: true, //隐藏X轴轴线 + lineStyle: { + color: '#fff' + } + }, + axisTick: { + show: true //隐藏X轴刻度 }, - data: e.checkList.map(v => v.machineName), - // data: e.checkList.map((v,k) => '产品'+k), + axisLabel: { + interval:0, + show: true, + textStyle: { + color: '#fff' //X轴文字颜色 + } + } }, + yAxis: [ + { + type: 'value', + name: '合格数', + nameTextStyle: { + color: '#fff' + }, + splitLine: { + show: false + }, + axisTick: { + show: true + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff' + } + } + }, + { + type: 'value', + name: '合格率', + nameTextStyle: { + color: '#fff' + }, + splitLine: { + show: false + }, + axisTick: { + show: true + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff' + } + } + } + ], series: [ { - name: '合格数量', - type: 'bar', - stack: 'total', label: { show: true, - position: 'insideRight', - formatter: "{c}车", - color: "#000" + position: 'top', + formatter: "{c}%", + color: "#fff" }, - emphasis: { - focus: 'series' + name: '合格率', + type: 'line', + yAxisIndex: 1, + smooth: true, //平滑曲线显示 + showAllSymbol: true, //显示所有图形。 + symbol: "emptyCircle", //标记的图形为实心圆 + symbolSize: 5, //标记的大小 + // itemStyle: { + // //折线拐点标志的样式 + // color: "#058cff", + // }, + // lineStyle: { + // color: "#058cff", + // }, + // areaStyle: { + // color: "rgba(5,140,255, 0.2)", + // }, + data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)), + }, + { + label: { + show: true, + position: 'top', + formatter: "{c}", + color: "#fff" }, + itemStyle: { color: { type: 'linear', x: 0, - y: 0, - x2: 1, + y: 1, + x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#1e60f2' // 0% 处的颜色 @@ -339,23 +425,102 @@ export default { global: false // 缺省为 false } }, - data: e.checkList.map(v => parseFloat(v.quality)) - }, - { - name: '不合格数量', + name: '合格数', type: 'bar', - stack: 'total', - label: { - show: true, - position: 'right' - }, - emphasis: { - focus: 'series' - }, - data: e.checkList.map(v => 0) + smooth: true, //平滑曲线显示 + showAllSymbol: true, //显示所有图形。 + symbol: "emptyCircle", //标记的图形为实心圆 + symbolSize: 5, //标记的大小 + // itemStyle: { + // //折线拐点标志的样式 + // color: "#058cff", + // }, + // lineStyle: { + // color: "#058cff", + // }, + // areaStyle: { + // color: "rgba(5,140,255, 0.2)", + // }, + data: e.map(v => parseFloat(v.quality)), }, ] }; + // let option = { + // tooltip: { + // trigger: 'axis', + // axisPointer: { + // // Use axis to trigger tooltip + // type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' + // } + // }, + // legend: { + // textStyle: { + // color: '#eee' + // } + // }, + // grid: { + // left: '3%', + // right: '4%', + // bottom: '3%', + // containLabel: true + // }, + // xAxis: { + // type: 'value' + // }, + // yAxis: { + // type: 'category', + // axisLabel: { + // color: '#ccc' + // }, + // data: e.checkList.map(v => v.machineName), + // // data: e.checkList.map((v,k) => '产品'+k), + // }, + // series: [ + // { + // name: '合格数量', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // position: 'insideRight', + // formatter: "{c}车", + // color: "#000" + // }, + // emphasis: { + // focus: 'series' + // }, + // itemStyle: { + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 1, + // y2: 0, + // colorStops: [{ + // offset: 0, color: '#1e60f2' // 0% 处的颜色 + // }, { + // offset: 1, color: '#00b9ff' // 100% 处的颜色 + // }], + // global: false // 缺省为 false + // } + // }, + // data: e.checkList.map(v => parseFloat(v.quality)) + // }, + // { + // name: '不合格数量', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // position: 'right' + // }, + // emphasis: { + // focus: 'series' + // }, + // data: e.checkList.map(v => 0) + // }, + // ] + // }; this.$refs.chart1.setData(option) }) @@ -593,6 +758,7 @@ export default { left: 31.3%; } + .chart3 { position: absolute; width: 37.4%; @@ -601,7 +767,7 @@ export default { left: 31.3%; } - .case-item { +.case-item { border: 2px solid #0c61ad; border-radius: 2px; margin: 8px 0 0 0;