<template>
|
<div>
|
<!-- 标签页 -->
|
<a-card :bordered="false" :bodyStyle="tstyle2">
|
<a-tabs tab-position="top" :animated="false" v-model="activeKey" @change="change">
|
<a-tab-pane
|
v-for="(equipment) in equipmentList"
|
:key="equipment.equipmentId"
|
:tab="equipment.equipmentName"
|
>
|
</a-tab-pane>
|
</a-tabs>
|
</a-card>
|
<!-- 表单部分 -->
|
<x-card :bordered="false" v-if="hasPerm('WorkPieceProcess:page')">
|
<div slot="content" class="table-page-search-wrapper">
|
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-row :gutter="gutter">
|
<a-col :md="colMd" :sm="colSm">
|
<a-form-item label="日期范围">
|
<a-range-picker v-model="queryParam.dates" format="YYYY-MM" />
|
</a-form-item>
|
</a-col>
|
<!-- 是否显示下列表单 advanced true时显示-->
|
<template v-if="advanced">
|
<!-- <a-col :md="8" :sm="24">
|
<a-form-item label="设备所属工序">
|
<a-input v-model="queryParam.workingProcedure" allow-clear placeholder="请输入设备所属工序"/>
|
</a-form-item>
|
</a-col> -->
|
</template>
|
<a-col :md="colMd" :sm="colSm">
|
<span class="table-page-search-submitButtons">
|
<a-button type="primary" @click="getData">查询</a-button>
|
<a-button style="margin-left: 8px" @click="resetData">重置</a-button>
|
<!-- 是否显示展开收起 flag为true时显示 -->
|
<a @click="toggleAdvanced" style="margin-left: 8px" v-if="flag">
|
{{ advanced ? '收起' : '展开' }}
|
<a-icon :type="advanced ? 'up' : 'down'" />
|
</a>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
</x-card>
|
<!-- 图表部分1 -->
|
<a-card :bordered="false" :bodyStyle="tstyle">
|
<Echarts title="报警分析" :data="data"></Echarts>
|
</a-card>
|
<!-- 图标部分2 -->
|
<a-card :bordered="false" :bodyStyle="tstyle">
|
<Echarts title="状态占比分析" :data="data"></Echarts>
|
</a-card>
|
</div>
|
</template>
|
<script>
|
import Echarts from './modules/Echarts.vue'
|
import moment from 'moment'
|
import { XCard } from '@/components'
|
import { getEquipmentStatus } from './api/getData.js'
|
import { GetEquipmentStateAnalysisInfo } from '@/api/modular/main/EquipmentStatusAnalyseManage'
|
import { getEquipmentList } from '@/api/modular/main/QualityDataInfoManage'
|
|
export default {
|
name: 'EquipmentStatusAnalyse',
|
components: { Echarts, XCard },
|
data() {
|
return {
|
gutter: 36,
|
colMd: 6,
|
colSm: 18,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
advanced: false, // 高级搜索 展开/关闭
|
flag: false, // 显示隐藏展开按钮
|
// 标签页
|
tabs: [],
|
activeKey: 0,
|
equipmentList: [],
|
// 查询数据
|
queryParam: {
|
equipmentId: '',
|
dates: [moment().subtract(1, 'years'), moment()]
|
},
|
data: [],
|
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
|
tstyle2: { 'padding-bottom': '0px', 'margin-bottom': '0px' }
|
}
|
},
|
created() {
|
this.getEquipment()
|
},
|
watch: {
|
'queryParam.equipmentId': {
|
deep: true,
|
handler() {
|
this.getData()
|
}
|
}
|
},
|
methods: {
|
moment,
|
/**
|
* 查询参数组装
|
*/
|
switchingDate() {
|
const dates = this.queryParam.dates
|
if (dates != null) {
|
this.queryParam.startTime = moment(dates[0]).format('YYYY-MM-DD ')
|
this.queryParam.endTime = moment(dates[1]).format('YYYY-MM-DD')
|
if (dates.length < 1) {
|
delete this.queryParam.startTime
|
delete this.queryParam.endTime
|
}
|
}
|
const obj = JSON.parse(JSON.stringify(this.queryParam))
|
return obj
|
},
|
toggleAdvanced() {
|
this.advanced = !this.advanced
|
},
|
// 发起请求获取数据
|
async getData() {
|
try {
|
const { data } = await GetEquipmentStateAnalysisInfo(this.switchingDate())
|
console.log(data, 'data')
|
this.data = data
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
// 查询所有设备名称
|
getEquipment() {
|
this.equipmentList = []
|
getEquipmentList().then(res => {
|
this.equipmentList = res.data
|
this.equipmentList.unshift({ equipmentName: '全部设备', equipmentId: null })
|
this.activeKey = this.equipmentList[0].equipmentId
|
this.queryParam.equipmentId = this.equipmentList[0].equipmentId
|
})
|
},
|
// 标签页改变
|
change(val) {
|
this.queryParam.equipmentId = val
|
},
|
// 重置按钮
|
resetData() {
|
// 参数重置
|
this.queryParam = {
|
equipmentId: '',
|
dates: [moment().subtract(1, 'years'), moment()]
|
}
|
this.getData()
|
// 页面重置
|
this.activeKey = this.equipmentList[0].equipmentId
|
}
|
}
|
}
|
</script>
|
<style>
|
.table-operator {
|
margin-bottom: 18px;
|
}
|
|
button {
|
margin-right: 8px;
|
}
|
</style>
|
