企业库知识总结：可视化大屏

企业概要

• 左上角这一小板块；
• 代码如下：

	<div class="left-gl card-shadow">
					<div class="card-title">企业概览</div>
					<div class="card-main--gl">

						<div class="item" v-for="item in enterprises" :key="item.name">
							<div class="item-img">
								<img :src="item.imgSrc" alt="" srcset="" />
							</div>
							<div class="item-main">
								<div class="percent">{{ item.rent }}</div>
								<div class="num">{{ item.num }}</div>
								<div class="dec">{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>

数据

• 多个数据，用v-for遍历数组enterprises;
• 从接口获取数据：
  • 先引入接口import { enterpriseOverview } from '@/api/home/index.js';
  • created： html加载完成之前，执行。created() {this.getEnterpise()},;

data(){
return{
enterprises: [],
},
},
methods(){
	async getEnterpise() {
			const { data } = await enterpriseOverview()
			const imgs = [tu1, tu2, tu3, tu4]
			this.enterprises = data.map((item, index) => {
				item.imgSrc = imgs[index]
				return item
			})
		},
}