t

dist/static/css/chunk-0bc65207.6eeb5ade.css

@@ -1 +0,0 @@
-.top-middle-cmp{position:relative;padding:0 50px;-webkit-box-sizing:border-box;box-sizing:border-box}.top-middle-cmp .chart-name{position:absolute;right:70px;text-align:right;font-size:20px;top:10px}.dashboard-container[data-v-2fd5cfd0]{width:100%;height:calc(100vh - 84px);overflow-y:auto;background-color:#1f2d3d}.dashboard-container.full[data-v-2fd5cfd0]{position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:9999999;min-height:100%}.scoped-num[data-v-2fd5cfd0]{min-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px 20px 0}.scoped-num .sn-wrap[data-v-2fd5cfd0]{padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.scoped-num .sn-item[data-v-2fd5cfd0]{padding:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center}.scoped-num .sn-item .sn-label[data-v-2fd5cfd0]{padding-top:20px;color:#8cdacc;font-size:18px}.scoped-num .sn-item .dv-digital-flop[data-v-2fd5cfd0]{display:inline-block;margin-bottom:10px}.scoped-count[data-v-2fd5cfd0]{padding:20px;display:inline-block;min-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box}.scoped-count.t2[data-v-2fd5cfd0]{display:inline-block;vertical-align:middle;min-width:500px}.scoped-count .sc-row[data-v-2fd5cfd0]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:10px 0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.scoped-count .sc-col[data-v-2fd5cfd0]{width:450px;padding:10px}.scoped-count .sc-wrap[data-v-2fd5cfd0]{padding:50px 20px 20px}.scoped-count .sc-user[data-v-2fd5cfd0]{width:450px;height:320px;padding-top:80px;text-align:center}.scoped-count .sc-user .t[data-v-2fd5cfd0]{color:#fff;font-size:20px;padding-top:10px;font-weight:700}

dist/static/css/chunk-78205f82.aef0ec91.css

@@ -0,0 +1 @@
+.scoped-wrap{position:relative;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;height:300px}.scoped-wrap .sw-name{position:absolute;font-size:20px;top:10px;right:70px;color:#fff}.dashboard-container[data-v-195d16ce]{width:100%;height:calc(100vh - 84px);overflow-y:auto;background-color:#1f2d3d}.dashboard-container.full[data-v-195d16ce]{position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:9999999;min-height:100%}.scoped-num[data-v-195d16ce]{min-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px 20px 0}.scoped-num .sn-wrap[data-v-195d16ce]{padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.scoped-num .sn-item[data-v-195d16ce]{padding:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center}.scoped-num .sn-item .sn-label[data-v-195d16ce]{padding-top:20px;color:#8cdacc;font-size:18px}.scoped-num .sn-item .dv-digital-flop[data-v-195d16ce]{display:inline-block;margin-bottom:10px}.scoped-count[data-v-195d16ce]{padding:20px;display:inline-block;min-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box}.scoped-count.t2[data-v-195d16ce]{display:inline-block;vertical-align:middle;min-width:500px}.scoped-count .sc-row[data-v-195d16ce]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:10px 0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.scoped-count .sc-col[data-v-195d16ce]{width:450px;padding:10px}.scoped-count .sc-wrap[data-v-195d16ce]{padding:50px 20px 20px}.scoped-count .sc-user[data-v-195d16ce]{width:450px;height:320px;padding-top:80px;text-align:center}.scoped-count .sc-user .t[data-v-195d16ce]{color:#fff;font-size:20px;padding-top:10px;font-weight:700}

src/views/dashboard/components/EchartLine.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="top-middle-cmp" style="height: 300px">
-    <div class="chart-name">
-      近30天数据统计
+  <div class="scoped-wrap">
+    <div class="sw-name">
+      近30天注册数据统计
       <dv-decoration-3 style="width:200px;height:20px;" />
     </div>
     <dv-charts :option="option" />
@@ -16,21 +16,34 @@ export default {
   },
   data () {
     return {
-      option: {
+      option: {}
+    }
+  },
+  watch: {
+    curObj () {
+      let signupArr = this.curObj.day_30_signup || []
+      signupArr = signupArr.reverse()
+      let xAxisData = []
+      let seriesData = []
+      signupArr.forEach((item, index) => {
+        xAxisData.push(item.format_time)
+        seriesData.push(item.signup)
+      })
+      let option = {
         legend: {
-          data: ['近30天登录'],
+          data: ['近30天注册'],
           textStyle: {
             fill: '#fff'
           }
         },
+        grid: {
+          // left: '3%',
+          // right: '4%',
+          // bottom: '3%',
+          // containLabel: true
+        },
         xAxis: {
-          data: [
-            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06',
-            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
-            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
-            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
-            '10/12', '10/13', '10/14', '10/15'
-          ],
+          data: xAxisData,
           boundaryGap: false,
           axisLine: {
             style: {
@@ -48,6 +61,7 @@ export default {
         },
         yAxis: {
           data: 'value',
+          name: '人',
           splitLine: {
             show: false
           },
@@ -67,15 +81,9 @@ export default {
         },
         series: [
           {
-            data: [
-              99.56, 99.66, 99.84, 99.22, 99.11, 99.45,
-              99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
-              99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
-              99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
-              99.15, 99.45, 99.64, 99.89
-            ],
+            data: seriesData,
             type: 'line',
-            name: '近30天登录',
+            name: '近30天注册',
             smooth: true,
             lineArea: {
               show: true,
@@ -90,24 +98,6 @@ export default {
           }
         ]
       }
-    }
-  },
-  watch: {
-    curObj () {
-      let signupArr = this.curObj.day_30_signup || []
-      signupArr = signupArr.reverse()
-      let xAxisData = []
-      let seriesData = []
-      signupArr.forEach((item, index) => {
-        if (index < 16) {
-          xAxisData.push(item.format_time)
-          seriesData.push(item.signup)
-        }
-      })
-      let option = JSON.parse(JSON.stringify(this.option))
-      option.xAxis.data = [...xAxisData]
-      option.series[0].data = [...seriesData]
-      console.log(option)
       this.option = {...option}
     }
   },
@@ -118,17 +108,17 @@ export default {
 </script>
 
 <style lang="scss">
-.top-middle-cmp {
+.scoped-wrap {
   position: relative;
-  padding: 0 50px;
+  padding: 0 20px;
   box-sizing: border-box;
-
-  .chart-name {
+  height: 300px;
+  .sw-name {
     position: absolute;
-    right: 70px;
-    text-align: right;
     font-size: 20px;
     top: 10px;
+    right: 70px;
+    color: #fff;
   }
 }
 </style>

src/views/dashboard/components/EchartLogin30.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="scoped-wrap">
+    <div class="sw-name">
+      近30天登录数据统计
+      <dv-decoration-3 style="width:200px;height:20px;" />
+    </div>
+    <dv-charts :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopMiddleCmp',
+  props: {
+    curObj: Object,
+  },
+  data () {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    curObj () {
+      let signinArr = this.curObj.day_30_signin || []
+      signinArr = signinArr.reverse()
+      let xAxisData = []
+      let seriesData = []
+      signinArr.forEach((item, index) => {
+        xAxisData.push(item.format_time)
+        seriesData.push(item.signin)
+      })
+      let option = {
+        legend: {
+          data: ['近30天登录'],
+          textStyle: {
+            fill: '#fff'
+          }
+        },
+        grid: {
+          // left: '3%',
+          // right: '4%',
+          // bottom: '3%',
+          // containLabel: true
+        },
+        xAxis: {
+          data: xAxisData,
+          boundaryGap: false,
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          data: 'value',
+          name: '人',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            },
+          },
+          axisTick: {
+            show: false
+          },
+        },
+        series: [
+          {
+            data: seriesData,
+            type: 'line',
+            name: '近30天登录',
+            smooth: true,
+            lineArea: {
+              show: true,
+              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
+            },
+            linePoint: {
+              radius: 4,
+              style: {
+                fill: '#00db95'
+              }
+            }
+          }
+        ]
+      }
+      this.option = {...option}
+    }
+  },
+  created () {
+    // console.log(this.curObj)
+  }
+}
+</script>
+
+<style lang="scss">
+.scoped-wrap {
+  position: relative;
+  padding: 0 20px;
+  box-sizing: border-box;
+  height: 300px;
+  .sw-name {
+    position: absolute;
+    font-size: 20px;
+    top: 10px;
+    right: 70px;
+    color: #fff;
+  }
+}
+</style>

src/views/dashboard/components/EchartSignin24h.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="scoped-wrap">
+    <div class="sw-name">
+      近24登录用户统计
+      <dv-decoration-3 style="width:200px;height:20px;" />
+    </div>
+    <dv-charts :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopMiddleCmp',
+  props: {
+    curObj: Object,
+  },
+  data () {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    curObj () {
+      let signinArr = this.curObj.hour_24_signin || []
+      signinArr = signinArr.reverse()
+      let xAxisData = []
+      let seriesData = []
+      signinArr.forEach((item, index) => {
+        xAxisData.push(item.format_time)
+        seriesData.push(item.signin)
+      })
+      let option = {
+        legend: {
+          data: ['近24登录用户统计'],
+          textStyle: {
+            fill: '#fff'
+          }
+        },
+        grid: {
+          // left: '3%',
+          // right: '4%',
+          // bottom: '3%',
+          // containLabel: true
+        },
+        xAxis: {
+          data: xAxisData,
+          boundaryGap: false,
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          data: 'value',
+          name: '人',
+          min: 0,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            },
+          },
+          axisTick: {
+            show: false
+          },
+        },
+        series: [
+          {
+            data: seriesData,
+            type: 'line',
+            name: '近24登录用户统计',
+            // smooth: true,
+            lineArea: {
+              show: true,
+              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
+            },
+            linePoint: {
+              radius: 4,
+              style: {
+                fill: '#00db95'
+              }
+            }
+          }
+        ]
+      }
+      this.option = {...option}
+    }
+  },
+  created () {
+    // console.log(this.curObj)
+  }
+}
+</script>
+
+<style lang="scss">
+.scoped-wrap {
+  position: relative;
+  padding: 0 20px;
+  box-sizing: border-box;
+  height: 300px;
+  .sw-name {
+    position: absolute;
+    font-size: 20px;
+    top: 10px;
+    right: 70px;
+    color: #fff;
+  }
+}
+</style>

src/views/dashboard/components/EchartSignup24h.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="scoped-wrap">
+    <div class="sw-name">
+      近24注册用户统计
+      <dv-decoration-3 style="width:200px;height:20px;" />
+    </div>
+    <dv-charts :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopMiddleCmp',
+  props: {
+    curObj: Object,
+  },
+  data () {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    curObj () {
+      let signupArr = this.curObj.hour_24_signup || []
+      signupArr = signupArr.reverse()
+      let xAxisData = []
+      let seriesData = []
+      signupArr.forEach((item, index) => {
+        xAxisData.push(item.format_time)
+        seriesData.push(item.signup)
+      })
+      let option = {
+        legend: {
+          data: ['近24注册用户统计'],
+          textStyle: {
+            fill: '#fff'
+          }
+        },
+        grid: {
+          // left: '3%',
+          // right: '4%',
+          // bottom: '3%',
+          // containLabel: true
+        },
+        xAxis: {
+          data: xAxisData,
+          boundaryGap: false,
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          data: 'value',
+          name: '人',
+          min: 0,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            style: {
+              stroke: '#999'
+            }
+          },
+          axisLabel: {
+            style: {
+              fill: '#999'
+            },
+          },
+          axisTick: {
+            show: false
+          },
+        },
+        series: [
+          {
+            data: seriesData,
+            type: 'line',
+            name: '近24注册用户统计',
+            // smooth: true,
+            lineArea: {
+              show: true,
+              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
+            },
+            linePoint: {
+              radius: 4,
+              style: {
+                fill: '#00db95'
+              }
+            }
+          }
+        ]
+      }
+      this.option = {...option}
+    }
+  },
+  created () {
+    // console.log(this.curObj)
+  }
+}
+</script>
+
+<style lang="scss">
+.scoped-wrap {
+  position: relative;
+  padding: 0 20px;
+  box-sizing: border-box;
+  height: 300px;
+  .sw-name {
+    position: absolute;
+    font-size: 20px;
+    top: 10px;
+    right: 70px;
+    color: #fff;
+  }
+}
+</style>

src/views/dashboard/index.vue

@@ -36,7 +36,12 @@
         </div>
       </dv-border-box-8>
     </div>
-    <!-- <echart-line :curObj="curData"/> -->
+    <div v-if="isAdmin === 1">
+      <echart-line :curObj="curData"/>
+      <echart-login30 :curObj="curData"/>
+      <echart-signin24h :curObj="curData"/>
+      <echart-signup24h :curObj="curData"/>
+    </div>
     <div :class="configClickTotal.data.length > 0 ? 'scoped-count' : 'scoped-count t2'">
       <dv-border-box-10>
         <div class="sc-row">
@@ -112,10 +117,16 @@
 import { comGetTime } from '@/utils'
 import { mapGetters } from 'vuex'
 import EchartLine from './components/EchartLine'
+import EchartLogin30 from './components/EchartLogin30'
+import EchartSignin24h from './components/EchartSignin24h'
+import EchartSignup24h from './components/EchartSignup24h'
 export default {
   name: 'Dashboard',
   components: {
     EchartLine,
+    EchartLogin30,
+    EchartSignin24h,
+    EchartSignup24h,
   },
   data () {
     return {
@@ -196,12 +207,14 @@ export default {
       timer: null,
       curTime: '',
       curData: {},
+      isAdmin: 2,
     }
   },
   created () {
     const fpUser = window.sessionStorage.getItem('fp_user') ? JSON.parse(window.sessionStorage.getItem('fp_user')) : {}
     let isAdmin = 2
     if (fpUser.username === 'admin') isAdmin = 1
+    this.isAdmin = isAdmin
     this.getData(isAdmin)
     if (fpUser.username === 'daping') {
       window.setInterval(() => {