|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <!-- 在途运输信息选择页面 -->
|
|
|
+ <div class="inTransit">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <label class="el-form-item__label" style="width: auto;">时间段</label>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateValue"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="el-form-item__span" style="width: auto;">产品分类</span>
|
|
|
+ <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="el-form-item__span" style="width: auto;">车牌号</span>
|
|
|
+ <el-input v-model="capacityNumber1" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="el-form-item__span" style="width: auto;">收货单位</span>
|
|
|
+ <el-input v-model="consigneeCompanyName1" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="el-form-item__span" style="width: auto;">承运单位</span>
|
|
|
+ <el-input v-model="carrierName" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="el-form-item__span" style="width: auto;">门岗名称</span>
|
|
|
+ <el-input v-model="gatepostName" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSearch"><i class="el-icon-search"></i>查询</el-button>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 执行中 -->
|
|
|
+
|
|
|
+ <mergeRowTable ref="tab" v-bind.sync="option">
|
|
|
+ <el-table-column fixed="right" label="操作" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="click(scope.row)" type="text" size="small" style="font-size: 17px">轨迹</el-button>
|
|
|
+ <el-button @click="toPhotoClick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">抵达图</el-button>
|
|
|
+ <el-button @click="receipctPhotoClick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">签收图</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </mergeRowTable>
|
|
|
+
|
|
|
+ <div style="height: 100%">
|
|
|
+ <vxe-modal width="1237" height="731" v-model="value7" show-zoom resize>
|
|
|
+ <template #default>
|
|
|
+ <PathView v-bind.sync="pathOption"></PathView>
|
|
|
+ </template>
|
|
|
+ </vxe-modal>
|
|
|
+ </div>
|
|
|
+ <vxe-modal width="549px" height="731px" v-model="isShow" show-footer>
|
|
|
+ <div class="demo-image__preview">
|
|
|
+ <el-image
|
|
|
+ style=" height:731px;text-align:center"
|
|
|
+ :src="src"
|
|
|
+ :preview-src-list="srcList"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </vxe-modal>
|
|
|
+ <vxe-modal width="549px" height="731px" v-model="isShow2" show-footer>
|
|
|
+ <div class="demo-image__preview">
|
|
|
+ <el-image
|
|
|
+ style=" height:731px;text-align:center"
|
|
|
+ :src="src2"
|
|
|
+ :preview-src-list="srcList2"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </vxe-modal>
|
|
|
+ <div style="height: 100%">
|
|
|
+ <vxe-modal width="1237" height="731" v-model="value5" show-zoom resize>
|
|
|
+ <template #default>
|
|
|
+ <dilTable ref="tableAlarm" v-bind.sync="optionAlarm"></dilTable>
|
|
|
+ </template>
|
|
|
+ </vxe-modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import { sjTime } from "@/utils/sharedJsFile";
|
|
|
+import PathView from "./mapTest.vue"
|
|
|
+export default {
|
|
|
+ name: "inTransit",
|
|
|
+ components: {
|
|
|
+ PathView,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dateValue:[new Date(), new Date()],
|
|
|
+ inputValue:"",
|
|
|
+ exceptionType:"全部类型",
|
|
|
+ selectOrderNumber:"",
|
|
|
+ capacityNumber1:"",
|
|
|
+ carrierName:"",
|
|
|
+ gatepostName:"",
|
|
|
+ value7:false,
|
|
|
+ value6:false,
|
|
|
+ value5:false,
|
|
|
+ dialogVisible:false,
|
|
|
+ consigneeCompanyName1:"",
|
|
|
+ status: "",
|
|
|
+ state: "",
|
|
|
+ activeName: "first",
|
|
|
+ option: {
|
|
|
+ // 表格请求数据的地址
|
|
|
+ requestUrl: "/api/v1/otms/transportationPerformance?apiId=479",
|
|
|
+ comparison:"orderNumber",
|
|
|
+ columnIndexs:[1,2,8,9,10,11,12,13,14,15,16,17,18,19],
|
|
|
+ },
|
|
|
+
|
|
|
+ optionAlarm:{
|
|
|
+ requestUrl: "",
|
|
|
+ },
|
|
|
+ pathOption:{
|
|
|
+ orderNumber:'',
|
|
|
+ capacityNumber:'',
|
|
|
+ startPointName:'',
|
|
|
+ endPointName:'',
|
|
|
+ },
|
|
|
+ mileOption:{
|
|
|
+ orderNumber:''
|
|
|
+ },
|
|
|
+ alarmOption:{
|
|
|
+ orderNumber:''
|
|
|
+ },
|
|
|
+ srcList: [],
|
|
|
+ src: "",
|
|
|
+ isShow:false,
|
|
|
+ srcList2: [],
|
|
|
+ src2: "",
|
|
|
+ isShow2:false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("nijfdsojfosafj")
|
|
|
+ this.restaurants = this.loadAll();
|
|
|
+ // this.onSearch();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ receipctPhotoClick(orderNumber){
|
|
|
+ this.axios
|
|
|
+ .post("/api/v1/otms/getReceivingPhotoByUrl?orderNumber="+orderNumber)
|
|
|
+ .then((res)=>{
|
|
|
+ console.log(res.data)
|
|
|
+ this.isShow2=true;
|
|
|
+ this.srcList2=[];
|
|
|
+ this.src2=res.data.resultSignedNotePhoto;
|
|
|
+ this.srcList2.push(res.data.resultSignedNotePhoto);
|
|
|
+ this.srcList2.push(res.data.resultEmptyContainerPhoto);
|
|
|
+ if(res.data.resultReceiveNotePhoto!=null){
|
|
|
+ this.srcList2.push(res.data.resultReceiveNotePhoto);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toPhotoClick(orderNumber) {
|
|
|
+ this.axios
|
|
|
+ .post("/api/v1/otms/getArrivalPhoto?orderNumber=" + orderNumber)
|
|
|
+ .then(res => {
|
|
|
+ this.srcList = [];
|
|
|
+ this.src = res.data.data;
|
|
|
+ this.isShow = true;
|
|
|
+ this.srcList.push(res.data.data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ showPathView(data){
|
|
|
+ this.dialogVisible=!this.dialogVisible;
|
|
|
+ this.selectOrderNumber=data.orderNumber;
|
|
|
+ },
|
|
|
+
|
|
|
+ createFilter(queryString) {
|
|
|
+ return (restaurant) => {
|
|
|
+ return (
|
|
|
+ restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ };
|
|
|
+ },
|
|
|
+ loadAll() {
|
|
|
+ return [
|
|
|
+ { value: "螺纹钢"},
|
|
|
+ { value: "微粉"},
|
|
|
+ { value: "带钢"},
|
|
|
+ { value: "钢坯"},
|
|
|
+ { value: "其他"},
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ exportData(){
|
|
|
+
|
|
|
+
|
|
|
+ let tHeader = [];
|
|
|
+ let filterVal = [];
|
|
|
+ if(this.activeName=="first"){
|
|
|
+ this.$refs.tab.dataColumnData.filter( (item,i) =>{
|
|
|
+ tHeader.push(item.label);
|
|
|
+ filterVal.push(item.prop);
|
|
|
+ } )
|
|
|
+ this.export2Excel(tHeader,filterVal,this.$refs.tab.dataTabel,'执行中表格');
|
|
|
+ }else if(this.activeName=="second"){
|
|
|
+ this.$refs.tab2.dataColumnData.filter( (item,i) =>{
|
|
|
+ tHeader.push(item.label);
|
|
|
+ filterVal.push(item.prop);
|
|
|
+ } )
|
|
|
+ this.export2Excel(tHeader,filterVal,this.$refs.tab2.dataTabel,'已完成表格');
|
|
|
+ } else if(this.activeName=="third"){
|
|
|
+ this.$refs.tab3.dataColumnData.filter( (item,i) =>{
|
|
|
+ tHeader.push(item.label);
|
|
|
+ filterVal.push(item.prop);
|
|
|
+ } )
|
|
|
+ this.export2Excel(tHeader,filterVal,this.$refs.tab3.dataTabel,'有异常表格');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ export2Excel(tHeader,filterVal,dataTabel,exeName) {
|
|
|
+ var that = this;
|
|
|
+ this.downloadLoading = true
|
|
|
+ require.ensure([], () => {
|
|
|
+ const { export_json_to_excel } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径,使用@/+存放export2Excel的路径
|
|
|
+ console.log("export_json_to_excel",export_json_to_excel)
|
|
|
+ let list = dataTabel;
|
|
|
+ let data = that.formatJson(filterVal, list);
|
|
|
+ export_json_to_excel(tHeader, data, exeName); // 导出的表格名称
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //3.格式转换
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
+ },
|
|
|
+ onSearch(){
|
|
|
+
|
|
|
+ if(this.activeName=="first"){
|
|
|
+ //改变执行中条件
|
|
|
+ console.log(this.$refs.tab)
|
|
|
+ console.log("this.$refs.tab")
|
|
|
+ this.$refs.tab.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
|
|
|
+ "endTime": sjTime(this.dateValue[1]),
|
|
|
+ "materialNames": this.inputValue,
|
|
|
+ "capacityNumbers": this.capacityNumber1,
|
|
|
+ "carrierNames":this.carrierName,
|
|
|
+ "outGatepostNames":this.gatepostName,
|
|
|
+ "receiveNames": this.consigneeCompanyName1});
|
|
|
+ }
|
|
|
+ if(this.activeName=="second"){
|
|
|
+ //改变已完成条件
|
|
|
+ this.$refs.tab2.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
|
|
|
+ "endTime": sjTime(this.dateValue[1]),
|
|
|
+ "materialNames": this.inputValue,
|
|
|
+ "capacityNumbers": this.capacityNumber1,
|
|
|
+ "carrierNames":this.carrierName,
|
|
|
+ "outGatepostNames":this.gatepostName,
|
|
|
+ "receiveNames": this.consigneeCompanyName1});
|
|
|
+ }
|
|
|
+ if(this.activeName=="third"){
|
|
|
+ //改变有异常条件
|
|
|
+ this.$refs.tab3.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
|
|
|
+ "endTime": sjTime(this.dateValue[1]),
|
|
|
+ "materialNames": this.inputValue,
|
|
|
+ "capacityNumber1": this.capacityNumber1,
|
|
|
+ "carrierName1":this.carrierName,
|
|
|
+ "abnormalType":this.exceptionType=="全部类型"?"":this.exceptionType,
|
|
|
+ "outGatepostNames":this.gatepostName,
|
|
|
+ "receiveNames": this.consigneeCompanyName1});
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //other
|
|
|
+ click(row) {
|
|
|
+
|
|
|
+ this.pathOption.orderNumber=row.orderNumber;
|
|
|
+ this.pathOption.capacityNumber=row.capacityNumber;
|
|
|
+ this.pathOption.startPointName="达钢集团"+row.outGatepostName,
|
|
|
+ this.pathOption.endPointName=row.deliveryAddress,
|
|
|
+ this.value7=true;
|
|
|
+
|
|
|
+ },
|
|
|
+ historyclick(row){
|
|
|
+
|
|
|
+ this.pathOption.orderNumber=row.orderNumber;
|
|
|
+ this.pathOption.capacityNumber=row.capacityNumber;
|
|
|
+ this.pathOption.startPointName="达钢集团"+row.outGatepostName,
|
|
|
+ this.pathOption.endPointName=row.deliveryAddress,
|
|
|
+ console.log(this.pathOption,"this.pathOption")
|
|
|
+ this.value7=true;
|
|
|
+ },
|
|
|
+ allDistanceclick(orderNumber){
|
|
|
+ //this.$router.push("/offsite/inTransitOrderMileage?orderNumber="+orderNumber);
|
|
|
+
|
|
|
+ this.mileOption.orderNumber=orderNumber;
|
|
|
+ this.value6=true;
|
|
|
+ },
|
|
|
+ inTransitAlarmclick(orderNumber){
|
|
|
+ this.optionAlarm.requestUrl="/api/v1/otms/getTransportAbnormalInfo?apiId=472&orderNumbers="+orderNumber;
|
|
|
+ this.value5=true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.el-input {
|
|
|
+ width: 150px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+span.el-form-item__span {
|
|
|
+ float: left;
|
|
|
+ margin-top: 7px;
|
|
|
+}
|
|
|
+.homeworkPath {
|
|
|
+ .top {
|
|
|
+ padding: 20px 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|