小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
src/views/frontdesk/OrderTrack.vue
@@ -51,7 +51,7 @@
    </div>
    <div class="foot" v-if="isNoDispatch">
      <div class="track-foot">
        <div @click="addMarker">等待</div>
        <div >等待</div>
        <div class="track-show">
          <div><i class="iconfont icon-changyongicon-1"></i></div>
          <div class="track-box" v-for="item in waiting" :key="item.BoxId">
@@ -69,6 +69,8 @@
        </div>
      </div>
    </div>
    <!-- 查看详情弹窗 -->
  </div>
</template>
<script>
@@ -84,6 +86,7 @@
      orderTrackingModel:[],
      waiting:[],
      count:0,
      boxDetails:{}
    };
  },
  mounted() {
@@ -105,9 +108,15 @@
        this.getAllBox()
    },
    trackBox(content){
      console.log(content);
        this.addMarker(content)
      new Promise(resolve=>{
            let result =this.getDetails({box_id:content.BoxId});
            resolve(result);
      }).then(res=>{
             this.addMarker(content,res);
      })
    },
    //获取箱子信息
    async getAllBox(){
     this.isAllShow= true;
@@ -132,12 +141,14 @@
       })
    },
    //获取详情
    async getDetails(){
      await this.$axios.post("api/OrderTracking/QueryOrderTrackingDetails").then(res=>{
        console.log(res);
    async getDetails(model){
      await this.$axios.post("api/OrderTracking/QueryOrderTrackingDetails",this.$qs.stringify(model)).then(res=>{
        this.boxDetails = res.data;
      }).catch(err=>{
            console.log(err);
      })
      return this.boxDetails;
    },
    init() {
      let map = new AMap.Map("container", {
@@ -150,8 +161,10 @@
      this.activeBtn = content;
    },
    addMarker(content) {
        let map = new AMap.Map("container", {
      let newBoxDetails = this.boxDetails;
      let newthis = this;
      new Promise(resolve=>{
 let map = new AMap.Map("container", {
        center: [content.CtoLongitude, content.CtoLatitude],
        resizeEnable: true,
        zoom: 10,
@@ -159,50 +172,121 @@
      var marker = new AMap.Marker({
        map: map,
        position: [content.CtoLongitude, content.CtoLatitude],
        icon: require("../../../public/img/order/已出发.png"),
        icon: require("../../../public/img/map/position.png"),
        offset: new AMap.Pixel(-13, -30),
      });
      // map.remove(markers);
      map.add(marker);
      //构建信息窗体中显示的内容
      var info = [];
      let showInfo = ` <div class="box-info-show" >
          <div class="top-box">
            <div class="left">
              <i class="iconfont icon-jizhuangxiang_container"></i>
              <span>${content.BoxTypeCode}</span>
              <span>限重${content.WeightLimit}T</span>
            </div>
      let showInfo = `  <div style="width: 300px;" >
        <div  style="display:flex;justify-content: space-between;margin-top:13px;">
          <div style="border: 1px solid #c3c3c3;padding: 3px;">
            <i class="iconfont icon-jizhuangxiang_container"></i>
            <span>${content.BoxTypeCode}</span>
            <span>限重${content.WeightLimit.slice(0,2)}T</span>
          </div>
          <div class="info">
            <i class="iconfont icon-matou"></i>
            <span>${content.BolCode}提单号</span>
          <div style="border: 1px solid #c3c3c3;padding:3px 8px;color:#E6A23C;background-color:#f2f2f2 ;">出发</div>
        </div>
        <div class="info" style="padding: 6px 0px;">
          <i class="iconfont icon-matou"></i>
          <span>${content.BolCode}提单号</span>
        </div>
        <div style="margin-bottom: 6px;">
          <i class="iconfont icon-fenxiang"></i>
          <span>${content.ObcarContainerNo}箱号</span>
        </div>
        <div class="info">
          <div id="select">
                 <span id="xiangqing" style="text-decoration: underline;color:#409EFF;">查看详情</span>
                 <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="info">
            <i class="iconfont icon-fenxiang"></i>
            <span>${content.ObcarContainerNo}箱号</span>
          </div>
          <div class="info">
            <span onclick="demo()">查看详情</span>
          </div>
        </div>`;
         <div id="packup" style="display:none;">
              <span id="fewer" style="text-decoration: underline;color:#409EFF;">收起详情</span>
                 <i class="el-icon-caret-top"></i>
         </div>
        </div>
        <div style="display:none" id="details">
          <div style="margin-top:6px;">
            <b>${newBoxDetails.CarName}</b><span>${newBoxDetails.UderName}</span>
          </div>
           <div  >
              <i class="el-icon-phone-outline"></i>
              <span>${newBoxDetails.UderPhone}</span>
           </div>
           <div >
              <i class="iconfont icon-listmatou"></i>
              <span>${newBoxDetails.TradeCode}</span>
              <span>进舱编号</span>
           </div>
          <div >
              <i class="iconfont icon-listmatou"></i>
              <span>${newBoxDetails.ObcarContainerOwner}</span>
              <span>箱主</span>
           </div>
             <div>
              <i class="iconfont icon-listmatou"></i>
              <span>${newBoxDetails.ObcarBoxSeal}</span>
              <span>封号</span>
           </div>
        </div>
      </div>`;
      info.push(showInfo);
     var infoWindow = new AMap.InfoWindow({
        anchor: "top-left",
        offset: new AMap.Pixel(13, -30),
        content: info.join("<br/>"), //使用默认信息窗体框样式,显示信息内容
      });
      infoWindow.open(map, [content.CtoLongitude, content.CtoLatitude]);
      map.setFitView([marker]);
      function demo(){
        alert(123)
      }
      setTimeout(()=>{
           resolve("hello");
      },200)
      }).then(res=>{
        newthis.demo();
         newthis.pickupDetails();
  //  document.getElementById("xiangqing").onclick=function(){
  //       alert(res)
  //     }
      })
      // setTimeout(()=>{
      // },200)
    },
    pickupDetails(){
        document.getElementById("fewer").onclick=function(){
            document.getElementById("details").style.display="none";
          document.getElementById("packup").style.display='none';
          document.getElementById("select").style.display='block';
        }
    },
    demo(){
      document.getElementById("xiangqing").onclick=function(){
          document.getElementById("details").style.display="block";
          document.getElementById("packup").style.display='block';
          document.getElementById("select").style.display='none';
      }
    }
  },
};
</script>
<style lang="less" scoped>
.amap-info-content{
  border-radius: 10px  !important;
}
.map-container {
  position: absolute;
  left: 0;
@@ -227,6 +311,7 @@
  padding: 10px;
}
.foot {
  display: flex;
  justify-content: center;
}