【Vue.JS】 Vue.js 制作数据走势记录表

最新推荐文章于 2024-09-05 08:24:36 发布
最新推荐文章于 2024-09-05 08:24:36 发布
阅读量343 收藏
点赞数
分类专栏： # ● Vue 文章标签： vue 走势记录表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaotaiban1097/article/details/106641330
版权

效果图

在这里插入图片描述

在线预览

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>
HolaSecurity
关注
专栏目录
数仓+血缘图+流程图+前端+js
06-03
此血缘图实现了以下功能： 1、支持节点跨级连线 2、支持正反向连线（任意连线）3、节点层级清晰 4、支持放大、缩小功能 5、支持拖拽节点功能 6、连线为箭头连线 7、连线上可以加文字标注 8、节点内容清晰明了 9、节点可以加不同的背景颜色 10、每个节点不需要坐标 。适合数仓的表、字段等血缘图。
基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏
08-03 251
基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏 基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏 poste...
数据血缘系列（19）—— 数据血缘技术实现之数据血缘可视化
最新发布
大数据流动
09-05 1707
大家好，我是独孤风。在当今数据驱动的商业环境中，数据治理成为企业成功的关键因素之一，而数据血缘正是数据治理成功的一个关键。数据血缘的可视化，作为一种将复杂数据流动过程图形化的手段，为企业提供了更加直观的理解方式。本文将深入探讨数据血缘可视化的工具、步骤以及图形库和框架，并结合数据治理的实际需求，详细分析这些要素如何协同作用以提高数据管理效率。本文为《数据血缘分析原理与实践 》一书读书笔记，部分观点...
Vue 获取最近一个月，前三个月， 最近半年，最近一年， 当前月末日期
weixin_46918498的博客
05-12 7339
/* * 获取当前年月日 * */ export function nowDate() { const loadYear = new Date().getFullYear() let loadMonth = new Date().getMonth() + 1 let loadDay = new Date().getDate() if (loadMonth >= 1 && loadMonth <= 9) { loadMonth = '0' + loadMon
Vue汇总
weixin_44593999的博客
11-26 354
Vue 声明式渲染 — 组件系统 – 客户端路由 – 集中式状态管理 – 项目构建 易用 灵活 高效 vue 的基本使用步骤： 需要提供标签用于填充数据 引入vue.js库文件 可以使用vue语法做功能 把vue提供的数据填充到标签里面 <body> <!-- {{}} 差值表达式 支持基本的计算操作 --> <div id="app">{{msg}}</div> <script type="text/javascript"
vue血缘分析图
weixin_64824339的博客
01-17 2264
可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。根据json渲染血缘图，任意节点可自由拖动；移动到连线上高亮相关。React + Canvas 的混合模式来实现血缘图谱。画布支持整体缩放 （滚轮缩放）和整体拖动。，以及数据在多个处理过程中的。下载血缘保存为png图片。数据血缘描述了数据的。
Vue.js前端开发实战-源代码.zip
07-07
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，...
vue.js_node.js_mysql在线聊天室源码.zip
11-07
- **数据库设计**：合理设计数据库表结构，如用户表、聊天记录表，以及相应的增删改查操作。 - **Socket.IO事件驱动**：利用Socket.IO的事件机制，实现消息的发送和接收。 - **安全性**：包括数据验证、用户认证和...
入门Vue.js基础学习笔记记录，遇坑!
01-09
- **Vue.js** 是一种轻量级的前端JavaScript框架，用于构建用户界面。它专注于视图层，易于上手且灵活。 - **官网地址**：[Vue.js官方中文API文档](https://vuejs.bootcss.com/guide/)。这是学习Vue.js的基础资源之...
Vue.js bootstrap前端实现分页和排序
10-20
Vue.js是一种构建用户界面的渐进式JavaScript框架，由尤雨溪创建。Vue的设计思想是尽可能的简单，可以轻松上手，同时又足够灵活，能够适应复杂的单页应用。它以数据驱动和组件化的思想实现了页面的动态数据绑定和...
Vue.js仿微信聊天窗口展示组件功能
10-19
Vue.js作为一款流行的JavaScript框架，被广泛用于构建用户界面。 2. **自定义指令**：文档提及的Vue.directive('emotion', {...})，展示了Vue.js中如何创建自定义指令来扩展Vue的功能。在这里，自定义指令用于将...
电脑台帐管理系统数据库(补)
07-15
本系统主要用于电脑台帐新购登记，在线维修申请，报废登记，各种必须报表，EXCEL文档的导入/导出，在线维修满意度反馈（主要用于绩效考核）等等。
vue3纵向表格走势图表
qq_21579949的博客
08-21 324
vue3纵向走势图表、类似彩票开奖历史结果走势
vue项目日历数据功能模块的业务操作介绍
ck2018182068的博客
11-08 214
vue项目中日历数据功能模块的业务操作介绍
【使用vue实现的人物关系图谱】
u012632105的博客
01-29 2485
使用vue实现的人物关系图谱 - 简书
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
HushPlot的博客
11-04 783
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
Vue开发库存管理前端页面时一些小经验记录
weixin_34014277的博客
04-16 513
全局封装 场景是在项目中很多地方都需要用到相同的函数，例如 this.$message({ type: 'success', message: '提示语' }) 复制代码如果出现次数过多，会造成书写麻烦和代码复杂的情况。 解决思路：首先对函数进行抽象封装，封装后利用vue的mixin将其注入到各个vue中。 因为这里的函数是大部分组件中都可能用到的，固利用vue的全局混合。 新建一个g...
Vue项目里面使用jsmind.js插件来制作思维导图页面完成需求
热门推荐
weixin_50158618的博客
08-23 1万+
vue项目使用jsmind来实现web的思维树图功能页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HolaSecurity

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值