|
@@ -68,6 +68,24 @@
|
|
|
</el-form>
|
|
|
</ContentWrap>
|
|
|
|
|
|
+ <!-- 新增数据统计区域 -->
|
|
|
+ <ContentWrap class="mb-15px">
|
|
|
+ <div class="statistics-container">
|
|
|
+ <div class="stat-item" :style="{ color: totalColor }">
|
|
|
+ <span>总数:</span>
|
|
|
+ <span>{{ statistics.total || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item" :style="{ color: filledColor }">
|
|
|
+ <span>已填报:</span>
|
|
|
+ <span>{{ statistics.filled || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item" :style="{ color: unFilledColor }">
|
|
|
+ <span>未填报:</span>
|
|
|
+ <span>{{ statistics.unFilled || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ContentWrap>
|
|
|
+
|
|
|
<ContentWrap class="mb-15px">
|
|
|
<div class="color-legend">
|
|
|
<div class="legend-item">
|
|
@@ -254,6 +272,16 @@ const exportLoading = ref(false) // 导出的加载中
|
|
|
|
|
|
const rootDeptId = ref(157)
|
|
|
|
|
|
+// 新增统计相关变量
|
|
|
+const statistics = ref({
|
|
|
+ total: '-',
|
|
|
+ filled: '-',
|
|
|
+ unFilled: '-'
|
|
|
+})
|
|
|
+const totalColor = '#00DD99'
|
|
|
+const filledColor = '#0055BB'
|
|
|
+const unFilledColor = '#FF5500'
|
|
|
+
|
|
|
// 表格引用
|
|
|
const tableRef = ref()
|
|
|
// 表格容器引用
|
|
@@ -317,6 +345,41 @@ const percentageFormatter = (row: any, column: any, cellValue: any, index: numbe
|
|
|
return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
|
|
|
};
|
|
|
|
|
|
+// 新增获取统计数据的方法
|
|
|
+const getStatistics = async () => {
|
|
|
+ // 重置统计数据
|
|
|
+ statistics.value = {
|
|
|
+ total: '-',
|
|
|
+ filled: '-',
|
|
|
+ unFilled: '-'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有选择时间范围,不调用接口
|
|
|
+ if (!queryParams.createTime || queryParams.createTime.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await IotRhDailyReportApi.rhDailyReportStatistics({
|
|
|
+ createTime: queryParams.createTime
|
|
|
+ })
|
|
|
+
|
|
|
+ // 处理统计数据
|
|
|
+ const statsMap = {}
|
|
|
+ res.forEach(item => {
|
|
|
+ statsMap[item.groupName] = item.count
|
|
|
+ })
|
|
|
+
|
|
|
+ statistics.value = {
|
|
|
+ total: statsMap['总数'] || '-',
|
|
|
+ filled: statsMap['已填报'] || '-',
|
|
|
+ unFilled: statsMap['未填报'] || '-'
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取统计数据失败', error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 可伸缩列配置
|
|
|
const FLEXIBLE_COLUMNS = ['deptName', 'taskName', 'constructionStatus', 'relocationDays', 'designInjection',
|
|
|
'transitTime', 'dailyGasInjection', 'dailyWaterInjection', 'dailyPowerUsage', 'dailyInjectGasTime',
|
|
@@ -331,6 +394,10 @@ const getList = async () => {
|
|
|
const data = await IotRhDailyReportApi.getIotRhDailyReportPage(queryParams)
|
|
|
list.value = data.list
|
|
|
total.value = data.total
|
|
|
+
|
|
|
+ // 获取统计数据
|
|
|
+ await getStatistics()
|
|
|
+
|
|
|
// 获取数据后计算列宽
|
|
|
nextTick(() => {
|
|
|
calculateColumnWidths();
|
|
@@ -526,6 +593,8 @@ const handleQuery = () => {
|
|
|
/** 重置按钮操作 */
|
|
|
const resetQuery = () => {
|
|
|
queryFormRef.value.resetFields()
|
|
|
+ // 重置后需要重新获取统计数据
|
|
|
+ getStatistics()
|
|
|
handleQuery()
|
|
|
}
|
|
|
|
|
@@ -704,4 +773,18 @@ watch(list, () => {
|
|
|
max-width: 500px;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
+
|
|
|
+/* 统计区域样式 */
|
|
|
+.statistics-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
</style>
|