修改内容

whychdw

2020-08-28 003a1244ec8eff1c0a33b822e3aa50455f30368c

修改内容

 src/api/services/file/index.js

@@ -61,6 +61,7 @@
            method: 'post',
            url: 'CsvFileDownloadAction!searchDownloadFile',
            data: 'json='+JSON.stringify(data),
            timeout: 0,
        });
    },


 src/components/ProgressLoad.vue

@@ -8,6 +8,7 @@
                :stroke-width="8"
                :width="90" 
                :percentage="percentage"></el-progress>
                <div class="progress-text">{{text}}</div>
            </div>
        </div>
    </div>
@@ -24,6 +25,10 @@
            type: [Number, String],
            default: 0,
        },
        text: {
            type: String,
            default: ''
        }
    },
}
</script>
@@ -53,6 +58,15 @@
    background-color: #000000;
    opacity: 0.2;
}
.progress-text {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
}
.hide-content {
    position: absolute;
    top: -999px;
}
</style>



 src/components/chart/chartConfigsComponent/ChartConfigsDefault.vue

@@ -77,6 +77,7 @@
        slecteds.forEach(function(value) {
            list.push(value);
        });
        list = Array.from(new Set(list));
        return {
            checkAll: false,
            indeterminate: true,

 src/components/chart/chartConfigsComponent/ChartConfigsGroup.vue

@@ -22,8 +22,7 @@
                            <span 
                            class="checkbox-label"
                            @click="toggleCollapsed(key)">全选 （{{50*key+1}}~{{50*key+group.list.length}}）</span>
                            <i class="el-icon-remove-outline" title="反选"
                            @click="backChecked(key)"></i>
                            <span class="back-checked" @click="backChecked(key)">反选</span>
                        </div>
                        <div class="hdw-collapse-icon" @click="toggleCollapsed(key)">
                            <i class="el-icon-d-arrow-right"></i>
@@ -106,7 +105,7 @@
        activeName() {
            setTimeout(()=>{
                this.$nextTick(()=>{
                    this.$refs.content.scrollTop = this.activeName*35;
                    this.$refs.content.scrollTop = this.activeName*42;
                });
            },100);
        }
@@ -290,6 +289,10 @@
    padding-bottom: 0.06rem;
}
.hdw-collapse-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: row;
    padding-top: 0.08rem;
@@ -348,6 +351,21 @@
    margin-left: 0.06rem;
    font-size: 0.14rem;
}
.back-checked {
    color: #d6cfcf;
    font-size: 0.12rem;
    display: inline-block;
    padding: 0.04rem;
    border: 0.01rem solid #02a7fa;
    cursor: pointer;
}
.back-checked:hover {
    color: #FFFFFF;
    border: 0.01rem solid #47bdf8;
}
.back-checked:active {
    color: #47bdf8;
}
@keyframes collapsed {
    0%   {transform: rotate(90deg);}
    25%  {transform: rotate(45deg);}

 src/global/ChartManage.js

@@ -3,6 +3,7 @@

function ChartManage() {
    this.charts = {};
    this.group = '';
}
/**
 * [setChart description]
@@ -44,9 +45,39 @@
        }
    });

    ECharts.connect(groups);
    let endChart = groups[groups.length-1];
    // 未获取的chart对象列表
    if(groups.length == 0 || !endChart) {
        return;
    }
    let dataZoom = endChart.getOption().dataZoom[0];
    groups.forEach(chart=> {
        chart.dispatchAction({
            type: 'dataZoom',
            batch: [
                {
                    // 第一个 dataZoom 组件
                    start: dataZoom.start,
                    end: dataZoom.end,
                }
            ]
        });
    });
    // 清空分组
    this.disconnect();
    this.group = ECharts.connect(groups);
    
}

ChartManage.prototype.disconnect = function() {
    ECharts.disconnect(this.group);
    // 清除分组信息
    Object.keys(this.charts).forEach(id=>{
        delete this.charts[id].group;
    });
}


ChartManage.prototype.changeDataZoom = function(id, range) {
    let chart = this.get(id);
    if(chart != -1) {

 src/main.js

@@ -58,6 +58,7 @@
};
// 挂载配置
Vue.prototype.$config = config;

Vue.prototype.$G = G;

new Vue({

 src/pages/batt-list/config.md

New file
@@ -0,0 +1,7 @@
#### 1.实时历史树状导航通信状态30秒后提示超时
##### 修改前：10分钟后提示超时
##### 修改原因：客户需求

#### 2.实时页面查询设备历史数据时刻表对结果中时间往前推一天
###### 修改前：直接使用查询结果
###### 修改原因: 由于数据表会提前创建明天的表，导致后台返回的结果是明天的时间，但是查询历史100笔数据时需要今天的时间，因此需要时间减1

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

@@ -45,14 +45,14 @@
                </div>
            </flex-layout>
        </div>
        <div class="line-chart-group" v-if="show">
        <div class="line-chart-group" ref="lineChartGroup" v-if="show">
            <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"
                :zoom="false"
                :end="4"
                :end="1"
                :delay="100"></line-chart>
                </div>
            </template>
@@ -66,7 +66,7 @@
                :height="option.height"
                :zoom="false"
                :show-zoom="true"
                :end="4"
                :end="1"
                :delay="100"></line-chart>
                </div>
            </template>
@@ -76,7 +76,8 @@
        title="我是标题"
        size="4rem"
        :with-header="false"
        :visible.sync="drawer">
        :visible.sync="drawer"
        @closed="drawerClose">
            <chart-configs
            v-if="drawer" 
            :selecteds="showChartTitle"
@@ -100,7 +101,8 @@
        </form>
        <progress-load 
        :show="progress.show"
        :percentage="progress.value"></progress-load>
        :percentage="progress.value"
        :text="progress.text"></progress-load>
    </flex-layout>
</template>

@@ -146,7 +148,7 @@
                test_data: []
            },
            dateRange: [new Date().format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')],
            show: false,
            show: true,
            options: {},
            sliderOptions: {},
            drawer: false,
@@ -169,6 +171,7 @@
            progress: {
                show: false,
                value: 0,
                text: '',
            }
        }
    },
@@ -612,7 +615,6 @@
                    groups.push(key);
                }
            }

            // 滚动条配置
            for(let key in this.sliderOptions) {
                if(this.sliderOptions[key].show) {
@@ -621,9 +623,61 @@
                    groups.push(key);
                }
            }
            let offsetHeight = this.$refs.lineChartGroup.offsetHeight;
            let scrollTop = this.$refs.lineChartGroup.scrollTop;
            let chartHeight = 200;
            this.setConnect(offsetHeight, scrollTop, chartHeight, groups);

            let self = this;
            let scrollTimer = "";
            // 监听滚动条
            this.$refs.lineChartGroup.onscroll = function(e) {
                clearTimeout(scrollTimer);
                scrollTimer = setTimeout(() => {
                    let offsetHeight = e.target.offsetHeight;
                    let scrollTop = e.target.scrollTop;
                    let chartHeight = 200;
                    self.setConnect(offsetHeight, scrollTop, chartHeight, groups, true);
                }, 500);
            }
        },
        setConnect(offsetHeight, scrollTop, chartHeight, groups, showLoading) {
            let start = Math.floor(scrollTop/chartHeight);
            let end = start+Math.abs(offsetHeight/chartHeight)+1;
            let cGroups = groups.slice(start, end);
            cGroups.push(groups[groups.length-1]);
            let loading = "";
            // 显示等待
            if(showLoading) {
                loading = this.$layer.loading(1);
            }
             
            // 或者可以直接传入需要联动的实例数组
            this.$G.chartManage.connect(groups);
            setTimeout(()=>{
                this.$layer.close(loading);
                this.$G.chartManage.connect(cGroups);
            }, 300);
            
        },
        changeGroups() {
            let groups = [];
            // 设置配置项
            for(let key in this.options) {
                if(this.options[key].show) {
                    // 配置项初始化
                    groups.push(key);
                }
            }
            let groups2 = [];
            // 滚动条配置
            for(let key in this.sliderOptions) {
                if(this.sliderOptions[key].show) {
                    groups2.push(key);
                }
            }

            this.$G.chartManage.connect([groups[1], groups[2], groups[3], groups2[0]]);
            
        },
        appendOptions(options, sliderOptions) {
            // 设置配置项
@@ -672,8 +726,8 @@
            }

            // 根据res的值修改显示状态
            let num = 0;
            res.forEach(function(value, index) {
                let num = 0;
                for(let key in options) {
                    if(options[key].title == value) {
                        if(index == 0) {
@@ -718,10 +772,18 @@

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

        },
        drawerClose() {
            // 显示等待框
            let loading = this.$layer.loading(1);
            
            // 更新视图
            this.$nextTick(function() {
                this.show = true;
                setTimeout(()=> {
                    // 关闭等待
                    this.$layer.close(loading);
                    this.show = true;
                }, 300);
            });
        },
        setShowChartTille: function() {
@@ -765,8 +827,8 @@
                            res = JSON.parse(res.data.result);
                            if(res.code == 1) {
                                // 关闭进度条
                                this.progress.show = false;
                                this.progress.value = 0;
                                // this.progress.show = false;
                                // this.progress.value = 0;
                                let data = res.data[0];
                                const link = document.createElement("a");
                                link.href = encodeURI(this.$config.url+'tomcat7_csv/'+data.fileName);
@@ -774,6 +836,11 @@
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link);
                                setTimeout(()=>{
                                    // 关闭进度条
                                    this.progress.show = false;
                                    this.progress.value = 0;
                                }, 1000);
                            }else {
                                // 关闭进度条
                                this.progress.show = false;
@@ -801,11 +868,20 @@
            this.$api.file.getProgress()
            .then(function(res){
                res = JSON.parse(res.data.result);
                self.progress.value = Number(res.data.toFixed(0));
                let percentage = Number(res.data[1].toFixed(0));
                self.progress.value = percentage;
                console.log(res);
                if(percentage == 0) {
                    self.progress.text="数据加载中...";
                }else {
                    self.progress.text="文件下载中...";
                }

                if(res.data<100 && self.progress.show) {
                    setTimeout(self.getProgress, 50);
                }else {
                    self.progress.show = false;
                    self.progress.value = 100;
                    // self.progress.show = false;
                }
            });
        },
@@ -958,10 +1034,11 @@
    box-sizing: border-box;
    padding-top: 0.08rem;
    padding-bottom: 0.08rem;
    overflow-y: auto;
}
.line-chart-item {
    flex: 1;
    min-height: 100px;
    min-height: 200px;
}
.no-chart-text {
    text-align: center;

 src/pages/batt-list/index.vue

@@ -155,7 +155,7 @@
                    // 遍历data的值
                    data.forEach(item=>{
                        let dev_id = item.dev_id;
                        let isLink = checkIsLink(item.record_time, item.record_time1);
                        let isLink = checkIsLink(item.record_time, item.record_time1, 0.5);
                        let state = isLink?'normal':'danger';
                        // 遍历树第一层
                        treeData.forEach(parent=>{

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

@@ -25,7 +25,7 @@
                <i class="iconfont icon-peizhiguanli" @click="drawer=true"></i>
            </el-tooltip>
        </div>
        <div class="line-chart-group" v-if="show && type=='chart'">
        <div class="line-chart-group" ref="lineChartGroup" v-if="show && type=='chart'">
            <template v-for="(option, key) in options">
                <div class="line-chart-item" v-if="option.show" :key="key">
                <line-chart :id="key" :ref="key" 
@@ -177,7 +177,8 @@
                res = JSON.parse(res.data.result);
                self.table_name = new Date().format('yyyy-MM-dd');
                if(res.code == 1) {
                    self.table_name = res.data[1];
                    // 时间减1天
                    self.table_name = new Date(new Date(res.data[1]).getTime()-3600*24*1000).format('yyyy-MM-dd');
                }
                // 请求前100笔数据
                self.searchHistory100();
@@ -264,7 +265,7 @@
                    realTimeData['chart'+index] = value;
                });
                return realTimeData;
            }).reverse().slice(0,21);
            }).reverse().slice(0, 16);

            // 开始查询实时数据
            this.startSearchRealData();
@@ -290,14 +291,53 @@
            // 设置配置项
            for(let key in this.options) {
                if(this.options[key].show) {
                    // 配置项初始化
                    this.$refs[key][0].setOption(this.options[key].option);
                    groups.push(key);
                }
            }

            let offsetHeight = this.$refs.lineChartGroup.offsetHeight;
            let scrollTop = this.$refs.lineChartGroup.scrollTop;
            let chartHeight = 200;
            this.setConnect(offsetHeight, scrollTop, chartHeight, groups);

            let self = this;
            let scrollTimer = "";
            // 监听滚动条
            this.$refs.lineChartGroup.onscroll = function(e) {
                clearTimeout(scrollTimer);
                scrollTimer = setTimeout(() => {
                    let offsetHeight = e.target.offsetHeight;
                    let scrollTop = e.target.scrollTop;
                    let chartHeight = 200;
                    self.setConnect(offsetHeight, scrollTop, chartHeight, groups, true);
                }, 500);
            }
        },
        setConnect(offsetHeight, scrollTop, chartHeight, groups, showLoading) {
            let start = Math.floor(scrollTop/chartHeight);
            let end = start+Math.abs(offsetHeight/chartHeight)+1;
            let cGroups = groups.slice(start, end);
            // console.log(cGroups);
            let loading = "";
            // 显示等待
            if(showLoading) {
                loading = this.$layer.loading(1);
            }
            // 或者可以直接传入需要联动的实例数组
            this.$G.chartManage.connect(groups);
            setTimeout(()=>{
                // 关闭等待框
                this.$layer.close(loading);
                // 生成图表
                cGroups.forEach(key=> {
                    // 配置项初始化
                    if(this.$refs[key][0]) {
                        this.$refs[key][0].setOption(this.options[key].option);
                    }
                });
                // 或者可以直接传入需要联动的实例数组
                this.$G.chartManage.connect(cGroups);
            }, 300);
            
        },
        resizeCharts() {
            // 设置配置项
@@ -375,7 +415,7 @@

            // 添加表格数据
            if(this.tbl.tbData[0].record_time != realTimeData.record_time) {
                if(this.tbl.tbData >= 20) {
                if(this.tbl.tbData.length >= 15) {
                    this.tbl.tbData.pop();
                }
                this.tbl.tbData.unshift(realTimeData);
@@ -545,10 +585,11 @@
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.line-chart-item {
    flex: 1;
    min-height: 100px;
    min-height: 200px;
}
.no-chart-text {
    text-align: center;

 src/pages/file/index.vue

@@ -132,8 +132,9 @@
            <input type="hidden" name="states" v-model="states">
        </form>
        <progress-load 
        :show="progress.show"
        :percentage="progress.value"></progress-load>
        :show.sync="progress.show"
        :percentage="progress.value"
        :text="progress.text"></progress-load>
    </div>
</template>

@@ -210,6 +211,7 @@
            progress: {
                show: false,
                value: 0,
                text: ''
            }
        }
    },
@@ -240,9 +242,6 @@
                    res = JSON.parse(res.data.result);
                    if(res.code == 1) {
                        setTimeout(()=>{
                            // 关闭进度条
                            this.progress.show = false;
                            this.progress.value = 0;
                            // 设置点击事件
                            let data = res.data[0];
                            const link = document.createElement("a");
@@ -252,6 +251,12 @@
                            link.click();
                            document.body.removeChild(link);
                        }, 1000);

                        setTimeout(()=>{
                            // 关闭进度条
                            this.progress.show = false;
                            this.progress.value = 0;
                        }, 1000*2);
                    }else {
                        // 关闭进度条
                        this.progress.show = false;
@@ -273,12 +278,25 @@
            this.$api.file.getProgress()
            .then(function(res){
                res = JSON.parse(res.data.result);
                self.progress.value = Number(res.data.toFixed(0));
                let cache = Number((res.data[0]/2).toFixed(0));
                let percentage = Number((res.data[1]/2).toFixed(0));

                if(percentage == 0) {
                    if(cache>50) {
                        cache = 50;
                    }
                    self.progress.value = cache;
                    self.progress.text="数据加载中...";
                }else {
                    percentage += 50;
                    self.progress.value = percentage;
                    self.progress.text="文件下载中...";
                }
                
                if(res.data<100 && self.progress.show) {
                if(percentage<100 && self.progress.show) {
                    setTimeout(self.getProgress, 50);
                }else {
                    self.progress.show = false;
                    self.progress.value = 100;
                }
            });
        },