设备负荷对比分析的组件开发

haoxuan

2023-12-01 ac5ea4c47689788facb2471995621c720a06abc8

设备负荷对比分析的组件开发

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -142,6 +142,7 @@
  .left-bottom-right-block {
    width: $leftBottomRightWidth;
    height: 100%;
    padding-right:20px;
    .right-bottom-top-block {
      height: 60%;
    }

 src/views/cockpitPage/components/BarChart.vue

@@ -233,7 +233,7 @@
                {
                  type: 'bar',
                  name: '正品数量',
                  barWidth: '20%',
                  barWidth: '15',
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果
@@ -245,7 +245,7 @@
                {
                  type: 'bar',
                  name: '次品数量',
                  barWidth: '20%',
                  barWidth: '15',
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果

 src/views/cockpitPage/components/ChartTitle.vue

@@ -41,7 +41,7 @@
    top:0;
  }
  .title-bg{
    width:100%;
    width:calc(100% - 20px);
    height:30px;
    padding-left:20px;
    display:inline-block;

 src/views/cockpitPage/components/DeviceChart.vue

@@ -1,6 +1,11 @@
<template>
  <div class="bar-chart">
    <ChartTitle name="设备负荷对比分析"></ChartTitle>
    <div class="top-view">
      <img src="/cockpitPage/machine-top.png" alt="" />
      <div class="top-title">
        <span>设备负荷对比分析</span>
      </div>
    </div>
    <div class="bar-contents">
      <div class="chart" ref="chart"></div>
    </div>
@@ -8,193 +13,218 @@
</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],
      chartData: {
        datax: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
        datay: [10, 20, 15, 38, 47, 50, 20],
      }
    };
  },
  mounted() {
    this.pieChart('chart',this.chartData)
    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'
                },
    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,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              // handleSize: 8
            },
            {
              //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
              type: 'inside',
              // show: true,
              // realtime : true,
              yAxisIndex: 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
              },
              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，slider是增加滚动条以及鼠标拖动滚动条功能，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:[],
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                }
              ],
              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',
              },
              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]
                    }
                  },
                  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,
                },
              ]
            };
              },
              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})`) / 6) * 6 / 6,
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#0a112B',
                }
              },
              nameTextStyle: {
                color: "#00FFFF",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: lineColor,
                }
              },
              axisTick: {
                show: false
              },

            option && myChart.setOption(option);
          }else{
            option={};
            myChart.setOption(option,true);
          }
        },
              axisLabel: {
                textStyle: {
                  color: '#00FFFF'
                },
                formatter: '{value}%'
              }
            },
          ],
          series: [
            {
              type: 'bar',
              name: '',
              barWidth: '15',
              label:{
                show:true,
                position:'right',
                color: '#00FFFF'
              },
              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% - 0px);
  padding:0px 0 0;
  .bar-contents{
    width:100%;
    height:calc(100% - 60px);
    border:1px solid #00FFFF;
    box-sizing: border-box;
    .chart{
        width: 100%;
        height:100%;
.bar-chart {
  width: 100%;
  height: calc(100% - 0px);
  padding: 0px 0 0;
  border: 1px solid #00FFFF;
  box-sizing: border-box;
  position: relative;
  .top-view {
      height:38px;
      margin-top: -1px;
      margin-left: -1px;
      position: relative;
      left:0;
      top:0;
      .top-title {
        width: calc(100% - 10px);
        margin: auto;
        height:38px;
        line-height:38px;
        position:absolute;
        top:0;
        left:10px;
        color: #01f7fd;
        font-size: 14px;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
      }
    }
  .bar-contents {
    width: 100%;
    height: calc(100% - 40px);
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

 src/views/cockpitPage/components/MaterialChart.vue

@@ -56,7 +56,7 @@
                  // show: true, //显示滚动条
                  start:0,
                  end: 100,
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
@@ -66,7 +66,7 @@
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  start: 0,
@@ -151,7 +151,7 @@
                {
                  type: 'bar',
                  name: '',
                  barWidth: '20%',
                  barWidth: '15',
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果

 src/views/cockpitPage/components/PerSonnelProductivity.vue

New file
@@ -0,0 +1,219 @@
<template>
  <div class="bar-chart">
    <ChartTitle name="人员生产效率对比"></ChartTitle>
    <div class="bar-contents">
      <div class="chart-left">
        <div class="chart" ref="chart"></div>
      </div>
      <div class="chart-right">
        <div class="chart" ref="chart2"></div>
      </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,
                  yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
                },
                {
                  //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  yAxisIndex: 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: '15',
                  label:{
                    show:true,
                    position:'right',
                    color: '#00FFFF'
                  },
                  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);
   
    .chart-left{
        width: 50%;
        height:100%;
        border:1px solid #00FFFF;
        box-sizing: border-box;
      }
      .chart-right{
        width: 50%;
        height:100%;
      }
      .chart{
        width:100%;
        height:100%;
      }
  }
}
</style>

 src/views/cockpitPage/index.vue

@@ -9,6 +9,10 @@
    <template #leftBlock3>
      <CountView></CountView>
    </template>
    
    <template #leftBlock6>
      <PerSonnelProductivity @should-reload="reloadAllData"></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart @should-reload="reloadAllData"></DeviceChart>
    </template>
@@ -26,6 +30,7 @@
import MachineStartupRate from "@/views/cockpitPage/components/MachineStartupRate";
import CountView from "@/views/cockpitPage/components/CountView";
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
import PerSonnelProductivity from "@/views/cockpitPage/components/PerSonnelProductivity.vue";
import DeviceChart from "@/views/cockpitPage/components/DeviceChart.vue";
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
@@ -33,6 +38,7 @@
  components: {
    StatisticalBox,
    BackgroundBoardLayout,
    PerSonnelProductivity,
    DeviceChart,
    MaterialChart,
    BarChart,