首页部分修改

zhangwencui

4 天以前 01f037508f51cf1380a8af0c1159940b078eedb8

首页部分修改

 src/views/index.vue

@@ -2,9 +2,9 @@
  <div class="home-page">
    <div class="top-bar">
      <div class="user-box">
        <!-- <img :src="userStore.avatar"
        <img :src="userStore.avatar"
             class="avatar"
             alt="" /> -->
             alt="" />
        <div>
          <div class="hello">{{ userStore.roleName || "系统管理员" }}，你好</div>
          <div class="sub">登录时间：{{ userStore.currentLoginTime }}</div>
@@ -61,33 +61,17 @@
        </section>
        <section class="section-card flex-fill-card">
          <div class="section-title-row">
            <div class="section-title">今日待处理</div>
            <div class="section-title">今年销售金额分析</div>
            <el-radio-group v-model="pendingFilter"
                            size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="mine">我的</el-radio-button>
              <el-radio-button label="high">高优先</el-radio-button>
              <el-radio-button label="mine">板材</el-radio-button>
              <el-radio-button label="high">砌块</el-radio-button>
            </el-radio-group>
          </div>
          <div class="task-row"
               v-for="task in filteredPendingTasks"
               :key="task.id">
            <div class="task-left">
              <el-tag size="small"
                      :type="task.type">{{ task.level }}</el-tag>
              <span class="task-title">{{ task.title }}</span>
            </div>
            <el-button link
                       type="primary"
                       @click="goTo(task.path)">去处理</el-button>
          </div>
          <el-empty v-if="filteredPendingTasks.length === 0"
                    description="暂无待处理事项"
                    :image-size="80" />
        </section>
      </div>
      <div class="right-col">
        <section class="section-card"
        <!-- <section class="section-card"
                 v-if="isSectionVisible('trendCards')">
          <div class="section-title">最近7天关键指标趋势</div>
          <div class="trend-cards">
@@ -111,7 +95,7 @@
              </div>
            </div>
          </div>
        </section>
        </section> -->
        <section class="section-card"
                 v-if="isSectionVisible('planTrend')">
          <div class="section-title-row">
@@ -137,34 +121,25 @@
             v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')">
          <section class="section-card"
                   v-if="isSectionVisible('qualityChart')">
            <div class="section-title-row">
              <div class="section-title">质检异常分布</div>
              <el-radio-group v-model="chartRangeQuality"
                              size="small"
                              @change="loadQualityData">
                <el-radio-button :label="1">周</el-radio-button>
                <el-radio-button :label="2">月</el-radio-button>
                <el-radio-button :label="3">季度</el-radio-button>
              </el-radio-group>
            </div>
            <div class="section-title">今年能耗用量趋势</div>
            <Echarts :chartStyle="chartStyle"
                     :grid="grid"
                     :tooltip="barTooltip"
                     :xAxis="qualityXAxis"
                     :xAxis="energyConsumptionXAxis"
                     :yAxis="valueYAxis"
                     :series="qualitySeries"
                     :series="energyConsumptionSeries"
                     style="height: 260px" />
          </section>
          <section class="section-card"
                   v-if="isSectionVisible('costChart')">
            <div class="section-title">能耗类型占比</div>
            <div class="section-title">今年能耗类型占比</div>
            <Echarts :chartStyle="chartStyle"
                     :tooltip="pieTooltip"
                     :series="energyTypeSeries"
                     style="height: 260px" />
          </section>
        </div>
        <section class="section-card"
        <!-- <section class="section-card"
                 v-if="isSectionVisible('warningCenter')">
          <div class="section-title">异常预警中心</div>
          <div class="warning-row"
@@ -182,7 +157,7 @@
          <el-empty v-if="warningList.length === 0"
                    description="暂无异常预警"
                    :image-size="80" />
        </section>
        </section> -->
        <section class="section-card mini-table-wrap"
                 v-if="isSectionVisible('planTable')">
          <div class="section-title">生产计划执行明细</div>
@@ -298,6 +273,7 @@
    qualityInspectionStatistics,
    nonComplianceWarning,
  } from "@/api/viewIndex.js";
  import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";

  const router = useRouter();
  const userStore = useUserStore();
@@ -566,6 +542,36 @@
    },
  ]);

  // 能耗用量趋势图表
  const energyConsumptionXAxis = reactive({
    type: "category",
    data: [],
    axisLabel: {
      rotate: 45,
    },
  });

  const energyConsumptionSeries = reactive([
    {
      name: "用水量",
      type: "bar",
      data: [],
      itemStyle: { color: "#409EFF" },
    },
    {
      name: "用电量",
      type: "bar",
      data: [],
      itemStyle: { color: "#E6A23C" },
    },
    {
      name: "用气量",
      type: "bar",
      data: [],
      itemStyle: { color: "#67C23A" },
    },
  ]);

  // 模拟能耗数据
  const energyData = reactive({
    water: 120,
@@ -573,28 +579,87 @@
    gas: 80,
  });

  // 更新能耗类型占比图表
  // 更新能耗类型占比图表和能耗用量趋势图表
  const updateEnergyTypeChart = () => {
    const { water, electricity, gas } = energyData;
    const total = water + electricity + gas;
    // 构建参数：今年的年初到年末以及天数
    const currentYear = new Date().getFullYear();
    const params = {
      startDate: `${currentYear}-01-01`,
      endDate: `${currentYear}-12-31`,
      days: 365,
      state: "年",
    };

    energyTypeSeries[0].data = [
      {
        value: total > 0 ? ((water / total) * 100).toFixed(2) : 0,
        name: "水",
        itemStyle: { color: "#409EFF" },
      },
      {
        value: total > 0 ? ((electricity / total) * 100).toFixed(2) : 0,
        name: "电",
        itemStyle: { color: "#E6A23C" },
      },
      {
        value: total > 0 ? ((gas / total) * 100).toFixed(2) : 0,
        name: "气",
        itemStyle: { color: "#F56C6C" },
      },
    ];
    // 调用接口获取数据
    energyConsumptionDetailStatistics(params)
      .then(res => {
        if (res.code === 200) {
          const data = res.data;
          // 处理能耗类型占比数据
          const energyTypeData = data.energyCostDtos || [];

          // 计算各能耗类型的总消耗量
          let total = 0;
          const typeMap = {
            水: 0,
            电: 0,
            气: 0,
          };

          // 准备能耗用量趋势图表数据
          const dates = [];
          const waterConsumptionData = [];
          const electricityConsumptionData = [];
          const gasConsumptionData = [];

          energyTypeData.forEach(item => {
            // 收集日期和各能耗类型数据
            if (item.meterReadingDate) {
              dates.push(item.meterReadingDate);
              waterConsumptionData.push(item.waterConsumption || 0);
              electricityConsumptionData.push(item.electricityConsumption || 0);
              gasConsumptionData.push(item.gasConsumption || 0);
            }

            // 计算总消耗量
            if (item.waterConsumption)
              typeMap.水 += Number(item.waterConsumption);
            if (item.electricityConsumption)
              typeMap.电 += Number(item.electricityConsumption);
            if (item.gasConsumption) typeMap.气 += Number(item.gasConsumption);
          });

          total = typeMap.水 + typeMap.电 + typeMap.气;

          // 更新能耗类型占比图表数据
          energyTypeSeries[0].data = [
            {
              value: total > 0 ? ((typeMap.水 / total) * 100).toFixed(2) : 0,
              name: "水",
              itemStyle: { color: "#409EFF" },
            },
            {
              value: total > 0 ? ((typeMap.电 / total) * 100).toFixed(2) : 0,
              name: "电",
              itemStyle: { color: "#E6A23C" },
            },
            {
              value: total > 0 ? ((typeMap.气 / total) * 100).toFixed(2) : 0,
              name: "气",
              itemStyle: { color: "#F56C6C" },
            },
          ];

          // 更新能耗用量趋势图表数据
          energyConsumptionXAxis.data = dates;
          energyConsumptionSeries[0].data = waterConsumptionData;
          energyConsumptionSeries[1].data = electricityConsumptionData;
          energyConsumptionSeries[2].data = gasConsumptionData;
        }
      })
      .catch(err => {
        console.error("获取能耗数据异常：", err);
      });
  };

  const planTable = reactive([]);
@@ -1030,19 +1095,19 @@
  };

  const refreshDashboardData = () => {
    loadHomeTodos();
    loadOrderAndProgress();
    loadPlanTrend();
    loadQualityData();
    loadCostComposition();
    loadWarningCenter();
    // loadHomeTodos();
    // loadOrderAndProgress();
    // loadPlanTrend();
    // loadQualityData();
    // loadCostComposition();
    // loadWarningCenter();
    updateEnergyTypeChart();
    lastUpdatedAt.value = new Date().toLocaleString();
  };

  onMounted(() => {
    // initSectionConfig();
    // refreshDashboardData();
    refreshDashboardData();
  });
</script>