Flex代码实现汇总:Flex Loading

本文介绍了如何在Flex应用中实现文件下载功能及加载效果。具体包括使用URLRequest发起POST请求以下载指定文件,并通过自定义组件展示加载状态,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.实现FLex点击下载:
private function onWmDownload(event:MouseEvent):void{
    var urlRequest:URLRequest=new URLRequest('data/tangshan/download/hellotangshan.CAB');
    urlRequest.method="POST";
    urlRequest.contentType = 'application/octet-stream';
    navigateToURL(urlRequest,"_blank");
}

2.实现loading效果:
public var dataLoading:DataLoading;
public var isDataLoadingShowing:Boolean = false;
public function showDataLoading():void{
    if(isDataLoadingShowing)return;
    dataLoading = new DataLoading();
    PopUpManager.addPopUp(dataLoading,this,true);
    PopUpManager.centerPopUp(dataLoading);
    isDataLoadingShowing = true;
}

public function removeDataLoading():void{
    PopUpManager.removePopUp(dataLoading);
    isDataLoadingShowing = false;
}
实现细节:在click事件响应函数中加入showDataLoading(),在callback中removeDataLoading()

<template> <div class="home-container"> <el-tabs @tab-click="handleTabChange"> <el-tab-pane label="总览"> <div class="tab-content"> <div class="stats-row"> <el-col :span="6"> <el-card class="stat-card danger"> <div class="stat-title">当前通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #f56c6c">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">今日通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">历史通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">当前线路数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> </div> <div class="table-card"> <el-table :data="summaryTable" border> <el-table-column prop="label" label="指标"></el-table-column> <el-table-column prop="value" label="数值"></el-table-column> </el-table> </div> </div> </el-tab-pane> <el-tab-pane label="省份统计"> <div class="tab-content"> <el-table :data="provinceTable" border> <el-table-column prop="province" label="省份"></el-table-column> <el-table-column prop="currentCall" label="当前通话数" ></el-table-column> <el-table-column prop="todayCall" label="今日通话数" ></el-table-column> <el-table-column prop="historyCall" label="历史通话数" ></el-table-column> <el-table-column prop="currentLine" label="当前线路数" ></el-table-column> <el-table-column prop="circuit" label="电路线路数" ></el-table-column> <el-table-column prop="network" label="网络线路数" ></el-table-column> <el-table-column prop="todayLine" label="今日线路数" ></el-table-column> <el-table-column prop="todayCircuit" label="今日电路线路数" ></el-table-column> <el-table-column prop="todayNetwork" label="今日网络线路数" ></el-table-column> <el-table-column prop="historyLine" label="历史线路数" ></el-table-column> <el-table-column prop="historyCircuit" label="历史电路线路数" ></el-table-column> <el-table-column prop="historyNetwork" label="历史网络线路数" ></el-table-column> </el-table> </div> </el-tab-pane> <el-tab-pane label="趋势分析"> <div class="tab-content"> <div class="chart-placeholder"> <div class="mock-chart"> <div class="chart-line-container"> <div class="chart-line通话"></div> <div class="chart-line线路"></div> </div> <div class="chart-legend"> <span style="color: teal">通话数</span> | <span style="color: purple">线路数</span> </div> <div class="chart-buttons"> <el-button size="mini">近7天</el-button> <el-button size="mini">近30天</el-button> </div> </div> </div> </div> </el-tab-pane> </el-tabs> </div> </template> <script> import { userlist, getsuperes } from "@/utils/https.js"; export default { name: "HomeView", data() { return { summaryTable: [], provinceTable: [ { province: "江苏", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "上海", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "浙江", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "安徽", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, ], superEnterpriseList: [], // 新增的超级企业列表数据 }; }, mounted() { this.loadHomeData(); this.loadSuperEnterpriseList(); // 调用获取超级企业列表的方法 }, methods: { loadHomeData() { userlist() .then(data => { this.summaryTable = data.summary || []; this.provinceTable = data.provinces || this.provinceTable; }) .catch(error => { console.error("加载首页数据失败:", error); this.$message.error("加载数据失败"); }); }, loadSuperEnterpriseList() { getsuperes() .then(response => { this.superEnterpriseList = response.data || []; console.log('超级企业列表:', this.superEnterpriseList); }) .catch(error => { console.error('获取超级企业列表失败:', error); this.$message.error('获取超级企业列表失败'); }); }, handleTabChange(tab) { console.log("切换到:", tab.name); }, handleSizeChange(val) { this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, }, }; </script> <style scoped> :root { --main-bg-color: #f5f7fa; --tab-bg-color: #ffffff; --stat-border-color: #f56c6c; } .home-container { padding: 20px; background: var(--main-bg-color); min-height: calc(100vh - 64px); } .tab-wrapper { background: var(--tab-bg-color); border: 1px solid #ebeef5; border-radius: 4px; } .tab-content { padding: 20px; border-top: none; } .stats-row { margin-top: 10px; } .stat-card { height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .stat-card.danger { border-left: 4px solid var(--stat-border-color); } .stat-title { font-size: 16px; font-weight: 500; margin-bottom: 10px; } .stat-value { font-size: 24px; color: #303133; margin-bottom: 10px; } .stat-sub { font-size: 14px; color: #909399; } .table-card { padding: 20px; } .chart-placeholder { text-align: center; padding: 40px 0; } .mock-chart { position: relative; height: 300px; width: 100%; } .chart-line-container { position: absolute; bottom: 40px; left: 10%; width: 80%; height: 200px; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; } .chart-line通话 { position: absolute; bottom: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(0, 128, 128, 0.2) 0%, teal 100%); clip-path: polygon( 0% 100%, 5% 80%, 10% 60%, 15% 70%, 20% 50%, 25% 60%, 30% 40%, 35% 50%, 40% 30%, 45% 40%, 50% 20%, 55% 30%, 60% 10%, 65% 20%, 70% 0%, 75% 10%, 80% 30%, 85% 20%, 90% 40%, 95% 30%, 100% 50%, 100% 100% ); } .chart-line线路 { position: absolute; bottom: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(128, 0, 128, 0.2) 0%, purple 100%); clip-path: polygon( 0% 100%, 5% 90%, 10% 70%, 15% 80%, 20% 60%, 25% 70%, 30% 50%, 35% 60%, 40% 40%, 45% 50%, 50% 30%, 55% 40%, 60% 20%, 65% 30%, 70% 10%, 75% 20%, 80% 40%, 85% 30%, 90% 50%, 95% 40%, 100% 60%, 100% 100% ); } .chart-legend { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .chart-buttons { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); } .server-select, .province-select { width: 160px; margin-bottom: 20px; } </style>纠错
最新发布
08-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值