From eef1ef0be935d4a3d8fc691b2666f41796b2d4a5 Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期一, 04 十一月 2024 19:57:08 +0800 Subject: [PATCH] 增加列表显示 --- src/views/mdc/output-statistics.vue | 257 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 248 insertions(+), 9 deletions(-) diff --git a/src/views/mdc/output-statistics.vue b/src/views/mdc/output-statistics.vue index 3a6aea1..64fbd66 100644 --- a/src/views/mdc/output-statistics.vue +++ b/src/views/mdc/output-statistics.vue @@ -1,21 +1,260 @@ <!-- * @Date: 2024-04-09 22:11:21 - * @LastEditors: Sneed - * @LastEditTime: 2024-04-09 22:14:26 + * @LastEditors: lzhe lzhe@example.com + * @LastEditTime: 2024-11-04 12:24:06 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/output-statistics.vue + * 鏁堢巼鍒嗘瀽 --> <template> - <div> - 浜ч噺缁熻 - </div> + <el-main style="height: 100%;" class="outputStatistics"> + <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 style="position: relative;"> + <span class="setSpan"> + <el-icon class="setIcon"> + <Setting /> + </el-icon> + <span class="setBtn" @click="openSet">浜ч噺缁熻璁剧疆</span> + </span> + <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-dialog title="璁剧疆" v-model="dialogVisible" v-if="dialogVisible" width="30%" class="setModelStyle"> + <Efficiency :showModalList="showModalList" /> + </el-dialog> + </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' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import Efficiency from './configComp/Efficiency.vue' +let icons = [] +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + icons.push(key) +} +export default { + components: { + ...ElementPlusIconsVue, + MYTree, + Shift, + Time, + exportDialog, + Efficiency + }, + watch: { + activeName() { + this.$nextTick(() => { + this.query() + }) + + } + }, + data() { + return { + showModalList: [3], + dialogVisible: false, + 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: { + openSet() { + this.dialogVisible = true; + }, + 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 scoped> + .setSpan { + vertical-align: sub; + font-size: 14px; + position: absolute; + top: 26px; + left: 280px; + z-index: 11; + } + .setIcon { + color: #409eff; + margin-left: 15px; + vertical-align: -2px; + } + .setBtn { + margin-left: 2px; + color: #409eff; + margin-left: 8px; + cursor: pointer; + font-size: 14px; + } + .outputStatistics >>> .el-dialog__body { + padding-bottom: 0px; + padding-top: 0px; + } </style> \ No newline at end of file -- Gitblit v1.9.3