提交

whychdw

2020-07-12 094731b5b2f998bd6ca9d53dcbf9a70fa59ca847

提交

 src/assets/css/m-element-ui.css

@@ -302,4 +302,7 @@
}
.el-green .el-tag.el-tag--info .el-select__tags-text{
    color: #000000;
}
.el-date-picker__header {
    font-size: 14px;
}

 src/components/chart/LineChart.vue

@@ -47,25 +47,50 @@
            type: String,
            default: ''
        },
        'show-zoom': {
            type: Boolean,
            default: false,
        },
        zoom: {
            type: Boolean,
            default: true,
        },
        end: {
            type: Number,
            default: 100,
        },
        subtext: {
            type: Boolean,
            default: false,
        },
        unit: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            chart: "",
            dataZoom: {
                show: this.showZoom,
                disabled: this.zoom,
                start: 0,
                end: this.end,
            },
            isFull: false,
            dataIndex: -1,
            history: {
                time: '',
                value: '',
            },
        }
    },
    methods: {
        setOption(opt) {
            let dataZoom = this.dataZoom;
            let gridBottom = dataZoom.show?'40px':1;
            let unit = this.unit;
            let history = this.history;
            // 默认配置项
            let option = {
                animation: false,
@@ -80,7 +105,7 @@
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '1',
                    bottom: gridBottom,
                    top: '0',
                    containLabel: true 
                },
@@ -97,7 +122,8 @@
                                res += '<br>';
                            }
                            res += params[i].marker+params[i].seriesName
                            +': '+params[i].value+"<span style='display: inline-block;margin-right: 8px'></span>";
                            +': '+params[i].value+unit+
                            "<span style='display: inline-block;margin-right: 8px'></span>";
                        }
                        return res;
                    }
@@ -113,13 +139,37 @@
                },
                dataZoom: [
                    {
                        show: dataZoom.show,
                        start: 0,
                        end: dataZoom.end,
                        xAxisIndex: [0],
                        realtime: false,
                        dataBackground: {
                            lineStyle: {
                                color: '#15E3F3'
                            },
                            areaStyle: {
                                color: '#15E3F3'
                            }
                        },
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 0,
                        zoomLock:true,
                        end: dataZoom.end,
                        disabled: dataZoom.disabled,
                    },
                ],
                series: []
                series: [{
                    name: '',
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    sampling: 'average',
                    data: []
                }]
            };
            // 修改xAxis内容
            if(opt.xAxis == undefined || opt.xAxis.data == undefined) {
@@ -139,8 +189,12 @@
            // 设置图表的subtext
            let dataIndex = this.dataIndex == -1?option.xAxis.data.length:this.dataIndex;
            
            option.title.subtext = '历史数据：'+option.xAxis.data[dataIndex-1]+" "+option.series[0].data[dataIndex-1]+'\n'
            +'当前数据：'+option.xAxis.data[dataIndex-1]+" "+option.series[0].data[dataIndex-1];
            option.title.subtext = '历史数据：'+history.time+" "+history.value+unit+'\n'
            +'当前数据：'+option.xAxis.data[dataIndex-1]+" "+option.series[0].data[dataIndex-1]+unit;

            if(!this.subtext || option.xAxis.data[dataIndex-1] == undefined) {
                option.title.subtext="";
            }
            // 绘制图表
            this.chart.setOption(option);
        },
@@ -167,13 +221,12 @@
        this.chart = ECharts.init(ele, 'transparent');
        // 设置配置
        this.setOption({});
        // 监听拖动
        // this.chart.on('dataZoom', (data)=>{
        //     console.log(data);
        // });
        // 监听显示
        this.chart.on('showTip', (data)=>{
            console.log(data);
            this.dataIndex = data.dataIndex;
            let option = this.chart.getOption();
            this.history.time = option.xAxis[0].data[data.dataIndex-1];
            this.history.value = option.series[0].data[data.dataIndex-1];
        });
    },
    destroyed() {

 src/pages/batt-list/history-page.vue

@@ -3,21 +3,29 @@
        <div class="page-header" slot="header">
            <flex-layout direction="row">
                <el-form ref="form" :model="form" label-width="100px" inline>
                    <el-form-item label="时间段选择" class="el-green">
                    <el-form-item label="起始时间" class="el-green">
                        <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        :editable="false"
                        :picker-options="pickerOptions">
                        v-model="record_time"
                        type="datetime"
                        placeholder="起始时间"
                        size="mini"
                        :picker-options="pickerOptions"
                        @change="recordTimeChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" class="el-green">
                        <el-date-picker
                        v-model="record_time1"
                        type="datetime"
                        placeholder="结束时间"
                        size="mini"
                        :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" 
                        icon="el-icon-search"
                        :loading="loading"
                        @click="searchHistoryData">查询</el-button>
                    </el-form-item>
                </el-form>
@@ -43,7 +51,11 @@
            <template v-for="(option, key) in options">
                <div class="line-chart-item" v-if="option.show" :key="key">
                <line-chart :id="key" :ref="key" 
                :title="option.title" :height="option.height"></line-chart>
                :title="option.title" 
                :height="option.height"
                :zoom="false"
                :show-zoom="option.showZoom"
                :end="4"></line-chart>
                </div>
            </template>
            <div class="no-chart-text" v-if="showChartTitle.length==0">暂无图表显示</div>
@@ -99,6 +111,7 @@
        let action = this.$config.http+'ExportTable.servlet';

        return {
            loading: false,
            form: {
                test_type: '',
                test_starttime: ''
@@ -113,9 +126,11 @@
            options: {},
            drawer: false,
            showChartTitle: [],
            record_time: new Date(),
            record_time1: new Date(),
            pickerRange: {
                start: '2019-01-01',
                end: new Date().format('yyyy-MM-dd'),
                start: '2019-01-01 00:00:00',
                end: new Date().format('yyyy-MM-dd hh:mm:ss'),
            },
            base64: '',
            dev_name: '',
@@ -160,6 +175,7 @@
                            unit: config.unit,
                            height: "100%",
                            show: num>5?false:true,
                            showZoom: num==0?true:false,
                            option: {
                                xAxis: {
                                    data: []
@@ -196,30 +212,32 @@
            this.$api.batt.searchHistoryTimeRange(searchParams)
            .then(function(res) {
                res = JSON.parse(res.data.result);
                self.pickerRange.start = '2019-01-01';
                self.pickerRange.end = new Date().format('yyyy-MM-dd');
                self.pickerRange.start = '2019-01-01 00:00:00';
                self.pickerRange.end = new Date().format('yyyy-MM-dd hh:mm:ss');
                if(res.code == 1) {
                    self.pickerRange.start = res.data[0];
                    self.pickerRange.end = res.data[1];
                    self.pickerRange.start = res.data[0]+' 00:00:00';
                    self.pickerRange.end = res.data[1]+' 23:59:59';
                }
            });
        },
        searchHistoryData() {
        searchHistoryData(resize) {
            let self = this;
            let checkFormResult = this.checkFromData();

            if(checkFormResult.code == 1) {
                let searchParams = checkFormResult.data;
                this.loading = true;
                // 查询历史数据
                this.$api.batt.searchHistoryData(searchParams)
                .then(function(res) {
                    self.loading = false;
                    res = JSON.parse(res.data.result);
                    let data = [];
                    if(res.code == 1) {
                        data = res.data;
                    }
                    // 格式化数据并返回内容 
                    self.formatHistoryData(data);
                    self.formatHistoryData(data, resize);
                });
            }else {
                this.$message({
@@ -257,15 +275,16 @@
                }
            }
            // 测试类型
            if(this.dateRange.length == 0) {
            if(this.record_time.getTime() > this.record_time1.getTime()) {
                result.code = 0;
                result.msg =  '请选择时间段';
                result.msg =  '开始时间大于结束时间';
                return result;
            }

            result.data = {
                dev_id: batt.dev_id,
                table_name: this.dateRange[0].format('yyyy_MM_dd'),
                record_time: this.record_time.format("yyyy-MM-dd hh:mm:ss"),
                record_time1: this.record_time1.format("yyyy-MM-dd hh:mm:ss"),
                list: list
            };
            return result;
@@ -285,7 +304,7 @@
                }];
            }
        },
        formatHistoryData(data) {
        formatHistoryData(data, resize) {
            let options = this.options;
            // 初始化配置项
            this.initOptions();
@@ -305,7 +324,13 @@
                });
            }
            // 设置图表
            requestAnimationFrame(this.setOptions);
            this.setOptions();
            // 是否重置大小
            if(resize) {
                this.$nextTick(()=>{
                    this.resizeCharts();
                });
            }
        },
        setOptions() {
            let groups = [];
@@ -336,12 +361,16 @@
            // 初始化所有的显示状态
            for(let key in options) {
                options[key].show = false;
                options[key].showZoom = false;
            }

            // 根据res的值修改显示状态
            res.forEach(function(value) {
            res.forEach(function(value, index) {
                for(let key in options) {
                    if(options[key].title == value) {
                        if(index == 0) {
                            options[key].showZoom = true;
                        }
                        options[key].show = true;
                    }
                }
@@ -353,10 +382,12 @@
            // 关闭弹出框
            this.drawer = false;

            // 重新挂载echarts
            this.show = false;
            // 更新视图
            this.$nextTick(function() {
                self.setOptions();
                self.resizeCharts();
                this.show = true;
                self.searchHistoryData();
            });
        },
        setShowChartTille: function() {
@@ -401,7 +432,14 @@
            


        }
        },
        recordTimeChange: function(time) {
            let recordTime = time.getTime()+8.64e7;
            let recordTime1 = this.record_time1.getTime();
            if(recordTime1>recordTime || recordTime1<time.getTime()) {
                this.record_time1 = new Date(recordTime);
            }
        },
    },
    computed: {
        pickerOptions()  {
@@ -413,7 +451,20 @@
                }
            }
        },
        getShowChart: function() {
        pickerOptions1() {
            let recordTime = this.record_time.getTime();
            // let recordTime1 = new Date(this.record_time1).getTime();
            let startDate = recordTime;
            let pickerEnd = new Date(this.pickerRange.end).getTime();
            let recordTime1 = recordTime+8.64e7;
            let endDate = recordTime1>pickerEnd?pickerEnd:recordTime1;
            return {
                disabledDate(time){
                    return time.getTime() > endDate || time.getTime() < startDate - 8.64e7;
                }
            }
        },
        getShowChart() {
            let options = this.options;
            let result = {};
            for(let key in options) {
@@ -424,7 +475,7 @@
            }
            return result;
        },
        getState: function() {
        getState() {
            return this.showChartTitle.join(',');
        },
    },

 src/pages/batt-list/index.vue

@@ -109,7 +109,7 @@
                    id: 'chart'+index,
                    title: values[0],
                    type: values[1] == undefined?values[1]:0,
                    unit: values[2]?values[1]:'',
                    unit: values[2]?values[2]:'',
                };
                result.push(tmp);
            });

 src/pages/batt-list/real-time-page.vue

@@ -13,7 +13,8 @@
            <template v-for="(option, key) in options">
                <div class="line-chart-item" v-if="option.show" :key="key">
                <line-chart :id="key" :ref="key" 
                :title="option.title" :height="option.height"></line-chart>
                :title="option.title" :height="option.height"
                :subtext="true" :unit="option.unit"></line-chart>
                </div>
            </template>
            <div class="no-chart-text" v-if="showChartTitle.length==0">暂无图表显示</div>
@@ -99,6 +100,7 @@
                            unit: config.unit,
                            height: '100%',
                            show: num>5?false:true,
                            subtext: true,
                            option: {
                                xAxis: {
                                    data: []
@@ -116,6 +118,7 @@
                        num++;
                    }
                });
                console.log(self.options);
                // 设置选中的显示的内容
                self.setShowChartTille();
                // 查询后台数据