成本趋势

ali

2025-02-13 0fe0237b1eb968858b156c7edb160173604aae53

成本趋势

 zhitan-vue/src/components/Echarts/LineChart.vue

@@ -1,6 +1,6 @@
<template>
  <div class="chart-item">
    <div id="ChartDom" style="width: 100%; height: 100%"></div>
    <div :id="domId" style="width: 100%; height: 100%"></div>
  </div>
</template>

@@ -18,6 +18,10 @@
  chartType: {
    type: String,
    default: "line", // bar
  },
  domId: {
    type: String,
    default: "ChartDom",
  },
})

@@ -44,13 +48,14 @@
  if (!props.chartData.xAxis) {
    return
  }
  const chartDom = document.getElementById("ChartDom")
  const chartDom = document.getElementById(props.domId)
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.dispose(chartDom)
  }
  const myChart = echarts.init(chartDom)
  // å¤„理多系列数据
  const series = props.chartData.series.map((item) => ({
    ...item,
    name: item.name,
    type: props.chartType, // æ ¹æ®ä¼ å…¥ç±»åž‹æ¸²æŸ“
    data: item.data,
@@ -60,6 +65,7 @@
    },
    smooth: true, // å¯ç”¨å¹³æ»‘曲线
  }))
  console.log("initChart", series)
  let option = {
    title: {
      // text: props.chartData.title,

 zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-right">
        <div>
          <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="时间" prop="dataTime">
                <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>
                <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </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="margin-top: 16px">
            <div class="" style="padding: 0 16px">
              <el-table :data="tableData" v-loading="loading">
                <el-table-column label="时间" prop="dateCode" align="center" width="120" />
                <el-table-column label="总费用(元)" prop="total" align="center" width="120" />
                <el-table-column :label="col.energyName" v-for="(col, index) in columns" :key="index" align="center">
                  <el-table-column :prop="'energyTotal' + col.energyType" label="消耗量" width="120" align="center" />
                  <el-table-column :prop="'costTotal' + col.energyType" label="费用（元）" width="120" align="center" />
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="charts-view" v-loading="loading">
            <el-row :gutter="2" class="" v-for="item in chartDataList" :key="item.energyType">
              <el-col :span="12">
                <BaseCard :title="item.costLabel + '(元)'">
                  <div class="">
                    <LineChart
                      :ref="'LineChartCostRef' + item.energyType"
                      :domId="'costDom_' + item.energyType"
                      :chartData="{
                        title: item.costLabel,
                        chartType: 'line',
                        xAxis: item.costKeyList,
                        series: [
                          {
                            name: item.costLabel,
                            data: item.costValueList,
                          },
                        ],
                      }"
                    />
                  </div>
                </BaseCard>
              </el-col>
              <el-col :span="12">
                <BaseCard :title="item.accumulationLabel + '(' + item.energyUnit + ')'">
                  <div class="">
                    <LineChart
                      :ref="'LineChartaccumulationRef' + item.energyType"
                      :domId="'accumulationDom_' + item.energyType"
                      :chartType="'bar'"
                      :chartData="{
                        title: item.accumulationLabel,
                        chartType: 'bar',
                        xAxis: item.accumulationKeyList,
                        series: [
                          {
                            name: item.accumulationLabel,
                            color: '#19be6b',
                            data: item.accumulationValueList,
                          },
                        ],
                      }"
                    />
                  </div>
                </BaseCard>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { listEnergyCostTrend, listEnergyCostTrendDetail } from "@/api/cost/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
import { deepClone } from "@/utils/index.js"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeKey = ref(1)
const loading = ref(false)
const tableData = ref([])
const columns = ref([])
const detailData = ref({})
const lineChartData = ref({})
const chartDataList = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
    modelCode: useRoute().query.modelCode,
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)

function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getTableData()
  getList()
}

function getTableData() {
  let params = {
    ...queryParams.value,
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  listEnergyCostTrend(params).then((res) => {
    if (res.code === 200) {
      let data = deepClone(res.data.itemList || [])
      // è¡¨å¤´çš„数据
      if (data.length > 0 && data[0].itemList.length > 0) {
        let energyList = data[0].itemList
        columns.value = energyList.map((item) => {
          return {
            energyName: item.energyName,
            energyType: item.energyType,
          }
        })
      }
      tableData.value = data.map((item) => {
        let tempObj = {}
        item.itemList.forEach((element) => {
          tempObj["energyTotal" + element.energyType] = element.accumulation
          tempObj["costTotal" + element.energyType] = element.cost
        })
        return {
          ...item,
          ...tempObj,
        }
      })
    }
  })
}
const LineChartRef = ref()
function getList() {
  loading.value = true
  let params = {
    ...queryParams.value,
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  listEnergyCostTrendDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        chartDataList.value = res.data
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getTableData()
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}

onMounted(() => {
  setTimeout(() => {
    handleTimeType(period.value[0].value)
  }, 200)
})
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
}

.themeLight {
}

.charts-view {
  width: 100%;
  margin-top: 20px;
  // padding: 0 30px;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/costAnalysis/energy-trend-analysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,295 @@
<template>
  <div class="page"></div>
</template>
<script setup name="loadAnalysis">
import { loadAnalysisDetail, listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeKey = ref(1)
const loading = ref(false)
const tableData = ref([])
const detailData = ref({})
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
    modelCode: useRoute().query.modelCode,
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  setTimeout(() => {
    handleTimeType(period.value[0].value)
  }, 200)
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}
const LineChartRef = ref()
function getList() {
  return
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  loadAnalysisDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        tableData.value = res.data.itemList
        detailData.value = res.data.detail
        let itemList = res.data.itemList
        if (queryParams.value.timeType == "DAY") {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时"
            }),
            series: [
              {
                name: "负荷值",
                data: itemList.map((item) => {
                  return item.value
                }),
              },
            ],
          }
        } else {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCodeChart
            }),
            series: [
              {
                name: "平均负荷",
                data: itemList.map((item) => {
                  return item.avg
                }),
              },
              {
                name: "最大负荷",
                data: itemList.map((item) => {
                  return item.max
                }),
              },
              {
                name: "最小负荷",
                data: itemList.map((item) => {
                  return item.min
                }),
              },
            ],
          }
        }
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>