|
|
@@ -2,84 +2,99 @@
|
|
|
<div id="print">
|
|
|
<el-tabs v-model="activeName" type="border-card" stretch @tab-click="handleClick">
|
|
|
<el-tab-pane label="温湿度信息" name="first">
|
|
|
- <div id="body" :style="{width: width - 300 + 'px'}">
|
|
|
+ <div id="body" :style="{width: width - 100 + 'px'}">
|
|
|
<!--导出按钮-->
|
|
|
<el-button class="OutCss" v-print="'#print'" type="primary">导出</el-button>
|
|
|
<el-timeline>
|
|
|
<!-- 数据表 -->
|
|
|
- <h2 v-if="isCarData">车辆温湿度列表</h2>
|
|
|
+ <h2 v-if="isCarData">订单温度列表</h2>
|
|
|
<div v-for="(item, index) in dataCar">
|
|
|
- <h2>
|
|
|
- ============================================================================================================================
|
|
|
- </h2>
|
|
|
<el-descriptions>
|
|
|
- <el-descriptions-item label="订单编号">{{item[0].billCode}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="车牌号">{{item[0].measuringPointName}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="探头">{{item[0].measuringPointAddr}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="开始时间">{{item[0].hisDate}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="结束时间">{{item[item.length - 1].end}}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户名称" v-if="bill">{{ carMessage.customerName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发运订单编号" v-if="bill">{{
|
|
|
+ carMessage.wmsBillCode
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="收货地址" v-if="bill">{{
|
|
|
+ carMessage.customerAddress
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系人" v-if="bill">{{ carMessage.customerContact }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话" v-if="bill">{{ carMessage.customerTel }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="配送订单编号">{{ item[0].billCode }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="车牌号">{{ item[0].measuringPointName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="开始时间">{{ item[0].hisDate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="结束时间">{{ item[item.length - 1].end }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="探头">{{ item[0].measuringPointAddr }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<el-table :data="item" stripe border style="width: 97%">
|
|
|
- <el-table-column prop="temperature" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature1" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate1" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature2" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate2" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature3" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate3" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature4" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate4" label="时间点" align="center" min-width="200" />
|
|
|
+ <el-table-column prop="temperature" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature1" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate1" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature2" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate2" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature3" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate3" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature4" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate4" label="时间点" align="center" min-width="160"/>
|
|
|
</el-table>
|
|
|
- <template></template>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
</div>
|
|
|
- <h2 v-if="isBoxData">保温箱温湿度列表</h2>
|
|
|
<div v-for="(item, index) in dataBox">
|
|
|
- <h2>
|
|
|
- ============================================================================================================================
|
|
|
- </h2>
|
|
|
<el-descriptions>
|
|
|
- <el-descriptions-item label="订单编号">{{item[0].billCode}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="保温箱号">{{item[0].measuringPointName}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="探头">{{item[0].measuringPointAddr}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="开始时间">{{item[0].hisDate}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="结束时间">{{item[item.length - 1].end}}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户名称" v-if="bill">{{ carMessage.customerName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发运订单编号" v-if="bill">{{
|
|
|
+ carMessage.wmsBillCode
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="收货地址" v-if="bill">{{
|
|
|
+ carMessage.customerAddress
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系人" v-if="bill">{{ carMessage.customerContact }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话" v-if="bill">{{ carMessage.customerTel }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="配送订单编号">{{ item[0].billCode }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="保温箱号">{{ item[0].measuringPointName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="开始时间">{{ item[0].hisDate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="结束时间">{{ item[item.length - 1].end }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="探头">{{ item[0].measuringPointAddr }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<el-table :data="item" stripe border style="width: 97%">
|
|
|
- <el-table-column prop="temperature" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature1" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate1" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature2" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate2" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature3" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate3" label="时间点" align="center" min-width="200" />
|
|
|
- <el-table-column prop="temperature4" label="温度" align="center" min-width="80" />
|
|
|
- <el-table-column prop="hisDate4" label="时间点" align="center" min-width="200" />
|
|
|
+ <el-table-column prop="temperature" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature1" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate1" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature2" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate2" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature3" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate3" label="时间点" align="center" min-width="160"/>
|
|
|
+ <el-table-column prop="temperature4" label="温度" align="center" min-width="60"/>
|
|
|
+ <el-table-column prop="hisDate4" label="时间点" align="center" min-width="160"/>
|
|
|
</el-table>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
</div>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
|
- <br>
|
|
|
<div id="body" :style="{width: width - 300 + 'px'}">
|
|
|
- <el-timeline>
|
|
|
- <h2>订单温度折线图</h2>
|
|
|
- <div class="echart" id="mychart" :style="myChartStyle"></div>
|
|
|
- </el-timeline>
|
|
|
+ <h2>订单温度折线图</h2>
|
|
|
+ <div class="echart" id="mychart" :style="myChartStyle"></div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="运输信息" name="second">
|
|
|
- <div id="body" :style="{width: width - 300 + 'px'}">
|
|
|
+ <div id="body" :style="{width: width - 100 + 'px'}">
|
|
|
<!-- 单据信息 -->
|
|
|
<el-timeline>
|
|
|
<el-timeline>
|
|
|
<el-descriptions>
|
|
|
- <el-descriptions-item label="订单编号">{{this.basicData.billCode}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="车牌号">{{this.basicData.plateNumber}}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="配送订单编号">{{ basicData.billCode }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="车牌号">{{ basicData.plateNumber }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<el-descriptions>
|
|
|
- <el-descriptions-item label="开始时间">{{this.basicData.startTime}}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="开始时间">{{ basicData.startTime }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="结束时间">{{ basicData.endTime }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-timeline>
|
|
|
</el-timeline>
|
|
|
@@ -92,14 +107,14 @@
|
|
|
<br>
|
|
|
<h2>订单温湿度列表</h2>
|
|
|
<el-table :data="tableData1" height="200" style="width: 97%">
|
|
|
- <el-table-column prop="maxTemperature" label="温度最大值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="avgTemperature" label="温度平均值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="minTemperature" label="温度最小值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="maxHumidity" label="湿度最大值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="avgHumidity" label="湿度平均值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="minHumidity" label="湿度最小值" align="center" min-width="100" />
|
|
|
- <el-table-column prop="startTime" label="开始时间" align="center" min-width="250" />
|
|
|
- <el-table-column prop="endTime" label="结束时间" align="center" min-width="250" />
|
|
|
+ <el-table-column prop="maxTemperature" label="温度最大值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="avgTemperature" label="温度平均值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="minTemperature" label="温度最小值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="maxHumidity" label="湿度最大值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="avgHumidity" label="湿度平均值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="minHumidity" label="湿度最小值" align="center" min-width="100"/>
|
|
|
+ <el-table-column prop="startTime" label="开始时间" align="center" min-width="250"/>
|
|
|
+ <el-table-column prop="endTime" label="结束时间" align="center" min-width="250"/>
|
|
|
</el-table>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
|
@@ -110,146 +125,271 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
- window._AMapSecurityConfig = {
|
|
|
- securityJsCode: '8e23904a0cf421675353f31fd1fc213c'
|
|
|
- }
|
|
|
- import historyApi from '@/api/WMS/historical-route'
|
|
|
- import * as echarts from "echarts";
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+import historyApi from '@/api/WMS/historical-route'
|
|
|
+import * as echarts from 'echarts'
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- width: document.documentElement.clientWidth - 10,
|
|
|
- param: this.$route.query,
|
|
|
- basicData: {
|
|
|
- billCode: "",
|
|
|
- plateNumber: "",
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
- },
|
|
|
- //标签页
|
|
|
- activeName: 'first',
|
|
|
- //地图对象
|
|
|
- map: null,
|
|
|
- //图表
|
|
|
- myChart: {},
|
|
|
- xData: [], //横坐标
|
|
|
- temperatureData: [], //温度数据
|
|
|
- humidityData: [], //湿度数据
|
|
|
- myChartStyle: {
|
|
|
- float: "left",
|
|
|
- width: "100%",
|
|
|
- height: "400px"
|
|
|
- }, //图表样式
|
|
|
- //运输信息表单数据
|
|
|
- tableData1: [],
|
|
|
- //运输信息表单数据准备
|
|
|
- modelData1: [{
|
|
|
- maxTemperature: "",
|
|
|
- avgTemperature: "",
|
|
|
- minTemperature: "",
|
|
|
- maxHumidity: "",
|
|
|
- avgHumidity: "",
|
|
|
- minHumidity: "",
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
+window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: '8e23904a0cf421675353f31fd1fc213c'
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ width: document.documentElement.clientWidth - 10,
|
|
|
+ basicData: {
|
|
|
+ billCode: '',
|
|
|
+ plateNumber: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ wmsBillCode: '',
|
|
|
+ customerName: '',
|
|
|
+ customerAddress: '',
|
|
|
+ customerContact: '',
|
|
|
+ customerTel: ''
|
|
|
+ },
|
|
|
+ //标签页
|
|
|
+ activeName: 'first',
|
|
|
+ //地图对象
|
|
|
+ map: null,
|
|
|
+ //图表
|
|
|
+ myChart: {},
|
|
|
+ xData: [], //横坐标
|
|
|
+ temperatureData: [], //温度数据
|
|
|
+ humidityData: [], //湿度数据
|
|
|
+ myChartStyle: {
|
|
|
+ float: 'left',
|
|
|
+ width: '100%',
|
|
|
+ height: '400px'
|
|
|
+ },
|
|
|
+ //运输信息表单数据
|
|
|
+ tableData1: [],
|
|
|
+ //运输信息表单数据准备
|
|
|
+ modelData1:
|
|
|
+ [{
|
|
|
+ maxTemperature: '',
|
|
|
+ avgTemperature: '',
|
|
|
+ minTemperature: '',
|
|
|
+ maxHumidity: '',
|
|
|
+ avgHumidity: '',
|
|
|
+ minHumidity: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
}],
|
|
|
- //温湿度信息表单数据
|
|
|
- tableData2: [],
|
|
|
- resData: [],
|
|
|
- carMessage: {
|
|
|
- billCode: "",
|
|
|
- plateNumber: "",
|
|
|
- boxCode: [],
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
- },
|
|
|
- option: {},
|
|
|
- //表单各值
|
|
|
- maxT: 0,
|
|
|
- maxH: 0,
|
|
|
- minT: 0,
|
|
|
- minH: 0,
|
|
|
- aggT: 0,
|
|
|
- aggH: 0,
|
|
|
- avgT: 0,
|
|
|
- avgH: 0,
|
|
|
- dataCar: [],
|
|
|
- dataBox: [],
|
|
|
- dataMerge: [],
|
|
|
- isCarData: false,
|
|
|
- isBoxData: false,
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- //DOM初始化完成进行地图初始化
|
|
|
- this.initMap();
|
|
|
- },
|
|
|
- created() {
|
|
|
- //把传参中的保温箱转换成数组
|
|
|
- this.carMessage = this.$route.query;
|
|
|
- if (this.carMessage.boxCode != null) {
|
|
|
- this.carMessage.boxCode = this.$route.query.boxCode.split(',');
|
|
|
- }
|
|
|
- console.log(this.carMessage, 'this.carMessage')
|
|
|
- // 获取总数据
|
|
|
- this.merge(this.carMessage);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //通过传参查询数据
|
|
|
- handleGeocodeRepo(data) {
|
|
|
- historyApi.queryAddress(data).then(res => {
|
|
|
- console.log(res, 'res-----------------');
|
|
|
- if (res.code == 200) {
|
|
|
- // 表格中分列展示数据
|
|
|
- this.listSplitting(res.data.car, res.data.box);
|
|
|
- console.log(this.dataCar, 'this.dataCar');
|
|
|
- //定义路线数组
|
|
|
- let path = [];
|
|
|
- //筛选含经纬度的数组
|
|
|
- let latitudeLongitude = [];
|
|
|
- let count = 0;
|
|
|
- for (let i = 0; i < this.dataMerge.length; i++) {
|
|
|
- if (this.dataMerge[i].gpsLatitude != 0 && this.dataMerge[i].gpsLongitude != 0) {
|
|
|
- latitudeLongitude[count++] = this.dataMerge[i];
|
|
|
- }
|
|
|
+ //温湿度信息表单数据
|
|
|
+ tableData2:
|
|
|
+ [],
|
|
|
+ resData:
|
|
|
+ [],
|
|
|
+ carMessage:
|
|
|
+ {
|
|
|
+ billCode: '',
|
|
|
+ plateNumber:
|
|
|
+ '',
|
|
|
+ boxCode:
|
|
|
+ [],
|
|
|
+ startTime:
|
|
|
+ '',
|
|
|
+ endTime:
|
|
|
+ '',
|
|
|
+ wmsBillCode:
|
|
|
+ '',
|
|
|
+ customerName:
|
|
|
+ '',
|
|
|
+ customerAddress:
|
|
|
+ '',
|
|
|
+ customerContact:
|
|
|
+ '',
|
|
|
+ customerTel:
|
|
|
+ ''
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ option: {}
|
|
|
+ ,
|
|
|
+ //表单各值
|
|
|
+ maxT: 0,
|
|
|
+ maxH:
|
|
|
+ 0,
|
|
|
+ minT:
|
|
|
+ 0,
|
|
|
+ minH:
|
|
|
+ 0,
|
|
|
+ aggT:
|
|
|
+ 0,
|
|
|
+ aggH:
|
|
|
+ 0,
|
|
|
+ avgT:
|
|
|
+ 0,
|
|
|
+ avgH:
|
|
|
+ 0,
|
|
|
+ dataCar:
|
|
|
+ [],
|
|
|
+ dataBox:
|
|
|
+ [],
|
|
|
+ dataMerge:
|
|
|
+ [],
|
|
|
+ isCarData:
|
|
|
+ false,
|
|
|
+ isBoxData:
|
|
|
+ false,
|
|
|
+ bill:
|
|
|
+ false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // DOM初始化完成进行地图初始化
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 把传参中的保温箱转换成数组
|
|
|
+ this.carMessage = this.$route.query
|
|
|
+ if (this.carMessage.boxCode != null) {
|
|
|
+ this.carMessage.boxCode = this.$route.query.boxCode.split(',')
|
|
|
+ }
|
|
|
+ console.log(this.carMessage, 'this.carMessage')
|
|
|
+ // 获取总数据
|
|
|
+ this.merge(this.carMessage)
|
|
|
+ // 判读属于配送单跟踪还是订单跟踪
|
|
|
+ this.checkout()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 通过传参查询数据
|
|
|
+ handleGeocodeRepo(data) {
|
|
|
+ historyApi.queryAddress(data).then(res => {
|
|
|
+ console.log(res, 'res-----------------')
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 表格中分列展示数据
|
|
|
+ this.listSplitting(res.data.car, res.data.box)
|
|
|
+ console.log(this.dataCar, 'this.dataCar')
|
|
|
+ //定义路线数组
|
|
|
+ let path = []
|
|
|
+ //筛选含经纬度的数组
|
|
|
+ let latitudeLongitude = []
|
|
|
+ let count = 0
|
|
|
+ for (let i = 0; i < this.dataMerge.length; i++) {
|
|
|
+ if (this.dataMerge[i].gpsLatitude !== 0 && this.dataMerge[i].gpsLongitude !== 0) {
|
|
|
+ latitudeLongitude[count++] = this.dataMerge[i]
|
|
|
}
|
|
|
- //定义整数递增值，并且绘制初始路径
|
|
|
- if (latitudeLongitude.length >= 14) {
|
|
|
- this.increment = Math.trunc(latitudeLongitude.length / 14);
|
|
|
- for (let i = 0; i < latitudeLongitude.length; i = i + this.increment) {
|
|
|
- path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude]);
|
|
|
- }
|
|
|
- } else {
|
|
|
- for (let i = 0; i < latitudeLongitude.length; i++) {
|
|
|
- path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude]);
|
|
|
- }
|
|
|
+ }
|
|
|
+ // 定义整数递增值，并且绘制初始路径
|
|
|
+ if (latitudeLongitude.length >= 14) {
|
|
|
+ this.increment = Math.trunc(latitudeLongitude.length / 14)
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i = i + this.increment) {
|
|
|
+ path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude])
|
|
|
}
|
|
|
- //计算各值
|
|
|
- this.calculate(this.dataMerge);
|
|
|
- //对订单温湿度列表进行赋值
|
|
|
- this.assignmentTable1(this.dataMerge);
|
|
|
- //提取探头种类数量
|
|
|
- let probeSum = [];
|
|
|
- let probe = [];
|
|
|
+ } else {
|
|
|
for (let i = 0; i < latitudeLongitude.length; i++) {
|
|
|
- probeSum[i] = latitudeLongitude[i].measuringPointAddr;
|
|
|
+ path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 计算各值
|
|
|
+ this.calculate(this.dataMerge)
|
|
|
+ // 对订单温湿度列表进行赋值
|
|
|
+ this.assignmentTable1(this.dataMerge)
|
|
|
+ // 提取探头种类数量
|
|
|
+ let probeSum = []
|
|
|
+ let probe = []
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i++) {
|
|
|
+ probeSum[i] = latitudeLongitude[i].measuringPointAddr
|
|
|
+ }
|
|
|
+ probe = Array.from(new Set(probeSum))
|
|
|
+ // 车辆温度数组
|
|
|
+ let c, d
|
|
|
+ this.initEcharts()
|
|
|
+ for (let i = 0; i < probe.length; i++) {
|
|
|
+ let carForm = {
|
|
|
+ name: this.carMessage.plateNumber + '/' + probe[i],
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(255, 0, 0)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '8.1'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ yAxis: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '1.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // -0.5这条只用来做下方的提示文本
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '-0.5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-0.5'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ yAxis: '-15'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-14.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ yAxis: '-25'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-25.1'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // -27.5这条只用来做下方的提示文本
|
|
|
+ [{
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-27.5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-27.5'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // count = 0;
|
|
|
+ for (let j = 0; j < latitudeLongitude.length; j++) {
|
|
|
+ if (carForm.name.indexOf(latitudeLongitude[j].measuringPointAddr) !== -1) {
|
|
|
+ c = latitudeLongitude[j].hisDate
|
|
|
+ d = latitudeLongitude[j].temperature
|
|
|
+ carForm.data.push([c, d])
|
|
|
+ }
|
|
|
}
|
|
|
- probe = Array.from(new Set(probeSum));
|
|
|
- //车辆温度数组
|
|
|
- let c, d;
|
|
|
- this.initEcharts();
|
|
|
- for (let i = 0; i < probe.length; i++) {
|
|
|
- let carForm = {
|
|
|
- name: this.carMessage.plateNumber + '/' + probe[i],
|
|
|
+ this.option.series.push(carForm)
|
|
|
+ this.option.legend.data.push(carForm.name)
|
|
|
+ }
|
|
|
+ // 筛选保温箱的数组
|
|
|
+ if (this.carMessage.boxCode != null) {
|
|
|
+ let e, f
|
|
|
+ for (let i = 0; i < this.carMessage.boxCode.length; i++) {
|
|
|
+ let boxForm = {
|
|
|
+ name: this.carMessage.boxCode[i],
|
|
|
data: [],
|
|
|
- type: "line",
|
|
|
+ type: 'line',
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
|
label: {
|
|
|
show: true,
|
|
|
- position: "top",
|
|
|
+ position: 'top',
|
|
|
textStyle: {
|
|
|
fontSize: 12
|
|
|
}
|
|
|
@@ -260,49 +400,49 @@
|
|
|
},
|
|
|
data: [
|
|
|
[{
|
|
|
- name: '冷藏温度警戒线',
|
|
|
- yAxis: '8'
|
|
|
- },
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '8'
|
|
|
+ },
|
|
|
{
|
|
|
yAxis: '8.1'
|
|
|
}
|
|
|
],
|
|
|
[{
|
|
|
- yAxis: '2'
|
|
|
- },
|
|
|
+ yAxis: '2'
|
|
|
+ },
|
|
|
{
|
|
|
yAxis: '1.9'
|
|
|
}
|
|
|
],
|
|
|
// -0.5这条只用来做下方的提示文本
|
|
|
[{
|
|
|
- name: '冷藏温度警戒线',
|
|
|
- yAxis: '-0.5'
|
|
|
- },
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '-0.5'
|
|
|
+ },
|
|
|
{
|
|
|
yAxis: '-0.5'
|
|
|
}
|
|
|
],
|
|
|
[{
|
|
|
- yAxis: '-15'
|
|
|
- },
|
|
|
+ yAxis: '-15'
|
|
|
+ },
|
|
|
{
|
|
|
name: '冷冻温度警戒线',
|
|
|
yAxis: '-14.9'
|
|
|
}
|
|
|
],
|
|
|
[{
|
|
|
- yAxis: '-25'
|
|
|
- },
|
|
|
+ yAxis: '-25'
|
|
|
+ },
|
|
|
{
|
|
|
yAxis: '-25.1'
|
|
|
}
|
|
|
],
|
|
|
// -27.5这条只用来做下方的提示文本
|
|
|
[{
|
|
|
- name: '冷冻温度警戒线',
|
|
|
- yAxis: '-27.5'
|
|
|
- },
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-27.5'
|
|
|
+ },
|
|
|
{
|
|
|
yAxis: '-27.5'
|
|
|
}
|
|
|
@@ -311,533 +451,449 @@
|
|
|
}
|
|
|
}
|
|
|
// count = 0;
|
|
|
- for (let j = 0; j < latitudeLongitude.length; j++) {
|
|
|
- if (carForm.name.indexOf(latitudeLongitude[j].measuringPointAddr) != -1) {
|
|
|
- c = latitudeLongitude[j].hisDate;
|
|
|
- d = latitudeLongitude[j].temperature;
|
|
|
- carForm.data.push([c, d]);
|
|
|
+ for (let j = 0; j < this.dataMerge.length; j++) {
|
|
|
+ if (boxForm.name === this.dataMerge[j].measuringPointName) {
|
|
|
+ e = this.dataMerge[j].hisDate
|
|
|
+ f = this.dataMerge[j].temperature
|
|
|
+ boxForm.data.push([e, f])
|
|
|
}
|
|
|
}
|
|
|
- this.option.series.push(carForm);
|
|
|
- this.option.legend.data.push(carForm.name);
|
|
|
+ this.option.series.push(boxForm)
|
|
|
+ this.option.legend.data.push(boxForm.name)
|
|
|
}
|
|
|
- //筛选保温箱的数组
|
|
|
- if (this.carMessage.boxCode != null) {
|
|
|
- let e, f;
|
|
|
- for (let i = 0; i < this.carMessage.boxCode.length; i++) {
|
|
|
- let boxForm = {
|
|
|
- name: this.carMessage.boxCode[i],
|
|
|
- data: [],
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- showSymbol: false,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "top",
|
|
|
- textStyle: {
|
|
|
- fontSize: 12
|
|
|
- }
|
|
|
- },
|
|
|
- markArea: {
|
|
|
- itemStyle: {
|
|
|
- color: 'rgba(255, 0, 0)'
|
|
|
- },
|
|
|
- data: [
|
|
|
- [{
|
|
|
- name: '冷藏温度警戒线',
|
|
|
- yAxis: '8'
|
|
|
- },
|
|
|
- {
|
|
|
- yAxis: '8.1'
|
|
|
- }
|
|
|
- ],
|
|
|
- [{
|
|
|
- yAxis: '2'
|
|
|
- },
|
|
|
- {
|
|
|
- yAxis: '1.9'
|
|
|
- }
|
|
|
- ],
|
|
|
- // -0.5这条只用来做下方的提示文本
|
|
|
- [{
|
|
|
- name: '冷藏温度警戒线',
|
|
|
- yAxis: '-0.5'
|
|
|
- },
|
|
|
- {
|
|
|
- yAxis: '-0.5'
|
|
|
- }
|
|
|
- ],
|
|
|
- [{
|
|
|
- yAxis: '-15'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '冷冻温度警戒线',
|
|
|
- yAxis: '-14.9'
|
|
|
- }
|
|
|
- ],
|
|
|
- [{
|
|
|
- yAxis: '-25'
|
|
|
- },
|
|
|
- {
|
|
|
- yAxis: '-25.1'
|
|
|
- }
|
|
|
- ],
|
|
|
- // -27.5这条只用来做下方的提示文本
|
|
|
- [{
|
|
|
- name: '冷冻温度警戒线',
|
|
|
- yAxis: '-27.5'
|
|
|
- },
|
|
|
- {
|
|
|
- yAxis: '-27.5'
|
|
|
- }
|
|
|
- ]
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- // count = 0;
|
|
|
- for (let j = 0; j < this.dataMerge.length; j++) {
|
|
|
- if (boxForm.name == this.dataMerge[j].measuringPointName) {
|
|
|
- e = this.dataMerge[j].hisDate;
|
|
|
- f = this.dataMerge[j].temperature;
|
|
|
- boxForm.data.push([e, f]);
|
|
|
- }
|
|
|
- }
|
|
|
- this.option.series.push(boxForm);
|
|
|
- this.option.legend.data.push(boxForm.name);
|
|
|
+ }
|
|
|
+ // 如果车辆温度数组为空，则其它数组前移一位
|
|
|
+ for (let i = 1; ;) {
|
|
|
+ if (this.option.series[0].data.length === 0) {
|
|
|
+ for (let j = 0; j < this.option.series.length - i; j++) {
|
|
|
+ this.option.series[j] = this.option.series[j + 1]
|
|
|
+ this.option.legend.data[j] = this.option.legend.data[j + 1]
|
|
|
}
|
|
|
+ this.option.series[this.option.series.length - i] = ''
|
|
|
+ this.option.legend.data[this.option.series.length - i++] = ''
|
|
|
}
|
|
|
- //如果车辆温度数组为空，则其它数组前移一位
|
|
|
- for (let i = 1;;) {
|
|
|
- if (this.option.series[0].data.length == 0) {
|
|
|
- for (let j = 0; j < this.option.series.length - i; j++) {
|
|
|
- this.option.series[j] = this.option.series[j + 1];
|
|
|
- this.option.legend.data[j] = this.option.legend.data[j + 1];
|
|
|
- }
|
|
|
- this.option.series[this.option.series.length - i] = '';
|
|
|
- this.option.legend.data[this.option.series.length - i++] = '';
|
|
|
- }
|
|
|
- if (this.option.series[0].data.length != 0) {
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (this.option.series[0].data.length !== 0) {
|
|
|
+ break
|
|
|
}
|
|
|
- this.windowSize();
|
|
|
- //对基础数据进行赋值
|
|
|
- this.basicData.billCode = this.carMessage.billCode;
|
|
|
- this.basicData.plateNumber = this.carMessage.plateNumber;
|
|
|
- this.basicData.startTime = this.xData[0];
|
|
|
- this.basicData.endTime = this.xData[this.xData.length - 1];
|
|
|
- //基本地图加载
|
|
|
- this.loadMap(path);
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- this.handleGeocodeRepo(this.carMessage);
|
|
|
- },
|
|
|
- //地图初始化
|
|
|
- initMap() {
|
|
|
- AMapLoader.load({
|
|
|
- //申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- key: 'f953210b2d5276ffbf5a2bc01ef80f55',
|
|
|
- //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- version: '2.0',
|
|
|
- //需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
- plugins: ['']
|
|
|
- })
|
|
|
- .then(AMap => {
|
|
|
- this.map = new AMap.Map('container', {
|
|
|
- //设置地图容器id
|
|
|
- //是否为3D地图模式
|
|
|
- viewMode: '3D',
|
|
|
- //初始化地图级别
|
|
|
- zoom: 13,
|
|
|
- //初始化地图中心点位置
|
|
|
- center: [112.976376, 28.195318]
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e)
|
|
|
- })
|
|
|
- },
|
|
|
- //基本地图加载
|
|
|
- loadMap(path) {
|
|
|
- var map, route;
|
|
|
- map = new AMap.Map("container", {
|
|
|
- resizeEnable: true
|
|
|
- });
|
|
|
- map.plugin("AMap.DragRoute", function () {
|
|
|
- //构造拖拽导航类
|
|
|
- route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE);
|
|
|
- //查询导航路径并开启拖拽导航
|
|
|
- route.search();
|
|
|
- });
|
|
|
- },
|
|
|
- //图表属性赋值
|
|
|
- initEcharts() {
|
|
|
- this.option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- x: 30,
|
|
|
- y: 30,
|
|
|
- x2: 20,
|
|
|
- y2: 18,
|
|
|
- borderWidth: 1,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- //保存图
|
|
|
- // show: true,
|
|
|
- // feature: {
|
|
|
- // saveAsImage: {}
|
|
|
- // }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: this.xData
|
|
|
- },
|
|
|
- //图例
|
|
|
- legend: {
|
|
|
- data: [],
|
|
|
- // bottom: "0%"
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- name: '温度',
|
|
|
- // Y轴最大值
|
|
|
- max: 10,
|
|
|
- // Y轴最大值
|
|
|
- min: -30,
|
|
|
- splitNumber: 2,
|
|
|
- // 最小刻度间隔
|
|
|
- minInterval: 2,
|
|
|
- // 最大刻度间隔
|
|
|
- maxInterval: 5,
|
|
|
- // 间隔值
|
|
|
- interval: 2,
|
|
|
- scale: true
|
|
|
- },
|
|
|
- //加上dataZoom可实现缩放
|
|
|
- dataZoom: [{
|
|
|
- //x轴
|
|
|
- type: 'slider',
|
|
|
- xAxisIndex: 0,
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- //x轴
|
|
|
- type: 'inside',
|
|
|
- xAxisIndex: 0,
|
|
|
- /**
|
|
|
- * 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。
|
|
|
- * 'shift'：表示按住 shift和鼠标滚轮能触发缩放。
|
|
|
- * 'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
|
|
|
- */
|
|
|
- zoomOnMouseWheel: 'true',
|
|
|
- },
|
|
|
- ],
|
|
|
- /**
|
|
|
- * series中的参数：
|
|
|
- * smooth：是否曲线，showSymbol：是否显示数据和数据点
|
|
|
- */
|
|
|
- series: [],
|
|
|
+ this.windowSize()
|
|
|
+ // 对基础数据进行赋值
|
|
|
+ this.basicData.billCode = this.carMessage.billCode
|
|
|
+ this.basicData.plateNumber = this.carMessage.plateNumber
|
|
|
+ this.basicData.startTime = this.xData[0]
|
|
|
+ this.basicData.endTime = this.xData[this.xData.length - 1]
|
|
|
+ // 基本地图加载
|
|
|
+ this.loadMap(path)
|
|
|
}
|
|
|
- },
|
|
|
- //渲染图表
|
|
|
- windowSize() {
|
|
|
- this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
- this.myChart.setOption(this.option);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- this.myChart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- //计算各值
|
|
|
- calculate(array) {
|
|
|
- //数组中的温度湿度的字符串转成浮点
|
|
|
- for (let i = 0; i < array.length; i++) {
|
|
|
- array[i].temperature = parseFloat(array[i].temperature);
|
|
|
- array[i].humidity = parseFloat(array[i].humidity);
|
|
|
- }
|
|
|
- //定义初始值
|
|
|
- this.maxT = array[0].temperature;
|
|
|
- this.maxH = array[0].humidity;
|
|
|
- this.minT = array[0].temperature;
|
|
|
- this.minH = array[0].humidity;
|
|
|
- this.aggT = 0;
|
|
|
- this.aggH = 0;
|
|
|
- let x = [];
|
|
|
- for (let i = 0; i < array.length; i++) {
|
|
|
- //对X轴的时间进行赋值
|
|
|
- x[i] = array[i].hisDate;
|
|
|
- //对Y轴的温度进行赋值
|
|
|
- // this.temperatureData[i] = array[i].temperature;
|
|
|
- //温度最大值
|
|
|
- if (array[i].temperature > this.maxT) {
|
|
|
- this.maxT = array[i].temperature;
|
|
|
- }
|
|
|
- //湿度最大值
|
|
|
- if (array[i].humidity > this.maxH) {
|
|
|
- this.maxH = array[i].humidity;
|
|
|
- }
|
|
|
- //温度最小值
|
|
|
- if (array[i].temperature < this.minT) {
|
|
|
- this.minT = array[i].temperature
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event)
|
|
|
+ this.handleGeocodeRepo(this.carMessage)
|
|
|
+ },
|
|
|
+ // 地图初始化
|
|
|
+ initMap() {
|
|
|
+ AMapLoader.load({
|
|
|
+ // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ key: 'f953210b2d5276ffbf5a2bc01ef80f55',
|
|
|
+ // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ version: '2.0',
|
|
|
+ // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ plugins: ['']
|
|
|
+ })
|
|
|
+ .then(AMap => {
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ // 设置地图容器id
|
|
|
+ // 是否为3D地图模式
|
|
|
+ viewMode: '3D',
|
|
|
+ // 初始化地图级别
|
|
|
+ zoom: 13,
|
|
|
+ // 初始化地图中心点位置
|
|
|
+ center: [112.976376, 28.195318]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 基本地图加载
|
|
|
+ loadMap(path) {
|
|
|
+ var map, route
|
|
|
+ map = new AMap.Map('container', {
|
|
|
+ resizeEnable: true
|
|
|
+ })
|
|
|
+ map.plugin('AMap.DragRoute', function() {
|
|
|
+ // 构造拖拽导航类
|
|
|
+ route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
|
|
|
+ // 查询导航路径并开启拖拽导航
|
|
|
+ route.search()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 图表属性赋值
|
|
|
+ initEcharts() {
|
|
|
+ this.option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
}
|
|
|
- //湿度最小值
|
|
|
- if (array[i].humidity < this.minH) {
|
|
|
- this.minH = array[i].humidity
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ x: 30,
|
|
|
+ y: 30,
|
|
|
+ x2: 20,
|
|
|
+ y2: 18,
|
|
|
+ borderWidth: 1
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ // 保存图
|
|
|
+ // show: true,
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: {}
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.xData
|
|
|
+ },
|
|
|
+ // 图例
|
|
|
+ legend: {
|
|
|
+ data: []
|
|
|
+ // bottom: "0%"
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '温度',
|
|
|
+ // Y轴最大值
|
|
|
+ max: 10,
|
|
|
+ // Y轴最大值
|
|
|
+ min: -30,
|
|
|
+ splitNumber: 2,
|
|
|
+ // 最小刻度间隔
|
|
|
+ minInterval: 2,
|
|
|
+ // 最大刻度间隔
|
|
|
+ maxInterval: 5,
|
|
|
+ // 间隔值
|
|
|
+ interval: 2,
|
|
|
+ scale: true
|
|
|
+ },
|
|
|
+ // 加上dataZoom可实现缩放
|
|
|
+ dataZoom: [{
|
|
|
+ // x轴
|
|
|
+ type: 'slider',
|
|
|
+ xAxisIndex: 0
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // x轴
|
|
|
+ type: 'inside',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ /**
|
|
|
+ * 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。
|
|
|
+ * 'shift'：表示按住 shift和鼠标滚轮能触发缩放。
|
|
|
+ * 'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
|
|
|
+ */
|
|
|
+ zoomOnMouseWheel: 'true'
|
|
|
}
|
|
|
- //温湿度合计值
|
|
|
- this.aggT += array[i].temperature;
|
|
|
- this.aggH += array[i].humidity;
|
|
|
+ ],
|
|
|
+ /**
|
|
|
+ * series中的参数：
|
|
|
+ * smooth：是否曲线，showSymbol：是否显示数据和数据点
|
|
|
+ */
|
|
|
+ series: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 渲染图表
|
|
|
+ windowSize() {
|
|
|
+ this.myChart = echarts.init(document.getElementById('mychart'))
|
|
|
+ this.myChart.setOption(this.option)
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this.myChart.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 计算各值
|
|
|
+ calculate(array) {
|
|
|
+ // 数组中的温度湿度的字符串转成浮点
|
|
|
+ for (let i = 0; i < array.length; i++) {
|
|
|
+ array[i].temperature = parseFloat(array[i].temperature)
|
|
|
+ array[i].humidity = parseFloat(array[i].humidity)
|
|
|
+ }
|
|
|
+ // 定义初始值
|
|
|
+ this.maxT = array[0].temperature
|
|
|
+ this.maxH = array[0].humidity
|
|
|
+ this.minT = array[0].temperature
|
|
|
+ this.minH = array[0].humidity
|
|
|
+ this.aggT = 0
|
|
|
+ this.aggH = 0
|
|
|
+ let x = []
|
|
|
+ for (let i = 0; i < array.length; i++) {
|
|
|
+ // 对X轴的时间进行赋值
|
|
|
+ x[i] = array[i].hisDate
|
|
|
+ //对Y轴的温度进行赋值
|
|
|
+ // this.temperatureData[i] = array[i].temperature;
|
|
|
+ //温度最大值
|
|
|
+ if (array[i].temperature > this.maxT) {
|
|
|
+ this.maxT = array[i].temperature
|
|
|
}
|
|
|
- //x数组去重
|
|
|
- x = Array.from(new Set(x));
|
|
|
- let xSort = [];
|
|
|
- for (let i = 0; i < x.length; i++) {
|
|
|
- xSort[i] = new Date(x[i]);
|
|
|
+ //湿度最大值
|
|
|
+ if (array[i].humidity > this.maxH) {
|
|
|
+ this.maxH = array[i].humidity
|
|
|
}
|
|
|
- xSort.sort(function (a, b) {
|
|
|
- return a - b;
|
|
|
- })
|
|
|
- for (let i = 0; i < xSort.length; i++) {
|
|
|
- x[i] = this.formatDateTime(xSort[i], 'yyyy-MM-dd HH:mm:ss');
|
|
|
+ //温度最小值
|
|
|
+ if (array[i].temperature < this.minT) {
|
|
|
+ this.minT = array[i].temperature
|
|
|
}
|
|
|
- this.xData = x;
|
|
|
- //温湿度平均值
|
|
|
- this.avgT = this.aggT / array.length;
|
|
|
- this.avgH = this.aggH / array.length;
|
|
|
- },
|
|
|
- //对订单温湿度列表进行赋值
|
|
|
- assignmentTable1(array) {
|
|
|
- this.modelData1[0].maxTemperature = this.maxT;
|
|
|
- this.modelData1[0].maxHumidity = this.maxH;
|
|
|
- this.modelData1[0].minTemperature = this.minT;
|
|
|
- this.modelData1[0].minHumidity = this.minH;
|
|
|
- this.modelData1[0].avgTemperature = this.avgT.toFixed(2);
|
|
|
- this.modelData1[0].avgHumidity = this.avgH.toFixed(1);
|
|
|
- this.modelData1[0].startTime = array[0].hisDate;
|
|
|
- this.modelData1[0].endTime = array[array.length - 1].hisDate;
|
|
|
- this.tableData1 = this.modelData1;
|
|
|
- },
|
|
|
- merge(data) {
|
|
|
- historyApi.getMerge(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.dataMerge = res.data;
|
|
|
- console.log(this.dataMerge, 'dataMerge')
|
|
|
- if (res.data == undefined || res.data == null || res.data == '') {
|
|
|
- this.$modal.msgError("温度&经纬度数据为空！");
|
|
|
- return;
|
|
|
- }
|
|
|
- // 获取分组数据
|
|
|
- this.handleGeocodeRepo(this.carMessage);
|
|
|
+ //湿度最小值
|
|
|
+ if (array[i].humidity < this.minH) {
|
|
|
+ this.minH = array[i].humidity
|
|
|
+ }
|
|
|
+ //温湿度合计值
|
|
|
+ this.aggT += array[i].temperature
|
|
|
+ this.aggH += array[i].humidity
|
|
|
+ }
|
|
|
+ //x数组去重
|
|
|
+ x = Array.from(new Set(x))
|
|
|
+ let xSort = []
|
|
|
+ for (let i = 0; i < x.length; i++) {
|
|
|
+ xSort[i] = new Date(x[i])
|
|
|
+ }
|
|
|
+ xSort.sort(function(a, b) {
|
|
|
+ return a - b
|
|
|
+ })
|
|
|
+ for (let i = 0; i < xSort.length; i++) {
|
|
|
+ x[i] = this.formatDateTime(xSort[i], 'yyyy-MM-dd HH:mm:ss')
|
|
|
+ }
|
|
|
+ this.xData = x
|
|
|
+ //温湿度平均值
|
|
|
+ this.avgT = this.aggT / array.length
|
|
|
+ this.avgH = this.aggH / array.length
|
|
|
+ },
|
|
|
+ //对订单温湿度列表进行赋值
|
|
|
+ assignmentTable1(array) {
|
|
|
+ this.modelData1[0].maxTemperature = this.maxT
|
|
|
+ this.modelData1[0].maxHumidity = this.maxH
|
|
|
+ this.modelData1[0].minTemperature = this.minT
|
|
|
+ this.modelData1[0].minHumidity = this.minH
|
|
|
+ this.modelData1[0].avgTemperature = this.avgT.toFixed(2)
|
|
|
+ this.modelData1[0].avgHumidity = this.avgH.toFixed(1)
|
|
|
+ this.modelData1[0].startTime = array[0].hisDate
|
|
|
+ this.modelData1[0].endTime = array[array.length - 1].hisDate
|
|
|
+ this.tableData1 = this.modelData1
|
|
|
+ },
|
|
|
+ merge(data) {
|
|
|
+ historyApi.getMerge(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.dataMerge = res.data
|
|
|
+ console.log(this.dataMerge, 'dataMerge')
|
|
|
+ if (res.data === undefined || res.data == null || res.data === '') {
|
|
|
+ this.$modal.msgError('温度&经纬度数据为空！')
|
|
|
+ return
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- // 表格数据分列展示
|
|
|
- listSplitting(dataCar, dataBox) {
|
|
|
- let differenceValueCar;
|
|
|
- let arr2 = [];
|
|
|
- if (dataCar != null && dataCar != '') {
|
|
|
- this.isCarData = true;
|
|
|
- for (let i = 0; i < dataCar.length; i++) {
|
|
|
- let arr3 = [];
|
|
|
- // 向上取整差值
|
|
|
- differenceValueCar = Math.ceil(dataCar[i].length / 5);
|
|
|
- for (let j = 0; j < dataCar[i].length; j++) {
|
|
|
- if (j == differenceValueCar) {
|
|
|
- for (let z = 0; z < differenceValueCar; z++) {
|
|
|
- if (j + z < dataCar[i].length) {
|
|
|
- dataCar[i][z].temperature1 = dataCar[i][j + z].temperature;
|
|
|
- dataCar[i][z].hisDate1 = dataCar[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ // 获取分组数据
|
|
|
+ this.handleGeocodeRepo(this.carMessage)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表格数据分列展示
|
|
|
+ listSplitting(dataCar, dataBox) {
|
|
|
+ let differenceValueCar
|
|
|
+ let arr2 = []
|
|
|
+ if (dataCar != null && dataCar !== '') {
|
|
|
+ this.isCarData = true
|
|
|
+ for (let i = 0; i < dataCar.length; i++) {
|
|
|
+ let arr3 = []
|
|
|
+ // 向上取整差值
|
|
|
+ differenceValueCar = Math.ceil(dataCar[i].length / 5)
|
|
|
+ for (let j = 0; j < dataCar[i].length; j++) {
|
|
|
+ if (j === differenceValueCar) {
|
|
|
+ for (let z = 0; z < differenceValueCar; z++) {
|
|
|
+ if (j + z < dataCar[i].length) {
|
|
|
+ dataCar[i][z].temperature1 = dataCar[i][j + z].temperature
|
|
|
+ dataCar[i][z].hisDate1 = dataCar[i][j + z].hisDate
|
|
|
}
|
|
|
}
|
|
|
- if (j == differenceValueCar * 2) {
|
|
|
- for (let z = 0; z < differenceValueCar; z++) {
|
|
|
- if (j + z < dataCar[i].length) {
|
|
|
- dataCar[i][z].temperature2 = dataCar[i][j + z].temperature;
|
|
|
- dataCar[i][z].hisDate2 = dataCar[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueCar * 2) {
|
|
|
+ for (let z = 0; z < differenceValueCar; z++) {
|
|
|
+ if (j + z < dataCar[i].length) {
|
|
|
+ dataCar[i][z].temperature2 = dataCar[i][j + z].temperature
|
|
|
+ dataCar[i][z].hisDate2 = dataCar[i][j + z].hisDate
|
|
|
}
|
|
|
}
|
|
|
- if (j == differenceValueCar * 3) {
|
|
|
- for (let z = 0; z < differenceValueCar; z++) {
|
|
|
- if (j + z < dataCar[i].length) {
|
|
|
- dataCar[i][z].temperature3 = dataCar[i][j + z].temperature;
|
|
|
- dataCar[i][z].hisDate3 = dataCar[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueCar * 3) {
|
|
|
+ for (let z = 0; z < differenceValueCar; z++) {
|
|
|
+ if (j + z < dataCar[i].length) {
|
|
|
+ dataCar[i][z].temperature3 = dataCar[i][j + z].temperature
|
|
|
+ dataCar[i][z].hisDate3 = dataCar[i][j + z].hisDate
|
|
|
}
|
|
|
}
|
|
|
- if (j == differenceValueCar * 4) {
|
|
|
- for (let z = 0; z < differenceValueCar; z++) {
|
|
|
- if (j + z < dataCar[i].length) {
|
|
|
- dataCar[i][z].temperature4 = dataCar[i][j + z].temperature;
|
|
|
- dataCar[i][z].hisDate4 = dataCar[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueCar * 4) {
|
|
|
+ for (let z = 0; z < differenceValueCar; z++) {
|
|
|
+ if (j + z < dataCar[i].length) {
|
|
|
+ dataCar[i][z].temperature4 = dataCar[i][j + z].temperature
|
|
|
+ dataCar[i][z].hisDate4 = dataCar[i][j + z].hisDate
|
|
|
}
|
|
|
}
|
|
|
- if (j < differenceValueCar) {
|
|
|
- arr3.push(dataCar[i][j]);
|
|
|
- console.log(arr3, 'arr3')
|
|
|
- }
|
|
|
}
|
|
|
- arr2.push(arr3);
|
|
|
- this.queryEnd(arr2[i], differenceValueCar);
|
|
|
+ if (j < differenceValueCar) {
|
|
|
+ arr3.push(dataCar[i][j])
|
|
|
+ console.log(arr3, 'arr3')
|
|
|
+ }
|
|
|
}
|
|
|
+ arr2.push(arr3)
|
|
|
+ this.queryEnd(arr2[i], differenceValueCar)
|
|
|
}
|
|
|
- this.dataCar = arr2;
|
|
|
- let differenceValueBox;
|
|
|
- let arr = [];
|
|
|
- if (dataBox != null && dataBox != '') {
|
|
|
- this.isBoxData = true;
|
|
|
- for (let i = 0; i < dataBox.length; i++) {
|
|
|
- let arr1 = [];
|
|
|
- // 向上取整差值
|
|
|
- differenceValueBox = Math.ceil(dataBox[i].length / 5);
|
|
|
- for (let j = 0; j < dataBox[i].length; j++) {
|
|
|
- if (j == differenceValueBox) {
|
|
|
- for (let z = 0; z < differenceValueBox; z++) {
|
|
|
- dataBox[i][z].temperature1 = dataBox[i][j + z].temperature;
|
|
|
- dataBox[i][z].hisDate1 = dataBox[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ this.dataCar = arr2
|
|
|
+ let differenceValueBox
|
|
|
+ let arr = []
|
|
|
+ if (dataBox != null && dataBox !== '') {
|
|
|
+ this.isBoxData = true
|
|
|
+ for (let i = 0; i < dataBox.length; i++) {
|
|
|
+ let arr1 = []
|
|
|
+ // 向上取整差值
|
|
|
+ differenceValueBox = Math.ceil(dataBox[i].length / 5)
|
|
|
+ for (let j = 0; j < dataBox[i].length; j++) {
|
|
|
+ if (j === differenceValueBox) {
|
|
|
+ for (let z = 0; z < differenceValueBox; z++) {
|
|
|
+ dataBox[i][z].temperature1 = dataBox[i][j + z].temperature
|
|
|
+ dataBox[i][z].hisDate1 = dataBox[i][j + z].hisDate
|
|
|
}
|
|
|
- if (j == differenceValueBox * 2) {
|
|
|
- for (let z = 0; z < differenceValueBox; z++) {
|
|
|
- dataBox[i][z].temperature2 = dataBox[i][j + z].temperature;
|
|
|
- dataBox[i][z].hisDate2 = dataBox[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueBox * 2) {
|
|
|
+ for (let z = 0; z < differenceValueBox; z++) {
|
|
|
+ dataBox[i][z].temperature2 = dataBox[i][j + z].temperature
|
|
|
+ dataBox[i][z].hisDate2 = dataBox[i][j + z].hisDate
|
|
|
}
|
|
|
- if (j == differenceValueBox * 3) {
|
|
|
- for (let z = 0; z < differenceValueBox; z++) {
|
|
|
- dataBox[i][z].temperature3 = dataBox[i][j + z].temperature;
|
|
|
- dataBox[i][z].hisDate3 = dataBox[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueBox * 3) {
|
|
|
+ for (let z = 0; z < differenceValueBox; z++) {
|
|
|
+ dataBox[i][z].temperature3 = dataBox[i][j + z].temperature
|
|
|
+ dataBox[i][z].hisDate3 = dataBox[i][j + z].hisDate
|
|
|
}
|
|
|
- if (j == differenceValueBox * 4) {
|
|
|
- for (let z = 0; z < differenceValueBox; z++) {
|
|
|
- if (j + z < dataBox[i].length) {
|
|
|
- dataBox[i][z].temperature4 = dataBox[i][j + z].temperature;
|
|
|
- dataBox[i][z].hisDate4 = dataBox[i][j + z].hisDate;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (j === differenceValueBox * 4) {
|
|
|
+ for (let z = 0; z < differenceValueBox; z++) {
|
|
|
+ if (j + z < dataBox[i].length) {
|
|
|
+ dataBox[i][z].temperature4 = dataBox[i][j + z].temperature
|
|
|
+ dataBox[i][z].hisDate4 = dataBox[i][j + z].hisDate
|
|
|
}
|
|
|
}
|
|
|
- if (j < differenceValueBox) {
|
|
|
- arr1.push(dataBox[i][j]);
|
|
|
- }
|
|
|
}
|
|
|
- arr.push(arr1);
|
|
|
- console.log(arr, 'arr')
|
|
|
- this.queryEnd(arr[i], differenceValueBox);
|
|
|
- }
|
|
|
- }
|
|
|
- this.dataBox = arr;
|
|
|
- },
|
|
|
- // 查找结束时间
|
|
|
- queryEnd(arr, differenceValue) {
|
|
|
- for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
- if (arr[j].hisDate4 != null && arr[j].hisDate4 != '' && arr[j].hisDate4 != undefined) {
|
|
|
- arr[differenceValue - 1].end = arr[j].hisDate4;
|
|
|
- return;
|
|
|
+ if (j < differenceValueBox) {
|
|
|
+ arr1.push(dataBox[i][j])
|
|
|
+ }
|
|
|
}
|
|
|
+ arr.push(arr1)
|
|
|
+ console.log(arr, 'arr')
|
|
|
+ this.queryEnd(arr[i], differenceValueBox)
|
|
|
}
|
|
|
- for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
- if (arr[j].hisDate3 != null && arr[j].hisDate3 != '' && arr[j].hisDate3 != undefined) {
|
|
|
- arr[differenceValue - 1].end = arr[j].hisDate3;
|
|
|
- return;
|
|
|
- }
|
|
|
+ }
|
|
|
+ this.dataBox = arr
|
|
|
+ },
|
|
|
+ // 查找结束时间
|
|
|
+ queryEnd(arr, differenceValue) {
|
|
|
+ for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
+ if (arr[j].hisDate4 != null && arr[j].hisDate4 !== '' && arr[j].hisDate4 !== undefined) {
|
|
|
+ arr[differenceValue - 1].end = arr[j].hisDate4
|
|
|
+ return
|
|
|
}
|
|
|
- for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
- if (arr[j].hisDate2 != null && arr[j].hisDate2 != '' && arr[j].hisDate2 != undefined) {
|
|
|
- arr[differenceValue - 1].end = arr[j].hisDate2;
|
|
|
- return;
|
|
|
- }
|
|
|
+ }
|
|
|
+ for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
+ if (arr[j].hisDate3 != null && arr[j].hisDate3 !== '' && arr[j].hisDate3 !== undefined) {
|
|
|
+ arr[differenceValue - 1].end = arr[j].hisDate3
|
|
|
+ return
|
|
|
}
|
|
|
- for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
- if (arr[j].hisDate1 != null && arr[j].hisDate1 != '' && arr[j].hisDate1 != undefined) {
|
|
|
- arr[differenceValue - 1].end = arr[j].hisDate1;
|
|
|
- return;
|
|
|
- }
|
|
|
+ }
|
|
|
+ for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
+ if (arr[j].hisDate2 != null && arr[j].hisDate2 !== '' && arr[j].hisDate2 !== undefined) {
|
|
|
+ arr[differenceValue - 1].end = arr[j].hisDate2
|
|
|
+ return
|
|
|
}
|
|
|
- for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
- if (arr[j].hisDate != null && arr[j].hisDate != '' && arr[j].hisDate != undefined) {
|
|
|
- arr[differenceValue - 1].end = arr[j].hisDate;
|
|
|
- return;
|
|
|
- }
|
|
|
+ }
|
|
|
+ for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
+ if (arr[j].hisDate1 != null && arr[j].hisDate1 !== '' && arr[j].hisDate1 !== undefined) {
|
|
|
+ arr[differenceValue - 1].end = arr[j].hisDate1
|
|
|
+ return
|
|
|
}
|
|
|
- },
|
|
|
- //获取当前时间
|
|
|
- getCurrentTime() {
|
|
|
- let date = new Date();
|
|
|
- return date;
|
|
|
- },
|
|
|
- //日期名称格式化
|
|
|
- formatDateTime(date, format) {
|
|
|
- const o = {
|
|
|
- 'M+': date.getMonth() + 1, // 月份
|
|
|
- 'd+': date.getDate(), // 日
|
|
|
- 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
|
|
|
- 'H+': date.getHours(), // 小时
|
|
|
- 'm+': date.getMinutes(), // 分
|
|
|
- 's+': date.getSeconds(), // 秒
|
|
|
- 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
- S: date.getMilliseconds(), // 毫秒
|
|
|
- a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
|
|
|
- A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
|
|
|
- };
|
|
|
- if (/(y+)/.test(format)) {
|
|
|
- format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+ for (let j = differenceValue - 1; j >= 0; j--) {
|
|
|
+ if (arr[j].hisDate != null && arr[j].hisDate !== '' && arr[j].hisDate !== undefined) {
|
|
|
+ arr[differenceValue - 1].end = arr[j].hisDate
|
|
|
+ return
|
|
|
}
|
|
|
- for (let k in o) {
|
|
|
- if (new RegExp('(' + k + ')').test(format)) {
|
|
|
- format = format.replace(
|
|
|
- RegExp.$1,
|
|
|
- RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
|
|
- );
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //日期名称格式化
|
|
|
+ formatDateTime(date, format) {
|
|
|
+ const o = {
|
|
|
+ 'M+': date.getMonth() + 1, // 月份
|
|
|
+ 'd+': date.getDate(), // 日
|
|
|
+ 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
|
|
|
+ 'H+': date.getHours(), // 小时
|
|
|
+ 'm+': date.getMinutes(), // 分
|
|
|
+ 's+': date.getSeconds(), // 秒
|
|
|
+ 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
+ S: date.getMilliseconds(), // 毫秒
|
|
|
+ a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
|
|
|
+ A: date.getHours() < 12 ? 'AM' : 'PM' // AM/PM
|
|
|
+ }
|
|
|
+ if (/(y+)/.test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
+ }
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(format)) {
|
|
|
+ format = format.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
|
|
+ )
|
|
|
}
|
|
|
- return format;
|
|
|
- },
|
|
|
+ }
|
|
|
+ return format
|
|
|
+ },
|
|
|
+ // 判读属于配送单跟踪还是订单跟踪
|
|
|
+ checkout() {
|
|
|
+ if (!(this.carMessage.customerName === undefined || this.carMessage.customerName === null || this.carMessage.customerName === '')) {
|
|
|
+ this.bill = true
|
|
|
+ }
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- #container {
|
|
|
- padding: 100px;
|
|
|
- margin: 10px;
|
|
|
- width: 1000;
|
|
|
- height: 800px;
|
|
|
- }
|
|
|
+#container {
|
|
|
+ padding: 100px;
|
|
|
+ margin: 10px;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
|
|
|
- .OutCss {
|
|
|
- float: right;
|
|
|
- }
|
|
|
+.OutCss {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
|
|
|
- #body {
|
|
|
- /* padding: 0px 200px 0px 200px; */
|
|
|
- margin: 0 auto;
|
|
|
+#body {
|
|
|
+ /* padding: 0px 200px 0px 200px; */
|
|
|
+ margin: 0 auto;
|
|
|
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- @media print {
|
|
|
- @page {
|
|
|
- margin: 0;
|
|
|
- size: portrait;
|
|
|
- /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
|
|
|
- }
|
|
|
+@media print {
|
|
|
+ @page {
|
|
|
+ margin: 0;
|
|
|
+ size: portrait;
|
|
|
+ /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
|
|
|
+ }
|
|
|
|
|
|
- #body {
|
|
|
- /* margin: 20cm; */
|
|
|
- margin: 0 auto;
|
|
|
- /* 打印时缩放，防止页面溢出 */
|
|
|
- zoom: 0.4;
|
|
|
- }
|
|
|
+ #body {
|
|
|
+ /* margin: 20cm; */
|
|
|
+ margin: 0 auto;
|
|
|
+ /* 打印时缩放，防止页面溢出 */
|
|
|
+ zoom: 0.4;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
</style>
|
001295