运营趋势

examples/router/axios.js

@@ -9,6 +9,8 @@ instance.defaults.baseURL = baseURLs[process.env.NODE_ENV]
 instance.interceptors.request.use(config => {
   if (config.url.startsWith("/node")) {
     config.baseURL = "/ns"
+  } else if (/\/project\/activeAnalysis/.test(location.pathname)) {
+    config.baseURL = "/analysis"
   } else if (/\/project\/beta/.test(location.pathname)) {
     config.baseURL = "/wg"
   } else if (/\/project\/sass/.test(location.pathname)) {
@@ -27,7 +29,7 @@ instance.interceptors.request.use(config => {
   if (["/xsjr", "/omsapi", "/tfx"].includes(config.baseURL)) {
     config.url = config.url.replace(/(app|auth|admin|api)\//, "")
   }
-  if (['/qxn'].includes(config.baseURL)) {
+  if (['/qxn', '/analysis'].includes(config.baseURL)) {
     config.url = config.url.replace(/(app|auth|admin)\//, "api/")
   }
   return config

project/activeAnalysis/app/AppActiveAnalysis/AppActiveAnalysis.vue

@@ -13,7 +13,6 @@
   export default {
     name: 'AppActiveAnalysis',
     label: '日活分析',
-
     props: {
       instance: Function,
       dict: Object

project/activeAnalysis/app/AppActiveAnalysis/components/List.vue

@@ -3,18 +3,23 @@
     <template slot="title">
       <ai-title title="日活分析" isShowBottomBorder>
         <template #rightBtn>
-          <el-button type="primary" @click="handleSyncData" :loading="isLoading">同步卫健委数据</el-button>
+          <ai-import
+            :instance="instance"
+            :dict="dict"
+            type="wxuseruselog"
+            name="成员日活记录"
+            @success="getData">
+            <el-button icon="iconfont iconImport" size="small">导入</el-button>
+          </ai-import>
         </template>
       </ai-title>
     </template>
     <template #left>
       <div class="addressBook-left">
         <div class="addressBook-left__title">
-          <h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']">
+          <h2 class="tab-active">组织架构</h2>
-            组织架构</h2>
-          <h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">标签</h2>
         </div>
-        <div class="addressBook-left__list--title" v-if="tabIndex === 0">
+        <div class="addressBook-left__list--title">
           <el-input
             size="mini"
             placeholder="请输入部门名称"
@@ -23,19 +28,8 @@
             suffix-icon="iconfont iconSearch">
           </el-input>
         </div>
-        <div class="addressBook-left__list--title" v-if="tabIndex === 1">
-          <el-input
-            class="addressBook-left__list--search"
-            size="mini"
-            clearable
-            style="width: 154px;"
-            placeholder="请输入标签名称"
-            v-model="tagName"
-            suffix-icon="iconfont iconSearch">
-          </el-input>
-        </div>
         <div class="addressBook-left__list--wrapper">
-          <div class="addressBook-left__list" v-show="tabIndex === 0">
+          <div class="addressBook-left__list">
             <el-tree
               :filter-node-method="filterNode"
               ref="tree"
@@ -44,72 +38,96 @@
               :expand-on-click-node="false"
               :data="unitList"
               highlight-current
-              :current-node-key="search.departmentId"
+              :current-node-key="departmentId"
               :default-expanded-keys="defaultExpanded"
               :default-checked-keys="defaultChecked"
               @current-change="onTreeChange">
             </el-tree>
           </div>
-          <div class="addressBook-left__list" v-show="tabIndex === 1">
-            <div class="addressBook-left__tags">
-              <div
-                  @click="changeTag(index)"
-                  class="addressBook-left__tags--item"
-                  :class="[currIndex === index ? 'addressBook-left__tags--item-active' : '']"
-                  v-for="(item, index) in tagsList" :key="index">
-                <span>{{ item.tagname }}</span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </template>
     <template slot="content">
       <ai-card title="当天数据统计">
+        <template #right>
+          <el-date-picker
+            v-model="today"
+            value-format="yyyy-MM-dd"
+            :clearable="false"
+            type="date"
+            size="small"
+            placeholder="请选择开始日期"
+            @change="getDtInfo">
+          </el-date-picker>
+          <el-button type="text" @click="getActiveList(), isShowList = true">查看明细</el-button>
+        </template>
         <template #content>
+          <div class="chart1" style="width: 100%; height: 300px"></div>
         </template>
       </ai-card>
       <ai-card title="趋势数据统计">
         <template #content>
+          <div class="chart2" style="width: 100%; height: 400px"></div>
         </template>
       </ai-card>
       <ai-card title="活跃统计">
+        <template #right>
+          <div class="right-search">
+            <div>
+              <span>数据统计日期范围：</span>
+              <el-input-number v-model="x" size="small" @change="getActiveAnalysStatistics" :min="1" label="请输入"></el-input-number>
+            </div>
+            <div>
+              <span>活跃状态天数指标：</span>
+              <el-input-number v-model="y" size="small" @change="getActiveAnalysStatistics" :min="1" label="请输入"></el-input-number>
+            </div>
+          </div>
+        </template>
         <template #content>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :isShowPagination="false"
+            @getList="() => {}">
+          </ai-table>
         </template>
       </ai-card>
       <ai-dialog
-        :visible.sync="isShow"
+        :visible.sync="isShowList"
-        width="590px"
+        width="1090px"
-        title="数据权限设置"
+        customFooter
-        @close="onClose"
+        title="成员活跃明细">
-        @onConfirm="onConfirm">
+        <ai-search-bar bottomBorder>
-        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <template #left>
-          <el-form-item label="卡口登记-卡口" prop="kkdjKk">
             <ai-select
-              v-model="form.kkdjKk"
+              v-model="search.status"
               clearable
-              multiple
+              placeholder="请选择活跃状态"
-              placeholder="请选择卡口"
+              :selectList="statusList"
-              :selectList="dictList">
+              @change="getActiveList">
             </ai-select>
-          </el-form-item>
+          </template>
-          <el-form-item label="卡口登记-社区" prop="kkdjSq">
+        </ai-search-bar>
-            <ai-area-get multiple v-model="form.kkdjSq" :root="user.info.areaId" :instance="instance"></ai-area-get>
+        <ai-table
-          </el-form-item>
+          :tableData="activeList"
-          <el-form-item label="核酸检测" prop="hsjc">
+          :col-configs="activeColConfigs"
-            <ai-area-get multiple v-model="form.hsjc" :root="user.info.areaId" :instance="instance"></ai-area-get>
+          :total="search.total"
-          </el-form-item>
+          style="margin-top: 16px;"
-          <el-form-item label="社区管理" prop="sqgl">
+          :current.sync="search.current"
-            <ai-area-get multiple v-model="form.sqgl" :root="user.info.areaId" :instance="instance"></ai-area-get>
+          :size.sync="search.size"
-          </el-form-item>
+          @getList="getActiveList">
-        </el-form>
+        </ai-table>
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="isShowList = false">关闭</el-button>
+        </div>
       </ai-dialog>
     </template>
   </ai-list>
 </template>
 
 <script>
-  import {mapState} from 'vuex'
+  import { mapState } from 'vuex'
+  import * as echarts from 'echarts'
 
   export default {
     name: 'List',
@@ -119,48 +137,45 @@
       dict: Object
     },
 
-    data() {
+    data () {
       return {
-        users: [],
-        department: [],
-        btnLoading: false,
         search: {
-          current: 1,
+          status: '',
           size: 10,
-          title: '',
+          total: 0,
-          tagname: '',
+          current: 1
-          name: '',
-          tagIds: '',
-          departmentId: ''
         },
-        dictList: [],
+        activeList: [],
-        form: {
-          fxdj: [],
-          sqgl: [],
-          hsjc: [],
-          kkdjSq: [],
-          kkdjKk: []
-        },
-        isShow: false,
         loading: false,
+        isShowList: false,
         defaultChecked: [],
         defaultExpanded: [],
-        tabIndex: 0,
-        currIndex: -1,
         defaultProps: {
           children: 'children',
           label: 'name'
         },
+        colConfigs: [
+          { prop: 'name',  label: '姓名', align: 'left' },
+          { prop: 'department', label: '部门', align: 'center' },
+          { prop: 'c', label: '活跃天数', align: 'center' }
+        ],
+        activeColConfigs: [
+          { prop: 'name',  label: '姓名', align: 'left' },
+          { prop: 'department', label: '部门', align: 'center' },
+          { prop: 'status', label: '状态', align: 'center' },
+          { prop: 'platform', label: '平台', align: 'center' },
+          { prop: 'lastUseTime', label: '最后登录时间', align: 'center' },
+          { prop: 'ymd', label: '日期', align: 'center' }
+        ],
         unitName: '',
         unitList: [],
-        tagsList: [],
-        tagName: '',
-        sourceTagList: [],
         tableData: [],
-        tagId: '',
+        department: '',
-        departmentName: '',
+        departmentId: '',
-        departId: '',
+        today: '',
-        id: ''
+        x: 30,
+        y: 18,
+        statusList: []
       }
     },
 
@@ -171,116 +186,214 @@
     watch: {
       unitName(val) {
         this.$refs.tree.filter(val)
-      },
-
-      tagName(val) {
-        if (!val) {
-          this.tagsList = this.sourceTagList
-        }
-
-        this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1)
       }
     },
 
     mounted() {
+      this.today = this.$moment().format('YYYY-MM-DD')
       this.getTree()
-      this.getList()
-      this.getTags()
     },
 
     methods: {
-      toSetting (e) {
+      onTreeChange (e) {
-        this.isShow = true
+        this.department = e.parentName || e.name
-        this.id = e.sysUserId
-        this.form.fxdj = e.fxdj ? e.fxdj.split(',') : []
-        this.form.sqgl = e.sqgl ? e.sqgl.split(',') : []
-        this.form.hsjc = e.hsjc ? e.hsjc.split(',') : []
-        this.form.kkdjSq = e.kkdjSq ? e.kkdjSq.split(',') : []
-        this.form.kkdjKk =e.kkdjKk ? e.kkdjKk.split(',') : []
-      },
-
-      changeTag(index) {
-        this.currIndex = index
-        this.search.current = 1
 
         this.$nextTick(() => {
-          this.getList()
+          this.getData()
         })
       },
 
-      onClose() {
+      getActiveList () {
-        this.id = ''
+        this.instance.post(`/app/wxuseruselog/active-log-list`, null, {
-        this.form.fxdj = []
-        this.form.sqgl = []
-        this.form.hsjc = []
-        this.form.kkdjSq = []
-        this.form.kkdjKk = []
-      },
-
-
-      onConfirm() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.instance.post(`/app/appepidemicpreventiondatarole/empower`, {
-              fxdj: this.form.fxdj.join(','),
-              sqgl: this.form.sqgl.join(','),
-              hsjc: this.form.hsjc.join(','),
-              kkdjSq: this.form.kkdjSq.join(','),
-              kkdjKk: this.form.kkdjKk.join(','),
-              sysUserIds: this.id ? this.id : this.ids,
-              kkdjKkStr: this.dictList.filter(v => this.form.kkdjKk.includes(v.dictValue)).map(v => v.dictName).join(',')
-            }).then(res => {
-              if (res.code == 0) {
-                this.isShow = false
-                this.getList()
-                this.$message.success('保存成功')
-              }
-            })
-          }
-        })
-      },
-
-      getTags() {
-        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
-          if (res.code == 0) {
-            this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : []
-            this.tagsList = res.data
-          }
-        })
-      },
-
-      onTreeChange(e) {
-        this.departmentName = e.name
-        this.search.departmentId = e.id || ''
-        this.search.current = 1
-
-        this.$nextTick(() => {
-          this.getList()
-        })
-      },
-
-      getList() {
-        this.loading = true
-        this.instance.post(`/app/appepidemicpreventiondatarole/list`, null, {
           params: {
             ...this.search,
-            departmentId: this.tabIndex === 0 ? this.search.departmentId : '',
+            ymd: this.today,
-            tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '',
+            status: this.search.status ? this.search.status : (!this.search.status && this.statusList.length) ? this.statusList[0] : ''
-            listType: this.tabIndex
           }
         }).then(res => {
-          if (res.code == 0) {
+          if (res.code === 0) {
-            this.tableData = res.data.records
+            this.activeList = res.data.records
-            this.total = res.data.total
+            this.search.total = res.data.total
-
+          }
-            this.$nextTick(() => {
+        })
-              this.loading = false
+      },
-            })
+
-          } else {
+      initBarChart (data) {
-            this.loading = false
+        let chart = echarts.init(document.querySelector('.chart2'))
+        const x = data.map(v => v.ymd)
+        const y = data.length ? Object.keys(data[0]).filter(v => v !== 'ymd') : []
+        let option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            type: "plain"
+          },
+          grid: {
+            left: '20px',
+            right: '38px',
+            bottom: '14px',
+            top: '30px',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'inside',
+              start: 0,
+              end: 7,
+              minValueSpan: 7
+            },
+            {
+              start: 0,
+              end: 7
+            }
+          ],
+          color: ['#2266FF', '#22AA99', '#F8B425'],
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#666666'
+            },
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#E1E5EF'
+              }
+            },
+            data: x
+          },
+          yAxis: {
+            axisTick: {
+              length: 0,
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#E1E5EF'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            nameTextStyle: {
+              color: '#666666',
+              align: 'left'
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666666'
+            },
+            type: 'value'
+          },
+          series: y.map(key => {
+            return {
+              data: data.map(v => v[key]),
+              type: 'bar',
+              name: key,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value
+                }
+              }
+            }
+          })
+        }
+        chart.setOption(option)
+      },
+
+      initPieChart (data) {
+        let chart = echarts.init(document.querySelector('.chart1'))
+        const option = {
+          tooltip: {},
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          legend: {
+            right: '5%',
+            top: 'center',
+            orient: 'vertical',
+            formatter: function(name) {
+              let data = option.series[0].data
+              let total = 0
+              let tarValue = 0
+              for (let i = 0, l = data.length; i < l; i++) {
+                total += data[i].value
+                if (data[i].name == name) {
+                  tarValue = data[i].value
+                }
+              }
+              let p = total === 0 ? 0 : (tarValue / total * 100).toFixed(0)
+              return name + '：' + tarValue + ' ' + p + '%'
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              data: data.map(v => {
+                return {
+                  value: v.c,
+                  name: v.status
+                }
+              }),
+              label : {
+                normal : {
+                formatter: '{b}：({d}%)',
+                textStyle : {
+                  fontWeight : 'normal',
+                    fontSize : 15
+                  }
+                }
+              }
+            }
+          ]
+        }
+
+        chart.setOption(option)
+      },
+
+      getData () {
+        this.getDtInfo()
+        this.getActiveAnalysisTrend()
+        this.getActiveAnalysStatistics()
+      },
+
+      getDtInfo () {
+        this.instance.post(`/app/wxuseruselog/active-analysis-today?department=${this.department}&ymd=${this.today}`).then(res => {
+          if (res.code === 0) {
+            this.initPieChart(res.data)
+            if (res.data.length) {
+              this.statusList = res.data.map(v => {
+                return {
+                  dictName: v.status,
+                  dictValue: v.status
+                }
+              })
+            } else {
+              this.search.status = ''
+              this.statusList = []
+            }
+          }
+        })
+      },
+
+      getActiveAnalysStatistics () {
+        this.instance.post(`/app/wxuseruselog/active-analysis-statistics?department=${this.department}&x=${this.x}&y=${this.y}`).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data
+          }
+        })
+      },
+
+      getActiveAnalysisTrend () {
+        this.instance.post(`/app/wxuseruselog/active-analysis-trend?department=${this.department}`).then(res => {
+          if (res.code === 0) {
+            this.initBarChart(res.data)
           }
-        }).catch(() => {
-          this.loading = false
         })
       },
 
@@ -289,15 +402,6 @@
         return data.name.indexOf(value) !== -1
       },
 
-      changeTab(id, index) {
-        this.currIndex = index
-        this.search.areaId = id
-
-        this.$nextTick(() => {
-          this.getList()
-        })
-      },
-
       getTree() {
         this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => {
           if (res.code === 0) {
@@ -309,14 +413,16 @@
             }).filter(e => !e.parentid)[0]
             this.defaultExpanded = [parent.id]
             this.defaultChecked = [parent.id]
-            this.search.departmentId = parent.id
+            this.departmentId = parent.id
-            this.departmentName = parent.name
+            this.department = parent.name
             this.addChild(parent, res.data)
             this.unitList = [parent]
 
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(parent.id)
             })
+
+            this.getData()
           }
         })
       },
@@ -325,6 +431,7 @@
         for (let i = 0; i < list.length; i++) {
           if (list[i].parentid === parent.id) {
             list[i].i = parent.children.length
+            list[i].parentName = `${parent.parentName || parent.name}/${list[i].name}`
             parent.children.push(list[i])
           }
         }
@@ -338,17 +445,6 @@
         if (list.length > 0) {
           parent['children'].map(v => this.addChild(v, list))
         }
-      },
-
-      toAdd(id) {
-        this.$emit('change', {
-          type: 'Add',
-          params: {
-            id: id || '',
-            departmentId: this.search.departmentId || '',
-            departmentName: this.departmentName || ''
-          }
-        })
       }
     }
   }
@@ -356,6 +452,26 @@
 
 <style lang="scss" scoped>
   .AppActiveAnalysis {
+    .right-search {
+      display: flex;
+      align-items: center;
+
+      div {
+        display: flex;
+        align-items: center;
+      }
+
+      span {
+        margin-right: 10px;
+        font-size: 14px;
+        color: #686868;
+      }
+
+      div:first-child {
+        margin-right: 20px;
+      }
+    }
+
     :deep( .ai-list__content--right-wrapper ) {
       padding: 0!important;
       background: transparent!important;
@@ -386,14 +502,6 @@
       }
     }
 
-    .table-avatar {
-      width: 40px;
-      height: 40px;
-      margin-top: 3px;
-      border-radius: 2px;
-      border: 1px solid #CCCCCC;
-    }
-
     .el-button--mini, .el-button--mini.is-round {
       height: 28px;
       line-height: 28px;

project/activeAnalysis/app/AppActivity/components/List.vue

@@ -30,13 +30,13 @@
         </template>
       </ai-search-bar>
       <ai-table
-          :tableData="tableData"
+        :tableData="tableData"
-          :col-configs="colConfigs"
+        :col-configs="colConfigs"
-          :total="total"
+        :total="total"
-          style="margin-top: 6px;"
+        style="margin-top: 6px;"
-          :current.sync="search.current"
+        :current.sync="search.current"
-          :size.sync="search.size"
+        :size.sync="search.size"
-          @getList="getList">
+        @getList="getList">
         <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">

vue.config.js

@@ -64,6 +64,14 @@ module.exports = {
           '^/lan': '/'
         }
       },
+      '/analysis': {
+        target: 'http://192.168.1.87:22001',
+        changeOrigin: true,
+        pathRewrite: {
+          //地址重写
+          '^/analysis': '/'
+        }
+      },
       '/test': {
         target: 'http://192.168.1.105:9000',
         changeOrigin: true,