1.引入echarts

2.添加物流页面在冷链情况下，曲线图的显示

1.引入echarts
2.添加物流页面在冷链情况下，曲线图的显示
7b0e210b · 琉璃丶c · 9a89d8b8 · 7b0e210b · 7b0e210b · 7b0e210b
Commit 7b0e210b authored Mar 30, 2021 by 琉璃丶c
6 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
      "dependencies": {
        "axios": "^0.18.1",
        "crypto-js": "^4.0.0",
-        "echarts": "^4.8.0",
+        "echarts": "^4.9.0",
        "font-awesome": "^4.7.0",
        "lib-flexible": "^0.3.2",
        "vant": "^2.12.10",
@@ -5033,11 +5033,11 @@
      }
    },
    "node_modules/echarts": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
-      "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
      "dependencies": {
-        "zrender": "4.3.1"
+        "zrender": "4.3.2"
      }
    },
    "node_modules/editorconfig": {
@@ -18991,9 +18991,9 @@
      "dev": true
    },
    "node_modules/zrender": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
-      "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
    }
  },
  "dependencies": {
@@ -23331,11 +23331,11 @@
      }
    },
    "echarts": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
-      "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
      "requires": {
-        "zrender": "4.3.1"
+        "zrender": "4.3.2"
      }
    },
    "editorconfig": {
@@ -34971,9 +34971,9 @@
      }
    },
    "zrender": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
-      "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
  "dependencies": {
    "axios": "^0.18.1",
    "crypto-js": "^4.0.0",
-    "echarts": "^4.8.0",
+    "echarts": "^4.9.0",
    "font-awesome": "^4.7.0",
    "lib-flexible": "^0.3.2",
    "vant": "^2.12.10",

--- a/src/api/myOrder.js
+++ b/src/api/myOrder.js
@@ -87,6 +87,15 @@ export function getGpsMapPoint(params) {
    url: '/OrderLife/GisMapInfo',
    method: 'post',
    data: params,
+    loading: false
+  })
+}
+// 获取温度
+export function getColdTemperatureList(params) {
+  return fetch({
+    url: '/OrderLife/TempRecord',
+    method: 'post',
+    data: params,
    loading: true
  })
 }
--- a/src/components/EchartsView.vue
+++ b/src/components/EchartsView.vue
+<template>
+  <div id="chartView" style="height: 300px;width:100%;background-color:#fff"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'EchartsView',
+  data() {
+    return {
+      xList: [],
+      yList: []
+    }
+  },
+  props: {
+    lineArray: {
+      type: Array,
+      default: () => []
+    },
+    carNo: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    this.calcData()
+  },
+  methods: {
+    calcData() {
+      if (this.lineArray && this.lineArray.length > 0) {
+        let tempX = []
+        let tempY = []
+        this.lineArray.forEach(item => {
+          if (item.temperature) {
+            // collectDate temperature
+            tempX.push(this.splitDate(item.collectDate))
+            tempY.push(item.temperature)
+          }
+        })
+        this.xList = tempX
+        this.yList = tempY
+      }
+      if (this.xList.length > 0) {
+        this.drawLine()
+      }
+    },
+    drawLine() {
+      let _this = this
+      let layout = document.getElementById('chartView')
+      let chart = echarts.init(layout)
+      let options = {
+        // animation: false,
+        color: '#02a7f0',
+        dataZoom: [
+          {
+            id: 'dataZoomX',
+            type: 'inside',
+            xAxisIndex: [0],
+            filterMode: 'none',
+            start: 0,
+            end: 2,
+            zoomLock: true
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              let circle = `<span style="margin-right:6px;
+                    display:inline-block;
+                    height:12px;
+                    width:12px;
+                    border-radius:6px;
+                    background-color:${params[i].color}"></span>`
+              relVal += '<br/><div style="display:flex;align-items: center">' + circle + _this.carNo + ' : ' + params[i].value + '℃</div>'
+            }
+            return relVal
+          }
+        },
+        grid: {
+          left: '12%',
+          top: '10%',
+          height: '80%',
+          width: '86%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xList,
+          axisLine: {
+            lineStyle: {
+              color: '#eeeeee'
+            }
+          },
+          axisLabel: {
+            color: '#999999'
+          },
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        yAxis: {
+          name: '温度',
+          type: 'value',
+          // minInterval: 0.5,
+          // splitNumber: 7,
+          axisLine: {
+            lineStyle: {
+              color: '#eeeeee'
+            }
+          },
+          axisLabel: {
+            color: '#999999',
+            formatter: '{value} ℃',
+            interval: 0.5
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#eeeeee'
+            }
+          },
+          nameTextStyle: {
+            color: '#000'
+          }
+        },
+        series: [{
+          data: this.yList, // [820, 932, 901, 934, 1290, 1330, 1320],
+          type: 'line',
+          smooth: true
+        }]
+      }
+      chart.setOption(options)
+    },
+    splitDate(oDate) {
+      let res = oDate.split(' ')[1].slice(0, 5)
+      return res
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/myOrder/detail/logisticsDetail.vue
+++ b/src/views/myOrder/detail/logisticsDetail.vue
@@ -42,22 +42,30 @@
        <van-icon name="arrow-down"/>
      </div>
    </div>
+    <!--  冷链温度趋势  -->
+    <van-tabs v-model="temperatureActive" style="margin-top:18px;">
+      <van-tab :title="item.deviceNumber" v-for="(item,index) in coldInfo" :key="index">
+        <echarts-view :line-array="item.temperatureInfoList" :car-no="item.deviceNumber"/>
+      </van-tab>
+    </van-tabs>
  </div>
 </template>

 <script>
-import {getShippingInfo, getTrackInfo, getGpsMapPoint} from '@/api/myOrder'
+import {getShippingInfo, getTrackInfo, getGpsMapPoint, getColdTemperatureList} from '@/api/myOrder'
 import MapView from '../../../components/MapView'
 import LogisticsStep from '../components/logisticsStep'
 import StepItem from '../components/stepItem'
 import AMapView from '../../../components/AMapView'
+import EchartsView from '../../../components/EchartsView'

 export default {
  name: 'logisticsDetail',
-  components: {AMapView, StepItem, LogisticsStep, MapView},
+  components: {EchartsView, AMapView, StepItem, LogisticsStep, MapView},
  data() {
    return {
      orderInfo: this.$route.query,
+      temperatureActive: 0,
      icons: {
        logo: require('@/assets/img/u48.png')
      },
@@ -77,7 +85,8 @@ export default {
        }
      },
      stepInfo: {},
-      stepList: []
+      stepList: [],
+      coldInfo: []
    }
  },
  mounted() {
@@ -96,6 +105,7 @@ export default {

    this.getShippingData()
    this.getTrackInfoDetail()
+    this.getTemperatureData()
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
@@ -134,7 +144,7 @@ export default {
          this.driveLine.endPoint.longitude = parseFloat(this.shippingInfo.longitude)
          this.driveLine.endPoint.latitude = parseFloat(this.shippingInfo.latitude)

-          console.log('--->', this.orderInfo.orderStatusCode)
+          // console.log('--->', this.orderInfo.orderStatusCode)
          if (this.orderInfo.orderStatusCode > 300) {
            this.sendType = this.orderInfo.orderStatusCode === '310'
            this.getGpsPoint()
@@ -212,6 +222,25 @@ export default {
        console.log('GPS信息', err)
        this.$toast('GIS信息获取失败')
      })
+    },
+    getTemperatureData() {
+      let data = {
+        'order': 'desc',
+        'orderId': '',
+        'orderNo': this.orderInfo.orderNo, // '301202103261165',
+        'orderType': this.orderInfo.orderType, // 'SALE',
+        'pageNum': 1,
+        'pageSize': 1000,
+        'sort': 'COLLECTDATE',
+        'sourceDb': this.orderInfo.sourceDb// 'SHYY'
+      }
+      getColdTemperatureList(data).then(res => {
+        if (res.code === 200 && res.data.code === '00000' &&
+          res.data.entity && res.data.entity.temperatureRecordList &&
+          res.data.entity.temperatureRecordList.length > 0) {
+          this.coldInfo = res.data.entity.temperatureRecordList
+        }
+      })
    }
  }
 }

--- a/src/views/myOrder/detail/orderDetail.vue
+++ b/src/views/myOrder/detail/orderDetail.vue
@@ -367,8 +367,8 @@ export default {
        'mdmClientCode': '',
        'mdmGoodsCode': '',
        'order': '',
-        'orderId': '',
-        'orderNo': this.orderItem.orderNo,
+        'orderId': this.orderItem.orderId,
+        'orderNo': '', // this.orderItem.orderNo,
        'pageNum': 1,
        'pageSize': 3,
        'sort': '',