<template>
|
<view class="statistics-card">
|
<view class="card-top">
|
<view class="left"><combined-title :title="item.condition"></combined-title></view>
|
<view class="card-top_num">
|
{{ item.taskCoalList.length }}车
|
{{Number(item.taskCoalList
|
.reduce((prev, cur) => {
|
cur.clean=cur.clean||0
|
return prev + cur.clean;
|
}, 0)).toFixed(2)}}吨
|
</view>
|
</view>
|
<view class="card-main"
|
v-for="(value, i) in item.taskCoalList"
|
:key="i"
|
@click="faYunDetail(value.id)">
|
<view class="first-line">
|
<view class="main-information">
|
<view class="sign">装</view>
|
<view class="filedname">
|
<text
|
v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
|
<text
|
v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
|
</view>
|
</view>
|
<view class="main-divider"></view>
|
<view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view>
|
</view>
|
<view class="first-extra">
|
<view class="main-information">
|
<view class="sign">卸</view>
|
<view class="filedname">
|
<text
|
v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
|
<text
|
v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="second-line">
|
<view class="coal-name">
|
<view class="">{{ value.coalName }}</view>
|
<view class="black-bar"></view>
|
<view class="coal-type"
|
v-if="value.orderType">{{ value.orderType }}</view>
|
</view>
|
<!-- <view class="black-block"><view class="black-bar"></view></view>
|
<view class="coal-type">{{ value.orderType }}</view> -->
|
</view>
|
<view class="third-line">
|
<view class="carnum-icon">
|
<image src="https://mr1.res.jzeg.cn:9096/appimg/image/banner/carNO.png"
|
mode="widthFix"></image>
|
</view>
|
<view class="carnum-text">{{ value.carNo || '' }}</view>
|
</view>
|
<view class="fourth-line">
|
<view class="time-icon"><u-icon name="clock"
|
color="#515151"
|
size="28"></u-icon></view>
|
<view class="send-date">{{ value.sendDate }}</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
<script>
|
export default {
|
name: 'card',
|
props: {
|
// icon: {
|
// type: Boolean,
|
// default: false
|
item: {
|
type: Object,
|
default: {},
|
}
|
},
|
data() {
|
return {};
|
},
|
methods: {
|
bodyClick() {
|
this.$emit('click', this.name);
|
},
|
// 跳转发运详情
|
faYunDetail(takeCoalId) {
|
uni.navigateTo({
|
url: `/pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails?id=${takeCoalId}`
|
});
|
},
|
// iconClick() {
|
// this.$emit('iconClick', this.name);
|
// }
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@mixin flex {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
@mixin firstLine {
|
width: 80%;
|
height: vww(68);
|
margin: vww(10) vww(16) 0 0;
|
display: flex;
|
justify-content: space-between;
|
}
|
.statistics-card {
|
width: 100%;
|
min-height: vww(120);
|
@include flex;
|
flex-direction: column;
|
margin-top: vww(5);
|
margin-bottom: vww(5);
|
overflow: hidden;
|
|
&:last-child {
|
.card-main {
|
&:last-child {
|
border-bottom: 0;
|
}
|
}
|
}
|
|
.card-top {
|
width: 96%;
|
@include flex;
|
|
.left {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #494949;
|
}
|
|
.card-top_num {
|
font-size: 40rpx;
|
font-weight: 400;
|
color: #6074ee;
|
}
|
}
|
|
.card-main {
|
width: 100%;
|
height: vww(150);
|
border-bottom: vww(1) solid #d6d6d6;
|
margin-top: vww(12);
|
margin-left: vww(20);
|
padding-bottom: vww(12);
|
position: relative;
|
@include flex;
|
flex-direction: column;
|
align-items: flex-start;
|
|
.first-line {
|
width: 80%;
|
height: vww(32);
|
color: #303030;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.main-information {
|
width: 88%;
|
height: vww(28);
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.sign {
|
width: vww(28);
|
height: vww(28);
|
line-height: vww(28);
|
text-align: center;
|
background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/blueblock.png') no-repeat;
|
background-size: contain;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #ffffff;
|
margin-right: vww(20);
|
}
|
|
.filedname {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
flex: 1;
|
}
|
}
|
|
.main-divider {
|
width: 530rpx;
|
height: 1rpx;
|
background: #e3e3e3;
|
position: absolute;
|
top: 80rpx;
|
left: vww(50);
|
}
|
|
.point-number {
|
width: 20%;
|
font-size: 40rpx;
|
font-weight: 400;
|
color: #f81414;
|
position: absolute;
|
right: 12rpx;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
}
|
|
.first-extra {
|
@include firstLine;
|
height: vww(32);
|
align-items: center;
|
|
.main-information {
|
width: 100%;
|
height: vww(28);
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.sign {
|
width: vww(28);
|
height: vww(28);
|
line-height: vww(28);
|
text-align: center;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/redblock.png') no-repeat;
|
background-size: contain;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #ffffff;
|
margin-right: vww(20);
|
}
|
|
.filedname {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
flex: 1;
|
}
|
}
|
}
|
|
.second-line {
|
width: 100%;
|
height: vww(15);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.coal-name {
|
flex-grow: 1;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
position: relative;
|
display: flex;
|
align-items: center;
|
|
.black-bar {
|
width: 2rpx;
|
height: 30rpx;
|
background: #515151;
|
margin-left: vww(12);
|
}
|
|
.coal-type {
|
margin-left: vww(12);
|
min-width: vww(50);
|
height: 30rpx;
|
line-height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
}
|
|
.third-line {
|
width: 40%;
|
min-height: vww(15);
|
display: flex;
|
justify-content: flex-start;
|
align-items: flex-start;
|
|
.carnum-icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: vww(10);
|
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
|
.carnum-text {
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
|
.fourth-line {
|
width: 40%;
|
height: vww(14);
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
color: #515151;
|
|
.time-icon {
|
margin-right: vww(10);
|
}
|
}
|
}
|
|
|
|
}
|
</style>
|
