数据统计

src/views/modules/shequzhili/statics/index.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="mode-block resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <el-form ref="searchForm" :inline="true" :model="dataForm" size="small">
+        <el-form-item label="所属组织" label-width="100px"
+                      prop="agencyId">
+          <el-cascader ref="cascaderUnit" v-model="dataForm.agencyId" :options="optionsA" :props="{ checkStrictly: true, emitPath: false,children:'subAgencyList',label:'agencyName',value:'agencyId'}" clearable />
+            <!-- <template slot-scope="{ node, data }">
+              <div @click="cascaderClick(data)">
+                <span>{{ data.objectName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </div>
+            </template> -->
+        </el-form-item>
+        <el-form-item label="统计类型"
+                      prop="startTime"  label-width="100px">
+          <el-radio v-model="dataForm.type" label="end" @change="handleRadioCHange">截止累计值</el-radio>
+          <el-radio v-model="dataForm.type" label="Interval" @change="handleRadioCHange">区间新增值</el-radio>     
+          <el-date-picker v-if="dataForm.type == 'end'" 
+            v-model="dataForm.startTime"
+            type="datetime"
+            clearable
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyyMMddHHmmss" 
+          />     
+          <el-date-picker v-if="dataForm.type == 'Interval'" v-model="timeRange"
+            type="datetimerange"
+            clearable
+            size="small"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="选择日期"
+            end-placeholder="选择日期"
+            value-format="yyyy-MM-dd HH:mm:ss" 
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" class="diy-button--search" @click="handleSearch">查询</el-button>
+          <el-button
+            class="diy-button--reset"
+            size="small"
+            @click="resetForm('searchForm')"
+            >重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <el-button @click="totalHandle"
+                    class="diy-button--add"
+                    size="small">总计</el-button>
+        <el-button @click="exportHandle"
+                    class="diy-button--reset"
+                    size="small" :loading="exportLoading">导出</el-button>
+      </div>
+      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border  style="width: 100%"
+      :height="tableHeight" show-summary>
+        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column min-width="100" prop="resiUserCount" label="注册居民数" header-align="center" align="center" >
+          <!-- <template slot-scope="scope">
+            <span v-if="scope.row.orgType==='agency'"><a class="name-a" style="color: #2195fe;" @click="handleClick(scope.row)">{{scope.row.orgName}}</a></span>
+            <span v-else>{{scope.row.orgName}}</span>
+          </template> -->
+        </el-table-column>
+        <el-table-column min-width="100" prop="partyMemberCount" label="注册党员数" header-align="center" align="center" />
+        
+        <el-table-column min-width="100" prop="icEventCount" label="事件总数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="resiEventCount" label="居民上报事件数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="pcEventCount" label="平台录入事件数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="projectCount" label="项目总数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="issueProjectCount" label="议题转项目数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="icEventProjectCount" label="事件立项数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="agencyProjectCount" label="立项数" header-align="center" align="center" />
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="pageSize"
+          layout="sizes, prev, pager, next, total"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+    <el-dialog
+            title="总计"
+            :visible.sync="totalVisible"
+            width="60%">
+      <template>
+        <el-table
+                :data="tableData"
+                style="width: 100%"
+                height="200">
+          <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
+        <el-table-column min-width="100" prop="resiUserCount" label="注册居民数" header-align="center" align="center" />
+        <el-table-column min-width="100" prop="partyMemberCount" label="注册党员数" header-align="center" align="center" />
+        
+        <el-table-column min-width="100" prop="icEventCount" label="事件总数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="resiEventCount" label="居民上报事件数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="pcEventCount" label="平台录入事件数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="projectCount" label="项目总数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="issueProjectCount" label="议题转项目数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="icEventProjectCount" label="事件立项数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="agencyProjectCount" label="立项数" header-align="center" align="center" />
+        </el-table>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+// import AddOrUpdate from './factagencyuserhousedaily-add-or-update'
+import { dateFormats } from '@/utils/index'
+export default {
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/data/stats/factAgencyUserHouseDaily/page',
+        getDataListIsPage: true,
+        deleteURL: '/data/stats/factAgencyUserHouseDaily',
+        deleteIsBatch: true,
+        exportURL: '/data/stats/factAgencyUserHouseDaily/export'
+      },
+      exportLoading: false,
+      dataListLoading: false,
+      optionsA: [],
+      totalVisible: false,
+      pickerOptions: {
+        disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+      },
+      dataList: [],
+      timeRange: '',
+      dataForm: {
+        customerId: this.$store.state.user.customerId,
+        agencyId: '',
+        startTime: dateFormats('YYYY-mm-dd HH:MM:SS', new Date()),
+        endTime: '',
+        type: 'end'
+      },
+      total: 0,
+      tableData: [],
+      pageNo: 1,
+      pageSize: 20
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  created () {
+    this.getGridList()
+    this.getTableList()
+    // this.getValiheList()
+  },
+  watch: {
+    timeRange (val) {
+      if (Array.isArray(val) && val.length == 2) {
+        this.dataForm.startTime = val[0];
+        this.dataForm.endTime = val[1];
+      } else {
+        this.dataForm.startTime = "";
+        this.dataForm.endTime = "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+    tableHeight() {
+      const h = this.clientHeight - 360 + this.iframeHeigh;
+      const _h = this.clientHeight - 360;
+      return this.$store.state.inIframe ? h : _h;
+    },
+  },
+  methods: {
+    handleClick(row) {
+      this.dataForm.agencyId = row.orgId
+      this.handleSearch()
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.timeRange = "";
+      this.dataForm.startTime = "";
+      this.dataForm.endTime = "";
+      this.dataForm.type = 'end';
+      this.pageNo = 1
+      this.getTableList()
+    },
+    handleSearch() {
+      this.dataForm.type = 1
+      this.pageNo = 1
+      this.getTableList()
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageSize = val;
+      this.getTableList();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNo = val;
+      this.getTableList();
+    },
+    handleRadioCHange(val) {
+      console.log('val----', val)
+      this.timeRange = ''
+      this.dataForm.startTime = ''
+      this.dataForm.endTime = ''
+      if (val == 'end') {
+        this.dataForm.startTime = dateFormats('YYYY-mm-dd HH:MM:SS', new Date())
+      }
+    },
+    exportHandle () {
+      const url = '/data/aggregator/org/orgProjectDetailList/export'
+      this.dataForm.type = 1
+      this.exportLoading = true
+      this.$http({
+        method: 'Post',
+        url,
+        responseType: 'blob',
+        data: this.dataForm
+      }).then(res => {
+        // this.download(res.data, title + '.xls')
+        if (res.headers["content-disposition"]) {
+          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          console.log('filename', fileName)
+          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          var url = window.URL.createObjectURL(blob)
+          var aLink = document.createElement('a')
+          aLink.style.display = 'none'
+          aLink.href = url
+          aLink.setAttribute('download', fileName)
+          document.body.appendChild(aLink)
+          aLink.click()
+          document.body.removeChild(aLink) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+          // this.exportLoading = false
+        } else this.$message.error('下载失败')
+        this.exportLoading = false
+      }).catch(err => {
+        console.log('err', err)
+        this.exportLoading = false
+        return this.$message.error('网络错误')
+      })
+    },
+    cascaderClick (nodeData) {
+      this.dataForm.agencyId = nodeData.objectId;
+      this.dataForm.level = nodeData.objectType
+      this.$refs.cascaderUnit.checkedValue = nodeData.objectId;
+      this.$refs.cascaderUnit.computePresentText();
+      this.$refs.cascaderUnit.toggleDropDownVisible(false);
+
+    },
+    totalHandle () {
+      this.tableData = []
+      let resiUserCount = 0, 
+      partyMemberCount = 0, 
+      icEventCount = 0, 
+      resiEventCount = 0, 
+      pcEventCount = 0, 
+      projectCount = 0, 
+      issueProjectCount = 0, 
+      icEventProjectCount = 0, 
+      agencyProjectCount = 0
+      if (this.dataList.length > 0) {
+        this.dataList.forEach(item => {
+          resiUserCount += item.resiUserCount
+          partyMemberCount += item.partyMemberCount
+          icEventCount += item.icEventCount
+          resiEventCount += item.resiEventCount
+          pcEventCount += item.pcEventCount
+          projectCount += item.projectCount
+          issueProjectCount += item.issueProjectCount
+          resiUicEventProjectCountserCount += item.icEventProjectCount
+          agencyProjectCount += item.agencyProjectCount
+        })
+      }
+      
+      this.tableData.push({
+        resiUserCount, 
+        partyMemberCount, 
+        icEventCount, 
+        resiEventCount, 
+        pcEventCount, 
+        projectCount, 
+        issueProjectCount, 
+        icEventProjectCount, 
+        agencyProjectCount
+      })
+      // this.$http
+      //         .post('/data/aggregator/org/orgProjectDetailList', this.dataForm)
+      //         .then(({ data: res }) => {
+      //           if (res.code !== 0) {
+      //             return this.$message.error(res.msg)
+      //           } else {
+      //             console.log('获取查询详情成功', res.data.list)
+      //             this.tableData = res.data.list
+      //           }
+      //         })
+      //         .catch(() => {
+      //           return this.$message.error('网络错误')
+      //         })
+
+      this.totalVisible = true
+    },
+    getTableList() {
+      const { user } = this.$store.state
+      const _data = {
+        ...this.dataForm,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      this.$http
+        .post('/data/aggregator/datastats/nowstatsdata', _data)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.dataList = res.data.list
+            this.total = res.data.total
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getGridList() {
+      const { user } = this.$store.state
+      this.dataListLoading = true
+      const params = {
+        agencyId: user.agencyId,
+        client: 'gov'
+      }
+      this.$http
+        // .post('/gov/org/userhouse/service/serviceScopeTree')
+        // .post('/data/aggregator/org/agencytree', params)
+        .post('/gov/org/customeragency/staffinagencylist')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            let { agencyList, subAgencyList } = res.data
+            // this.optionsA = res.data
+            // console.log(this.optionsA);
+            this.dataForm.agencyId = agencyList.agencyId
+            const _arr = [{...agencyList, subAgencyList: [...subAgencyList] }]
+            this.optionsA = this.deepTree(_arr)
+            console.log('optionsA----', this.optionsA)
+          }
+        })
+        .catch(() => {
+          this.dataListLoading = false
+          return this.$message.error('网络错误')
+        })
+        this.dataListLoading = false
+    },
+    deepTree(arr) {
+      if (Array.isArray(arr)) {
+        return arr.map(item => {
+          return {
+            ...item,
+            subAgencyList: item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList) || null
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+.block{
+  position: absolute;
+  left: 0px;
+  display: inline-block;
+  width: 35px;
+  height: 50px;
+  background: #fff;
+}
+.cascader-block .el-cascader-node>.el-radio{
+  display: none;
+}
+</style>
+<style lang="scss" scoped>
+  .blacklist-reason {
+    width: 100%;
+    height: 80px;
+    border: 1px solid #e4e4e4;
+    border-radius: 4px;
+    resize: none;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+</style>
+<style lang="scss" scoped>
+  @import "@/assets/scss/buttonstyle.scss";
+
+  .resi-container .resi-card-table {
+    ::v-deep .el-table th {
+      color: #fff;
+      background-color: rgba(33, 149, 254, 1);
+      // border-right: 1px solid rgba(33, 149, 254, 1);
+    }
+  }
+  .resi-table {
+    ::v-deep .el-button--text {
+      text-decoration: underline;
+    }
+    ::v-deep .btn-color-del {
+      margin-left: 10px;
+      color: rgba(213, 16, 16, 1);
+    }
+    ::v-deep .btn-color-edit {
+      color: rgba(0, 167, 169, 1);
+    }
+  }
+  .form-wr {
+    .input-width {
+      width: 260px;
+
+    }
+    .input-width-textarea {
+      width: 500px;
+    }
+    .imsg-list {
+      display: flex;
+      align-items: center;
+      .imgs-item {
+        position: relative;
+        margin-right: 10px;
+        .el-icon-delete {
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 18px;
+          color: red;
+          z-index: 3;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .div-content {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .resi-row-btn {
+    margin-bottom: 13px;
+    .upload-btn {
+      display: inline-block;
+      margin: 0 10px;
+    }
+  }
+</style>