From 0d0968ec2d1a39c21e15e447c4f2227f70d6a11b Mon Sep 17 00:00:00 2001 From: 张晓波 <bingbo1993@126.com> Date: 星期一, 11 十二月 2023 10:38:37 +0800 Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe --- web/src/views/MixingInfo/messageInfo.vue | 292 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 191 insertions(+), 101 deletions(-) diff --git a/web/src/views/MixingInfo/messageInfo.vue b/web/src/views/MixingInfo/messageInfo.vue index 162a141..fb8fc0a 100644 --- a/web/src/views/MixingInfo/messageInfo.vue +++ b/web/src/views/MixingInfo/messageInfo.vue @@ -1,35 +1,46 @@ <template> <div class="mixing_index"> <div class="mixing_header"> - <div class="mixing_main"> - <div class="mixing_left"> - <div class="mixing_left_num"><span>1</span></div> - <div class="mixing_left_name">碎石5-10mm</div> + <span>中铁十四局通甬站前I标管片场拌和站</span> + </div> + <div class="mixing_main"> + <div class="mixing_left"> + <div class="mixing_left_num"> + <div class="">{{ mixingList.tableNum }}</div> </div> - <div class="mixing_right"> - <div class="mixing_rows"> - <div class="mixing_rows_titles">产地名称:</div> - <div class="mixing_rows_datas">重庆涪陵区</div> - </div> - <div class="mixing_rows"> - <div class="mixing_rows_titles">进场数量:</div> - <div class="mixing_rows_datas">521.53 t</div> - </div> - <div class="mixing_rows"> - <div class="mixing_rows_titles">进场日期:</div> - <div class="mixing_rows_datas">2023-11-11</div> - </div> - <div class="mixing_rows"> - <div class="mixing_rows_titles">检验状态:</div> - <div class="mixing_rows_datas" style="color:rgba(255, 102, 0, 1);font-size:9rem;">待检</div> - </div> - <div class="mixing_rows"> - <div class="mixing_rows_titles">检验日期:</div> - <div class="mixing_rows_datas"></div> - </div> - <div class="mixing_rows"> - <div class="mixing_rows_titles">报告编号:</div> - <div class="mixing_rows_datas"></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.nameOfOrigin || '' }}</div> + </div> + <div class="mixing_rows"> + <div class="mixing_rows_titles">进场数量:</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.inTime || '' }}</div> + </div> + <div class="mixing_rows"> + <div class="mixing_rows_titles">检验日期:</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.status === 1 ? '合格' : mixingList.status === 2 ? '待检' : '' + }}</div> + </div> + <div class="mixing_rows"> + <div class="mixing_rows_titles">报告编号:</div> + <div class="mixing_rows_datas small_size"> + {{ + mixingList.reportNumber && + mixingList.reportNumber.replace(/\s/g, '\n') + }} </div> </div> </div> @@ -38,101 +49,180 @@ </template> <script> export default { - data(){ - return{ + data() { + return { + timer: null,//定时器 + mixingList: {},//展示数据 } }, - mounted(){ + created() { + this.searchMixingInfos() }, - methods:{ + mounted() { + const that = this; + // that.searchMixingInfos() + that.timer = setInterval(() => { + that.searchMixingInfos() + }, 60000 * 10) + + let width = document.getElementsByClassName('mixing_index')[0].clientWidth + let $html = document.getElementsByTagName('html')[0] + let fontsize = width / 1920 * 11 + $html.style.fontSize = `${fontsize}px` + window.onresize = () => { + let width = document.getElementsByClassName('mixing_index')[0].clientWidth + let fontsize = width / 1920 * 11 + $html.style.fontSize = `${fontsize}px` + } + }, + beforeDestroy() { + clearInterval(this.timer); + this.timer = null; + }, + methods: { + searchMixingInfos() { + let params = { + tableNum: window.location.href.split('/')[5].split('=')[1] + } + this.$api.Infos.showHmixings(params).then(res => { + if (res.statusMsg === 'ok' && res.data) { + this.mixingList = res.data + } else { + this.$message.warning('请检查网络或联系管理员!!!') + } + }) + }, } } </script> <style scoped lang="scss"> -.mixing_index{ +.mixing_index { + display: flex; + flex-direction: column; width: 100%; height: 100%; - background-color: #041A3F; - padding: 5px; + padding: 0.4rem; + background: url("../../assets/mixing/mixing_bg3.png") no-repeat; + background-size: 100% 100%; + background-position: center center; - .mixing_header{ + + .mixing_header { + width: 100%; + height: 9rem; + position: relative; + display: flex; + justify-content: center; + align-items: center; + + span { + position: absolute; + font-size: 5rem; + font-weight: bold; + letter-spacing: 2px; + text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05); + background: -webkit-linear-gradient(90deg, #2AC0FF 0%, #FFFFFF 70%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + + .mixing_main { + overflow: hidden; + flex: 1; width: 100%; height: 100%; - padding: 108px 50px 40px; - background: url("../../assets/mixing/mixing_bg.png") no-repeat; - background-size: 100% 100%; - background-position: center center; + padding: 3rem 4rem 5rem 4rem; + display: flex; - .mixing_main{ - width: 100%; - height: 100%; - padding: 20px 15px; + .mixing_left { display: flex; - .mixing_left{ - width: 45%; - margin-right: 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; + flex-direction: column; + flex: 1; + margin-right: 3rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; - .mixing_left_num{ - width: 100%; - height: 78%; - padding: 10px; - background: url("../../assets/mixing/mixing_left_bg.png") no-repeat; - background-size: 100% 100%; - span{ - height: 100%; - padding: 10px 0; - display: flex; - justify-content: center; - align-items: center; - color: rgba(254, 252, 94, 1); - font-size: 44rem; - font-weight: bold; - background-color: rgba(37, 129, 255, 0.29); - } - } - .mixing_left_name{ - width: 100%; - height: 20%; - margin-top: 15px; + .mixing_left_num { + position: relative; + overflow: hidden; + padding: 1rem; + flex: 3.2; + width: 100%; + background: url("../../assets/mixing/mixing_left_bg.png") no-repeat; + background-size: 100% 100%; + + > div { display: flex; justify-content: center; align-items: center; - text-shadow: 5px 7px 0px rgba(0,66,255,0.2), 16px 23px 16px rgba(14,19,48,0.15); - 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; + width: 100%; + height: 100%; + color: rgba(254, 252, 94, 1); + font-size: 44rem; + font-weight: bold; + background-color: rgba(37, 129, 255, 0.29); } } - .mixing_right{ - width:55%; - background: linear-gradient(to right,#0D3776 0%,#041A40 100%); + + .mixing_left_name { + flex: 1; + width: 100%; display: flex; - flex-direction: column; - justify-content: space-around; - .mixing_rows{ - padding: 10px 20px; - display: flex; - .mixing_rows_titles{ - flex: none; - color: #FFFFFF; - font-weight: 400; - font-size: 5rem; + justify-content: center; + align-items: center; + text-shadow: 5px 7px 0px rgba(0, 66, 255, 0.2), 16px 23px 16px rgba(14, 19, 48, 0.15); + background: linear-gradient(to bottom, #FFFFFF 0%, rgba(140, 186, 255, 0.88) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: #FFFFFF; + font-size: 9rem; + font-weight: 500; + } + } + + .mixing_right { + flex: 1.2; + background: linear-gradient(to right, #0D3776 0%, #041A40 100%); + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 2rem 4rem; + + .mixing_rows { + overflow: hidden; + display: flex; + + .mixing_rows_titles { + color: #FFFFFF; + font-weight: 400; + font-size: 5rem; + } + + .mixing_rows_datas { + overflow: hidden; + flex: 1; + color: #FFFFFF; + font-weight: 400; + font-size: 5rem; + white-space: pre-wrap; + + &.small_size { + font-size: 4.3rem; } - .mixing_rows_datas{ - flex: none; - color: #FFFFFF; - font-weight: 400; - font-size: 5rem; - } + } + + .standardStyle { + color: #15EF48; + font-size: 8rem; + } + + .notStandardStyle { + color: rgba(255, 102, 0, 1); + font-size: 8rem; } } } -- Gitblit v1.9.3