tijiao

src/components/DilCommonUI/packages/table/src/table.vue

@@ -21,8 +21,6 @@
       element-loading-spinner="el-icon-loading"
       :isHeigth="isHeigth"
       :shiyHeigth="shiyHeigth"
-      :id="id"
-      :individual-panel="individualPanel"
       :summary-method="getSummaries"
       :show-summary="isshowSummary"
     >
@@ -282,12 +280,7 @@ export default {
     //合计
     //表尾合计行
     getSummaries(param) {
-      console.log(param);
       const { columns, data } = param;
-      console.log("columns");
-      console.log(columns);
-      console.log("data");
-      console.log(data);
       const sums = [];
       columns.forEach((column, index) => {
         //如果索引值为0,则展示‘合计’

src/views/statisticalReport/app.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta content="智慧物流平台" name="keywords">
     <meta content="智慧物流平台" name="description">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
     <title>统计报表 - 智慧物流平台</title>
     <link href="../static/css/common.css" rel="stylesheet"/>
     <link href="../static/img/favicon.ico" rel="shortcut icon"/>

src/views/statisticalReport/app.js

@@ -1,102 +1,133 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from "vue";
-import App from "@/components/App.vue";
+import Vue from 'vue'
+import App from '@/components/App.vue'
 // include
-import "@/config/include.js";
+import '@/config/include.js'
 
 // 通用store
-import store from "@/store/index.js";
+import store from '@/store/index.js'
 
 // router
-import router from "./router/index.js";
+import router from './router/index.js'
 
-import VueApollo from "vue-apollo";
+import VueApollo from 'vue-apollo'
 
-import apollo from "@/config/apolloConfig.js";
+import apollo from '@/config/apolloConfig.js'
 
 // 注册表格的全局组件
-import DilCommonUI from "@/components/DilCommonUI";
-Vue.use(DilCommonUI);
+import DilCommonUI from '@/components/DilCommonUI'
+Vue.use(DilCommonUI)
 
 // 导出Excel全局组件
-import tableToExcel from "@/components/exportExcel/exportExcel";
-Vue.use(tableToExcel);
+import tableToExcel from '@/components/exportExcel/exportExcel'
+Vue.use(tableToExcel)
 
-import htmlToPdf from "@/components/exportPdfs/exportPdfs";
-Vue.use(htmlToPdf);
+import htmlToPdf from '@/components/exportPdfs/exportPdfs'
+Vue.use(htmlToPdf)
 //导出PDF组件
-import "xe-utils";
-import VXETable from "vxe-table";
-import "vxe-table/lib/style.css";
-Vue.use(VXETable);
-Vue.prototype.$XModal = VXETable.modal;
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+Vue.use(VXETable)
+Vue.prototype.$XModal = VXETable.modal
 
+import AMap from 'vue-amap'
+window._AMapSecurityConfig = {
+  securityJsCode: '6a75ec7300ae4ba9f385d1bb452ffd21'
+}
+Vue.use(AMap)
+AMap.initAMapApiLoader({
+  key: '168d3d854afba86848eac1b055d53ca3',
+  plugin: [
+    'AMap.Autocomplete', // 输入提示插件
+    'AMap.PlaceSearch', // POI搜索插件
+    'AMap.Scale', // 右下角缩略图插件 比例尺
+    'AMap.OverView', // 地图鹰眼插件
+    'AMap.ToolBar', // 地图工具条
+    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
+    'AMap.PolyEditor', // 编辑 折线多，边形
+    'AMap.CircleEditor', // 圆形编辑器插件
+    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
+    'AMap.ControlBar', // 缩放、尺寸控制器
+    'AMap.Geocoder'
+  ],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.15',
+  uiVersion: '1.1.1'
+})
+
+import Share from 'vue-social-share'
+Vue.use(Share)
+
+import 'view-design/dist/styles/iview.css'
+import ViewUI from 'view-design'
+Vue.use(ViewUI)
 // 关闭生产模式下给出的提示
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
-Vue.use(VueApollo);
+Vue.use(VueApollo)
 
 const apolloProvider = new VueApollo({
   defaultClient: apollo
-});
+})
 
 //把时间戳改为正常可读的时间
 export function renderTime(date) {
   if (date !== null) {
-    let dateee = new Date(date).toJSON();
+    let dateee = new Date(date).toJSON()
     return new Date(+new Date(dateee) + 8 * 3600 * 1000)
       .toISOString()
-      .replace(/T/g, " ")
-      .replace(/\.[\d]{3}Z/, "");
+      .replace(/T/g, ' ')
+      .replace(/\.[\d]{3}Z/, '')
   }
-  return null;
+  return null
 }
 //把毫秒数转换分
 export function getDuration(my_time) {
   if (my_time !== null) {
-    return Math.floor(my_time / 1000 / 60);
+    return Math.floor(my_time / 1000 / 60)
   }
-  return null;
+  return null
 }
 export function sjTime(orderPlanInTime) {
-  var stringTime = renderTime(orderPlanInTime);
-  var timestamp1 = stringTime.replace(/-/g, "/");
-  return new Date(timestamp1).getTime();
+  var stringTime = renderTime(orderPlanInTime)
+  var timestamp1 = stringTime.replace(/-/g, '/')
+  return new Date(timestamp1).getTime()
 }
 //验证电话号码
 export function VerifyPhoneNumber(Phone) {
-  var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
+  var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
   if (!myreg.test(Phone)) {
-    return false;
+    return false
   } else {
-    return true;
+    return true
   }
 }
 export function isNumber(value) {
   //验证是否为数字
-  var patrn = /^(-)?\d+(\.\d+)?$/;
-  if (patrn.exec(value) == null || value == "") {
-    return false;
+  var patrn = /^(-)?\d+(\.\d+)?$/
+  if (patrn.exec(value) == null || value == '') {
+    return false
   } else {
-    return true;
+    return true
   }
 }
 export function isIntegerNumber(value) {
   //验证是否为整数
-  var patrn = /^\+?[1-9][0-9]*$/g;
-  if (patrn.exec(value) == null || value == "") {
-    return false;
+  var patrn = /^\+?[1-9][0-9]*$/g
+  if (patrn.exec(value) == null || value == '') {
+    return false
   } else {
-    return true;
+    return true
   }
 }
 /* eslint-disable no-new */
 new Vue({
-  el: "#app",
+  el: '#app',
   router,
   store,
   components: { App },
   provide: apolloProvider.provide(),
-  template: "<App/>"
-});
+  template: '<App/>'
+})

src/views/statisticalReport/components/salesLogisticsStatistics/mapTest.vue

@@ -0,0 +1,848 @@
+<template>
+  <div class="container">
+    <div id="amap-container">
+      <el-row style="margin-left:250px">
+        <el-button type="primary" @click="slow">慢速</el-button>
+        <el-button type="success" @click="middle">中速</el-button>
+        <el-button type="danger" @click="fast">快速</el-button>
+        <el-button type="success" @click="addIndex" plain>快进</el-button>
+        <el-button type="danger" @click="stop" plain>暂停</el-button>
+        <el-button type="success" @click="play" plain>开始</el-button>
+        <el-select
+          style="width:100px"
+          @change="changeParkingTime"
+          v-model="parkingTime"
+          placeholder="停车"
+        >
+          <el-option
+            v-for="item in parkingOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          style="width:100px"
+          @change="changeLeaveTime"
+          v-model="leaveTime"
+          placeholder="离线"
+        >
+          <el-option
+            v-for="item in parkingOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-row>
+    </div>
+    <div class="mapcontroller">
+      <div class="in_transit_information">
+        <label class="item_details">起点:{{ startPointName }}</label>
+        <br />
+        <label class="item_details">收货地址:{{ endPointName }}</label>
+        <br />
+      </div>
+      <div class="driving_information2">
+        <label class="item_details">时间:{{ runRoute.gtm }}</label>
+        <br />
+        <label class="item_details">车速:{{ runRoute.spd }}千米/小时</label>
+        <br />
+        <br />
+        <!--控制条-->
+        <div class="map-control" v-show="isActual">
+          <!--播放暂停按钮-->
+          <Icon
+            v-if="!isPlay"
+            class="play-icon play"
+            type="ios-play"
+            @click="
+              isPlay = true
+              play()
+              navgControl(playIcon)
+            "
+          />
+          <Icon
+            v-else
+            class="play-icon pause"
+            type="ios-pause"
+            @click="
+              isPlay = false
+              stop()
+              navgControl('pause')
+            "
+          />
+          <Icon class="play-icon quickly" type="ios-play" @click="addIndex()" />
+          <!--已播放时间-->
+          <!--进度条-->
+          <div class="mySlider">
+            <Slider
+              class="map-slider"
+              v-model="sliderVal"
+              :tip-format="hideFormat"
+              :step="0.0001"
+            ></Slider>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btnx">
+      <el-button type="primary" class="" @click="openInfo"
+        >打开信息窗体</el-button
+      >
+      <el-button type="primary" class="" @click="closeinfo"
+        >关闭信息窗口</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from '@vue/reactivity'
+import { lazyAMapApiLoaderInstance } from 'vue-amap'
+import Slider from './slider.vue'
+Vue.use(Slider)
+import Vue from 'vue'
+var infoWindow
+export default {
+  name: 'PathView',
+  props: {
+    orderNumber: '',
+    capacityNumber: '',
+    startPointName: '',
+    endPointName: ''
+  },
+  setup() {
+    const map = shallowRef(null)
+    return {
+      map
+    }
+  },
+  watch: {
+    //监听车牌号变化
+    orderNumber: {
+      deep: true,
+      handler(val, oldVal) {
+        console.log(val)
+        this.initData(val)
+      }
+    }
+  },
+  data() {
+    return {
+      ///che
+      isTimesChoose: false,
+      isActual: true,
+      isPlay: false,
+      passedTime: '12:02:10',
+      sliderVal: 0,
+      times: 1,
+      totalTime: '11',
+      speed: 10000,
+      startTime: '',
+      endTime: '',
+      //选择停车时长
+      parkingTime: null,
+      //停车时长选择区间
+      parkingOptions: [
+        {
+          value: 600000,
+          label: '10分钟'
+        },
+        {
+          value: 1200000,
+          label: '20分钟'
+        },
+        {
+          value: 1800000,
+          label: '30分钟'
+        },
+        {
+          value: 2400000,
+          label: '40分钟'
+        },
+        {
+          value: 3000000,
+          label: '50分钟'
+        },
+        {
+          value: 3600000,
+          label: '60分钟'
+        },
+        {
+          value: 36000000,
+          label: '关闭'
+        }
+      ],
+      //离线图标
+      leaveMark: [],
+      //停车图标
+      parkMark: [],
+      //选择离线时长
+      leaveTime: null,
+      //离线时长选择区间
+      leaveOptions: [
+        {
+          value: 600000,
+          label: '10分钟'
+        },
+        {
+          value: 1200000,
+          label: '20分钟'
+        },
+        {
+          value: 1800000,
+          label: '30分钟'
+        },
+        {
+          value: 2400000,
+          label: '40分钟'
+        },
+        {
+          value: 3000000,
+          label: '50分钟'
+        },
+        {
+          value: 3600000,
+          label: '60分钟'
+        },
+        {
+          value: 36000000,
+          label: '关闭'
+        }
+      ],
+      //已行驶轨迹
+      runRoute: {
+        agl: '',
+        gtm: '',
+        hgt: '',
+        lat: '',
+        lon: '',
+        mil: '',
+        spd: ''
+      },
+      point: '',
+      pointNext: '',
+      loading: null,
+      navgtrSpeed: 1,
+      //地图中心位置
+      centerPoint: {
+        pointLat: '',
+        pointLon: ''
+      },
+      //自定义窗体信息
+      ctmarkes: {
+        lat: '33.015888071433764',
+        lon: '115.96995235868168',
+        title: '豫SE8888',
+        details: '安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米'
+      },
+      //运输详情
+      transportDetail: {
+        //车牌号
+        capacityNumber: '',
+        //规划路线
+        estimateRoute: [
+          {
+            lat: '33.015888071433764',
+            lon: '115.96995235868168'
+          }
+        ],
+        //规划线路
+        estimatePath: [[114.03046212985384, 32.49786984660489]],
+        //已行驶轨迹
+        runRoute: [
+          {
+            agl: '44',
+            gtm: '2022年03月09日 16:47:24',
+            hgt: '13',
+            lat: '32.906411535084985',
+            lon: '115.76177868692135',
+            mil: '429409.2',
+            spd: '17.0'
+          }
+        ],
+        runPath: [[114.03922119568348, 32.49746162481379]],
+        //当前位置
+        currentPointName: '中国达州市通川区',
+        //当前位置经纬度
+        currentPoint: {
+          lat: '',
+          lon: ''
+        },
+        //起点位置
+        startPointName: '中国达州市通川区',
+        //起点位置经纬度
+        startPoint: {
+          lon: '114.03922119568348',
+          lat: '32.49746162481379'
+        },
+        //终点位置
+        endPointName: '中国成都萧山',
+        //终点位置经纬度
+        endPoint: {
+          lon: '115.96995737755431',
+          lat: '33.01595479752097'
+        },
+        //自定义标记
+        content: [],
+        //异常位置
+        abnormalLocation: []
+      },
+      listPath: [],
+      //组件
+      pathSimplifierIns: {},
+      pathNavigator: {},
+      //地图解析
+      geocoder: null,
+      currentPointName: ''
+    }
+  },
+  created() {
+    let that = this
+    that.initData(that.orderNumber)
+  },
+  mounted() {},
+  methods: {
+    //停车时间改变
+    changeParkingTime() {
+      let that = this
+      //清除之前的停车点
+      that.hideParkingMark()
+      //计算时间的点
+      let calculationPoint = null
+      that.listPath[0].runRoute.forEach(function(item, indexOf) {
+        if (indexOf + 1 < that.listPath[0].runRoute.length) {
+          //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
+          if (calculationPoint == null && item.spd == '0.0') {
+            calculationPoint = item
+          } else if (calculationPoint != null && item.spd != '0.0') {
+            let beforeTime = that.stringToDate(calculationPoint.gtm)
+            let item2 = that.listPath[0].runRoute[indexOf]
+            let afterTime = that.stringToDate(item2.gtm)
+            let second = afterTime - beforeTime
+            if (second > that.parkingTime) {
+              let message = '停车:' + second / 60000
+              that.initParkingMarkes(
+                20,
+                35,
+                require('@/assets/img/park.png'),
+                calculationPoint.lon,
+                calculationPoint.lat,
+                message.split('.')[0] + '分钟'
+              )
+            }
+            calculationPoint = null
+          }
+        }
+      })
+    },
+    //字符串转为Date
+    stringToDate(dateString) {
+      console.log(dateString)
+      let dateStr = dateString
+        .replace('年', '-')
+        .replace('月', '-')
+        .replace('日', '')
+      return Date.parse(dateStr)
+    },
+    //停车所有离线图标
+    hideParkingMark() {
+      let that = this
+
+      that.parkMark.forEach(function(item, indexOf) {
+        item.hide()
+      })
+    },
+    //离线时间改变时获得超过时间的点信息
+    changeLeaveTime() {
+      let that = this
+      //关闭所有图标
+      that.hideLeaveMark()
+      that.listPath[0].runRoute.forEach(function(item, indexOf) {
+        if (indexOf + 1 < that.listPath[0].runRoute.length) {
+          let beforeTime = that.stringToDate(item.gtm)
+          let item2 = that.listPath[0].runRoute[indexOf + 1]
+          let afterTime = that.stringToDate(item2.gtm)
+          let second = afterTime - beforeTime
+          if (second > that.leaveTime) {
+            let message = '离线:' + second / 60000
+            that.initLeaveMarkes(
+              20,
+              35,
+              require('@/assets/img/leave.png'),
+              item2.lon,
+              item2.lat,
+              message.split('.')[0] + '分钟'
+            )
+          }
+        }
+      })
+    },
+    //关闭所有离线图标
+    hideLeaveMark() {
+      let that = this
+      that.leaveMark.forEach(function(item, indexOf) {
+        item.hide()
+      })
+    },
+    slow() {
+      console.log('slow')
+      let that = this
+      that.pathNavigator.setSpeed(1000)
+    },
+    middle() {
+      console.log('middle')
+      let that = this
+      that.pathNavigator.setSpeed(10000)
+    },
+    fast() {
+      console.log('fast')
+      let that = this
+      that.pathNavigator.setSpeed(100000)
+    },
+    play() {
+      let that = this
+      that.pathNavigator.resume()
+    },
+    stop() {
+      let that = this
+      that.pathNavigator.pause()
+    },
+    addIndex() {
+      let that = this
+      let increment = that.listPath[0].runPath.length * 0.1
+      that.pathNavigator.start(
+        (that.point + increment) % that.listPath[0].runPath.length
+      )
+    },
+    ///che
+    navgControl() {},
+    hideFormat(value) {
+      let that = this
+      that.sliderVal = value
+    },
+    initParkingMarkes(weight, height, image, lon, lat, title) {
+      let that = this
+      //图标标记点
+      let pointicon = new AMap.Icon({
+        size: new AMap.Size(weight, height), // 图标尺寸
+        image: image, // Icon的图像
+        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
+      })
+      // 创建一个 Marker 实例：
+      var pointmarker = new AMap.Marker({
+        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        icon: pointicon,
+        title: title
+      })
+      that.parkMark.push(pointmarker)
+      // 将创建的点标记添加到已有的地图实例：
+      that.map.add(pointmarker)
+    },
+    //创建离线和停车的标记
+    initLeaveMarkes(weight, height, image, lon, lat, title) {
+      let that = this
+      //图标标记点
+      let pointicon = new AMap.Icon({
+        size: new AMap.Size(weight, height), // 图标尺寸
+        image: image, // Icon的图像
+        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
+      })
+      // 创建一个 Marker 实例：
+      var pointmarker = new AMap.Marker({
+        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        icon: pointicon,
+        title: title
+      })
+      that.leaveMark.push(pointmarker)
+      // 将创建的点标记添加到已有的地图实例：
+      that.map.add(pointmarker)
+    },
+    initData(orderNumber) {
+      let that = this
+      that.axios
+        .post('/api/v1/otms/fullPath?orderNumber=' + orderNumber)
+        .then(res => {
+          console.log(res.data)
+          if (res.data.data == '-1') {
+            this.$message.error('运输订单未关闭的自提车辆无权查看!')
+          } else if (res.data.data.startAndEndRoutes != null) {
+            that.listPath = res.data.data.startAndEndRoutes
+            that.startTime = res.data.data.startAndEndRoutes[0].runRoute[0].gtm
+            that.endTime =
+              res.data.data.startAndEndRoutes[0].runRoute[
+                res.data.data.startAndEndRoutes[0].runRoute.length - 1
+              ].gtm
+            that.initMap()
+          } else {
+            that.listPath = []
+            this.$message.error('车辆没有开启GPS')
+          }
+        })
+    },
+    endline() {
+      let that = this
+      that.initPolyline(that.listPath[0].estimatePath, '#FF0000')
+    },
+    //创建起点终点当前点
+    threeMarker() {
+      let that = this
+      that.listPath.forEach((element, index) => {
+        //开始标记点
+        if (element.startPoint.lon != '' && element.startPoint.lat != '') {
+          that.initMarkes(
+            20,
+            35,
+            require('@/assets/img/start.png'),
+            element.startPoint.lon,
+            element.startPoint.lat,
+            '起点'
+          )
+        }
+        //当前点
+        that.getCurrentPointName([
+          element.runRoute[element.runRoute.length - 1].lon,
+          element.runRoute[element.runRoute.length - 1].lat
+        ])
+        //结束标记点
+        if (element.endPoint.lon != '' && element.endPoint.lat != '') {
+          that.initMarkes(
+            20,
+            35,
+            require('@/assets/img/end.png'),
+            element.endPoint.lon,
+            element.endPoint.lat,
+            '终点'
+          )
+        }
+      })
+    },
+    //获得结束地址
+    getCurrentPointName(lnglatXY) {
+      let that = this
+      that.geocoder.getAddress(lnglatXY, function(status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          that.currentPointName = result.regeocode.formattedAddress
+          that.initCustomMarkes(
+            that.capacityNumber,
+            '位置：' +
+              that.currentPointName +
+              '<br/>' +
+              '距离：' +
+              that.listPath[0].miled +
+              '<br/>' +
+              '时间范围：' +
+              that.startTime +
+              ' 至 ' +
+              that.endTime,
+
+            lnglatXY[0],
+            lnglatXY[1]
+          )
+        }
+      })
+    },
+    //defualt数据
+    defaultDate() {
+      // let that=this;
+      // that.pathNavigator.start(that.listPath[0].runPath.length)
+      // that.pathNavigator.pause();
+    },
+    //初始化地图
+    initMap() {
+      lazyAMapApiLoaderInstance.load().then(() => {
+        let that = this
+        that.map = new AMap.Map('amap-container', {
+          //设置地图容器id
+          viewMode: '2D', //是否为2D地图模式
+          zoom: 10, //初始化地图级别
+          center: [105.602725, 37.076636] //初始化地图中心点位置
+        })
+        that.initGeocoder()
+        that.initPathSimplifier()
+        that.threeMarker()
+        //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
+        that.endline()
+      })
+    },
+    initCustomMarkes(title, details, lon, lat) {
+      let that = this
+      //自定义窗体内容
+      var content = [
+        "<div  style='top:1px;width: 200px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>" +
+          title +
+          '</font>',
+        "<div style='background-color:(22, 160, 133, 1); ;'><font color='white'>" +
+          details +
+          '</font></div></div>'
+      ]
+      // 创建 infoWindow 实例
+      infoWindow = new AMap.InfoWindow({
+        content: content.join('<br>') //传入 dom 对象，或者 html 字符串
+      })
+      // 打开信息窗体
+      infoWindow.open(that.map, [lon, lat])
+    },
+    // 关闭信息窗口
+    closeinfo() {
+      infoWindow.close()
+    },
+    openInfo() {
+      let lon = null
+      let lat = null
+      console.log(this.listPath)
+      this.listPath.forEach(e => {
+        if (e.endPoint != {} && e.endPoint != '' && e.endPoint != null) {
+          lon = e.endPoint.lon
+          lat = e.endPoint.lat
+        } else {
+          lon = e.runRoute[e.runRoute.length - 1].lon
+          lat = e.runRoute[e.runRoute.length - 1].lat
+        }
+      })
+      infoWindow.open(this.map, [lon, lat])
+    },
+    initPolyline(path, color) {
+      let that = this
+      //预计轨迹
+      var endLine = new AMap.Polyline({
+        map: that.map,
+        path: path,
+        isOutline: true,
+        outlineColor: color,
+        borderWeight: 0,
+        strokeColor: '#FF0000',
+        strokeOpacity: 1,
+        strokeWeight: 5,
+        // 折线样式还支持 'dashed'
+        strokeStyle: 'solid',
+        // strokeStyle是dashed时有效
+        strokeDasharray: [10, 5],
+        lineJoin: 'round',
+        lineCap: 'round',
+        zIndex: 50
+      })
+      that.map.setFitView([[endLine]])
+    },
+    //创建简单的标记
+    initMarkes(weight, height, image, lon, lat, title) {
+      let that = this
+      //图标标记点
+      let pointicon = new AMap.Icon({
+        size: new AMap.Size(weight, height), // 图标尺寸
+        image: image, // Icon的图像
+        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
+      })
+      // 创建一个 Marker 实例：
+      var pointmarker = new AMap.Marker({
+        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        icon: pointicon,
+        title: title
+      })
+      // 将创建的点标记添加到已有的地图实例：
+      that.map.add(pointmarker)
+    },
+    //创建轨迹和巡航器
+    initPathSimplifier() {
+      let that = this
+      // ...你的操作
+      new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
+        if (!PathSimplifier.supportCanvas) {
+          alert('当前环境不支持 Canvas！')
+          return
+        }
+        //创建轨迹和巡航器
+        // 创建组件实例
+        that.pathSimplifierIns = new PathSimplifier({
+          map: that.map,
+          zIndex: 100, // 图层叠加顺序
+          data: that.listPath, // 巡航路径
+          // 获取巡航路径中的路径坐标数组
+          getPath: (pathData, pathIndex) => {
+            return pathData.runPath
+          },
+          //鼠标悬浮停时显示消息
+          getHoverTitle: function(pathData, pathIndex, pointIndex) {
+            //返回鼠标悬停时显示的信息
+            if (pointIndex >= 0) {
+              if (pathData.runRoute[pointIndex].gtm !== 'undefined') {
+                //鼠标悬停在某个轨迹节点上
+                return (
+                  pathData.runRoute[pointIndex].gtm +
+                  '，速度' +
+                  pathData.runRoute[pointIndex].spd +
+                  '千米/小时'
+                )
+              }
+            }
+          },
+          //设置轨迹样式
+          renderOptions: {
+            //轨迹线的样式
+            pathLineStyle: {
+              strokeStyle: 'black',
+              lineWidth: 6,
+              dirArrowStyle: true
+            }
+          }
+        })
+        // 创建巡航器
+        that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
+          loop: true, // 是否循环
+          speed: that.speed, // 速度(km/h)
+          pathNavigatorStyle: {
+            width: 20,
+            height: 40,
+            content: PathSimplifier.Render.Canvas.getImageContent(
+              require('@/assets/img/smallcar.png'),
+              onload,
+              onerror
+            ),
+            strokeStyle: null,
+            fillStyle: null
+          }
+        })
+        //开启巡航
+        that.pathNavigator.start()
+        that.defaultDate()
+
+        //开始事件
+        that.pathNavigator.on('start resume', function() {
+          // that.navgtr._startTime = Date.now();
+          // that.navgtr._startDist = this.getMovedDistance();
+        })
+        //暂停
+        that.pathNavigator.on('stop pause', function() {
+          // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
+          // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
+        })
+        that.pathNavigator.on('move', function(data, value) {
+          that.updateLable(value)
+        })
+      })
+    },
+    updateLable(value) {
+      let that = this
+      that.point = value.dataItem.pointIndex
+      that.runRoute = value.dataItem.pathData.runRoute[that.point]
+      that.sliderVal =
+        (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
+        100
+    },
+    changeSpeed(value) {
+      // console.log(value)
+      // let that=this;
+      // that.times=value;
+    },
+    playIcon() {
+      console.log('nihoa')
+    },
+    //逆解码函数
+    initGeocoder() {
+      let that = this
+      console.log('initGeocoder')
+      AMap.plugin('AMap.Geocoder', function() {
+        that.geocoder = new AMap.Geocoder({
+          radius: 1000,
+          extensions: 'all'
+        })
+
+        console.log(that.geocoder)
+      })
+    }
+  }
+}
+</script>
+<style>
+.mapcontroller {
+  width: 250px;
+  height: 260px;
+  background: white;
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  left: 0;
+}
+.container {
+  width: 100%;
+  height: 100%;
+}
+.item_details {
+  display: block;
+  margin-top: 20px;
+  position: relative;
+  left: 30px;
+  width: 200px;
+  height: 0px;
+}
+#amap-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  font-family: '微软雅黑';
+}
+.driving_information2 {
+  position: relative;
+  top: 70px;
+}
+.driving_information3 {
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  position: relative;
+  top: 50px;
+}
+
+/* 进度条 */
+.mySlider {
+  width: 150px;
+  height: 20px;
+  display: inline-block;
+  position: relative;
+  left: 32px;
+}
+.play {
+  position: relative;
+  left: 28px;
+}
+.quickly {
+  float: right;
+  position: relative;
+  left: -20px;
+  top: 10px;
+}
+.pause {
+  position: relative;
+  left: 28px;
+}
+.passed-time {
+  position: relative;
+  left: 5px;
+}
+.end-time {
+  position: relative;
+  left: 5px;
+}
+.map-times {
+  position: relative;
+  background-color: red;
+  width: 40px;
+}
+</style>
+<style lang="scss" scoped>
+.btnx {
+  z-index: 1000;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+</style>

src/views/statisticalReport/components/salesLogisticsStatistics/saleSteelAllReport.vue

@@ -302,7 +302,7 @@
           align="center"
         >
           <template slot-scope="scope">
-            <span v-show="scope.row.isPrintDelivery==1">已打印</span>
+            <span v-show="scope.row.isPrintDelivery == 1">已打印</span>
           </template>
         </el-table-column>
         <el-table-column prop="saler" label="业务员" align="center">
@@ -679,6 +679,12 @@ export default {
           console.log(res.data)
           this.isShow2 = true
           this.srcList2 = []
+          if (res.data.resultReceiveNotePhoto != null) {
+            this.srcList2.push({
+              title: '签收单',
+              src: res.data.resultReceiveNotePhoto
+            })
+          }
           if (res.data.resultSignedNotePhoto != null) {
             this.srcList2.push({
               title: '质保书',
@@ -691,12 +697,6 @@ export default {
               src: res.data.resultEmptyContainerPhoto
             })
           }
-          if (res.data.resultReceiveNotePhoto != null) {
-            this.srcList2.push({
-              title: '签收单',
-              src: res.data.resultReceiveNotePhoto
-            })
-          }
         })
     },
     rowClick() {

src/views/statisticalReport/components/salesLogisticsStatistics/saleSteelReports.vue

@@ -98,8 +98,9 @@
         style="width: 100%; margin-top: 20px"
         :max-height="maxHeight"
         :height="maxHeight"
-        :row-style="{ height: '30px' }"
+        :row-style="{ height: '30' }"
         :cell-style="{ fontWeight: '500' }"
+        @cell-click="cellClik"
       >
         <el-table-column
           width="50"
@@ -112,8 +113,9 @@
         <el-table-column
           prop="orderTime"
           label="订单日期"
-          width="160px"
+          width="120px"
           align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
@@ -128,7 +130,8 @@
           prop="carrierName"
           label="承运商"
           align="center"
-          width="120px"
+          width="100px"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
@@ -136,7 +139,8 @@
           column-key="capacityNo"
           label="车牌号"
           align="center"
-          width="150px"
+          width="140px"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
@@ -144,6 +148,7 @@
           label="物资名称"
           align="center"
           width="150px"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
@@ -151,31 +156,71 @@
           label="物资规格"
           align="center"
           sortable
+          show-overflow-tooltip
+          width="120px"
         >
         </el-table-column>
         <el-table-column
           prop="materialNum"
           label="物资件数"
           align="center"
-          width="150px"
+          width="100px"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="addressPlace"
+          label="收货地址"
+          width="250px"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orderStatus"
+          label="运单状态"
+          align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column prop="addressPlace" label="收货地址" width="200px">
+        <el-table-column prop="grossWeight" label="毛重" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column
+          prop="grossWeightTime"
+          label="毛重时间"
+          width="130px"
+          show-overflow-tooltip
+        >
         </el-table-column>
-        <el-table-column prop="orderStatus" label="运单状态" align="center">
+        <el-table-column prop="tareWeight" label="皮重" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="grossWeight" label="毛重"> </el-table-column>
-        <el-table-column prop="grossWeightTime" label="毛重时间" width="130px">
+        <el-table-column
+          prop="tareWeightTime"
+          label="皮重时间"
+          width="130px"
+          show-overflow-tooltip
+        >
         </el-table-column>
-        <el-table-column prop="tareWeight" label="皮重"> </el-table-column>
-        <el-table-column prop="tareWeightTime" label="皮重时间" width="130px">
+        <el-table-column prop="netWeight" label="净重" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="netWeight" label="净重"> </el-table-column>
-        <el-table-column prop="entryGateTime" label="进厂时间" width="130px">
+        <el-table-column
+          prop="entryGateTime"
+          label="进厂时间"
+          width="130px"
+          show-overflow-tooltip
+        >
         </el-table-column>
-        <el-table-column prop="loadTime" label="装货时间" width="130px">
+        <el-table-column
+          prop="loadTime"
+          label="装货时间"
+          width="130px"
+          show-overflow-tooltip
+        >
         </el-table-column>
-        <el-table-column prop="outGateTime" label="出厂时间" width="130px">
+        <el-table-column
+          prop="outGateTime"
+          label="出厂时间"
+          width="130px"
+          show-overflow-tooltip
+        >
         </el-table-column>
         <el-table-column
           prop="arrivalAddress"
@@ -196,35 +241,47 @@
           label="运输订单号"
           width="180px"
           align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
           prop="capacityTel"
           label="司机电话"
-          width="250px"
+          width="120px"
           align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
           prop="isPrintDelivery"
           label="送货单打印状态"
           align="center"
-          width="150px"
+          width="120px"
+          show-overflow-tooltip
         >
-          <template slot-scope="scope">
-            <span v-show="scope.row.isPrintDelivery">已打印</span>
-          </template>
         </el-table-column>
-        <el-table-column prop="saler" label="业务员" align="center">
+        <el-table-column
+          prop="saler"
+          label="业务员"
+          align="center"
+          show-overflow-tooltip
+        >
         </el-table-column>
         <el-table-column
           prop="shipperName"
           label="发货单位"
           width="170px"
           align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column prop="consigneeTel" label="收货客户电话" width="120px">
+        <el-table-column
+          prop="consigneeTel"
+          label="收货客户电话"
+          width="120px"
+          align="center"
+          show-overflow-tooltip
+        >
         </el-table-column>
         <el-table-column prop="isSelfMention" label="是否自提" align="center">
         </el-table-column>
@@ -233,15 +290,22 @@
           label="销售订单号"
           width="200px"
           align="center"
+          show-overflow-tooltip
         >
         </el-table-column>
         <el-table-column
           prop="saleOrderStatus"
           label="销售订单状态"
           width="100px"
+          show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column prop="closeEntryId" label="金蝶分录ID" width="100px">
+        <el-table-column
+          prop="closeEntryId"
+          label="金蝶分录ID"
+          width="100px"
+          show-overflow-tooltip
+        >
         </el-table-column>
         <el-table-column
           prop="operation"
@@ -251,13 +315,53 @@
           align="center"
         >
           <template slot-scope="scope">
-            <el-button type="text" @click="operation(scope.row)"
+            <el-button
+              type="text"
+              @click="checkTrans(scope.row)"
+              v-if="scope.row.outGateTime != null"
+              >轨迹</el-button
+            >
+            <el-button
+              type="text"
+              @click="operation(scope.row)"
+              v-if="scope.row.carStatus != 2"
               >编辑</el-button
             >
           </template>
         </el-table-column>
       </el-table>
     </div>
+    <div>
+      <vxe-modal
+        width="549px"
+        height="731px"
+        v-model="isShow3"
+        show-footer
+        class="vxeModal"
+      >
+        <div class="demo-image__preview">
+          <el-image style=" height:731px;text-align:center;" :src="src">
+            <div slot="error" class="image-slot">
+              <span>司机未上传图片</span>
+            </div>
+          </el-image>
+        </div>
+      </vxe-modal>
+      <vxe-modal width="549px" height="731px" v-model="isShow4" show-footer>
+        <div
+          class="demo-image__preview"
+          v-for="item in srcList2"
+          :key="item.src"
+        >
+          <span>{{ item.title }}</span>
+          <el-image style="height:731px;text-align:center" :src="item.src">
+            <div slot="error" class="image-slot">
+              <span>司机未上传图片</span>
+            </div>
+          </el-image>
+        </div>
+      </vxe-modal>
+    </div>
     <div class="dialog">
       <el-dialog
         title="运单详情"
@@ -437,7 +541,7 @@
                   type="success"
                   icon="el-icon-money"
                   circle
-                  @click="toPhotoClick"
+                  @click="toPhotoClick(steelMap.orderNo, 0)"
                 ></el-button
               ></span>
             </div>
@@ -451,13 +555,12 @@
                   type="success"
                   icon="el-icon-money"
                   circle
-                  @click="receipctPhotoClick"
+                  @click="receipctPhotoClick(steelMap.orderNo, 0)"
                 ></el-button
               ></span>
             </div>
           </div>
         </div>
-
         <div class="table">
           <el-table
             :data="steelMap.mapList"
@@ -562,28 +665,44 @@
             >确 定</el-button
           >
         </span>
-      </el-dialog>
-    </div>
-    <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"
+        <div>
+          <vxe-modal
+            width="549px"
+            height="731px"
+            v-model="isShow"
+            show-footer
+            class="vxeModal"
           >
-          </el-image>
+            <div class="demo-image__preview">
+              <el-image style=" height:731px;text-align:center;" :src="src">
+                <div slot="error" class="image-slot">
+                  <span>司机未上传图片</span>
+                </div>
+              </el-image>
+            </div>
+          </vxe-modal>
+          <vxe-modal width="549px" height="731px" v-model="isShow2" show-footer>
+            <div
+              class="demo-image__preview"
+              v-for="(item, index) in srcList2"
+              :key="index"
+            >
+              <span>{{ item.title }}</span>
+              <el-image style="height:731px;text-align:center" :src="item.src">
+                <div slot="error" class="image-slot">
+                  <span>司机未上传图片</span>
+                </div>
+              </el-image>
+            </div>
+          </vxe-modal>
         </div>
+      </el-dialog>
+    </div>
+    <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>
   </div>
@@ -592,8 +711,11 @@
 <script>
 import { sjTime, isVehicleNumber } from '@/utils/sharedJsFile'
 import { getCookie } from '@/utils/util.js'
-
+import PathView from './mapTest.vue'
 export default {
+  components: {
+    PathView
+  },
   data() {
     return {
       consigneeFiltList: [],
@@ -604,6 +726,8 @@ export default {
       //钢材子表数据
       steelList: [],
       drawer: false,
+      isShow3: false,
+      isShow4: false,
       input: null,
       screen: '',
       screen1: '',
@@ -718,7 +842,14 @@ export default {
       src2: '',
       isShow2: false,
       input1: '',
-      maxHeight: window.innerHeight - 140
+      maxHeight: window.innerHeight - 140,
+      value7: false,
+      pathOption: {
+        orderNumber: '',
+        capacityNumber: '',
+        startPointName: '',
+        endPointName: ''
+      }
     }
   },
   created() {
@@ -736,6 +867,38 @@ export default {
   },
   computed: {},
   methods: {
+    checkTrans(row) {
+      console.log(row)
+      let that = this
+      that.axios
+        .post('/api/v1/otms/fullPath?orderNumber=' + row.orderNo)
+        .then(res => {
+          console.log(res.data)
+          if (res.data.data == '-1') {
+            this.$message.error('运输订单未关闭的自提车辆无权查看!')
+          } else if (res.data.data.startAndEndRoutes != null) {
+            that.pathOption.orderNumber = row.orderNo
+            that.pathOption.capacityNumber = row.capacityNo
+            that.pathOption.startPointName = '达钢集团小东门'
+            that.pathOption.endPointName = row.arrivalAddress
+            that.value7 = true
+          } else {
+            this.$message.error('车辆没有开启GPS')
+          }
+        })
+    },
+    cellClik(row, column, cell, event) {
+      if (column.property == 'arrivalAddress') {
+        if (row.orderNo && row.arrivalAddress) {
+          this.toPhotoClick(row.orderNo, 1)
+        }
+      }
+      if (column.property == 'receiptAddress') {
+        if (row.orderNo && row.arrivalAddress) {
+          this.receipctPhotoClick(row.orderNo, 1)
+        }
+      }
+    },
     //反关闭运单
     reverseCloseOrder() {
       this.axios
@@ -768,34 +931,49 @@ export default {
         })
     },
     //查看抵达图
-    toPhotoClick() {
+    toPhotoClick(orderNo, num) {
       this.axios
-        .post(
-          '/api/v1/otms/getArrivalPhoto?orderNumber=' + this.steelMap.orderNo
-        )
+        .post('/api/v1/otms/getArrivalPhoto?orderNumber=' + orderNo)
         .then(res => {
           this.srcList = []
           this.src = res.data.data
-          this.isShow = true
+          if (num == 1) {
+            this.isShow3 = true
+          } else {
+            this.isShow = true
+          }
           this.srcList.push(res.data.data)
         })
     },
     //查看签收图
-    receipctPhotoClick() {
+    receipctPhotoClick(orderNo, num) {
       this.axios
-        .post(
-          '/api/v1/otms/getReceivingPhotoByUrl?orderNumber=' +
-            this.steelMap.orderNo
-        )
+        .post('/api/v1/otms/getReceivingPhotoByUrl?orderNumber=' + orderNo)
         .then(res => {
           console.log(res.data)
-          this.isShow2 = true
+          if (num == 1) {
+            this.isShow4 = true
+          } else {
+            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)
+            this.srcList2.push({
+              title: '签收单',
+              src: res.data.resultReceiveNotePhoto
+            })
+          }
+          if (res.data.resultSignedNotePhoto != null) {
+            this.srcList2.push({
+              title: '质保书',
+              src: res.data.resultSignedNotePhoto
+            })
+          }
+          if (res.data.resultEmptyContainerPhoto != null) {
+            this.srcList2.push({
+              title: '空货箱照片',
+              src: res.data.resultEmptyContainerPhoto
+            })
           }
         })
     },
@@ -1489,6 +1667,12 @@ export default {
     },
     //查询，输入查询条件
     onclick() {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在获取数据',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       let startTime = null
       let endTime = null
       let carrierSsoId = null
@@ -1549,6 +1733,7 @@ export default {
         .then(res => {
           this.tableData = res.data.data
           this.getSpanArr(res.data.data)
+          loading.close()
         })
     },
     //重新获取表格数据
@@ -1622,14 +1807,6 @@ export default {
         )
         .then(res => {
           this.tableData = res.data.data
-          // { text: '专用线', value: '专用线' }
-          // { text: '达州站', value: '达州站' }
-          // this.consigneeFiltList = this.tableData.forEach(e => {
-          //   let map = {};
-          //   map.text = e.consigneeName;
-          //   map.value = e.consigneeName;
-          //   return map;
-          // });
           this.getSpanArr(res.data.data)
         })
     }

src/views/statisticalReport/components/salesLogisticsStatistics/slider.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="slider" ref="slider">
+    <div class="process" :style="{ width }"></div>
+    <div class="thunk" ref="trunk" :style="{ left }">
+      <div class="block"></div>
+      <div class="tips">
+        <span>{{ scale * 100 }}</span>
+        <i class="fas fa-caret-down"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/*
+ * min 进度条最小值
+ * max 进度条最大值
+ * v-model 对当前值进行双向绑定实时显示拖拽进度
+ * */
+export default {
+  name: 'slider',
+  props: ['min', 'max', 'value'],
+  data() {
+    return {
+      slider: null, //滚动条DOM元素
+      thunk: null, //拖拽DOM元素
+      per: this.value //当前值
+    }
+  },
+  //渲染到页面的时候
+  mounted() {
+    this.slider = this.$refs.slider
+    this.thunk = this.$refs.trunk
+    var _this = this
+    this.thunk.onmousedown = function(e) {
+      var width = parseInt(_this.width)
+      var disX = e.clientX
+      document.onmousemove = function(e) {
+        // value, left, width
+        // 当value变化的时候，会通过计算属性修改left，width
+
+        // 拖拽的时候获取的新width
+        var newWidth = e.clientX - disX + width
+        // 拖拽的时候得到新的百分比
+        var scale = newWidth / _this.slider.offsetWidth
+        _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min)
+        _this.per = Math.max(_this.per, _this.min)
+        _this.per = Math.min(_this.per, _this.max)
+        _this.$emit('input', _this.per)
+      }
+      document.onmouseup = function() {
+        document.onmousemove = document.onmouseup = null
+      }
+      return false
+    }
+  },
+  computed: {
+    // 设置一个百分比，提供计算slider进度宽度和trunk的left值
+    // 对应公式为  当前值-最小值/最大值-最小值 = slider进度width / slider总width
+    // trunk left =  slider进度width + trunk宽度/2
+    scale() {
+      return (this.per - this.min) / (this.max - this.min)
+    },
+    width() {
+      if (this.slider) {
+        return this.slider.offsetWidth * this.scale + 'px'
+      } else {
+        return 0 + 'px'
+      }
+    },
+    left() {
+      if (this.slider) {
+        return (
+          this.slider.offsetWidth * this.scale -
+          this.thunk.offsetWidth / 2 +
+          'px'
+        )
+      } else {
+        return 0 + 'px'
+      }
+    }
+  }
+}
+</script>
+<style>
+.box {
+  margin: 100px auto 0;
+  width: 80%;
+}
+.clear:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.slider {
+  position: relative;
+  margin: 20px 0;
+  width: 400px;
+  height: 10px;
+  background: #e4e7ed;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.slider .process {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 112px;
+  height: 10px;
+  border-radius: 5px;
+  background: #409eff;
+}
+.slider .thunk {
+  position: absolute;
+  left: 100px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}
+.slider .block {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #409eff;
+  background: rgba(255, 255, 255, 1);
+  transition: 0.2s all;
+}
+.slider .tips {
+  position: absolute;
+  left: -7px;
+  bottom: 30px;
+  min-width: 15px;
+  text-align: center;
+  padding: 4px 8px;
+  background: #000;
+  border-radius: 5px;
+  height: 24px;
+  color: #fff;
+}
+.slider .tips i {
+  position: absolute;
+  margin-left: -5px;
+  left: 50%;
+  bottom: -9px;
+  font-size: 16px;
+  color: #000;
+}
+.slider .block:hover {
+  transform: scale(1.1);
+  opacity: 0.6;
+}
+</style>

src/views/statisticalReport/router/index.js

@@ -1,260 +1,268 @@
-import Vue from "vue";
-import Router from "vue-router";
+import Vue from 'vue'
+import Router from 'vue-router'
 
-import routerBefore from "@/config/routerBefore.js";
+import routerBefore from '@/config/routerBefore.js'
 
 // 主要
-import main from "@/components/main.vue";
+import main from '@/components/main.vue'
 // 系统配置管理
-import ShipDynamicTable from "../components/Ship_dynamic_table.vue";
-import ShipWorkReport from "../components/ShipWorkReport.vue";
-import dowmShipDynamicTable from "../components/dowmShipDynamicTable.vue";
-import purchaseAccessoriesMonitor from "../components/purchaseAccessoriesMonitor.vue";
-import purchasFuelOldMonitor from "../components/purchasFuelMonitor/purchasFuelOldMonitor.vue";
-import purchasFuelNewMonitor from "../components/purchasFuelMonitor/purchasFuelNewMonitor.vue";
-import sporadicReportEnterFactory from "../components/sporadicReport/sporadicReportEnterFactory.vue";
-import sporadicReportExFactory from "../components/sporadicReport/sporadicReportExFactory.vue";
-import saleChemicalCokeForm from "../components/salesLogisticsStatistics/saleChemicalCokeForm.vue";
-import saleCoproductForm from "../components/salesLogisticsStatistics/saleCoproductForm.vue";
-import saleSteelForm from "../components/salesLogisticsStatistics/saleSteelForm.vue";
-import transportationPerformance from "../components/salesLogisticsStatistics/transportationPerformance.vue";
-import purchaseChemicalMaterialsNew from "../components/purchaseChemicalMaterials/purchaseChemicalMaterialsNew.vue";
-import purchaseChemicalMaterialsOld from "../components/purchaseChemicalMaterials/purchaseChemicalMaterialsOld.vue";
-import purInwardReport from "../components/inwardReport/putInwardReport.vue";
-import inwardFactory from "../components/inwardReport/inwardFactory.vue";
-import getLoading from "../components/inwardReport/getLoading.vue";
-import getUnLoading from "../components/inwardReport/getUnLoading.vue";
-import purchaseMineral from "../components/purachaseMineral.vue";
-import inwardSporadicReport from "../components/sporadicReport/inwardSporadicReport.vue";
-import getInstall from "../components/inwardReport/getInstall.vue";
-import getCapacityByDefend from "../components/defendCapacity/getCapacityByDefend.vue";
-import inwardAssemble from "../components/inwardAssemble/inwardAssemble.vue";
-import loadCapacityDetail from "../components/loadCapacityDetail/loadCapacityDetail.vue";
-import allInwardReport from "../components/inwardReport/allInwardReport.vue";
-import saleSteelAllReport from "../components/salesLogisticsStatistics/saleSteelAllReport.vue";
-import loadWagonWorkReport from "../components/wanzhouReport/loadWagonWorkReport.vue";
-import unloadShipWorkReport from "../components/wanzhouReport/unloadShipWorkReport.vue";
-import wagonWorkReport from "../components/wanzhouReport/wagonWorkReport.vue";
-import saleSteelCarrierReport from "@/views/statisticalReport/components/salesLogisticsStatistics/saleSteelCarrierReport";
-import saleSteelReports from "@/views/statisticalReport/components/salesLogisticsStatistics/saleSteelReports";
-
-Vue.use(Router);
+import ShipDynamicTable from '../components/Ship_dynamic_table.vue'
+import ShipWorkReport from '../components/ShipWorkReport.vue'
+import dowmShipDynamicTable from '../components/dowmShipDynamicTable.vue'
+import purchaseAccessoriesMonitor from '../components/purchaseAccessoriesMonitor.vue'
+import purchasFuelOldMonitor from '../components/purchasFuelMonitor/purchasFuelOldMonitor.vue'
+import purchasFuelNewMonitor from '../components/purchasFuelMonitor/purchasFuelNewMonitor.vue'
+import sporadicReportEnterFactory from '../components/sporadicReport/sporadicReportEnterFactory.vue'
+import sporadicReportExFactory from '../components/sporadicReport/sporadicReportExFactory.vue'
+import saleChemicalCokeForm from '../components/salesLogisticsStatistics/saleChemicalCokeForm.vue'
+import saleCoproductForm from '../components/salesLogisticsStatistics/saleCoproductForm.vue'
+import saleSteelForm from '../components/salesLogisticsStatistics/saleSteelForm.vue'
+import transportationPerformance from '../components/salesLogisticsStatistics/transportationPerformance.vue'
+import purchaseChemicalMaterialsNew from '../components/purchaseChemicalMaterials/purchaseChemicalMaterialsNew.vue'
+import purchaseChemicalMaterialsOld from '../components/purchaseChemicalMaterials/purchaseChemicalMaterialsOld.vue'
+import purInwardReport from '../components/inwardReport/putInwardReport.vue'
+import inwardFactory from '../components/inwardReport/inwardFactory.vue'
+import getLoading from '../components/inwardReport/getLoading.vue'
+import getUnLoading from '../components/inwardReport/getUnLoading.vue'
+import purchaseMineral from '../components/purachaseMineral.vue'
+import inwardSporadicReport from '../components/sporadicReport/inwardSporadicReport.vue'
+import getInstall from '../components/inwardReport/getInstall.vue'
+import getCapacityByDefend from '../components/defendCapacity/getCapacityByDefend.vue'
+import inwardAssemble from '../components/inwardAssemble/inwardAssemble.vue'
+import loadCapacityDetail from '../components/loadCapacityDetail/loadCapacityDetail.vue'
+import allInwardReport from '../components/inwardReport/allInwardReport.vue'
+import saleSteelAllReport from '../components/salesLogisticsStatistics/saleSteelAllReport.vue'
+import loadWagonWorkReport from '../components/wanzhouReport/loadWagonWorkReport.vue'
+import unloadShipWorkReport from '../components/wanzhouReport/unloadShipWorkReport.vue'
+import wagonWorkReport from '../components/wanzhouReport/wagonWorkReport.vue'
+import saleSteelCarrierReport from '@/views/statisticalReport/components/salesLogisticsStatistics/saleSteelCarrierReport'
+import saleSteelReports from '@/views/statisticalReport/components/salesLogisticsStatistics/saleSteelReports'
+import mapTest from '../components/salesLogisticsStatistics/mapTest.vue'
+Vue.use(Router)
 
 const constantRouterMap = [
   {
-    path: "/",
-    name: "main",
-    meta: { title: "首页", code: "xtpzgl" },
+    path: '/',
+    name: 'main',
+    meta: { title: '首页', code: 'xtpzgl' },
     component: main,
-    redirect: { name: "cargoResult" },
+    redirect: { name: 'cargoResult' },
     children: [
       {
-        path: "purchaseChemicalMaterialsNew",
-        name: "purchaseChemicalMaterialsNew",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchaseChemicalMaterialsNew',
+        name: 'purchaseChemicalMaterialsNew',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchaseChemicalMaterialsNew
       },
       {
-        path: "purchaseChemicalMaterialsOld",
-        name: "purchaseChemicalMaterialsOld",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchaseChemicalMaterialsOld',
+        name: 'purchaseChemicalMaterialsOld',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchaseChemicalMaterialsOld
       },
       {
-        path: "ShipDynamicTable",
-        name: "ShipDynamicTable",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'ShipDynamicTable',
+        name: 'ShipDynamicTable',
+        meta: { code: 'xtpzgl-yhgl' },
         component: ShipDynamicTable
       },
       {
-        path: "ShipWorkReport",
-        name: "ShipWorkReport",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'ShipWorkReport',
+        name: 'ShipWorkReport',
+        meta: { code: 'xtpzgl-yhgl' },
         component: ShipWorkReport
       },
       {
-        path: "dowmShipDynamicTable",
-        name: "dowmShipDynamicTable",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'dowmShipDynamicTable',
+        name: 'dowmShipDynamicTable',
+        meta: { code: 'xtpzgl-yhgl' },
         component: dowmShipDynamicTable
       },
       {
-        path: "purchaseAccessoriesMonitor",
-        name: "purchaseAccessoriesMonitor",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchaseAccessoriesMonitor',
+        name: 'purchaseAccessoriesMonitor',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchaseAccessoriesMonitor
       },
       {
-        path: "purchasFuelOldMonitor",
-        name: "purchasFuelOldMonitor",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchasFuelOldMonitor',
+        name: 'purchasFuelOldMonitor',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchasFuelOldMonitor
       },
       {
-        path: "purchasFuelNewMonitor",
-        name: "purchasFuelNewMonitor",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchasFuelNewMonitor',
+        name: 'purchasFuelNewMonitor',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchasFuelNewMonitor
       },
       {
-        path: "sporadicReportEnterFactory",
-        name: "sporadicReportEnterFactory",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'sporadicReportEnterFactory',
+        name: 'sporadicReportEnterFactory',
+        meta: { code: 'xtpzgl-yhgl' },
         component: sporadicReportEnterFactory
       },
       {
-        path: "sporadicReportExFactory",
-        name: "sporadicReportExFactory",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'sporadicReportExFactory',
+        name: 'sporadicReportExFactory',
+        meta: { code: 'xtpzgl-yhgl' },
         component: sporadicReportExFactory
       },
       {
-        path: "saleChemicalCokeForm",
-        name: "saleChemicalCokeForm",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'saleChemicalCokeForm',
+        name: 'saleChemicalCokeForm',
+        meta: { code: 'xtpzgl-yhgl' },
         component: saleChemicalCokeForm
       },
       {
-        path: "saleCoproductForm",
-        name: "saleCoproductForm",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'saleCoproductForm',
+        name: 'saleCoproductForm',
+        meta: { code: 'xtpzgl-yhgl' },
         component: saleCoproductForm
       },
       {
-        path: "saleSteelForm",
-        name: "saleSteelForm",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'saleSteelForm',
+        name: 'saleSteelForm',
+        meta: { code: 'xtpzgl-yhgl' },
         component: saleSteelForm
       },
       {
-        path: "transportationPerformance",
-        name: "transportationPerformance",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'transportationPerformance',
+        name: 'transportationPerformance',
+        meta: { code: 'xtpzgl-yhgl' },
         component: transportationPerformance
       },
       {
-        path: "purInwardReport",
-        name: "purInwardReport",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purInwardReport',
+        name: 'purInwardReport',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purInwardReport
       },
       {
-        path: "inwardFactory",
-        name: "inwardFactory",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'inwardFactory',
+        name: 'inwardFactory',
+        meta: { code: 'xtpzgl-yhgl' },
         component: inwardFactory
       },
       {
-        path: "getLoading",
-        name: "getLoading",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'getLoading',
+        name: 'getLoading',
+        meta: { code: 'xtpzgl-yhgl' },
         component: getLoading
       },
       {
-        path: "getUnLoading",
-        name: "getUnLoading",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'getUnLoading',
+        name: 'getUnLoading',
+        meta: { code: 'xtpzgl-yhgl' },
         component: getUnLoading
       },
       {
-        path: "purchaseMineral",
-        name: "purchaseMineral",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'purchaseMineral',
+        name: 'purchaseMineral',
+        meta: { code: 'xtpzgl-yhgl' },
         component: purchaseMineral
       },
       {
-        path: "inwardSporadicReport",
-        name: "inwardSporadicReport",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'inwardSporadicReport',
+        name: 'inwardSporadicReport',
+        meta: { code: 'xtpzgl-yhgl' },
         component: inwardSporadicReport
       },
       {
-        path: "getInstall",
-        name: "getInstall",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'getInstall',
+        name: 'getInstall',
+        meta: { code: 'xtpzgl-yhgl' },
         component: getInstall
       },
       {
-        path: "getCapacityByDefend",
-        name: "getCapacityByDefend",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'getCapacityByDefend',
+        name: 'getCapacityByDefend',
+        meta: { code: 'xtpzgl-yhgl' },
         component: getCapacityByDefend
       },
       {
-        path: "inwardAssemble",
-        name: "inwardAssemble",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'inwardAssemble',
+        name: 'inwardAssemble',
+        meta: { code: 'xtpzgl-yhgl' },
         component: inwardAssemble
       },
       {
-        path: "loadCapacityDetail",
-        name: "loadCapacityDetail",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'loadCapacityDetail',
+        name: 'loadCapacityDetail',
+        meta: { code: 'xtpzgl-yhgl' },
         component: loadCapacityDetail
       },
       {
-        path: "allInwardReport",
-        name: "allInwardReport",
-        meta: { code: "xtpzgl-yhgl" },
+        path: 'allInwardReport',
+        name: 'allInwardReport',
+        meta: { code: 'xtpzgl-yhgl' },
         component: allInwardReport
       },
       {
-        path: "saleSteelAllReport",
-        name: "saleSteelAllReport",
+        path: 'saleSteelAllReport',
+        name: 'saleSteelAllReport',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: saleSteelAllReport
       },
       {
-        path: "loadWagonWorkReport",
-        name: "loadWagonWorkReport",
+        path: 'loadWagonWorkReport',
+        name: 'loadWagonWorkReport',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: loadWagonWorkReport
       },
       {
-        path: "unloadShipWorkReport",
-        name: "unloadShipWorkReport",
+        path: 'unloadShipWorkReport',
+        name: 'unloadShipWorkReport',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: unloadShipWorkReport
       },
       {
-        path: "wagonWorkReport",
-        name: "wagonWorkReport",
+        path: 'wagonWorkReport',
+        name: 'wagonWorkReport',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: wagonWorkReport
       },
       {
-        path: "saleSteelCarrierReport",
-        name: "saleSteelCarrierReport",
+        path: 'saleSteelCarrierReport',
+        name: 'saleSteelCarrierReport',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: saleSteelCarrierReport
       },
       {
-        path: "saleSteelReports",
-        name: "saleSteelReports",
+        path: 'saleSteelReports',
+        name: 'saleSteelReports',
         meta: {
-          code: "xtpzgl-yhgl"
+          code: 'xtpzgl-yhgl'
         },
         component: saleSteelReports
+      },
+      {
+        path: 'mapTest',
+        name: 'mapTest',
+        meta: {
+          code: 'xtpzgl-yhgl'
+        },
+        component: mapTest
       }
     ]
   }
-];
+]
 const router = new Router({
   routes: constantRouterMap
-});
+})
 //  before
-routerBefore(router, constantRouterMap);
+routerBefore(router, constantRouterMap)
 
-export default router;
+export default router
 //  constantRouterMap
-export const routes = constantRouterMap;
+export const routes = constantRouterMap