救援队伍统计、应急空间统计、风险源统计图表样式初步调整，园区概况布局调整 倾斜模型加载配置微调后续看加载效果 企业名录样式调整

shuishen

2024-11-05 7bcdaba7faad85bf16bf0f2a1dbd3e390bdb15dd

 src/views/survey/components/box/fireContent.vue

@@ -2,15 +2,14 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-04 16:32:04
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-04 16:32:58
 * @LastEditTime: 2024-11-05 17:42:44
 * @FilePath: \bigScreen\src\views\survey\components\box\fireContent.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'

import { useEchartsResize } from 'hooks/useEchartsResize'
import { getRiskSourceStatistic } from '../../../../api/indParkInfo'

let $echarts = inject('echarts')
@@ -18,85 +17,154 @@

let myEcharts = reactive(null)

onMounted(() => {
  myEcharts = $echarts.init(curEcharts.value)
  getRiskSource()

})

let typeLevel = [
  {
    name: '低',
    itemStyle: {
      color: '#31B5FF'
    }
  },
  {
    name: '一般',
    itemStyle: {
      color: '#FFFF00'
    }
  },
  {
    name: '较大',
    itemStyle: {
      color: '#FFC000'
    }
  },
  {
    name: '重大',
    itemStyle: {
      color: '#FE0000'
    }
  }
]

function getRiskSource () {
  getRiskSourceStatistic().then(res => {
    let xaxis_data = []
    let yaxis_data = []
    let seriesData = []
    res.data.data.forEach(element => {
      xaxis_data.push(element.riskLevel)
      yaxis_data.push(element.num)
      yaxis_data.push({
        name: element.riskLevel,
        value: element.num
      })

      seriesData.push({
        name: element.riskLevel,
        type: 'bar',
        data: [],
        barWidth: '30',
        barGap: '-100%',
        itemStyle: typeLevel.find(i => i.name == element.riskLevel).itemStyle
      })
    })

    seriesData = seriesData.map(item => {
      return {
        ...item,
        data: yaxis_data.map(i => {
          return i.name == item.name ? i.value : 0
        })
      }
    })

    myEcharts.setOption({
      legend: {
        data: xaxis_data,
        top: "5%",
        right: "5%",
        textStyle: {
          color: '#fff'
        }
      },

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '16%',
        left: '6%',
        right: '6%',
        bottom: '6%',
        containLabel: true
      },

      xAxis: [
        {
          type: 'category',
          data: xaxis_data,
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          },
        }
      ],

      yAxis: [
        {
          type: 'value'
          type: 'value',
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          },
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '30%',
          data: yaxis_data
        }
      ]
      series: seriesData
    })
  })
}

nextTick(() => {
  myEcharts = $echarts.init(curEcharts.value)
  getRiskSource()
})

const echartsResize = () => {
  myEcharts && myEcharts.resize()
}

useEchartsResize(echartsResize)
</script>

<template>
  <public-content>
    <template #content>
      <div class="fireContent-box">
  <div class="w100 h100" ref="curEcharts">

        <div>
          <div class="fire-content-echarts" ref="curEcharts">


          </div>

        </div>

      </div>
    </template>
  </public-content>
  </div>
</template>

<style lang="scss" scoped>
.fireContent-box {
  color: #fff;
}

.fire-content-echarts {
  height: 200px;
}
</style>
<style lang="scss" scoped></style>