| | |
| | | <template> |
| | | <div> |
| | | <div id="recordwork" style="width: 1000px;height:500px;"></div> |
| | | <div id="recordworkParse"> |
| | | <div id="recordwork" style="height:500px;"></div> |
| | | <div class="paginationwork"> |
| | | <el-pagination layout="prev, pager, next" @current-change="recordChange" :total="total" :default-page-size="6"/> |
| | | </div> |
| | |
| | | import moment from 'moment'; |
| | | import * as echarts from 'echarts'; |
| | | export default { |
| | | props: ['collectionstatus','date','workstationInfoList'], |
| | | props: ['setWork','collectionstatus',"select"], |
| | | watch: { |
| | | date(val) { |
| | | setWork(val) { |
| | | this.current = "1"; |
| | | this.getCharts(); |
| | | }, |
| | | workstationInfoList(val) { |
| | | select(val) { |
| | | this.current = "1"; |
| | | this.getCharts(); |
| | | } |
| | |
| | | return color; |
| | | }, |
| | | getCharts() { |
| | | var obj = { |
| | | date: this.date, |
| | | humanFeedback: true, |
| | | machineFeedback: true, |
| | | workstationInfoList: this.workstationInfoList |
| | | } |
| | | this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => { |
| | | if(!this.setWork) return; |
| | | this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-workstation?current=${this.current}&size=${this.size}`,this.setWork).then(res => { |
| | | if (res.code === 200) { |
| | | var yAxisData = []; |
| | | var newData = []; |
| | | this.records = res.data.records; |
| | | res.data.records.reverse(); |
| | | res.data.records.forEach((item,index)=> { |
| | | yAxisData.push(item.workstationInfo.name); |
| | | yAxisData.push(item.date); |
| | | //计算开始时间,显示时间 |
| | | item.statusRecordList.forEach(item1=> { |
| | | var initstart = item1.startTime.split(" ")[0]; //根据日期计算差值 |
| | |
| | | var color = this.getColor(item1.wcsDesc); |
| | | item1.value = [index,startTime,endTime,diff]; |
| | | item1.itemStyle = {"normal": {"color": color}}; |
| | | item1.code = item.workstationInfo.code; |
| | | item1.name = item.workstationInfo.name; |
| | | item1.id = item.workstationInfo.id; |
| | | item1.code = item.date; |
| | | item1.name = item.date; |
| | | item1.id = item.date; |
| | | }) |
| | | newData.push(...item.statusRecordList); |
| | | }) |
| | |
| | | }, |
| | | grid: { |
| | | top: 10, |
| | | left: 70, |
| | | left: 100, |
| | | bottom: 130, |
| | | right: 0 |
| | | right: 30 |
| | | }, |
| | | xAxis: { |
| | | min: 0, |
| | |
| | | ] |
| | | }; |
| | | var recordDom = document.getElementById('recordwork'); |
| | | var recordworkParse = document.getElementById('recordworkParse'); |
| | | var myChart = echarts.init(recordDom); |
| | | myChart.resize({ |
| | | width: document.documentElement.clientWidth - 340 + "px" |
| | | }); |
| | | myChart.setOption(option); |
| | | }, |
| | | recordChange(current) { |
| | |
| | | </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" v-if="isshowempty" style="background-color: rgb(255, 255, 255);"> |
| | | <div class="wimi-empty-img" style="width: 150px; height: 150px;"> |
| | | <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;"> |
| | | </div> |
| | |
| | | <div>暂无数据</div> |
| | | </div> |
| | | </div> |
| | | <div v-show="!isshowempty"> |
| | | <div> |
| | | <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> |
| | | </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> |
| | | <!-- setWork 入参 --> |
| | | <record-charts-by-workstation :setWork="setWork" :select="select" :collectionstatus="collectionstatus" v-if="!isshowempty"></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> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import saveDialog from './add-station-status' |
| | | import moment from 'moment'; |
| | | import MYTree from './MYTree.vue'; |
| | | import recordChartsByDate from './components/recordChartsByDate.vue'; |
| | |
| | | time: "", |
| | | MYTree, |
| | | recordChartsByDate, |
| | | recordChartsByWorkstation |
| | | recordChartsByWorkstation, |
| | | saveDialog |
| | | }, |
| | | watch: { |
| | | treeChecked(select) { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | dialog: { |
| | | save: false |
| | | }, |
| | | isshowempty: true, |
| | | select: [], |
| | | workstationInfoList: [], |
| | |
| | | time: [], |
| | | treeChecked: [], |
| | | achievements: [], |
| | | collectionstatus: [] |
| | | collectionstatus: [], |
| | | workstationId: "", |
| | | setWork: {} |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | addfeedbackSuccess() { |
| | | this.setWork = { |
| | | endDate: this.time[1], |
| | | startDate: this.time[0], |
| | | humanFeedback: true, |
| | | machineFeedback: true, |
| | | workstationId: this.lastLevelId |
| | | } |
| | | }, |
| | | table_edit(){ |
| | | this.dialog.save = true |
| | | this.$nextTick(() => { |
| | | this.$refs.saveDialog.open('edit').setData(this.lastLevelId); |
| | | }) |
| | | }, |
| | | tabChange(val) { |
| | | if(val == "time") { //按工位查看 |
| | | |
| | |
| | | this.date = item.id; |
| | | }, |
| | | changeTabGongwei(item) { //按工位查询 |
| | | |
| | | this.btnGongweiListActive = item.id; |
| | | this.lastLevelId = this.btnGongweiListActive; |
| | | this.setWork = { |
| | | endDate: this.time[1], |
| | | startDate: this.time[0], |
| | | humanFeedback: true, |
| | | machineFeedback: true, |
| | | workstationId: item.id |
| | | } |
| | | }, |
| | | getachievements() { //班次状态记录采集状态 |
| | | this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> { |
| | |
| | | if(this.select.length != 0) { //选了值显示工位 |
| | | this.btnGongweiList = this.select; |
| | | 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 |
| | | } |
| | | this.isshowempty = false; |
| | | } |
| | | } |
| | |
| | | margin-top: -16px; |
| | | line-height: 28px; |
| | | } |
| | | .feed-button { |
| | | position: absolute; |
| | | right: 10px; |
| | | top: -2px; |
| | | color: #3b8e8e; |
| | | cursor: pointer; |
| | | } |
| | | </style> |