<td><a href="tel:625
01" class="phone-link"><i class="fas fa-phone"></i>625
01</a></td>
<td class="notes-cell"></td>
</tr>
<tr>
<td>热工采购科</td>
<td>热工采购科巴</td>
<td>一级巴</td>
<td><span class="role-tag role-bazhang">巴长</span></td>
<td>王青.2
0142689</td>
<td><a href="tel:62111" class="phone-link"><i class="fas fa-phone"></i>62111</a></td>
<td class="notes-cell"></td>
</tr>
<tr>
<td>热工采购科</td>
<td>热工采购科巴</td>
<td>一级巴</td>
<td><span class="role-tag role-bazhu">巴助</span></td>
<td>柴雪.2
016
0837</td>
<td><a href="tel:663216" class="phone-link"><i class="fas fa-phone"></i>663216</a></td>
<td class="notes-cell"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer">
<p>化工装备事业部 © 2
025 阿米巴交易平台 | 更新日期: 2
025年9月11日</p>
</div>
</main>
</div>
</div>
</div>
</div>
<script>
// ======================================
// 1. 初始化AmazeUI选项卡（关键修复：自动初始化）
// ======================================
$
(document
).ready
(function
() {
// AmazeUI自动初始化data-am-tabs组件
$
('[data-am-tabs]'
).tabs
();
}
);
// ======================================
// 2. 数据分析页面：模拟数据（保持不变）
// ======================================
const dept1Data = {
name: "化工装备生产一部",
amebas: [
{ name: "生产一部综合巴", target: 85
0000, actual: 82
0000, rate: 96 },
{ name: "碳化硅技术组巴", target: 62
0000, actual: 64
0000, rate: 1
03 },
{ name: "换热器车间巴", target: 78
0000, actual: 73
0000, rate: 94 },
{ name: "特材车间巴", target: 92
0000, actual: 98
0000, rate: 1
07 },
{ name: "成型车间巴", target: 71
0000, actual: 68
0000, rate: 96 }
]
};
const dept2Data = {
name: "化工装备生产二部",
amebas: [
{ name: "生产二部综合巴", target: 76
0000, actual: 73
0000, rate: 96 },
{ name: "列管换热器巴", target: 58
0000, actual: 55
0000, rate: 95 },
{ name: "绕管换热器巴", target: 82
0000, actual: 85
0000, rate: 1
04 },
{ name: "热工无缝管巴", target: 65
0000, actual: 62
0000, rate: 95 },
{ name: "下料车间巴", target: 79
0000, actual: 75
0000, rate: 95 }
]
};
const weeklyData = {
name: "周目标达成情况",
amebas: [
{ name: "生产一部综合巴", target: 195
000, actual: 188
000 },
{ name: "碳化硅技术组巴", target: 145
000, actual: 152
000 },
{ name: "换热器车间巴", target: 175
000, actual: 168
000 },
{ name: "特材车间巴", target: 2
05
000, actual: 215
000 },
{ name: "成型车间巴", target: 16
0000, actual: 155
000 }
]
};
const dailyData = {
name: "日目标达成情况",
amebas: [
{ name: "生产一部综合巴", target: 38
000, actual: 36
000 },
{ name: "碳化硅技术组巴", target: 28
000, actual: 29
000 },
{ name: "换热器车间巴", target: 34
000, actual: 32
000 },
{ name: "特材车间巴", target: 4
0000, actual: 42
000 },
{ name: "成型车间巴", target: 31
000, actual: 3
0000 }
]
};
// ======================================
// 3. 初始化数据分析表格（保持不变）
// ======================================
function initTables
() {
// 生产一部表格
const dept1TableBody = document.getElementById
('dept1-table-body'
);
dept1Data.amebas.forEach
(ameba => {
const row = document.createElement
('tr'
);
row.innerHTML = `
<td>${ameba.name}</td>
<td>¥${ameba.target.toLocaleString
()}</td>
<td>¥${ameba.actual.toLocaleString
()}</td>
<td class="${ameba.rate >= 1
00 ? 'rate-success' : 'rate-warning'}">${ameba.rate}%</td>
`;
dept1TableBody.appendChild
(row
);
}
);
// 生产二部表格
const dept2TableBody = document.getElementById
('dept2-table-body'
);
dept2Data.amebas.forEach
(ameba => {
const row = document.createElement
('tr'
);
row.innerHTML = `
<td>${ameba.name}</td>
<td>¥${ameba.target.toLocaleString
()}</td>
<td>¥${ameba.actual.toLocaleString
()}</td>
<td class="${ameba.rate >= 1
00 ? 'rate-success' : 'rate-warning'}">${ameba.rate}%</td>
`;
dept2TableBody.appendChild
(row
);
}
);
}
// ======================================
// 4. 初始化ECharts图表（保持不变）
// ======================================
function initCharts
() {
// 生产一部图表
const dept1Chart = echarts.init
(document.getElementById
('dept1-chart'
));
dept1Chart.setOption
({
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel:
true },
xAxis: {
type: '
category',
data: dept1Data.amebas.map
(a => a.name
),
axisLabel: { rotate: 3
0 }
},
yAxis: { type: 'value', name: '金额（元）' },
series: [
{ name: '目标收入', type: 'bar', data: dept1Data.amebas.map
(a => a.target
), itemStyle: { color: '#3498db' } },
{ name: '实际收入', type: 'bar', data: dept1Data.amebas.map
(a => a.actual
), itemStyle: { color: '#2ecc71' } }
]
}
);
// 生产二部图表
const dept2Chart = echarts.init
(document.getElementById
('dept2-chart'
));
dept2Chart.setOption
({
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel:
true },
xAxis: {
type: '
category',
data: dept2Data.amebas.map
(a => a.name
),
axisLabel: { rotate: 3
0 }
},
yAxis: { type: 'value', name: '金额（元）' },
series: [
{ name: '目标收入', type: 'bar', data: dept2Data.amebas.map
(a => a.target
), itemStyle: { color: '#3498db' } },
{ name: '实际收入', type: 'bar', data: dept2Data.amebas.map
(a => a.actual
), itemStyle: { color: '#2ecc71' } }
]
}
);
// 周目标图表
const weeklyChart = echarts.init
(document.getElementById
('weekly-chart'
));
weeklyChart.setOption
({
tooltip: { trigger: 'axis' },
legend: { data: ['目标', '实际'], top:
0 },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel:
true },
xAxis: {
type: '
category',
data: weeklyData.amebas.map
(a => a.name
),
axisLabel: { rotate: 3
0 }
},
yAxis: { type: 'value', name: '金额（元）' },
series: [
{ name: '目标收入', type: 'bar', data: weeklyData.amebas.map
(a => a.target
), itemStyle: { color: '#9b59b6' } },
{ name: '实际收入', type: 'bar', data: weeklyData.amebas.map
(a => a.actual
), itemStyle: { color: '#1abc9c' } }
]
}
);
// 日目标图表
const dailyChart = echarts.init
(document.getElementById
('daily-chart'
));
dailyChart.setOption
({
tooltip: { trigger: 'axis' },
legend: { data: ['目标', '实际'], top:
0 },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel:
true },
xAxis: {
type: '
category',
data: dailyData.amebas.map
(a => a.name
),
axisLabel: { rotate: 3
0 }
},
yAxis: { type: 'value', name: '金额（元）' },
series: [
{ name: '目标收入', type: 'bar', data: dailyData.amebas.map
(a => a.target
), itemStyle: { color: '#e67e22' } },
{ name: '实际收入', type: 'bar', data: dailyData.amebas.map
(a => a.actual
), itemStyle: { color: '#f1c4
0f' } }
]
}
);
// 窗口resize时重绘图表
window.addEventListener
('resize',
() => {
dept1Chart.resize
();
dept2Chart.resize
();
weeklyChart.resize
();
dailyChart.resize
();
}
);
}
// ======================================
// 5. 联系人页面功能（保持不变）
// ======================================
function initContactFunctions
() {
// 导航点击效果
document.querySelectorAll
('.nav-link'
).forEach
(link => {
link.addEventListener
('click', function
(e
) {
// 移除所有active类
document.querySelectorAll
('.nav-link'
).forEach
(item => {
item.classList.remove
('active'
);
}
);
// 为当前点击项添加active类
this.classList.add
('active'
);
// 平滑滚动到目标位置
const targetId = this.getAttribute
('href'
);
const targetElement = document.querySelector
(targetId
);
if
(targetElement
) {
window.scrollTo
({
top: targetElement.offsetTop - 1
00,
behavior: 'smooth'
}
);
}
}
);
}
);
// 搜索功能
const searchInput = document.querySelector
('.search-box input'
);
searchInput.addEventListener
('input', function
() {
const searchTerm = this.value.toLowerCase
().trim
();
document.querySelectorAll
('.baba-table tbody tr'
).forEach
(row => {
row.style.display = row.textContent.toLowerCase
().includes
(searchTerm
) ? '' : 'none';
}
);
}
);
}
// ======================================
// 6. 页面加载完成后初始化所有功能
// ======================================
document.addEventListener
('DOMContentLoaded', function
() {
initTables
();
initCharts
();
initContactFunctions
();
}
);
</script>
</body>
</html>上述是我一个前端的页面，现在想把数据分析页面的数据从sqlserver数据库获取，前端四个数据表需要获取不同的数据：1、获取Scb为化工装备生产一部 各阿米巴Amoeba的月目标收入、月实际收入 2、获取Scb为化工装备生产二部 各阿米巴Amoeba的月目标收入、月实际收入 3、获取各阿米巴周目标收入、周实际收入 4、获取各阿米巴日目标收入、日实际收入 我的数据类如下
///<summary>
///阿米巴收入目标配置表
///</summary>
[SugarTable
("AmoebaTarget"
)]
public partial class AmoebaTarget
{
public AmoebaTarget
(){
}
/// <summary>
///
Description:
///
DefaultValue:
/// Nullable:False
/// <summary>
// [
Browsable(false
)]
[DisplayName
(""
)]
[SugarColumn
(IsPrimaryKey=
true,IsIdentity=
true)]
public int ID {get;set;}
/// <summary>
///
Description:阿米巴
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("阿米巴"
)]
public string Amoeba {get;set;}
/// <summary>
///
Description:所属部门
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("所属部门"
)]
public string Dpt {get;set;}
/// <summary>
///
Description:所属生产部
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("所属生产部"
)]
public string Scb {get;set;}
/// <summary>
///
Description:月目标收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("月目标收入"
)]
public decimal? TargetIncome_Monthly {get;set;}
/// <summary>
///
Description:周目标收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("周目标收入"
)]
public decimal? TargetIncome_Weekly {get;set;}
/// <summary>
///
Description:日目标收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("日目标收入"
)]
public decimal? TargetIncome_Dayily {get;set;}
/// <summary>
///
Description:月实际收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("月实际收入"
)]
public decimal? ActualIncome_Monthly {get;set;}
/// <summary>
///
Description:周实际收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("周实际收入"
)]
public decimal? ActualIncome_Weekly {get;set;}
/// <summary>
///
Description:日实际收入
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("日实际收入"
)]
public decimal? ActualIncome_Dayily {get;set;}
/// <summary>
///
Description:创建人
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("创建人"
)]
public string Creator {get;set;}
/// <summary>
///
Description:创建时间
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("创建时间"
)]
public DateTime? CreateTime {get;set;}
/// <summary>
///
Description:更新人
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("更新人"
)]
public string Updater {get;set;}
/// <summary>
///
Description:更新时间
///
DefaultValue:
/// Nullable:
True
/// <summary>
// [
Browsable(false
)]
[DisplayName
("更新时间"
)]
public DateTime? UpdateTime {get;set;}
}
本文介绍了一个 C# 分页功能中使用的属性设计方法。该属性用于表示当前页面的记录数量，并通过 VS 的属性面板展示，方便开发者进行配置。
扫一扫
3435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
