| | |
|---|
| | | <!-- |
|---|
| | | * @Date: 2024-04-09 22:11:21 |
|---|
| | | * @LastEditors: Sneed |
|---|
| | | * @LastEditTime: 2024-04-09 22:14:26 |
|---|
| | | * @LastEditTime: 2024-06-22 18:35:47 |
|---|
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/output-statistics.vue |
|---|
| | | * 效率分析 |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <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 type="primary" @click="query">查询</el-button> |
|---|
| | | <!-- <el-button @click="exportExcel">导出</el-button> --> |
|---|
| | | <exportDialog @export="exportExcel"></exportDialog> |
|---|
| | | </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 :options="chartOption" :datasetNum="1" colname="产量" |
|---|
| | | :colnameFn="val => { return val }" url="/api/mdc/output" ref="shift" |
|---|
| | | v-if="activeName == 'shift'"> |
|---|
| | | </Shift> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="按时间周期统计" name="time"> |
|---|
| | | <Time :resFn="val => val" :options="chartOption1" :colnameFn="val => { return val }" |
|---|
| | | url="/api/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' |
|---|
| | | import exportDialog from '@/layout/components/exportDialog.vue' |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | MYTree, |
|---|
| | | Shift, |
|---|
| | | Time, |
|---|
| | | exportDialog |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | activeName() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.query() |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | activeName: 'shift', |
|---|
| | | time: [], |
|---|
| | | treeChecked: [], |
|---|
| | | chartOption1: { |
|---|
| | | title: { |
|---|
| | | text: '统计图表', |
|---|
| | | subtext: '', |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '80px' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | valueFormatter: (params) => { |
|---|
| | | return params |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | axisLabel: { |
|---|
| | | interval: 'auto', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | formatter: (value) => { |
|---|
| | | return value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | dataZoom: [ |
|---|
| | | { type: 'slider' } |
|---|
| | | ], |
|---|
| | | dataset: { |
|---|
| | | source: [] |
|---|
| | | }, |
|---|
| | | series: [] |
|---|
| | | }, |
|---|
| | | chartOption: { |
|---|
| | | legend: { |
|---|
| | | type: 'plain', |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: '统计图表', |
|---|
| | | subtext: '', |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '80px' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | formatter: (value) => { |
|---|
| | | return value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | dataZoom: [ |
|---|
| | | { type: 'slider' } |
|---|
| | | ], |
|---|
| | | dataset: { |
|---|
| | | source: [ |
|---|
| | | ['product', '班次1', '班次2'], |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | type: 'bar', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | 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: { |
|---|
| | | exportExcel(statisticalMethod) { |
|---|
| | | this.$HTTP.post(`/api/mdc/output/export`, { |
|---|
| | | startDate: this.time[0], |
|---|
| | | endDate: this.time[1], |
|---|
| | | statisticalMethod, |
|---|
| | | queryType: 1, |
|---|
| | | shiftIndexList: [1, 2], |
|---|
| | | workStationIdList: this.treeChecked |
|---|
| | | }).then(res => { |
|---|
| | | if (res.success) { |
|---|
| | | window.open(res.data.link) |
|---|
| | | } else { |
|---|
| | | this.$message.error(res.msg) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | 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> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
