| | |
| | | <template> |
| | | <div class="mixing_index"> |
| | | <div class="mixing_header"> |
| | | <span>中铁十四局通甬站前I标管片场拌合站</span> |
| | | <span>中铁十四局通甬站前I标管片场拌和站</span> |
| | | </div> |
| | | <div class="mixing_main"> |
| | | <div class="mixing_left"> |
| | | <div class="mixing_left_num"> |
| | | <div class="">{{mixingList&&mixingList.tableNum}}</div> |
| | | <div class="">{{ mixingList.tableNum }}</div> |
| | | </div> |
| | | <div class="mixing_left_name">{{mixingList&&mixingList.materialName}}</div> |
| | | <div class="mixing_left_name">{{ mixingList.materialName || '' }}</div> |
| | | </div> |
| | | <div class="mixing_right"> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">产地名称:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.nameOfOrigin}}</div> |
| | | <div class="mixing_rows_datas">{{ mixingList.nameOfOrigin || '' }}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场数量:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.incomingQuantity}} t</div> |
| | | <div class="mixing_rows_datas">{{ mixingList.incomingQuantity || '' }} t</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inTime}}</div> |
| | | <div class="mixing_rows_datas">{{ mixingList.inTime || '' }}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inspectionDate}}</div> |
| | | <div class="mixing_rows_datas">{{ mixingList.inspectionDate || '' }}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验状态:</div> |
| | | <div class="mixing_rows_datas" :class="{'standardStyle':mixingList.status===1,'notStandardStyle':mixingList.status!==1}">{{mixingList&&mixingList.status===1?'合格':mixingList&&mixingList.status===2?'待检':''}}</div> |
| | | <div class="mixing_rows_datas" |
| | | :class="{ 'standardStyle': mixingList.status === 1, 'notStandardStyle': mixingList.status !== 1 }"> |
| | | {{ mixingList.status === 1 ? '合格' : mixingList.status === 2 ? '待检' : '' |
| | | }}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">报告编号:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.reportNumber}}</div> |
| | | <div class="mixing_rows_datas small_size"> |
| | | {{ |
| | | mixingList.reportNumber && |
| | | mixingList.reportNumber.replace(/\s/g, '\n') |
| | | }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | data(){ |
| | | return{ |
| | | timer:null,//定时器 |
| | | mixingList:null,//展示数据 |
| | | mixingList: {},//展示数据 |
| | | } |
| | | }, |
| | | created(){ |
| | |
| | | tableNum:window.location.href.split('/')[5].split('=')[1] |
| | | } |
| | | this.$api.Infos.showHmixings(params).then(res=>{ |
| | | if(res.statusMsg==='ok'){ |
| | | this.mixingList = res.data===null?[]:res.data |
| | | if (res.statusMsg === 'ok' && res.data) { |
| | | this.mixingList = res.data |
| | | }else{ |
| | | this.$message.warning('请检查网络或联系管理员!!!') |
| | | } |
| | |
| | | flex-direction: column; |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 5px; |
| | | padding: 0.4rem; |
| | | background: url("../../assets/mixing/mixing_bg3.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | background-position: center center; |
| | |
| | | |
| | | .mixing_header{ |
| | | width: 100%; |
| | | height: 3.2rem; |
| | | height: 9rem; |
| | | position: relative; |
| | | padding: 4rem; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | flex: 1; |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 6rem; |
| | | padding: 3rem 4rem 5rem 4rem; |
| | | display: flex; |
| | | |
| | | .mixing_left{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | width: 45%; |
| | | margin-right: 15px; |
| | | flex: 1; |
| | | margin-right: 3rem; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | |
| | | width: 100%; |
| | | background: url("../../assets/mixing/mixing_left_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | >div{ |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | background-color: rgba(37, 129, 255, 0.29); |
| | | } |
| | | } |
| | | |
| | | .mixing_left_name{ |
| | | flex: 1; |
| | | width: 100%; |
| | |
| | | background: linear-gradient(to bottom,#FFFFFF 0%,rgba(140, 186, 255, 0.88) 100%); |
| | | background-clip: text; |
| | | -webkit-background-clip: text; |
| | | text-fill-color: transparent; |
| | | -webkit-text-fill-color: transparent; |
| | | color: #FFFFFF; |
| | | font-size: 9rem; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | |
| | | .mixing_right{ |
| | | width: calc(55% - 100px); |
| | | flex: 1.2; |
| | | background: linear-gradient(to right,#0D3776 0%,#041A40 100%); |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | justify-content: space-around; |
| | | padding: 2rem 4rem; |
| | | |
| | | .mixing_rows{ |
| | | padding: 10px 20px; |
| | | overflow: hidden; |
| | | display: flex; |
| | | |
| | | .mixing_rows_titles{ |
| | | flex: none; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | } |
| | | |
| | | .mixing_rows_datas{ |
| | | flex: none; |
| | | overflow: hidden; |
| | | flex: 1; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | white-space: pre-wrap; |
| | | |
| | | &.small_size { |
| | | font-size: 4.3rem; |
| | | } |
| | | } |
| | | |
| | | .standardStyle{ |
| | | color:#15EF48; |
| | | font-size:8rem; |
| | | } |
| | | |
| | | .notStandardStyle{ |
| | | color:rgba(255, 102, 0, 1); |
| | | font-size:8rem; |