From dcf9c9e0410fe1186239e3f8d6f7bdc789c08010 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期三, 05 六月 2024 18:00:39 +0800 Subject: [PATCH] 1 --- src/views/mdc/status-record.vue | 318 +++++++++++++++++++++++++++++++++++----------------- 1 files changed, 213 insertions(+), 105 deletions(-) diff --git a/src/views/mdc/status-record.vue b/src/views/mdc/status-record.vue index 6b6a62d..0ae953e 100644 --- a/src/views/mdc/status-record.vue +++ b/src/views/mdc/status-record.vue @@ -2,97 +2,105 @@ * @Author: lzhe lzhe@example.com * @Date: 2024-04-26 09:36:18 * @LastEditors: lzhe lzhe@example.com - * @LastEditTime: 2024-04-26 18:07:52 + * @LastEditTime: 2024-06-05 11:49:48 * @FilePath: /smart-web/src/views/mdc/status-record.vue * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> - <div class="aposcope-main"> - <div class="aposcope-left"> - <div class="left-title">鏌ヨ鏉′欢</div> - <div class="left-title-col">鏃ユ湡</div> - <el-date-picker v-model="time" type="daterange" :shortcuts="shortcuts" range-separator="-" size="small" style="width: 100%;" value-format="YYYY-MM-DD"/> - <div class="left-title-col">宸ヤ綅</div> - <div class="MYTree"> - <MYTree getAll v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> - </div> - <div class="footer"> - <el-button @click="query" type="primary">鏌ヨ</el-button> - <el-button @click="exportData">瀵煎嚭</el-button> - </div> - </div> - <div class="aposcope-right"> - <el-tabs tab-position="top" v-model="activeName" type="card" @tab-change="tabChange"> - <el-tab-pane label="鎸夋棩鏈熸煡鐪�" name="shift"> - <el-button-group> - <el-button @click="changeTab(item)" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button> - </el-button-group> - <div class="status"> - <div class="status-wrap align-left"> - <div class="collect-status">閲囬泦鐘舵��</div> - <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> - </div> - <div class="status-wrap"> - <el-checkbox v-model="checked1" label="浜哄伐鍙嶉鐘舵��" size="large" /> - <div class="status-con"> - <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + <el-main style="height: 100%;"> + <el-card shadow="never" style="height: 100%;" body-style="height: 100%;padding: 0;"> + <el-container style="height: 100%;"> + <el-aside width="300px" style="height: 100%;"> + <el-container> + <div class="left-title">鏌ヨ鏉′欢</div> + <el-main style="padding: 20px;"> + <div class="left-title-col">鏃ユ湡</div> + <el-date-picker v-model="time" type="daterange" :shortcuts="shortcuts" range-separator="-" size="small" style="width: 100%;" value-format="YYYY-MM-DD"/> + <div class="left-title-col">宸ヤ綅</div> + <div class="MYTree"> + <MYTree getAll v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> </div> - </div> - </div> - <!-- collectionstatus 鍙嶉鐘舵�� - date 鏃ユ湡 - workstationInfoList 宸ヤ綅list --> - <record-charts-by-date :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts-by-date> - </el-tab-pane> - <el-tab-pane label="鎸夊伐浣嶆煡鐪�" name="time"> - <div class="fact-analysis-realtim"> - <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-show="isshowempty"> - <div class="wimi-empty-img" style="width: 150px; height: 150px;"> - <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;"> - </div> - <div class="empty-description"> - <div>鏆傛棤鏁版嵁</div> - </div> - </div> - <div v-show="!isshowempty"> - <el-button-group> - <el-button @click="changeTabGongwei(item)" :type="btnGongweiListActive == item.id ? 'primary' : ''" v-for="item in btnGongweiList" :key="item.id" size="small">{{item.name }}</el-button> - </el-button-group> - <div class="status"> - <div class="status-wrap align-left"> - <div class="collect-status">閲囬泦鐘舵��</div> - <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> - </div> - <div class="status-wrap"> - <el-checkbox v-model="checked1" label="浜哄伐鍙嶉鐘舵��" size="large" /> - <div class="status-con"> - <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + </el-main> + <el-footer> + <el-button @click="query" type="primary">鏌ヨ</el-button> + <el-button @click="exportData">瀵煎嚭</el-button> + </el-footer> + </el-container> + </el-aside> + <el-container> + <el-main> + <el-tabs tab-position="top" v-model="activeName" type="card" @tab-change="tabChange"> + <el-tab-pane label="鎸夋棩鏈熸煡鐪�" name="shift"> + <el-button-group> + <el-button @click="changeTab(item)" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button> + </el-button-group> + <div class="status"> + <div class="status-wrap align-left"> + <div class="collect-status">閲囬泦鐘舵��</div> + <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + </div> + <div class="status-wrap"> + <el-checkbox v-model="checked1" label="浜哄伐鍙嶉鐘舵��" size="large" /> + <div class="status-con"> + <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + </div> </div> </div> - </div> - <!-- collectionstatus 鍙嶉鐘舵�� - date 鏃ユ湡 - workstationInfoList 宸ヤ綅list --> - <record-charts-by-workstation :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts-by-workstation> - </div> - </div> - </el-tab-pane> - </el-tabs> - </div> - </div> + <!-- collectionstatus 鍙嶉鐘舵�� + date 鏃ユ湡 + workstationInfoList 宸ヤ綅list --> + <record-charts-by-date :achievements="allwcs" :date="date" :workstationInfoList="workstationInfoList" v-if="date != ''" ref="chart01"></record-charts-by-date> + </el-tab-pane> + <el-tab-pane label="鎸夊伐浣嶆煡鐪�" name="time"> + <div class="fact-analysis-realtim"> + <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-show="isshowempty"> + <div class="empty-description"> + <div>鏆傛棤鏁版嵁</div> + </div> + </div> + <div v-show="!isshowempty"> + <el-button-group> + <el-button @click="changeTabGongwei(item)" :type="btnGongweiListActive == item.id ? 'primary' : ''" v-for="item in btnGongweiList" :key="item.id" size="small">{{item.name }}</el-button> + </el-button-group> + <div class="status"> + <div class="status-wrap align-left"> + <div class="feed-button" @click="table_edit">鐘舵�佸弽棣�</div> + <div class="collect-status">閲囬泦鐘舵��</div> + <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + </div> + <div class="status-wrap"> + <el-checkbox v-model="checked1" label="浜哄伐鍙嶉鐘舵��" size="large" /> + <div class="status-con"> + <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div> + </div> + </div> + </div> + <!-- setWork 鍏ュ弬 --> + <record-charts-by-workstation :setWork="setWork" :select="workSelect" :achievements="allwcs" ref="chart02"></record-charts-by-workstation> + </div> + </div> + <save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog> + </el-tab-pane> + </el-tabs> + </el-main> + </el-container> + </el-container> + </el-card> + </el-main> </template> <script> +import saveDialog from './add-station-status' import moment from 'moment'; import MYTree from './MYTree.vue'; import recordChartsByDate from './components/recordChartsByDate.vue'; import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue'; export default { components: { - time: "", MYTree, recordChartsByDate, - recordChartsByWorkstation + recordChartsByWorkstation, + saveDialog }, watch: { treeChecked(select) { @@ -106,6 +114,10 @@ data() { return { isshowempty: true, + dialog: { + save: false + }, + workSelect: [], select: [], workstationInfoList: [], date: "", @@ -148,7 +160,10 @@ time: [], treeChecked: [], achievements: [], - collectionstatus: [] + collectionstatus: [], + workstationId: "", + setWork: {}, + allwcs: [] } }, created() { @@ -159,11 +174,46 @@ this.init(); }, methods: { + addfeedbackSuccess() { + var workstationName = ""; + this.btnGongweiList.forEach(item=> { + if(item.id == this.btnGongweiListActive) { + workstationName = item.name; + } + }) + this.setWork = { + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: true, + machineFeedback: true, + workstationId: this.lastLevelId, + workstationName: workstationName + } + }, + table_edit(){ + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open('edit').setData(this.lastLevelId); + }) + }, tabChange(val) { - if(val == "time") { //鎸夊伐浣嶆煡鐪� - - }else if(val == "shift") { //鎸夋棩鏈熸煡鐪� - + if(val == "shift") { //鎸夋棩鏈熸煡鐪� + this.$refs.chart01.getCharts(); + }else if(val == "time") { //鎸夊伐浣嶆煡鐪� + if(this.btnGongweiList.length != 0) { //鏈夐�夊伐浣嶆墠鑳藉睍绀哄伐浣� + this.btnGongweiListActive = this.btnGongweiList[0].id; //宸ヤ綅 + this.lastLevelId = this.btnGongweiListActive; + this.setWork = { //宸ヤ綅 + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: true, + machineFeedback: true, + workstationId: this.select[0].id, + workstationName: this.btnGongweiList[0].name + } + this.workSelect = this.select; + this.$refs.chart02.getCharts(); + } } }, exportData() { //瀵煎嚭 @@ -181,9 +231,30 @@ changeTab(item) { this.btnListActive = item.id; this.date = item.id; + this.$nextTick(()=> { + this.$refs.chart01.getCharts(); + }) }, changeTabGongwei(item) { //鎸夊伐浣嶆煡璇� - + this.btnGongweiListActive = item.id; + this.lastLevelId = this.btnGongweiListActive; + var workstationName = ""; + this.btnGongweiList.forEach(item=> { + if(item.id == this.btnGongweiListActive) { + workstationName = item.name; + } + }) + this.setWork = { + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: true, + machineFeedback: true, + workstationId: item.id, + workstationName: workstationName + } + this.$nextTick(()=> { + this.$refs.chart02.getCharts(); + }) }, getachievements() { //鐝鐘舵�佽褰曢噰闆嗙姸鎬� this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> { @@ -200,27 +271,29 @@ }) this.achievements = achievements; this.collectionstatus = collectionstatus; + this.allwcs = res.data; } }) }, getTime(data) { - this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', { - ...data - }).then(res => { - if (res.code === 200) { - var today = moment().format('YYYY-MM-DD'); - var yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD'); - res.data.forEach(item=> { - if(item.title == today) { - item.title = "浠婂ぉ"; - } - if(item.title == yesterday) { - item.title = "鏄ㄥぉ"; - } - }) - this.btnList = res.data.reverse(); - this.btnListActive = res?.data?.[0]?.id - } + return new Promise(resolve=> { + this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {...data}).then(res => { + if (res.code === 200) { + var today = moment().format('YYYY-MM-DD'); + var yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD'); + res.data.forEach(item=> { + if(item.title == today) { + item.title = "浠婂ぉ"; + } + if(item.title == yesterday) { + item.title = "鏄ㄥぉ"; + } + }) + this.btnList = res.data.reverse(); + this.btnListActive = res?.data?.[0]?.id + resolve(); + } + }) }) }, init() { @@ -232,13 +305,35 @@ }, query() { - this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); - this.workstationInfoList = this.select; - if(this.select.length != 0) { //閫変簡鍊兼樉绀哄伐浣� - this.btnGongweiList = this.select; - this.btnGongweiListActive = this.btnGongweiList[0].id; - this.isshowempty = false; - } + this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}).then(()=> { + this.workstationInfoList = this.select; + this.btnGongweiList = this.select; //宸ヤ綅 + this.date = this.btnList[0].id; + if(this.activeName == "shift") { + this.$nextTick(()=> { + this.$refs.chart01.getCharts(); + }) + }else { + if(this.btnGongweiList.length != 0) { //鏈夐�夊伐浣嶆墠鑳藉睍绀哄伐浣� + this.isshowempty = false; + console.log(this.btnGongweiList,122) + this.btnGongweiListActive = this.btnGongweiList[0].id; //宸ヤ綅 + this.lastLevelId = this.btnGongweiListActive; + this.setWork = { //宸ヤ綅 + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: true, + machineFeedback: true, + workstationId: this.select[0].id, + workstationName: this.btnGongweiList[0].name + } + this.workSelect = this.select; + this.$nextTick(()=> { + this.$refs.chart02.getCharts(); + }) + } + } + }); } } } @@ -298,7 +393,10 @@ z-index: 99; } .MYTree { - height: calc(100% - 200px); + height: 600px; + } + .MYTree-content { + height: 100%; overflow: hidden; overflow-y: auto; } @@ -344,7 +442,7 @@ flex-wrap: wrap; } .status-wrap /deep/ .el-checkbox.el-checkbox--large { - color: #3b8e8e; + color: #409eff; } .fact-analysis-realtim { display: flex; @@ -374,4 +472,14 @@ margin-top: -16px; line-height: 28px; } + .feed-button { + position: absolute; + right: 10px; + top: -2px; + color: #409eff; + cursor: pointer; + } + .aposcope-right /deep/ .el-tabs__content { + overflow: visible; + } </style> \ No newline at end of file -- Gitblit v1.9.3