admin-vben5/apps/web-antd/src/views/property/energyManagement/waterPower/waterSituation/index.vue

<template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
      <FloorTree class="w-[260px]"></FloorTree>
      <div class="flex-1 overflow-hidden">
        <div class="row">
          <div class="comparison-section-container">
            <div class="section-header">
              <div class="header-title">环比</div>
            </div>
            <div class="comparison-grid">
              <div class="comparison-item">
                <div class="item-value">{{ chainData.currentMonthEnergy }}</div>
                <div class="item-title">当月用水(t)</div>
              </div>
              <div class="comparison-item">
                <div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
                <div class="item-title">上月同期(t)</div>
              </div>
              <div class="comparison-item">
                <div class="item-top">
                  <div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
                  <div>{{ chainData.monthTrendValue }}
                    <span class="item-title">t</span>
                  </div>
                </div>
                <div class="item-title">趋势</div>
              </div>
              <div class="comparison-item">
                <div class="item-value">{{ chainData.currentYearEnergy }}</div>
                <div class="item-title">当年用水(t)</div>
  
              </div>
              <div class="comparison-item">
                <div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
                <div class="item-title">去年同期(t)</div>
              </div>
              <div class="comparison-item">
                <div class="item-top">
                  <div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
                  <div>{{ chainData.yearTrendValue }}
                    <span class="item-title">t</span>
                  </div>
                </div>
                <div class="item-title">趋势</div>
              </div>
            </div>
          </div>
          <div class="energy-trend-container">
            <div class="energy-trend-top">
              <div class="section-header">
                <div class="header-title">能耗趋势</div>
              </div>
              <RadioGroup v-model:value="energyTrendTime" button-style="solid" size="small"
                @change="buildingEnergyTrendData(energyTrendTime)">
                <RadioButton value="2">当月</RadioButton>
                <RadioButton value="3">当年</RadioButton>
              </RadioGroup>
            </div>
            <div class="energy-chart" ref="energyTrendChart">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="power-curve-container">
            <div class="section-header">
              <div class="header-title">当年数据曲线</div>
            </div>
            <div class="power-chart" ref="powerCurveChart">
            </div>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<script setup lang="ts">
import { RadioGroup, RadioButton } from 'ant-design-vue'
import { Page } from '@vben/common-ui'
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import * as echarts from 'echarts'
import type { ECharts, EChartsOption } from 'echarts'
import FloorTree from "../../electricEnergy/components/floor-tree.vue"

const chainData = reactive({
  currentMonthEnergy: '9',
  lastMonthSamePeriodEnergy: '--',
  monthTrendPercentage: '--',
  monthTrendValue: '--',
  currentYearEnergy: '59',
  lastYearSamePeriodEnergy: '--',
  yearTrendPercentage: '--',
  yearTrendValue: '--',
})

const energyTrendTime = ref('2')

// 能耗趋势图表容器
const energyTrendChart = ref<HTMLElement | null>(null)
const energyTrendInstance = ref<ECharts | null>(null)

const energyTrendOption: EChartsOption = {
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    name: '日期',
  },
  yAxis: {
    type: 'value',
    name: 't',
  },
  series: [
    {
      data: [],
      type: 'bar',
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
    }
  ],
}

const initEnergyTrendChart = () => {
  if (energyTrendChart.value) {
    // 销毁旧实例
    energyTrendInstance.value?.dispose()
    // 创建新实例
    energyTrendInstance.value = echarts.init(energyTrendChart.value)
    // 设置配置项
    energyTrendInstance.value.setOption(energyTrendOption)
    buildingEnergyTrendData('2')
    // 可选：添加窗口大小变化监听
    const resizeHandler = () => {
      energyTrendInstance.value?.resize()
    }
    window.addEventListener('resize', resizeHandler)

    // 在组件卸载前移除监听
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })
  }
}

function buildingEnergyTrendData(val: string) {
  const now = new Date()
  let timeArr = []
  let valArr = []
  let name = '日期'
  if (val == '2') {
    const day = now.getDate()
    for (let i = 1; i < day; i++) {
      timeArr.push(i)
      valArr.push(parseFloat((Math.random() * 10).toFixed(2)))
    }
  } else {
    const month = now.getMonth() + 1
    for (let i = 1; i < month; i++) {
      timeArr.push(i)
      valArr.push(parseFloat((Math.random() * 80).toFixed(2)))
    }
    name = '月份'
  }

  if (energyTrendInstance.value) {
    energyTrendInstance.value.setOption({
      xAxis: { data: timeArr, name },
      series: [{ data: valArr }],
    })
  }
}

//日用电率
const powerCurveChart = ref<HTMLElement | null>(null)
const powerCurveInstance = ref<ECharts | null>(null)


const powerCurveOption: EChartsOption = {
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
    }
  },
  legend: {
    data: ['今年']
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      name: '月份'
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 't',
    },
  ],
  series: [
    {
      name: '今年',
      type: 'line',
      smooth: true,
      data: [],
      markPoint: {
        data: [
          { type: 'max', },
          { type: 'min', }
        ]
      },
    },
  ]
}

const initPowerCurveChart = () => {
  if (powerCurveChart.value) {
    // 销毁旧实例
    powerCurveInstance.value?.dispose()
    // 创建新实例
    powerCurveInstance.value = echarts.init(powerCurveChart.value)
    // 设置配置项
    powerCurveInstance.value.setOption(powerCurveOption)
    buildingPowerCurveData()
    // 可选：添加窗口大小变化监听
    const resizeHandler = () => {
      powerCurveInstance.value?.resize()
    }
    window.addEventListener('resize', resizeHandler)

    // 在组件卸载前移除监听
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })
  }
}

function buildingPowerCurveData() {
  const now = new Date()
  const month = now.getMonth() + 1
  let yearData = []
  let timeDate = []
  for (let i = 1; i < month; i++) {
    timeDate.push(i + '月')
    yearData.push(parseFloat((Math.random() * 60).toFixed(2)))
  }
  if (powerCurveInstance.value) {
    powerCurveInstance.value.setOption({
      xAxis: { data: timeDate },
      series: [{ data: yearData }],
    })
  }
}

// 组件挂载后初始化图表
onMounted(() => {
  initEnergyTrendChart()
  initPowerCurveChart()
})

// 组件卸载前销毁图表实例
onBeforeUnmount(() => {
  energyTrendInstance.value?.dispose()
  powerCurveInstance.value?.dispose()
})
</script>

<style scoped>
.row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.comparison-section-container {
  flex: 2;
}

.energy-trend-container {
  flex: 3;
}

.power-curve-container {
  margin-top: 10px;
  flex: 5;
}

.energy-trend-top {
  display: flex;
  justify-content: space-between
}

.section-header {
  border-left: 4px solid #3671e8;
  margin-bottom: 15px;
  padding-left: 16px;
}

.header-title {
  font-size: 16px;
  color: #333;
}

.comparison-section-container,
.energy-trend-container,
.power-curve-container {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.comparison-item {
  padding: 15px 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.item-value {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.item-title {
  font-size: 12px;
  color: #666;
}

.item-top {
  font-size: 16px;
  margin-bottom: 10px;
}

.item-percent {
  color: #7fb926;
  margin-bottom: 5px;
  border-bottom: 1px solid #666;
}

.power-chart {
  height: 45vh;
}

.energy-chart {
  height: 30vh;
}
</style>