数据统计0

ruoyi-ui/src/api/tablelist/commonTable.js

@@ -138,3 +138,63 @@ export function addDragTable(data) {
     baseURL: process.env.VUE_APP_BASE_API3
   })
 }
+
+
+// 新增动态表格统计
+export function addStatistic(data) {
+  return request({
+    url: '/system/statistic',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 修改动态格统计
+export function updateStatistic(data) {
+  return request({
+    url: '/system/statistic',
+    method: 'put',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 获取动态统计详细信息
+export function getStatistic(id) {
+  return request({
+    url: '/system/statistic/' + id,
+    method: 'get',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 删除动态格统计
+export function delStatistic(data) {
+  return request({
+    url: '/system/statistic/',
+    method: 'delete',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 导出动态格统计数据
+export function exportStatistic(data) {
+  return request({
+    url: '/system/statistic/export',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 查询动态格统计列表
+export function listStatistic(query) {
+  return request({
+    url: '/system/statistic/list',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}

ruoyi-ui/src/components/RightToolbar/index.vue

@@ -82,7 +82,6 @@ export default {
   methods: {
     // 统计
     toggleCount() {
-      console.log(12456)
       this.$emit("update:showCount", !this.showCount);
     },
     // 搜索

ruoyi-ui/src/views/tableMange/index.vue

@@ -300,7 +300,7 @@
               添加数据字段
             </el-button>
             
-            <el-button size="mini" type="primary" @click=countHandle>确定统计</el-button>
+            <!-- <el-button size="mini" type="primary" @click=countHandle>确定统计</el-button> -->
          
             <el-table
               :data="dragTableStatisticList"
@@ -344,6 +344,39 @@
                 label="统计对象"
                 width="150">
               </el-table-column>
+              <el-table-column
+                  label="操作"
+                  align="center"
+                  class-name="small-padding fixed-width"
+                >
+              <template slot-scope="scope">
+                <el-dropdown>
+                  <el-button type="warning" plain size="small">
+                    处理<i class="el-icon-arrow-down el-icon--right"></i>
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>
+                      <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdateStat(scope.row)"
+                        >修改
+                      </el-button>
+                    </el-dropdown-item>
+                        <el-dropdown-item>
+                          <el-button
+                            size="mini"
+                            type="text"
+                            icon="el-icon-delete"
+                            @click="handleDeleteStat(scope.row)"
+                            >删除
+                          </el-button>
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </template>
+               </el-table-column>
             </el-table>
 
           </el-tab-pane>
@@ -352,12 +385,45 @@
     </el-row>
 
     <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
+      <div class="cardBox">
+        <el-card
+          shadow="hover"
+          :body-style="{ padding: '20px' }"
+          class="card"
+          v-for="(item, index) in deepragTableStatisticList"
+          :key="index"
+        >
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="item.statisticTitle"
+            placement="top-start"
+          >
+            <div class="title">{{ item.statisticTitle }}</div>
+          </el-tooltip>
+
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="item.statisticDescription"
+            placement="top-start"
+          >
+            <div class="description">{{ item.statisticDescription }}</div>
+          </el-tooltip>
+
+          <div class="type">
+            <div class="statisticType">{{ item.statisticType }}</div>
+            <div class="count">统计结果</div>
+          </div>
+        </el-card>
+      </div>
+
       <el-row :gutter="10" class="mb8">
         <el-col :span="18">
           <el-input placeholder="请输入" clearable />
         </el-col>
 
-        <el-col :span="6">
+        <el-col :span="6" class="previewbtn">
           <el-button
             type="primary"
             icon="el-icon-search"
@@ -508,10 +574,10 @@
 
     <!-- 添加数据统计对话框 -->
     <el-dialog
-      title="添加统计数据字段"
+      :title="staictitle"
       :visible.sync="isShowAddData"
       width="30%">
-
+      
       <el-form 
       label-width="100px" 
       :model="dataCountFormData">
@@ -535,19 +601,10 @@
           <el-select 
           v-model="dataCountFormData.statisticType" 
           placeholder="请选择统计类型">
-            <el-option v-for="item in dataType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
+            <el-option v-for="item in dataType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue"></el-option>
             <!-- <el-option label="状态" value="status"></el-option> -->
           </el-select>
         </el-form-item>
-<!-- 
-        <el-form-item label="状态码" v-show="dataCountFormData.statisticType === 'status' ">
-          <el-select 
-          v-model="dataCountFormData.statuscode" 
-          placeholder="请选择状态码">
-            <el-option label="已完成" value="1"></el-option>
-            <el-option label="未完成" value="0"></el-option>
-          </el-select>
-        </el-form-item> -->
 
         <el-form-item label="统计描述" prop="statisticDescription">
           <el-input v-model="dataCountFormData.statisticDescription"></el-input>
@@ -558,7 +615,8 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="closeAddDialog">取 消</el-button>
-        <el-button type="primary" @click="addData">确 定</el-button>
+        <el-button v-if="staictitle == '修改统计数据字段'" type="primary" @click="upadtaData">确 定</el-button>
+        <el-button v-else type="primary" @click="addData">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -572,6 +630,8 @@ import {
   unionListTableData,
   getInfoBySqlKey,
   addTableData,
+  addStatistic,
+  updateStatistic
 } from "@/api/tablelist/commonTable";
 import { getDicts } from "@/api/system/dict/data";
 import {
@@ -596,6 +656,7 @@ export default {
   components: { Queryfrom, Treeselect },
   data() {
     return {
+      staictitle: '添加统计数据字段',
       isInputInvalid: false,
       // 修改表格时的menuId
       menuId: "",
@@ -610,7 +671,9 @@ export default {
       // 查询条件
       queryFromWhere: {},
       // 当前table唯一标识
-      sqlkey: "",
+      sqlKey: "",
+      // 动态数据sqlkey
+      staticSqlKey: '',
       // 表格的高度
       tableKey: "",
       // tableHeight: document.documentElement.scrollHeight - 245 + "px",
@@ -727,13 +790,17 @@ export default {
       activeName: 'menuedit', 
       // 数据统计对象
       dataCountFormData: {},
-      // 数据统计表格
+      // 添加数据统计表格
       dragTableStatisticList: [],
+      deepragTableStatisticList:[],
+      tableSqlList: [],
+      searchFieldList: [],
       // 是否切换到数据统计
       menudata: false,
       // 显示添加字段对话框
       isShowAddData: false,
       dataType : [],
+      uuid: '',
     };
   },
   computed: {
@@ -795,7 +862,6 @@ export default {
     },
   },
   methods: {
-
     // 字段描述验证规则
     // blurval(value){
     //   this.isInputInvalid = value == '' ?  true : false;
@@ -1166,6 +1232,37 @@ export default {
       }
       return sql;
     },
+    getStaticSQL(key) {
+      // let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.tableFieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+
+      sql +=
+        key + 
+        " FROM " +
+        isNeedUsername +
+        // prefix +
+        this.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
     // 处理列表信息
     columnsHandler(columns) {
       let resArr = [];
@@ -1282,6 +1379,15 @@ export default {
             this.$message.warning("请至少选择一个包含查询字段");
             return false;
           }
+          const dataType = await this.getDicts("table_statistic_type")
+          this.deepragTableStatisticList = JSON.parse(JSON.stringify(this.dragTableStatisticList))
+          this.deepragTableStatisticList.forEach(item => {
+            dataType.data.forEach(val => {
+              if(val.dictValue ==  item.statisticType){
+                item.statisticType = val.dictLabel
+              }
+            })
+          })
           this.columns = this.columnsHandler(tempColumns);
           this.queryParams.isAsc = this.formData.isAsc;
           // 发送请求获取预览数据
@@ -1309,8 +1415,8 @@ export default {
     },
     // 创建回调
     async createHandle() {
-      console.log(123);
-      this.tableKey = uuidv4();
+      // console.log(123);
+      // this.sqlKey = uuidv4();
       this.isInputInvalid = true
       this.$refs.formData.validate(async (valid) => {
         if (valid) {
@@ -1353,8 +1459,8 @@ export default {
           //   this.$message.error("请补全关联条件");
           //   return;
           // }
-          let uuid = uuidv4();
-
+          this.uuid = uuidv4();
+          this.tableKey = uuidv4();
           // 表单
           let result;
           if (this.tId) {
@@ -1374,7 +1480,7 @@ export default {
             result = await updateMenu(payLoad);
           } else {
             let sqlKeyObj = {
-              sqlkey: uuid,
+              sqlkey: this.uuid,
             };
             let payLoad = {
               component: "tablelist/commonTable/listInfo",
@@ -1385,7 +1491,7 @@ export default {
               menuType: "C",
               orderNum: this.menuOrderNum,
               parentId: this.formData.routePath,
-              path: uuid,
+              path: this.uuid,
               query: JSON.stringify(sqlKeyObj),
               status: "0",
               visible: "0",
@@ -1407,7 +1513,7 @@ export default {
               primaryKey: this.formData.primaryKey,
               orderByColumn: this.formData.orderByColumn,
               sortOrder: this.formData.isAsc,
-              sqlKey: uuid,
+              sqlKey: this.uuid,
               dtColumnName: columns, //列字段标题名称(存储显示字段信息
               // dtColumnName: JSON.stringify(columns).replace(/"/g, "'"), //列字段标题名称(存储显示字段信息
               timeFormat: this.formData.timeFormate,
@@ -1446,9 +1552,19 @@ export default {
               data.menuId = result.data;
               res = await addDragTable(data);
             }
+            this.staticSqlKey = uuidv4()
+            this.dragTableStatisticList.forEach(item => {
+              let key = item.statisticType + '(' + this.tableName + '.' + item.statisticField + ')'+ ' as result'
+              this.tableSqlList.push({
+                tableSql: this.getStaticSQL(key), 
+                sqlKey: this.staticSqlKey, 
+              })
+              this.searchFieldList = searchFieldList
+              item.sqlKey = this.staticSqlKey
+              item.tableKey = this.tableKey
+            })
 
-            console.log('res', res);
-            if(res.code == 200){
+            if(res.code == 200 && this.dragTableStatisticList.length !== 0){
               this.countHandle()
             }
             // 关闭当前页面
@@ -1481,6 +1597,7 @@ export default {
     async initTableData(tId) {
       let res = await getTableInfo(tId);
       if (res.code == 200) {
+        this.dragTableStatisticList = res.data.dragTableStatisticList
         let echoData = JSON.parse(res.data.echoData);
         this.tableName = echoData.tableName;
         this.tableFieldList = echoData.tableFieldData;
@@ -1554,11 +1671,16 @@ export default {
       this.dataType = this.dataType.data
       // console.log(this.dataType)
     },
+    // 修改数据字段
+    upadtaData(){
+      this.dragTableStatisticList = this.dragTableStatisticList.map(value => value.id == this.dataCountFormData.id ? this.dataCountFormData : value)
+      this.isShowAddData = false
+      this.dataCountFormData = {}
+    },
     // 添加数据字段
     addData(){
       this.dataCountFormData.tableKey = this.tableKey
       this.dragTableStatisticList.push(this.dataCountFormData)
-      console.log(this.dragTableStatisticList)
       this.isShowAddData = false
       this.dataCountFormData = {}
     },
@@ -1569,24 +1691,41 @@ export default {
     },
     // 确定统计
     countHandle(){
-      if(this.dragTableStatisticList.length == 0){
-        this.$message.warning("请确定统计数据字段");
-        return
-      }
-      console.log('确定统计');
-
-      console.log(this.dragTableStatisticList);
-    }
+      addStatistic({
+        dragTableStatisticList: this.dragTableStatisticList,
+        tableSqlList: this.tableSqlList,
+        searchFieldList: this.searchFieldList,
+        dtTableName: this.tableName
+      }).then(res=> {
+        // console.log(res)
+      })
+    },
+    // 修改统计信息
+    handleUpdateStat(row){
+      this.staictitle = '修改统计数据字段'
+      this.dataCountFormData = row
+      this.addDataDialog()
+      this.isShowAddData = true
+    },
+    // 删除统计信息
+    handleDeleteStat(row){
+      this.dragTableStatisticList.forEach((item, index) => {
+        console.log(item);
+        if(item.id == row.id){
+          this.dragTableStatisticList.splice(index, 1);
+        }
+      })
+    },
   },
   created() {},
-  async mounted() {
-    this.getAllTable();
-    this.initDragTable();
-    await this.getMenuList();
-    if (this.$route.query.tId) {
-      this.tId = this.$route.query.tId;
-      this.initTableData(this.tId);
-    }
+    async mounted() {
+      this.getAllTable();
+      this.initDragTable();
+      await this.getMenuList();
+      if (this.$route.query.tId) {
+        this.tId = this.$route.query.tId;
+        this.initTableData(this.tId);
+      }
   },
 };
 </script>
@@ -1627,4 +1766,56 @@ export default {
 .mb10{
   margin-top: 10px;
 }
+.cardBox {
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card {
+  /* width:15%; */
+  flex-basis: 28%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  min-width: 210px;
+  .title {
+    /* width:20%; */
+    font-size: 18px;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .description {
+    width: 70%;
+    font-size: 13px;
+    color: #9699a2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    float: left;
+  }
+  .type {
+    float: right;
+    margin-top: 10px;
+    .statisticType{
+      font-size: 18px;
+    }
+  }
+  .count {
+    font-size: 30px;
+  }
+}
+.mb8{
+  ::v-deep .el-col-18{
+    width: 30% !important;
+    min-width: 220px !important;
+  }
+  ::v-deep .previewbtn{
+    min-width: 190px !important;
+  }
+}
 </style>

ruoyi-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -111,6 +111,7 @@
       <right-toolbar
         :showCount.sync="showCount"
         :showSearch.sync="showSearch"
+        :counts="true"
         @queryTable="pageList"
       ></right-toolbar>
     </el-row>

ruoyi-ui/src/views/tablelist/commonTable/queryfrom.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="cardBox" v-show="showCount">
       <el-card
         shadow="hover"
@@ -30,8 +31,8 @@
           <div class="count">{{ item.count }}</div>
         </div>
       </el-card>
-
-      <el-form
+    </div>
+    <el-form
       :model="queryParams.queryMap"
       ref="queryForm"
       size="small"
@@ -161,9 +162,7 @@
       </div>
 
     </el-form>
-    </div>
-
-  
+  </div>
 </template>
 
 <script>
@@ -345,6 +344,7 @@ export default {
   flex-basis: 15%;
   margin-bottom: 10px;
   margin-right: 15px;
+  min-width: 130px;
   .title {
     /* width:20%; */
     font-size: 18px;