admin-vben5/apps/web-antd/src/views/property/energyManagement/electricEnergy/electricTrend/index.vue

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from "vue"
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { Page } from '@vben/common-ui'
import { DatePicker } from 'ant-design-vue'
import FloorTree from "../components/floor-tree.vue"

const currentDay = ref<Dayjs>(dayjs())
const currentMonth = ref<Dayjs>(dayjs())
const currentYear = ref<Dayjs>(dayjs())
const disabledDay = (current: Dayjs) => {
  return current && current > dayjs().endOf('day')
}
const disabledMonth = (current: Dayjs) => {
  return current && current > dayjs().endOf('month')
}
const disabledYear = (current: Dayjs) => {
  return current && current > dayjs().endOf('year')
}

onMounted(() => {
  //day
  const chartDay = document.getElementById('day')
  const myChartDay = echarts.init(chartDay)
  const optionDay = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['当日', '昨日']
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        name: '时',
        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'KW.h'
      }
    ],
    series: [
      {
        name: '当日',
        type: 'bar',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      },
      {
        name: '昨日',
        type: 'bar',
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: 'filter',
      },
    ],
  }
  optionDay && myChartDay.setOption(optionDay)

  //month
  const chartMonth = document.getElementById('month')
  const myChartMonth = echarts.init(chartMonth)
  const optionMonth = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['当月', '上月']
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        name: '日',
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'KW.h'
      }
    ],
    series: [
      {
        name: '当月',
        type: 'bar',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      },
      {
        name: '上月',
        type: 'bar',
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: 'filter',
      },
    ],
  }
  optionMonth && myChartMonth.setOption(optionMonth)

  //year
  const chartYear = document.getElementById('year')
  const myChartYear = echarts.init(chartYear)
  const optionYear = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['当年', '去年']
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        name: '月',
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'KW.h'
      }
    ],
    series: [
      {
        name: '当年',
        type: 'bar',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      },
      {
        name: '去年',
        type: 'bar',
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: 'filter',
      },
    ],
  }
  optionYear && myChartYear.setOption(optionYear)

  // 鼠标悬停时激活缩放
  myChartDay.on('mouseover', { seriesIndex: 0 }, () => {
    myChartDay.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    })
  })

  // 鼠标离开时取消缩放
  myChartDay.on('mouseout', { seriesIndex: 0 }, () => {
    myChartDay.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    })
  })

  // 鼠标悬停时激活缩放
  myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
    myChartYear.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    })
  })

  // 鼠标离开时取消缩放
  myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
    myChartYear.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    })
  })

  // 鼠标悬停时激活缩放
  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
    myChartMonth.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    })
  })

  // 鼠标离开时取消缩放
  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
    myChartMonth.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    })
  })
})
</script>

<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 style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentDay" :disabled-date="disabledDay" />当日能耗总值：125.04KW.h
            </div>
          </div>
          <div id="day" style="height: 100%;width: 100%;"></div>
        </div>
        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentMonth" :disabled-date="disabledMonth" picker="month" />当月能耗总值：125.04KW.h
            </div>
          </div>
          <div id="month" style="height: 100%;width: 100%;"></div>
        </div>
        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentYear" :disabled-date="disabledYear" picker="year" />当年能耗总值：125.04KW.h
            </div>
          </div>
          <div id="year" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
    </div>
  </Page>
</template>