项目资料收集

src/views/project/admin/list.vue

@@ -29,7 +29,7 @@
             <el-button type="warning" class="ml-2">导入</el-button>
             <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量导出</el-button>
         </template>
-        <HcTableList ref="tableRef" is-admin @tap="rowNameClick" @check="tableCheck" />
+        <HcTableList ref="tableRef" is-admin @tap="rowNameClick" @check="tableCheck" @completion="completionClick" />
         <template #action>
             <div>建设规模：共计 xx 公里</div>
             <hc-pages :pages="searchForm" @change="pageChange" />

src/views/project/modules/project-list.vue

@@ -78,6 +78,93 @@
                                     <el-table-column prop="key7" label="形象进度百分比(%)" width="100" align="center" />
                                     <el-table-column prop="key8" label="工作计划进展计划" align="center" />
                                 </el-table>
+                                <hc-info-table class="mt-[-1px]">
+                                    <tr>
+                                        <hc-info-table-td is-title width="130px" center>该年累计完成投资(亿元)</hc-info-table-td>
+                                        <hc-info-table-td center>14.1</hc-info-table-td>
+                                        <hc-info-table-td is-title width="130px" center>该年力争完成投资(亿元)</hc-info-table-td>
+                                        <hc-info-table-td center>13.2</hc-info-table-td>
+                                        <hc-info-table-td is-title width="130px" center>该年累计未完成投资(亿元)</hc-info-table-td>
+                                        <hc-info-table-td center>12.3</hc-info-table-td>
+                                    </tr>
+                                </hc-info-table>
+                                <hc-info-table class="mt-[-1px]">
+                                    <tr>
+                                        <hc-info-table-td is-title width="30px" center>存在问题</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                        <hc-info-table-td is-title width="30px" center>工作问题</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                    </tr>
+                                    <tr>
+                                        <hc-info-table-td is-title width="30px" center>填报单位</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                        <hc-info-table-td is-title width="30px" center>联系人</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                    </tr>
+                                </hc-info-table>
+                            </hc-card-item>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </hc-card>
+        </hc-drawer>
+
+        <!-- 项目完成情况 -->
+        <hc-drawer v-model="isCompletionDrawer" to-id="hc-main-box" is-close>
+            <hc-card class="hc-project-list-drawer">
+                <template #header>
+                    <div class="flex-1 text-center text-[24px] font-bold">项目完成情况</div>
+                </template>
+                <hc-info-table>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>项目名称</hc-info-table-td>
+                        <hc-info-table-td center>成渝高速</hc-info-table-td>
+                        <hc-info-table-td is-title width="30px" center>项目类型</hc-info-table-td>
+                        <hc-info-table-td center>高速公路</hc-info-table-td>
+                    </tr>
+                </hc-info-table>
+                <div class="hc-project-list-drawer-year">
+                    <el-scrollbar>
+                        <div class="relative p-2">
+                            <hc-card-item class="year-detail">
+                                <template #header>
+                                    <div class="flex-1 text-center text-[14px]">
+                                        <HcDropdown v-model="yearKey" :datas="yearData" />
+                                    </div>
+                                </template>
+                                <el-table :data="tableYearData1" border class="w-full" :span-method="tableYearMethod1">
+                                    <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-info-table class="mt-[-1px]">
+                                    <tr>
+                                        <hc-info-table-td is-title width="30px" center>存在问题</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                        <hc-info-table-td is-title width="30px" center>工作建议</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                    </tr>
+                                    <tr>
+                                        <hc-info-table-td is-title width="30px" center>填报单位</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                        <hc-info-table-td is-title width="30px" center>联系人</hc-info-table-td>
+                                        <hc-info-table-td center>-</hc-info-table-td>
+                                    </tr>
+                                </hc-info-table>
                             </hc-card-item>
                         </div>
                     </el-scrollbar>
@@ -305,8 +392,9 @@ const rowNameClick = (row) => {
 }
 
 //项目完成情况
+const isCompletionDrawer = ref(false)
 const completion = (row) => {
-    console.log('项目完成情况')
+    isCompletionDrawer.value = true
     emit('completion', row)
 }
 
@@ -374,64 +462,66 @@ const tableYearData = ref([
     { 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: '-', key6: '工作问题', key7: '-' },
-    { quarter: '该年力争完成投资(亿元)', key3: '13.2' },
-    { quarter: '该年累计未完成投资(亿元)', key3: '12.3', key4: '填报单位', key5: '-', key6: '联系人', key7: '-' },
 ])
 
 //合并列或行
 const tableYearMethod = ({ rowIndex, columnIndex }) => {
-    const column = columnIndex, row = rowIndex
+    return setSpanMethod(columnIndex, rowIndex)
+}
+
+
+//年份表格数据
+const tableYearData1 = 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' },
+])
+
+//合并列或行
+const tableYearMethod1 = ({ rowIndex, columnIndex }) => {
+    return setSpanMethod(columnIndex, rowIndex)
+}
+
+const setSpanMethod = (column, row) => {
     if (column === 0) { //第一列
-        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11], bottom = [12, 13, 14]
+        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
         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 }
         }
-    } else if (column === 1) { //第二列
-        const bottom = [12, 13, 14]
-        if (bottom.indexOf(row) !== -1) {
-            return { rowspan: 0, colspan: 1 }
-        }
     } else if (column === 2) { //第三列
-        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11], bottom = [12, 13, 14]
+        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
         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: 0, colspan: 1 }
         } else {
             return { rowspan: 1, colspan: 1 }
         }
-    } else if (column === 3) { //第四列
-        const bottom = [12, 13, 14]
-        if (bottom.indexOf(row) !== -1) {
-            return { rowspan: 0, colspan: 0 }
-        }
     } else if (column === 5) { //第六列
         if (row === 0) {
             return { rowspan: 12, colspan: 1 }
         } else if (row > 0 && row < 12) {
             return { rowspan: 0, colspan: 0 }
-        } else if (row === 12) {
-            return { rowspan: 2, colspan: 1 }
-        } else if (row === 13) {
-            return { rowspan: 0, colspan: 0 }
-        } else if (row === 14) {
-            return { rowspan: 1, colspan: 1 }
         } else {
             return { rowspan: 1, colspan: 1 }
         }
@@ -443,31 +533,9 @@ const tableYearMethod = ({ rowIndex, columnIndex }) => {
         } else if (irows.indexOf(row) !== -1) {
             //非主要的隐藏
             return { rowspan: 0, colspan: 0 }
-        } else if (row === 12) {
-            return { rowspan: 2, colspan: 2 }
-        } else if (row === 13) {
-            return { rowspan: 0, colspan: 0 }
-        } else if (row === 14) {
-            return { rowspan: 1, colspan: 2 }
         } else {
             return { rowspan: 1, colspan: 1 }
         }
-    } else if (column === 7) { //第八列
-        if (row === 12) {
-            return { rowspan: 2, colspan: 1 }
-        } else if (row === 13) {
-            return { rowspan: 0, colspan: 0 }
-        } else if (row === 14) {
-            return { rowspan: 1, colspan: 1 }
-        }
-    } else if (column === 8) { //第九列
-        if (row === 12) {
-            return { rowspan: 2, colspan: 1 }
-        } else if (row === 13) {
-            return { rowspan: 0, colspan: 0 }
-        } else if (row === 14) {
-            return { rowspan: 1, colspan: 1 }
-        }
     }
 }