whycwx
2021-07-01 dbe4b08d5ee9128668418cc8ab946bb4167a4ec7
测试页面
1个文件已添加
1个文件已修改
226 ■■■■■ 已修改文件
src/pages/wxTest.vue 219 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/routes.js 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/wxTest.vue
New file
@@ -0,0 +1,219 @@
<template>
    <flex-layout>
        <div slot="header">
            <div class="table-layout filter-box-table">
                <div class="table-row">
                    <div class="table-cell text-right">操作记录时间段:</div>
                    <div class="table-cell">
                        <el-date-picker v-model="valueTime1" size="small" class="time_box" :picker-options="pickerOptions0"
                                        type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                        至
                        <el-date-picker v-model="valueTime2" size="small" class="time_box" :picker-options="pickerOptions1"
                                        type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                        <el-button type="primary"  size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表单 -->
        <div class="flex-page-content">
            <div class="eac" ref="eac1" v-loading="loading1" element-loading-background="rgba(0, 0, 0, 0.1)"></div>
            <div class="eac" ref="eac2" v-loading="loading2" element-loading-background="rgba(0, 0, 0, 0.1)"></div>
        </div>
        <!-- 底部分页 -->
        <div class="flex-page-footer" slot="footer">
        </div>
    </flex-layout>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        chart:{},
        data() {
            let thieTime = new Date().format('yyyy-MM-dd');
            let newTime = new Date(new Date(thieTime).getTime() + 1 * 24 * 3600 * 1000).format('yyyy-MM-dd');
            let oldTime = new Date(new Date(thieTime).getTime() - 7 * 24 * 3600 * 1000).format('yyyy-MM-dd');
            return {
                loading1:false,
                loading2:false,
                /* 日期 */
                valueTime1:"2020-09-01", //oldTime,
                valueTime2:"2020-09-10",//newTime,
                pickerOptions0: {
                    disabledDate: (time) => {
                        let vm = this;
                        if (vm.valueTime2) {
                            return new Date(time.getTime()) > new Date(vm.valueTime2);
                        } else {
                            // return time.getTime() > Date.now();
                        }
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return new Date(time.getTime() + 24 * 60 * 60 * 1000) < new Date(this.valueTime1);
                    }
                },
            };
        },
        mounted() {
            let self = this;
            self.$options.chart["eac1"] = echarts.init(self.$refs["eac1"]);
            self.$options.chart["eac2"] = echarts.init(self.$refs["eac2"]);
            self.searchData();
        },
        methods: {
            // 初始化查询列表
            searchData(){
                let self = this;
                    self.loading1 = true;
                    self.loading2 = true;
                    self.searchData1();
                    self.searchData2();
            },
            searchData1() {
                let vm = this;
                    vm.$axios({
                        method:'post',
                        url:'Batt_realdataAction_history_serchByCondition',
                        data:'json=' + JSON.stringify({
                            BattGroupId:1000003,
                            recrod_time:vm.valueTime1 + " 00:00:00",
                            recrod_time1:vm.valueTime2 + " 00:00:00"
                        })
                    }).then(res=>{
                        let result = JSON.parse(res.data.result);
                            if(result.code == 1){
                                let obj1 = {
                                        xData:[],
                                        data:[],
                                    }
                                    result.data.forEach(item => {
                                        obj1.xData.push(item.recrod_time);
                                        obj1.data.push(item.mon_tmp);
                                    });
                                    vm.setOption1(obj1);
                                    vm.loading1 = false;
                            }else{
                                vm.setOption1({xData:[],data:[]});
                                vm.loading1 = false;
                            }
                    }).catch(err=>{
                        vm.$message({
                            type: 'error',
                            message:'网络链接失败,请重试!'
                        });
                    })
            },
            // 初始化查询列表
            searchData2() {
                let vm = this;
                    vm.$axios({
                        method:'post',
                        url:'Batt_realdataAction_history_searchByCondition2',
                        data:'json=' + JSON.stringify({
                            BattGroupId:1000003,
                            recrod_time:vm.valueTime1 + " 00:00:00",
                            recrod_time1:vm.valueTime2 + " 00:00:00"
                        })
                    }).then(res=>{
                        let result = JSON.parse(res.data.result);
                            if(result.code == 1){
                                let obj2 = {
                                        xData:[],
                                        data:[],
                                    }
                                    result.data.forEach(item => {
                                        obj2.data.push(item.mon_tmp);
                                        obj2.xData.push(item.recrod_time);
                                    });
                                    vm.setOption2(obj2);
                                    vm.loading2 = false;
                            }else{
                                vm.setOption2({xData:[],data:[]});
                                vm.loading2 = false;
                            }
                    }).catch(err=>{
                        vm.$message({
                            type: 'error',
                            message:'网络链接失败,请重试!'
                        });
                    })
            },
            setOption1:function(data){
                let vm = this;
                let option = {
                        tooltip : {
                            trigger: 'axis'
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data :data.xData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value}'
                                }
                            }
                        ],
                        series : [
                            {
                                name:'',
                                type:'line',
                                data:data.data,
                            },
                        ]
                }
                vm.$options.chart["eac1"].setOption(option);
            },
            setOption2:function(data){
                let vm = this;
                let option = {
                        tooltip : {
                            trigger: 'axis'
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data :data.xData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} '
                                }
                            }
                        ],
                        series : [
                            {
                                name:'',
                                type:'line',
                                data:data.data,
                            },
                        ]
                }
                vm.$options.chart["eac2"].setOption(option);
            },
        },
    };
</script>
<style lang="less" scoped>
.eac{
    width: 100%;
    height: 400px;
}
</style>
src/router/routes.js
@@ -9,6 +9,13 @@
        meta: {},
        component: (resolve) => require(['@/pages/login.vue'], resolve)
    },
    // 测试页面
    {
        path: '/wxTest',
        name: 'wxTest',
        meta: {},
        component: (resolve) => require(['@/pages/wxTest.vue'], resolve)
    },
    {
        path: '/home',
        meta: {},