kd-aiot-frontend-hr/src/views/homeView/index.vue

<template>
  <main class="home-dashboard">
    <section class="metric-grid" aria-label="核心指标">
      <button
        v-for="item in dashboard.metrics"
        :key="item.key"
        type="button"
        class="metric-card"
        :class="`metric-card--${item.tone}`"
        @click="showMetric(item)"
      >
        <span class="metric-icon"><i :class="item.icon"></i></span>
        <span class="metric-main">
          <span class="metric-label">{{ item.label }}</span>
          <span class="metric-number"
            ><strong>{{ item.value.toLocaleString() }}</strong
            ><em>{{ item.unit }}</em></span
          >
          <span class="metric-note">{{ item.note }}</span>
        </span>
        <span class="metric-trend">{{ item.trend }}</span>
      </button>
    </section>

    <section class="content-grid">
      <article class="panel flow-panel">
        <div class="section-heading">
          <div>
            <h2>人员流动趋势</h2>
            <p>近 7 个月入职与离职人数变化</p>
          </div>
          <div class="chart-legend" aria-label="图例">
            <span><i class="onboard-dot"></i>入职人数</span
            ><span><i class="offboard-dot"></i>离职人数</span>
          </div>
        </div>
        <div ref="flowChart" class="chart flow-chart"></div>
      </article>

      <article class="panel staffing-panel">
        <div class="section-heading">
          <div>
            <h2>部门编制占比</h2>
            <p>各业务单元在岗编制结构</p>
          </div>
          <button
            type="button"
            class="text-button"
            @click="$router.push('/personnel-structure-dashboard')"
          >
            查看看板 <i class="el-icon-arrow-right"></i>
          </button>
        </div>
        <div ref="staffingChart" class="chart staffing-chart"></div>
      </article>

      <article class="panel todo-panel">
        <div class="section-heading">
          <div>
            <h2>紧急待办</h2>
            <p>优先处理即将超期事项</p>
          </div>
          <el-badge :value="totalTodoCount" class="todo-badge"
            ><i class="el-icon-bell"></i
          ></el-badge>
        </div>
        <div class="todo-list">
          <button
            v-for="item in dashboard.todos"
            :key="item.id"
            type="button"
            class="todo-item"
            @click="openTodo(item)"
          >
            <span class="todo-icon" :class="`todo-icon--${item.level}`"
              ><i :class="item.icon"></i
            ></span>
            <span class="todo-content"
              ><strong>{{ item.title }}</strong
              ><small>{{ item.deadline }} · {{ item.owner }}</small></span
            >
            <span class="todo-count">{{ item.count }}</span>
            <i class="el-icon-arrow-right todo-arrow"></i>
          </button>
        </div>
        <button type="button" class="todo-footer" @click="showAllTodos">
          查看全部待办 <i class="el-icon-arrow-right"></i>
        </button>
      </article>

      <article class="panel workforce-panel">
        <div class="section-heading">
          <div>
            <h2>人员结构快照</h2>
            <p>员工类型与关键结构指标</p>
          </div>
          <span class="panel-chip panel-chip--green">在岗率 96.4%</span>
        </div>
        <div class="workforce-body">
          <div class="workforce-distribution">
            <div>
              <span>员工类型分布</span><strong>1,286<small>人</small></strong>
            </div>
            <div class="workforce-stack" aria-label="员工类型分布">
              <i
                v-for="item in dashboard.workforce"
                :key="item.label"
                :class="`stack-${item.tone}`"
                :style="{ width: `${item.rate}%` }"
              ></i>
            </div>
          </div>
          <div class="workforce-list">
            <div
              v-for="item in dashboard.workforce"
              :key="item.label"
              class="workforce-item"
              :class="`workforce-item--${item.tone}`"
            >
              <i class="workforce-dot"></i>
              <div class="workforce-copy">
                <span>{{ item.label }}</span
                ><strong
                  >{{ item.value.toLocaleString() }}<small>人</small></strong
                >
              </div>
              <em>{{ item.rate }}%</em>
            </div>
          </div>
          <div class="workforce-summary">
            <div v-for="item in dashboard.workforceSummary" :key="item.label">
              <span>{{ item.label }}</span
              ><strong
                >{{ item.value }}<small>{{ item.unit }}</small></strong
              >
            </div>
          </div>
        </div>
      </article>

      <article class="panel movement-panel">
        <div class="section-heading">
          <div>
            <h2>本月人事动态</h2>
            <p>入转调离业务办理概况</p>
          </div>
          <span class="panel-chip">本月</span>
        </div>
        <div class="movement-summary">
          <div>
            <span>本月累计变动</span
            ><strong
              >{{ dashboard.movementSummary.total }}<small>人次</small></strong
            >
          </div>
          <span
            ><i class="el-icon-top-right"></i> 净增
            {{ dashboard.movementSummary.net }} 人</span
          >
          <em>环比 +{{ dashboard.movementSummary.monthRate }}%</em>
        </div>
        <div class="movement-grid">
          <div
            v-for="item in dashboard.movements"
            :key="item.label"
            class="movement-item"
            :class="`movement-item--${item.tone}`"
          >
            <span class="movement-icon"><i :class="item.icon"></i></span>
            <div>
              <span>{{ item.label }}</span
              ><strong>{{ item.value }}<small>人</small></strong
              ><em>{{ item.note }}</em>
            </div>
          </div>
        </div>
      </article>

      <article class="panel efficiency-panel">
        <div class="section-heading">
          <div>
            <h2>待办处理效率</h2>
            <p>本周审批处理质量</p>
          </div>
          <span class="panel-chip panel-chip--green">运行正常</span>
        </div>
        <div class="efficiency-body">
          <div class="efficiency-ring">
            <el-progress
              type="circle"
              :percentage="dashboard.efficiency.completionRate"
              :width="92"
              :stroke-width="8"
              color="#20a87c"
            />
            <span>本周完成率</span>
          </div>
          <div class="efficiency-stats">
            <div>
              <span>已处理</span
              ><strong>{{ dashboard.efficiency.handled }}</strong>
            </div>
            <div>
              <span>处理中</span
              ><strong>{{ dashboard.efficiency.pending }}</strong>
            </div>
            <div class="danger">
              <span>已逾期</span
              ><strong>{{ dashboard.efficiency.overdue }}</strong>
            </div>
          </div>
        </div>
        <div class="efficiency-meters">
          <div>
            <span
              >按时完成率<strong
                >{{ dashboard.efficiency.approvalRate }}%</strong
              ></span
            >
            <el-progress
              :percentage="dashboard.efficiency.approvalRate"
              :stroke-width="5"
              :show-text="false"
              color="#3478f6"
            />
          </div>
          <div>
            <span
              >一次通过率<strong
                >{{ dashboard.efficiency.firstPassRate }}%</strong
              ></span
            >
            <el-progress
              :percentage="dashboard.efficiency.firstPassRate"
              :stroke-width="5"
              :show-text="false"
              color="#8068dc"
            />
          </div>
        </div>
        <div class="efficiency-footer">
          <span
            >平均处理时长
            <strong>{{ dashboard.efficiency.averageDuration }} 天</strong></span
          >
          <span class="duration-trend"
            ><i class="el-icon-bottom"></i>
            {{ dashboard.efficiency.durationTrend }}</span
          >
        </div>
      </article>
    </section>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="520px"
      append-to-body
      custom-class="home-detail-dialog"
    >
      <div v-if="dialogData" class="dialog-detail">
        <span class="dialog-detail__icon"
          ><i :class="dialogData.icon || 'el-icon-bell'"></i
        ></span>
        <div>
          <small>{{
            dialogData.category || dialogData.owner || "人力资源工作台"
          }}</small>
          <h3>{{ dialogData.title || dialogData.label }}</h3>
          <p>
            {{
              dialogData.detail ||
              dialogData.note ||
              "该事项当前使用模拟数据展示，后续接入业务接口后可查看完整办理记录。"
            }}
          </p>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleDialogConfirm"
          >立即处理</el-button
        >
      </span>
    </el-dialog>
  </main>
</template>

<script>
import * as echarts from "echarts";
import { dashboardMock } from "./mock";

export default {
  name: "HomeView",
  data() {
    return {
      dashboard: dashboardMock,
      dialogVisible: false,
      dialogTitle: "事项详情",
      dialogData: null,
      charts: {},
      resizeObserver: null,
      chartResizeFrame: null,
      chartSizeSignature: "",
    };
  },
  computed: {
    totalTodoCount() {
      return this.dashboard.todos.reduce((sum, item) => sum + item.count, 0);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
      this.observeResize();
    });
  },
  beforeDestroy() {
    cancelAnimationFrame(this.chartResizeFrame);
    if (this.resizeObserver) this.resizeObserver.disconnect();
    window.removeEventListener("resize", this.resizeCharts);
    Object.values(this.charts).forEach((chart) => chart && chart.dispose());
  },
  methods: {
    initCharts() {
      this.charts.flow = echarts.init(this.$refs.flowChart);
      this.charts.staffing = echarts.init(this.$refs.staffingChart);
      this.renderCharts();
    },
    observeResize() {
      if (window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver((entries) => {
          const signature = entries
            .map(
              (entry) =>
                `${Math.round(entry.contentRect.width)}x${Math.round(
                  entry.contentRect.height,
                )}`,
            )
            .join("|");
          if (signature === this.chartSizeSignature) return;
          this.chartSizeSignature = signature;
          cancelAnimationFrame(this.chartResizeFrame);
          this.chartResizeFrame = requestAnimationFrame(this.resizeCharts);
        });
        this.resizeObserver.observe(this.$refs.flowChart);
        this.resizeObserver.observe(this.$refs.staffingChart);
      } else {
        window.addEventListener("resize", this.resizeCharts);
      }
    },
    resizeCharts() {
      Object.values(this.charts).forEach((chart) => chart && chart.resize());
    },
    renderCharts() {
      this.renderFlowChart();
      this.renderStaffingChart();
    },
    tooltipStyle() {
      return {
        backgroundColor: "rgba(35, 45, 61, .94)",
        borderWidth: 0,
        padding: [9, 12],
        textStyle: { color: "#fff", fontSize: 12 },
        extraCssText:
          "border-radius:6px;box-shadow:0 10px 24px rgba(22,34,52,.18)",
      };
    },
    renderFlowChart() {
      this.charts.flow.setOption(
        {
          animationDuration: 650,
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
            ...this.tooltipStyle(),
          },
          grid: { top: 22, right: 18, bottom: 30, left: 42 },
          xAxis: {
            type: "category",
            data: this.dashboard.flow.months,
            axisLine: { lineStyle: { color: "#dfe5ec" } },
            axisTick: { show: false },
            axisLabel: { color: "#8490a3", fontSize: 11 },
          },
          yAxis: {
            type: "value",
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#9aa4b2", fontSize: 10 },
            splitLine: { lineStyle: { color: "#edf0f4", type: "dashed" } },
          },
          series: [
            {
              name: "入职人数",
              type: "bar",
              data: this.dashboard.flow.onboard,
              barMaxWidth: 24,
              itemStyle: { color: "#3478f6", borderRadius: [4, 4, 0, 0] },
              emphasis: { itemStyle: { color: "#1f65df" } },
            },
            {
              name: "离职人数",
              type: "bar",
              data: this.dashboard.flow.offboard,
              barMaxWidth: 24,
              itemStyle: { color: "#f3a53b", borderRadius: [4, 4, 0, 0] },
              emphasis: { itemStyle: { color: "#e18a16" } },
            },
          ],
        },
        true,
      );
    },
    renderStaffingChart() {
      const data = this.dashboard.staffing.map((item) => ({
        ...item,
        itemStyle: { color: item.color },
      }));
      this.charts.staffing.setOption(
        {
          animationDuration: 700,
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>编制占比：<b>{d}%</b>",
            ...this.tooltipStyle(),
          },
          legend: {
            orient: "horizontal",
            left: 18,
            right: 18,
            bottom: 12,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 10,
            icon: "circle",
            textStyle: { color: "#647084", fontSize: 11 },
            formatter: (name) => {
              const item = this.dashboard.staffing.find(
                (row) => row.name === name,
              );
              return `${name} ${item?.value || 0}%`;
            },
          },
          series: [
            {
              type: "pie",
              radius: ["39%", "59%"],
              center: ["50%", "40%"],
              avoidLabelOverlap: true,
              itemStyle: { borderColor: "#fff", borderWidth: 3 },
              label: { show: false },
              emphasis: { scale: true, scaleSize: 5 },
              data,
            },
          ],
          graphic: [
            {
              type: "text",
              left: "center",
              top: "33%",
              style: { text: "编制使用率", fill: "#8a95a5", fontSize: 11 },
            },
            {
              type: "text",
              left: "center",
              top: "42%",
              style: {
                text: "94.6%",
                fill: "#263244",
                fontSize: 22,
                fontWeight: 600,
              },
            },
          ],
        },
        true,
      );
    },
    showMetric(item) {
      this.dialogTitle = `${item.label}概览`;
      this.dialogData = {
        ...item,
        title: `${item.value.toLocaleString()} ${item.unit}`,
        category: item.label,
      };
      this.dialogVisible = true;
    },
    openTodo(item) {
      this.dialogTitle = "待办事项";
      this.dialogData = {
        ...item,
        detail: `${item.deadline}，当前共有 ${item.count} 条待处理记录。请进入业务页面完成审核或办理。`,
      };
      this.dialogVisible = true;
    },
    handleDialogConfirm() {
      this.dialogVisible = false;
      this.$router.push("/employee-archive");
    },
    showAllTodos() {
      this.$message.info("待办中心接口暂未接入，当前展示模拟待办");
    },
  },
};
</script>

<style src="../../styles/views/HomeView.scss" scoped lang="scss"></style>