| | |
| | | </div> |
| | | <div class="footer"> |
| | | <el-button @click="query" type="primary">查询</el-button> |
| | | <el-button>导出</el-button> |
| | | <el-button @click="exportData">导出</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="aposcope-right"> |
| | | <el-tabs tab-position="top" v-model="activeName" type="card"> |
| | | <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> |
| | |
| | | <!-- collectionstatus 反馈状态 |
| | | date 日期 |
| | | workstationInfoList 工位list --> |
| | | <record-charts :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts> |
| | | <record-charts-by-date :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></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="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 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="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-workstation :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts-by-workstation> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | |
| | | <script> |
| | | import moment from 'moment'; |
| | | import MYTree from './MYTree.vue'; |
| | | import recordCharts from './components/recordCharts.vue'; |
| | | import recordChartsByDate from './components/recordChartsByDate.vue'; |
| | | import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue'; |
| | | export default { |
| | | components: { |
| | | time: "", |
| | | MYTree, |
| | | recordCharts |
| | | recordChartsByDate, |
| | | recordChartsByWorkstation |
| | | }, |
| | | watch: { |
| | | treeChecked(select) { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | isshowempty: true, |
| | | select: [], |
| | | workstationInfoList: [], |
| | | date: "", |
| | | checked1: true, |
| | | btnListActive: '', |
| | | btnGongweiListActive: "", |
| | | btnList: [], |
| | | btnGongweiList: [], |
| | | timeBtn: "", |
| | | shortcuts: [ |
| | | { |
| | |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | tabChange(val) { |
| | | if(val == "time") { //按工位查看 |
| | | |
| | | }else if(val == "shift") { //按日期查看 |
| | | |
| | | } |
| | | }, |
| | | 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; |
| | | }, |
| | | changeTabGongwei(item) { //按工位查询 |
| | | |
| | | }, |
| | | getachievements() { //班次状态记录采集状态 |
| | | this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> { |
| | |
| | | query() { |
| | | this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); |
| | | this.workstationInfoList = this.select; |
| | | if(this.select.length != 0) { //选了值显示工位 |
| | | this.btnGongweiList = this.select; |
| | | this.btnGongweiListActive = this.btnGongweiList[0].id; |
| | | this.isshowempty = false; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .status-wrap /deep/ .el-checkbox.el-checkbox--large { |
| | | color: #3b8e8e; |
| | | } |
| | | .pagination { |
| | | text-align: right; |
| | | .fact-analysis-realtim { |
| | | display: flex; |
| | | justify-content: end; |
| | | 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; |
| | | } |
| | | </style> |