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

shuishen

2024-11-05 7bcdaba7faad85bf16bf0f2a1dbd3e390bdb15dd

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

 src/hooks/useEchartsResize.js

New file
@@ -0,0 +1,12 @@

export function useEchartsResize (echartsResize) {
  // 在组件挂载时开始观察  
  onMounted(() => {
    window.addEventListener("resize", echartsResize)
  })

  // 在组件卸载时停止观察  
  onUnmounted(() => {
    window.removeEventListener("resize", echartsResize)
  })
} 

 src/styles/base/paddingStyle.scss

@@ -6,6 +6,10 @@
    padding: 0 20px;
}

.p-all-0 {
  padding: 0px;
}

.p-all-6 {
    padding: 6px;
}

 src/styles/page/index.scss

@@ -9,13 +9,11 @@
    width: 408px;
    height: 100%;
    pointer-events: auto;
    background: rgba(28, 115, 195, 0.05);
    background: rgba(28, 115, 195, 0.2);

    &>div {
      flex: 1;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      .title-box {
        position: relative;
@@ -46,7 +44,9 @@
      }

      .content-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: calc(100% - 38px);
      }
    }

@@ -54,4 +54,10 @@
      // background:  rgba(42,64,120,0.68);
    }
  }

  .left-container {}

  .right-container {
    right: 0;
  }
}

 src/views/layout/components/scomponents/baseMap.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-28 11:44:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 20:50:40
 * @LastEditTime: 2024-11-05 18:39:20
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\baseMap.vue
 * @Description: 
 * 
@@ -275,7 +275,7 @@
  curMode.value = mode
}

loadLAYER(0, 0)
loadLAYER(1, 1)

const showTerrainFlag = ref(false)


 src/views/layout/components/scomponents/layersControl.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-04 22:42:54
 * @LastEditTime: 2024-11-05 18:36:54
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
 * @Description: 
 * 
@@ -244,10 +244,24 @@
  collectedNodes.value.forEach(item => {
    if (options.checkedKeys.some(i => i == item.id)) {
      if (item.subType == '3Dtile') {
        addTileLayers[item.layerName] = new DC.Tileset(
          item.url
        )
        tileLayers.addOverlay(addTileLayers[item.layerName])
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.Tileset(
            item.url,
            {
              cullWithChildrenBounds: false,
              maximumScreenSpaceError: 256,
              maximumMemoryUsage: 1024,
              skipLevelOfDetail: true,
              preferLeaves: true
            })

          tileLayers.addOverlay(addTileLayers[item.layerName])
        } else {
          addTileLayers[item.layerName].show = true
        }

        console.log(addTileLayers[item.layerName], 11111111)

        globalViewer.flyTo(addTileLayers[item.layerName])
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
@@ -275,7 +289,7 @@
    } else {
      if (addTileLayers[item.layerName]) {
        if (item.subType == '3Dtile') {
          tileLayers.removeOverlay(addTileLayers[item.layerName])
          addTileLayers[item.layerName].show = false
        } else if (item.subType == 'labelPoint') {
          globalViewer.removeLayer(addTileLayers[item.layerName])
        }

 src/views/rs/components/leftContainer.vue

@@ -22,7 +22,9 @@
          数据概览
        </template>
      </title-box>
      <data-content></data-content>
      <div class="content-box">
        <data-content></data-content>
      </div>
    </div>

    <div class="unit box">
@@ -31,7 +33,9 @@
          入住单位统计
        </template>
      </title-box>
      <unit-content></unit-content>
      <div class="content-box">
        <unit-content></unit-content>
      </div>
    </div>

    <div class="fire box">
@@ -40,7 +44,9 @@
          实时火警事件
        </template>
      </title-box>
      <fire-content></fire-content>
      <div class="content-box">
        <fire-content></fire-content>
      </div>
    </div>
  </div>
</template>

 src/views/rs/components/rightContainer.vue

@@ -23,7 +23,9 @@
          火警事件来源
        </template>
      </title-box>
      <div class="content-box">
      <fire-source></fire-source>
      </div>
    </div>

    <div class="occur-statistics box">
@@ -32,7 +34,9 @@
          易发区统计
        </template>
      </title-box>
      <div class="content-box">
      <fire-trend></fire-trend>
      </div>
    </div>

    <div class="fire-trend box">
@@ -41,7 +45,9 @@
          火警上报趋势
        </template>
      </title-box>
      <div class="content-box">
      <occur-statistics></occur-statistics>
      </div>
    </div>
  </div>
</template>

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

@@ -1,95 +1,127 @@

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

// import { ref, reactive, onMounted, nextTick, inject } from 'vue'

import { useEchartsResize } from 'hooks/useEchartsResize'
import { getRescueTeamStatistic } from '@/api/indParkInfo'
import { nextTick } from 'vue'

let $echarts = inject('echarts')
const curEcharts = ref(null)

let myEcharts = reactive(null)

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

function getStatistic () {
  getRescueTeamStatistic().then(res => {
    let xaxis_data = []
    let yaxis_data = []
    res.data.data.forEach(element => {
      xaxis_data.push(element.type)
      yaxis_data.push(element.num)
    })
})


function getStatistic() {
    getRescueTeamStatistic().then(res => {
        let xaxis_data = []
        let yaxis_data = []
        res.data.data.forEach(element => {
            xaxis_data.push(element.type)
            yaxis_data.push(element.num)
        });

        myEcharts.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xaxis_data,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '30%',
                    data: yaxis_data
                }
            ]
        })
    myEcharts.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '6%',
        left: '6%',
        right: '6%',
        bottom: '6%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: xaxis_data,
          axisTick: {
            alignWithLabel: true
          },
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          },
        }
      ],
      series: [
        {
          name: '救援人数',
          type: 'bar',
          barWidth: '30',
          data: yaxis_data,
          itemStyle: {
            color: 'rgb(0, 0, 144)'
          }
        }
      ]
    })


  })
}

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

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

useEchartsResize(echartsResize)
</script>

<template>
    <public-content>
        <template #content>
            <div class="unit-content">
                <div class="unit-content-echarts" ref="curEcharts">
  <div class="w100 h100" ref="curEcharts">

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

<style lang="scss" scoped>
.data-content {
    color: #fff;

}

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

 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>

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

@@ -1,6 +1,5 @@
<script setup>
import { Text } from 'vue'
import publicContent from './publicContent.vue'
const { VITE_APP_BASE } = import.meta.env
import { getDetail } from '@/api/indParkInfo'

@@ -86,45 +85,38 @@
</script>

<template>
  <public-content>
    <template #content>
      <div class="box-content-box">
        <div class="box-content">
          <div>
            <div class="box-content-img">
              <img :src="state.parkInfo.imageUrls" alt="">
              {{ state.parkInfo.remark }}
            </div>
          </div>
  <div class="box-content-box">
    <div class="box-content">
      <div>
        <div class="box-content-img">
          <img :src="state.parkInfo.imageUrls" alt="">
          {{ state.parkInfo.remark }}
        </div>
      </div>
    </div>

        <div class="container">
          <div class="box-content-sj" v-for="item in parkInfoList" :key="item.id">
            <img :src="item.img" alt="">
            <div>
              <div class="box-content-ss">
                <div>
                  <div class="box-content-text-title">
                    <span class="box-content-text-title-span">{{ item.content }}</span>
                  </div>
                </div>
                <div>
                  <div class="box-content-text-content">
                    <text class="box-content-text-content-span">{{ item.title }}</text>
                    <text v-if="item.unit" class="box-content-text-content-span">({{ item.unit }})</text>
                  </div>
                </div>
              </div>
            </div>
    <div class="container">
      <div class="box-content-sj" v-for="item in parkInfoList" :key="item.id">
        <img :src="item.img" alt="">

        <div class="r">
          <div class="box-content-text-title">
            {{ item.content }}
          </div>

          <div class="box-content-text-content">
            {{ item.title }}
            <text v-if="item.unit">({{ item.unit }})</text>
          </div>
        </div>
      </div>
    </template>
  </public-content>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box-content-box {
  padding: 10px;
  color: #fff;
  font-size: 15px;
}
@@ -135,7 +127,7 @@
}

.box-content-img {
  height: 300px;
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
}
@@ -155,7 +147,7 @@

.box-content-text {
  padding-left: 5px;
  height: 300px;
  height: 360px;
  overflow: scroll;
  // 隐藏滚动条
  scrollbar-width: none;
@@ -163,43 +155,48 @@
}

.container {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 5px;
}

.box-content-sj {
  flex: 1 1 31%;
  /* 每个盒子占据大约31%的宽度，留出一些空间用于间距 */
  min-width: 100px;
  min-width: 30%;
  /* 最小宽度，防止在非常小的屏幕上变得太窄 */
  box-sizing: border-box;
  padding: 5px;
  // border: 1px solid #ccc;
  display: flex;
  // 设置高度
  align-items: center;
}
  justify-content: space-between;

.box-content-sj img {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}
  img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
  }

.box-content-ss {
  margin: 0px 0px 0px 10px;
}
  .r {
    margin-left: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

.box-content-text-title,
.box-content-text-content {
  margin-top: 5px;
  font-size: 10px;
  text-align: center;
}
    .box-content-text-title,
    .box-content-text-content {
      margin-top: 5px;
      font-size: 10px;
      text-align: center;
    }

.box-content-text-title-span,
.box-content-text-content-span {
  font-weight: bold;
    .box-content-text-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>

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

@@ -2,15 +2,13 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-01 10:28:42
 * @LastEditTime: 2024-11-05 20:39:31
 * @FilePath: \bigScreen\src\views\survey\components\box\fireTrend.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'

import { getPage } from '@/api/indParkInfo'

let parkQy = ref([])
@@ -22,7 +20,7 @@
})


function getPages() {
function getPages () {
  getPage().then(res => {
    parkQy.value = res.data.data.records
    console.log(res)
@@ -31,7 +29,7 @@
  })
}

function search() {
function search () {
  getPage({ name: searchQuery.value }).then(res => {
    parkQy.value = res.data.data.records
    console.log(res)
@@ -43,75 +41,75 @@
</script>

<template>
  <public-content>
    <template #content>
      <div class="box-content w100 h100 flex f-d-c">
        <div>
          <div class="search-container">
            <input type="text" v-model="searchQuery" placeholder="请输入企业名称" class="search-input" />
            <button class="search-button" @click="search">搜索</button>
          </div>
        </div>

        <div class="data-content-list">
          <div class="data-content-item" v-for="item in parkQy" :key="item.id">
            <div> {{ item.name }}</div>
            <el-button size="small" type="primary">进入企业</el-button>
          </div>
        </div>
  <div class="box-content w100 h100 flex f-d-c">
    <div>
      <div class="search-container">
        <el-input v-model="searchQuery" placeholder="请输入企业名称" size="mini">
        </el-input>
        <el-button :color="'#007bff'" @click="search" size="mini">搜索</el-button>
      </div>
    </template>
  </public-content>
    </div>

    <div class="data-content-list">
      <div class="data-content-item" v-for="item in parkQy" :key="item.id">
        <div> {{ item.name }}</div>
        <el-button size="small" type="primary" color="rgba(23,82,240, 0.7)">进入企业</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box-content {
  color: #fff;
  padding: 0 10px;
}

.search-container {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0px;

  ::v-deep(.el-input) {
    width: 0;
    flex: 1;

    .el-input__wrapper {
      font-size: 16px;
      font-weight: 400;
      border-radius: 0;
      background: rgba(135, 158, 199, 0.3);
      box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);

      .el-input__inner {
        color: #BFD3E5;
      }
    }
  }

  ::v-deep(.el-button) {
    border-radius: 0;
  }
}

.data-content-list {
  flex: 1;
  overflow-y: auto;
}

.search-input {
  width: 79%;
  /* 可以根据需要调整宽度 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
  background-color: transparent;
  color: #fff;
}
  .data-content-item {
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    background: linear-gradient(rgba(45, 45, 255, 0.1), rgba(45, 94, 255, 0.7));
    border-radius: 2px;
  }

.search-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #0056b3;
}

.data-content-item {
  display: flex;
  margin: 2px 10px;
  padding: 5px 5px;
  background-color: #747bff;
  justify-content: space-between;
  border-radius: 5px;
  .data-content-item:first-child {
    margin-top: 0;
  }
}
</style>

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

File was deleted

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

@@ -2,14 +2,14 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-04 13:58:17
 * @LastEditTime: 2024-11-05 17:15:55
 * @FilePath: \bigScreen\src\views\survey\components\box\unitContent.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'
import { useEchartsResize } from 'hooks/useEchartsResize'

import { getEmergencySpaceStatistic } from '../../../../api/indParkInfo'

@@ -17,14 +17,6 @@
const curEcharts = ref(null)

let myEcharts = reactive(null)

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

  })
})

function getEmergencySpace () {
  getEmergencySpaceStatistic().then(res => {
@@ -41,8 +33,21 @@
    myEcharts.setOption({
      legend: {
        orient: "vertical",
        left: "left",
        top: '5%',
        left: "5%",
        textStyle: {
          color: '#fff'
        }
      },

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

      tooltip: {
        trigger: 'item'
      },
@@ -51,7 +56,8 @@
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          left: '10%',
          radius: ['30%', '60%'],
          // avoidLabelOverlap: false,
          // padAngle: 5,
          // itemStyle: {
@@ -80,26 +86,22 @@
  })
}

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

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

useEchartsResize(echartsResize)
</script>

<template>
  <public-content>
    <template #content>
      <div class="unit-content">
        <div class="unit-content-echarts" ref="curEcharts">
  <div class="w100 h100" ref="curEcharts">

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

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

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

 src/views/survey/components/leftContainer.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:43:23
 * @FilePath: \bigScreen\src\views\statistics\components\leftContainer.vue
 * @LastEditTime: 2024-11-05 16:33:44
 * @FilePath: \bigScreen\src\views\survey\components\leftContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -16,31 +16,37 @@

<template>
  <div class="left-container">
    <div class="data box">
    <div class="data box h0 flex-1 flex f-d-c">
      <title-box>
        <template #titleName>
          救援队伍统计
        </template>
      </title-box>
      <data-content></data-content>
      <div class="content-box">
        <data-content></data-content>
      </div>
    </div>

    <div class="unit box">
    <div class="unit box h0 flex-1">
      <title-box>
        <template #titleName>
          应急空间统计
        </template>
      </title-box>
      <unit-content></unit-content>
      <div class="content-box">
        <unit-content></unit-content>
      </div>
    </div>

    <div class="fire box">
    <div class="fire box h0 flex-1">
      <title-box>
        <template #titleName>
          风险源统计
        </template>
      </title-box>
      <fire-content></fire-content>
      <div class="content-box">
        <fire-content></fire-content>
      </div>
    </div>
  </div>
</template>

 src/views/survey/components/rightContainer.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-01 11:22:02
 * @LastEditTime: 2024-11-05 17:46:24
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @Description: 
 * 
@@ -19,13 +19,15 @@
  <div class="mt-10 w100 h100 flex f-d-c a-i-c j-c-s-p"></div>

  <div class="right-container">
    <div class="h0 fire-source box">
    <div class="box">
      <title-box>
        <template #titleName>
          园区简介
        </template>
      </title-box>
      <fire-source></fire-source>
      <div class="content-box">
        <fire-source></fire-source>
      </div>
    </div>

    <!-- <div class="fire-trend box">
@@ -38,37 +40,19 @@
    </div> -->


    <div class="h0 occur-statistics box">
    <div class="h0 flex-1 box">
      <title-box>
        <template #titleName>
          企业名录
        </template>
      </title-box>
      <fire-trend></fire-trend>
      <div class="content-box">
        <fire-trend></fire-trend>
      </div>
    </div>


  </div>
</template>

<style lang="scss" scoped>
.right-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 440px;
  height: 100%;
  pointer-events: auto;

  .fire-source {
    flex: 3;
  }

  .occur-statistics {
    flex: 2;
  }
}
</style>
<style lang="scss" scoped></style>