Merge remote-tracking branch 'origin/master'

baoshiwei

2025-04-19 5d36e1f987ef21e44ded2e8a1d06c28094ec1e76

 zhitan-vue/src/views/poweranalysis/perPassu/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,579 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="期间" prop="timeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                v-model="queryParams.dataTime"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="能源类型" prop="energyType">
              <el-select v-model="queryParams.energyType" placeholder="能源类型" clearable style="width: 120px">
                <el-option
                  :label="item.enername"
                  :value="item.enersno"
                  v-for="item in energyTypeList"
                  :key="item.enersno"
                  @click="handleEnergyType(item)"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <!-- <el-form-item>
              <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
                åŒæ¯”
              </el-button>
              <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
                çŽ¯æ¯”
              </el-button>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                å¯¼å‡º
              </el-button>
            </el-form-item> -->
          </el-form>
        </div>
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <BaseCard :title="queryParams.nodeName + '-能耗对比分析'">
            <div class="chart-box" style="padding-top: 12px">
              <div id="Chart1" />
            </div>
          </BaseCard>

          <BaseCard :title="queryParams.nodeName + '-能耗对比分析环比分析表-' + queryParams.enername">
            <div class="table-box">
              <el-table :data="departmentList" show-summary>
                <el-table-column
                  label="本期时间"
                  align="center"
                  key="currentTime"
                  prop="currentTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'本期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="currentValue"
                  prop="currentValue"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="同期时间"
                  align="center"
                  key="compareTime"
                  prop="compareTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'同期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="contrastValues"
                  prop="contrastValues"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="(queryParams.analysisType == 'YOY' ? '同' : '环') + '比(%)'"
                  align="center"
                  key="ratio"
                  prop="ratio"
                  :show-overflow-tooltip="true"
                  width="200"
                />
              </el-table>
            </div>
          </BaseCard>
          <!-- </el-col>
          </el-row> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="department">
import { listRegion, listDepartment, queryLoopCompareList } from "@/api/energyAnalysis/energyAnalysis"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const energyTypeList = ref(undefined)
const departmentList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
    timeType: null,
    dataTime: null,
    analysisType: "MOM",
    timeCode: null,
    energyType: null,
  },
  query: {
    modelCode: null,
  },
})
const { queryParams, query } = toRefs(data)
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType("MONTH")
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data
    queryParams.value.energyType = energyTypeList.value[0].enersno
    queryParams.value.enername = energyTypeList.value[0].enername
    queryParams.value.muid = energyTypeList.value[0].muid
    handleQuery()
  })
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  if (e == "MONTH") {
    queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  } else if (e == "YEAR") {
    queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  } else {
    queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  }
}
function handleEnergyType(item) {
  queryParams.value.enername = item.enername
  queryParams.value.muid = item.muid
  handleQuery()
}
function handleAnalysisType(analysisType) {
  queryParams.value.analysisType = analysisType
  getList()
}
// èƒ½è€—对比分析-列表
function getList() {
  loading.value = true
  // åœ¨åˆå§‹åŒ–之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
    echarts.dispose(document.getElementById("Chart1"))
  }
  // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
  //   echarts.dispose(document.getElementById("Chart2"));
  // }
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  // const myChart2 = echarts.init(document.getElementById("Chart2"));
  queryLoopCompareList(
    proxy.addDateRange({
      ...queryParams.value,
      ...query.value,
      timeCode: queryParams.value.dataTime,
    })
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      loading.value = false
      let xdata = []
      let yvalue = []
      let ycompareValue = []
      let yqoq = []
      if (!!res.data) {
        res.data.map((item) => {
          xdata.push(
            proxy
              .dayjs(item.currentTime)
              .format(
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          )
          yvalue.push(!!item.currentValue ? item.currentValue : 0)
          ycompareValue.push(!!item.contrastValues ? item.contrastValues : 0)
          yqoq.push(!!item.ratio ? item.ratio : 0)
        })
      }
      setTimeout(() => {
        myChart1.setOption({
          color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
          grid: {
            top: "45",
            left: "4%",
            right: "5%",
            bottom: "10",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            icon: "rect",
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
            type: "category",
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
            },
            data: xdata,
          },
          yAxis: [
            {
              type: "value",
              name: "耗" + queryParams.value.enername + "量(" + queryParams.value.muid + ")",
              nameTextStyle: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
            {
              type: "value",
              name: queryParams.value.analysisType == "YOY" ? "同比(%)" : "环比(%)",
              alignTicks: true,
              nameTextStyle: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
          ],
          series: [
            {
              name: "本期值",
              type: "bar",
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
                borderRadius: [15, 15, 0, 0],
              },
              data: yvalue,
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
            },
            {
              name: "同期值",
              type: "bar",
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
                borderRadius: [15, 15, 0, 0],
              },
              data: ycompareValue,
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
            },
            {
              name: queryParams.value.analysisType == "YOY" ? "同比" : "环比",
              type: "line",
              yAxisIndex: 1,
              symbol: "none", // è®¾ç½®ä¸º 'none' åŽ»æŽ‰åœ†ç‚¹
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%"
                },
              },
              data: yqoq,
            },
          ],
        })
      }, 100)
      departmentList.value = !!res.data ? res.data : []
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize()
        },
        { passive: true }
      )
    }
  })
  // listDepartment(
  //   proxy.addDateRange({
  //     ...queryParams.value,
  //     ...query.value,
  //   })
  // ).then((res) => {
  //   if (!!res.code && res.code == 200) {
  //     loading.value = false;
  //     let seriesdata = [];
  //     let xdata = [];
  //     if (!!energyTypeList.value) {
  //       energyTypeList.value.map((item) => {
  //         seriesdata.push({
  //           name: item.enername,
  //           type: "bar",
  //           barWidth: "16",
  //           stack: "total",
  //           data: [],
  //         });
  //       });
  //     }
  //     if (!!res.data) {
  //       res.data.map((dataItem) => {
  //         xdata.push(dataItem.nodeName)
  //         seriesdata.forEach((seriesdataItem) => {
  //           if (
  //             dataItem.data.find(
  //               (dataItemItem) =>
  //                 dataItemItem.energyTypeName == seriesdataItem.name
  //             ) == undefined
  //           ) {
  //             dataItem.data.push({
  //               nodeId: dataItem.nodeId,
  //               nodeName: dataItem.nodeName,
  //               energyTypeNo: null,
  //               energyTypeName: seriesdataItem.name,
  //               energyConsumption: 0,
  //             });
  //           }
  //           dataItem.data.map(dataItemItem => {
  //             if (seriesdataItem.name == dataItemItem.energyTypeName) {
  //               seriesdataItem.data.push(dataItemItem.energyConsumption)
  //             }
  //           })
  //         });
  //       });
  //     }
  //     setTimeout(() => {
  //       myChart2.setOption({
  //         color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
  //         grid: {
  //           top: "45",
  //           left: "17%",
  //           right: "5%",
  //           bottom: "10",
  //           containLabel: true,
  //         },
  //         tooltip: {
  //           trigger: "axis",
  //           axisPointer: {
  //             type: "shadow",
  //           },
  //         },
  //         legend: {
  //           icon: "rect",
  //           itemWidth: 14,
  //           itemHeight: 10,
  //           right: 0,
  //           textStyle: {
  //             color:
  //               settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //           },
  //         },
  //         xAxis: {
  //           nameLocation: "start",
  //           type: "value",
  //           name: "单位tce",
  //           nameTextStyle: {
  //             color:
  //               settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //             fontSize: 14,
  //             padding: [0, 0, 5, 0],
  //           },
  //           axisLine: {
  //             show: false,
  //           },
  //           splitLine: {
  //             show: true,
  //             lineStyle: {
  //               type: "dashed",
  //               color:
  //                 settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //             },
  //           },
  //           axisTick: {
  //             show: false,
  //           },
  //           splitArea: {
  //             show: false,
  //           },
  //           axisLabel: {
  //             color:
  //               settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //             fontSize: 14,
  //             //   formatter: '{value} ml'
  //           },
  //         },
  //         yAxis: {
  //           type: "category",
  //           axisPointer: {
  //             type: "shadow",
  //           },
  //           axisLine: {
  //             show: true,
  //             lineStyle: {
  //               color:
  //                 settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //             },
  //           },
  //           axisTick: {
  //             show: false,
  //           },
  //           splitArea: {
  //             show: false,
  //           },
  //           splitLine: {
  //             show: false,
  //           },
  //           axisLabel: {
  //             color:
  //               settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
  //             fontSize: 14,
  //             padding: [5, 0, 0, 0],
  //             //   formatter: '{value} ml'
  //           },
  //           data: xdata.splice(0, 6),
  //         },
  //         series: seriesdata,
  //       });
  //     }, 100);
  //     window.addEventListener("resize", () => {
  //       myChart2.resize();
  //     },{passive: true});
  //   }
  // });
}
// èƒ½è€—对比分析-搜索
function handleQuery() {
  getList()
}
// èƒ½è€—对比分析-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.energyType = energyTypeList.value[0].enersno
  queryParams.value.enername = energyTypeList.value[0].enername
  queryParams.value.muid = energyTypeList.value[0].muid
  queryParams.value.analysisType = "MOM"
  handleTimeType(period.value[1].value)
  handleQuery()
}
// èƒ½è€—对比分析-导出
function handleExport() {
  proxy.download(
    "consumptionanalysis/energyExport",
    {
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-厂区能耗分析_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";
</style>