task#10514,调度app详情地图展示

public/index.html

@@ -28,6 +28,6 @@
             serviceHost: 'https://api.sinoassist.com/_AMapService',
         }
     </script>
-    <script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508"></script>
+    <script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.Polyline"></script>
   </body>
 </html>

src/utils/http.js

@@ -15,12 +15,18 @@ let token = urlParams.get('token') ;
 localStorage.setItem('token', token);
 service.interceptors.request.use(
     config => {
+      let reqUrl=config.url
       config.data = config.contentType ? config.data : qs.stringify(config.data)
       config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
-      const token = localStorage.getItem('token');
-      // let token='eyJhbGciOiJIUzI1NilsInR5cCI6IkpXVCJ9.eyJzdWliOiJiZXNoaTAxliwiYXVkljpblnN1cHBsaWVyLWFwcCJdLCJuYmYiOiE2OTQwNzYzNTQsInVzZXJfaW5mbyl6eyJ1c2VySWQiOjUONTg4LCJwaG9uZSI6ljE4MTE2MzMOOTAyliwibmFtZSI6lumXg-a1i-ivleWViilsInN1cHBsaWVyTmFtZSI6luS4iua1t-a1i-ivleS-m-W6l0WVhilsInN1cHBsaWVySWQiOiMzMDQxLCJzdXBwbGcIR5cGUiOiEsInVzZXJuYW1lljoiY2VzaGkwMSIsInVzZXJUeXBlljoicmVzY3VIQXBwliwiYXVOaG9yaXRpZXMiOltdfSwic2NvcGUiOlsiYWxsllOsImlzcyl6Imh0dHBzOi8vc2lub2Fzc2lzdC5ib20iLCJleHAiOiE20TQxNjl3NTQsImlhdC16MTY5NDA3NiM1NHo.bPzhfNNw-VLnNJcmR9OpWPavX6hWYNOTOsHD1oMvZ3A'
-      config.headers['Authorization'] = `${token}`;
-      // alert(token)
+      // const token = localStorage.getItem('token');
+      // let token='28adfbc810248f777b062e9a9177f273'
+      let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MDY1ODU2NzIsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiLkuIrmtbfmtYvor5XmnI3liqHllYYiLCJzdXBwbGllcklkIjozMzA0MSwic3VwcGxpZXJUeXBlIjoxLCJ1c2VybmFtZSI6InNvbmciLCJ1c2VyVHlwZSI6InJlc2N1ZUFwcCIsImRldmljZUlkIjoiMjJiNDljYTIwZjliODMzMGQ5ODcyMTczZjM5ZWE2OGJjIiwiYXV0aG9yaXRpZXMiOltdfSwic2NvcGUiOlsiYWxsIl0sImlzcyI6Imh0dHBzOi8vc2lub2Fzc2lzdC5jb20iLCJleHAiOjE3MDY2NzIwNzIsImlhdCI6MTcwNjU4NTY3Mn0.8pvEpomf59DxeB71s2kPB5CAvKCqxuyn2RycQ-ScYLU'
+      if (reqUrl.includes("/driverApp")) {
+          config.headers['token'] = `${token}`;
+      } else {
+          console.log("调度app")
+          config.headers['Authorization'] = `${token}`;
+      }
       return config
     },
     error => {

src/views/caseList/caseDetail.vue

@@ -19,6 +19,7 @@
            <div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
            <div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
          </div>
+         <div class="mapContainer"    id="container"></div>
        </div>
        <div class="wiadgeWrap">
           <div class="lineWrap">
@@ -119,9 +120,9 @@
 <script>
 import {myMixins} from "@/utils/myMixins";
 import {reimburseOrderDetail,reimburseOrderAudit} from  "@/api/reimbursementBatch"
-import minePosition from "@/assets/minePosition.png";
-import vehiclePosition from "@/assets/vehiclePosition.png";
-import desitationPosition from "@/assets/desitationPosition.png";
+import minePosition from "@/assets/realApoint.png";
+import vehiclePosition from "@/assets/realBpoint.png";
+import desitationPosition from "@/assets/realCpoint.png";
 export default {
   name: "caseDetail",
   mixins: [myMixins],
@@ -137,6 +138,9 @@ export default {
       detailInfo:{},
       noClick:true,
       state:'',//审核状态
+      map: '',
+      abPath:[],
+      bcPath:[]
     }
   },
   created() {
@@ -156,19 +160,34 @@ export default {
         viewMode:'2D',//使用3D视图
       })
       this.map.on('complete', () => {
-        console.log("地图加载完成")
         this.mapMarkers();
       });
     },
     mapMarkers(){
+      if(this.abPath && this.abPath.length>0){
+        console.log("创建折现1")
+        let polyline1 = new AMap.Polyline({
+          path: [...this.bcPath],
+          strokeColor: '#005DC7', // 路径线颜色
+          strokeWeight: 9 // 路径线宽度
+        });
+        this.map.add(polyline1);
+      }
+      if(this.bcPath && this.bcPath.length>0){
+        let polyline2 = new AMap.Polyline({
+          path: [...this.bcPath],
+          strokeColor: '#005DC7 ', // 路径线颜色
+          strokeWeight: 5 // 路径线宽度
+        });
+        this.map.add(polyline2);
+      }
       // 车辆位置，a点
       let marker = new AMap.Marker({
-        position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude
-],
+        position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude],
         icon: new AMap.Icon({
           image: minePosition, // 图片的相对路径
-          size: new AMap.Size(22, 32),  // 图标的尺寸
-          imageSize: new AMap.Size(22, 32)  // 图片的实际尺寸
+          size: new AMap.Size(43, 43),  // 图标的尺寸
+          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
         }),
       });
       this.map.add(marker);
@@ -177,22 +196,40 @@ export default {
         position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
         icon: new AMap.Icon({
           image: vehiclePosition, // 图片的相对路径
-          size: new AMap.Size(26, 28),  // 图标的尺寸
-          imageSize: new AMap.Size(26, 28)  // 图片的实际尺寸
+          size: new AMap.Size(43, 43),  // 图标的尺寸
+          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
         })
       });
       this.map.add(marker1);
-      let marker2 = new AMap.Marker({
-        position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
+      let marker2=''
+      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
+          marker2 = new AMap.Marker({
+               position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
+               icon: new AMap.Icon({
+                 image: desitationPosition, // 图片的相对路径
+                 size: new AMap.Size(28, 28),  // 图标的尺寸
+                 imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+               })
+             });
+          this.map.add(marker2);
+      }
+      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
+        this.map.setFitView([marker,marker1,marker2])
+      }else{
+        this.map.setFitView([marker,marker1])
+      }
+
+    },
+   /* setMarker(lng,lat,imgIcon){
+     new AMap.Marker({
+        position: [lng,lat],
         icon: new AMap.Icon({
-          image: desitationPosition, // 图片的相对路径
-          size: new AMap.Size(28, 28),  // 图标的尺寸
-          imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+          image: imgIcon, // 图片的相对路径
+          size: new AMap.Size(43, 43),  // 图标的尺寸
+          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
         })
       });
-      this.map.add(marker2);
-      this.map.setFitView([marker,marker1,marker2])
-    },
+    },*/
     async submitHandle(){
       if(!this.states){
           this.$toast('审核结果必选')
@@ -214,11 +251,11 @@ export default {
       console.log("ressssss",res)
     },
     getValue(){
-      console.log("other",this.other)
+      // console.log("other",this.other)
     },
     isUse(e){
       this.states=e
-      console.log("this.states",this.states)
+      // console.log("this.states",this.states)
       if(this.states == 1){
         this.state=2
       }else if(this.states == 2){
@@ -231,9 +268,17 @@ export default {
     },
     async getOrderDetail(){
       let res=await reimburseOrderDetail({
-        id:this.id
+        id:8//this.id
       })
       this.detailInfo=res.data
+      this.detailInfo?.gpsTrackQOsAB.forEach((item)=>{
+        let tempArr =  new AMap.LngLat(item.lon, item.lat);
+        this.abPath.push(tempArr)
+      })
+      this.detailInfo?.gpsTrackQOsBC.forEach((item)=>{
+        this.bcPath.push([item.lon,item.lat])
+      })
+      console.log("this.abPath",this.abPath)
     },
   }
 }
@@ -293,6 +338,9 @@ export default {
           }
         }
       }
+      .mapContainer{
+        @include wh(100%,173px)
+      }
     }
   }
   .wiadgeWrap{
@@ -439,4 +487,10 @@ export default {
     @include widHeiMar(16px,16px,6px)
   }
 }
+::v-deep .amap-copyright{
+  display: none !important;
+}
+::v-deep .amap-logo{
+  display: none !important;
+}
 </style>

src/views/driverCaseList/driverCaseList.vue

@@ -17,9 +17,10 @@
         {{ item.name }}
       </div>
     </div>
-    <div class="listWrap">
-      <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
-        <div class="contentWrap" @click="goDetail">
+<!--    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" style="min-height: 80%;position: relative">-->
+        <div class="listWrap">
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
               <div class="line1">
                 <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
                 <div class="right">
@@ -32,12 +33,102 @@
               <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
               <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
               <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
+              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
+              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
+              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
+              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
+            <div class="contentWrap" @click="goDetail">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
+              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+
         </div>
-        <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
-      </div>
-      <s v-show="activeIndex == 0"  class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</s>
+<!--    </van-pull-refresh>-->
+<!--    <div v-show="activeIndex == 0"  class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>-->
+<!--    <div class="bgEmptyImg" v-show="show" >-->
+<!--      <img  src="@/assets/empty.png" />-->
     </div>
-  </div>
+<!--  </div>-->
 
 </template>
 
@@ -54,20 +145,35 @@ export default {
       pageList:[],
       pageNum:1,
       pageSize:10,
+      total: 0,
       isCheck:false,
       driverId: 78948,
       submitData:[],
       noClick:true,
       loading:false,
+      isLoading: false,
+      finished: false,
     }
   },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
   mounted() {
     this.getList()
   },
   methods:{
+    onRefresh() {
+      this.pageNum=1;
+      // this.getDriverList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
     toggleSelection(item) {
       item.isSelected = !item.isSelected; // 切换 isSelected 属性的值
-      console.log("item",item)
     },
     async submitHandle(){
       this.pageList.forEach((item)=>{
@@ -86,8 +192,9 @@ export default {
     },
     async changeTab(index) {
       this.activeIndex = index
+      this.total = 0;
       this.pageNum = 1
-      this.pageList = [];
+      this.orderList = [];
       await this.getList()
     },
     goDetail(){
@@ -264,4 +371,15 @@ export default {
 .garyColor{
   color: #9C9C9C;
 }
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+//::v-deep .van-pull-refresh__track{
+//  position: static !important;
+//}
 </style>

src/views/workOrder/workOrderReconciliation.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  v-show="!show" style="min-height: 80%;">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  v-show="!show" >
      <div >
         <div  class="content_wrap" v-for="(item,index) in orderList" :key="index">
           <div class="codeTxt common">