前端使用for循环展示所有后端数据

最新推荐文章于 2023-04-19 16:18:15 发布
最新推荐文章于 2023-04-19 16:18:15 发布
阅读量1k 收藏 1
点赞数
文章标签： 前端 后端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aa13451765025/article/details/123253814
版权


@{
    this.Layout = null;
}
<title>IAS - PMTC - Molding</title>
<script src="~/Scripts/vue.min.js"></script>
<script src="~/Scripts/ElementUI/element-ui.js"></script>
<link rel="stylesheet" href="~/Content/ElementUI/element-ui.css" />
<script src="~/Scripts/axios.js"></script>
<style>
    h2 {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        color: dimgrey;
        font-size: 3vh;
    }

    .running {
        background: #67C23A;
        border-radius: 15px;
    }

    .planstop {
        background: #6E6B68;
        border-radius: 15px;
    }

    .planstopAct {
        background: #C0C0C0;
        border-radius: 15px;
    }
    .warning {
        background: #A40000;
        border-radius: 15px;
    }
    .unplanstop {
        background: #E1644B;
        border-radius: 15px;
    }
    /* .el-row {
        padding: 10px 0;
        background-color: #93280B;
    }*/
    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 0px;
        min-height: 10vh;
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        font-size: 2vh;
    }

        .grid-content:hover {
            background-color: #B3C0D1;
            cursor: pointer;
        }

    .grid-contentsel {
        border-radius: 15px;
        min-height: 10vh;
        display: flex;
        /*border: 3px solid #409EFF;*/
        /*justify-content: center;*/
        align-items: center;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        font-size: 2vh;
        font: bold;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .bg-green {
        background: #67C23A;
        border-radius: 15px;
    }

    .bg-wickhousing {
        background: #00FFFF;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-contentdetail {
        min-height: 350px;
        display: flex;
        justify-content: center;
        /*align-items: center;*/
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .el-icon-share {
        color: lightgray;
        font: bold;
        font-size: 3vh;
    }

    .el-icon-message-solid {
        color: lightgray;
        font: bold;
        font-size: 3vh;
    }

    .p1 {
        margin: 0 2vh 0 3vh;
        font-size: 4vh;
        font: bold;
    }

    .p2 {
        margin: 0 1vh 0 0;
        font-size: 2.5vh;
    }

    p {
        font-size: 3vh;
        font: bold;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .middivhousing {
        border-radius: 15px;
        min-height: 10vh;
        background: #00FFFF;
    }

    .tank {
        border-radius: 15px;
        min-height: 10vh;
        background: #2EDA4B;
    }

    .mouthpiece {
        border-radius: 15px;
        min-height: 10vh;
        background: #9B9B9B;
    }

    .hexcap {
        border-radius: 15px;
        min-height: 10vh;
        background: #D7B76F;
    }
</style>
<style scoped>
    .el-dialog {
        background: rgba(192,192,192,0.5);
        padding: 0px;
    }
</style>
<div id="molding">
    @*<el-dialog title="" :visible.sync="dialogTableVisible"
               :modal="true" width="70vh"
               :close-on-click-modal="false" heigth="70vh"
               :fullscreen="true"
               :show-close="false"
               :destroy-on-close="true"
               v-loading="loading" element-loading-text="Loading">
        <br />

    </el-dialog>*@

    <div style="display:flex;justify-content:space-between">
        <h2>PMTC Temperature & Humidity Monitor</h2>
        
    </div>
    <div>
        <el-container>
            <el-header>
                <template>
                    <div>
                        <el-row :gutter="50" type="flex" justify="space-around">
                            <el-col :span="8">
                                <div v-for="(item, i) in statusData.slice(0,2)" v-on:dblclick="postURL()">
                                    <div>
                                        <el-row style="margin-bottom: 0;" :class="[item.H > '65' ? 'warning':'',item.H < '40' ? 'warning':'',(item.T - 27315) / 100>'30' ? 'warning':'',(item.T - 27315) / 100<'15' ? 'warning':'',item.machineStatus == '2' ? 'planstop':'','running']">

                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        Area: {{ item.Area }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        Time: {{ item.dateTime }}
                                                    </p>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        T: {{ (item.T - 27315) / 100 + ' ℃' }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        H: {{ item.H / 100 + ' %' }}
                                                    </p>
                                                </div><div style="text-align:center">
                                                    <p>
                                                        SerialNo: {{ item.SerialNo }}
                                                    </p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <br />
                                    </div>
                                </div>

                            </el-col>
                            <el-col :span="8">
                                <div v-for="(item, i) in statusData.slice(2,4)" v-on:dblclick="postURL()">
                                    <div>
                                        <el-row style="margin-bottom: 0;" :class="[item.H > '65' ? 'warning':'',item.H < '40' ? 'warning':'',(item.T - 27315) / 100>'30' ? 'warning':'',(item.T - 27315) / 100<'15' ? 'warning':'',item.machineStatus == '2' ? 'planstop':'','running']">

                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        Area: {{ item.Area }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        Time: {{ item.dateTime }}
                                                    </p>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        T: {{ (item.T - 27315) / 100 + ' ℃' }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        H: {{ item.H / 100 + ' %' }}
                                                    </p>
                                                </div><div style="text-align:center">
                                                    <p>
                                                        SerialNo: {{ item.SerialNo }}
                                                    </p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <br />
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div v-for="(item, i) in statusData.slice(4,5)" v-on:dblclick="postURL()">
                                    <div>
                                        <el-row style="margin-bottom: 0;" :class="[item.H > '65' ? 'warning':'',item.H < '40' ? 'warning':'',(item.T - 27315) / 100>'30' ? 'warning':'',(item.T - 27315) / 100<'15' ? 'warning':'',item.machineStatus == '2' ? 'planstop':'','running']">

                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        Area: {{ item.Area }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        Time: {{ item.dateTime }}
                                                    </p>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div style="text-align:center">
                                                    <p>
                                                        T: {{ (item.T - 27315) / 100 + ' ℃' }}
                                                    </p>
                                                </div>
                                                <div style="text-align:center">
                                                    <p>
                                                        H: {{ item.H / 100 + ' %' }}
                                                    </p>
                                                </div><div style="text-align:center">
                                                    <p>
                                                        SerialNo: {{ item.SerialNo }}
                                                    </p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <br />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                    </div>
                </template>
            </el-header>
        </el-container>
    </div>

</div>


<script>
    var app = new Vue({
        el: '#molding',
        data() {
            return {
                statusData: [],
                src: '/PIC/colorStatus.png',
                fit: 'fill',
                dialogTableVisible: true,
                loading: "true",
                picVisible: '',
                timer: '',
                value: 0
            };
        },
        mounted() {
            this.MoldingStatus();
            this.timer = setInterval(this.MoldingStatus, 300000);
        },
        methods: {
            MoldingStatus() {
                //this.dialogTableVisible = true
                //this.loading = true
                axios.get("../Facility/THMonitor").then(
                    res => {
                        this.statusData = res.data.data
                        //this.loading = false
                        //this.dialogTableVisible = false
                        //this.picVisible = true
                    }

                ).catch(
                    //错误异常
                    err => {
                        this.msg = err.status;
                    }
                )
            },
            postURL() {
                window.open("https://kochind.sharepoint.com/sites/PMC_Dev_Suzhou", "_blank");

                //if (machineType == 'ARBURG') {
                //    //window.location.href = '/PMTCProduction/MoldingOEE';
                //    window.open("/PMTCProduction/MoldingOEE", "_blank");
                //} else {
                //    //window.location.href = '/PMTCProduction/' + 'index.htm';
                //    window.open("/html/Milacron/" + machineFK + ".htm" + "?v1.0", "_blank");
                //}
            },
            mulOEE() {
                window.location.href = '/PMTCProduction/MoldingMulOEE';
            },
            OEEdefinition() {
                window.location.href = '/PMTCProduction/OEEdefinetion';
            },
            maxPage() {
                window.open("/PMTCProduction/MoldingStatus2")
            },
            homePage() {
                window.location.href = '/PMTCProduction/MoldingStatus2';
            },
            beforeDestroy() {
                clearInterval(this.timer);
            },
        }
    })
</script>

Aa13451765025
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
matlab循环输出全部结果,for循环为什么只输出k=3时的结果，想要把所有的循环结果......
weixin_32445333的博客
03-19 1669
function [p ,O ,Ep ] = Triangle(a)syms x y ;for k=1:3A(1)=a(k,1); A(2)=a(k,2); dA=a(k,3);B(1)=a(k,4); B(2)=a(k,5); dB=a(k,6);C(1)=a(k,7); C(2)=a(k,8); dC=a(k,9);O(1)=a(k,10);O(2)=a(k,11);%距离方程,以信标节点为圆...
For循环数据库的数据到页面
weixin_44540800的博客
06-10 767
For循环数据库的数据到页面 开发工具与关键技术：MVC 作者：zhh 撰写时间：2019.6.3 在很多时候页面上所要呈现的是数据库里面的数据，打个比方就像饭店要实时显示在电脑上的台数一样，比如本来没有桌台后来买了桌台，这些会实时变化的数据时，就不可能在一个一个的去添加代码，所以我分享的是for循环数据库的数据到页面上。 实现是控制器的代码： 写一个方法public ActionResult G...
for循环
从菜鸟到入土的博客
12-25 1115
for循环语法一、for循环二、增强 for 循环 语法 for(初始化; 布尔表达式; 更新) { //代码语句 } 说明： 1.最先执行初始化步骤。可以声明一种类型，但可初始化一个或多个循环控制变量，也可以是空语句。 2.然后，检测布尔表达式的值。如果为 true，循环体被执行。如果为false，循环终止，开始执行循环体后面的语句。 3.执行一次循环后，更新循环控制变量。 4.再次检测布尔表达式。循环执行上面的过程。 一、for循环 输出1-20的所有整数 public class Test {
前端html循环加载数据
邢美玲
10-27 1615
ionic中的*ngFor <div style="position:fixed;margin-top: 80%;" *ngIf="phoneticside"> <p class="letter" *ngFor="let i of phoneticList;" (click)="jumpToPhonetic(i)">{{i}}</p> </d...
Hbuilder X 前端获取后端数据
James124563的博客
09-14 7171
Hbuilder X 前端获取后端数据 1.创建appUser.js文件 // 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分) let getAppUserUrl = '/user/getAppUser'; // 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分： // https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%
layUI实现前端分页和后端分页
10-16
在网页开发中，分页是常见的功能之一，用于处理大量数据的展示，提高用户体验。layUI是一个优秀的前端组件库，提供了丰富的UI元素和便捷的API，包括前端分页和后端分页的实现。本篇将详细介绍如何使用layUI来实现这...
Django实现将views.py中的数据传递到前端html页面,并展示
12-20
在Django框架中，开发Web应用时，我们经常需要将后端的数据传递到前端的HTML页面上进行展示。本文将通过一个具体的实例讲解如何在views.py中处理数据，并将其传递到HTML页面上。 首先，我们需要了解Django的MVT...
vue forEach循环数组拿到自己想要的数据方法
01-19
<el v-for=(item) label=item.id key=item.id class=checkboxMargin> <span>{{item.value}}{{item.checked}} handleJurisdiction(index, row) {//获取权限 this.selectedCheck=[]; let me = this; this....
基于django传递数据到后端的例子
01-20
首先，前端部分使用了一个for循环为每个按钮动态生成name属性，代码如下： ```html 解析" onclick="Parsefunc(this.name)"> ``` 这里，`{{item.document}}`是Django模板语言，它将根据循环中的`item`对象的`...
本项目是一个知识图谱可视化程序，采用前后端分离技术实现，前端使用Vue，后端使用Flask.zip
最新发布
10-21
3. **指令系统**：Vue.js 提供了一系列内置指令，如 `v-for` 进行循环渲染、`v-if` 进行条件判断，简化了DOM操作，提高开发效率。 4. **状态管理**：Vue.js 可以借助 Vuex 实现全局状态管理，方便在组件之间共享和...
【web】web前端table循环显示整理（列表+字典+QuerySet）
微雨停了的博客
04-16 3144
文章目录一、列表1.1 后端数据1.2 前端代码1.3 前端效果1.4 python与django遍历列表的区别：1.4.1 python1.4.2 django二、字典2.1 后端数据2.2 前端代码2.3 前端效果2.4 python与django遍历字典的区别：2.4.1 python2.4.2 django2.5 字典中加入新键值对的方法：三、外列表，内字典（一）3.1 后端数据3.2 前端代码3.3 前端效果四、外列表，内字典（二）4.1 后端数据3.2 前端代码4.3 前端效果五、外字典，内列表
前端向后端获取数据的三种方法:ajax、axios、fetch
最爱松露巧克力
08-17 3280
前端向后端获取数据的三种方法:ajax、axios、fetch 1、jQuery中的ajax get方法： $.ajax({ url:"v4/api/film/now-playing?t=1539401039415&page=1&count=5", 　　　　 type:"GET",　 success:(result)=>{ ...
前端向后端请求数据，使用Vuex管理(加工)数据，动态展示数据（state仓库三连环），组件复用
WinnerCC的博客
04-19 666
使用mock模拟后端数据(
微擎多图上传模块进行多图预览
AlertQian的博客
10-26 877
开发微擎模块的时候，客户端用 tpl_app_form_field_image 进行图片上传，上传后进行编辑时无法显示已上传的多张图片 tpl_app_form_field_image的第二个参数只能是字符串，为了能显示多图，这里用jQ的方法进行实现 项目中我是将多张图片的地址拼接成字符串放入一个字段中 直接上代码： {php echo tpl_app_form_field_image('imgUrl');}//这是图片上传模板 var imgstr="{$item['thumb']}";//.
v-for方法遍历数组，从后端获取数据，前端取值调用uni app
热门推荐
qq_40197100的博客
04-25 1万+
v-for方法遍历数组，从后端获取数据，前端取值调用 template写法 <!-- row数组中的每一列 --> <!-- cateId为后端详情页时要取得值id --> <template> <navigator class="category" v-for="(row, index) in categoryList" :key="ind...
html中怎么数据循环显示出来,for循环json数据到html重复输出
weixin_29491167的博客
06-04 1213
var data = {"message":"","error":"false","human":[{"title":"我的活动","title_r":"8/23","msg":[{"name":"一起去品尝茶论道吧","name_r":"一对一","content":"报名费5元/人","content_r":"邀请3-5人","contents":"2018-02-07 19:23:37","...
前端实现--list列表追加数据
weixin_44669966的博客
02-14 4822
list_item : { name: 'niuniu', age: 23} lists : [ {name:'gulu', age: 12} ] 简单写法（不考虑id值）： this.lists.push(this.list_item) 如果list_item需要获取id的唯一取值： 方法一： let id = new Date().getTime() 方法二： 列表的最大的id值+1（保证id值不重复） let id = this.lists.length > 0 ? Math
前端Vue中接口v-for循环列表交叉每一项并且添加新内容新样式，可调循环位置看图
m0_49714202的博客
01-28 1415
<template> <!-- 调换位置 --> <div class="box"> <!-- %前端代表 取余数 --> <!-- index从0开始下标，奇数标index % 2 是1 ，偶数标是0，0代表false，非0的1代表true --> <ul style="list-style-type: none"> <li class="list-item" v-for="(item
当后台只返回一维数组前端展示需要遍历el-row按行按列展示的时候自定义封装的二维数组
19年8月小结
06-02 1685
methods中或者工具函数utils中定义chunk方法，调用并传入参数即可得到二维数组，参数是待处理的一维数组和每列展示多少个，我是每列展示4个数据 chunk(array, size) { //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined const length = array.length //判断不是数组，或者size没有设置，size小于1，就返回空数组 if (!le.
使用bootstrap展示后端上传的数据
05-23
要展示后端上传的数据，我们可以使用Bootstrap的表格组件。以下是一个简单的示例代码： ```html <!-- 引入Bootstrap的CSS和JS文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 表格结构 --> <table class="table"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <!-- 使用后端数据循环生成表格行 --> {% for user in users %} <tr> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td>{{ user.gender }}</td> </tr> {% endfor %} </tbody> </table> ``` 在上面的代码中，我们使用了Bootstrap的`table`组件来创建一个表格，使用`thead`和`tbody`标签分别定义表头和表体。在表头中，我们定义了四个列，分别是编号、姓名、年龄和性别。在表体中，我们使用后端传递过来的数据循环生成表格行，使用`{{ }}`语法来输出变量值，其中`users`是后端传递过来的数据。这样就可以在前端页面中展示后端上传的数据了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值