【Vue.JS】 Vue.js 製作數據走勢記錄表

原創 ◣NSD◥ 2020-06-16 08:08

效果圖

在這裏插入圖片描述

在線預覽

GitHub鏈接

代碼

<!DOCTYPE html>

<head>
    <!-- <meta http-equiv="Refresh" content="5" /> -->
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        table {
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            font-size: 6px;
        }

        table caption {
            font-size: 18px;
            font-weight: 600;
            padding-bottom: 10px;
        }

        table td,
        table th {
            border: 1px solid #cad9ea;
            color: #666;
			height:13px;
            max-height: 30px;
            width: 30px;
        }

        table thead th {
            background-color: #CCE8EB;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #F5FAFA;
        }

        table .thead-col {
            max-width: 65px;
        }

        table td img{
            width: 63px;
            height: 34px;
        }

        p {
            font-size: 4px;
        }
    </style>

<body>
    <div id="app" v-cloak>
        <table style="height: 53%;">
            <caption v-text="title"></caption>
            <thead>
                <tr>
                    <td rowspan="2" class="thead-col">
                        <img src="./src/th1.png" alt="">
                    </td>
                    <td colspan="2" v-for="day in getAllDays()">{{day | longDateToDay}}</td>
                </tr>
                <tr>
                    <td v-for="i in getAllDays().length * 2" v-text="i & 1 == 1 ?'A班': 'B班'"></td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="t in tem_datas">
                    <td class="thead-col" v-text="t.flag + '℃'"></td>
                    <td v-for="i in getAllDays().length * 2"
                        v-text="t.flag == tem_text_flag(Math.round(t.tem_data[date_list[i]])) ? t.tem_data[date_list[i]] : ''"></td>
                </tr>
                <tr>
                    <td class="thead-col">測試數據℃</td>
                    <td v-for="i in getAllDays().length * 2"></td>
                </tr>
                <tr>
                    <td class="thead-col">天氣狀況</td>
                    <td v-for="i in getAllDays().length * 2"></td>
                </tr>
            </tbody>
        </table>
        <table style="height: 33%;">
            <thead>
                <tr>
                    <td rowspan="2" class="thead-col">
                        <img src="./src/th2.png" alt="">
                    </td>
                    <td colspan="2" v-for="day in getAllDays()">{{day | longDateToDay}}</td>
                </tr>
                <tr>
                    <td v-for="i in getAllDays().length * 2" v-text="i & 1 == 1 ?'A班': 'B班'"></td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(t, i) in hum_datas">
                    <td rowspan="2" class="thead-col" v-if="i % 2 == 0"  v-text="t.flag + '% RH'"></td>
                    <td v-for="n in getAllDays().length * 2" v-if="i % 2 == 0"
                        v-text="t.flag == hum_text_flag(t.hum_data[date_list[n]]) ? t.hum_data[date_list[n]] : ''"></td>
					<td v-for="n in getAllDays().length * 2" v-if="i % 2 == 1"
                        v-text="t.flag == hum_text_flag(t.hum_data[date_list[n]]) ? '√' : ''"></td>
                </tr>
                <tr>
                    <td rowspan="2" class="thead-col">測試數據(% RH)</td>
                    <td v-for="i in getAllDays().length * 2"></td>
                </tr>
                <tr>
                    <td v-for="i in getAllDays().length * 2"></td>
                </tr>
            </tbody>
        </table>

        <div class="desc" style="float: left; margin-top:14px;">
            <p> 說明： 1. 如相對溼度 &gt; 75% 採取相應措施（開風扇、除去物料 PE 膜、加大物料擺放間距 </p>
            <p style="text-indent:10em">2. 倉庫參照《倉庫相對溼度點檢表》作此表記錄 (AM4:00/AM9:00)， 相對溼度管制範圍 &lt; 85%</p>
            <p style="text-indent:10em">3. 異常時記錄人員反饋給當班線組長</p>
        </div>

        <div class="desc" style="float: right; height: 8%;">
            <div style="margin-top: 30px; width: 750px;">
                <span style="margin-right: 190px;">覈准： </span>
                <span style="margin-right: 190px;">審覈：</span>
                <span style="margin-right: 190px;">填表：</span></div>
        </div>
    </div>

    <script>
        var fDate = function (value) {
            return value < 10 ? '0' + value : value;
        }
        Date.prototype.format = function () {
            return this.getFullYear() + '-' + fDate(this.getMonth() + 1) + '-' + fDate(this.getDate());
        };
        var app = new Vue({
            el: "#app",
            data: {
                title: '',//表格標題
                start_date: '',//表頭的開始日期
                end_date: '',//表頭結束日期
                tem_data: {},//溫度數據
                hum_data: {},//溼度數據
                min_tem: 0,//最小溫度（左側表頭） 如爲空，則取 tem_data 中值得最小值
                max_tem: 0,//最大溫度（左側表頭） 如爲空，則取 tem_data 中值的最大值
                flag_tems: [],//溫度數組（左側表頭） 如不爲空，則優先使用數組內容作爲表頭，如爲空，則根據 min_tem 和 max tem 和 flag_tem_step 自動計算填充
                flag_tem_step: 1,//溫度步長，當 flag_tems 爲空時，根據最大最小值計算填充表頭數組時的間隔
                min_hum: 0,// 最小溼度
                max_hum: 0,// 最大溼度
                flag_hums: [],//溼度數組
                flag_hum_step: 5//溼度步長
            },
            methods: {
				//溫度數據展示規則，可以根據需求自定義。
			    tem_text_flag(n){
					return this.flag_tems.find(i => Math.abs(n - i) < this.flag_tem_step);
				},
				//溼度數據展示規則，可以根據需求自定義
				hum_text_flag(n){
					return this.flag_hums.find(i => n <= i);
				},
                //根據日期區間獲取所有日期，返回數組
                getAllDays() {
                    var allDays = [];
                    var a = (this.start_date || '').split('-');
                    var b = (this.end_date || '').split('-');
                    var uDb = new Date().setUTCFullYear(a[0], a[1] - 1, a[2]);
                    var uDe = new Date().setUTCFullYear(b[0], b[1] - 1, b[2]);
                    for (var i = uDb; i <= uDe; i = i + 24 * 60 * 60 * 1000) {
                        allDays.push(new Date(parseInt(i)).format());
                    }
                    return allDays;
                },
                //溫度數組爲空時，自動根據其他設定填充溫度數組
                fill_flag_tem() {
                    if (this.flag_tems.length == 0) {
                        if (!this.max_tem)
                            this.max_tem = Math.max(...Object.values(this.tem_data))
                        if (!this.min_tem)
                            this.min_tem = Math.min(...Object.values(this.tem_data))
						//降序
                        while (this.min_tem <= this.max_tem) {
							this.max_tem = parseFloat(this.max_tem)
							this.min_tem = parseFloat(this.min_tem)
                            this.flag_tems.push(this.max_tem)
                            this.max_tem = (this.max_tem - this.flag_tem_step).toFixed(1)
                        }
                    }
                },
                //溼度數組爲空時，自動根據其他設定填充溫度數組
                fill_flag_hum() {
                    if (this.flag_hums.length == 0) {
                        if (!this.max_hum)
                            this.max_hum = Math.max(...Object.values(this.hum_data))
                        if (!this.min_hum)
                            this.min_hum = Math.min(...Object.values(this.hum_data))
						//升序
                        while (this.min_hum <= this.max_hum) {
							this.min_hum = parseFloat(this.min_hum)
							this.max_hum = parseFloat(this.max_hum)
                            this.flag_hums.push(this.min_hum)
                            this.flag_hums.push(this.min_hum)
                            this.min_hum = (this.min_hum += this.flag_hum_step).toFixed(1)
                        }
                    }
                }
            },
            filters: {
                //日期過濾（dd）
                longDateToDay: function (longDate) {
                    return fDate(new Date(Date.parse(longDate)).getDate());
                },
                //日期過濾（mm）
                longDateToMonth: function (longDate) {
                    return fDate(new Date(Date.parse(longDate)).getMonth() + 1);
                }
            },
            computed: {
                //日期數組，後臺返回的所有鍵，溫溼度去重合並，用於表頭取值
                date_list() {
                    return Array.from(new Set(Object.keys(this.tem_data).concat(Object.keys(this.hum_data))))
                },
                //溫度數組組合
                tem_datas() {
                    var t = []
                    this.flag_tems.map((flag) => {
                        t.push({
                            flag, tem_data: this.tem_data
                        })
                    })
                    return t
                },
                //溼度數組組合
                hum_datas() {
                    var t = []
                    this.flag_hums.map((flag) => {
                        t.push({
                            flag, hum_data: this.hum_data
                        })
                    })
                    return t
                }
            },
            mounted() {
                this.fill_flag_tem()
                this.fill_flag_hum()
            },
            created() {
                //以下爲示例數據，通常從 ajax 獲取
                this.title = "倉庫溫溼度走勢記錄表"
                this.start_date = "2020-06-01"
                this.end_date = "2020-06-30"

                this.flag_tems = []
                this.max_tem = ''
                this.min_tem = ''
                this.flag_tem_step = 2

                this.flag_hums = []
                this.max_hum = 90
                this.min_hum = 55
                this.flag_hum_step = 5

                this.tem_data = {
                    "2020-06-01-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-01-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-02-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-02-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-03-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-03-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-04-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-04-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-05-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-05-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-06-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-06-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-07-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-07-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-08-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-08-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-09-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-09-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-10-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-10-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-11-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-11-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-12-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-12-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-13-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-13-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-14-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-14-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-15-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-15-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-16-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-16-B": (Math.random()*20+10).toFixed(1),
                    "2020-06-17-A": (Math.random()*20+10).toFixed(1),
                    "2020-06-17-B": (Math.random()*20+10).toFixed(1),
                }
                this.hum_data = {
                    "2020-06-01-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-01-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-02-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-02-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-03-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-03-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-04-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-04-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-05-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-05-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-06-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-06-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-07-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-07-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-08-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-08-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-09-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-09-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-10-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-10-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-11-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-11-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-12-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-12-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-13-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-13-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-14-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-14-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-15-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-15-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-16-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-16-B": (Math.random()*40+50).toFixed(1),
                    "2020-06-17-A": (Math.random()*40+50).toFixed(1),
                    "2020-06-17-B": (Math.random()*40+50).toFixed(1),
                }
            }
        });
    </script>
</body>
</head>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

sublime Text

下載安裝： http://www.sublimetext.com/3 （1）Sublime Text 3 安裝Package Control： 使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，

灵熙兔 2020-07-04 09:54:33

Node.js環境搭建

灵熙兔 2020-02-21 10:48:43

sublime Text

下載安裝： http://www.sublimetext.com/3 （1）Sublime Text 3 安裝Package Control： 使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，

灵熙兔 2020-07-04 09:54:33

Node.js環境搭建

灵熙兔 2020-02-21 10:48:43

瀏覽器同步測試工具Browsersync

李乾文 2019-09-26 17:16:39

開源作品SimJQ—4K不到的"精簡版Jquery"

不亦 2018-09-02 03:58:39

移動Web MUI框架Switch開關自定義中文文字

不亦 2018-09-02 03:58:38

開源作品layTabPlus 一個layUI後臺Tab佈局框架的擴展插件

不亦 2018-09-02 03:58:36

【前端開發】CKEditor的使用和驗證

Lutreer 2018-08-28 02:20:44

【前端開發】提高網站加載速度

Lutreer 2018-08-28 02:20:42

【前端開發】進度條代碼

Lutreer 2018-08-28 02:20:42

【前端開發】25種提高網頁加載速度的方法和技巧

Lutreer 2018-08-28 02:20:41

開發中問題總結

灵熙兔 2018-08-22 04:16:09

Git代碼管理工具

灵熙兔 2018-08-22 04:16:09

JQuery學習二： DOM操作

灵熙兔 2018-08-22 04:16:09