imcs_yj_fe/imcs-ui/src/views/zuihou/statisticalAnalysis/resourceRate/Index.vue

<template>
  <div class="app-container">
    <el-row class="rowCls">
		<!-- 搜索模块 -->
    <div class="filter-container">
    	<span style="margin-left: 15px;" v-show="this.productionresourceList.length>1">
    		<span>{{$t("statisticalAnalysis.searchForm.rate.resourceName")}}：</span>
    		<el-select  v-model="resourceId" :placeholder='$t("common.pleaseSelect")' size="medium" style="width: 250px;">
        	<el-option
			      v-for="item in productionresourceList"
			      :key="item.id"
			      :label="item.name"
			      :value="item.id">
			    </el-option>
      	</el-select>
    	</span>

      <span style="margin-left: 15px;">
    		<span>{{$t("statisticalAnalysis.searchForm.rate.date")}}：</span>
    		<el-date-picker
          v-model="date"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日"
        />
    	</span>
      <span style="margin-left: 15px;">
	      <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
	        {{ $t("table.search") }}
	      </el-button>
	      <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
	        {{ $t("table.reset") }}
	      </el-button>
      </span>
    </div>
    </el-row>
		<!-- OEE柱状图 -->
    <el-row class="rowCls">
      <div class="bottomDiv">
      <!-- 柱状图数据 -->
      <div class="chart-wrapper">
          <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
      </div>
      </div>
    </el-row>

  </div>
</template>

<script>
  import productionLineMgrApi from "@/api/runManageCenter/productionLineMgr"
  import productlineAvailabilityApi from "@/api/statisticalAnalysis/productlineAvailability"
  // 【产线管理】-API
  import areaMgrApi from "@/api/resourceProductMgr/areaMgr"
  import {message} from "@/utils/resetMessage";
  import * as echarts from 'echarts'
	export default {
	  name: "rate",
	  props: {
	  },
	  data () {
	    return {
        heightStr: "380px",
        productionresourceList: [],
	      tableKey: 0,
	      loading: false,
        resourceId:"",
        date:"",
        barData: {
            name: 'rate',
            xData: [],
            yData: []
        },
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 加载产线下拉框数据

	  	this.getByIndition();
      // this.queryProductionLines()
		},
	  computed: {
	  },
	  mounted () {
      this.chart();
	  },
	  methods: {
      search() {
          if(!this.resourceId){
            this.$message({
              message: '请选择设备',
              type: 'warning'
            })
          }
          this.fetch()
      },
      reset() {
          this.resourceId = '';
          this.date = '';
          //this.queryParams = initQueryParams({})
          //this.$refs.table.clearSort()
          //this.$refs.clearFilter()
          this.getByIndition()
      },
	    fetch () {
        if(!this.resourceId){
          return
        }
	  	  this.tableKey = !this.tableKey
	      this.loading = true
        let params = {}
        params.resourceId = this.resourceId
        params.date = this.date
        productlineAvailabilityApi.resourceRate(params).then(response => {
          const res = response.data
	        if (res.isSuccess) {
              this.barData.xData =  res.data.hour
              this.barData.yData =  res.data.rate
              console.log(this.barData)
              this.chart()
	        }
	      }).finally(() => this.loading = false)
	    },

	    // 设备下拉数据
      getByIndition(){
        let params = {}
        params.modeSpecification = "modeSpecification"
	  		areaMgrApi.getByIndition(params).then(res => {
	  			res = res.data;
	  			// console.log("产线下拉数据: ", res);
	  			if(res.code == 0) {
	  				this.productionresourceList = res.data;
            if(this.productionresourceList.length > 1){
               this.resourceId = this.productionresourceList[2].id
            }
            this.fetch()
	  			}
	  		})
	  	},

      // 产线查找
      queryProductionLines(){
          this.productionLines = []
          productionLineMgrApi.getList({}).then(response => {
              const res = response.data
              if (res.isSuccess) {
                  this.productionLines = res.data
                  if(this.productionLines.length > 0){
                      this.productionLineId = this.productionLines[0].id
                  }
              }
          })
      },
      chart(){
        this.myChartone = echarts.init(document.getElementById('myChart'))
        this.myChartone.setOption( {
          title : {
            text: '',
            subtext: '主轴利用率'
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:['利用率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : this.barData.xData
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisLabel : {
                formatter: '{value} %'
              }
            }
          ],
          series : [
            {
              name:'利用率',
              type:'line',
              data:this.barData.yData,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            }
          ]
        });


      }
	  }
	}
</script>
<style lang="scss" scoped></style>