zx_bms_uni/pages/mileage/mileage.vue

<template>
    <!-- pages/mileage/mileage.wxml -->

    <view class="container">
        <image src="/static/resource/images/BG.png" class="top-background"></image>
        <view class="top-box flex-row flex-around">
            <view style="visibility: hidden" class="stat-box">
                <view class="stat-value">
                    {{ tools.toFixed(total_mil, 0) }}
                    <text class="stat-tip">KM</text>
                </view>
                <view class="stat-name">累计里程</view>
            </view>
            <view style="visibility: hidden" class="stat-box">
                <view class="stat-value">
                    {{ runing_day }}
                    <text class="stat-tip">天</text>
                </view>
                <view class="stat-name">陪伴时间</view>
            </view>
        </view>
        <view class="name-box flex-row flex-start">
            <view class="name-i"></view>
            <view class="name-text">{{ name }}</view>
        </view>
        <view class="mil-chart">
            <!-- <ec-canvas id="mychart-dom-mil-bar" canvas-id="mychart-mil-bar" class="mil-chart" :ec="ecMilBar"></ec-canvas> -->
        </view>
        <view class="info-box">
            <view class="info-line flex-row flex-around">
                <view class="info-item">
                    <view class="flex-row">
                        <image src="/static/resource/images/t1.png" class="info-img"></image>
                        <view class="info-value">
                            {{ day_mil }}
                        </view>
                        <view class="info-tip">KM</view>
                    </view>
                    <view class="info-name">行驶里程</view>
                </view>
                <view class="info-item">
                    <view class="flex-row">
                        <image src="/static/resource/images/t2.png" class="info-img"></image>
                        <view class="info-value">
                            {{ tools.formatSeconds(runing_time)[0] }}
                        </view>
                        <view class="info-tip">{{ tools.formatSeconds(runing_time)[2] }}</view>
                        <view v-if="tools.formatSeconds(runing_time).length > 3" class="info-value">
                            {{ tools.formatSeconds(runing_time)[3] }}
                        </view>
                        <view v-if="tools.formatSeconds(runing_time).length > 3" class="info-tip">{{ tools.formatSeconds(runing_time)[5] }}</view>
                    </view>
                    <view class="info-name">行驶时间</view>
                </view>
            </view>
            <view class="info-line flex-row flex-around">
                <view class="info-item">
                    <view class="flex-row">
                        <image src="/static/resource/images/t3.png" class="info-img"></image>
                        <view class="info-value">
                            {{ runing_time == 0 ? 0 : tools.toFixed((day_mil * 3600) / runing_time, 2) }}
                        </view>
                        <view class="info-tip">KM/H</view>
                    </view>
                    <view class="info-name">平均速度</view>
                </view>
                <view class="info-item">
                    <view class="flex-row">
                        <image src="/static/resource/images/t4.png" class="info-img"></image>
                        <view class="info-value">
                            {{ max_speed }}
                        </view>
                        <view class="info-tip">KM/H</view>
                    </view>
                    <view class="info-name">最高速度</view>
                </view>
            </view>
        </view>
        <view style="height: 100rpx"></view>
        <view class="bottom-box flex-row flex-around">
            <view class="bottom-item" @tap="selectType" :data-type="0">
                <view class="bottom-name">天</view>
                <view :class="'bottom-tip ' + (type == 0 ? 'bottom-select' : '')"></view>
            </view>
            <view class="bottom-item" @tap="selectType" :data-type="1">
                <view class="bottom-name">周</view>
                <view :class="'bottom-tip ' + (type == 1 ? 'bottom-select' : '')"></view>
            </view>
            <view class="bottom-item" @tap="selectType" :data-type="2">
                <view class="bottom-name">月</view>
                <view :class="'bottom-tip ' + (type == 2 ? 'bottom-select' : '')"></view>
            </view>
        </view>
        <!--view class="text-item flex-row flex-between">
    <view class="item-titie">IMEI</view>
    <view class="item-value">{{ macid }}</view>
  </view>
  <view class="text-item flex-row flex-between">
    <view class="item-titie">{{ name }}</view>
    <view class="item-value">{{ name ? value+'km':'' }}</view>
  </view-->
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
// import ecCanvas from './ec-canvas';
// pages/mileage/mileage.js
var config = require('../../common/config.js');
var http = require('../../common/http.js');
var common = require('../../common/common.js');
var storage = require('../../common/storage.js');
// import * as echarts from 'ec-canvas/echarts';
export default {
    components: {
        // ecCanvas
    },
    data() {
        return {
            macid: '',
            type: 0,
            milList: [],
            name: '',
            day_mil: 0,
            runing_time: 0,
            max_speed: 0,
            runing_day: 0,
            total_mil: 0,
            ecMilBar: {
                lazyLoad: true
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (!options.macid) {
            uni.navigateBack({
                delta: 1
            });
        }
        this.setData({
            macid: options.macid
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.loadMileage();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        loadMileage() {
            common.loading();
            http.postApi(
                config.API_BATTERY_MILLIST,
                {
                    macid: this.macid,
                    type: this.type,
                    page: 1,
                    size: 8
                },
                (resp) => {
                    if (resp.data.code === 200) {
                        uni.hideLoading();
                        this.setData({
                            milList: resp.data.data.list,
                            runing_day: resp.data.data.runing_day,
                            total_mil: resp.data.data.total_mil,
                            name: resp.data.data.list.length > 0 ? this.timeName(resp.data.data.list[0].time) : '',
                            day_mil: resp.data.data.list.length > 0 ? parseFloat(resp.data.data.list[0].day_mil) : 0,
                            runing_time: resp.data.data.list.length > 0 ? parseInt(resp.data.data.list[0].runing_time) : 0,
                            max_speed: resp.data.data.list.length > 0 ? parseFloat(resp.data.data.list[0].max_speed) : 0
                        });
                        this.initMilBar();
                    } else {
                        common.simpleToast(resp.data.msg);
                    }
                }
            );
        },

        initMilBar() {
            // this.milBarComponent = this.zpSelectComponent('#mychart-dom-mil-bar');
            // this.milBarComponent.init((canvas, width, height) => {
            //     const chart = echarts.init(canvas, null, {
            //         width: width,
            //         height: height
            //     });
            //     this.milBarChart = chart;
            //     this.milBarChart.on('click', (params) => {
            //         this.setData({
            //             name: this.timeName(this.milList[this.milList.length - params.dataIndex - 1].time),
            //             day_mil: parseFloat(this.milList[this.milList.length - params.dataIndex - 1].day_mil),
            //             runing_time: parseInt(this.milList[this.milList.length - params.dataIndex - 1].runing_time),
            //             max_speed: parseFloat(this.milList[this.milList.length - params.dataIndex - 1].max_speed)
            //         });
            //     });
            //     this.setMilBarOptions();
            //     return chart;
            // });
        },

        monthName(m) {
            var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
            return months[parseInt(m) - 1];
        },

        timeName(time) {
            switch (this.type) {
                case 0:
                    return common.DateFormat(new Date(time * 1000), 'MM-dd');
                case 1:
                    return common.DateFormat(new Date(time * 1000), 'MM-dd') + '~' + common.DateFormat(new Date((parseInt(time) + 604800) * 1000), 'MM-dd');
                case 2:
                    return this.monthName(common.DateFormat(new Date(time * 1000), 'M'));
            }
        },

        timeLabel(time) {
            switch (this.type) {
                case 0:
                    return common.DateFormat(new Date(time * 1000), 'dd');
                case 1:
                    return common.DateFormat(new Date(time * 1000), 'dd') + '~' + common.DateFormat(new Date((parseInt(time) + 604800) * 1000), 'dd');
                case 2:
                    return this.monthName(common.DateFormat(new Date(time * 1000), 'M'));
            }
        },

        setMilBarOptions() {
            this.milBarChart.setOption({
                color: ['#07C58A'],
                grid: {
                    top: '5%',
                    left: '12%',
                    right: '5%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontStyle: 'italic',
                        fontWeight: 500,
                        fontFamily: 'DIN',
                        fontSize: 10
                    },
                    data: this.milList.map((p) => this.timeLabel(p.time)).reverse()
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 3,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        //formatter: '{value}KM'
                        formatter: function (value, index) {
                            if (index % 2 == 0) {
                                if (value == 0) {
                                    return '0';
                                } else {
                                    return value.toString() + 'KM';
                                }
                            }
                            return '';
                        },
                        fontStyle: 'italic',
                        fontWeight: 500,
                        fontFamily: 'DIN',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        data: this.milList.map((p) => parseFloat(p.day_mil)).reverse(),
                        type: 'bar',
                        itemStyle: {
                            color: '#07C58A',
                            barBorderRadius: [10, 10, 0, 0]
                        },
                        barWidth: '50%',
                        barMaxWidth: '20'
                    }
                ]
                /*xAxis: {
          type: 'value',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        },
        grid: {
          top: 0,
          left: '5%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: this.data.milList.map(p => common.DateFormat(new Date(p.time * 1000), 'yyyy-MM-dd'))
        },
        series: [{
          name: '',
          smooth: true,
          type: 'bar',
          label: {
            normal: {
              show: true,
              fontSize: 10,
              position: 'insideLeft',
              formatter: (obj) => {
                var name = obj.name
                if (name.length > 6) name = name.slice(0, 5) + '..'
                var value = obj.value
                if (value >= 10000) value = (value / 10000).toFixed(1) + '万'
                return name + ':' + value
              } //'{b}: {c}'
            }
          },
          itemStyle: {
            color: '#409EFF'
          },
          data: this.data.milList.map(p => parseFloat(p.day_mil)),
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]*/
            });
        },

        selectType(e) {
            if (e.currentTarget.dataset.type != this.type) {
                this.setData({
                    type: e.currentTarget.dataset.type
                });
                this.loadMileage();
            }
        }
    }
};
</script>
<style>
@import './mileage.css';
</style>