首页新增日活折线图

package.json

@@ -11,9 +11,11 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.29",
     "@tiptap/starter-kit": "^2.0.0-beta.101",
     "@tiptap/vue-2": "^2.0.0-beta.48",
+    "@types/echarts": "^4.9.10",
     "ant-design-vue": "^1.7.7",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.2.0",
     "element-ui": "^2.15.5",
     "moment": "^2.29.1",
     "node-sass": "^4.14.1",

src/utils/days/index.ts

+function getDate(day: Date,isSmaller:Boolean) {
+  let mm:Number,dd:Number
+  if(isSmaller){
+    mm = day.getMonth() + 1 < 10 ?  + (day.getMonth()+1): day.getMonth()+1 ;
+    dd = day.getDate() < 10 ?  + (day.getDate()+1) : day.getDate()+1;
+  } else {
+    mm = day.getMonth() + 1 < 10 ?  + day.getMonth(): day.getMonth() ;
+    dd = day.getDate() < 10 ?  + day.getDate() : day.getDate();
+  }
+  return mm + "/" + dd
+}
+
+ export function getPastDaysUtilYesterday(total: number):Array<String> {
+  const isSmaller = total < new Date().getDate() ? true:false
+  let period: Array<string> = [];
+  const startDay = new Date();
+  startDay.setDate(startDay.getDate()-total-1);
+  for (let i = 0; i < total; i++) {
+    let day = new Date();
+    day.setDate(startDay.getDate() + i);
+    period.push(getDate(day,isSmaller))
+  }
+  return period
+}
+

src/views/Login/index.vue

@@ -198,12 +198,18 @@ export default Vue.extend({
         verify_code: code,
         phone,
       });
-      if (ret && ret.code === 200) {
-        const { accessToken, userType } = ret.data;
-        // setUserMsg(user)
-        // this.$router.push({
-        //   name: "home",
-        // });
+      if (ret.code === 200) {
+        const { accessToken, level, phone, role, userType } = ret.data;
+        setUserMsg({
+          token: accessToken,
+          newRole: this.adminLogin ? eNewRoleRelatedToBackEnd.PlatformAdmin : role,
+          level: level,
+          phone,
+          userType,
+        })
+        this.$router.push({
+          name: "home",
+        });
       } else {
         message.warn(ret.msg);
       }
@@ -215,7 +221,8 @@ export default Vue.extend({
         use_pwd: true,
         pwd,
       });
-
+      console.log(ret);
+      
       if (ret.code === 200) {
         const { accessToken, level, phone, role, userType } = ret.data;
         setUserMsg({

src/views/Root/Home/card.vue

 <template>
   <div>
-    <a-card :title="title" style="width: 400px;border-radius: 0.75rem; ">
-      <p class=" text-lg tracking-wide font-normal">{{start}}至{{end}}</p>
-      <p class="text-blue-400 text-3xl font-medium mb-0 mt-4">{{total}} <span class=" text-base">{{unit}}</span> </p>
+    <a-card :title="title" style="width: 400px; border-radius: 0.75rem">
+      <p class="text-blue-400 text-3xl font-medium mb-0 mt-4">{{ total }}</p>
     </a-card>
   </div>
 </template>
 
 
 <script lang="ts">
-import Vue from 'vue';
-import {Card} from "ant-design-vue";
-
-Vue.use(Card)
+import Vue from "vue";
+import { Card } from "ant-design-vue";
+Vue.use(Card);
 
 export default Vue.extend({
-  name:'card',
-  props:{
-    title:{
-      type:String,
-      default:''
-    },
-    total:{
-      type:String,
-      default:''
+  props: {
+    title: {
+      type: String,
+      default: "",
     },
-    unit:{
-      type:String,
-      default:'人'
-    }
-  },
-  data(){
-    return{
-      start:'',
-      end:''
-    }
-  },
-  methods:{
-    getStart(){
-      let yy = new Date().getFullYear()
-      let mm = new Date().getMonth()
-      let dd = new Date().getDate()
-      this.start = yy+'-'+mm+'-'+dd
+    total: {
+      type: String,
+      default: "",
     },
-    getEnd(){
-      let yy = new Date().getFullYear()
-      let mm = new Date().getMonth()+1
-      let dd = new Date().getDate()
-      this.end = yy+'-'+mm+'-'+dd
-    }
   },
-  mounted(){
-    this.getStart()
-    this.getEnd()
-  }
-})
+});
 </script>
 
 

src/views/Root/Home/const.ts

+export enum barChartType{
+  allUser,
+  newUser
+}

src/views/Root/Home/index.vue

 <template>
   <div class="">
-    <p class=" text-2xl font-bold mb-5">实时数据</p>
-    <a-row type="flex" justify="center" align="middle" :gutter="[50,100]">
-      <a-col >
-        <card title="总注册用户数" total="3157"/>
-      </a-col>
-      <a-col >
-        <card title="今日注册用户数" total="3157"/>
+    <p class="text-2xl font-bold mb-5">实时数据</p>
+    <a-row type="flex" justify="center" align="middle" :gutter="[50, 100]">
+      <a-col>
+        <card title="全局用户日活数" total="3157" />
       </a-col>
-    </a-row>
-    <a-row type="flex" justify="center" align="middle" :gutter="[50,100]">
       <a-col>
-        <card title="今日沟通次数" total="3157" unit="次"/>
+        <card title="登录用户日活数" total="3157" />
       </a-col>
       <a-col>
-        <card title="今日活跃用户数" total="3157" />
+        <card title="总注册用户数" total="3157" />
       </a-col>
     </a-row>
+    <p class="text-2xl font-bold my-5">日活折线图</p>
+    <!-- 数据源 -->
+    <span>统计：</span>
+    <a-radio-group @change="handleChangeSource" default-value="barChartType.allUser">
+      <a-radio-button value="barChartType.allUser">
+        全局日活
+      </a-radio-button>
+      <a-radio-button value="barChartType.newUser">
+        注册日活
+      </a-radio-button>
+    </a-radio-group>
+    <!-- 日期范围 -->
+    <span class=" ml-7">统计：</span>
+    <a-radio-group @change="handleChangeTimeRange" default-value="10">
+        <a-radio-button value="10">
+          10天
+        </a-radio-button>
+         <a-radio-button value="15">
+          15天
+        </a-radio-button>
+         <a-radio-button value="30">
+          30天
+        </a-radio-button>
+    </a-radio-group>
+    <div id="barchart" ref="barchart" class="h-96 w-5/6"></div>
   </div>
 </template>
 
 
 <script lang="ts">
 import Vue from "vue";
-import {Row,Col} from 'ant-design-vue';
-Vue.use(Row);
-Vue.use(Col);
+import { Row, Col, Radio } from "ant-design-vue";
+import * as echarts from "echarts";
+import { getPastDaysUtilYesterday } from "@/utils/days/index";
+import { barChartType } from "./const"
+Vue.use(Row).use(Col).use(Radio)
+
 export default Vue.extend({
   components: {
-    'card': () => import('@/views/Root/Home/card.vue')
+    card: () => import("@/views/Root/Home/card.vue"),
   },
   data() {
-    return {};
+    return {
+      option: {
+        color: "#60A5FA",
+        xAxis: {
+          type: "category",
+          data: [],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 200, 150, 70, 70, 110, 130],
+            type: "bar",
+            showBackground: false,
+          },
+        ],
+      },
+      timeRange: 10,
+      myChart: undefined as undefined | echarts.ECharts,
+      barChartType,
+      
+    };
+  },
+  mounted() {
+    this.myChart = echarts.init(
+      document.getElementById("barchart") as HTMLCanvasElement
+    );
+    this.initEchart(this.timeRange);
+  },
+  watch: {
+    timeRange(newValue, oldValue) {
+      this.initEchart(newValue);
+    },
+    // barChartType(newValue, oldValue) {
+    //   this.initEchart(newValue);
+    // },
+  },
+  methods: {
+    handleChangeTimeRange(e:any) {
+      this.timeRange = e.target!.value;
+    },
+    handleChangeSource(e:any) {
+      this.barChartType = e.target!.value;     
+    },
+    initEchart(period: number) {
+      // 切换横坐标日期范围
+      (this.option.xAxis.data as Array<String>) = getPastDaysUtilYesterday(
+        period
+      ) as Array<String>;
+      (this.myChart as echarts.ECharts).setOption(this.option);
+      // 调用获取数据的请求接口
+    },
   },
-  watch: {},
 });
 </script>
\ No newline at end of file

src/views/Root/Security/changePhone.vue

@@ -19,7 +19,7 @@
         :wrapper-col="{ span: 4, offset: 0 }"
         prop="pwd"
       >
-        <a-input v-model="changeSecurityPhoneForm.pwd" />
+        <a-input v-model="changeSecurityPhoneForm.pwd" type="password" />
       </a-form-model-item>
       <a-form-model-item
         label="新手机号码"
@@ -53,7 +53,7 @@ import CodeInput from "@/components/CodeInput/index.vue";
 import { FormModel, Modal } from "ant-design-vue";
 import { phoneValid } from "./const";
 import UserService from "@/service/UserManagementService";
-import { deleteUserMsg } from "@/utils/userMsg/userMsg"
+import { deleteUserMsg } from "@/utils/userMsg/userMsg";
 export default Vue.extend({
   components: { CodeInput },
   props: {
@@ -63,13 +63,6 @@ export default Vue.extend({
     },
   },
   data() {
-    let validatePass = (rule: any, value: string, callback: Function) => {
-      console.log(1, value);
-
-      if (value === "" || value.length < 4) {
-        return;
-      }
-    };
     return {
       labelCol: { span: 10 },
       wrapperCol: { span: 10 },
@@ -98,8 +91,8 @@ export default Vue.extend({
         codeToConfirmChange: [
           {
             required: true,
-            len: 4,
-            message: "请输入4位短信验证码",
+            len: 6,
+            message: "请输入6位短信验证码",
             trigger: "blur",
           },
         ],
@@ -131,7 +124,7 @@ export default Vue.extend({
           verify_code: this.changeSecurityPhoneForm.codeToConfirmChange,
         });
         if (ret.code == 200) {
-          deleteUserMsg()
+          deleteUserMsg();
           Modal.info({
             title: "手机号修改成功",
             content: "请重新登陆",
@@ -139,12 +132,11 @@ export default Vue.extend({
               that.$router.push({ name: "login" });
             },
           });
-        } else{
+        } else {
           Modal.error({
             title: "手机号修改失败",
             content: ret.msg,
-            onOk() {
-            },
+            onOk() {},
           });
         }
         console.log(ret);

src/views/Root/Security/changePwd.vue

@@ -91,8 +91,8 @@ export default Vue.extend({
         code: [
           {
             required: true,
-            len: 4,
-            message: "请输入4位短信验证码",
+            len: 6,
+            message: "请输入6位短信验证码",
             trigger: "blur",
           },
         ],
@@ -137,6 +137,7 @@ export default Vue.extend({
           new_pwd: this.changeByCodeForm.newPass,
           verify_code: this.changeByCodeForm.code,
           phone: this.userPhone,
+          // phone:"",
         });
         if (ret.code == 200) {
           deleteUserMsg();