|
|
@@ -0,0 +1,221 @@
|
|
|
+<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[0].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>
|
lxb