<template>
|
<view class="">
|
<view class="main">
|
<view class="top-statistics">
|
<view class="top-body">
|
<view class="content-title">发运统计</view>
|
<view class="content-statistics">
|
<view class="content-text">
|
<view class="content-container">{{ totalLength }}</view>
|
<view class="content-num">车数</view>
|
</view>
|
<view class="content-text">
|
<view class="content-container">{{ totalTon}}</view>
|
<view class="content-num">总质量</view>
|
</view>
|
<view class="content-text">
|
<view class="content-container">{{ tmNum}}</view>
|
<view class="content-num">总件数</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="main-block">
|
<view class="data-filter"
|
@click="showPopup">
|
<view class="search-icon"><u-icon name="search"
|
color="#494949"
|
size="50"></u-icon></view>
|
<view class="date-text">{{ dateselect }}</view>
|
<view class="">
|
<view class="arrow-icon"><u-icon name="arrow-down-fill"
|
color="#1481FF"
|
size="50"></u-icon></view>
|
</view>
|
</view>
|
<view class="filter-condition"></view>
|
<view class="date-information">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
text="暂无数据"
|
v-if="filterList.length === 0"></u-empty>
|
<view class="statistics-card"
|
v-for="(item, index) in filterList"
|
v-if="filterList[index].tmTaskCoalList.length"
|
:key="index">
|
<view class="card-top">
|
<view class="left"><combined-title :title="item.sendDate"></combined-title></view>
|
<view class="card-top_num">
|
{{ item.tmTaskCoalList.length }}车
|
{{Number(item.tmTaskCoalList
|
.reduce((prev, cur) => {
|
cur.clean=cur.clean||0
|
return prev + cur.clean;
|
}, 0)).toFixed(2)}}吨
|
{{Number(item.tmTaskCoalList
|
.reduce((prev, cur) => {
|
cur.productQuantity=cur.productQuantity||0
|
return prev + cur.productQuantity;
|
}, 0))}}件
|
</view>
|
</view>
|
<view class="card-main"
|
v-for="(value, i) in item.tmTaskCoalList"
|
:key="i"
|
@click="faYunDetail(value.id,value)">
|
<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.orderType == '转出'">{{ value.deptName || '' }}</text>
|
<text
|
v-else-if="value.orderType == '外购' || 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.orderType == '转出'">{{ value.customerName || '' }}</text>
|
<text
|
v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '外购退' || value.orderType == '转入'">{{ value.filedName || '' }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="second-line">
|
<view class="coal-name">
|
<view class="productName">{{ value.productNames || value.productName }}</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="second-line">
|
<view class="coal-name">
|
<view class="productName">
|
<text>产品等级：{{ value.productGrade ? value.productGrade : '暂无' }}</text>
|
</view>
|
<view class="productName">
|
<text>{{ proType[value.packingType]}}</text>
|
</view>
|
|
</view>
|
<!-- <view class="black-block"><view class="black-bar"></view></view>
|
<view class="coal-type">{{ value.orderType }}</view> -->
|
</view>
|
<view class="second-line">
|
<view class="coal-name">
|
<view class="productName">
|
<text>计划量：{{ value.planMeasure ?value.planMeasure :'暂无'}}</text>
|
</view>
|
<view class="productName">
|
<text>实际量：{{value.productQuantity ? value.productQuantity : '暂无'}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="third-line">
|
<view class="carnum-icon">
|
<image src="https://wrzs.czjlchem.com:9090/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>
|
</view>
|
</view>
|
<u-popup :show="conditinonShow"
|
mode="bottom"
|
:closeable="true"
|
:closeOnClickOverlay="true"
|
@close="conditinonclose">
|
<scroll-view scroll-y="true"
|
class="scroll-Y">
|
<view class="filter-main">
|
<view class="filter-body date-button">
|
<view class="condition-name">日期</view>
|
<view class="filter-name">
|
<u-button :text="dateselect"
|
@click="opencalendar"></u-button>
|
<view class="filter-button ">
|
<uni-calendar ref="calendar"
|
class="uni-calendar--hook"
|
:clear-date="true"
|
:date="info.date"
|
:insert="info.insert"
|
:lunar="info.lunar"
|
:startDate="info.startDate"
|
:endDate="info.endDate"
|
:range="info.range"
|
@confirm="confirm" />
|
</view>
|
</view>
|
</view>
|
<view class="filter-body">
|
<view class="condition-name">产品</view>
|
<view class="filter-name">
|
<view class="filter-button"
|
v-for="(item, index) in coalList"
|
:key="index"
|
@click="filterCondition(0, index, item.condition)">
|
<u-button :text="item.name"
|
:type="item.active ? 'primary' : ''"
|
size="small"
|
:class="{ shadowactive: item.active }"></u-button>
|
</view>
|
<!-- <view class="toggle-button">
|
<u-button :text="coalShow < coalTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
|
</view> -->
|
</view>
|
</view>
|
<view class="filter-body"
|
v-if="roleType !== 1">
|
<view class="condition-name">客户</view>
|
<view class="filter-name">
|
<view class="filter-button"
|
v-for="(item, index) in customerList"
|
:key="index"
|
@click="filterCondition(2, index, item.condition)">
|
<u-button :text="item.name"
|
:type="item.active ? 'primary' : ''"
|
size="small"></u-button>
|
</view>
|
<!-- <view class="toggle-button">
|
<u-button :text="customerShow < customerTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button>
|
</view> -->
|
</view>
|
</view>
|
<view class="filter-body">
|
<view class="condition-name">仓库</view>
|
<view class="filter-name">
|
<view class="filter-button"
|
v-for="(item, index) in bunnkerList"
|
:key="index"
|
@click="filterCondition(6, index, item.condition)">
|
<u-button :text="item.name"
|
:type="item.active ? 'primary' : ''"
|
size="small"></u-button>
|
</view>
|
<!-- <view class="toggle-button">
|
<u-button :text="carNoShow < carNoTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="utils-button">
|
<view class="reset-button"><u-button type="default"
|
text="重置"
|
:plain="true"
|
shape="circle"
|
@click="resetCondition"></u-button></view>
|
<view class="confirm-button"><u-button type="primary"
|
text="确定"
|
:plain="true"
|
shape="circle"
|
@click="confirmCondition"></u-button></view>
|
</view>
|
</u-popup>
|
<tab-bar :current="1"></tab-bar>
|
</view>
|
<view class="white-block"></view>
|
</view>
|
</template>
|
|
<script>
|
import BigNumber from 'bignumber.js'
|
import combinedTitle from '@/components/combined-title/combined-title.vue';
|
export default {
|
components: {
|
combinedTitle
|
},
|
data() {
|
return {
|
conditionList: [],
|
coalList: [],
|
proType:['散装','液氯瓶装','罐装','PVC25','PVC80','PVC1150','PVc1200'],
|
bunnkerList:[],
|
typeList: [],
|
customerList: [],
|
forwarderList: [],
|
totalLength :0,totalTon:0,tmNum:0,
|
fleetList: [],
|
filedList: [],
|
carNoList: [],
|
isactive: false,
|
info: {
|
lunar: false,
|
range: true,
|
insert: false,
|
selected: []
|
},
|
first: '',
|
last: '',
|
firstFilter: '',
|
lastFilter: '',
|
taskList: [],
|
// tmNum:0,
|
filterList: [],
|
// totalLength: 0,
|
// totalTon: 0,
|
// 筛选弹出层
|
conditinonShow: false,
|
// 超过两行自动隐藏
|
coalShow: 3,
|
typeShow: 3,
|
customerShow: 3,
|
forwarderShow: 3,
|
fleetShow: 3,
|
filedShow: 3,
|
carNoShow: 3,
|
coalToggeleState: false,
|
typeToggeleState: false,
|
customerToggeleState: false,
|
forwarderToggeleState: false,
|
fleetToggeleState: false,
|
filedToggeleState: false,
|
carNoToggeleState: false,
|
// 点击右箭头详情弹窗
|
faYunDetailobj: {},
|
modalShow: false,
|
coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入仓库', '出仓库', '放空', '作废', '入场申请',
|
'进入场院', '异常审核中', '返回加减吨', '超时', '打印中', '打印中', '填写'
|
]
|
};
|
},
|
onShow(){
|
this.firstDate();
|
this.lastDate();
|
// this.getShipping();
|
this.getTmTaskCoalData();
|
},
|
onLoad() {
|
|
},
|
methods: {
|
firstDate() {
|
let y = new Date().getFullYear(); //获取年份
|
let m = new Date().getMonth() + 1; //获取月份
|
let d = '01';
|
m = m < 10 ? '0' + m : m; //月份补 0
|
this.first = [y, m, d].join('-');
|
this.firstFilter = [y, m, d].join('-');
|
},
|
lastDate() {
|
let y = new Date().getFullYear(); //获取年份
|
let m = new Date().getMonth() + 1; //获取月份
|
let d = new Date(y, m, 0).getDate(); //获取当月最后一日
|
m = m < 10 ? '0' + m : m; //月份补 0
|
d = d < 10 ? '0' + d : d; //日数补 0
|
this.last = [y, m, d].join('-');
|
this.lastFilter = [y, m, d].join('-');
|
},
|
// 筛选条件
|
// getShipping() {
|
// this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => {
|
// this.conditionList = res.data;
|
// this.coalList = res.data
|
// .filter(v => v.conditionType == 0)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.typeList = res.data
|
// .filter(v => v.conditionType == 1)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.customerList = res.data
|
// .filter(v => v.conditionType == 2)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.forwarderList = res.data
|
// .filter(v => v.conditionType == 3)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.fleetList = res.data
|
// .filter(v => v.conditionType == 4)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.filedList = res.data
|
// .filter(v => v.conditionType == 5)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// this.carNoList = res.data
|
// .filter(v => v.conditionType == 6)
|
// .map(item => {
|
// return {
|
// ...item,
|
// active: false
|
// };
|
// });
|
// });
|
// },
|
// 获取数据
|
getTmTaskCoalData() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
this.$reqGet('getHistoryTaskCoalList', { startTime: this.first, endTime: this.last,bunkerIds:this.bunkerIds,productIds:uni.getStorageSync('productIds') }).then(res => {
|
console.log(res.data,'res.data');
|
this.filterList = this.taskList = res.data.map(item=>{
|
if(!item.carNum){
|
item.carNum = 0;
|
}
|
if(!item.weight){
|
item.weight = 0;
|
}
|
if(!item.number){
|
item.number = 0;
|
}
|
return item;
|
});
|
// this.totalLength = res.data.carNum;
|
// this.totalTon = res.data.weight;
|
// this.tmNum = res.data.number;
|
if (this.filterList.length != 0) {
|
console.log(this.filterList,'fis')
|
this.totalLength = this.filterList.reduce((x, y) => x + y.carNum,0);
|
this.totalTon = this.filterList.reduce((x, y) => new BigNumber(x).plus( y.weight),0).toFixed(2);
|
this.tmNum = this.filterList.reduce((x, y) => x + y.number,0);
|
let coalTemp,customerTemp,bunnkerTemp = [];
|
coalTemp = res.data.map(item=>item.tmTaskCoalList.map(val=>{
|
return {
|
name:val.productName,
|
active:false
|
}
|
})).flat(Infinity);
|
if(coalTemp.length){
|
let obj = {};
|
this.coalList = coalTemp.reduce(function (item, next) {
|
obj[next.name] ? '' : obj[next.name] = true && item.push(next)
|
return item
|
}, [])
|
}
|
customerTemp = res.data.map(item=>item.tmTaskCoalList.map(val=>{
|
return {
|
name:val.customerName,
|
active:false
|
}
|
})).flat(Infinity)
|
if(customerTemp.length){
|
let obj = {};
|
this.customerList = customerTemp.reduce(function (item, next) {
|
obj[next.name] ? '' : obj[next.name] = true && item.push(next)
|
return item
|
}, [])
|
}
|
bunnkerTemp= res.data.map(item=>item.tmTaskCoalList.map(val=>{
|
return {
|
name:val.bunkerName,
|
active:false
|
}
|
})).flat(Infinity)
|
if(bunnkerTemp.length){
|
let obj = {};
|
this.bunnkerList = bunnkerTemp.reduce(function (item, next) {
|
obj[next.name] ? '' : obj[next.name] = true && item.push(next)
|
return item
|
}, [])
|
}
|
console.log(this.customerList,'list')
|
// this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
|
// this.totalTon = this.filterList.map(v =>
|
// v.taskCoalList.reduce((prev, cur) => {
|
// const cleanvalue = cur.clean || 0
|
// return cleanvalue + prev
|
// }, 0)
|
// );
|
// this.totalTon = this.totalTon.reduce((x, y) => {
|
// let xx = new BigNumber(x)
|
// let yy = new BigNumber(y)
|
// return xx.plus(yy).toNumber().toFixed(2)
|
// }, new BigNumber(0));
|
} else {
|
this.totalLength = 0;
|
this.totalTon = 0;
|
|
}
|
uni.hideLoading();
|
});
|
},
|
// 筛选数据
|
filterCondition(value, i, data) {
|
switch (value) {
|
case 0:
|
this.coalList[i].active = !this.coalList[i].active;
|
break;
|
case 1:
|
this.typeList[i].active = !this.typeList[i].active;
|
break;
|
case 2:
|
this.customerList[i].active = !this.customerList[i].active;
|
break;
|
case 3:
|
this.forwarderList[i].active = !this.forwarderList[i].active;
|
break;
|
case 4:
|
this.fleetList[i].active = !this.fleetList[i].active;
|
break;
|
case 5:
|
this.filedList[i].active = !this.filedList[i].active;
|
break;
|
case 6:
|
this.bunnkerList[i].active = !this.bunnkerList[i].active;
|
break;
|
}
|
//根据active 去筛选数组
|
// let productName = this.coalList.filter(item=>item.active).map(item=>item.name);
|
// let customer = this.customerList.filter(item=>item.active).map(item=>item.name);
|
// let bunnker = this.bunnkerList.filter(item=>item.active).map(item=>item.name);
|
// const tempArr = this.filterList;
|
// console.log(productName,customer,bunnker,'121313');
|
// this.filterList = tempArr.filter(item => this.filterConditionFun(productName,customer,bunnker,item));
|
// this.filterList = tempArr.filter(item=>{
|
// return productName.includes(item) && customer.includes(item)
|
|
// })
|
// if(productName.length){
|
|
// }
|
// if(customer.length){
|
|
// }
|
// if(bunnker.length){
|
|
// }
|
|
const validateFn = key => (v, arr) => {
|
if (arr.length == 0) {
|
return true;
|
} else {
|
return arr.includes(v[key]);
|
}
|
};
|
let conditionMapping = {
|
productName: this.coalList.filter(v => v.active == true).map(item => item.name),
|
customerName: this.customerList.filter(v => v.active == true).map(item => item.name),
|
bunkerName:this.bunnkerList.filter(v => v.active == true).map(item => item.name),
|
};
|
|
const mapping = {
|
productName: validateFn('productName'),
|
customerName: validateFn('customerName'),
|
bunkerName: validateFn('bunkerName'),
|
|
};
|
this.filterList = this.taskList.map((val,i) => {
|
return {
|
carNum:val.carNum,
|
number:val.number,
|
weight:val.weight,
|
sendDate:this.taskList[i].sendDate,
|
tmTaskCoalList: val.tmTaskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key =>
|
mapping[key](v, conditionMapping[key])))
|
};
|
});
|
console.log(this.filterList,'filterList')
|
if (this.filterList.length != 0) {
|
const tempArr = this.filterList.map((item,i)=>{
|
if(!item.tmTaskCoalList.length){
|
item.carNum = 0;
|
item.number = 0;
|
item.weight = 0;
|
}
|
return item;
|
})
|
console.log(tempArr,'temp')
|
this.totalLength = tempArr.reduce((x, y) => x + y.carNum,0);
|
this.totalTon = tempArr.reduce((x, y) => new BigNumber(x).plus( y.weight),0).toFixed(2);
|
this.tmNum = tempArr.reduce((x, y) => x + y.number,0);
|
|
// this.totalTon = this.filterList.map(v =>
|
// v.taskCoalList.reduce((prev, cur) => {
|
// const cleanvalue = cur.clean || 0
|
// return cleanvalue + prev
|
// }, 0)
|
// );
|
// this.totalTon = this.filterList.map(item=>)
|
// this.totalTon = this.filterList.map(v=>v.tmTaskCoalList.filter(item=>item.isWeight === 1).reduce((x,y)=>x.weight + y.weight));
|
|
// this.totalTon = this.totalTon.reduce((x, y) => { //总质量数
|
// let xx = new BigNumber(x)
|
// let yy = new BigNumber(y)
|
// return xx.plus(yy).toNumber().toFixed(2)
|
// }, new BigNumber(0));
|
} else {
|
// this.totalLength = 0;
|
// this.totalTon = 0;
|
// this.tmNum = 0;
|
}
|
},
|
// 确定筛选
|
confirmCondition() {
|
this.conditinonShow = false;
|
},
|
// 重置筛选
|
resetCondition() {
|
this.conditinonShow = false;
|
this.first = this.dateRange.slice(0, 10);
|
this.last = this.dateRange.slice(11);
|
this.coalList.forEach(v => {
|
v.active = false;
|
});
|
this.typeList.forEach(v => {
|
v.active = false;
|
});
|
this.customerList.forEach(v => {
|
v.active = false;
|
});
|
this.forwarderList.forEach(v => {
|
v.active = false;
|
});
|
this.fleetList.forEach(v => {
|
v.active = false;
|
});
|
this.filedList.forEach(v => {
|
v.active = false;
|
});
|
this.getTmTaskCoalData()
|
},
|
confirm(e) {
|
console.log(e, '日期选择');
|
this.first = e.range.before;
|
this.last = e.range.after;
|
this.$nextTick(() => {
|
this.$refs.calendar.close()
|
})
|
},
|
opencalendar() {
|
this.$refs.calendar.open();
|
},
|
// 点击查看更多
|
toggle(value) {
|
switch (value) {
|
case 0:
|
if (!this.coalToggeleState) {
|
this.coalShow = this.coalTotal;
|
this.coalToggeleState = true;
|
} else {
|
this.coalShow = 3;
|
this.coalToggeleState = false;
|
}
|
break;
|
case 1:
|
if (!this.typeToggeleState) {
|
this.typeShow = this.typeTotal;
|
this.typeToggeleState = true;
|
} else {
|
this.typeShow = 3;
|
this.typeToggeleState = false;
|
}
|
break;
|
case 2:
|
if (!this.customerToggeleState) {
|
this.customerShow = this.customerTotal;
|
this.customerToggeleState = true;
|
} else {
|
this.customerShow = 3;
|
this.customerToggeleState = false;
|
}
|
break;
|
case 3:
|
if (!this.forwarderToggeleState) {
|
this.forwarderShow = this.forwarderTotal;
|
this.forwarderToggeleState = true;
|
} else {
|
this.forwarderShow = 3;
|
this.forwarderToggeleState = false;
|
}
|
break;
|
case 4:
|
if (!this.fleetToggeleState) {
|
this.fleetShow = this.fleetTotal;
|
this.fleetToggeleState = true;
|
} else {
|
this.fleetShow = 3;
|
this.fleetToggeleState = false;
|
}
|
break;
|
case 5:
|
if (!this.filedToggeleState) {
|
this.filedShow = this.filedTotal;
|
this.filedToggeleState = true;
|
} else {
|
this.filedShow = 3;
|
this.filedToggeleState = false;
|
}
|
break;
|
case 6:
|
if (!this.carNoToggeleState) {
|
this.carNoShow = this.carNoTotal;
|
this.carNoToggeleState = true;
|
} else {
|
this.carNoShow = 3;
|
this.carNoToggeleState = false;
|
}
|
break;
|
}
|
},
|
// 跳转发运详情
|
faYunDetail(takeCoalId,value) {
|
console.log(takeCoalId,'tackle')
|
uni.navigateTo({
|
url: `/subPages/fayunPlanDetails/fayunPlanMore/fayunPlanMore?id=${takeCoalId}&orderType=${value.orderType}`,
|
success(res) {
|
console.log(res);
|
},
|
fail(err) {
|
console.log(err,'跳转不过去');
|
}
|
});
|
},
|
filterConditionFun(productName,customer,bunnker,item) {
|
return productName.length ? productName.includes(item.productName) : true &&
|
customer.length ? customer.includes(item.customerName) : true &&
|
bunnker.length ? bunnker.includes(item.bunnkerName) : true
|
},
|
// 打开筛选条件弹窗
|
showPopup() {
|
this.conditinonShow = true;
|
},
|
// 关闭筛选条件弹窗
|
conditinonclose() {
|
this.conditinonShow = false;
|
}
|
},
|
computed: {
|
roleType() {
|
return uni.getStorageSync('roleType');
|
},
|
dateRange() {
|
return `${this.firstFilter}至${this.lastFilter}`;
|
},
|
dateselect() {
|
return `${this.first}至${this.last}`;
|
},
|
coalTotal() {
|
return this.coalList.length;
|
},
|
typeTotal() {
|
return this.typeList.length;
|
},
|
customerTotal() {
|
return this.customerList.length;
|
},
|
forwarderTotal() {
|
return this.forwarderList.length;
|
},
|
fleetTotal() {
|
return this.fleetList.length;
|
},
|
filedTotal() {
|
return this.filedList.length;
|
},
|
carNoTotal() {
|
return this.carNoList.length;
|
},
|
userId(){
|
return uni.getStorageSync('userId')
|
},
|
bunkerIds(){
|
return uni.getStorageSync('bunkerIds')
|
},
|
// totalLength(){
|
// console.log(this.filterList,'filterList')
|
// if(this.filterList.length){
|
// return this.filterList.reduce((x, y) => x + y.carNum,0); // 车数
|
// }else{
|
// return 0
|
// }
|
// },
|
// totalTon(){
|
// if(this.filterList.length){
|
// return this.filterList.reduce((x, y) => new BigNumber(x).plus(new BigNumber(y.weight)) ,0).toFixed(2); // 车数
|
// }else{
|
// return 0
|
// }
|
// },
|
// tmNum(){
|
// if(this.filterList.length){
|
// return this.filterList.reduce((x, y) => new BigNumber(x).plus(new BigNumber(y.number)) ,0); // 车数
|
// }else{
|
// return 0
|
// }
|
// }
|
},
|
watch: {
|
dateselect(newV, old) {
|
let tempDate = `${this.first}至${this.last}`;
|
if (newV != old && old != '至') {
|
this.first = newV.slice(0, 10);
|
this.last = newV.slice(11);
|
this.getTmTaskCoalData();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
@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;
|
}
|
|
::v-deep .toggle-button .u-button {
|
width: vww(40);
|
}
|
|
.scroll-Y {
|
height: 1000rpx;
|
position: relative;
|
top: 20rpx;
|
}
|
|
.utils-button {
|
width: 94%;
|
height: vww(30);
|
margin: vww(50) auto;
|
@include flex;
|
|
.reset-button {
|
/deep/ .u-button {
|
border: 1px solid #c5c5c5;
|
outline: none;
|
}
|
}
|
|
.confirm-button {
|
/deep/ .u-button {
|
border: 1px solid #3b56eb;
|
outline: none;
|
color: #3b56eb;
|
}
|
}
|
|
/deep/ .u-button {
|
width: 279rpx;
|
height: 60rpx;
|
font-size: 28rpx;
|
}
|
}
|
|
.white-block {
|
width: 100%;
|
height: vww(50);
|
margin-top: vww(10);
|
}
|
|
.main {
|
width: 100%;
|
margin: 0 auto;
|
|
/*顶部统计栏*/
|
.top-statistics {
|
width: 100%;
|
height: 430rpx;
|
background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
|
display: flex;
|
justify-content: center;
|
|
.top-body {
|
width: 950rpx;
|
height: 220rpx;
|
margin: vww(21) auto;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
|
.content-statistics {
|
width: 950rpx;
|
height: 140rpx;
|
background: #ffffff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
|
border-radius: 10rpx;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
|
.content-text {
|
height: vww(40);
|
@include flex;
|
flex-direction: column;
|
margin-top: 31rpx;
|
margin-bottom: 31rpx;
|
text-align: center;
|
|
.content-container {
|
width: 100%;
|
min-height: vww(16);
|
font-size: 40rpx;
|
font-weight: bold;
|
color: #3b56eb;
|
text-align: center;
|
}
|
|
.content-num {
|
width: 96rpx;
|
min-height: 24rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
|
.content-title {
|
width: 160rpx;
|
height: 38rpx;
|
font-size: 40rpx;
|
font-weight: normal;
|
color: #ffffff;
|
line-height: 69rpx;
|
margin: vww(21) auto;
|
}
|
}
|
}
|
|
.main-block {
|
width: 950rpx;
|
// margin: vww(12) vww(15) auto vww(15);
|
margin: 30rpx auto;
|
background: #ffffff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
|
border-radius: 20rpx;
|
@include flex;
|
flex-direction: column;
|
overflow: hidden;
|
position: relative;
|
top: -145rpx;
|
|
.data-filter {
|
width: 635rpx;
|
height: 68rpx;
|
border: 2px solid rgba(73, 95, 252, 0.6);
|
box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
|
border-radius: 34rpx;
|
margin-top: vww(21);
|
padding: 0 vww(5);
|
|
@include flex .date-text {
|
width: 360rpx;
|
height: 40rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #494949;
|
}
|
}
|
|
.filter-condition {
|
width: 100%;
|
height: 54rpx;
|
background: #f5f5f5;
|
@include flex;
|
margin-top: vww(15);
|
}
|
|
.date-information {
|
width: 800rpx;
|
background: #f6faff;
|
border-radius: 20rpx;
|
|
.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://wrzs.czjlchem.com:9090/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://wrzs.czjlchem.com:9090/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;
|
}
|
}
|
}
|
.five-line{
|
.productName{
|
width: 38%!important;
|
}
|
}
|
|
.second-line ,.five-line{
|
width: 100%;
|
height: vww(15);
|
display: flex;
|
margin-bottom: 10rpx;
|
justify-content: space-between;
|
align-items: center;
|
|
.coal-name {
|
flex-grow: 1;
|
height: 30rpx;
|
font-size: 30rpx;
|
width: 50%;
|
font-weight: 300;
|
color: #515151;
|
position: relative;
|
display: flex;
|
align-items: center;
|
.productName{
|
width: 50%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.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;
|
margin-top: 10rpx;
|
color: #515151;
|
|
.time-icon {
|
margin-right: vww(10);
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.filter-main {
|
min-height: 950rpx;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.date-button {
|
width: 80%;
|
height: vww(80);
|
margin: vww(5) auto;
|
|
.condition-name {
|
margin-bottom: vww(10);
|
}
|
}
|
|
.filter-body {
|
width: 100%;
|
position: relative;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
|
.condition-name {
|
margin-left: vww(15);
|
margin-top: vww(10);
|
font-size: vww(16);
|
color: #686868;
|
}
|
|
.filter-name {
|
width: 94%;
|
margin: 0 auto;
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-items: flex-start;
|
|
.filter-button {
|
color: #393a3c;
|
height: vww(16);
|
padding: vww(8);
|
margin: vww(5) vww(5);
|
margin-bottom: vww(10);
|
|
/deep/ .shadowactive {
|
background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
|
box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
|
}
|
}
|
|
.toggle-button {
|
width: 30%;
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
right: vww(-21);
|
top: vww(-23);
|
}
|
}
|
}
|
}
|
|
// 日期发运
|
// .date-information {
|
// width: 100%;
|
// display: flex;
|
// flex-direction: column;
|
// .statistics-card {
|
// width: 100%;
|
// margin-top: vww(8);
|
// border: 1px solid #cccccc;
|
// border-radius: vww(5);
|
// background-color: #fff;
|
// min-height: vww(120);
|
// display: flex;
|
// flex-direction: column;
|
// justify-content: space-between;
|
// .card-title {
|
// width: 100%;
|
// height: vww(40);
|
// line-height: vww(40);
|
// padding-left: vww(5);
|
// color: #bcbcbc;
|
// border-bottom: 1px solid #cccccc;
|
// display: flex;
|
// .title-date {
|
// width: vww(90);
|
// margin-right: vww(10);
|
// }
|
// .title-number {
|
// flex: 1;
|
// }
|
// }
|
// .card-main {
|
// width: 100%;
|
// flex: 1;
|
// position: relative;
|
// .arrow-right {
|
// position: absolute;
|
// right: vww(14);
|
// top: vww(18);
|
// }
|
// .main-body {
|
// width: 80%;
|
// height: vww(60);
|
// margin-top: vww(5);
|
// padding: vww(3);
|
// color: #686868;
|
// display: flex;
|
// flex-wrap: wrap;
|
// justify-content: space-around;
|
// }
|
// }
|
// }
|
// }
|
}
|
</style>
|
