内容提交

whychdw

2020-07-13 69b930548c05e4a69bb55e27850b2372607b189d

内容提交

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

@@ -1,6 +1,22 @@
<template>
    <flex-layout class="page-root">
        <div class="page-tools" slot="header">
            <el-tooltip
            v-if="type=='chart'" 
            class="item" 
            effect="dark" 
            content="表格数据" 
            placement="top">
                <i class="iconfont icon-biaoge" @click="tblTypeClick"></i>
            </el-tooltip>
            <el-tooltip
            v-if="type=='table'" 
            class="item" 
            effect="dark" 
            content="图表数据" 
            placement="top">
                <i class="iconfont icon--tubiao" @click="chartTypeClick"></i>
            </el-tooltip>
            <el-tooltip 
            class="item" 
            effect="dark" 
@@ -9,7 +25,7 @@
                <i class="iconfont icon-peizhiguanli" @click="drawer=true"></i>
            </el-tooltip>
        </div>
        <div class="line-chart-group" v-if="show">
        <div class="line-chart-group" 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" 
@@ -18,6 +34,22 @@
                </div>
            </template>
            <div class="no-chart-text" v-if="showChartTitle.length==0">暂无图表显示</div>
        </div>
        <div class="table-container" v-if="type=='table'">
            <el-table
            class="el-green"
            :data="tbl.tbData"
            border
            size="mini"
            height="100%">
                <el-table-column
                v-for="item in tbl.tbHeader" :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :align="item.align"
                :min-width="item.width">
                </el-table-column>
            </el-table>
        </div>
        <el-drawer
        class="el-drawer-science"
@@ -56,12 +88,17 @@
    data() {
        return {
            timer: new Timeout(),
            type: 'chart',
            show: true,
            optionsLength: 0,
            options: {},
            drawer: false,
            showChartTitle: [],
            table_name: new Date().format('yyyy-MM-dd'),
            tbl: {
                tbHeader: [],
                tbData: []
            },
        }
    },
    watch: {
@@ -188,7 +225,24 @@
                });
            }
            // 设置图表
            this.setOptions();
            if(this.type=='chart') {
                this.setOptions();
            }

            // 初始化表格数据的值
            this.tbl.tbData = [];
            // 遍历data值给tbData赋值
            this.tbl.tbData = data.map((_data)=>{
                // 遍历data的值
                let record_time = _data.record_time;
                let realTimeData = {
                    record_time: record_time,
                };
                _data.list.forEach(function(value, index) {
                    realTimeData['chart'+index] = value;
                });
                return realTimeData;
            }).reverse();

            // 开始查询实时数据
            this.startSearchRealData();
@@ -260,7 +314,7 @@
                self.timer.open();
            });
        },
        formatRealTimeData: function(data) {
        formatRealTimeData(data) {
            // 无数据直接返回
            if(data.length == 0) {
                return;
@@ -278,10 +332,26 @@
                options[key].option.series[0].data.push(data[0].list[options[key].num]);
                options[key].option.xAxis.data.push(data[0].record_time);
            });
            // 遍历data的值
            let record_time = data[0].record_time;
            let realTimeData = {
                record_time: record_time,
            };
            data[0].list.forEach(function(value, index) {
                realTimeData['chart'+index] = value;
            });

            // 添加表格数据
            if(this.tbl.tbData >= 100) {
                this.tbl.tbData.pop();
            }
            this.tbl.tbData.unshift(realTimeData)
            // 设置图表
            this.setOptions();
            if(this.type=='chart') {
                this.setOptions();
            }
        },
        ensureSelects: function(res) {
        ensureSelects(res) {
            var self = this;
            let options = this.options;
            // 初始化所有的显示状态
@@ -305,12 +375,15 @@
            this.drawer = false;

            // 更新视图
            this.$nextTick(function() {
                self.setOptions();
                self.resizeCharts();
            });
            if(this.type=="chart") {
                this.$nextTick(function() {
                    self.setOptions();
                    self.resizeCharts();
                });
            }
            
        },
        setShowChartTille: function() {
        setShowChartTille() {
            var options = this.options;
            this.showChartTitle = [];
            for(let key in options) {
@@ -319,7 +392,45 @@
                    this.showChartTitle.push(option.title);
                }
            }
        }
            // 设置表格的头部
            this.setTblHeader();
        },
        setTblHeader() {
            // 初始化表格头部数据
            this.tbl.tbHeader = [{
                prop: 'record_time',
                label: '记录日期',
                align: 'center',
                width: '180',
            }];
            // 配置项
            let options  = this.options;
            // 遍历配置项
            for(let key in options) {
                let option = options[key];
                if(option.show) {
                    let width = option.title.length*18;
                    let tmp = {
                        prop: key,
                        label: option.title,
                        align: 'center',
                        width: width,
                    };

                    // 添加内容
                    this.tbl.tbHeader.push(tmp);
                }
            }
        },
        setTblData() {

        },
        tblTypeClick() {
            this.type="table";
        },
        chartTypeClick() {
            this.type="chart";
        },
    },
    computed: {},
    mounted() {
@@ -348,7 +459,6 @@
}
.line-chart-group {
    box-sizing: border-box;
    padding-top: 0.24rem;
}
.page-tools {
    text-align: right;
@@ -405,6 +515,10 @@
    box-sizing: border-box;
    padding-bottom: 0.08rem;
}
.table-container {
    box-sizing: border-box;
    height: 100%;
}
</style>



 src/pages/user/info.vue

@@ -75,11 +75,6 @@
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="密码:" prop="USnId">
                                <el-input v-model="addUser.info.USnId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="工作班组:">
                                <el-input v-model="addUser.info.UJobGroup"></el-input>
                            </el-form-item>
@@ -110,12 +105,6 @@
                        <el-col :span="24">
                            <el-form-item label="用户名:" prop="UName">
                                <el-input v-model="editUser.info.UName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="密码:" prop="USnId">
                                <el-input v-model="editUser.info.USnId" 
                                type="password" show-password></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
@@ -166,7 +155,7 @@
                show: false,
                info: {
                    UName: '',
                    USnId: '',
                    USnId: '123456',
                    UJobGroup: '',
                    UNote: '',
                    Upassword: '',
@@ -184,8 +173,7 @@
                show: false,
                info: {
                    UName: '',
                    oldUSnId: '',
                    USnId: '',
                    USnId: '123456',
                    UJobGroup: '',
                    UNote: '',
                    Upassword: '',