pms-iot-vue/src/views/pms/stat/rhkb.vue

<template>
  <el-row :gutter="16" class="summary">
    <!-- 原有的统计卡片部分保持不变 -->
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="device.total || 0"
        icon="fa-solid:project-diagram"
        icon-bg-color="text-blue-500"
        icon-color="bg-blue-100"
        title="设备数"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="maintain.total || 0"
        icon="fa-solid:list"
        icon-bg-color="text-pink-500"
        icon-color="bg-blue-100"
        title="维修工单"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="fill.unfilledCount || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-purple-500"
        icon-color="bg-purple-100"
        title="运行未填写"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="fill.filledCount || 0"
        icon="fa-solid:award"
        icon-bg-color="text-purple-500"
        icon-color="bg-purple-100"
        title="运行已填写"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="by.todo || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-green-500"
        icon-color="bg-green-100"
        title="未执行保养"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="by.finished || 0"
        icon="fa-solid:award"
        icon-bg-color="text-green-500"
        icon-color="bg-green-100"
        title="已执行保养"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="inspectt.todo || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        title="待填写巡检"
      />
    </el-col>
    <el-col v-loading="loading" :sm="3" :xs="12">
      <SummaryCard
        :value="inspectt.finished || 0"
        icon="fa-solid:award"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        title="已填写巡检"
      />
    </el-col>
    <!-- 其他统计卡片... -->
  </el-row>
  <!-- 第二行：图表行 -->
  <el-row :gutter="16" class="mb-4 mt-3">
    <el-col :span="7">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center">
            <span class="text-base font-medium text-gray-600">设备状态统计</span>
          </div>
        </template>
        <div ref="statusChartRef" class="h-[290px]"></div>
      </el-card>
    </el-col>
    <el-col :span="7">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center">
            <span class="text-base font-medium text-gray-600">设备类别TOP5数量</span>
          </div>
        </template>
        <div ref="topContainer" class="h-[290px]"></div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="text-base font-medium text-gray-600">当日运维成本</span>
          </div>
        </template>
        <div ref="chartContainer" class="h-[290px]"></div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 第三行：消息统计行 -->
  <el-row :gutter="16" class="mb-1">
    <el-col :span="7">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center">
            <span class="text-base font-medium text-gray-600">近7天物料消耗TOP5</span>
          </div>
        </template>
        <div ref="materialChartRef" class="h-[320px]"></div>
      </el-card>
    </el-col>
    <el-col :span="17">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="text-base font-medium text-gray-600">工单数量情况</span>
          </div>
        </template>
        <div ref="qxRef" class="h-[320px]"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="16" class="mb-1 mt-4">
    <el-col :span="12">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="text-base font-medium text-gray-600">累计注气量统计(m³)</span>
          </div>
        </template>
        <div ref="zqlChartRef" class="h-[300px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="chart-card" shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="text-base font-medium text-gray-600">当日注气量统计(m³)</span>
          </div>
        </template>
        <div ref="todayZqlRef" class="h-[300px]"></div>
      </el-card>
    </el-col>
  </el-row>
  <!-- TODO 第四行：地图 -->
</template>

<script setup lang="ts" name="Index">
import * as echarts from 'echarts/core'
import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts' // 显式导入柱状图模块
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { useElementSize } from '@vueuse/core'
import { IotStatApi } from '@/api/pms/stat'
import SummaryCard from '@/components/SummaryCard/index.vue'
import { reactive, ref } from 'vue'

/** IoT 首页 */
defineOptions({ name: 'IotRhStat' })
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  UniversalTransition,
  GaugeChart,
  BarChart
])

const dateRange = ref<[Date, Date] | null>(null)

const by = ref({
  todo: undefined,
  finished: undefined
})
const fill = ref({
  filledCount: undefined,
  unfilledCount: undefined
})
const inspectt = ref({
  finished: 0,
  todo: 0
})
const queryParams = reactive({
  startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
  endTime: Date.now() // 设置默认结束时间为当前时间
})
const backendData = ref([])
const statusChartRef = ref() // 设备数量统计的图表
const materialChartRef = ref() // 设备数量统计的图表
const zqlChartRef = ref() // 注气量统计的图表
const todayZqlRef = ref() // 注气量统计的图表

const device = ref({
  total: undefined,
  today: undefined
})
const maintain = ref({
  total: undefined,
  today: undefined
})
const work = ref({
  total: undefined,
  today: undefined
})
const inspect = ref({
  total: undefined,
  today: undefined
})

const status = ref({
  finished: 0,
  todo: 0
})
const todayStatus = ref({
  finished: 0,
  todo: 0
})
const typeData = ref({})
const materialData = ref({})
const orderSevenData = ref({})
const zqlData = ref({})
const zqlTodayData = ref({})
const safe = ref()
/** 获取统计数据 */
const getStats = () => {
  initYwcbChart()
  // 获取基础统计数据
  IotStatApi.getDeviceCount('rh').then((res) => {
    device.value = res
  })
  IotStatApi.getMaintainCount('rh').then((res) => {
    maintain.value = res
  })
  IotStatApi.getMainWorkCount().then((res) => {
    work.value = res
  })
  IotStatApi.getInspectCount().then((res) => {
    inspect.value = res
  })
  IotStatApi.getMaintenanceStatus().then((res) => {
    status.value = res
    // initCharts()
  })
  IotStatApi.getMaintenanceTodayStatus().then((res) => {
    todayStatus.value = res
    initTopChart()
  })

  IotStatApi.getDeviceStatusCount('rh').then((res) => {
    typeData.value = res
    initDeviceStatusCharts()
  })
  // IotStatApi.getSafeCount().then((res) => {
  //   safe.value = res
  // })
  IotStatApi.getMaterial().then((res) => {
    materialData.value = res
    initMaterials()
  })

  IotStatApi.getOrderSeven('rh').then((res) => {
    orderSevenData.value = res
    initQxChart()
  })
  IotStatApi.getMaintenanceStatus('rh').then((res) => {
    by.value = res
  })
  IotStatApi.getRhZql('rh').then((res) => {
    zqlData.value = res
    initZqlChart()
  })
  IotStatApi.getRhZqlToday('rh').then((res) => {
    zqlTodayData.value = res
    initTodayZqlChart()
  })
  const fillQueryParams = reactive({
    startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
    endTime: Date.now(), // 设置默认结束时间为当前时间
    createTime: [],
    deptId: null, // 选中的部门ID
    status: null // 填写状态
  })
  IotStatApi.getInspectStatuss(fillQueryParams, 'rh').then((res) => {
    inspectt.value = res
  })
  fillQueryParams.deptId = '157'
  IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
    fill.value = res.totalList[0] || []
  })
}
let materialInstance = null
const initMaterials = () => {
  if (!materialChartRef.value) return
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '5%',
      // right: '10%',
      // align: 'left',
      // orient: 'vertical',
      // icon: 'circle'
      orient: 'horizontal', // 水平排列图例项
      bottom: '0%', // 放置在底部
      icon: 'circle'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        center: ['50%', '44%'],
        label: {
          show: false,
          position: 'outside'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: materialData.value
      }
    ]
  }
  // 初始化图表
  materialInstance = echarts.init(materialChartRef.value)
  materialInstance.setOption(option)

  // 窗口缩放监听
  window.addEventListener('resize', handleMaterialResize)
  handleMaterialResize()
}
let zqlTodayInstance = null
const initTodayZqlChart = async () => {
  if (!todayZqlRef.value) return

  // 获取数据
  // ECharts配置
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        return `${params[0].axisValue}<br/>
                ${params[0].marker} ${params[0].seriesName}: ${params[0].value}`
      }
    },
    legend: {
      data: ['当日注气量'],
      top: 25
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: zqlTodayData.value.xAxis,
      axisLabel: {
        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: (value) => Math.floor(value).toString()
      }
    },
    series: zqlTodayData.value.series.map((item, index) => {
      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
      const yAxisIndex = index < 2 ? 0 : 1
      return {
        name: item.name,
        type: 'bar',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: [ '#91cc75'][index]
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,112,198,0.4)' },
            { offset: 1, color: 'rgba(84,112,198,0.1)' }
          ])
        },
        data: item.data,
        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
      }
    })
  }

  // 初始化图表
  zqlTodayInstance = echarts.init(todayZqlRef.value)
  zqlTodayInstance.setOption(option)

  // 窗口缩放监听
  window.addEventListener('resize', handleZqlTodayResize)
  handleZqlTodayResize()
}

/** 初始化图表 */
const initDeviceStatusCharts = () => {
  // 设备数量统计
  echarts.init(statusChartRef.value).setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal', // 水平排列图例项
      bottom: '0%', // 放置在底部
      icon: 'circle'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        center: ['50%', '44%'],
        label: {
          show: false,
          position: 'outside'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: typeData.value
      }
    ]
  })
}

/** 初始化消息统计图表 */
const chartContainer = ref(null)
let chartInstance = null

// 模拟数据获取
const fetchChartData = async () => {
  // 模拟异步请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        months: ['空压机', '增压机', '提纯撬'],
        repairs: [10, 30, 90]
      })
    }, 300)
  })
}

// 初始化图表配置
const initYwcbChart = async () => {
  if (!chartContainer.value) return

  // 获取数据
  const { months, faults, repairs } = await fetchChartData()
  // const months = ['空压机','增压机','提纯撬']
  // ECharts配置
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        return `${params[0].axisValue}<br/>
                ${params[0].marker} ${params[0].seriesName}: ${params[0].value}`
      }
    },
    legend: {
      data: ['当日运维成本'],
      top: 1
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: zqlTodayData.value.xAxis,
      axisLabel: {
        rotate: 45,
        margin: 15
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: (value) => Math.floor(value).toString()
      }
    },
    series: [
      {
        name: '当日运维成本',
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#f69606' }])
        },
        emphasis: {
          focus: 'series'
        },
        data: repairs
      }
    ]
  }

  // 初始化图表
  chartInstance = echarts.init(chartContainer.value)
  chartInstance.setOption(option)

  // 窗口缩放监听
  window.addEventListener('resize', handleResize)
  handleResize()
}

// 自适应调整
const handleResize = () => {
  chartInstance?.resize()
}

// 自适应调整
const handleTopResize = () => {
  topInstance?.resize()
}
const handleQxResize = () => {
  qxInstance?.resize()
}
const handleZqlResize = () => {
  zqlInstance?.resize()
}
const handleZqlTodayResize = () => {
  zqlTodayInstance?.resize()
}
const handleMaterialResize = () => {
  materialInstance?.resize()
}
const topContainer = ref(null)
let topInstance = null
// 响应式容器尺寸
const { width, height } = useElementSize(topContainer)

// 初始化图表配置
const getTopOption = () => {
  // backendData.value = data
  const data = backendData.value.sort((a, b) => a.value - b.value)
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params) => {
        const item = params[0]
        return `${item.name}<br/>${item.marker} ${item.value.toLocaleString()}`
      }
    },
    grid: {
      height: '200px',
      left: '6%',
      right: '6%',
      bottom: '18%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: (value) => {
          if (value >= 10000) return `${(value / 10000).toFixed(1)}万`
          return value.toLocaleString()
        }
      }
    },
    yAxis: {
      type: 'category',
      data: data.map((item) => item.category),
      axisTick: { show: false },
      axisLabel: {}
    },
    series: [
      {
        type: 'bar',
        data: data.map((item) => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.7, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ]),
          borderRadius: [0, 8, 8, 0]
        },
        label: {
          show: true,
          position: 'right',
          formatter: '{@value}',
          color: '#333',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

// 初始化图表
const initTopChart = async () => {
  await IotStatApi.getDeviceTypeCount('rh').then((res) => {
    backendData.value = res
  })
  if (!topContainer.value) return
  topInstance = echarts.init(topContainer.value)
  updateTopChart()
}

// 更新图表
const updateTopChart = () => {
  if (!topInstance) return
  topInstance.setOption(getTopOption())
}

// 自适应调整
watch([width, height], () => {
  topInstance?.resize()
})

// 监听数据变化
watch(
  backendData,
  () => {
    updateTopChart()
  },
  { deep: true }
)

const qxRef = ref(null)
let qxInstance = null
let zqlInstance = null

const initZqlChart = () => {
  if (!zqlChartRef.value) return
  zqlInstance = echarts.init(zqlChartRef.value)
  debugger
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: zqlData.value.series.map((item) => item.name),
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: zqlData.value.xAxis,
      axisLabel: {
        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
      }
    },
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        position: 'left' // 左侧 Y 轴
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        position: 'right', // 右侧 Y 轴
        splitLine: {
          show: false // 隐藏右侧 Y 轴的分割线
        }
      }
    ],

    series: zqlData.value.series.map((item, index) => {
      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
      const yAxisIndex = index < 2 ? 0 : 1
      return {
        name: item.name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: ['#5470c6', '#f1d209', '#e14f0f', '#91cc75'][index]
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,112,198,0.4)' },
            { offset: 1, color: 'rgba(84,112,198,0.1)' }
          ])
        },
        data: item.data,
        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
      }
    })
  }

  zqlInstance.setOption(option)
  // 窗口缩放监听
  window.addEventListener('resize', handleZqlResize)
  handleZqlResize()
}

const initQxChart = () => {
  if (!qxRef.value) return
  qxInstance = echarts.init(qxRef.value)
  debugger
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: orderSevenData.value.series.map((item) => item.name),
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: orderSevenData.value.xAxis,
      axisLabel: {
        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
      }
    },
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        position: 'left' // 左侧 Y 轴
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        position: 'right', // 右侧 Y 轴
        splitLine: {
          show: false // 隐藏右侧 Y 轴的分割线
        }
      }
    ],

    series: orderSevenData.value.series.map((item, index) => {
      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
      const yAxisIndex = index < 2 ? 0 : 1
      return {
        name: item.name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: ['#5470c6', '#f1d209', '#e14f0f', '#91cc75'][index]
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,112,198,0.4)' },
            { offset: 1, color: 'rgba(84,112,198,0.1)' }
          ])
        },
        data: item.data,
        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
      }
    })
  }

  qxInstance.setOption(option)
  // 窗口缩放监听
  window.addEventListener('resize', handleQxResize)
  handleQxResize()
}

// 响应式调整
const resizeQxChart = () => qxInstance?.resize()
const resizeZqlChart = () => zqlInstance?.resize()
const resizeZqlTodayChart = () => zqlTodayInstance?.resize()
const resizeMaterialChart = () => materialInstance?.resize()
/** 初始化 */
onMounted(() => {
  getStats()
  // initChart()
  // initTopChart()
  // initActiveChart()
  // initQxChart()
  window.addEventListener('resize', resizeQxChart)
  // fetchTop()
  window.addEventListener('resize', () => topInstance?.resize())
})
onBeforeUnmount(() => {
  chartInstance?.dispose()
  window.removeEventListener('resize', () => chartInstance?.resize())
  topInstance?.dispose()
  window.removeEventListener('resize', handleResize)
  qxInstance?.dispose()
  window.removeEventListener('resize', resizeQxChart)
  zqlInstance?.dispose()
  window.removeEventListener('resize', resizeZqlChart)
  zqlTodayInstance?.dispose()
  window.removeEventListener('resize', resizeZqlTodayChart)
  materialInstance?.dispose()
  window.removeEventListener('resize', resizeMaterialChart)
})
</script>

<style lang="scss" scoped></style>