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 | 732 +++++++++++++++++++++++++++++-------------------------- 1 files changed, 386 insertions(+), 346 deletions(-) diff --git a/src/views/mdc/status-record.vue b/src/views/mdc/status-record.vue index fe5d41b..0ae953e 100644 --- a/src/views/mdc/status-record.vue +++ b/src/views/mdc/status-record.vue @@ -1,94 +1,131 @@ +<!-- + * @Author: lzhe lzhe@example.com + * @Date: 2024-04-26 09:36:18 + * @LastEditors: lzhe lzhe@example.com + * @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 v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> - </div> - <div class="footer"> - <el-button @click="query" type="primary">鏌ヨ</el-button> - <el-button>瀵煎嚭</el-button> - </div> - </div> - <div class="aposcope-right"> - <el-tabs tab-position="top" v-model="activeName" type="card"> - <el-tab-pane label="鎸夋棩鏈熸煡鐪�" name="shift"> - <el-button-group> - <el-button @click="btnListActive = item.id" :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> - <div> - <div id="record" style="width: 100%;height:500px;"></div> - </div> - <div class="pagination"> - <el-pagination layout="prev, pager, next" :total="total" :default-page-size="6"/> - </div> - </el-tab-pane> - <el-tab-pane label="鎸夊伐浣嶆煡鐪�" name="time"> - 鎸夊伐浣嶆煡鐪� - </el-tab-pane> - </el-tabs> - </div> - </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> + <!-- 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> -// 妯℃嫙鏁版嵁锛岃〃绀烘瘡涓皬鏃剁殑鍗犵敤鎯呭喌 -var data = []; -for (var i = 0; i < 24; i++) { - data.push(Math.random() * 100); // 闅忔満鐢熸垚鍗犵敤鎸囨暟 -} +import saveDialog from './add-station-status' import moment from 'moment'; -import MYTree from './MYTree.vue' -import Shift from './components/Shift.vue' -import Time from './components/Time.vue' -import * as echarts from 'echarts'; +import MYTree from './MYTree.vue'; +import recordChartsByDate from './components/recordChartsByDate.vue'; +import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue'; export default { components: { - time: "", MYTree, - Shift, - Time + recordChartsByDate, + recordChartsByWorkstation, + saveDialog }, watch: { - activeName() { - // this.$nextTick(() => { - // this.query() - // }) - }, - btnListActive(val) { - // this.query({ - // ...this.params, - // startDate: val, - // endDate: val - // }) - // this.queryChart({ - // ...this.params, - // startDate: val, - // endDate: val - // }) + treeChecked(select) { + var arr = []; + select.forEach(item=> { + arr.push({id: item.id,name: item.code}) + }) + this.select = arr; } }, data() { return { + isshowempty: true, + dialog: { + save: false + }, + workSelect: [], + select: [], workstationInfoList: [], + date: "", checked1: true, btnListActive: '', + btnGongweiListActive: "", btnList: [], + btnGongweiList: [], timeBtn: "", shortcuts: [ { @@ -124,112 +161,101 @@ treeChecked: [], achievements: [], collectionstatus: [], - current: "1", - size: "6", - total: 0, - recordOptionLog: { - tooltip: { - trigger: 'axis', - axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 - type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' - }, - formatter: function (params) { - var tar; - if (params[1].value != '-') { - tar = params[1]; - } - else { - tar = params[0]; - } - return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value; - } - }, - grid: { - top: 10 - }, - yAxis: { - type: 'category', - axisLabel: { - formatter: function (value) { - return value + "\n" + '{a|鐘舵�佸弽棣坿'; - }, - rich: { - a: { - color: '#409eff', - cursor: 'pointer', - fontSize: '12px' - } - } - }, - //data: ['461', '462', '516', '517', '512', '513'] - data: ['461', '462', '516'] - }, - xAxis: { - type: 'value', - min: 0, - max: 1440, // 鍗曚綅鍒嗛挓 - interval: 1440/6, //姣忛殧澶氬皯鍒嗛挓鏄剧ず涓�涓埢搴� - axisLabel: { - formatter: (value)=> { - if(value == 0) { - return "00:00:00"; - }else if(value == 240) { - return "04:00:00"; - }else if(value == 480) { - return "08:00:00"; - }else if(value == 720) { - return "12:00:00"; - }else if(value == 960) { - return "16:00:00"; - }else if(value == 1200) { - return "18:00:00"; - }else if(value == 1440) { - return "00:00:00"; - } - } - } - }, - series: [ - { - name: '杈呭姪', - type: 'bar', - stack: '鎬婚噺', - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - }, - emphasis: { - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - } - }, - data: [0, 0, 0, 240, 360, 540] //浠庝粈涔堟椂鍊欏紑濮嬬殑 - }, - { - name: '鏃堕棿', - type: 'bar', - stack: '鎬婚噺', - label: { - normal: { - show: true, - position: 'top' - } - }, - data: ['-', '-', '-', 1200, 240, 900] //鏁板�兼槸鍑狅紝濡�(20锛屽氨鏄粠4寮�濮嬶紝20鏍兼暟鎹�) - } - ] - } + workstationId: "", + setWork: {}, + allwcs: [] } }, created() { }, mounted() { - this.getCharts(); - //this.init(); + this.date = moment().format('YYYY-MM-DD'); + 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 == "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() { //瀵煎嚭 + var obj = { + endTime: this.time[1], + startTime: this.time[0], + workstationInfoList: this.workstationInfoList + } + this.$HTTP.post(`/api/blade-mdc/status-record/excel/export`,obj).then(res=> { + if(res.code == 200) { + window.open(res.data.link); + } + }) + }, + 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=> { if(res.code == 200) { @@ -245,201 +271,215 @@ }) 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 - } - }) - }, - getCharts() { - var obj = { - //date: this.time[1], - date: "2024-04-16", - humanFeedback: true, - machineFeedback: true, - workstationInfoList: this.workstationInfoList - } - var recordDom = document.getElementById('record'); - var myChart = echarts.init(recordDom); - myChart.setOption(this.recordOptionLog); - //娣诲姞dom锛屽畾浣� - var parentNodeDom = document.createElement('div'); - recordDom.appendChild(parentNodeDom); - for(var i=0;i<this.recordOptionLog.yAxis.data.length;i++) { - var dom = document.createElement('span'); - dom.className = "domSpan spanIndex" + i; - dom.style.top = i*70 + 40 + "px"; - parentNodeDom.appendChild(dom); - } - //鍒犻櫎dom - //parentNodeDom.remove(); - return; - this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => { - if (res.code === 200) { - //this.recordOptionLog.series[0].data = res.data.records.statusRecordList; - // var yAxis = []; - // res.data.records.forEach(item=> { - // item.value = item.workstationInfo.name; - // }) - // this.recordOptionLog.yAxis.data = res.data.records; - this.total = res.data.total; - } + 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() { this.time = [moment().subtract(2, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]; this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); //鏃ユ湡sort this.getachievements(); //閲囬泦鐘舵�乷r浜哄伐鍙嶉鐘舵�� - this.getCharts(); }, timeBtnChange() { }, query() { - this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); - //this.getCharts(); - console.log(this.treeChecked,2) + 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(); + }) + } + } + }); } } } </script> <style scoped> -.aposcope-main { - display: flex; - min-height: 100%; - height: 100%; - overflow: hidden; - margin: 8px; -} -.aposcope-left { - position: relative; - width: 240px; - margin-right: 8px; - padding: 4px; - height: 100%; - background-color: #fff; - border-radius: 2px; - overflow: hidden; -} -.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; -} -.left-title-col { - margin-bottom: 8px; - font-size: 14px; - margin-top: 8px; -} -.footer { - padding: 0px 32px; - border-radius: 0 0 2px 2px; - background: #fff; - box-shadow: -1px 0 3px rgba(92, 92, 92, .16); - height: 48px; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 0 10px; - box-sizing: border-box; - z-index: 99; -} -.MYTree { - height: calc(100% - 200px); - overflow: hidden; - overflow-y: auto; -} -.status { - display: flex; - align-items: start; - flex-direction: column; - justify-content: start; - margin: 20px 0 8px; - position: relative; - width: 100%; - font-size: 16px; - cursor: pointer; -} -.status-wrap.align-left, .status-wrap:first-child { - padding-left: 24px; -} -.status-wrap { - display: flex; - flex-wrap: wrap; - justify-content: start; -} -.collect-status { - color: #409eff; - margin-right: 16px; - font-size: 14px; -} -.status-box { - margin: 0 8px; - display: flex; - align-items: center; - justify-content: flex-start; -} -.status-color { - width: 40px; - height: 15px; - border-radius: 2px; - margin-right: 8px; -} -.status-wrap .status-con { - display: flex; - flex: 1; - flex-wrap: wrap; -} -.status-wrap /deep/ .el-checkbox.el-checkbox--large { - color: #3b8e8e; -} -.pagination { - text-align: right; - display: flex; - justify-content: end; -} -#record { - background: red; - position: re lative; -} -#record /deep/ .domSpan { - display: inline-block; - width: 60px; - height: 20px; - background: green; - position: absolute; - left: 55px; -} + .aposcope-main { + display: flex; + min-height: 100%; + margin: 8px; + } + .aposcope-left { + position: relative; + width: 240px; + margin-right: 8px; + padding: 4px; + height: 100%; + background-color: #fff; + border-radius: 2px; + overflow: hidden; + } + .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; + } + .left-title-col { + margin-bottom: 8px; + font-size: 14px; + margin-top: 8px; + } + .footer { + padding: 0px 32px; + border-radius: 0 0 2px 2px; + background: #fff; + box-shadow: -1px 0 3px rgba(92, 92, 92, .16); + height: 48px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 0 10px; + box-sizing: border-box; + z-index: 99; + } + .MYTree { + height: 600px; + } + .MYTree-content { + height: 100%; + overflow: hidden; + overflow-y: auto; + } + .status { + display: flex; + align-items: start; + flex-direction: column; + justify-content: start; + margin: 20px 0 8px; + position: relative; + width: 100%; + font-size: 16px; + cursor: pointer; + } + .status-wrap.align-left, .status-wrap:first-child { + padding-left: 24px; + } + .status-wrap { + display: flex; + flex-wrap: wrap; + justify-content: start; + } + .collect-status { + color: #409eff; + margin-right: 16px; + font-size: 14px; + } + .status-box { + margin: 0 8px; + display: flex; + align-items: center; + justify-content: flex-start; + } + .status-color { + width: 40px; + height: 15px; + border-radius: 2px; + margin-right: 8px; + } + .status-wrap .status-con { + display: flex; + flex: 1; + flex-wrap: wrap; + } + .status-wrap /deep/ .el-checkbox.el-checkbox--large { + color: #409eff; + } + .fact-analysis-realtim { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + box-sizing: border-box; + background: #fff; + height: 500px; + } + .wimi-empty { + height: 100%; + width: 100%; + display: flex; + border-radius: 2px; + flex-direction: column; + flex-wrap: nowrap; + align-content: center; + justify-content: center; + align-items: center; + } + .empty-description { + margin-bottom: 20px; + font-size: 14px; + color: #5e6d82; + 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