pms-app/components/statistic/rapair.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">MTTR</uni-col>
          <uni-col class="count-label" :span="24">{{ $t('statistic.repair.resolutionTime') }}</uni-col>
          <uni-col class="count-value" :span="24" style="margin-top: 6px">{{ 0 }}</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.repair.weeklyCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.report') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.workOrder') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.week.failureWeek }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.week.maintainWeek }}</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.repair.monthlyCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.report') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.workOrder') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.month.failureMonth }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.month.maintainMonth }}</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.repair.totalCount') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.report') }}</uni-col>
          <uni-col class="count-label" :span="12">{{ $t('statistic.repair.workOrder') }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.total.failureTotal }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{ repairData.total.maintainTotal }}</uni-col>
        </uni-row>
      </uni-row>
    </uni-card>
    <!--   故障上报状态统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.repair.failure.title')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts"
              :chartData="repairData.chart"
          />
        </view>
      </view>
    </uni-card>
    <!--   维修工单状态统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.repair.workOrder.title')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts"
              :chartData="repairData.orderChart"
          />
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import {
  getMonthlyRepairStatistic,
  getOtherRepairStatistic,
  getTotalRepairStatistic,
  getWeeklyRepairStatistic
} from "@/api/statistic";

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

// 初始化环形图
const opts = {
  color: ['#00DD99', '#FF5500', '#0056BF', '#FAC858'],
  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 repairData = reactive({
  week: {},
  month: {},
  total: {},
  chart: { series: [] },
  orderChart: { series: [] },
})

const isLoadData = ref(false)

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

  const getWeeklyRepairStatisticAsync = getWeeklyRepairStatistic()
  const getMonthlyRepairStatisticAsync = getMonthlyRepairStatistic()
  const getTotalRepairStatisticAsync = getTotalRepairStatistic()
  const getOtherRepairStatisticAsync = getOtherRepairStatistic()

  repairData.week = (await getWeeklyRepairStatisticAsync).data
  repairData.month = (await getMonthlyRepairStatisticAsync).data
  repairData.total = (await getTotalRepairStatisticAsync).data
  const data = (await getOtherRepairStatisticAsync).data

  // 故障相关数据填充
  repairData.chart.series = [{
    data: [
      {
        name: t('statistic.repair.failure.reporting'),
        value: data.failureStatus.reporting || 0,
        labelText: t('statistic.repair.failure.reporting') + ': ' + (data.failureStatus.reporting || 0)
      },
      { name: t('statistic.repair.failure.finished'),
        value: data.failureStatus.finished || 0,
        labelText: t('statistic.repair.failure.finished') + ': ' + (data.failureStatus.finished || 0)
      },
      {
        name: t('statistic.repair.failure.trans'),
        value: data.failureStatus.trans || 0,
        labelText: t('statistic.repair.failure.trans') + ': ' + (data.failureStatus.trans || 0)
      },
      {
        name: t('statistic.repair.failure.over'),
        value: 0,
        labelText: t('statistic.repair.failure.over') + ': ' + 0
      },
    ],
  }]

  // 工单相关数据填充
  repairData.orderChart.series = [{
    data: [
      {
        name: t('statistic.repair.workOrder.tx'),
        value: data.maintainStatus.tx || 0,
        labelText: t('statistic.repair.workOrder.tx') + ': ' + (data.maintainStatus.tx || 0)
      },
      { name: t('statistic.repair.workOrder.finished'),
        value: data.maintainStatus.finished || 0,
        labelText: t('statistic.repair.workOrder.finished') + ': ' + (data.maintainStatus.finished || 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>