pms-app/components/statistic/maintenance.vue

<template>
  <view>
    <uni-card>
      <uni-row class="flex-row flex-wrap" >
        <!--   昨日工单数量   -->
        <uni-row class="flex-row flex-wrap align-center" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="24">{{ $t('statistic.maintenance.dayCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count1') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count2') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.yesterday.total }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.yesterday.todo }}</uni-col>
        </uni-row>
        <view class="divider-h" style="align-self: end" />
        <!--   近一周工单数量   -->
        <uni-row class="flex-row flex-wrap" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="24">{{ $t('statistic.maintenance.weeklyCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count1') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count2') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.week.total }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.week.todo }}</uni-col>
        </uni-row>
        <uni-col :span="24">
          <view class="divider-v" />
        </uni-col>
        <!--   近一月工单数量   -->
        <uni-row class="flex-row flex-wrap" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="24">{{ $t('statistic.maintenance.monthlyCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count1') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count2') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.month.total }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.month.todo }}</uni-col>
        </uni-row>
        <view class="divider-h" style="align-self: start" />
        <!--   总工单数量   -->
        <uni-row class="flex-row flex-wrap" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="24">{{ $t('statistic.maintenance.totalCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count1') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.maintenance.count2') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.total.total }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ data.total.todo }}</uni-col>
        </uni-row>
      </uni-row>
    </uni-card>
    <!--   保养工单状态统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.maintenance.workOrder.title')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts"
              :chartData="data.statusChart"
          />
        </view>
      </view>
    </uni-card>
    <!--   今日工单状态统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.maintenance.dayWorkOrder.title')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts"
              :chartData="data.todayStatusChart"
          />
        </view>
      </view>
    </uni-card>
    <!--   工单类型状态统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.maintenance.orderType.title')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts1"
              :chartData="data.typeChart"
          />
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import {
  getMaintenanceStatusStatistic,
  getMaintenanceTodayStatusStatistic,
  getMaintenanceTypeStatistic,
  getMonthlyMaintenanceStatistic,
  getTotalMaintenanceStatistic,
  getWeeklyMaintenanceStatistic,
  getYesterdayMaintenanceStatistic
} from "@/api/statistic";

const { appContext } = getCurrentInstance()
const t = appContext.config.globalProperties.$t

// 初始化环形图
const opts = {
  color: ['#0055BB', '#FF5D00'],
  padding: [0, 10, 0, 10],
  title: { name: '' },
  subtitle: { name: '' },
  legend: {
    position: 'bottom',
  },
  extra: {
    ring: {
      ringWidth: 30, // 圆环的宽度
      activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
      activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
      offsetAngle: -90, // 起始角度偏移度数
      labelWidth: 10, // 数据标签到饼图外圆连线的长度
      customRadius: 80, // 自定义半径
      borderWidth: 3, // 分割线的宽度
      borderColor: "#FFFFFF" // 分割线的颜色
    }
  }
}
const opts1 = { ...opts, color: ['#5470C6', '#9CDC7E'] }

const data = reactive({
  yesterday: {},
  week: {},
  month: {},
  total: {},
  statusChart: { series: [] },
  todayStatusChart: { series: [] },
  typeChart: { series: [] },
})

const isLoadData = ref(false)

// 加载维修相关统计数据
const loadData = async () => {
  if (isLoadData.value) return // 已加载数据后不再加载数据
  isLoadData.value = true

  const getYesterdayMaintenanceStatisticAsync = getYesterdayMaintenanceStatistic()
  const getWeeklyMaintenanceStatisticAsync = getWeeklyMaintenanceStatistic()
  const getMonthlyMaintenanceStatisticAsync = getMonthlyMaintenanceStatistic()
  const getTotalMaintenanceStatisticAsync = getTotalMaintenanceStatistic()
  const getMaintenanceStatusStatisticAsync = getMaintenanceStatusStatistic()
  const getMaintenanceTodayStatusStatisticAsync = getMaintenanceTodayStatusStatistic()
  const getMaintenanceTypeStatisticAsync = getMaintenanceTypeStatistic()

  data.yesterday = (await getYesterdayMaintenanceStatisticAsync).data
  data.week = (await getWeeklyMaintenanceStatisticAsync).data
  data.month = (await getMonthlyMaintenanceStatisticAsync).data
  data.total = (await getTotalMaintenanceStatisticAsync).data

  const status = (await getMaintenanceStatusStatisticAsync).data
  const todayStatus = (await getMaintenanceTodayStatusStatisticAsync).data
  const type = (await getMaintenanceTypeStatisticAsync).data

  // 工单状态数据填充
  data.statusChart.series = [{
    data: [
      {
        name: t('statistic.maintenance.workOrder.status1'),
        value: status.todo || 0,
        labelText: t('statistic.maintenance.workOrder.status1') + ': ' + (status.todo || 0)
      },
      { name: t('statistic.maintenance.workOrder.status2'),
        value: status.finished || 0,
        labelText: t('statistic.maintenance.workOrder.status2') + ': ' + (status.finished || 0)
      },
    ],
  }]

  // 今日工单状态相关数据填充
  data.todayStatusChart.series = [{
    data: [
      {
        name: t('statistic.maintenance.workOrder.status1'),
        value: todayStatus.todo || 0,
        labelText: t('statistic.maintenance.workOrder.status1') + ': ' + (todayStatus.todo || 0)
      },
      { name: t('statistic.maintenance.workOrder.status2'),
        value: todayStatus.finished || 0,
        labelText: t('statistic.maintenance.workOrder.status2') + ': ' + (todayStatus.finished || 0)
      },
    ],
  }]

  // 工单类型数据填充
  data.typeChart.series = [{
    data: [
      {
        name: t('statistic.maintenance.orderType.status1'),
        value: type['临时新建'] ?? 0,
        labelText: t('statistic.maintenance.orderType.status1') + ': ' + (type['临时新建'] ?? 0)
      },
      { name: t('statistic.maintenance.orderType.status2'),
        value: type['计划生成'] ?? 0,
        labelText: t('statistic.maintenance.orderType.status2') + ': ' + (type['计划生成'] ?? 0)
      },
    ],
  }]
}

defineExpose({ loadData })
</script>

<style scoped lang="scss">
.charts-box {
  width: 100%;
  height: 300px;
}

:deep(.uni-card) {
  padding: 0 !important;

  .uni-card__content {
    padding: 0 !important;
  }

  .uni-section {
    margin-top: 8px;
    padding: 0 15px 0 20px;

    .uni-section-header {
      padding: 10px 0;
    }

    .uni-section__content-title {
      font-size: 16px !important;
      font-weight: 600;
    }
  }
}

:deep(.uni-section) {
  background-color: transparent;

  .uni-section-header {
    padding: 5px 10px;
  }
  .line {
    width: 3px;
    height: 14px;
    background-color: #004098;
  }
}

.divider {
  width: 1px;
  height: 114px;
  background-color: #CACCCF;
  margin: 0 24px;
}

.divider-v {
  width: auto;
  height: 1.5px;
  border-bottom: 1.5px #CACCCF dashed;
  margin: 0 20px;
}

.divider-h {
  width: 1.5px;
  height: 50px;
  border-left: 1.5px #CACCCF dashed;
  margin: 0 4px;
}

.count-label {
  color: #666666;
  font-size: 14px;
}

.count-value {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
}

.mt-5 {
  margin-top: 5px;
}

.mt-8 {
  margin-top: 8px;
}

.pl-10 {
  padding-left: 10px;
}
</style>