| | |
| | | <template> |
| | | <div> |
| | | <div id="recordwork" style="width: 1000px;height:500px;"></div> |
| | | <div id="recordworkParse"> |
| | | <div id="recordwork" style="height:400px;"></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, |
| | | bottom: 130, |
| | | right: 0 |
| | | left: 100, |
| | | bottom: 30, |
| | | 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) { |
| | |
| | | text-align: right; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin-top: -60px; |
| | | margin-top: 20px; |
| | | position: relative; |
| | | z-index: 99; |
| | | } |
| | | </style> |