【运营报表】前端页面-王公峰-2021-01-13

src/views/modules/analysis/export/operationCompare.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-news__dailyrecordinfo}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()">
+        <el-form-item label="报表类型" label-width="100px">
+          <template>
+            <el-radio v-model="typeFlag"
+                      label="1">日报</el-radio>
+            <el-radio v-model="typeFlag"
+                      label="0">周报</el-radio>
+          </template>
+        </el-form-item>
+        <el-row>
+        <el-form-item label="时间筛选类型" label-width="100px" v-if="this.typeFlag=='1'">
+          <template>
+            <el-radio v-model="timeFlag"
+                      label="1">有效时间</el-radio>
+            <el-radio v-model="timeFlag"
+                      label="0">截止时间</el-radio>
+          </template>
+        </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsReleaseStartTime"
+                        v-if="this.timeFlag=='1'"
+                        label="有效时间"
+                        label-width="100px">
+            <el-date-picker @change='setRegistTime'
+                            v-model="time"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            :picker-options="pickerEndTime"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="endTime"
+                        v-if="this.timeFlag=='0'"
+                        label="截止时间"
+                        label-width="100px">
+            <el-date-picker v-model="dataForm.endTime"
+                            type="date"
+                            :picker-options="pickerEndTime"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-row>
+        <div v-if="isShowRemind">
+          <p>说明 ：</p>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较上周新增 : 截至到昨天，最近的一周比上周新增的变化量<br><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例：选择日期1.20号，周统计数量为1.13-1.19这一周的数量，较上周变化量为1.13-1.19与1.6-1.12之间的变化量
+          <br>
+        </div>
+        <br>
+        <el-row>
+          <el-form-item label-width="500px">
+            <el-button type="success" @click="this.selectInfo">{{ $t('query') }}</el-button>
+            <el-button type="success" @click="this.exportHandlee">{{ $t('export') }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column prop="communityName" label="社区名" header-align="center" align="center" width="200" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="partyCount" label="认证党员数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayPartyCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="registerCount" label="居民注册数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayRegisterCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="enterpriseCount" label="企业代表数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayEnterpriseCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="communityCount" label="社群数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayCommunityCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="groupCount" label="话题数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayGroupCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="eventCount" label="议题数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayEventCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="itemCount" label="项目数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayItemCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="closeItemCount" label="结案数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayCloseItemCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="newsCount" label="新闻发布数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayNewsCount" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="activeUser" label="活跃用户数" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column v-if="isShowYesterday" prop="yesterdayActiveUser" :label="tableLabel" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/analysis/userOperation/page',
+        exportURL: '/analysis/userOperation/export'
+      },
+      dataForm: {
+        operationStartTime: '',
+        operationEndTime: '',
+        endTime: this.dateFormat('YYYY-mm-dd', new Date()),
+        isWeek: '1'
+      },
+      pickerEndTime: {
+        disabledDate: (time) => {
+          let beginDateVal = this.dateFormat('YYYY-mm-dd', new Date())
+          if (beginDateVal) {
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
+      time: [],
+      timeFlag: '0',
+      typeFlag: '1',
+      tableLabel: '较昨日新增',
+      isShowRemind: false,
+      isShowYesterday: true
+    }
+  },
+  watch: {
+    'timeFlag': function (val) {
+      if (val === '0') {
+        this.dataForm.operationStartTime = ''
+        this.dataForm.operationEndTime = ''
+        this.time = []
+        this.isShowYesterday = true
+      } else {
+        this.dataForm.endTime = ''
+        this.isShowYesterday = false
+      }
+    },
+    'typeFlag': function (val) {
+      if (val === '0') {
+        // 周报
+        this.timeFlag = '0'
+        this.tableLabel = '较上周新增'
+        this.dataForm.isWeek = '0'
+        this.isShowRemind = true
+      } else {
+        // 日报
+        this.timeFlag = '1'
+        this.tableLabel = '较昨日新增'
+        this.dataForm.isWeek = '1'
+        this.isShowRemind = false
+      }
+    }
+  },
+  created: function () {
+    this.getDataList()
+  },
+  methods: {
+    // 时间段取值变化事件
+    setRegistTime () {
+      this.dataForm.operationStartTime = this.time[0]
+      this.dataForm.operationEndTime = this.time[1]
+    },
+    // 查询
+    selectInfo () {
+      if (this.time.length === 0 && (this.dataForm.endTime === '' || this.dataForm.endTime === null)) {
+        this.$message({
+          message: '请选择有效时间！',
+          type: 'warning'
+        })
+        return false
+      }
+      this.getDataList()
+    },
+    // 导出
+    exportHandlee () {
+      if (this.time.length === 0 && (this.dataForm.endTime === '' || this.dataForm.endTime === null)) {
+        this.$message({
+          message: '请选择有效时间！',
+          type: 'warning'
+        })
+        return false
+      }
+      this.loading = true
+      this.$http.post('/analysis/userOperation/export', this.dataForm, { responseType: 'arraybuffer' }).then((res) => {
+        this.loading = false
+        let fileName = '运营数据报表.xls'
+        let blob = new Blob([res.data], { type: 'application/x-xls' })
+        if (window.navigator.msSaveOrOpenBlob) {
+          navigator.msSaveBlob(blob, fileName)
+        } else {
+          var link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob)
+          link.download = fileName
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      })
+    },
+    // 时间格式化
+    dateFormat (fmt, date) {
+      let ret
+      const opt = {
+        'Y+': date.getFullYear().toString(),
+        'm+': (date.getMonth() + 1).toString(),
+        'd+': date.getDate().toString(),
+        'H+': date.getHours().toString(),
+        'M+': date.getMinutes().toString(),
+        'S+': date.getSeconds().toString()
+      }
+      for (let k in opt) {
+        ret = new RegExp('(' + k + ')').exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+        }
+      }
+      return fmt
+    }
+  }
+}
+</script>
+<style>
+.el-tooltip__popper {
+  max-width: 80%;
+  color: #353434 !important;
+  background:#e6eaebf3 !important;
+  word-break:break-all;
+}
+</style>