feat: 源数据表的可视化

src/mock/menu.json

@@ -127,6 +127,10 @@
         {
           "label": "资源管理",
           "to": "/admin/resource"
+        },
+        {
+          "label": "源数据库",
+          "to": "/admin/sourceStatistics"
         }
       ]
     }

src/packages/components/table/expand.vue

@@ -0,0 +1,108 @@
+<template>
+<el-table
+    :data="tableData"
+    style="width: 100%">
+            <el-table-column type="expand">
+      <template slot-scope="props">
+       <el-table
+       :data= props.row.fieldInfoList
+       style="width: 100%">
+       <el-table-column
+            v-for="column in expandedColumns"
+            :key="column.prop"
+            :label="column.label"
+            :prop="column.prop">
+          </el-table-column>
+       </el-table>
+      </template>     
+    </el-table-column>
+
+        <el-table-column
+        v-for="column in tableColumns"
+      :key="column.prop"
+      :label="column.label"
+      :prop="column.prop">
+                    </el-table-column>
+
+  </el-table>
+</template>
+<script>
+
+export default {
+    props: {
+        'tableHeader': {
+            type: Array,
+            required: true
+        },
+        'tableData': {
+            type: Array,
+            required: true
+        },
+        'expandHeader': {
+            type: Array,
+            required: true
+        }
+    },
+    data() {
+      return {
+      }
+    },
+    mounted() {
+        console.log(this.tableData);
+    },
+    computed: {
+    expandedColumns() {
+      // 根据 expandHeader 生成列配置
+      return this.expandHeader.map((header, index) => ({
+                label: header.label,
+                prop: header.value,
+      }));
+    },
+    tableColumns() {
+        return this.tableHeader.map((header, index) => {
+      if (header.value === 'tableId') {
+        return {
+          label: header.label,
+          prop: header.value,
+          render(h, { row, column, rowIndex }) {
+            return h('div', [rowIndex + 1]); // 创建一个包含序号的 div 元素
+          }
+        };
+      } if (header.value === 'ownerType') {
+        return {
+          label: header.label,
+          prop: header.value,
+          render(h, { row }) {
+            // 从 row 对象中获取 ownerType 的值，并根据该值返回不同的字符串
+            const ownerTypeValue = row[header.value]; // 根据实际情况选择 prop 或 value
+            return h('div', [
+              ownerTypeValue === 0 ? '12345' :
+              ownerTypeValue === 1 ? '公共资源交易中心' :
+              '政府服务'
+            ]);
+          }
+        };
+      }
+        return {
+          label: header.label,
+          prop: header.value,
+        };
+    });
+  },
+  },
+  }
+</script>
+<style scoped>
+.demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+</style>

src/router/admin.js

@@ -118,6 +118,18 @@ export default [
         path: 'resource',
         name: 'resource',
         component: () => import('../view/admin/setting/resources')
+      }, {
+        path: 'sourceDatabase',
+        name: 'sourceDatabase',
+        component: () => import('../view/admin/setting/sourceDatabase')
+      }, {
+        path: 'resourceTransactionsList',
+        name: 'resourceTransactionsList',
+        component: () => import('../view/admin/publicOversight/resourceTransactionsList')
+      },{
+        path: 'areaTransactionList',
+        name: 'areaTransactionList',
+        component: () => import('../view/admin/publicOversight/areaTransactionList')
       }, {
         path: 'sourceStatistics',
         name: 'sourceStatistics',

src/view/admin/publicOversight/CityResourcesTurnover.vue

@@ -45,7 +45,6 @@
         </el-form-item>
 
       </el-form>
-
     </div>
     <br/>
     <div class="cityResource-tableSetting">
@@ -114,7 +113,6 @@
             <el-button style="width: 100px;" type="primary" @click="searchTableData">确定时间</el-button>
           </el-form-item>
         </el-form>
-
       </div>
       <div>
         <div>

src/view/admin/publicOversight/areaTransactionList.js

@@ -0,0 +1,7 @@
+import {server} from "../../../tools/servers";
+
+export class areaTransactionList {
+  static getAreaTransactionList(data) {
+    return server.connection('POST', '/api/resourceTrade/getAreaTransactionList', data);
+  }
+}

src/view/admin/publicOversight/areaTransactionList.vue

@@ -0,0 +1,207 @@
+<template>  
+    <div class="cityResource-tableSetting">
+  
+      <el-card>
+        <el-form ref="tableFormData" class="topFormStyle2" :inline="true" :model="tableFormData" label-width="120px">
+          <el-form-item label="表格时间选择" >
+            <el-date-picker
+              v-model="tableFormData.startTime"
+              type="date"
+              placeholder="开始时间"
+              prefix-icon="dateIcon"
+              format="yyyy/MM/dd"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+            <el-date-picker
+              style="width: 200px;margin-left: 15px;"
+              v-model="tableFormData.endTime"
+              type="date"
+              placeholder="结束时间"
+              prefix-icon="dateIcon"
+              format="yyyy/MM/dd"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+          </el-form-item>
+            <el-form-item style="float: right;margin-right: 20px;">
+            <el-button style="width: 100px;" type="primary" @click="searchTableData">确定时间</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="tableData"
+          :header-cell-style="rowClass"
+          :row-style="rowStyle"
+          style="width: 100%">
+          <el-table-column
+            prop="id"
+            label="id"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="areaName"
+            label="区域名称"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="transactionAmount"
+            label="交易金额"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.transactionAmount }} 元</span>
+    </template>
+          </el-table-column>
+          <el-table-column
+            prop="saveAmount"
+            label="节约金额"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.saveAmount }} 元</span>
+    </template>
+          </el-table-column>
+          <el-table-column
+            prop="transactionCount"
+            label="交易宗数"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.transactionCount }} 件</span>
+    </template>
+          </el-table-column>
+          <el-table-column
+            prop="transactionType"
+            label="交易类别"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+              <div>
+        <!-- 根据 transactionType 的值来渲染不同的内容 -->
+        <span v-if="scope.row.transactionType === 0">工程建设</span>
+        <span v-else-if="scope.row.transactionType === 1">政府采购</span>
+        <span v-else-if="scope.row.transactionType === 2">土地矿权</span>
+        <span v-else-if="scope.row.transactionType === 3">资源财产</span>
+        <span v-else-if="scope.row.transactionType === 4">其他交易</span>
+      </div>
+    </template>
+          </el-table-column>
+          <el-table-column
+            prop="statDate"
+            label="统计时间"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="budgetAmount"
+            label="预算金额"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.budgetAmount }} 元</span>
+    </template>
+          </el-table-column>
+        </el-table>
+  
+        <el-row>
+        <el-col :span="20">
+          <comp-page
+            @handleCurrentChange="handleCurrentChange"
+            :current-page="page"
+            :totalCount="totalCount"
+            style="margin-left: 18px;margin-top: 20px"
+          ></comp-page>
+        </el-col>
+      </el-row>
+      </el-card>
+      </div>
+    </template>
+  
+    <script>
+      import compPage from 'pkgs/components/pagination/index';
+      import {areaTransactionList} from './areaTransactionList.js'
+      import ElSwitch from "element-ui/packages/switch/src/component";
+  
+      export default {
+        name: 'areaTransactionList',
+        data() {
+          return {
+            tableFormData: {
+          startTime: '',
+          endTime: '',
+        },
+        typeSelect: 'date',
+        dateFormat: 'yyyy-MM-dd',
+            page: 1,
+            totalCount: 20,
+            pageSize: 5,
+            tableData: [],
+            optionRole: [],
+          }
+        },
+        components: {
+          ElSwitch,
+          compPage
+        },
+        watch: {
+        mouseOver(newVal) {
+          if (newVal === true) this.buttClass = 'another';
+          else this.buttClass = 'white'
+        }
+      },
+        mounted() {
+          this.getTableData();
+          this.getRole();
+        },
+        methods: {
+          /** 表格获取数据 */
+          getTableData: function () {
+              areaTransactionList.getAreaTransactionList({pageNum: this.page, pageSize: 5, startDate: this.tableFormData.startTime, endDate: this.tableFormData.endTime}).then(res => {
+              this.tableData = res.data.result;
+              this.totalCount = res.data.pageMessage.total;
+              this.page = res.data.pageMessage.pageNum;
+            })
+          },
+                 /** 分页 */
+       handleCurrentChange: function (val) {
+        this.page = val;
+        this.getTableData();
+      },
+       /**确认时间，查询表格数据*/
+       searchTableData: function () {
+            this.getTableData();
+      },
+        }
+      }
+    </script>
+    <style scoped>
+      .el-card {
+        border-radius: 0;
+        background-color: white;
+      }
+  
+      .el-tag {
+        border-radius: 0;
+        font-size: 12.5px;
+        border-color: #d8d8d8;
+        width: 80%;
+        height: 36px;
+        color: #333333;
+        padding-top: 4px;
+        padding-left: 17px;
+        background-color: gainsboro;
+      }
+    
+      .another {
+        background-color: #3448a1;
+        float: right;
+        margin-top: 20px;
+        color: #ffffff;
+      }
+      .cityResource-tableSetting {
+      background-color: white;
+      padding-bottom: 20px;
+    }
+    </style>

src/view/admin/publicOversight/resourceTransactionsList.js

@@ -0,0 +1,7 @@
+import {server} from "../../../tools/servers";
+
+export class resourceTransactionsList {
+  static getResourceTransactionsList(data) {
+    return server.connection('POST', '/api/resourceTrade/getResourceTransactionsList', data);
+  }
+}

src/view/admin/publicOversight/resourceTransactionsList.vue

@@ -0,0 +1,178 @@
+<template>  
+    <div class="cityResource-tableSetting">
+      <el-card>
+        <el-form ref="tableFormData" class="topFormStyle2" :inline="true" :model="tableFormData" label-width="120px">
+          <el-form-item label="表格时间选择" >
+            <el-date-picker
+              v-model="tableFormData.startTime"
+              type="date"
+              placeholder="开始时间"
+              prefix-icon="dateIcon"
+              format="yyyy/MM/dd"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+            <el-date-picker
+              style="width: 200px;margin-left: 15px;"
+              v-model="tableFormData.endTime"
+              type="date"
+              placeholder="结束时间"
+              prefix-icon="dateIcon"
+              format="yyyy/MM/dd"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+          </el-form-item>
+            <el-form-item style="float: right;margin-right: 20px;">
+            <el-button style="width: 100px;" type="primary" @click="searchTableData">确定时间</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="tableData"
+          :header-cell-style="rowClass"
+          :row-style="rowStyle"
+          style="width: 100%">
+          <el-table-column
+            prop="id"
+            label="id"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="itemName"
+            label="交易项目名称"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="ownerUnit"
+            label="业主单位"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="transactionDate"
+            label="交易日期"
+            align="center"
+            width="auto">
+          </el-table-column>
+          <el-table-column
+            prop="budgetAmount"
+            label="预算金额"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.budgetAmount }} 元</span>
+    </template>
+          </el-table-column>
+          <el-table-column
+            prop="transactionAmount"
+            label="成交金额"
+            align="center"
+            width="auto">
+            <template slot-scope="scope">
+      <span>{{ scope.row.transactionAmount }} 元</span>
+    </template>
+          </el-table-column>
+
+        </el-table>
+        <el-row>
+        <el-col :span="20">
+          <comp-page
+            @handleCurrentChange="handleCurrentChange"
+            :current-page="page"
+            :totalCount="totalCount"
+            style="margin-left: 18px;margin-top: 20px"
+          ></comp-page>
+        </el-col>
+      </el-row>
+      </el-card>
+      </div>
+    </template>
+  
+    <script>
+      import compPage from 'pkgs/components/pagination/index';
+      import {resourceTransactionsList} from './resourceTransactionsList.js'
+      import ElSwitch from "element-ui/packages/switch/src/component";
+  
+      export default {
+        name: 'resourceTransactionsList',
+        data() {
+          return {
+            tableFormData: {
+          startTime: '',
+          endTime: '',
+        },
+        typeSelect: 'date',
+        dateFormat: 'yyyy-MM-dd',
+            page: 1,
+            totalCount: 20,
+            pageSize: 5,
+            tableData: [],
+            optionRole: [],
+          }
+        },
+        components: {
+          ElSwitch,
+          compPage
+        },
+        watch: {
+        mouseOver(newVal) {
+          if (newVal === true) this.buttClass = 'another';
+          else this.buttClass = 'white'
+        }
+      },
+        mounted() {
+          this.getTableData();
+          this.getRole();
+        },
+        methods: {
+          /** 表格获取数据 */
+          getTableData: function () {
+            resourceTransactionsList.getResourceTransactionsList({pageNum: this.page, pageSize: 5, startDate: this.tableFormData.startTime, endDate: this.tableFormData.endTime}).then(res => {
+              this.tableData = res.data.result;
+              this.totalCount = res.data.pageMessage.total;
+              this.page = res.data.pageMessage.pageNum;
+            })
+          },
+            /** 分页 */
+       handleCurrentChange: function (val) {
+        this.page = val;
+        this.getTableData();
+      },
+            /**确认时间，查询表格数据*/
+            searchTableData: function () {
+            this.getTableData();
+      },
+        }
+      }
+    </script>
+    <style scoped>
+      .el-card {
+        border-radius: 0;
+        background-color: white;
+      }
+  
+      .el-tag {
+        border-radius: 0;
+        font-size: 12.5px;
+        border-color: #d8d8d8;
+        width: 80%;
+        height: 36px;
+        color: #333333;
+        padding-top: 4px;
+        padding-left: 17px;
+        background-color: gainsboro;
+      }
+    
+      .another {
+        background-color: #3448a1;
+        float: right;
+        margin-top: 20px;
+        color: #ffffff;
+      }
+      .cityResource-tableSetting {
+      background-color: white;
+      padding-bottom: 20px;
+    }
+    </style>

src/view/admin/setting/sourceApi.js

@@ -0,0 +1,7 @@
+import {server} from '../../../tools/servers';
+export class sourceApi {
+    // 获取列表数据获取
+    static getSourceData(data) {
+      return server.connection('POST', '/api/metadata/queryMetaDataList', data);
+    }
+}

src/view/admin/setting/sourceDatabase.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-card>
+<comp-table :tableHeader="tableHeader" :tableData="tableData" :expandHeader="expandHeader"></comp-table>
+<el-row>
+        <el-col :span="20">
+          <comp-page
+            @handleCurrentChange="handleCurrentChange"
+            :current-page="page"
+            :totalCount="totalCount"
+            style="margin-left: 18px;margin-top: 20px"
+          ></comp-page>
+        </el-col>
+      </el-row>
+</el-card>
+
+  </template>
+  <script>
+    import CompTable from '../../../packages/components/table/expand.vue'
+    import compPage from 'pkgs/components/pagination/index';
+    import {sourceApi} from './sourceApi.js'
+    export default {
+      name: 'role',
+      components: {
+        CompTable,
+        compPage
+      },
+      data() {
+        return {
+          page: 1,
+          tableHeader: [
+            {
+              value: 'tableId',
+              label: '序号',
+            },{
+              value: 'tableName',
+              label: '数据表名称',
+            },{
+              value: 'tableRemark',
+              label: '数据表备注',
+            },
+            {
+              value: 'ownerType',
+              label: '所属系统',
+            }
+          ],
+          tableData: [],
+          expandHeader: [
+            {
+              value: 'fieldId',
+              label: '序号',
+            }, {
+              value: 'fieldName',
+              label: '字段名称',
+            }, {
+              value: 'fieldRemark',
+              label: '字段备注',
+            }, {
+              value: 'fieldType',
+              label: '字段类型',
+            }
+          ]
+        }
+      },
+      mounted() {
+      this.getData();
+    },
+      methods: {
+          /** 数据 */
+          getData() {
+            sourceApi.getSourceData({pageNum: this.page, pageSize: 5}).then(res => {
+              console.log(res.data.result);
+              this.tableData = res.data.result.tableInfoList.map((value) => {
+                return {         
+                   ...value,
+                  ownerType: value.ownerType === 0 ? '12345': value.ownerType === 1 ? '公共资源交易中心' : '政府服务'};
+              });
+        })
+         },     
+       /** 分页 */
+       handleCurrentChange: function (val) {
+        this.page = val;
+        this.getData();
+      },
+      }
+    }
+  </script>
+
+  <style scoped>
+    #role-main {
+      background: #ffffff;
+    }
+  
+    .button-style {
+      /*width: 113px;*/
+      background: #3448a1;
+      -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+      border-radius: 0;
+    }
+  
+    .button-remove {
+      -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+      border-radius: 0;
+      /*width: 113px;*/
+      background: #aaaaaa;
+      border: 1px solid #aaaaaa;
+    }
+  
+    .white {
+      background-color: #ffffff;
+      float: right;
+      margin-top: 20px
+    }
+  
+    .another {
+      background-color: #3448a1;
+      float: right;
+      margin-top: 20px;
+      color: #ffffff;
+    }
+  
+  </style>