设备统计

2025-07-04 14:29:17 +08:00 · 2025-07-04 14:29:17 +08:00 · eb993507d6
parent ddff38973d
commit eb993507d6
5 changed files with 280 additions and 3 deletions
--- a/src/components/chart/BaseAreaLine.vue
+++ b/src/components/chart/BaseAreaLine.vue
@ -40,6 +40,15 @@
        type: String as PropType<string>,
        default: 'bar',
      },
+      grid: {
+        type: Object,
+        default: () => ({
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        }),
+      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
@ -54,6 +63,7 @@
            }
          }
        },
+        grid: props.grid,
        xAxis: {
          type: 'category',
          boundaryGap: false,
--- a/src/components/chart/LineMulti.vue
+++ b/src/components/chart/LineMulti.vue
@ -30,6 +30,27 @@
        type: String as PropType<string>,
        default: 'calc(100vh - 78px)',
      },
+      seriesLabel: {
+        type: Object,
+        default: () => ({show: false, position: 'top'}),
+      },
+      seriesName: {
+        type: String as PropType<string>,
+        default: 'bar',
+      },
+      grid: {
+        type: Object,
+        default: () => ({
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        }),
+      },
+      seriesLabel: {
+        type: Object,
+        default: () => ({show: false, position: 'top'}),
+      },
    },
    emits: ['click'],
    setup(props, { emit }) {
@ -49,9 +70,7 @@
        legend: {
          top: 30,
        },
-        grid: {
-          top: 60,
-        },
+        grid: props.grid,
        xAxis: {
          type: 'category',
          data: [],
@ -82,6 +101,7 @@
          if (findItem && findItem.color) {
            obj.color = findItem.color;
          }
+          obj.label = props.seriesLabel;
          // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
          // update-begin-author:liusq date:2023-7-12 for: [issues/613] LineMulti 在数据不对齐时，横坐标计算错误
          let data = [];
--- a/src/views/zh/shebei/shebei.api.ts
+++ b/src/views/zh/shebei/shebei.api.ts
@ -8,6 +8,9 @@ enum Api {
  allTdcsList = '/zh/shebei/queryAllSheBeiTdcsList',
  queryHyjlList = '/zh/hy/queryHyjlList',
  tdzlList = '/zh/shebei/querySheBeiTdzlList',
+  tdcstjList = '/zh/shebei/querySheBeiTdcstjList',
+  tdjetjList = '/zh/shebei/querySheBeiTdjetjList',
+  deviceList = '/zh/shebei/deviceList',
 }

 /**
@ -15,6 +18,11 @@ enum Api {
 * @param params
 */
 export const housingestateList = (params) => defHttp.get({ url: Api.housingestateList, params });
+/**
+ * 获取设备
+ * @param params
+ */
+export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });
 /**
 * 会员注册时间段统计
 * @param params
@ -45,3 +53,12 @@ export const queryHyjlList = (params) => defHttp.get({ url: Api.queryHyjlList, p
 * @param params
 */
 export const tdzlList = (params) => defHttp.get({ url: Api.tdzlList, params });
+/**
+ * 投递订单金额统计
+ * @param params
+ */
+export const tdjetjList = (params) => defHttp.get({ url: Api.tdjetjList, params });/**
+ * 投递订单次数统计
+ * @param params
+ */
+export const tdcstjList = (params) => defHttp.get({ url: Api.tdcstjList, params });
--- a/src/views/zh/shebei/tdcstj/index.vue
+++ b/src/views/zh/shebei/tdcstj/index.vue
@ -0,0 +1,115 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-row>
+        <a-col :span="20">
+          <span>
+            <a-range-picker v-model:value="dateValue" :value-format="valueFormat" @change="changeDate" />
+          </span>
+          <span style="margin-left: 5px;">
+            <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>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-select ref="select" placeholder="请选设备" v-model:value="parmas.imei"
+                      style="width: 300px;margin-left: 5px;" @change="handleDevices">
+              <a-select-option :value="item.imei" v-for="item in devices" :key="item.imei">{{item.content==''?item.imei: item.housingestateName==''?item.content: item.housingestateName+'-'+item.content }}</a-select-option>
+            </a-select>
+          </span>
+        </a-col>
+      </a-row>
+      <a-row style="margin-top:10px">
+<!--        <BaseAreaLine :chartData="dataSource" height="80vh" :option="{ title: { text: '投递订单次数统计', left: 'center' }}" :seriesLabel="{show: true, position: 'top'}" :seriesName="'投递次数'"></BaseAreaLine>-->
+        <LineMulti :chartData="dataSource" height="80vh" :option="{ title: { text: '投递订单次数统计', left: 'center' }}" :seriesLabel="{show: true, position: 'top'}" type="line"></LineMulti>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, unref, reactive, onMounted} from 'vue';
+  import dayjs, { Dayjs } from 'dayjs';
+  import BaseAreaLine from '/@/components/chart/BaseAreaLine.vue';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import { tdcstjList, housingestateList, deviceList } from '../shebei.api';
+  const valueFormat = 'YYYY-MM-DD';
+  const dataSource = ref([]);
+  const dateValue = ref<[Dayjs, Dayjs]>([
+    dayjs(getPreviousDate(29), valueFormat),
+    dayjs(getPreviousDate(0), valueFormat),
+  ]);
+  const housingestates = ref();
+  const devices = ref();
+  const parmas = reactive<any>({
+    beginTime: '',
+    endTime: '',
+    imei: '',
+    housingestateId: '',
+  })
+
+  const changeDate = (date, dateString) => {
+    parmas.beginTime=dateString[0]+' 00:00:00';
+    parmas.endTime=dateString[1]+' 23:59:59';
+    loadDate();
+  };
+
+  function handleHousinges(){
+    parmas.imei = '';
+    getDevicess();
+  }
+
+  function handleDevices(){
+    loadDate();
+  }
+
+  async function loadDate() {
+    const res = await tdcstjList(parmas);
+    dataSource.value = [];
+    if(res.length>0){
+      let data = res[0];
+      console.log(data);
+      parmas.housingestateId = data.housingestateId;
+      parmas.imei = data.imei;
+      for (let i = 0; i < res.length; i++) {
+        dataSource.value.push({
+          type: '投递次数',
+          name: `${res[i].shortDay}`,
+          value: res[i].cn,
+        });
+      }
+      getDevicess();
+    }
+  }
+
+  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;
+  }
+
+  async function getHousingestates() {
+    housingestates.value = await housingestateList();
+  }
+
+  async function getDevicess() {
+    let param = {
+      "housingestateId" : parmas.housingestateId
+    }
+    devices.value = await deviceList(param);
+  }
+
+  onMounted(() => {
+    parmas.beginTime=getPreviousDate(29)+' 00:00:00';
+    parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    loadDate();
+    getHousingestates();
+  })
+
+</script>
--- a/src/views/zh/shebei/tdjetj/index.vue
+++ b/src/views/zh/shebei/tdjetj/index.vue
@ -0,0 +1,115 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-row>
+        <a-col :span="20">
+          <span>
+            <a-range-picker v-model:value="dateValue" :value-format="valueFormat" @change="changeDate" />
+          </span>
+          <span style="margin-left: 5px;">
+            <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>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-select ref="select" placeholder="请选设备" v-model:value="parmas.imei"
+                      style="width: 300px;margin-left: 5px;" @change="handleDevices">
+              <a-select-option :value="item.imei" v-for="item in devices" :key="item.imei">{{item.content==''?item.imei: item.housingestateName==''?item.content: item.housingestateName+'-'+item.content }}</a-select-option>
+            </a-select>
+          </span>
+        </a-col>
+      </a-row>
+      <a-row style="margin-top:10px">
+<!--        <BaseAreaLine :chartData="dataSource" height="80vh" :option="{ title: { text: '投递订单金额统计', left: 'center' }}" :seriesLabel="{show: true, position: 'top'}" :seriesName="'金额'"></BaseAreaLine>-->
+        <LineMulti :chartData="dataSource" height="80vh" :option="{ title: { text: '投递订单金额统计', left: 'center' }}" :seriesLabel="{show: true, position: 'top'}" type="line"></LineMulti>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref, unref, reactive, onMounted} from 'vue';
+  import dayjs, { Dayjs } from 'dayjs';
+  import BaseAreaLine from '/@/components/chart/BaseAreaLine.vue';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import { tdjetjList, housingestateList, deviceList } from '../shebei.api';
+  const valueFormat = 'YYYY-MM-DD';
+  const dataSource = ref([]);
+  const dateValue = ref<[Dayjs, Dayjs]>([
+    dayjs(getPreviousDate(29), valueFormat),
+    dayjs(getPreviousDate(0), valueFormat),
+  ]);
+  const housingestates = ref();
+  const devices = ref();
+  const parmas = reactive<any>({
+    beginTime: '',
+    endTime: '',
+    imei: '',
+    housingestateId: '',
+  })
+
+  const changeDate = (date, dateString) => {
+    parmas.beginTime=dateString[0]+' 00:00:00';
+    parmas.endTime=dateString[1]+' 23:59:59';
+    loadDate();
+  };
+
+  function handleHousinges(){
+    parmas.imei = '';
+    getDevicess();
+  }
+
+  function handleDevices(){
+    loadDate();
+  }
+
+  async function loadDate() {
+    const res = await tdjetjList(parmas);
+    dataSource.value = [];
+    if(res.length>0){
+      let data = res[0];
+      console.log(data);
+      parmas.housingestateId = data.housingestateId;
+      parmas.imei = data.imei;
+      for (let i = 0; i < res.length; i++) {
+        dataSource.value.push({
+          type: '金额',
+          name: `${res[i].shortDay}`,
+          value: res[i].money,
+        });
+      }
+      getDevicess();
+    }
+  }
+
+  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;
+  }
+
+  async function getHousingestates() {
+    housingestates.value = await housingestateList();
+  }
+
+  async function getDevicess() {
+    let param = {
+      "housingestateId" : parmas.housingestateId
+    }
+    devices.value = await deviceList(param);
+  }
+
+  onMounted(() => {
+    parmas.beginTime=getPreviousDate(29)+' 00:00:00';
+    parmas.endTime=getPreviousDate(0)+' 23:59:59';
+    loadDate();
+    getHousingestates();
+  })
+
+</script>