pms-app/components/statistic/front.vue

<template>
  <view>
    <uni-card>
      <uni-row class="flex-row flex-wrap">
        <!--   设备总数   -->
        <uni-row class="flex-row flex-wrap" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.deviceCount")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.repairCount")
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.device.total || 0
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.maintain.total || 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.front.runCount")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.filled")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.unfilled")
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.pending.filledCount || 0
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.pending.unfilledCount || 0
          }}</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.front.maintenanceCount")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.execute")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.unexecute")
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.maintenance.finished || 0
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.maintenance.todo || 0
          }}</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.front.inspectionCount")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.filled")
          }}</uni-col>
          <uni-col class="count-label" :span="12">{{
            $t("statistic.front.unfilled")
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.inspect.finished || 0
          }}</uni-col>
          <uni-col class="count-value" :span="12" style="margin-top: 6px">{{
            frontData.inspect.todo || 0
          }}</uni-col>
        </uni-row>
      </uni-row>
    </uni-card>
    <uni-card>
      <uni-row class="flex-row flex-wrap">
        <!--   MTTR(平均解决时间)   -->
        <uni-row class="flex-row flex-wrap" style="flex: 1; padding: 10px">
          <uni-col class="count-label" :span="24">{{
            $t("statistic.front.mttr")
          }}</uni-col>
          <uni-col
            class="count-value mttr"
            :span="24"
            style="margin-top: 6px"
            >{{ frontData.mttr ? frontData.mttr +'h' : '' }}</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.front.stockWarningCount")
          }}</uni-col>
          <uni-col
            class="count-value warning"
            :span="24"
            style="margin-top: 6px"
            >{{ frontData.stockWarning }}</uni-col
          >
        </uni-row>
      </uni-row>
    </uni-card>
    <!--   设备状态统计   -->

    <uni-card>
      <uni-section :title="$t('statistic.front.deviceStatus')" />

      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
            type="ring"
            :opts="deviceStatusOpts"
            :chartData="frontData.deviceStatusChart"
          />
        </view>
      </view>
    </uni-card>
    <!--   设备类别TOP5数量   -->
    <uni-card>
      <uni-section :title="$t('statistic.front.deviceTypeCount')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
            type="bar"
            :opts="deviceTypeOpts"
            :chartData="frontData.deviceTypeChart"
          />
        </view>
      </view>
    </uni-card>
    <!--   近一周活跃用户数   -->
    <uni-card>
      <uni-section :title="$t('statistic.front.weekUserActive')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
            type="column"
            :opts="weeklyUserActivityOpts"
            :chartData="frontData.weeklyUserActivityChart"
          />
        </view>
      </view>
    </uni-card>
    <!--   工单数量统计   -->
    <uni-card>
      <uni-section :title="$t('statistic.front.workOrderCount')" />
      <view class="flex-row align-center">
        <view class="charts-box">
          <qiun-data-charts
            type="line"
            :opts="workOrderCountOpts"
            :chartData="frontData.workOrderCountChart"
          />
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import dayjs from "dayjs";
import { getDeptId } from "@/utils/auth";
import {
  getDeviceCount,
  getMaintainCount,
  getPendingCount,
  getMaintenanceCount,
  getInspectCount,
  getMTTR,
  getStockWarningCount,
  getDeviceStatusStatistic,
  getDeviceTypeCount,
  getWeeklyUserActivity,
  getWorkOrderCount,
} from "@/api/statistic";

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

// 初始化环形图 - 设备状态统计
const deviceStatusOpts = {
  color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
  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", // 分割线的颜色
    },
  },
};

// 初始化条状图 - 设备类别TOP5数量
const deviceTypeOpts = {
  padding: [10, 50, 10, 10],
  title: { name: "" },
  subtitle: { name: "" },
  legend: {
    show: false,
  },
  xAxis: {
    boundaryGap: "justify",
    disableGrid: false,
    axisLine: false,
  },
  yAxis: {},
  extra: {
    bar: {
      type: "group",
      width: 30,
      meterBorde: 1,
      meterFillColor: "#FFFFFF",
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      linearType: "custom",
      barBorderCircle: true,
      seriesGap: 2,
      categoryGap: 2,
      customColor: ["#7fbdf6", "#188df0"],
    },
  },
};
// 初始化柱状图 - 近一周活跃用户数
const weeklyUserActivityOpts = {
  color: [],

  padding: [20, 10, 10, 10],
  title: { name: "" },
  subtitle: { name: "" },
  legend: {
    position: "bottom",
  },
  extra: {
    column: {
      type: "group",
      width: 30,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      linearType: "custom",
      seriesGap: 5,
      linearOpacity: 0.8,
      barBorderCircle: false,
      customColor: ["#5978cb", "#e2f2ce", ,], //"#e2f2ce","#91cc75"
    },
  },
};
// 初始化折线图 - 工单数量统计
const workOrderCountOpts = {
  color: ["#5470c6", "#f1d209", "#e14f0f", "#91cc75"],
  padding: [20, 20, 20, 20],
  title: { name: "" },
  subtitle: { name: "" },
  legend: {
    position: "bottom",
  },
  xAxis: {
    rotateLabel: true, // 旋转标签
    rotateAngle: 45, // 旋转角度
    marginTop: 10, // 标签与轴线的距离
    fontSize: 12, // 字体大小
  },
  yAxis: {
    data: [
      { type: "value", position: "left" },
      { type: "value", position: "right" },
    ],
  },
};

const frontData = reactive({
  device: { total: 0 },
  maintain: { total: 0 },
  pending: { filledCount: 0, unfilledCount: 0 },
  maintenance: { finished: 0, todo: 0 },
  inspect: { finished: 0, todo: 0 },
  mttr: "4.8",
  stockWarning: "0",
  deviceStatusChart: {
    series: [],
  },
  deviceTypeChart: {},
});

const isLoadData = ref(false);

// 加载维修相关统计数据
const loadData = async () => {
  console.log("🚀 ~ loadData ~ isLoadData.value:", isLoadData.value);
  if (isLoadData.value) return; // 已加载数据后不再加载数据
  isLoadData.value = true;

  const startTime = dayjs().subtract(7, "day").valueOf();

  console.log("🚀 ~ loadData ~ startTime:", startTime);
  const endTime = dayjs().valueOf();

  console.log("🚀 ~ loadData ~ endTime:", endTime);

  // 设备数
  const getDeviceCountAsync = getDeviceCount();
  // 维修工单数
  const getMaintainCountAsync = getMaintainCount();
  // 运行记录工单数
  const getPendingCountAsync = getPendingCount({
    startTime,
    endTime,
    deptId: getDeptId(),
  });
  // 保养工单数
  const getMaintenanceCountAsync = getMaintenanceCount();
  // 巡检工单数
  const getInspectCountAsync = getInspectCount({
    startTime,
    endTime,
  });
  // MTTR(平均解决时间)
  const getMTTRAsync = getMTTR();
  // 库存预警物料数量
  const getStockWarningCountAsync = getStockWarningCount();
  // 设备状态统计
  const getDeviceStatusStatisticAsync = getDeviceStatusStatistic();
  // 设备类别TOP5
  const getDeviceTypeCountAsync = getDeviceTypeCount();
  // 近一周活跃用户数
  const getWeeklyUserActivityAsync = getWeeklyUserActivity();
  // 工单数量统计
  const getWorkOrderCountAsync = getWorkOrderCount();

  // 设备数
  frontData.device = (await getDeviceCountAsync).data;
  // 维修工单数
  frontData.maintain = (await getMaintainCountAsync).data;
  // 运行记录工单数
  frontData.pending = (await getPendingCountAsync).data?.totalList[0];
  // 保养工单数
  frontData.maintenance = (await getMaintenanceCountAsync).data;
  // 巡检工单数
  frontData.inspect = (await getInspectCountAsync).data;
  // MTTR(平均解决时间)
  frontData.mttr = (await getMTTRAsync).data;
  // 库存预警物料数量
  frontData.stockWarning = (await getStockWarningCountAsync).data;
  // 设备状态统计
  const deviceStatusChartSeries = (await getDeviceStatusStatisticAsync).data;
  //设备状态统计数据填充
  frontData.deviceStatusChart.series = [
    {
      data: deviceStatusChartSeries.map((item) => ({
        name: item.name,
        value: item.value,
        labelText: item.name + ": " + item.value,
        textColor: "#333", // 设置文本颜色
      })),
    },
  ];
  // 设备类别TOP5
  const deviceTypeChartData = (await getDeviceTypeCountAsync).data;
  frontData.deviceTypeChart = {
    categories: deviceTypeChartData.map((item) => item.category),
    series: [
      {
        name: "",
        data: deviceTypeChartData.map((item) => item.value),
        textColor: "#333", // 设置文本颜色
      },
    ],
  };
  console.log(
    "🚀 ~ loadData ~ frontData.deviceTypeChart:",
    frontData.deviceTypeChart
  );
  // 近一周活跃用户数
  const weeklyUserActivity = (await getWeeklyUserActivityAsync).data;
  console.log("🚀 ~ loadData ~ weeklyUserActivity:", weeklyUserActivity);
  frontData.weeklyUserActivityChart = {
    categories: weeklyUserActivity.map((item) => item.department),
    series: [
      {
        name: t("statistic.front.totalUserCount"),
        data: weeklyUserActivity.map((item) => item.total),
        textColor: "#333", // 设置文本颜色
      },
      {
        name: t("statistic.front.activeUserCount"),
        data: weeklyUserActivity.map((item) => item.active),
        textColor: "#333", // 设置文本颜色
      },
    ],
  };
  console.log(
    "🚀 ~ loadData ~  frontData.weeklyUserActivityChart :",
    frontData.weeklyUserActivityChart
  );
  // 工单数量统计 维修与保养一个轴，运行与巡检一个轴

  const workOrderCount = (await getWorkOrderCountAsync).data;
  frontData.workOrderCountChart = {
    categories: workOrderCount.xAxis,
    series: workOrderCount.series.map((item, itemIndex) => ({
      ...item,
      index: itemIndex > 1 ? 1 : 0, // 维修与保养一个轴(0)，运行与巡检一个轴(1)
      textColor: "#000", // 设置文本颜色
    })),
  };
  console.log(
    "🚀 ~ loadData ~ frontData.workOrderCountChart:",
    frontData.workOrderCountChart
  );
};

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;
  &.mttr {
    color: #20b2aa;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
  }
  &.warning {
    color: #cd5c5c;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
  }
}

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

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

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