OEE图表页面新增柱状图展示

zhaowei

2024-10-08 f43aec11c37f08b0146c2cbe28067d6ff419e58b

OEE图表页面新增柱状图展示

 src/views/mdc/base/OEECharts.vue

@@ -2,19 +2,13 @@
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form layout="inline" @keyup.enter.native="getChartDataByApi">
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="设备类型">
              <a-select
                :value="queryParam.equipmentType"
                mode="multiple"
                placeholder="请选择设备类型"
                allow-clear
                :maxTagCount="1"
                @change="selectChange($event,'equipmentType')"
              >
                <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
              <a-select placeholder="请选择设备类型" :triggerChange="true" v-model="queryParam.equipmentType"
                        :allowClear="true">
                <a-select-option v-for='item in equipmentTypeList' :key='item.id' :value='item.value'>
                  {{item.label}}
                </a-select-option>
              </a-select>
@@ -28,12 +22,13 @@
                value-format="YYYY-MM"
                v-model="queryParam.date"
                style="width: 100%"
                :allowClear="false"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="getChartDataByApi" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
@@ -41,68 +36,219 @@
      </a-form>
    </div>

    <div>
      <div style="height: 650px" id="chart-container"></div>
    </div>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { getAction } from '@api/manage'
  import moment from 'moment'
  import { getAction } from '@api/manage'

export default {
  name: 'OEECharts',
  mixins: [JeecgListMixin],
  created() {
    this.getEquipmentTypeListByApi()
  },
  data() {
    return {
      name: 'OEECharts',
      description: '这是OEE统计柱状图页面',
      equipmentTypeList: [],
      queryParam: {
        date: moment().subtract('month', 1).format('YYYY-MM')
      },
      queryParams: {
        equipmentType: []
      },
      url: {
        list: '/mdc/mdcOverallEquipmentEfficiency/oeeStatisticsChart',
        queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
  export default {
    name: 'OEECharts',
    mounted() {
      this.getEquipmentTypeListByApi()
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    data() {
      return {
        name: 'OEECharts',
        description: '这是OEE统计柱状图页面',
        equipmentTypeList: [],
        queryParam: {
          date: moment().subtract('month', 1).format('YYYY-MM')
        },
        barChart: '',
        barChartData: [],
        url: {
          list: '/mdc/mdcOverallEquipmentEfficiency/oeeStatisticsChart',
          queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
        }
      }
    }
  },
  methods: {
    getEquipmentTypeListByApi() {
      getAction(this.url.queryEquipmentType).then(res => {
        if (res.success) {
          this.equipmentTypeList = res.result.map(item => {
            return {
              label: item.equipmentTypeName,
              value: item.equipmentTypeName
    },
    methods: {
      getEquipmentTypeListByApi() {
        getAction(this.url.queryEquipmentType).then(res => {
          if (res.success) {
            this.equipmentTypeList = res.result.map(item => {
              return {
                label: item.equipmentTypeName,
                value: item.equipmentTypeName
              }
            })
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },
      getChartDataByApi() {
        this.barChart = this.$echarts.init(document.getElementById('chart-container'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000',
          maskColor: 'transparent' // 遮罩层
        })
        getAction(this.url.list, this.queryParam)
          .then(res => {
            if (res.success) {
              this.barChartData = res.result
              this.drawChart()
            }
          })
        } else {
          this.$notification.warning({
            message: '消息',
            description: res.message
          })
        // this.barChartData = [
        //   {
        //     label: '机匣中心',
        //     value: 3.1
        //   },
        //   {
        //     label: '叶片中心',
        //     value: 6.11
        //   },
        //   {
        //     label: '盘轴中心',
        //     value: 6.23
        //   },
        //   {
        //     label: '机械中心',
        //     value: 23.24
        //   },
        //   {
        //     label: '综合机械制造中心',
        //     value: 32.92
        //   },
        //   {
        //     label: '钣焊优良制造中心',
        //     value: 35.52
        //   },
        //   {
        //     label: '燃机中心',
        //     value: 36.55
        //   },
        //   {
        //     label: '燃机室中心',
        //     value: 38.62
        //   },
        //   {
        //     label: '精铸中心',
        //     value: 39.25
        //   }
        // ]
      },
      drawChart() {
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
            text: '', // 主标题文本
            x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
            y: 'bottom', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
              // 主标题文本样式
              fontSize: 20,
              fontWeight: 'normal',
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
            }
          },
          grid: {
            top: '5%',
            left: '5%',
            right: '5%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            name: '',
            nameLocation: 'middle',
            type: 'category',
            data: this.barChartData.map(item => item.key),
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: 45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 25, // 刻度标签与轴线之间的距离
              fontSize: 18,
              color: '#000'
            },
            axisTick: {
              show: true
            }
          },
          yAxis: {
            min: 0,
            interval: 5,
            axisLabel: {
              formatter: value => value.toFixed(2) + '%',
              fontSize: 16,
              color: '#000',
              margin: 20
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#000'
              }
            }
          },
          series: {
            type: 'bar',
            data: this.barChartData,
            barWidth: 50,
            itemStyle: {
              color: '#6180A6'
            },
            zlevel: 1,
            label: {
              show: true,
              lineHeight: 25,
              position: 'top',
              formatter: params => params.value.toFixed(2) + '%',
              textStyle: {
                color: '#000',
                fontSize: 16
              }
            }
          }
        }
      })
    },
    selectChange(value, key) {
      this.queryParams[key] = value
    },
    searchReset() {
      this.queryParams = {
        equipmentType: []
        const currentMonth = moment(this.queryParam.date).format('M')
        option.title.text = `各单位加工中心设备${currentMonth}月份平均OEE`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()
      },
      searchReset() {
        this.queryParam = {
          date: moment().subtract('month', 1).format('YYYY-MM')
        }
        this.getChartDataByApi()
      },
      handleWindowResize() {
        if (this.barChart) this.barChart.resize()
      }
      this.queryParam = {}
      this.loadData()
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
  @import '~@assets/less/common.less';
</style>