小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
commit | author | age
423585 1 <template>
C 2   <div class="map-container">
3     <div id="container" style="height: 100%"></div>
4     <div class="track-main">
5       <div class="search">
6         <div class="search-input">
7           <el-input
8             v-model="mapSearch"
9             clearable
10             type="textarea"
11             :rows="2"
12           ></el-input>
13           <div class="public-btn btns">
14             <button @click="allSelect"><i class="iconfont icon-sousuo"></i>查询</button>
15           </div>
16         </div>
17         <div class="count">
18           <i class="iconfont icon-diqiu"></i>
19           查询次数 : <span>{{count}}</span> 次
20         </div>
21       </div>
22       <div class="search box-info" v-if="isAllShow">
23         <div class="public-btn box-btns">
24           <button
25             v-for="(btn, index) in btns"
26             :key="index"
27             :class="{ selectbtn: activeBtn == btn }"
28             @click="btnClick(btn)"
29           >
30             {{ btn }}
31           </button>
32         </div>
33         <div class="box-info-show" v-for="box in orderTrackingModel" :key="box.BoxId" @click="trackBox(box)">
34           <div class="top-box">
35             <div class="left">
36               <i class="iconfont icon-jizhuangxiang_container"></i>
37               <span>{{box.BoxTypeCode}}</span>
38               <span>限重{{box.WeightLimit|weight}}T</span>
39             </div>
40           </div>
41           <div class="info">
42             <i class="iconfont icon-matou"></i>
43             <span>{{box.BolCode}}提单号</span>
44           </div>
45           <div class="info">
46             <i class="iconfont icon-fenxiang"></i>
47             <span>{{box.ObcarContainerNo}}箱号</span>
48           </div>
49         </div>
50       </div>
51     </div>
52     <div class="foot" v-if="isNoDispatch">
53       <div class="track-foot">
7f5659 54         <div >等待</div>
423585 55         <div class="track-show">
C 56           <div><i class="iconfont icon-changyongicon-1"></i></div>
57           <div class="track-box" v-for="item in waiting" :key="item.BoxId">
58             <i class="iconfont icon-express-package-full"></i>
59             <div class="box-show">
60               <div class="time">{{item.Time}}</div>
61               <div class="last-box">
62                 <i class="iconfont icon-jizhuangxiang_container"></i>
63                 <span>{{item.BoxTypeCode}}</span>
64                 <span>限重{{item.WeightLimit}}T</span>
65               </div>
66             </div>
67           </div>
68           <div><i class="iconfont icon-changyongicon-"></i></div>
69         </div>
70       </div>
71     </div>
7f5659 72
C 73     <!-- 查看详情弹窗 -->
423585 74   </div>
C 75 </template>
76 <script>
77 import AMap from "AMap";
78 export default {
79   data() {
80     return {
81       mapSearch: "",
82       btns: ["全部", "出发", "到达", "还箱"],
83       activeBtn: "全部",
84       isAllShow:false,
85       isNoDispatch:false,
86       orderTrackingModel:[],
87       waiting:[],
88       count:0,
7f5659 89       boxDetails:{}
423585 90     };
C 91   },
92   mounted() {
93     this.init();
94        console.log(window.sessionStorage.getItem("token"))
95   },
96   filters:{
97     weight(val){
98       var newVal = val.split('.')[0];
99       return newVal;
100     }
101   },
102   created(){
103     this.getCount();
104   },
105   methods: {
106     allSelect(){
107         this.getCount();
108         this.getAllBox()
109     },
110     trackBox(content){
7f5659 111       new Promise(resolve=>{
C 112             let result =this.getDetails({box_id:content.BoxId});
113             resolve(result);
114       }).then(res=>{
115              this.addMarker(content,res);
116       })
117      
423585 118     },
7f5659 119
423585 120     //获取箱子信息
C 121     async getAllBox(){
122      this.isAllShow= true;
123          this.isNoDispatch=true;
124        await this.$axios.post("api/OrderTracking/QueryOrderTracking",this.$qs.stringify({orderNumber:"Z210225022610223",type:-1})).then(res=>{
125          this.orderTrackingModel = res.data.rows;
126           for(var i=0;i<  this.orderTrackingModel.length;i++){
127               if( this.orderTrackingModel[i].ObcarState==0){
128                 this.waiting.push(this.orderTrackingModel[i]);
129               }
130           }
131        }).catch(err=>{
132          console.log(err);
133        })
134     },
135     //获取查询次数
136     async getCount(){
137        await this.$axios.get("api/OrderTracking/QueryOrderNumber").then(res=>{
138           this.count = res.data
139        }).catch(err=>{
140          console.log(err);
141        })
142     },
143     //获取详情
7f5659 144     async getDetails(model){
C 145       await this.$axios.post("api/OrderTracking/QueryOrderTrackingDetails",this.$qs.stringify(model)).then(res=>{
146         
147         this.boxDetails = res.data;
423585 148       }).catch(err=>{
C 149             console.log(err);
150       })
7f5659 151       return this.boxDetails;
423585 152     },
C 153     init() {
154       let map = new AMap.Map("container", {
155         center: [116.481181, 39.989792],
156         resizeEnable: true,
157         zoom: 10,
158       });
159     },
160     btnClick(content) {
161       this.activeBtn = content;
162     },
163     addMarker(content) {
7f5659 164       let newBoxDetails = this.boxDetails;
C 165       let newthis = this;
166       new Promise(resolve=>{
167  let map = new AMap.Map("container", {
423585 168         center: [content.CtoLongitude, content.CtoLatitude],
C 169         resizeEnable: true,
170         zoom: 10,
171       });
172       var marker = new AMap.Marker({
173         map: map,
174         position: [content.CtoLongitude, content.CtoLatitude],
7f5659 175         icon: require("../../../public/img/map/position.png"),
423585 176         offset: new AMap.Pixel(-13, -30),
C 177       });
178       // map.remove(markers);
179       map.add(marker);
180       //构建信息窗体中显示的内容
181       var info = [];
7f5659 182       let showInfo = `  <div style="width: 300px;" >
C 183         <div  style="display:flex;justify-content: space-between;margin-top:13px;">
184           <div style="border: 1px solid #c3c3c3;padding: 3px;">
185             <i class="iconfont icon-jizhuangxiang_container"></i>
186             <span>${content.BoxTypeCode}</span>
187             <span>限重${content.WeightLimit.slice(0,2)}T</span>
423585 188           </div>
7f5659 189           <div style="border: 1px solid #c3c3c3;padding:3px 8px;color:#E6A23C;background-color:#f2f2f2 ;">出发</div>
C 190         </div>
191         <div class="info" style="padding: 6px 0px;">
192           <i class="iconfont icon-matou"></i>
193           <span>${content.BolCode}提单号</span>
194         </div>
195         <div style="margin-bottom: 6px;">
196           <i class="iconfont icon-fenxiang"></i>
197           <span>${content.ObcarContainerNo}箱号</span>
198         </div>
199         <div class="info">
200           <div id="select">
201                  <span id="xiangqing" style="text-decoration: underline;color:#409EFF;">查看详情</span>
202                  <i class="el-icon-caret-bottom"></i>
423585 203           </div>
7f5659 204          <div id="packup" style="display:none;">
C 205               <span id="fewer" style="text-decoration: underline;color:#409EFF;">收起详情</span>
206                  <i class="el-icon-caret-top"></i>
207          </div>
208        
209          
210         </div>
423585 211
7f5659 212         <div style="display:none" id="details">
C 213           <div style="margin-top:6px;">
214             <b>${newBoxDetails.CarName}</b><span>${newBoxDetails.UderName}</span>
215           </div>
216            
217            <div  >
218               <i class="el-icon-phone-outline"></i>
219               <span>${newBoxDetails.UderPhone}</span>
220            </div>
221
222            <div >
223               <i class="iconfont icon-listmatou"></i>
224               <span>${newBoxDetails.TradeCode}</span>
225               <span>进舱编号</span>
226            </div>
227
228           <div >
229               <i class="iconfont icon-listmatou"></i>
230               <span>${newBoxDetails.ObcarContainerOwner}</span>
231               <span>箱主</span>
232            </div>
233
234              <div>
235               <i class="iconfont icon-listmatou"></i>
236               <span>${newBoxDetails.ObcarBoxSeal}</span>
237               <span>封号</span>
238            </div>
239
240         </div>
241       </div>`;
242       
423585 243       info.push(showInfo);
C 244      var infoWindow = new AMap.InfoWindow({
7f5659 245         offset: new AMap.Pixel(13, -30),
423585 246         content: info.join("<br/>"), //使用默认信息窗体框样式,显示信息内容
C 247       });
248
249       infoWindow.open(map, [content.CtoLongitude, content.CtoLatitude]);
250       map.setFitView([marker]);
7f5659 251       setTimeout(()=>{
C 252            resolve("hello");
253       },200)
254      
255       }).then(res=>{
256         newthis.demo();
257          newthis.pickupDetails();
258   //  document.getElementById("xiangqing").onclick=function(){
259   //       alert(res)
260   //     }
261       })
262        
263
264       // setTimeout(()=>{
265          
266       // },200)
267     
423585 268     },
7f5659 269     pickupDetails(){
C 270         document.getElementById("fewer").onclick=function(){
271             document.getElementById("details").style.display="none";
272           document.getElementById("packup").style.display='none';
273           document.getElementById("select").style.display='block';
274         }
275     },
276     demo(){
277       document.getElementById("xiangqing").onclick=function(){
278           document.getElementById("details").style.display="block";
279           document.getElementById("packup").style.display='block';
280           document.getElementById("select").style.display='none';
281       }
282     }
423585 283   },
C 284 };
285 </script>
286 <style lang="less" scoped>
7f5659 287 .amap-info-content{
C 288   border-radius: 10px  !important;
289 }
423585 290 .map-container {
C 291   position: absolute;
292   left: 0;
293   top: 0;
294   right: 0;
295   bottom: 0;
296   width: 100%;
297   height: 100%;
298   background: #fff;
299   overflow: auto;
300   min-width: 1366px;
301 }
302 .track-foot {
303   z-index: 10;
304   width: 930px;
305   position: absolute;
306   bottom: 0;
307   border-top-left-radius: 6px;
308   border-top-right-radius: 6px;
309   background-color: #f2f2f2;
310   display: flex;
311   padding: 10px;
312 }
313 .foot {
7f5659 314   
423585 315   display: flex;
C 316   justify-content: center;
317 }
318 .track-show,
319 .track-box {
320   display: flex;
321   align-items: center;
322 }
323 .track-show {
324   width: 100%;
325   justify-content: space-between;
326 }
327 .track-show i {
328   font-size: 30px;
329 }
330 .track-box .box-show {
331   border: 1px solid #aaaaaa;
332   color: #aaaaaa;
333   border-radius: 6px;
334   background-color: #fff;
335   padding: 6px;
336   margin-left: 6px;
337 }
338 .top-box {
339   border: 1px solid #aaaaaa;
340   color: #aaaaaa;
341   border-radius: 6px;
342   background-color: #fff;
343   padding: 6px;
344   width: 50%;
345 }
346 .top-box .left i {
347   font-size: 25px;
348 }
349 .top-box .left span:nth-child(2) {
350   font-weight: bold;
351   font-size: 18px;
352   margin-left: 5px;
353   margin-right: 15px;
354 }
355 .box-info-show .info {
356   padding: 6px 0;
357 }
358 .box-info-show .info i {
359   font-size: 25px;
360   margin-right: 6px;
361 }
362 .top-box .left span:nth-child(3) {
363   font-size: 14px;
364 }
365 .track-box .box-show i {
366   font-size: 20px;
367 }
368 .box-show .time {
369   font-size: 12px;
370 }
371 .last-box span:nth-child(2) {
372   font-size: 16px;
373   font-weight: bold;
374 }
375 .last-box span:nth-child(3) {
376   font-size: 12px;
377   margin-left: 5px;
378 }
379 .last-box {
380   border: 1px solid #aaaaaa;
381   border-radius: 3px;
382 }
383 //分类展示的样式
384 .track-main .box-info {
385   top: 220px;
386   opacity: 0.9;
387   background-color: #fff;
388 }
389
390 .box-info-show {
391   background-image: url(../../../public/img/order/已出发.png);
392   background-repeat: no-repeat;
393   background-position: bottom right;
394   background-color: #f2f2f2;
395   padding: 10px;
396   margin-bottom: 10px;
397 }
398 .box-info .box-btns {
399   display: flex;
400   justify-content: space-between;
401   padding-bottom: 10px;
402 }
403 .box-info .box-btns button {
404   background-color: #d7d7d7;
405   color: #000;
406 }
407 .selectbtn {
408   background-color: #f5a946 !important;
409 }
410 //搜索样式
411 .search-input {
412   display: flex;
413   align-items: center;
414 }
415 .search-input {
416   /deep/.el-input {
417     width: 280px;
418   }
419 }
420 .search {
421   padding: 10px;
422   width: 390px;
423   top: 80px;
424   right: 20px;
425   position: absolute;
426   z-index: 10;
427   background-color: #eaeae9;
428   border-radius: 6px;
429 }
430 .count {
431   color: #aaaaaa;
432   padding: 15px 0px;
433 }
434 .count i {
435   font-size: 25px;
436 }
437 .count span {
438   color: #67c23a;
439 }
440 .search .search-input .btns button {
441   height: 40px;
442 }
443 </style>