From e2fdfe540eaf160dc7d063c60667041edcc64e86 Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期二, 05 十一月 2024 22:55:14 +0800 Subject: [PATCH] 处理显示名称 --- src/views/mdc/output-statistics.vue | 181 ++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 161 insertions(+), 20 deletions(-) diff --git a/src/views/mdc/output-statistics.vue b/src/views/mdc/output-statistics.vue index 9c04d69..64fbd66 100644 --- a/src/views/mdc/output-statistics.vue +++ b/src/views/mdc/output-statistics.vue @@ -1,25 +1,18 @@ <!-- * @Date: 2024-04-09 22:11:21 - * @LastEditors: Sneed - * @LastEditTime: 2024-04-20 20:43:33 + * @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> - <el-main style="height: 100%;"> + <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>缁熻鏁版嵁</el-col> - <el-col> - <el-select style="width: 250px" v-model="productivityType"> - <el-option v-for="(item, index) in options" :key="index" :label="item.label" - :value="item.value"></el-option> - </el-select> - </el-col> <el-col style="margin-top: 14px;">鏃ユ湡</el-col> <el-col> <el-date-picker value-format="YYYY-MM-DD" style="width: 250px" v-model="time" @@ -32,25 +25,41 @@ <MYTree v-model="treeChecked" show-checkbox></MYTree> </el-main> <el-footer> - <el-button @click="query">鏌ヨ</el-button> - <el-button>瀵煎嚭</el-button> + <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-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 ref="shift" v-if="activeName == '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 ref="time" v-if="activeName == '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> @@ -59,12 +68,21 @@ 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 + Time, + exportDialog, + Efficiency }, watch: { activeName() { @@ -76,10 +94,90 @@ }, data() { return { + showModalList: [3], + dialogVisible: false, activeName: 'shift', - productivityType: 'OEE', 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: '绋煎姩鐜�', @@ -103,11 +201,29 @@ 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], - productivityType: this.productivityType, shiftIndexList: [1, 2], workStationIdList: [...this.treeChecked] }) @@ -116,4 +232,29 @@ } </script> -<style lang="scss" scoped></style> \ No newline at end of file +<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