U

whychw

2020-07-17 7edf4d49fafa996a3431ca72d1929e082377e732

U

 src/api/services/file/index.js

@@ -36,6 +36,17 @@
            data: null
        });
    },
    
    /**
     * 清除进度条进度
     */
    clearProgress() {
        return axios({
            method: 'post',
            url: 'LoginAction!clearProgress',
            data: null
        });
    },

    /**
     * 文件下载
@@ -45,13 +56,13 @@
     * table_name:2020_07_02
     * states:1号直流主配电板电压&&1&&V,1号蓄电池组电压&&1&&V
     */
    /*download (data) {
    download (data) {
        return axios({
            method: 'post',
            url: 'ExportTable.servlet',
            data: data
            url: 'CsvFileDownloadAction!searchDownloadFile',
            data: 'json='+JSON.stringify(data),
        });
    }*/
    }

    /**
     * 查询配置

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

@@ -310,3 +310,6 @@
.el-slider__runway {
    margin-bottom: 0.08rem;
}
.el-progress__text {
    color: #FFFFFF;
}

 src/assets/js/config.js

@@ -1,4 +1,6 @@
export default {
    http:process.env.NODE_ENV == 'dev'?
        'http://localhost:8919/Equip_System/':'',
    url:process.env.NODE_ENV == 'dev'?
    'http://localhost:8919/Equip_System/':'',
};

 src/components/ProgressLoad.vue

New file
@@ -0,0 +1,57 @@
<template>
    <div class="progress-load" v-if="show">
        <div class="progress-load-content">
            <div class="progress-bg"></div>
            <div class="progress-container">
                <el-progress
                type="circle" 
                :stroke-width="10" 
                :percentage="percentage"></el-progress>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        percentage: {
            type: Number,
            default: 0,
        },
    },
}
</script>

<style scoped>
.progress-load {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.progress-load-content {
    position: relative;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.progress-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.2;
}
</style>



 src/components/chart/ChartConfigs.vue

@@ -20,7 +20,7 @@
            <div class="no-data" v-if="getOptionsLength == 0">
                暂无图表配置项
            </div>
            <el-checkbox v-else :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <!-- <el-checkbox v-else :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
            <el-checkbox-group 
            v-model="list"
            @change="handleCheckedChange">

 src/components/chart/LineChart.vue

@@ -71,6 +71,10 @@
            type: String,
            default: 'mousemove',
        },
        delay: {
            type: Number,
            default: 3000,
        },
    },
    data() {
        return {
@@ -90,6 +94,7 @@
                time: '',
                value: '',
            },
            delayTime: this.delay,
        }
    },
    methods: {
@@ -123,7 +128,7 @@
                tooltip: {
                    trigger: 'axis',
                    triggerOn: tooltip.triggerOn,
                    hideDelay: 10000,
                    hideDelay: this.delayTime,
                    formatter: function(params) {
                        var res = params[0].name;
                        var cols = Math.ceil(params.length/5);

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

@@ -52,7 +52,8 @@
                :title="option.title" 
                :height="option.height"
                :zoom="false"
                :end="4"></line-chart>
                :end="4"
                :delay="100"></line-chart>
                </div>
            </template>
            <div class="no-chart-text" v-if="showChartTitle.length==0">暂无图表显示</div>
@@ -65,7 +66,8 @@
                :height="option.height"
                :zoom="false"
                :show-zoom="true"
                :end="4"></line-chart>
                :end="4"
                :delay="100"></line-chart>
                </div>
            </template>
        </div>
@@ -87,13 +89,16 @@
        :action="action" 
        method="post" 
        enctype="multipart/form-data">
            <input type="hidden" name="PageName" value="history"/>
            <input type="hidden" name="pageName" value="history"/>
            <input type="hidden" name="echart" v-model="base64" />
            <input type="hidden" name="dev_name" v-model="dev_name" />
            <input type="hidden" name="table_name" v-model="getTableName">
            <input type="hidden" name="state" v-model="getState" />
            <input type="hidden" name="dis" v-model="allData">
        </form>
        <progress-load 
        :show="progress.show"
        :percentage="progress.value"></progress-load>
    </flex-layout>
</template>

@@ -102,6 +107,7 @@
import FlexLayout from '@/components/FlexLayout'
import LineChart from '@/components/chart/LineChart'
import ChartConfigs from '@/components/chart/ChartConfigs'
import ProgressLoad from '@/components/ProgressLoad'

import {
    isSetOption,
@@ -111,12 +117,14 @@
    fields: [],
    data: [],
};
let allData = [];
export default {
    name: 'PagesHistory',
    components: {
        FlexLayout,
        LineChart,
        ChartConfigs,
        ProgressLoad,
    },
    data() {
        // 配置导出的action
@@ -151,6 +159,10 @@
            dev_name: '',
            allData: [],
            action: action,
            progress: {
                show: false,
                value: 0,
            }
        }
    },
    watch: {
@@ -342,6 +354,7 @@
            let timeRange = timeRanges[num];
            // 无法获取到timeRange返回
            if(!timeRange) {
                this.allData = JSON.stringify(allData);
                this.resizeCharts();
                // 关闭等待框
                this.$layer.close(this.layerLoad);
@@ -491,7 +504,13 @@
            let sliderOptions = this.sliderOptions;
            // 初始化配置项
            this.initOptions();
            this.allData = JSON.stringify(data);
            //this.allData = JSON.stringify(data);
            // 初始化allData的值
            allData = [];
            // 遍历赋值
            for(let i=0; i<data.length; i++) {
                allData.push(data[i]);
            }
            // 遍历data的值
            for(var i=0; i<data.length; i++) {
                var _data = data[i];
@@ -525,6 +544,10 @@
            // 无数据返回
            if(data.length == 0) {
                return;
            }
            // 遍历赋值
            for(let i=0; i<data.length; i++) {
                allData.push(data[i]);
            }
            // 配置项
            let options = this.options;
@@ -622,21 +645,55 @@

        },
        ensureSelects: function(res) {
            let self = this;
            let options = this.options;

            // 初始化所有的显示状态
            for(let key in options) {
                options[key].show = false;
                options[key].showZoom = false;
            }

            // 遍历删除拖动的echarts的配置项
            for(let key in this.sliderOptions){
                delete this.sliderOptions[key];
            }

            // 根据res的值修改显示状态
            res.forEach(function(value, index) {
                let num = 0;
                for(let key in options) {
                    if(options[key].title == value) {
                        if(index == 0) {
                            options[key].showZoom = true;
                        }
                        options[key].show = true;
                        if(num == 0) {
                            self.$set(self.sliderOptions, 'slider'+key, {
                                num: 0,
                                type: 1,
                                title: '123',
                                unit: '',
                                height: "300px",
                                show: true,
                                showZoom: true,
                                option: {
                                    xAxis: {
                                        data: []
                                    },
                                    series: [{
                                        name: '123',
                                        type: 'line',
                                        smooth: true,
                                        symbolSize: 0,
                                        sampling: 'average',
                                        step: 'end',
                                        data: []
                                    }]
                                }
                            });
                        }
                        num++;
                    }
                }
            });
@@ -649,6 +706,7 @@

            // 重新挂载echarts
            this.show = false;

            // 更新视图
            this.$nextTick(function() {
                this.show = true;
@@ -685,8 +743,42 @@
                this.base64 = base64;
                
                this.$nextTick(()=>{
                    // 显示进度条
                    this.progress.show = true;
                    if(this.allData.length != 0) {
                        this.$refs.export.submit();
                        // 请求后台
                        this.$api.file.clearProgress()
                        .then(()=> {
                            this.getProgress();
                            // 构造查询条件
                            let searchParams = {
                                pageName: 'history',
                                dev_name: this.dev_name,
                                table_name: this.getTableName,
                                states: this.getState,
                                dis: this.allData,
                            };
                            // 请求后台获取数据
                            this.$api.file.download(searchParams)
                            .then(res=>{
                                res = JSON.parse(res.data.result);
                                if(res.code == 1) {
                                    // 关闭进度条
                                    this.progress.show = false;
                                    let data = res.data[0];
                                    const link = document.createElement("a");
                                    link.href = encodeURI(this.$config.url+'tomcat7_csv/'+data.fileName);
                                    link.download = data.fileName;
                                    document.body.appendChild(link);
                                    link.click();
                                    document.body.removeChild(link);
                                }else {
                                    this.$layer.msg('生成文件失败！');
                                }
                            }).catch(error=>{
                                console.log(error);
                            });
                        });
                    }else {
                        this.$layer.msg('暂无数据导出');
                    }
@@ -695,6 +787,21 @@
                this.$layer.msg(checkFormResult.msg);
            }
        },
        getProgress: function() {
            let self = this;
            // 请求后台获取进度
            this.$api.file.getProgress()
            .then(function(res){
                res = JSON.parse(res.data.result);
                self.progress.value = Number(res.data.toFixed(0));
                
                if(res.data<100 && self.progress.show) {
                    setTimeout(self.getProgress, 50);
                }else {
                    self.progress.show = false;
                }
            });
        },
        recordTimeChange: function() {},
        getTblField() {
            let options = this.options;

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

@@ -383,11 +383,13 @@

            // 关闭弹出框
            this.drawer = false;
            
            // 清空内容
            this.show = false;

            // 更新视图
            if(this.type=="chart") {
                this.$nextTick(function() {
                    self.setOptions();
                    self.resizeCharts();
                });
            }

 src/pages/file/index.vue

@@ -115,6 +115,9 @@
            <input type="hidden" name="table_name" v-model="tableName">
            <input type="hidden" name="states" v-model="states">
        </form>
        <progress-load 
        :show="progress.show"
        :percentage="progress.value"></progress-load>
    </div>
</template>

@@ -122,13 +125,15 @@
import FlexLayout from '@/components/FlexLayout'
import ContentBox from '@/components/ContentBox'
import MyTree from '@/components/tree/Index'
import ProgressLoad from '@/components/ProgressLoad'
import { setTimeout } from 'timers';
export default {
    name: 'pagesFile',
    components: {
        FlexLayout,
        ContentBox,
        MyTree
        MyTree,
        ProgressLoad,
    },
    data() {
        // 配置导出的action
@@ -183,8 +188,12 @@
                        }
                    ],
                },
            },
            progress: {
                show: false,
                value: 0,
            }
        }
        },
    },
    mounted () {
        this.getSysList();
@@ -193,10 +202,40 @@
        // 单个下载
        download (obj) {
            this.tableName = obj.table_date;
            //this.getProgress();

            this.$nextTick(()=>{
                this.$refs.export.submit();
            // 显示进度条
            this.progress.show = true;
            // 请求后台
            this.$api.file.clearProgress()
            .then(()=> {
                this.getProgress();
                // 构造查询条件
                let searchParams = {
                    pageName: 'fileout',
                    dev_id: this.curDevId,
                    dev_name: this.curDevName,
                    table_name: this.tableName,
                    states: this.states,
                };
                // 请求后台获取数据
                this.$api.file.download(searchParams)
                .then(res=>{
                    res = JSON.parse(res.data.result);
                    if(res.code == 1) {
                        // 关闭进度条
                        this.progress.show = false;
                        let data = res.data[0];
                        const link = document.createElement("a");
                        link.href = encodeURI(this.$config.url+'tomcat7_csv/'+data.fileName);
                        link.download = data.fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }else {
                        this.$layer.msg('生成文件失败！');
                    }
                }).catch(error=>{
                    console.log(error);
                });
            });
        },
        getProgress: function() {
@@ -205,9 +244,12 @@
            this.$api.file.getProgress()
            .then(function(res){
                res = JSON.parse(res.data.result);
                console.log(res.data);
                if(res.data<100) {
                    setTimeout(self.getProgress, 10);
                self.progress.value = Number(res.data.toFixed(0));
                
                if(res.data<100 && self.progress.show) {
                    setTimeout(self.getProgress, 50);
                }else {
                    self.progress.show = false;
                }
            });
        },