<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<div class="left-title">查询条件</div>
|
<div>日期</div>
|
<!-- <el-date-picker
|
v-model="time"
|
type="datetimerange"
|
range-separator="-"
|
start-placeholder=""
|
end-placeholder="" />
|
-->
|
<el-date-picker
|
v-model="time"
|
type="datetimerange"
|
:shortcuts="shortcuts"
|
range-separator="-"
|
start-placeholder="Start date"
|
end-placeholder="End date"
|
/>
|
|
<!-- <el-date-picker value-format="YYYY-MM-DD" style="width: 250px" v-model="time" type="daterange" range-separator="-" start-placeholder="" end-placeholder="" /> -->
|
</div>
|
<div class="aposcope-right">
|
</div>
|
</div>
|
<!-- <el-main style="height: 100%;">
|
<el-card shadow="never" style="height: 100%;" body-style="height: 100%">
|
<el-container style="height: 100%;">
|
<el-aside width="300px" style="height: 100%;">
|
<el-container>
|
<el-main class="nopadding">
|
<el-row>
|
<el-col style="margin-top: 14px;">日期</el-col>
|
<el-col>
|
<el-date-picker value-format="YYYY-MM-DD" style="width: 250px" v-model="time"
|
type="daterange" range-separator="-" start-placeholder="" end-placeholder="" />
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 14px;">
|
工位
|
</el-row>
|
<MYTree v-model="treeChecked" show-checkbox></MYTree>
|
</el-main>
|
<el-footer>
|
<el-button @click="query">查询</el-button>
|
<el-button>导出</el-button>
|
</el-footer>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-main>
|
<el-tabs tab-position="top" v-model="activeName" type="card">
|
<el-tab-pane label="按班次统计" name="shift">
|
<Shift colname="产量" url="/api/blade-mdc/output" ref="shift"
|
v-if="activeName == 'shift'">
|
</Shift>
|
</el-tab-pane>
|
<el-tab-pane label="按时间周期统计" name="time">
|
<Time url="/api/blade-mdc/output" ref="time" v-if="activeName == 'time'">
|
|
</Time>
|
</el-tab-pane>
|
</el-tabs>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
</el-main> -->
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import MYTree from './MYTree.vue'
|
import Shift from './components/Shift.vue'
|
import Time from './components/Time.vue'
|
|
export default {
|
components: {
|
time: "",
|
MYTree,
|
Shift,
|
Time,
|
shortcuts: [
|
{
|
text: 'Last week',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setDate(start.getDate() - 7)
|
return [start, end]
|
},
|
},
|
{
|
text: 'Last month',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setMonth(start.getMonth() - 1)
|
return [start, end]
|
},
|
},
|
{
|
text: 'Last 3 months',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setMonth(start.getMonth() - 3)
|
return [start, end]
|
},
|
},
|
]
|
},
|
watch: {
|
activeName() {
|
this.$nextTick(() => {
|
this.query()
|
})
|
|
}
|
},
|
data() {
|
return {
|
activeName: 'shift',
|
time: [],
|
treeChecked: [],
|
options: [
|
{
|
label: '稼动率',
|
value: 'OEE',
|
},
|
{
|
label: '报警率',
|
value: 'ALARM',
|
},
|
{
|
label: '运行率',
|
value: 'RUNNING',
|
},
|
]
|
}
|
},
|
created() {
|
this.time = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
|
},
|
mounted() {
|
this.query()
|
},
|
methods: {
|
query() {
|
// this.$refs[this.activeName].init({
|
// endDate: this.time[1],
|
// startDate: this.time[0],
|
// shiftIndexList: [1, 2],
|
// workStationIdList: [...this.treeChecked]
|
// })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
}
|
</style>
|
