Ant Design of Vue （3）Card 卡片动态加载后台数据

一.首先来建一个vue静态页面

 卡片 Card - Ant Design Vue (antdv.com)

 来看看页面效果

二.接下修改Card 动态加载显示后台数据

 1.这个是后台接口返回数据

 2.接口有了，那接下来进行页面改造。

 3.接口改造完成，接下来调用接口，加载数据。

    获取后台数据的方式很多种，可以用自己拿手的方式进行数据获取，这里只是提供实现的思路，可能不是最挂的方式，各位可以积极指出。

4.数据加载出来了，让它自动刷新显示实时数据

参考文章：vue项目中实现定时刷新页面（重新渲染数据实时更新） - 飞翔的蜗牛~ - 博客园 (cnblogs.com)

5.实现页面代码

<script>
import { infoAllBufferApi } from '@/api/main'
export default {
    data(){
        return {
            content:null,//卡片内容
             timer:null, //定时器名称
        }
    },
    mounted(){
    this.materielinfoAllBuffer();
    this.timer = setInterval(() => {
        setTimeout(this.materielinfoAllBuffer, 0)
    }, 8000)
    },
    methods:{
        materielinfoAllBuffer(){
        infoAllBufferApi('materielInfoAllBuffer').then(res => {
            if (res.code == 0) {
            console.log("原始数据2"+res.data);
            var jsonobj= eval('(' +res.data + ')');//解析Json字符串
            if(jsonobj.data!=null){
            this.$set(this.$data,'content',jsonobj.data); //展示数据在卡片
            }else{
            this.content="接口出错了";
            }
        }
        }).catch(err => {
        console.log('err:', err)
        })
        }
    },
    beforeDestroy(){
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

 6.页面效果

 三.数据展示出来了，但是状态那一列，我要根据根据对应的数字，显示中文名称，并且显示不同的颜色

参考文章：(32条消息) vue根据不同文字显示不同颜色_茶理li-CSDN博客

 1.页面修改：

2.完整的页面代码

<script>
import { infoAllBufferApi } from '@/api/main'
export default {
    data(){
        return {
            content:null,//卡片内容
             timer:null, //定时器名称
        }
    },
    //根据状态更改颜色
   computed: {
    activation() {
    return (icontent) => { // 使用JavaScript闭包，进行传值操作
    if (icontent ==4){
        return {'color':'red'}
    }
    else if (icontent ==7){
        return {'color':'blue'}
    }
    else if (icontent ==5){
        return {'color':'DeepPink'}
    }
    else if(icontent==2){
        return {'color':'Lime'}
    }
    else if(icontent==0){
        return {'color':'LightSeaGreen'}
            }
        }
    }
    },  
    mounted(){
    this.materielinfoAllBuffer();
    this.timer = setInterval(() => {
        setTimeout(this.materielinfoAllBuffer, 0)
    }, 8000)
    },
    methods:{
        materielinfoAllBuffer(){
        infoAllBufferApi('materielInfoAllBuffer').then(res => {
            if (res.code == 0) {
            console.log("原始数据2"+res.data);
            var jsonobj= eval('(' +res.data + ')');//解析Json字符串
            if(jsonobj.data!=null){
            this.$set(this.$data,'content',jsonobj.data); //展示数据在卡片
            }else{
            this.content="接口出错了";
            }
        }
        }).catch(err => {
        console.log('err:', err)
        })
        }
    },
    beforeDestroy(){
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

 3.页面效果

四.颜色对照表

【C#】Color颜色对照表 - Endv - 博客园 (cnblogs.com)