能耗成本核算

yyb

19 小时以前 fedb183d1123ecceed5d0237f44b7df9a8f5700e

能耗成本核算

 src/views/costAccounting/energyCosts/index.vue

@@ -465,23 +465,23 @@
                  </div>
                </el-card>
              </el-col>
              <!-- <el-col :xs="24" :lg="12">
              <el-col :xs="24" :lg="12">
                <el-card class="chart-card" shadow="never">
                  <template #header>
                    <div class="chart-head">
                      <span class="chart-title">能耗单价对比</span>
                      <span class="chart-title">能耗用量对比</span>
                      <div class="chart-tools" @click.stop>
                        <button
                          class="chart-tool"
                          type="button"
                          @click="downloadChart('price', '能耗单价对比')"
                          @click="downloadChart('consumption', '能耗用量对比')"
                        >
                          下载
                        </button>
                        <button
                          class="chart-tool"
                          type="button"
                          @click="openBigChart('price', '能耗单价对比')"
                          @click="openBigChart('consumption', '能耗用量对比')"
                        >
                          大图
                        </button>
@@ -489,12 +489,12 @@
                    </div>
                  </template>
                  <div
                    ref="priceChartWrap"
                    ref="consumptionChartWrap"
                    class="chart-wrap"
                    v-loading="tableLoading"
                  >
                    <div
                      ref="priceChart"
                      ref="consumptionChart"
                      class="chart-content"
                      v-show="hasTableData"
                    ></div>
@@ -503,7 +503,7 @@
                    </div>
                  </div>
                </el-card>
              </el-col> -->
              </el-col>
            </el-row>
          </div>
        </transition>
@@ -875,13 +875,13 @@
  if (key === "cost") return costChartInstance;
  if (key === "type") return typeChartInstance;
  if (key === "purpose") return purposeChartInstance;
  if (key === "price") return priceChartInstance;
  if (key === "consumption") return consumptionChartInstance;
  return null;
};

const ensurePanelForChart = (key) => {
  if (key === "cost" || key === "type") chartPanel.value = "core";
  if (key === "purpose" || key === "price") chartPanel.value = "advanced";
  if (key === "purpose" || key === "consumption") chartPanel.value = "advanced";
};

const downloadChart = (key, title) => {
@@ -1011,12 +1011,12 @@
const costChart = ref(null);
const typeChart = ref(null);
const purposeChart = ref(null);
const priceChart = ref(null);
const consumptionChart = ref(null);

const costChartWrap = ref(null);
const typeChartWrap = ref(null);
const purposeChartWrap = ref(null);
const priceChartWrap = ref(null);
const consumptionChartWrap = ref(null);

const tableAnchor = ref(null);

@@ -1044,7 +1044,7 @@
let costChartInstance = null;
let typeChartInstance = null;
let purposeChartInstance = null;
let priceChartInstance = null;
let consumptionChartInstance = null;

// 图表区切换：core | advanced | none（点击当前选中可收起）
const chartPanel = ref("core");
@@ -1062,10 +1062,10 @@
  if (panel === "advanced") {
    if (purposeChart.value && !purposeChartInstance)
      purposeChartInstance = echarts.init(purposeChart.value);
    if (priceChart.value && !priceChartInstance)
      priceChartInstance = echarts.init(priceChart.value);
    if (consumptionChart.value && !consumptionChartInstance)
      consumptionChartInstance = echarts.init(consumptionChart.value);
    if (purposeChartInstance) updatePurposeChart();
    if (priceChartInstance) updatePriceChart();
    if (consumptionChartInstance) updateConsumptionChart();
  }
};

@@ -1331,26 +1331,32 @@
  purposeChartInstance.setOption(option);
};

// 更新能耗单价对比图
const updatePriceChart = () => {
// 更新能耗用量对比图
const updateConsumptionChart = () => {
  const data = tableData.value;
  const priceData = {};
  const consumptionData = {};

  data.forEach((item) => {
    if (!priceData[item.energyType]) {
      priceData[item.energyType] = {
    if (!consumptionData[item.energyType]) {
      consumptionData[item.energyType] = {
        生产: 0,
        办公: 0,
      };
    }
    if (priceData[item.energyType].hasOwnProperty(item.type)) {
      priceData[item.energyType][item.type] = parseFloat(item.price);
    if (consumptionData[item.energyType].hasOwnProperty(item.type)) {
      consumptionData[item.energyType][item.type] = parseFloat(
        item.consumption
      );
    }
  });

  const energyTypes = Object.keys(priceData);
  const productionPrices = energyTypes.map((type) => priceData[type].生产);
  const officePrices = energyTypes.map((type) => priceData[type].办公);
  const energyTypes = Object.keys(consumptionData);
  const productionConsumptions = energyTypes.map(
    (type) => consumptionData[type].生产
  );
  const officeConsumptions = energyTypes.map(
    (type) => consumptionData[type].办公
  );

  const option = {
    tooltip: {
@@ -1364,7 +1370,7 @@
        "box-shadow: 0 14px 40px rgba(15,23,42,.14); border-radius: 12px;",
    },
    legend: {
      data: ["生产能耗单价", "办公能耗单价"],
      data: ["生产能耗用量", "办公能耗用量"],
      top: 0,
      right: 10,
      textStyle: { color: "rgba(15, 23, 42, 0.62)" },
@@ -1385,7 +1391,7 @@
    },
    yAxis: {
      type: "value",
      name: "单价(元)",
      name: "用量",
      nameTextStyle: { color: "rgba(15, 23, 42, 0.58)" },
      axisLabel: { color: "rgba(15, 23, 42, 0.58)" },
      axisLine: { show: false },
@@ -1393,9 +1399,9 @@
    },
    series: [
      {
        name: "生产能耗单价",
        name: "生产能耗用量",
        type: "bar",
        data: productionPrices,
        data: productionConsumptions,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2f6fed" },
@@ -1405,9 +1411,9 @@
        },
      },
      {
        name: "办公能耗单价",
        name: "办公能耗用量",
        type: "bar",
        data: officePrices,
        data: officeConsumptions,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#16a34a" },
@@ -1418,7 +1424,7 @@
      },
    ],
  };
  priceChartInstance.setOption(option);
  consumptionChartInstance.setOption(option);
};

// 统计维度切换
@@ -1548,7 +1554,7 @@
    if (costChartInstance) updateCostChart();
    if (typeChartInstance) updateTypeChart();
    if (purposeChartInstance) updatePurposeChart();
    if (priceChartInstance) updatePriceChart();
    if (consumptionChartInstance) updateConsumptionChart();
  });
};

@@ -1600,7 +1606,7 @@
  costChartInstance && costChartInstance.resize();
  typeChartInstance && typeChartInstance.resize();
  purposeChartInstance && purposeChartInstance.resize();
  priceChartInstance && priceChartInstance.resize();
  consumptionChartInstance && consumptionChartInstance.resize();
};

onMounted(() => {