完善下线统计 工位节拍 工位JPH的功能
This commit is contained in:
zhangshun
@@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card class="topCard">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="各区JPH完成统计" name="first">
|
||||
<div style="height: 780px;overflow: auto;width: 1500px">
|
||||
<el-row v-for="item in JPHDataList" :key="item" style="margin: 5px">
|
||||
<div style="height: 500px;border: 1px solid #868686">
|
||||
<div style="position: absolute;right: 5%;top: 2%;font-size: 1.5rem">
|
||||
<div style="padding: 12px 20px;line-height: 1;border: 2px solid #00893d;">
|
||||
<span>当班产量：</span>
|
||||
<span style="font-weight: bolder">{{ currentBeatCount.get(item) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="text" icon="el-icon-refresh" style="position: absolute;right: 2%;top: 2%;font-size: 1.5rem" @click="searchChartData4_opPlanCount"/>
|
||||
<div :id="item + '_big'" style="width: 1400px;height: 500px;margin: 5px"/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-card class="topCard">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||
<el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
|
||||
<div class="chartCard">
|
||||
<div id="stationJphRealtimeChart" class="chartDom" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="工位JPH查询" name="second">
|
||||
<el-row>
|
||||
<span class="promptText">日期范围:</span>
|
||||
|
||||
<el-tab-pane :label="$t('stationJph.historyTab')" name="history">
|
||||
<el-row class="toolbarRow">
|
||||
<span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
|
||||
<el-date-picker
|
||||
v-model="timeFrame"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
class="functionButton"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="dateTime"
|
||||
:clearable="false"
|
||||
align="center"
|
||||
:end-placeholder="$t('stationJph.endDate')"
|
||||
format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"/>
|
||||
<span class="promptText">工位:</span>
|
||||
<el-select v-model="station" class="functionButton" placeholder="请选择">
|
||||
:range-separator="$t('stationJph.dateRangeSeparator')"
|
||||
size="small"
|
||||
:start-placeholder="$t('stationJph.startDate')"
|
||||
style="width: 240px"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
/>
|
||||
<span class="promptText">{{ $t('stationJph.stationLabel') }}</span>
|
||||
<el-select
|
||||
v-model="stationValues"
|
||||
:placeholder="$t('stationJph.selectStation')"
|
||||
clearable
|
||||
filterable
|
||||
collapse-tags
|
||||
multiple
|
||||
size="small"
|
||||
style="width: 320px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in stationOptions"
|
||||
:key="item.value"
|
||||
@@ -41,484 +41,443 @@
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button class="functionButton" type="success" icon="el-icon-search" plain @click="searchTable()">查询</el-button>
|
||||
<el-button class="functionButton" style="margin-left: 0" type="success" icon="el-icon-document" plain @click="exportExcel()">导出</el-button>
|
||||
<span v-show="isExporting" style="color: #16a188">正在导出....</span>
|
||||
<div style="height: 50px;line-height: 50px">
|
||||
<span>
|
||||
小时范围:
|
||||
</span>
|
||||
<div style="display: inline-block;width: 1000px">
|
||||
<el-slider
|
||||
v-model="timeRange"
|
||||
:max="23"
|
||||
:marks="marks"
|
||||
range
|
||||
@change="changeHourRange" />
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-table v-loading="loading" :data="tableData" :cell-style="set_cell_style" highlight-current-row border stripe class="tableCustomization" height="730px">
|
||||
<el-table-column width="50px" label="ID" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.ID }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="105px" label="日期" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.日期 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in JPHHeaderF"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:width="calculateCellWidth(item)"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[item] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span style="margin-left: 10px">{{ $t('stationJph.orderNumberLabel') }}</span>
|
||||
<el-input
|
||||
v-model="orderNumberValue"
|
||||
:placeholder="$t('stationJph.orderNumberPlaceholder')"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 150px"
|
||||
/>
|
||||
<span class="promptText">{{ $t('stationJph.productModelLabel') }}</span>
|
||||
<el-select
|
||||
v-model="engineTypeValue"
|
||||
:placeholder="$t('stationJph.selectProductModel')"
|
||||
filterable
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in engineType"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
class="functionButton"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
plain
|
||||
@click="handleSearch()"
|
||||
>{{ $t('stationJph.search') }}</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
size="small"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
@click="exportExcel()"
|
||||
>{{ $t('stationJph.export') }}</el-button>
|
||||
</el-row>
|
||||
|
||||
<div class="chartCard">
|
||||
<div id="stationJphHistoryChart" class="chartDom" />
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="historyLoading"
|
||||
:data="historyTableData"
|
||||
border
|
||||
stripe
|
||||
height="560px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
|
||||
<el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
|
||||
<el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
|
||||
<el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { getNowShotTime } from '../../../utils/tool'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
currentBeatCount: new Map(),
|
||||
JPHData: new Map(),
|
||||
JPHData_PlanCount: new Map(),
|
||||
JPHDataList: [],
|
||||
activeName: 'first',
|
||||
isExporting: false,
|
||||
timeRange: [0, 23],
|
||||
marks: {
|
||||
'0': '00',
|
||||
'1': '01',
|
||||
'2': '02',
|
||||
'3': '03',
|
||||
'4': '04',
|
||||
'5': '05',
|
||||
'6': '06',
|
||||
'7': '07',
|
||||
'8': '08',
|
||||
'9': '09',
|
||||
'10': '10',
|
||||
'11': '11',
|
||||
'12': '12',
|
||||
'13': '13',
|
||||
'14': '14',
|
||||
'15': '15',
|
||||
'16': '16',
|
||||
'17': '17',
|
||||
'18': '18',
|
||||
'19': '19',
|
||||
'20': '20',
|
||||
'21': '21',
|
||||
'22': '22',
|
||||
'23': '23'
|
||||
},
|
||||
JPHHeader: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
|
||||
JPHHeader2: ['结果'],
|
||||
JPHHeaderF: [],
|
||||
// 时间范围
|
||||
timeFrame: '',
|
||||
tableHeader: [],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
// 两个复选框
|
||||
alarmNameOptions: [],
|
||||
activeTab: 'realtime',
|
||||
dateTime: [],
|
||||
stationValues: [],
|
||||
stationOptions: [],
|
||||
station: '',
|
||||
alarmCode: [],
|
||||
alarmCodeString: '',
|
||||
// 表格
|
||||
tableData: [],
|
||||
loading: false,
|
||||
// 分页
|
||||
pageCurrent: 1, // 分页当前页
|
||||
pageSize: 10, // 分页每页显示条数
|
||||
total: 0 // 分页总数
|
||||
orderNumberValue: '',
|
||||
engineTypeValue: '',
|
||||
engineType: [],
|
||||
historyTableData: [],
|
||||
realtimeLoading: false,
|
||||
historyLoading: false,
|
||||
realtimeChart: null,
|
||||
historyChart: null,
|
||||
realtimeSource: [],
|
||||
historySource: [],
|
||||
realtimeTimer: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created() {
|
||||
this.JPHHeaderF = [...this.JPHHeader, ...this.JPHHeader2]
|
||||
this.getStation()
|
||||
// this.searchChartData4_opPlanCount()
|
||||
this.searchTable56()
|
||||
this.dateTime = [getNowShotTime(), getNowShotTime()]
|
||||
this.getStationOptions()
|
||||
this.getEngineType()
|
||||
this.getRealtimeData()
|
||||
this.getHistoryData()
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setInterval(() => {
|
||||
// this.searchChartData4_opPlanCount()
|
||||
}, 1000 * 60)
|
||||
this.$nextTick(() => {
|
||||
this.initRealtimeChart()
|
||||
this.initHistoryChart()
|
||||
if (this.activeTab === 'realtime') {
|
||||
this.startRealtimePolling()
|
||||
}
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
this.stopRealtimePolling()
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.realtimeChart) {
|
||||
this.realtimeChart.dispose()
|
||||
this.realtimeChart = null
|
||||
}
|
||||
if (this.historyChart) {
|
||||
this.historyChart.dispose()
|
||||
this.historyChart = null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$i18n.locale'() {
|
||||
this.renderRealtimeChart()
|
||||
this.renderHistoryChart()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStation() {
|
||||
this.stationOptions = []
|
||||
const Data = this.CreateData('11', 'SP_Station_Query')
|
||||
getStationOptions() {
|
||||
const param = []
|
||||
const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.stationOptions.push({
|
||||
label: response.data[i].StationName,
|
||||
value: response.data[i].StationName
|
||||
})
|
||||
}
|
||||
this.station = this.stationOptions[0].value
|
||||
const source = response.data || []
|
||||
this.stationOptions = source.map(item => ({
|
||||
label: item.工位名称 ? `【${item.工位号}】${item.工位名称}` : item.工位号,
|
||||
value: item.工位号
|
||||
}))
|
||||
})
|
||||
},
|
||||
changeHourRange(value) {
|
||||
const newArray = this.JPHHeader.slice(value[0], value[1] + 1)
|
||||
this.JPHHeaderF = [...newArray, ...this.JPHHeader2]
|
||||
console.log(newArray)
|
||||
for (let i = 1; i < this.tableData.length; i++) {
|
||||
const tempData = this.tableData[i]
|
||||
let tempDataResultOkCount = 0
|
||||
let tempDataResultAll = 0
|
||||
for (const responseKey in tempData) {
|
||||
if (newArray.indexOf(responseKey) !== -1) {
|
||||
tempDataResultAll += 1
|
||||
if (tempData[responseKey + '_result']) {
|
||||
tempDataResultOkCount += 1
|
||||
}
|
||||
tempData['结果'] = `${tempDataResultOkCount} / ${tempDataResultAll}`
|
||||
}
|
||||
getEngineType() {
|
||||
const param = []
|
||||
const Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
const source = response.data || []
|
||||
this.engineType = source.map(item => ({
|
||||
label: item.发动机型号 + '-' + item.标识字符,
|
||||
value: item.发动机机型标志
|
||||
}))
|
||||
})
|
||||
},
|
||||
buildParams(type) {
|
||||
let stationCheck, orderCheck, engineTypeCheck
|
||||
this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
|
||||
this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
|
||||
this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
|
||||
|
||||
const param = []
|
||||
param[0] = ['开始时间', this.dateTime[0]]
|
||||
param[1] = ['结束时间', this.dateTime[1]]
|
||||
param[2] = ['工位_check', stationCheck]
|
||||
param[3] = ['工位列表', this.stationValues.join(',')]
|
||||
param[4] = ['订单号_check', orderCheck]
|
||||
param[5] = ['订单号', this.orderNumberValue]
|
||||
param[6] = ['产品型号代码_check', engineTypeCheck]
|
||||
param[7] = ['产品型号代码', this.engineTypeValue]
|
||||
return this.CreateData(type, '', param)
|
||||
},
|
||||
handleSearch() {
|
||||
this.getHistoryData()
|
||||
},
|
||||
handleTabChange() {
|
||||
if (this.activeTab === 'realtime') {
|
||||
this.getRealtimeData()
|
||||
this.startRealtimePolling()
|
||||
} else {
|
||||
this.stopRealtimePolling()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.handleResize()
|
||||
})
|
||||
},
|
||||
getRealtimeData() {
|
||||
let stationCheck, orderCheck, engineTypeCheck
|
||||
this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
|
||||
this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
|
||||
this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
|
||||
this.realtimeLoading = true
|
||||
const param = []
|
||||
param[0] = ['开始时间', getNowShotTime()]
|
||||
param[1] = ['结束时间', getNowShotTime()]
|
||||
param[2] = ['工位_check', stationCheck]
|
||||
param[3] = ['工位列表', this.stationValues.join(',')]
|
||||
param[4] = ['订单号_check', orderCheck]
|
||||
param[5] = ['订单号', this.orderNumberValue]
|
||||
param[6] = ['产品型号代码_check', engineTypeCheck]
|
||||
param[7] = ['产品型号代码', this.engineTypeValue]
|
||||
const Data = this.CreateData('11', '质量数据查询_测量数据发动机在线状态_工位JPH_实时', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.realtimeSource = response.data || []
|
||||
this.renderRealtimeChart()
|
||||
this.realtimeLoading = false
|
||||
}).catch(() => {
|
||||
this.realtimeSource = []
|
||||
this.renderRealtimeChart()
|
||||
this.realtimeLoading = false
|
||||
})
|
||||
},
|
||||
startRealtimePolling() {
|
||||
this.stopRealtimePolling()
|
||||
this.realtimeTimer = setInterval(() => {
|
||||
if (this.activeTab === 'realtime') {
|
||||
this.getRealtimeData()
|
||||
}
|
||||
}, 30000)
|
||||
},
|
||||
stopRealtimePolling() {
|
||||
if (this.realtimeTimer) {
|
||||
clearInterval(this.realtimeTimer)
|
||||
this.realtimeTimer = null
|
||||
}
|
||||
},
|
||||
// 设置单元格颜色
|
||||
set_cell_style({ row, column, rowIndex, columnIndex }) {
|
||||
if (row.日期 !== '目标产量') {
|
||||
if (this.JPHHeader.indexOf(column.label) !== -1) {
|
||||
if (row[column.label + '_result']) {
|
||||
return {
|
||||
'background': '#00893d',
|
||||
'color': 'white'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
'background': '#fcb3bb',
|
||||
'color': 'white'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
getHistoryData() {
|
||||
let stationCheck, orderCheck, engineTypeCheck
|
||||
this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
|
||||
this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
|
||||
this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
|
||||
this.historyLoading = true
|
||||
const param = []
|
||||
param[0] = ['开始时间', this.dateTime[0]]
|
||||
param[1] = ['结束时间', this.dateTime[1]]
|
||||
param[2] = ['工位_check', stationCheck]
|
||||
param[3] = ['工位列表', this.stationValues.join(',')]
|
||||
param[4] = ['订单号_check', orderCheck]
|
||||
param[5] = ['订单号', this.orderNumberValue]
|
||||
param[6] = ['产品型号代码_check', engineTypeCheck]
|
||||
param[7] = ['产品型号代码', this.engineTypeValue]
|
||||
const Data = this.CreateData('11', '质量数据查询_测量数据发动机在线状态_工位JPH_历史', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.historySource = response.data || []
|
||||
this.historyTableData = this.historySource
|
||||
this.renderHistoryChart()
|
||||
this.historyLoading = false
|
||||
}).catch(() => {
|
||||
this.historySource = []
|
||||
this.historyTableData = []
|
||||
this.renderHistoryChart()
|
||||
this.historyLoading = false
|
||||
})
|
||||
},
|
||||
searchTable() {
|
||||
if (this.timeFrame === null || this.timeFrame === '' || this.timeFrame[0] === '') {
|
||||
this.$message.error('请选择日期范围')
|
||||
this.loading = false
|
||||
initRealtimeChart() {
|
||||
const dom = document.getElementById('stationJphRealtimeChart')
|
||||
if (!dom) {
|
||||
return
|
||||
}
|
||||
// 查询表的信息
|
||||
this.loading = true
|
||||
this.tableData = []
|
||||
const param = []
|
||||
let tableDataTemp = []
|
||||
const Data = this.CreateData('11', 'SP_His_StationJPH_TableHeaderQuery', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
tableDataTemp = response.data
|
||||
const param1 = []
|
||||
param1[0] = ['QueryStartDate', this.timeFrame[0]]
|
||||
param1[1] = ['QueryEndDate', this.timeFrame[1]]
|
||||
param1[2] = ['Station', this.station]
|
||||
const Data1 = this.CreateData('11', 'SP_His_StationJPH_Query', param1)
|
||||
this.ExecDatabase(Data1).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
const tempData = response.data[i]
|
||||
let tempDataResult = false
|
||||
let tempDataResultOkCount = 0
|
||||
let tempDataResultAll = 0
|
||||
for (const responseKey in tempData) {
|
||||
if (this.JPHHeader.indexOf(responseKey) !== -1) {
|
||||
tempDataResultAll += 1
|
||||
if (tempData[responseKey] > tableDataTemp[0][responseKey]) {
|
||||
tempDataResult = true
|
||||
tempDataResultOkCount += 1
|
||||
} else {
|
||||
tempDataResult = false
|
||||
}
|
||||
tempData[responseKey + '_result'] = tempDataResult
|
||||
tempData['结果'] = `${tempDataResultOkCount} / ${tempDataResultAll}`
|
||||
}
|
||||
}
|
||||
tableDataTemp.push(tempData)
|
||||
}
|
||||
this.realtimeChart = this.$echarts.getInstanceByDom(dom)
|
||||
if (!this.realtimeChart) {
|
||||
this.realtimeChart = this.$echarts.init(dom)
|
||||
}
|
||||
this.renderRealtimeChart()
|
||||
},
|
||||
initHistoryChart() {
|
||||
const dom = document.getElementById('stationJphHistoryChart')
|
||||
if (!dom) {
|
||||
return
|
||||
}
|
||||
this.historyChart = this.$echarts.getInstanceByDom(dom)
|
||||
if (!this.historyChart) {
|
||||
this.historyChart = this.$echarts.init(dom)
|
||||
}
|
||||
this.renderHistoryChart()
|
||||
},
|
||||
renderRealtimeChart() {
|
||||
if (!this.realtimeChart) {
|
||||
this.initRealtimeChart()
|
||||
}
|
||||
if (!this.realtimeChart) {
|
||||
return
|
||||
}
|
||||
const xAxis = this.realtimeSource.map(item => item.小时段)
|
||||
const series = this.realtimeSource.map(item => Number(item.产量 || 0))
|
||||
this.realtimeChart.setOption({
|
||||
title: {
|
||||
text: this.$t('stationJph.realtimeChartTitle'),
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: this.$t('stationJph.saveAsImage'),
|
||||
type: 'png'
|
||||
}
|
||||
this.tableData = tableDataTemp
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '选择的该时间段没有数据！',
|
||||
type: 'error'
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 35
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: this.$t('stationJph.outputQty')
|
||||
},
|
||||
series: [{
|
||||
name: this.$t('stationJph.outputQty'),
|
||||
type: 'bar',
|
||||
barMaxWidth: 28,
|
||||
data: series,
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333'
|
||||
}
|
||||
}]
|
||||
}, true)
|
||||
},
|
||||
renderHistoryChart() {
|
||||
if (!this.historyChart) {
|
||||
this.initHistoryChart()
|
||||
}
|
||||
if (!this.historyChart) {
|
||||
return
|
||||
}
|
||||
const xAxis = this.historySource.map(item => `${item.日期} ${item.小时段}`)
|
||||
const series = this.historySource.map(item => Number(item.产量 || 0))
|
||||
this.historyChart.setOption({
|
||||
title: {
|
||||
text: this.$t('stationJph.historyChartTitle'),
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '14%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: this.$t('stationJph.saveAsImage'),
|
||||
type: 'png'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: this.$t('stationJph.outputQty')
|
||||
},
|
||||
series: [{
|
||||
name: this.$t('stationJph.outputQty'),
|
||||
type: 'bar',
|
||||
barMaxWidth: 28,
|
||||
data: series,
|
||||
itemStyle: {
|
||||
color: '#67C23A'
|
||||
}
|
||||
}]
|
||||
}, true)
|
||||
},
|
||||
handleResize() {
|
||||
if (this.realtimeChart) {
|
||||
this.realtimeChart.resize()
|
||||
}
|
||||
if (this.historyChart) {
|
||||
this.historyChart.resize()
|
||||
}
|
||||
},
|
||||
exportExcel() {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning('请查询要导出的内容')
|
||||
if (this.historyTableData.length === 0) {
|
||||
this.$message.warning(this.$t('stationJph.noData'))
|
||||
return
|
||||
}
|
||||
if (this.tableData.length) {
|
||||
this.isExporting = false
|
||||
const newTable = []
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
newTable.push({
|
||||
'ID': this.tableData[i]['ID'],
|
||||
'日期': this.tableData[i]['日期'],
|
||||
'00': this.tableData[i]['00'] ? this.tableData[i]['00'] : 0,
|
||||
'01': this.tableData[i]['01'] ? this.tableData[i]['01'] : 0,
|
||||
'02': this.tableData[i]['02'] ? this.tableData[i]['02'] : 0,
|
||||
'03': this.tableData[i]['03'] ? this.tableData[i]['03'] : 0,
|
||||
'04': this.tableData[i]['04'] ? this.tableData[i]['04'] : 0,
|
||||
'05': this.tableData[i]['05'] ? this.tableData[i]['05'] : 0,
|
||||
'06': this.tableData[i]['06'] ? this.tableData[i]['06'] : 0,
|
||||
'07': this.tableData[i]['07'] ? this.tableData[i]['07'] : 0,
|
||||
'08': this.tableData[i]['08'] ? this.tableData[i]['08'] : 0,
|
||||
'09': this.tableData[i]['09'] ? this.tableData[i]['09'] : 0,
|
||||
'10': this.tableData[i]['10'] ? this.tableData[i]['10'] : 0,
|
||||
'11': this.tableData[i]['11'] ? this.tableData[i]['11'] : 0,
|
||||
'12': this.tableData[i]['12'] ? this.tableData[i]['12'] : 0,
|
||||
'13': this.tableData[i]['13'] ? this.tableData[i]['13'] : 0,
|
||||
'14': this.tableData[i]['14'] ? this.tableData[i]['14'] : 0,
|
||||
'15': this.tableData[i]['15'] ? this.tableData[i]['15'] : 0,
|
||||
'16': this.tableData[i]['16'] ? this.tableData[i]['16'] : 0,
|
||||
'17': this.tableData[i]['17'] ? this.tableData[i]['17'] : 0,
|
||||
'18': this.tableData[i]['18'] ? this.tableData[i]['18'] : 0,
|
||||
'19': this.tableData[i]['19'] ? this.tableData[i]['19'] : 0,
|
||||
'20': this.tableData[i]['20'] ? this.tableData[i]['20'] : 0,
|
||||
'21': this.tableData[i]['21'] ? this.tableData[i]['21'] : 0,
|
||||
'22': this.tableData[i]['22'] ? this.tableData[i]['22'] : 0,
|
||||
'23': this.tableData[i]['23'] ? this.tableData[i]['23'] : 0,
|
||||
'结果': this.tableData[i]['结果'] ? this.tableData[i]['结果'] : ''
|
||||
})
|
||||
}
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const dataGroup = []
|
||||
const filterVal = ['ID', '日期', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '结果']
|
||||
const data = newTable.map(v => filterVal.map(j => v[j]))
|
||||
dataGroup.push(data)
|
||||
// 这个导出可以指定多个sheet表即使你只导出一个，你也要把 headerGroup定义为二维数组！！！！！！
|
||||
const headerGroup = [['ID', '日期', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '结果']]
|
||||
const sheetGroup = ['工位JPH']
|
||||
excel.export_json_to_excel({
|
||||
headerGroup: headerGroup,
|
||||
dataGroup: dataGroup,
|
||||
sheetGroup: sheetGroup,
|
||||
filename: '工位JPH',
|
||||
autoWidth: true,
|
||||
bookType: 'xlsx'
|
||||
})
|
||||
this.isExporting = false
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请查询要导出的内容')
|
||||
}
|
||||
},
|
||||
calculateCellWidth(rowName) {
|
||||
if (rowName === '结果') {
|
||||
return '80px'
|
||||
} else {
|
||||
return '40px'
|
||||
}
|
||||
},
|
||||
// JPH查询
|
||||
searchChartData4() {
|
||||
const scope = this
|
||||
this.JPHData = new Map()
|
||||
var param4 = []
|
||||
var Data4 = this.CreateData('11', 'Visualization_HoursOutput_Query', param4)
|
||||
this.ExecDatabase(Data4).then(response => {
|
||||
if (response.data.length !== 0) {
|
||||
const list = []
|
||||
for (const argument of response.data) {
|
||||
const temp = this.JPHData.get(argument.StationName)
|
||||
if (temp) {
|
||||
temp['HH'].push(argument['HH'])
|
||||
temp['DataCount'].push(argument['DataCount'])
|
||||
} else {
|
||||
list.push(argument.StationName)
|
||||
this.JPHData.set(argument.StationName, {
|
||||
HH: [argument['HH']],
|
||||
DataCount: [argument['DataCount']],
|
||||
StationName: argument.StationName,
|
||||
PlanCount: this.JPHData_PlanCount.get(argument.StationName)
|
||||
})
|
||||
}
|
||||
}
|
||||
scope.JPHDataList = list
|
||||
this.$nextTick(() => {
|
||||
this.drawDashboardTwo(this.JPHData)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
drawDashboardTwo(JPHData) {
|
||||
JPHData.forEach(function(value, key) {
|
||||
let chartsDom1 = echarts.getInstanceByDom(document.getElementById(key.toString() + '_big'))
|
||||
if (chartsDom1 == null) {
|
||||
chartsDom1 = echarts.init(document.getElementById(key.toString() + '_big'))
|
||||
}
|
||||
chartsDom1.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: key,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#ffaa13'
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: '15%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: 'H',
|
||||
type: 'category',
|
||||
data: value['HH'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#6c6c6c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#6c6c6c'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '台',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#6c6c6c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '下线台数',
|
||||
data: value['DataCount'],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#209de2'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#050505',
|
||||
position: 'top'
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
data: [
|
||||
{
|
||||
name: '计划产量',
|
||||
yAxis: value['PlanCount']
|
||||
}
|
||||
],
|
||||
lineStyle: {
|
||||
color: '#ffbe00'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#020202',
|
||||
fontSize: '2rem',
|
||||
position: 'end',
|
||||
formatter: '{c} 台'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
searchChartData4_opPlanCount() {
|
||||
var param4 = []
|
||||
var Data4 = this.CreateData('11', 'SP_Config_BeatCountOpName_Query', param4)
|
||||
this.ExecDatabase(Data4).then(response => {
|
||||
if (response.data.length !== 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.JPHData_PlanCount.set(response.data[i].StationName, response.data[i].PlanCount)
|
||||
}
|
||||
}
|
||||
this.searchChartData4()
|
||||
})
|
||||
},
|
||||
searchTable56() {
|
||||
let stationCheck, orderCheck, engineTypeCheck
|
||||
this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
|
||||
this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
|
||||
this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
|
||||
|
||||
const param = []
|
||||
const Data = this.CreateData('11', 'Visualization_JPH_FiveOp_Query', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.currentBeatCount.set(response.data[i].StationName, response.data[i].NumCount)
|
||||
}
|
||||
})
|
||||
param[0] = ['开始时间', this.dateTime[0]]
|
||||
param[1] = ['结束时间', this.dateTime[1]]
|
||||
param[2] = ['工位_check', stationCheck]
|
||||
param[3] = ['工位列表', this.stationValues.join(',')]
|
||||
param[4] = ['订单号_check', orderCheck]
|
||||
param[5] = ['订单号', this.orderNumberValue]
|
||||
param[6] = ['产品型号代码_check', engineTypeCheck]
|
||||
param[7] = ['产品型号代码', this.engineTypeValue]
|
||||
const Data = this.CreateData('2001', '质量数据查询_测量数据发动机在线状态_工位JPH_历史_导出', param)
|
||||
this.exportExcel_NPOI(Data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topCard {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.toolbarRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chartCard {
|
||||
width: 100%;
|
||||
margin: 0 0 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chartDom {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user