|
|
@@ -364,7 +364,35 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
@endcan
|
|
|
+ <div class="col-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="flex-column">
|
|
|
+ <el-date-picker size="small" class="col-6 date" @blur="loadExceptionTypeInfo()"
|
|
|
+ type="daterange" align="right"
|
|
|
+ v-model="searchOption.exceptionTypeDate" unlink-panels range-separator="-"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-select class="col-3" placeholder="请选择对应货主" multiple v-model="selectExceptionTypeOwners" size="small" style="width: 20%" @change="loadExceptionTypeInfo()">
|
|
|
+ <el-option label="选择所有" value="all"></el-option>
|
|
|
+ <el-option v-for="item in owners" :label="item.name" :value="item.id" :key="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <label class="col-3 ">
|
|
|
+ <select class="form-control rounded" v-model="searchOption.exceptionTypeSelect"
|
|
|
+ @change="switchExceptionTypeDate()">
|
|
|
+ <option v-for="(date,i) in dateOptions" :value="i">@{{ date.text }}</option>
|
|
|
+ </select>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body row">
|
|
|
+ <div id="exceptionType" class="col-12" style="min-height: 500px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
@endsection
|
|
|
@@ -380,6 +408,7 @@
|
|
|
owners:{!! $owners !!},
|
|
|
selectOrderOwners: [],
|
|
|
selectLogisticsOwners: [],
|
|
|
+ selectExceptionTypeOwners: [],
|
|
|
warehousesOrders:{!! $warehousesOrders !!},
|
|
|
orderCountingRecords:{},
|
|
|
logisticsCountingRecords:{},
|
|
|
@@ -481,7 +510,9 @@
|
|
|
cardPool:{},
|
|
|
searchOption:{
|
|
|
weightDate:[],
|
|
|
+ exceptionTypeDate: [],
|
|
|
weightSelect:"",
|
|
|
+ exceptionTypeSelect:"",
|
|
|
},
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -506,7 +537,9 @@
|
|
|
$('#list').removeClass('d-none');
|
|
|
let index = 4;
|
|
|
this.searchOption.weightSelect = index;
|
|
|
+ this.searchOption.exceptionTypeSelect = index;
|
|
|
this.searchOption.weightDate = [this.dateOptions[index].start, this.dateOptions[index].end];
|
|
|
+ this.searchOption.exceptionTypeDate = [this.dateOptions[index].start, this.dateOptions[index].end];
|
|
|
let _this = this;
|
|
|
this.warehousesOrders.forEach(function (item) {
|
|
|
_this.totalOrders.total += parseInt(item.total);
|
|
|
@@ -543,6 +576,8 @@
|
|
|
this.cardPool.weight = echarts.init(document.getElementById("weight"));
|
|
|
this.loadWeightInfo();
|
|
|
@endcan
|
|
|
+ this.cardPool.exceptionType = echarts.init(document.getElementById("exceptionType"));
|
|
|
+ this.loadExceptionTypeInfo();
|
|
|
},
|
|
|
methods: {
|
|
|
switchDataPanel_forOrderCountingRecords(fromUnit, toUnit) {
|
|
|
@@ -898,11 +933,34 @@
|
|
|
this.cardPool.weight.setOption(this._setWeightData(res.title,res.data));
|
|
|
});
|
|
|
},
|
|
|
+ loadExceptionTypeInfo() {
|
|
|
+ window.tempTip.setDuration(3000);
|
|
|
+ if (!this.searchOption.exceptionTypeDate[0]){
|
|
|
+ window.tempTip.show("开始时间未选择");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.searchOption.exceptionTypeDate[1]){
|
|
|
+ window.tempTip.show("结束时间未选择");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.cardPool.exceptionType.showLoading('default',{text:"加 载 中",color:'#C0C0C0'});
|
|
|
+ let url = "{{url('apiLocal/control/panel/menu/exceptionTypeApi')}}";
|
|
|
+ let params = {start:this.searchOption.exceptionTypeDate[0],end:this.searchOption.exceptionTypeDate[1],owner_ids:this.selectExceptionTypeOwners};
|
|
|
+ window.tempTip.postBasicRequest(url,params,res=>{
|
|
|
+ this.cardPool.exceptionType.hideLoading();
|
|
|
+ this.cardPool.exceptionType.setOption(this._setExceptionTypeData(res.data));
|
|
|
+ });
|
|
|
+ },
|
|
|
switchWeightDate(){
|
|
|
let obj = this.dateOptions[this.searchOption.weightSelect];
|
|
|
this.searchOption.weightDate = [obj.start,obj.end];
|
|
|
this.loadWeightInfo();
|
|
|
},
|
|
|
+ switchExceptionTypeDate(){
|
|
|
+ let obj = this.dateOptions[this.searchOption.exceptionTypeSelect];
|
|
|
+ this.searchOption.exceptionTypeDate = [obj.start,obj.end];
|
|
|
+ this.loadExceptionTypeInfo();
|
|
|
+ },
|
|
|
_setWeightData(title, data){
|
|
|
return {
|
|
|
title: {
|
|
|
@@ -937,6 +995,41 @@
|
|
|
}]
|
|
|
};
|
|
|
},
|
|
|
+ _setExceptionTypeData(data) {
|
|
|
+ let resData = [];
|
|
|
+ data.forEach(item => {
|
|
|
+ resData.push({
|
|
|
+ value:item.count,
|
|
|
+ name:item.exception_type
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text: '异常分布',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '异常分布',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: resData,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
</script>
|