From d2f746bcee23d0f25d31a8b532926c7e4960c01a Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 十二月 2023 16:15:10 +0800
Subject: [PATCH] 车间正品率+物料需求统计的前端开发
---
src/views/cockpitPage/components/ChartTitle.vue | 2
src/components/cockpitPage/BackgroundBoardLayout.vue | 1
src/views/cockpitPage/components/BarChart.vue | 173 ++++++++++++++++++++----
src/views/cockpitPage/components/MaterialChart.vue | 200 ++++++++++++++++++++++++++++
src/views/cockpitPage/index.vue | 5
5 files changed, 349 insertions(+), 32 deletions(-)
diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue
index f049878..649790b 100644
--- a/src/components/cockpitPage/BackgroundBoardLayout.vue
+++ b/src/components/cockpitPage/BackgroundBoardLayout.vue
@@ -166,7 +166,6 @@
}
.right-middle-block {
height: 35%;
- background: #dd35a5;
}
.right-bottom-block {
height: 35%;
diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index cb22b0b..1d090ae 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -2,6 +2,14 @@
<div class="bar-chart">
<ChartTitle name="杞﹂棿姝ｅ搧鐜�"></ChartTitle>
<div class="bar-contents">
+ <div class="bar-total">
+ <div class="bar-item">
+ 褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }}
+ </div>
+ <div class="bar-item">
+ 姝ｅ搧鐜囷細{{ chartData.rate }}
+ </div>
+ </div>
<div class="chart" ref="chart"></div>
</div>
</div>
@@ -18,15 +26,17 @@
props: {},
data() {
return {
-
+ chartData:{
+ total:1000,
+ rate:'99%',
+ datax:['绗竴杞﹂棿', '绗簩杞﹂棿', '绗笁杞﹂棿', '绗洓杞﹂棿','绗簲杞﹂棿','绗叚杞﹂棿',],
+ datay:[120, 200, 150, 180, 170, 150, 130,180, 140],
+ datay2:[20, 30, 50, 40, 70, 50, 30,80,40],
+ }
};
},
mounted() {
- let chartData={
- datax:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- datay:[120, 200, 150, 80, 70, 110, 130]
- }
- this.pieChart('chart',chartData)
+ this.pieChart('chart',this.chartData)
},
watch: {},
methods: {
@@ -35,18 +45,50 @@
let chartDom = this.$refs[chartName]
let myChart = echarts.init(chartDom);
let option;
+ let lineColor='#35ddc74d'
if(data){
option = {
- color:['#618DF8'],
+ color:['#dcb018','#00FFFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
+ },
+ textStyle:{
+ color:'#00FFFF',
+ },
+ borderColor:'#00FFFF',
+ backgroundColor:'rbga(1,247,253,0.6)',
+ formatter:function(a){
+ let list=[]
+ let listItem=''
+ let firstString='<span style=width:70px;display:inline-block">'+
+ '鐢熶骇鎬绘暟'+
+ '</span> '+
+ data.total
+ list.push(firstString)
+ for(let i in a){
+ let str='<span style=width:70px;display:inline-block">'+
+ a[i].seriesName+
+ '</span> '+
+ a[i].value
+
+ list.push(str)
+ }
+ let lastString='<span style=width:70px;display:inline-block">'+
+ '姝ｅ搧鐜�'+
+ '</span> '+
+ data.rate
+ list.push(lastString)
+ listItem=list.join('<br>')
+ return '<div class="showBox">'+listItem+'</div>'
}
},
grid: {
- right: "11%",
- bottom:'21%',
+ right: "10px",
+ bottom:'60px',
+ left:'10px',
+ top:'10px',
},
dataZoom: [
{
@@ -72,15 +114,27 @@
},
],
legend: {
- itemWidth: 12,
- itemHeight: 12,
+ itemWidth: 8,
+ itemHeight: 8,
itemGap: 35,//闂磋窛
- // data:data.legend?[
- // {
- // name:data.legend.data[0],
- // icon: 'roundRect',
- // },
- // ]:[]
+ bottom:'5px',
+ left:'center',
+ data:[
+ {
+ name:'姝ｅ搧鏁伴噺',
+ icon:'circle',
+ textStyle:{
+ color:'#dcb018'
+ }
+ },
+ {
+ name:'娆″搧鏁伴噺',
+ icon:'circle',
+ textStyle:{
+ color:'#00FFFF'
+ }
+ },
+ ],
},
xAxis: [
{
@@ -91,15 +145,15 @@
axisLine: {
show: true,
lineStyle: {
- color:'#EAEAEA',
+ color:lineColor,
}
},
axisLabel:{
- rotate:45,
- margin: 12,
+ // rotate:45,
+ margin: 10,
show: true,
textStyle: {
- color: '#9B9B9B'
+ color: '#00FFFF'
},
},
data: data.datax?data.datax:[],
@@ -108,7 +162,7 @@
yAxis: [
{
type: '',
- name: 'yyy',
+ name: '',
// min: data.yAxis[0].min?data.yAxis.min:0,
minInterval: 1,//鍧愭爣杞存槸鏁存暟
max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
@@ -117,17 +171,51 @@
axisLine: {
show: true,
lineStyle: {
- color:'#EAEAEA',
+ color:lineColor,
}
},
nameTextStyle:{
- color:"#9B9B9B",
+ color:"#00FFFF",
},
splitLine: {
show: true,
lineStyle: {
// 浣跨敤娣辨祬鐨勯棿闅旇壊
- color: '#EAEAEA',
+ color: lineColor,
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#9B9B9B'
+ },
+ formatter: ''
+ }
+ },
+ {
+ type: '',
+ name: '',
+ // min: data.yAxis[0].min?data.yAxis.min:0,
+ minInterval: 1,//鍧愭爣杞存槸鏁存暟
+ max:Math.ceil(eval(`Math.max(${data.datay2})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
+ interval: Math.ceil(eval( `Math.max(${data.datay2})`)/5)*5 / 5,
+ position: 'right',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color:lineColor,
+ }
+ },
+ nameTextStyle:{
+ color:"#00FFFF",
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color:lineColor,
}
},
axisTick: {
@@ -143,8 +231,8 @@
],
series:[
{
- type: '',
- name: 'y',
+ type: 'bar',
+ name: '姝ｅ搧鏁伴噺',
barWidth: '20%',
itemStyle: {
normal: {
@@ -153,6 +241,18 @@
}
},
data: data.datay,
+ },
+ {
+ type: 'bar',
+ name: '娆″搧鏁伴噺',
+ barWidth: '20%',
+ itemStyle: {
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius:[4, 4, 0, 0],
+ }
+ },
+ data: data.datay2,
}
]
};
@@ -170,16 +270,29 @@
<style scoped lang="scss">
.bar-chart{
width:100%;
- height:calc(100% - 10px);
- padding:10px 0 0;
+ height:calc(100% - 20px);
+ padding:20px 0 0;
.bar-contents{
width:100%;
height:calc(100% - 60px);
border:1px solid #00FFFF;
box-sizing: border-box;
+ .bar-total{
+ width:100%;
+ height:30px;
+ line-height:30px;
+ color:#dcb018;
+ font-size:14px;
+ margin-top:10px;
+ .bar-item{
+ width:50%;
+ text-align:center;
+ float:left;
+ }
+ }
.chart{
width: 100%;
- height:100%;
+ height:calc(100% - 40px);
}
}
}
diff --git a/src/views/cockpitPage/components/ChartTitle.vue b/src/views/cockpitPage/components/ChartTitle.vue
index 02aed46..2709c63 100644
--- a/src/views/cockpitPage/components/ChartTitle.vue
+++ b/src/views/cockpitPage/components/ChartTitle.vue
@@ -32,7 +32,7 @@
width:100%;
height:40px;
margin-bottom:20px;
- font-size:18px;
+ font-size:16px;
color:#00FFFF;
position:relative;
.title-left-tip{
diff --git a/src/views/cockpitPage/components/MaterialChart.vue b/src/views/cockpitPage/components/MaterialChart.vue
new file mode 100644
index 0000000..3102763
--- /dev/null
+++ b/src/views/cockpitPage/components/MaterialChart.vue
@@ -0,0 +1,200 @@
+<template>
+ <div class="bar-chart">
+ <ChartTitle name="鐗╂枡闇�姹傜粺璁�"></ChartTitle>
+ <div class="bar-contents">
+ <div class="chart" ref="chart"></div>
+ </div>
+ </div>
+</template>
+
+<script>
+import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
+//寮曞叆echart
+import * as echarts from 'echarts'
+export default {
+ components: {
+ ChartTitle,
+ },
+ props: {},
+ data() {
+ return {
+ chartData:{
+ datax:['浜у搧1', '浜у搧2', '浜у搧3', '浜у搧4','浜у搧5', '浜у搧6'],
+ datay:[120, 200, 150, 380, 470, 150, 230],
+ }
+ };
+ },
+ mounted() {
+ this.pieChart('chart',this.chartData)
+ },
+ watch: {},
+ methods: {
+ //鍦ㄨ亴
+ pieChart(chartName,data){
+ let chartDom = this.$refs[chartName]
+ let myChart = echarts.init(chartDom);
+ let option;
+ let lineColor='#35ddc74d'
+ if(data){
+ option = {
+ color:['#00FFFF','#dcb018'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ },
+ grid: {
+ right: "80px",
+ bottom:'60px',
+ left:'60px',
+ top:'30px',
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ // show: true, //鏄剧ず婊氬姩鏉�
+ start:0,
+ end: 100,
+ xAxisIndex: 0,
+ minSpan:20,
+ maxSpan:100,
+ // handleSize: 8
+ },
+ {
+ // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°��
+ type: 'inside',
+ // show: true,
+ // realtime : true,
+ xAxisIndex: 0,
+ minSpan:20,
+ maxSpan:100,
+ start: 0,
+ end: 100
+ },
+ ],
+ legend: {
+ itemWidth: 8,
+ itemHeight: 8,
+ itemGap: 35,//闂磋窛
+ bottom:'5px',
+ left:'center',
+ },
+ yAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color:lineColor,
+ }
+ },
+ axisLabel:{
+ // rotate:45,
+ margin: 10,
+ show: true,
+ textStyle: {
+ color:function(params,index){
+ let colorList=['#dcb018','#00FFFF']
+ if(index % 2 == 0){
+ return colorList[0]
+ }else{
+ return colorList[1]
+ }
+ }
+ },
+ },
+ data: data.datax?data.datax:[],
+ }
+ ],
+ xAxis: [
+ {
+ type: '',
+ name: '鍗曚綅锛氫欢',
+ // min: data.yAxis[0].min?data.yAxis.min:0,
+ minInterval: 1,//鍧愭爣杞存槸鏁存暟
+ max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
+ interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7,
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color:'#0a112B',
+ }
+ },
+ nameTextStyle:{
+ color:"#00FFFF",
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: lineColor,
+ }
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLabel: {
+ textStyle: {
+ color: '#00FFFF'
+ },
+
+ }
+ },
+ ],
+ series:[
+ {
+ type: 'bar',
+ name: '',
+ barWidth: '20%',
+ itemStyle: {
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius:[4, 4, 0, 0],
+ color:function(params){
+ let colorList=['#dcb018','#00FFFF']
+ if(params.dataIndex % 2 == 0){
+ return colorList[0]
+ }else{
+ return colorList[1]
+ }
+ }
+ },
+ },
+ data: data.datay,
+ },
+ ]
+ };
+
+ option && myChart.setOption(option);
+ }else{
+ option={};
+ myChart.setOption(option,true);
+ }
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart{
+ width:100%;
+ height:calc(100% - 20px);
+ padding:20px 0 0;
+ .bar-contents{
+ width:100%;
+ height:calc(100% - 60px);
+ border:1px solid #00FFFF;
+ box-sizing: border-box;
+ .chart{
+ width: 100%;
+ height:100%;
+ }
+ }
+}
+</style>
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index dd707b9..cdbdd18 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -3,6 +3,9 @@
<template #leftBlock1>
<StatisticalBox></StatisticalBox>
</template>
+ <template #rightBlock2>
+ <MaterialChart @should-reload="reloadAllData"></MaterialChart>
+ </template>
<template #rightBlock3>
<BarChart @should-reload="reloadAllData"></BarChart>
</template>
@@ -12,11 +15,13 @@
<script>
import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox";
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
+import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
export default {
components: {
StatisticalBox,
BackgroundBoardLayout,
+ MaterialChart,
BarChart,
},
props: {},
--
Gitblit v1.8.0