|
|
@@ -59,7 +59,25 @@
|
|
|
<HcDropdown v-model="yearKey" :datas="yearData" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- 22222
|
|
|
+ <el-table :data="tableYearData" border class="w-full" :span-method="tableYearMethod">
|
|
|
+ <el-table-column prop="quarter" label="季度" width="100" align="center" />
|
|
|
+ <el-table-column prop="month" class-name="line" width="120" align="center">
|
|
|
+ <template #header>
|
|
|
+ <div class="hc-table-th-line">
|
|
|
+ <span class="left">月份</span>
|
|
|
+ <span class="right">完成情况</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="key1" label="计划完成投资额(亿元)" width="100" align="center" />
|
|
|
+ <el-table-column prop="key2" label="投资完成额(亿元)" width="100" align="center" />
|
|
|
+ <el-table-column prop="key3" label="投资未完成额(亿元)" width="100" align="center" />
|
|
|
+ <el-table-column prop="key4" label="全年目标" width="100" align="center" />
|
|
|
+ <el-table-column prop="key5" label="工作计划" width="100" align="center" />
|
|
|
+ <el-table-column prop="key6" label="累计进展计划" align="center" />
|
|
|
+ <el-table-column prop="key7" label="工作计划进展计划" align="center" />
|
|
|
+ <el-table-column prop="key8" label="形象进度百分比(%)" width="100" align="center" />
|
|
|
+ </el-table>
|
|
|
</hc-card-item>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
@@ -339,6 +357,51 @@ const yearData = ref([
|
|
|
{ key: '2024', label: '2024年' },
|
|
|
])
|
|
|
|
|
|
+//年份表格数据
|
|
|
+const tableYearData = ref([
|
|
|
+ { quarter: '一季度', month: '1月', key1: '13', key2: '1.1', key3: '11.9' },
|
|
|
+ { quarter: '一季度', month: '2月', key1: '13', key2: '1.2', key3: '10.7' },
|
|
|
+ { quarter: '一季度', month: '3月', key1: '13', key2: '1.3', key3: '9.4' },
|
|
|
+
|
|
|
+ { quarter: '二季度', month: '4月', key1: '14', key2: '1.4', key3: '1.1' },
|
|
|
+ { quarter: '二季度', month: '5月', key1: '14', key2: '1.5', key3: '1.2' },
|
|
|
+ { quarter: '二季度', month: '6月', key1: '14', key2: '1.6', key3: '1.3' },
|
|
|
+
|
|
|
+ { quarter: '三季度', month: '7月', key1: '15', key2: '1.7', key3: '1.1' },
|
|
|
+ { quarter: '三季度', month: '8月', key1: '15', key2: '1.8', key3: '1.2' },
|
|
|
+ { quarter: '三季度', month: '9月', key1: '15', key2: '1.9', key3: '1.3' },
|
|
|
+
|
|
|
+ { quarter: '四季度', month: '10月', key1: '16', key2: '2.0', key3: '1.1' },
|
|
|
+ { quarter: '四季度', month: '11月', key1: '16', key2: '2.1', key3: '1.2' },
|
|
|
+ { quarter: '四季度', month: '12月', key1: '16', key2: '2.1', key3: '1.3' },
|
|
|
+
|
|
|
+ { quarter: '该年累计完成投资(亿元)', key3: '14.1', key4: '存在问题', key5: '-' },
|
|
|
+ { quarter: '该年力争完成投资(亿元)', key3: '13.2', key4: '-', key5: '-' },
|
|
|
+ { quarter: '该年累计未完成投资(亿元)', key3: '12.3', key4: '填报单位', key5: '-' },
|
|
|
+])
|
|
|
+
|
|
|
+//合并列或行
|
|
|
+const tableYearMethod = ({ rowIndex, columnIndex }) => {
|
|
|
+ const column = columnIndex, row = rowIndex
|
|
|
+ if (column === 0) { //第一列
|
|
|
+ const rows = [0, 3, 6, 9]
|
|
|
+ const irows = [1, 2, 4, 5, 7, 8, 10, 11]
|
|
|
+ const bottom = [12, 13, 14]
|
|
|
+ if (rows.indexOf(row) !== -1) {
|
|
|
+ //主要季度隐藏
|
|
|
+ return { rowspan: 3, colspan: 1 }
|
|
|
+ } else if (irows.indexOf(row) !== -1) {
|
|
|
+ //非主要的季度隐藏
|
|
|
+ return { rowspan: 0, colspan: 0 }
|
|
|
+ } else if (bottom.indexOf(row) !== -1) {
|
|
|
+ //底部三个
|
|
|
+ return { rowspan: 1, colspan: 4 }
|
|
|
+ } else {
|
|
|
+ return { rowspan: 1, colspan: 1 }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
defineExpose({
|
|
|
batchRemove,
|
|
|
batchExport,
|
|
|
@@ -381,6 +444,46 @@ defineExpose({
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
+ .el-table {
|
|
|
+ --el-table-border-color: #dcdcdc;
|
|
|
+ --el-table-header-text-color: #101010;
|
|
|
+ }
|
|
|
+ .el-table th.el-table__cell.line {
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: contents;
|
|
|
+ }
|
|
|
+ .hc-table-th-line {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ display: contents;
|
|
|
+ .left {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 6px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ right: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ left: -20px;
|
|
|
+ width: 180px;
|
|
|
+ height: 1px;
|
|
|
+ background: #dcdcdc;
|
|
|
+ transform: rotate(27deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
