会员统计

src/components/chart/Bar.vue

@@ -24,9 +24,9 @@
         type: String as PropType<string>,
         default: 'calc(100vh - 78px)',
       },
-      itemStyleLabel: {
+      itemStyle: {
-        type: Boolean as PropType<boolean>,
+        type: Object,
-        default: true,
+        default: () => ({ normal: {label : {show: false, position: 'inside'}}}),
       },
       seriesName: {
         type: String as PropType<string>,
@@ -49,7 +49,7 @@
             type: 'shadow',
             label: {
               show: true,
-              backgroundColor: '#333',
+              backgroundColor: '#6a7985',
             },
           },
         },
@@ -64,9 +64,9 @@
           {
             name: props.seriesName,
             type: 'bar',
-            data: [],
             color: props.seriesColor,
-            itemStyle : { normal: {label : {show: props.itemStyleLabel, position: 'inside'}}},
+            itemStyle : props.itemStyle,
+            data: [],
           },
         ],
       });
@@ -89,7 +89,7 @@
         // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
         option.series[0].name = props.seriesName;
         option.series[0].color = props.seriesColor;
-        option.series[0].itemStyle.normal.label.show = props.itemStyleLabel;
+        option.series[0].itemStyle = props.itemStyle;
         // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
         option.xAxis.data = xAxisData;
         setOptions(option);

src/components/chart/BaseAreaLine.vue

@@ -0,0 +1,102 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'single-line',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      lineStyle: {
+        type: Object,
+        default: () => ({color: '#1890ff'}),
+      },
+      areaStyle: {
+        type: Object,
+        default: () => ({color: '#1890ff'}),
+      },
+      seriesLabel: {
+        type: Object,
+        default: () => ({show: false, position: 'top'}),
+      },
+      seriesName: {
+        type: String as PropType<string>,
+        default: 'bar',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: []
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: props.seriesName,
+            type: 'line',
+            areaStyle: props.areaStyle,
+            lineStyle: props.lineStyle,
+            label: props.seriesLabel,
+            data: [],
+          }
+        ]
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        let seriesData = props.chartData.map((item) => {
+          return item.value;
+        });
+        let xAxisData = props.chartData.map((item) => {
+          return item.name;
+        });
+        option.series[0].data = seriesData;
+        option.series[0].name = props.seriesName;
+        option.series[0].areaStyle = props.areaStyle;
+        option.series[0].lineStyle = props.lineStyle;
+        option.series[0].label = props.seriesLabel;
+        option.xAxis.data = xAxisData;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>

src/views/zh/hy/hy.api.ts

@@ -0,0 +1,29 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  housingestateList = '/zh/hy/queryHousingestateList',
+  registerList = '/zh/hy/queryHyRegisterList',
+  xzList = '/zh/hy/queryHyXzList',
+  tdcsList = '/zh/hy/queryHyTdcsList',
+}
+
+/**
+ * 获取小区
+ * @param params
+ */
+export const housingestateList = (params) => defHttp.get({ url: Api.housingestateList, params });
+/**
+ * 会员注册时间段统计
+ * @param params
+ */
+export const registerList = (params) => defHttp.get({ url: Api.registerList, params });
+/**
+ * 新增会员统计
+ * @param params
+ */
+export const xzList = (params) => defHttp.get({ url: Api.xzList, params });
+/**
+ * 会员投递次数排行榜
+ * @param params
+ */
+export const tdcsList = (params) => defHttp.get({ url: Api.tdcsList, params });

src/views/zh/hy/tdcs/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-row>
+        <a-col :span="20">
+          <a-radio-group v-model:value="parmas.type" @change="changeType">
+            <a-radio-button value="1">近3天</a-radio-button>
+            <a-radio-button value="2">近7天</a-radio-button>
+            <a-radio-button value="3">近30天</a-radio-button>
+            <a-radio-button value="4">自定义</a-radio-button>
+          </a-radio-group>
+          <span v-show="parmas.type=='4'" style="margin-left: 5px;">
+            <a-range-picker :value-format="valueFormat" @change="changeDate" />
+          </span>
+          <a-select ref="select"
+                    placeholder="请选区域"
+                    v-model:value="parmas.housingestateId"
+                    style="width: 200px;margin-left: 5px;"
+                    @change="handleHousinges">
+            <a-select-option value="" >全部</a-select-option>
+            <a-select-option :value="item.housingestateId" v-for="item in housingestates" :key="item.housingestateId">{{item.housingestateName}}</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员投递次数排行榜', left: 'center' }}" :itemStyle="{ normal: {label : {show: true, position: 'top'}}}" :seriesName="'投递次数'"></Bar>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, unref, reactive, onMounted} from 'vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import { tdcsList,housingestateList } from '../hy.api';
+  import type { Dayjs } from 'dayjs';
+  const valueFormat = 'YYYY-MM-DD';
+  const dataSource = ref([]);
+  const dateValue = ref();
+  const housingestates = ref();
+
+  async function getHousingestates(){
+    housingestates.value = await housingestateList();
+  }
+
+  const parmas = reactive<any>({
+    beginTime: '',
+    endTime: '',
+    type: '1',
+  })
+
+  function changeType (){
+    parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    if (parmas.type === '1') {
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '2') {
+      parmas.beginTime=getPreviousDate(6)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '3') {
+      parmas.beginTime=getPreviousDate(29)+' 00:00:00';
+      loadDate();
+    }
+  }
+
+  const changeDate = (date, dateString) => {
+    parmas.beginTime=dateString[0]+' 00:00:00';
+    parmas.endTime=dateString[1]+' 23:59:59';
+    loadDate();
+  };
+
+  function handleHousinges(){
+    loadDate();
+  };
+
+  async function loadDate() {
+    const res = await tdcsList(parmas);
+    dataSource.value = [];
+    for (let i = 0; i < res.length; i++) {
+      dataSource.value.push({
+        name: `${res[i].phone}`,
+        value: res[i].cn,
+      });
+    }
+  }
+
+  function getPreviousDate(days){
+    const date = new Date();
+    date.setDate(date.getDate() - days);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
+    const day = String(date.getDate()).padStart(2, '0');         // 日期补零
+    const formattedDate = `${year}-${month}-${day}`;
+    return formattedDate;
+  }
+
+  onMounted(() => {
+    getHousingestates();
+    if(parmas.type=='1'){
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    }
+    loadDate();
+  })
+
+</script>

src/views/zh/hy/tdzl/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-row>
+        <a-col :span="20">
+          <a-radio-group v-model:value="parmas.type" @change="changeType">
+            <a-radio-button value="1">近3天</a-radio-button>
+            <a-radio-button value="2">近7天</a-radio-button>
+            <a-radio-button value="3">近30天</a-radio-button>
+            <a-radio-button value="4">自定义</a-radio-button>
+          </a-radio-group>
+          <span v-show="parmas.type=='4'" style="margin-left: 5px;">
+            <a-range-picker :value-format="valueFormat" @change="changeDate" />
+          </span>
+          <a-select ref="select"
+                    placeholder="请选区域"
+                    v-model:value="parmas.housingestateId"
+                    style="width: 200px;margin-left: 5px;"
+                    @change="handleHousinges">
+            <a-select-option value="" >全部</a-select-option>
+            <a-select-option :value="item.housingestateId" v-for="item in housingestates" :key="item.housingestateId">{{item.housingestateName}}</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员投递次数排行榜', left: 'center' }}" :itemStyle="{ normal: {label : {show: true, position: 'top'}}}" :seriesName="'投递次数'"></Bar>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, unref, reactive, onMounted} from 'vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import { tdcsList,housingestateList } from '../hy.api';
+  import type { Dayjs } from 'dayjs';
+  const valueFormat = 'YYYY-MM-DD';
+  const dataSource = ref([]);
+  const dateValue = ref();
+  const housingestates = ref();
+
+  async function getHousingestates(){
+    housingestates.value = await housingestateList();
+  }
+
+  const parmas = reactive<any>({
+    beginTime: '',
+    endTime: '',
+    type: '1',
+  })
+
+  function changeType (){
+    parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    if (parmas.type === '1') {
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '2') {
+      parmas.beginTime=getPreviousDate(6)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '3') {
+      parmas.beginTime=getPreviousDate(29)+' 00:00:00';
+      loadDate();
+    }
+  }
+
+  const changeDate = (date, dateString) => {
+    parmas.beginTime=dateString[0]+' 00:00:00';
+    parmas.endTime=dateString[1]+' 23:59:59';
+    loadDate();
+  };
+
+  function handleHousinges(){
+    loadDate();
+  };
+
+  async function loadDate() {
+    const res = await tdcsList(parmas);
+    dataSource.value = [];
+    for (let i = 0; i < res.length; i++) {
+      dataSource.value.push({
+        name: `${res[i].phone}`,
+        value: res[i].cn,
+      });
+    }
+  }
+
+  function getPreviousDate(days){
+    const date = new Date();
+    date.setDate(date.getDate() - days);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
+    const day = String(date.getDate()).padStart(2, '0');         // 日期补零
+    const formattedDate = `${year}-${month}-${day}`;
+    return formattedDate;
+  }
+
+  onMounted(() => {
+    getHousingestates();
+    if(parmas.type=='1'){
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    }
+    loadDate();
+  })
+
+</script>

src/views/zh/hy/xz/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-row>
+        <a-col :span="20">
+          <a-radio-group v-model:value="parmas.type" @change="changeType">
+            <a-radio-button value="1">近3天</a-radio-button>
+            <a-radio-button value="2">近7天</a-radio-button>
+            <a-radio-button value="3">近30天</a-radio-button>
+            <a-radio-button value="4">自定义</a-radio-button>
+          </a-radio-group>
+          <span v-show="parmas.type=='4'" style="margin-left: 5px;">
+            <a-range-picker :value-format="valueFormat" @change="changeDate" />
+          </span>
+        </a-col>
+      </a-row>
+      <BaseAreaLine :chartData="dataSource" height="80vh" :option="{ title: { text: '新增会员统计', left: 'center' }}" :seriesLabel="{show: true, position: 'top'}" :seriesName="'个数'"></BaseAreaLine>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, unref, reactive, onMounted} from 'vue';
+  import BaseAreaLine from '/@/components/chart/BaseAreaLine.vue';
+  import { xzList } from '../hy.api';
+  import type { Dayjs } from 'dayjs';
+  const valueFormat = 'YYYY-MM-DD';
+  const dataSource = ref([]);
+  const dateValue = ref();
+
+  const parmas = reactive<any>({
+    beginTime: '',
+    endTime: '',
+    type: '1',
+  })
+
+  function changeType (){
+    parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    if (parmas.type === '1') {
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '2') {
+      parmas.beginTime=getPreviousDate(6)+' 00:00:00';
+      loadDate();
+    }
+    if (parmas.type === '3') {
+      parmas.beginTime=getPreviousDate(29)+' 00:00:00';
+      loadDate();
+    }
+  }
+
+  const changeDate = (date, dateString) => {
+    parmas.beginTime=dateString[0]+' 00:00:00';
+    parmas.endTime=dateString[1]+' 23:59:59';
+    loadDate();
+  };
+
+  function handleHousinges(){
+    loadDate();
+  }
+
+  async function loadDate() {
+    const res = await xzList(parmas);
+    dataSource.value = [];
+    for (let i = 0; i < res.length; i++) {
+      dataSource.value.push({
+        name: `${res[i].shortDay}`,
+        value: res[i].cn,
+      });
+    }
+  }
+
+  function getPreviousDate(days){
+    const date = new Date();
+    date.setDate(date.getDate() - days);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
+    const day = String(date.getDate()).padStart(2, '0');         // 日期补零
+    const formattedDate = `${year}-${month}-${day}`;
+    return formattedDate;
+  }
+
+  onMounted(() => {
+    if(parmas.type=='1'){
+      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
+      parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    }
+    loadDate();
+  })
+
+</script>

src/views/zh/hy/zc/hy.api.ts

@@ -1,11 +0,0 @@
-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  registerList = '/zh/hy/queryPageList',
-}
-
-/**
- * 会员注册时间段统计
- * @param params
- */
-export const registerList = (params) => defHttp.get({ url: Api.registerList, params });

src/views/zh/hy/zc/index.vue

@@ -4,9 +4,17 @@
       <a-row>
         <a-col :span="10">
           <a-date-picker :value-format="valueFormat" :default-value="defaultValue" v-model:value="parmas.dateString" @change="changeDate" />
+          <a-select ref="select"
+                    placeholder="请选区域"
+                    v-model:value="parmas.housingestateId"
+                    style="width: 200px;margin-left: 5px;"
+                    @change="handleHousinges">
+            <a-select-option value="" >全部</a-select-option>
+            <a-select-option :value="item.housingestateId" v-for="item in housingestates" :key="item.housingestateId">{{item.housingestateName}}</a-select-option>
+          </a-select>
         </a-col>
       </a-row>
-      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员注册时间段统计', left: 'center' }}" :itemStyleLabel="false" :seriesName="'个数'"></Bar>
+      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员注册时间段统计', left: 'center' }}" :itemStyle="{ normal: {label : {show: true, position: 'top'}}}" :seriesName="'个数'"></Bar>
     </a-card>
   </div>
 </template>
@@ -14,11 +22,16 @@
 <script lang="ts" setup>
   import {ref, unref, reactive, onMounted} from 'vue';
   import Bar from '/@/components/chart/Bar.vue';
-  import { registerList } from './hy.api';
+  import { registerList,housingestateList } from '../hy.api';
   import type { Dayjs } from 'dayjs';
   const valueFormat = 'YYYY-MM-DD';
   const dataSource = ref([]);
   const dateValue = ref();
+  const housingestates = ref();
+
+  async function getHousingestates(){
+    housingestates.value = await housingestateList();
+  }
 
   const parmas = reactive<any>({
     beginTime: '',
@@ -29,14 +42,19 @@
 
   const changeDate = (date, dateString) => {
     parmas.dateString = dateString;
+    loadDate();
   };
+
+  function handleHousinges(){
+    loadDate();
+  };
+
   async function loadDate() {
     if(parmas.dateString!=''){
       parmas.beginTime = parmas.dateString+' 00:00:00';
       parmas.endTime = parmas.dateString+' 23:59:59';
     }
     const res = await registerList(parmas);
-    console.log(res);
     dataSource.value = [];
     for (let i = 0; i < res.length; i++) {
       dataSource.value.push({
@@ -46,9 +64,19 @@
     }
   }
 
+  function getCurrent(){
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
+    const day = String(date.getDate()).padStart(2, '0');         // 日期补零
+    const formattedDate = `${year}-${month}-${day}`;
+    return formattedDate;
+  }
+
   onMounted(() => {
+    getHousingestates();
     if(parmas.dateString==''){
-      parmas.dateString='2025-06-30';
+      parmas.dateString=getCurrent();
     }
     loadDate();
   })

src/views/zh/monitor/monitor.api.ts

@@ -0,0 +1,16 @@
+import { defHttp } from '/@/utils/http/axios';
+enum Api {
+  monitorHousingestate = '/dataMonitorApi/monitorHousingestateInfos',
+  monitorDevice = '/dataMonitorApi/monitorAllDeviceInfos',
+  monitorUser = '/dataMonitorApi/monitorUserInfos',
+  monitorOverflow = '/dataMonitorApi/monitorDeviceOverflowInfo',
+  monitorClear = '/dataMonitorApi/monitorDeviceClearLog',
+  monitorOrder = '/dataMonitorApi/monitorOrderInfos',
+}
+
+export const monitorHousingestate = (params) => defHttp.get({ url: Api.monitorHousingestate, params });
+export const monitorDevice = (params) => defHttp.get({ url: Api.monitorDevice, params });
+export const monitorUser = (params) => defHttp.get({ url: Api.monitorUser, params });
+export const monitorOverflow = (params) => defHttp.get({ url: Api.monitorOverflow, params });
+export const monitorClear = (params) => defHttp.get({ url: Api.monitorClear, params });
+export const monitorOrder = (params) => defHttp.get({ url: Api.monitorOrder, params });