<template>
|
<div class="main" style="height:calc(100% - 60px)!important;">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">项目名称：</span>
|
<el-select v-model="search.proId" placeholder="请选择项目名称" clearable>
|
<el-option
|
v-for="item in optionsProject"
|
:key="item.proId"
|
:label="item.proName"
|
:value="item.proId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span class="header_label">环号：</span>
|
<el-input v-model="search.ringNum" :size="size" clearable placeholder="请输入环号"></el-input>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-if="showButton('print')" @click="searchButtonInfo(true)">查询</el-button>
|
<el-button :size="size" icon="el-icon-printer" v-if="showButton('print')" @click="printClick">打印</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<div :class="{'main_items':pitchIf !==item.pipeId,'main_items_pitch':pitchIf === item.pipeId}" v-for="(item,index) in dataList" :key="index" @click="changeItems(item)">
|
<div :class="{'main_items_top':pitchIf !==item.pipeId,'main_items_top_pitch':pitchIf === item.pipeId}">
|
<div class="main_item_header first_titles">
|
<div class="main_item_title">环号：</div>
|
<div class="main_item_datas">{{item.ringNum}}</div>
|
</div>
|
<div class="main_item_header">
|
<div class="main_item_title">项目名称：</div>
|
<div class="main_item_datas">{{item.proName}}</div>
|
</div>
|
</div>
|
<div :class="{'main_item_contents':pitchIf !==item.pipeId,'main_item_contents_pitch':pitchIf === item.pipeId}">
|
<div class="main_item_left">
|
<div style="width:180px;height:180px">
|
<img :src="`${baseUrl}/materials/steelPrint/test?num=${item.pipeNum}&type=2&pipeId=${item.pipeId}`" style="width:100%;height:100%">
|
</div>
|
<div class="main_item_idnumber">{{item.pipeNum}}</div>
|
</div>
|
<div class="main_line"></div>
|
<div class="main_item_right">
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">尺寸：</div>
|
<div class="main_item_info">{{item.sizeName}}</div>
|
</div>
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">注浆孔：</div>
|
<div class="main_item_info">{{item.groutingName}}</div>
|
</div>
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">配筋：</div>
|
<div class="main_item_info">{{item.reinforcementName}}</div>
|
</div>
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">转向：</div>
|
<div class="main_item_info">{{item.turnName}}</div>
|
</div>
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">块号：</div>
|
<div class="main_item_info">{{item.blockNumName}}</div>
|
</div>
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">入模时间：</div>
|
<div class="main_item_info">{{item.intoModTime}}</div>
|
</div>
|
<!-- <div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">浇筑时间：</div>
|
<div class="main_item_info">{{item.pouringTime}}</div>
|
</div> -->
|
<div class="main_item_right_rows">
|
<div class="main_item_rhom"></div>
|
<div class="main_item_name">模具编号：</div>
|
<div class="main_item_info">{{item.mouldNum}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-show="showAbtn">
|
<a id="segmentPrint" :href="`printpipe://2,${pitchNums}`"><p></p></a>
|
</div>
|
<div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
@size-change="changePageSize"
|
:current-page="pageNum"
|
:page-sizes="[9, 18, 45, 90]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia/index';
|
import { changeSize} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
export default {
|
data() {
|
return {
|
showAbtn:false,//是否展示a标签
|
pitchNums:null,//打印编号
|
size: changeSize(), // 组件尺寸
|
pageNum: 1,
|
pageSize: 9,
|
search:{},//查询条件
|
total: 0,
|
loading: false,
|
url:null,
|
pitchIf:null,
|
dataList: [], //管片信息打印列表
|
optionsProject:[],//项目名称
|
baseUrl: process.env.VUE_APP_BASE_URL
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.getAllProjects()
|
},
|
methods: {
|
//获取二维码
|
// getPrintPhones(val){
|
// this.$api.Print.getPrintPhone({num:val})
|
// return
|
// },
|
//选择项目变色
|
changeItems(val){
|
this.pitchIf = val.pipeId
|
this.pitchNums = val.pipeNum
|
},
|
//打印按钮
|
printClick(){
|
if(this.pitchIf === null){
|
this.$message.warning('请选择一个项目进行打印!!!')
|
return false
|
}
|
// this.$api.Print.segmentPrints({recordIds:[this.pitchIf]}).then(res=>{
|
// if(res.statusMsg === 'ok'){
|
// this.$message.success(res.data)
|
// this.gopPrints()
|
// this.pitchIf = null
|
// }else{
|
// this.$message.warning(res.statusMsg)
|
// }
|
// })
|
this.gopPrints()
|
this.pitchIf = null
|
},
|
//执行去打印
|
gopPrints(){
|
this.$nextTick(()=>{
|
document.getElementById("segmentPrint").click();
|
})
|
},
|
//获得所有项目名称
|
getAllProjects(){
|
let obj = {
|
pageNum: 1,
|
pageSize: 100000000
|
}
|
this.$api.Engineer.searchProjects(obj).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.optionsProject = res.data.list
|
this.$set(this.search,'proId',res.data.list[0].proId)
|
this.searchButtonInfo(true)
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
//选择不同的项目进行查询
|
ChangeLists(){
|
this.pitchIf = null
|
this.searchButtonInfo(true)
|
},
|
// 查询按钮列表信息
|
searchButtonInfo(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
let params = Object.assign({},this.search,{
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
typeTime :2
|
})
|
this.loading = true;
|
this.$api.Print.searchSegmentPrint(params).then((res) => {
|
if(res.statusMsg === 'ok') {
|
this.total = res.data.total;
|
this.dataList = res.data.list;
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
this.loading = false;
|
})
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
// 切换页数
|
changePageNum(page) {
|
this.pageNum = page;
|
this.searchButtonInfo();
|
},
|
// 切换每页条数
|
changePageSize(size) {
|
this.pageSize = size;
|
this.searchButtonInfo();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
.main_content{
|
width: calc(100% - 30px);
|
display: flex;
|
flex-wrap: wrap;
|
overflow-y: auto!important;
|
overflow-x: hidden;
|
|
.main_items{
|
// width: 100%;
|
// max-width: calc(100%/3 - 25px);
|
width: 500px;
|
height: 358px;
|
border-top-left-radius: 6px;
|
border-top-right-radius: 6px;
|
border-bottom-left-radius: 6px;
|
border-bottom-right-radius: 6px;
|
background-color: #031A46;
|
margin: 30px 20px 5px 5px;
|
box-shadow:0px 0px 8px 0px #0C4F79;
|
|
.main_items_top{
|
height: 40px;
|
padding-top: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
overflow: auto hidden;
|
border-top-left-radius: 6px;
|
border-top-right-radius: 6px;
|
background-color: rgba(57,181,254,0.3);
|
.first_titles{
|
margin-left: 10px;
|
position: relative;
|
&::before{
|
width: 5px;
|
height: 20px;
|
content: '';
|
position: absolute;
|
top: -2px;
|
left: 5px;
|
background-color: #39B5FE;
|
}
|
}
|
.main_item_header{
|
padding: 0px 0px 8px 15px;
|
display: flex;
|
|
.main_item_title{
|
flex: none;
|
text-align: center;
|
font-size: 16px;
|
color: #E1EAEE;
|
}
|
.main_item_datas{
|
margin-right: 10px;
|
flex: none;
|
color: #ffffff;
|
font-weight: 900;
|
font-size: 16px;
|
}
|
}
|
}
|
.main_item_contents{
|
width: 100%;
|
height: calc(100% - 29px);
|
background-color: #031A46;
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
display: flex;
|
padding: 25px 6px;
|
// overflow-x: auto;
|
// overflow-y: hidden;
|
|
.main_item_left{
|
width: 260px;
|
height: 100%;
|
display: flex;
|
// justify-content: center;
|
align-items: center;
|
padding: 0px 0px 0px 10px;
|
margin-right: 10px;
|
flex-direction: column;
|
|
.main_item_idnumber{
|
margin-top: 20px;
|
color: #fff;
|
letter-spacing: 3px;
|
font-size: 15px;
|
}
|
}
|
|
.main_line{
|
width: 2px;
|
height: 100%;
|
background-color: #073E63;
|
}
|
|
.main_item_right{
|
width: calc(100% - 80px);
|
height: 100%;
|
|
.main_item_right_rows{
|
display: flex;
|
justify-content: center;
|
height: 36px;
|
position: relative;
|
|
.main_item_rhom{
|
width: 10px;
|
height: 10px;
|
background-color: #39B5FE;
|
transform: roate(45deg);
|
-ms-transform:rotate(45deg);
|
-moz-transform:rotate(45deg);
|
-webkit-transform:rotate(45deg);
|
-o-transform:rotate(45deg);
|
position: absolute;
|
top: 15px;
|
left: 15px;
|
}
|
.main_item_name{
|
width: 90px;
|
color: #B8BECB;
|
position: absolute;
|
flex: none;
|
left: 42px;
|
font-size: 16px;
|
top: 7px;
|
}
|
.main_item_info{
|
width: 100%;
|
flex: none;
|
color: #39B5FE;
|
position: absolute;
|
left: 117px;
|
font-size: 16px;
|
top: 9px;
|
}
|
}
|
}
|
}
|
}
|
.main_items_pitch{
|
// width: 100%;
|
// max-width: calc(100%/3 - 25px);
|
width: 517px;
|
height: 358px;
|
border-top-left-radius: 6px;
|
border-top-right-radius:6px;
|
border-bottom-left-radius: 6px;
|
border-bottom-right-radius: 6px;
|
background-color: #00D6F2;
|
margin: 30px 20px 5px 5px;
|
box-shadow:7px -1px 5px 9px #00D6F2;
|
|
.main_items_top_pitch{
|
display: flex;
|
justify-content: space-between;
|
overflow: auto;
|
.first_titles{
|
margin-left: 10px;
|
position: relative;
|
&::before{
|
width: 5px;
|
height: 20px;
|
content: '';
|
position: absolute;
|
top: -2px;
|
left: 5px;
|
background-color: #fff;
|
}
|
}
|
.main_item_header{
|
padding: 0px 0px 8px 15px;
|
display: flex;
|
margin-top: 4px;
|
|
.main_item_title{
|
flex: none;
|
text-align: center;
|
font-size: 16px;
|
font-weight: 600;
|
color: #026D92;
|
}
|
.main_item_datas{
|
margin-right: 10px;
|
flex: none;
|
color: #093267;
|
font-weight: 550;
|
font-size: 16px;
|
}
|
}
|
}
|
.main_item_contents_pitch{
|
width: calc(100% + 11px);
|
height: calc(100% - 29px);
|
background-color: #417BEB;
|
border-bottom-left-radius: 6px;
|
border-bottom-right-radius: 6px;
|
display: flex;
|
padding: 25px 0px;
|
// overflow-x: auto;
|
// overflow-y: hidden;
|
|
.main_item_left{
|
width: 260px;
|
height: 100%;
|
display: flex;
|
// justify-content: center;
|
align-items: center;
|
padding: 0px 0px 0px 10px;
|
margin-right: 10px;
|
flex-direction: column;
|
|
.main_item_idnumber{
|
margin-top: 20px;
|
color: #fff;
|
letter-spacing: 3px;
|
font-size: 15px;
|
}
|
}
|
|
.main_line{
|
width: 2px;
|
height: 100%;
|
background-color: #368BEB;
|
}
|
|
.main_item_right{
|
width: calc(100% - 80px);
|
height: 100%;
|
|
.main_item_right_rows{
|
display: flex;
|
justify-content: center;
|
height: 36px;
|
position: relative;
|
|
.main_item_rhom{
|
width: 10px;
|
height: 10px;
|
background-color: #13BECB;
|
transform: roate(45deg);
|
-ms-transform:rotate(45deg);
|
-moz-transform:rotate(45deg);
|
-webkit-transform:rotate(45deg);
|
-o-transform:rotate(45deg);
|
position: absolute;
|
top: 15px;
|
left: 15px;
|
}
|
.main_item_name{
|
width: 90px;
|
color: #fff;
|
position: absolute;
|
flex: none;
|
left: 42px;
|
font-size: 16px;
|
top: 7px;
|
}
|
.main_item_info{
|
width: 100%;
|
flex: none;
|
color: #fff;
|
position: absolute;
|
left: 117px;
|
font-size: 16px;
|
top: 9px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
//滚动条样式
|
::-webkit-scrollbar {
|
width: 4px;
|
height: 6px;
|
}
|
::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px rgba(19,73,126,1);
|
background: rgba(0,0,0,0.2);
|
}
|
::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 0;
|
background: transparent;
|
}
|
</style>
|
