| | |
| | | <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%;"/> |
| | | <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">查询</el-button> |
| | | <el-button @click="query" type="primary">查询</el-button> |
| | | <el-button>导出</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <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="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 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 id="record" style="width: 100%;height:280px;"></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"> |
| | |
| | | import MYTree from './MYTree.vue' |
| | | import Shift from './components/Shift.vue' |
| | | import Time from './components/Time.vue' |
| | | |
| | | import * as echarts from 'echarts'; |
| | | export default { |
| | | components: { |
| | | time: "", |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | workstationInfoList: [], |
| | | checked1: true, |
| | | btnListActive: '', |
| | | btnList: [], |
| | |
| | | treeChecked: [], |
| | | achievements: [], |
| | | collectionstatus: [], |
| | | current: "1", |
| | | size: "6", |
| | | total: 0, |
| | | recordOptionLog:{ |
| | | grid: { |
| | | top: '0%' |
| | | }, |
| | | tooltip: { |
| | | //trigger: 'axis' // 触发类型,默认数据触发,可选为:'item'、'axis' |
| | | }, |
| | | xAxis: { |
| | | boundaryGap: false, |
| | | type: 'category', |
| | | data: ['00:00:00', '04:00:00', '08:00:00', '12:00:00', '16:00:00', '20:00:00', '00:00:00'], |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | }, |
| | | data: [] |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'wcsLog', |
| | | type: 'bar', |
| | | data: [], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | }, |
| | | mounted() { |
| | | this.query(); |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | |
| | | ...data |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | this.btnList = res.data |
| | | 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 |
| | | } |
| | | 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) { |
| | | console.log(res.data) |
| | | var myChart = echarts.init(document.getElementById('record')); |
| | | 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; |
| | | myChart.setOption(this.recordOptionLog); |
| | | this.total = res.data.total; |
| | | } |
| | | }) |
| | | }, |
| | |
| | | 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(); //采集状态or人工反馈状态 |
| | | this.getCharts(); |
| | | }, |
| | | timeBtnChange() { |
| | | |
| | | }, |
| | | query() { |
| | | // this.$refs[this.activeName].init({ |
| | | // endDate: this.time[1], |
| | | // startDate: this.time[0], |
| | | // shiftIndexList: [1, 2], |
| | | // workStationIdList: [...this.treeChecked] |
| | | // }) |
| | | this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); |
| | | //this.getCharts(); |
| | | console.log(this.treeChecked,2) |
| | | } |
| | | } |
| | | } |
| | |
| | | display: flex; |
| | | min-height: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | margin: 8px; |
| | | } |
| | | .aposcope-left { |
| | |
| | | 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; |
| | | } |
| | |
| | | .status-wrap /deep/ .el-checkbox.el-checkbox--large { |
| | | color: #3b8e8e; |
| | | } |
| | | .pagination { |
| | | text-align: right; |
| | | display: flex; |
| | | justify-content: end; |
| | | } |
| | | </style> |