完善报警统计

gaoshp

2024-04-22 5fb43d29f47d9b316414b28ea84a6fab3133b856

 src/views/mdc/status-record.vue

@@ -1,21 +1,189 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 22:12:56
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/status-record.vue
-->
<template>
    <div>
        状态记录
    </div>
   <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>
    export default {
        
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 lang="scss" scoped>

<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>