From 7243d05010bde40a8c82b7cbbf904eeb35168cdd Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期二, 23 四月 2024 23:09:57 +0800 Subject: [PATCH] update --- src/views/mdc/station-live.vue | 595 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 546 insertions(+), 49 deletions(-) diff --git a/src/views/mdc/station-live.vue b/src/views/mdc/station-live.vue index 7eba7c9..0afc929 100644 --- a/src/views/mdc/station-live.vue +++ b/src/views/mdc/station-live.vue @@ -2,7 +2,7 @@ * @Author: lzhe lzhe@example.com * @Date: 2024-03-26 10:28:33 * @LastEditors: lzhe lzhe@example.com - * @LastEditTime: 2024-04-18 18:27:19 + * @LastEditTime: 2024-04-23 17:08:42 * @FilePath: /smart-web/src/views/master/person/main/index.vue * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> @@ -16,20 +16,20 @@ <div class="content-machine-box"> <div class="content-machine-img"><img src="./station.png" alt=""></div> <div class="content-machine-detail"> - <div class="content-machine-name">461</div> + <div class="content-machine-name">{{stationForm.machineName}}</div> <el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;"> <el-row> <el-col :span="8"> - <el-form-item label="宸ヤ綅缂栧彿">{{stationForm.test}}</el-form-item> + <el-form-item label="宸ヤ綅缂栧彿">{{stationForm.code}}</el-form-item> </el-col> <el-col :span="8"> - <el-form-item label="鏈哄櫒鍝佺墝">{{stationForm.test}}</el-form-item> + <el-form-item label="鏈哄櫒鍝佺墝">{{stationForm.machineBrand}}</el-form-item> </el-col> <el-col :span="8"> - <el-form-item label="鏈哄櫒缂栧彿">{{stationForm.test}}</el-form-item> + <el-form-item label="鏈哄櫒缂栧彿">{{stationForm.machineCode}}</el-form-item> </el-col> <el-col :span="8"> - <el-form-item label="鏈哄櫒鍚嶇О">{{stationForm.test}}</el-form-item> + <el-form-item label="鏈哄櫒鍚嶇О">{{stationForm.machineName}}</el-form-item> </el-col> </el-row> </el-form> @@ -37,24 +37,229 @@ </div> <div class="collect-info-panel"> <div class="fact-analysis-realtim"> - <div class="fact-analysis-card"> - <div class="card-name" style="background-color: rgb(127, 192, 192);">璁惧鐘舵��</div> + <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0"> + <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 class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0"> + <div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div> <div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div> </div> </div> </div> + <el-tabs type="border-card" class="demo-tabs"> + <el-tab-pane label="宸ヤ綅鏁版嵁"> + <div style="text-align: right;margin-bottom: 14px;"> + <el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" /> + </div> + <div class="wcs-main"> + <div><div id="wcs-left" style="width: 100%;height:400px;"></div></div> + <div><div id="wcs-right" style="width: 100%;height:400px;"></div></div> + </div> + <div class="bottom-panel content-panel"> + <div class="panel-title">鐝鐘舵�佽褰�</div> + <div class="panel-content bottom-panel-chart"> + <div class="status"> + <div class="feed-button" @click="table_edit">鐘舵�佸弽棣�</div> + <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> + <div style="padding: 8px;"> + <div id="wcs-log" style="width: 100%;height:200px;"></div> + <el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;"> + <el-table-column prop="shiftIndexName" label="鐝"></el-table-column> + <el-table-column prop="temdata" label="璋冭瘯"></el-table-column> + <el-table-column prop="temdata" label="绂荤嚎"></el-table-column> + <el-table-column prop="temdata" label="寰呮満"></el-table-column> + <el-table-column prop="temdata" label="鎶ヨ"></el-table-column> + <el-table-column prop="temdata" label="杩愯"></el-table-column> + <el-table-column prop="perdata" label="绋煎姩鐜�%"></el-table-column> + <el-table-column prop="perdata" label="鎶ヨ鐜�%"></el-table-column> + </el-table> + </div> + </div> + </el-tab-pane> + <el-tab-pane label="鏈哄櫒灞ュ巻"> + <div class="alarm-title">鎶ヨ淇℃伅灞ュ巻</div> + <el-table ref="multipleTableRef" :data="alarmtableData" border style="width: 100%" class="multipleTableRef"> + <el-table-column prop="alarmCode" label="鎶ヨ浠g爜"></el-table-column> + <el-table-column prop="alarmMsg" label="鎶ヨ淇℃伅"></el-table-column> + <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿"></el-table-column> + </el-table> + <el-pagination + style="margin-top: 12px;" + @size-change="alarmSizeChange" + @current-change="alarmCurrentChange" + :current-page="currentPage4" + :page-sizes="[15, 50, 100]" + :page-size="15" + layout="total, sizes, prev, pager, next, jumper" + :total="alarmtotal"> + </el-pagination> + </el-tab-pane> + </el-tabs> </div> </div> - <save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog> + <save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog> </template> <script> -import saveDialog from './add-station-status' + import * as echarts from 'echarts'; + import saveDialog from './add-station-status' export default { name: "state-feedback", data(){ return { + achievements: [], + collectionstatus: [], + checked1: "", + alarmtotal: 0, + alarmtableData: [], + wcsDate: "", + wcsOptionL: { + title: { + text: '鐢ㄦ椂鍒嗗竷鎯呭喌', + left: 'left', + textStyle: { + fontSize:14 + } + }, + grid: { + top: 0, + }, + tooltip: { + trigger: 'item', + //formatter: '{a} <br/>{b} : {c} ({d}%)' + formatter: '{a} 0鍒嗛挓' + }, + legend: { + orient: 'vertical', + bottom: 'bottom', + data: ['璋冭瘯', '绂荤嚎', '寰呮満', '鎶ュ憡', '鎶ヨ', '杩愯'] + }, + series: [ + { + top: -30, + name: '鐢ㄦ椂:', + type: 'pie', + radius: '55%', + center: ['40%', '50%'], + data: [], + itemStyle: { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }, + wcsOptionR:{ + title: { + text: '璁惧鏁堢巼', + left: 'left', + textStyle: { + fontSize:14 + } + }, + xAxis: { + max: '100' + }, + yAxis: { + type: 'category', + data: ['杩愯鐜�', '鎶ヨ鐜�', '绋煎姩鐜�'] + }, + tooltip: { + trigger: 'item', + //formatter: '{a} <br/>{b} : {c} ({d}%)' + formatter: '{b} {c}%' + }, + series: [ + { + top: -30, + name: 'wcsR', + type: 'bar', + center: ['40%', '50%'], + data: [], + itemStyle: { + borderRadius: 8, + borderColor: '#fff', + borderWidth: 1 + }, + label: { + show: true, + position: 'right', + formatter: '{c}%', + valueAnimation: true + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ], + legend: { + show: true, // 寮哄埗鏄剧ず鍥句緥 + orient: 'vertical', // 鍥句緥鍒楄〃鐨勫竷灞�鏈濆悜锛屽彲閫夊�间负锛�'horizontal' 鎴� 'vertical' + left: 'left', // 鍥句緥缁勪欢绂诲鍣ㄥ乏渚х殑璺濈 + top: 'top', // 鍥句緥缁勪欢绂诲鍣ㄤ笂渚х殑璺濈 + data: ['杩愯鐜�', '鎶ヨ鐜�', '绋煎姩鐜�'] // 涓巗eries涓殑name瀵瑰簲锛岀敤浜庢樉绀哄浘渚嬪悕绉� + } + }, + wcsOptionLog:{ + grid: { + top: '0%' + }, + xAxis: { + type: 'category', + data: ['00:00:00', '02:00:00', '04:00:00', '06:00:00', '08:00:00', '10:00:00', '12:00:00', '14:00:00', '18:00:00'], + }, + yAxis: { + type: 'category', + data: ['1', '2'] + }, + series: [ + { + name: 'wcsLog', + type: 'bar', + data: [], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }, + dmpList: [], stationForm: { - test: "461" + code: "", + machineBrand: "", + machineCode: "", + machineName: "" }, dialog: { save: false @@ -78,46 +283,184 @@ }, parentId: "0", tableData: [], - searchSelection: [] + searchSelection: [], + wcsBeginOption: {}, + alarmsearchData: { + current: "1", + size: "15" + }, + recordData: [] // 鐝鐘舵�佽褰晅able } }, created(){ }, mounted(){ - this.getTreeList(); + this.newDate(); //鑾峰彇褰撳墠鏃ユ湡 + this.getTreeList(this.$route.query.code); }, components: { saveDialog }, methods: { - addfeedbackSuccess() { - this.getlist(); + table_edit(){ + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open('edit').setData(this.lastLevelId); + }) }, - feedBackStatusChange(val) { - this.getlist(); + alarmSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); + this.alarmsearchData.current = "1"; + this.alarmsearchData.size = val; + this.alarmsearchBtn(); + }, + alarmCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); + this.alarmsearchData.current = val; + this.alarmsearchBtn(); + }, + alarmsearchBtn() { + this.$HTTP.get(`/api/blade-mdc/work-station-analysis/alarm/${this.lastLevelId}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> { + if(res.code == 200) { + this.alarmtableData = res.data.records; + this.alarmtotal = res.data.total; + } + }) + }, + wcschangedate(date) { + this.wcsDate = date; + this.getwscLvalue(); //宸︿晶鍥捐〃 + this.getwcsR(); + this.getrecord(); //鐝鐘舵�佽褰晅able + this.getlogcart(); //鐝鐘舵�佽褰昪hart + }, + getrecord() { //鐝鐘舵�佽褰晅able + var obj = { + date: this.wcsDate, + humanFeedback: true, + workstationId: this.lastLevelId + } + this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> { + if(res.code == 200) { + res.data.forEach(item=> { + item.temdata = "00:00:00"; + item.perdata = "0"; + }) + this.recordData = res.data; + } + }) + }, + getlogcart() { //鐝鐘舵�佽褰昪hart + var obj = { + date: this.wcsDate, + humanFeedback: true, + workstationId: this.lastLevelId + } + this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> { + if(res.code == 200) { + var myChart = echarts.init(document.getElementById('wcs-log')); + res.data.forEach(item => { + item.value = 0; + }) + this.wcsOptionLog.series[0].data = res.data; + myChart.setOption(this.wcsOptionLog); + } + }) + }, + getwscLvalue() { + var obj = { + date: this.wcsDate, + humanFeedback: true, + workstationId: this.lastLevelId + } + this.$HTTP.post(`/api/blade-mdc/status-record/time-distribution`,obj).then(res=> { + if(res.code == 200) { + var myChart = echarts.init(document.getElementById('wcs-left')); + var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption)); + if(res.data.length == 0) { + wcsOption.forEach(item=> { + item.value = 20; + }) + }else { + wcsOption.forEach(item=> { + res.data.forEach(item2=> { + if(item.code == item2.name) { + item.value = item2.value; + } + }) + }) + } + this.wcsOptionL.series[0].data = wcsOption; + myChart.setOption(this.wcsOptionL); + } + }) + }, + getwcsLcolor() { + this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> { + if(res.code == 200) { + res.data.forEach(item=> { + item.itemStyle = {color: item.color}; + }) + this.wcsBeginOption = res.data; + this.getwscLvalue(); + } + }) + }, + getwcsR() { + var obj = { + date: this.wcsDate, + humanFeedback: true, + workstationId: this.lastLevelId + } + this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> { + if(res.code == 200) { + var myChart = echarts.init(document.getElementById('wcs-right')); + res.data.forEach(item=> { + item.value = (Number(item.value)*100).toFixed(2); + if(item.name == "杩愯鐜�") item.itemStyle = {color: '#73d13d'}; + if(item.name == "鎶ヨ鐜�") item.itemStyle = {color: '#ff4d4f'}; + if(item.name == "绋煎姩鐜�") item.itemStyle = {color: '#40a9ff'}; + }) + this.wcsOptionR.series[0].data = res.data; + myChart.setOption(this.wcsOptionR); + } + }) + }, + newDate() { + var date = new Date(); + var year = date.getFullYear(); + var month = (1 + date.getMonth()).toString().padStart(2, '0'); // JavaScript涓湀浠芥槸浠�0寮�濮嬬殑锛屾墍浠ユ垜浠渶瑕佸姞1 + var day = date.getDate().toString().padStart(2, '0'); // getDate()杩斿洖鐨勬槸褰撳墠鏈堢殑鏃ユ暟锛屼笉闇�瑕佸姞1 + this.wcsDate = year + '-' + month + '-' + day; + }, + addfeedbackSuccess() { + }, handleNodeClick(data) { if(data.code) { this.lastLevelId = data.id; - var obj = { - workstationId: this.lastLevelId, - } - if(this.searchData.feedBackStatus.length != 0) { - obj.feedBackStatus = this.searchData.feedBackStatus; - } - if(this.searchData.endDate) { - obj.endDate = this.searchData.endDate; - } - if(this.searchData.startDate) { - obj.startDate = this.searchData.startDate; - } - this.$HTTP.post("/api/blade-cps/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> { + this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> { if(res.code == 200) { - this.searchDataList = res.data.records; + this.stationForm = res.data; + this.getdmp(this.lastLevelId,this.stationForm.machineId); + this.newDate(); //鑾峰彇褰撳墠鏃ユ湡 + this.getwcsR(); + this.getwscLvalue(); //宸︿晶鍥捐〃 + this.alarmsearchBtn(); //鏈哄櫒灞ュ巻 + this.getrecord(); //鐝鐘舵�佽褰晅able + this.getlogcart(); //鐝鐘舵�佽褰昪hart } }) } + }, + getdmp(lastLevelId,machineId) { + this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> { + if(res.code == 200) { + this.dmpList = res.data; + console.log(this.dmpList,1) + } + }) }, getLastLevelIds(tree) { if (tree.length === 0) return ""; // 濡傛灉娌℃湁鏍硅妭鐐癸紝杩斿洖绌� @@ -174,7 +517,7 @@ }) return tree; }, - getTreeList(flag) { + getTreeList(id) { var obj = { groupCategory: 1, groupType: "group_workstation" @@ -185,31 +528,48 @@ var treeDisabled = this.addTreeDisable(res.data); this.tableData = this.buildTree(treeDisabled); //浠庢墎骞冲寲鍙樹负鏍戠姸缁撴瀯 this.$nextTick(()=> { - this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId; + if(id) { + this.lastLevelId = id; //鎸囧畾id + }else { + this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId; + } this.$refs.treeRef.setCurrentKey(this.lastLevelId); //绗竴涓妭鐐圭殑绗竴涓瓙鑺傜偣鏈�鍚庝竴绾ч粯璁ら�変腑 - this.getlist(); //娓叉煋鍙嶉鍒楄〃 + //浠ヤ笅鏄垵濮嬪寲鏁版嵁 + this.getlist(); //娓叉煋璇︽儏鍜�(鐘舵�乴ist) + this.getwcsLcolor(); //宸︿晶鍥捐〃 + this.getwcsR(); //鍙充晶鍥炬爣 + this.getachievements(); //鐝鐘舵�佽褰曢噰闆嗙姸鎬� + this.getrecord(); //鐝鐘舵�佽褰晅able + this.getlogcart(); //鐝鐘舵�佽褰昪hart }) } } }) }, - getlist() { - var obj = { - workstationId: this.lastLevelId, - } - if(this.searchData.feedBackStatus != 0) { - obj.feedBackStatus = this.searchData.feedBackStatus; - } - if(this.searchData.endDate) { - obj.endDate = this.searchData.endDate; - } - if(this.searchData.startDate) { - obj.startDate = this.searchData.startDate; - } - this.$HTTP.post("/api/blade-cps/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> { + getachievements() { //鐝鐘舵�佽褰曢噰闆嗙姸鎬� + this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> { if(res.code == 200) { - this.searchDataList = res.data.records; + var achievements = [];//閲囬泦鐘舵�� + var collectionstatus = []; //浜哄伐鍙嶉鐘舵�� + res.data.forEach(item=> { + if(item.type == 1) { + achievements.push(item); + } + if(item.type == 4) { + collectionstatus.push(item); + } + }) + this.achievements = achievements; + this.collectionstatus = collectionstatus; + } + }) + }, + getlist() { + this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> { + if(res.code == 200) { + this.stationForm = res.data; + this.getdmp(this.lastLevelId,this.stationForm.machineId); } }) } @@ -246,6 +606,12 @@ .content-machine-box { display: flex; align-items: center; + flex-direction: row; + flex-wrap: nowrap; + align-content: center; + justify-content: flex-start; + background-color: rgba(59, 142, 142, .06); + border-radius: 2px; } .content-machine-img { margin: 14px; @@ -308,4 +674,135 @@ overflow: hidden; word-break: break-all; } +.wcs-main { + display: flex; +} +.wcs-main > div { + padding: 6px; + box-shadow: 2px 3px 10px rgba(0,0,0,.16); +} +.wcs-main > div:nth-child(1) { + width: 50%; + margin-right: 4px; +} +.wcs-main > div:nth-child(2) { + flex:1; +} +.alarm-title { + padding-bottom: 8px; + font-size: 14px; +} +.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; +} +.bottom-panel { + margin-top: 8px; + min-height: 300px; +} +.content-panel { + height: 100%; + box-shadow: 2px 3px 10px rgba(0,0,0,.16); +} +.panel-title { + font-size: 16px; + box-sizing: border-box; + padding: 12px 24px; + width: 100%; + position: relative; + color: #333; + font-weight: 700; +} +.bottom-panel-chart { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-content: flex-start; + align-items: flex-start; + padding: 8px; + padding-top: 0; + box-sizing: border-box; +} +.panel-content { + width: 100%; + height: calc(100% - 45px); +} +.panel-content-gant, .panel-content-table { + width: 100%; +} +.gant { + box-sizing: border-box; + padding: 8px; +} +.status { + display: flex; + align-items: start; + flex-direction: column; + justify-content: start; + margin: 8px 0; + position: relative; + width: 100%; + font-size: 16px; + cursor: pointer; +} +.feed-button { + position: absolute; + right: 10px; + top: -2px; + color: #3b8e8e; + cursor: pointer; +} +.status-wrap.align-left, .status-wrap:first-child { + padding-left: 24px; + margin-bottom: 8px; +} +.status-wrap { + display: flex; + flex-wrap: wrap; + justify-content: start; +} +.collect-status { + color: #3b8e8e; + 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 { + display: flex; + flex-wrap: wrap; + justify-content: start; +} +.status-wrap .status-con { + display: flex; + flex: 1; + flex-wrap: wrap; +} +.status-wrap /deep/ .el-checkbox.el-checkbox--large { + color: #3b8e8e; +} </style> \ No newline at end of file -- Gitblit v1.9.3