<!-- 机床状态分布 -->
|
<template>
|
<div class="padding20" style="margin-top: 50px" v-loading="loading" element-loading-text="查询数据中,请稍等">
|
<el-form :inline="true" :rules="dataRule" :model="dataForm" @keyup.enter.native="GetNCStateListBy()" ref="dataForm" class="margintop20">
|
<el-form-item label="开始时间" prop="startTime">
|
<el-date-picker size="mini" v-model="dataForm.startTime" value-format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="startTime"
|
type="datetime" placeholder="开始时间" disabled></el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间" prop="endTime">
|
<el-date-picker size="mini" v-model="dataForm.endTime" value-format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="endTime" default-time="23:59:59"
|
type="datetime" placeholder="结束时间" disabled></el-date-picker>
|
</el-form-item>
|
<el-form-item label="车间" prop="workshop">
|
<el-select size="mini" v-model="dataForm.workshop" filterable clearable placeholder="选择或搜索" @change="workshopChange()">
|
<el-option
|
v-for="item in workshoplist"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工段" prop="section">
|
<el-select size="mini" v-model="dataForm.section" filterable clearable placeholder="选择或搜索" @change="sectionChange()">
|
<el-option
|
v-for="item in sectionlist"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="机床检索">
|
<!-- <el-input size="mini" v-model="dataForm.key" placeholder="机床名" clearable></el-input>-->
|
<el-select size="mini" v-model="dataForm.machines" filterable clearable multiple placeholder="选择或搜索机床名">
|
<el-option
|
v-for="item in machinelist"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" id="ncQuery" v-model="isStart" type="primary" @click="autoQuery()">开始自动查询</el-button>
|
</el-form-item>
|
</el-form>
|
<!-- 图表 -->
|
<!-- <div id="prompt">-->
|
<!-- <p class="text fontsize25 margintop10bfb">还未选择条件,暂无数据</p>-->
|
<!-- <p class="text fontsize18 margintop10">1:选择必选项</p>-->
|
<!-- </div>-->
|
<div>
|
<p class="statelist" id="theradio">
|
<i class="textwenzi1" style="margin-left: -500px;">{{ dataForm.startTime }} - {{ dataForm.endTime }}</i>
|
<span><i class="icons ncstop"></i><i class="textwenzi">停机</i></span>
|
<span><i class="icons ncrun"></i><i class="textwenzi">运行</i></span>
|
<span><i class="icons ncidle"></i><i class="textwenzi">待机</i></span>
|
<span><i class="icons ncalarm"></i><i class="textwenzi">报警</i></span>
|
<span><i class="icons ncnodata"></i><i class="textwenzi">无数据</i></span>
|
</p>
|
</div>
|
<div id="datavalue" class="none">
|
<div class="mod-demo-echarts" style="margin-top: -20px" v-for="(item,index) in gunterlist">
|
<Gunter :gunterData="item.ncgunter" :successData="item.ncgunterSuccessData"></Gunter>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getNCStateListBy, queryworkshoplist, getByWorkshopSection } from '@/api/MdcApi'
|
import Gunter from '@/components/dynamic-gunter'
|
import { formatDate } from '../../utils'
|
export default {
|
components: {
|
Gunter
|
},
|
data() {
|
return {
|
startTime: {
|
disabledDate: time => {
|
if (this.dataForm.endTime) {
|
return (
|
time.getTime() > new Date(this.dataForm.endTime).getTime()
|
)
|
} else {
|
// 不能大于当前日期
|
return time.getTime() > Date.now()
|
}
|
}
|
},
|
// 结束时间
|
endTime: {
|
disabledDate: time => {
|
if (this.dataForm.startTime) {
|
return (
|
time.getTime() > Date.now() ||
|
time.getTime() < new Date(this.dataForm.startTime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
|
)
|
} else {
|
return time.getTime() > Date.now()
|
}
|
}
|
},
|
loading: false,
|
dataForm: {
|
startTime: '',
|
endTime: '',
|
workshop: '', // 车间
|
section: '', // 工段
|
machines: [],
|
pageNo: 0
|
},
|
dataRule: {
|
startTime: [
|
{ required: true, message: '开始时间必选', trigger: 'blur' }
|
],
|
endTime: [
|
{ required: true, message: '结束时间必选', trigger: 'blur' }
|
]
|
},
|
workshoplistall: [],
|
sectionlistall: [],
|
machinelistall: [],
|
workshoplist: [],
|
sectionlist: [],
|
machinelist: [],
|
gunterlist: [],
|
// datavalue1: [],
|
timerInterval: null,
|
isStart: 0
|
}
|
},
|
mounted() {
|
this.getStartTime()
|
this.getEndTime()
|
this.queryListByOrgTypecj()
|
},
|
beforeDestroy() {
|
this.stopAutoQuery()
|
},
|
methods: {
|
// 获取车间list
|
queryListByOrgTypecj() {
|
queryworkshoplist().then(res => {
|
this.workshoplist = []
|
if (res.workshopList.length > 0) {
|
this.oldworkshoplist = res.workshopList
|
res.workshopList.map(item => {
|
this.workshoplist.push({
|
value: item.name,
|
label: item.name
|
})
|
item.sectionList.map(item => {
|
this.sectionlist.push({
|
value: item.name,
|
label: item.name
|
})
|
})
|
})
|
}
|
this.sectionChange()
|
this.workshoplistall = this.workshoplist
|
this.sectionlistall = this.sectionlist
|
this.machinelistall = this.machinelist
|
})
|
},
|
workshopChange() {
|
const workshop = this.dataForm.workshop
|
this.dataForm.section = ''
|
if (workshop === '') {
|
this.sectionlist = this.sectionlistall
|
this.machinelist = this.machinelistall
|
} else {
|
this.sectionlist = []
|
this.oldworkshoplist.map(item => {
|
if (item.name === workshop) {
|
item.sectionList.map(items => {
|
this.sectionlist.push({
|
value: items.name,
|
label: items.name
|
})
|
})
|
}
|
})
|
// this.dataForm.section = this.sectionlist[0].value
|
}
|
this.sectionChange()
|
},
|
sectionChange() {
|
const workshop = this.dataForm.workshop
|
const section = this.dataForm.section
|
getByWorkshopSection(workshop, section).then(res => {
|
this.machinelist = []
|
res.map(item => {
|
this.machinelist.push({
|
value: item,
|
label: item
|
})
|
})
|
})
|
},
|
GetNCStateListBy() {
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
this.loading = true
|
getNCStateListBy(this.dataForm.startTime,
|
this.dataForm.endTime,
|
this.dataForm.workshop,
|
this.dataForm.section,
|
JSON.stringify(this.dataForm.machines),
|
this.dataForm.pageNo
|
).then(res => {
|
this.loading = false
|
this.gunterlist = []
|
if (res.name.length > 0) {
|
this.gunterlist = []
|
res.name.map((item, index) => {
|
var datavalue = []
|
res.data[item].map(items => {
|
datavalue.push(
|
{
|
color: items.color,
|
status: items.status,
|
x: Date.parse(items.stateStart + ' GMT +0'),
|
x2: Date.parse(items.stateEnd + ' GMT +0'),
|
y: 0
|
},
|
)
|
})
|
this.gunterlist.push({
|
name: item,
|
ncgunter: { title: item, data: datavalue, yAxistext: '' },
|
ncgunterSuccessData: true
|
})
|
})
|
} else {
|
this.$message({
|
message: '该时间段没有查询到相关数据！',
|
type: 'warning'
|
})
|
document.getElementById('prompt').classList.add('none')
|
document.getElementById('datavalue').classList.remove('none')
|
}
|
}).catch(error => {
|
console.log(error)
|
})
|
}
|
})
|
},
|
autoQuery() {
|
if (this.isStart === 0) {
|
this.isStart = 1
|
this.GetNCStateListBy()
|
document.getElementById('ncQuery').innerText = '停止自动查询'
|
this.startAutoQuery()
|
} else {
|
this.isStart = 0
|
this.stopAutoQuery()
|
document.getElementById('ncQuery').innerText = '开始自动查询'
|
}
|
},
|
getStartTime() {
|
const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime())
|
this.dataForm.startTime = formatDate(startTime, 'yyyy-MM-dd HH:mm:ss')
|
},
|
getEndTime() {
|
this.dataForm.endTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
|
},
|
startAutoQuery() {
|
if (this.timerInterval == null) {
|
this.timerInterval = setInterval(() => {
|
this.getStartTime()
|
this.getEndTime()
|
this.GetNCStateListBy()
|
}, 1000 * 60 * 15)
|
}
|
},
|
stopAutoQuery() {
|
if (this.timerInterval != null) {
|
this.getStartTime()
|
this.getEndTime()
|
clearInterval(this.timerInterval)
|
this.timerInterval = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.text{text-align:center}
|
.fontsize18{font-size: 18px;}
|
.fontsize25{font-size: 25px;}
|
.margintop10{margin-top: 10px;}
|
.margintop10bfb{margin-top: 10%;}
|
</style>
|
