From 7bcdaba7faad85bf16bf0f2a1dbd3e390bdb15dd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 05 Nov 2024 21:15:40 +0800
Subject: [PATCH] 救援队伍统计、应急空间统计、风险源统计图表样式初步调整，园区概况布局调整 倾斜模型加载配置微调后续看加载效果 企业名录样式调整
---
src/views/survey/components/box/dataContent.vue | 180 +++++++-----
src/views/survey/components/box/fireSource.vue | 105 +++---
src/views/survey/components/leftContainer.vue | 22 +
src/hooks/useEchartsResize.js | 12
src/styles/page/index.scss | 14
src/views/survey/components/box/unitContent.vue | 60 ++--
src/views/survey/components/rightContainer.vue | 36 -
src/styles/base/paddingStyle.scss | 4
src/views/rs/components/rightContainer.vue | 6
src/views/survey/components/box/fireContent.vue | 164 ++++++++---
/dev/null | 26 -
src/views/survey/components/box/fireTrend.vue | 110 +++----
src/views/rs/components/leftContainer.vue | 12
src/views/layout/components/scomponents/baseMap.vue | 4
src/views/layout/components/scomponents/layersControl.vue | 26 +
15 files changed, 445 insertions(+), 336 deletions(-)
diff --git a/src/hooks/useEchartsResize.js b/src/hooks/useEchartsResize.js
new file mode 100644
index 0000000..82553a1
--- /dev/null
+++ b/src/hooks/useEchartsResize.js
@@ -0,0 +1,12 @@
+
+export function useEchartsResize (echartsResize) {
+ // 在组件挂载时开始观察
+ onMounted(() => {
+ window.addEventListener("resize", echartsResize)
+ })
+
+ // 在组件卸载时停止观察
+ onUnmounted(() => {
+ window.removeEventListener("resize", echartsResize)
+ })
+}
\ No newline at end of file
diff --git a/src/styles/base/paddingStyle.scss b/src/styles/base/paddingStyle.scss
index e5e4302..b76a49f 100644
--- a/src/styles/base/paddingStyle.scss
+++ b/src/styles/base/paddingStyle.scss
@@ -6,6 +6,10 @@
padding: 0 20px;
}
+.p-all-0 {
+ padding: 0px;
+}
+
.p-all-6 {
padding: 6px;
}
diff --git a/src/styles/page/index.scss b/src/styles/page/index.scss
index a6bda6c..a34c74d 100644
--- a/src/styles/page/index.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/views/layout/components/scomponents/baseMap.vue b/src/views/layout/components/scomponents/baseMap.vue
index 2e84c5e..3d8cb0d 100644
--- a/src/views/layout/components/scomponents/baseMap.vue
+++ b/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)
diff --git a/src/views/layout/components/scomponents/layersControl.vue b/src/views/layout/components/scomponents/layersControl.vue
index d24382c..0826c86 100644
--- a/src/views/layout/components/scomponents/layersControl.vue
+++ b/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])
}
diff --git a/src/views/rs/components/leftContainer.vue b/src/views/rs/components/leftContainer.vue
index 0781c33..7d92c6b 100644
--- a/src/views/rs/components/leftContainer.vue
+++ b/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>
diff --git a/src/views/rs/components/rightContainer.vue b/src/views/rs/components/rightContainer.vue
index 67eb54e..3037fd7 100644
--- a/src/views/rs/components/rightContainer.vue
+++ b/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>
diff --git a/src/views/survey/components/box/dataContent.vue b/src/views/survey/components/box/dataContent.vue
index 3c61513..b23ff73 100644
--- a/src/views/survey/components/box/dataContent.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/survey/components/box/fireContent.vue b/src/views/survey/components/box/fireContent.vue
index 4fe904b..6afa14d 100644
--- a/src/views/survey/components/box/fireContent.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/survey/components/box/fireSource.vue b/src/views/survey/components/box/fireSource.vue
index 89233ab..fe9f2a9 100644
--- a/src/views/survey/components/box/fireSource.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/survey/components/box/fireTrend.vue b/src/views/survey/components/box/fireTrend.vue
index d9b6f07..0b1dacb 100644
--- a/src/views/survey/components/box/fireTrend.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/survey/components/box/publicContent.vue b/src/views/survey/components/box/publicContent.vue
deleted file mode 100644
index f247dd4..0000000
--- a/src/views/survey/components/box/publicContent.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2023-03-13 14:54:26
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-11-01 10:35:55
- * @FilePath: \bigScreen\src\views\survey\components\box\publicContent.vue
- * @Description:
- *
- * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
--->
-<script setup>
-
-</script>
-
-<template>
- <div class="content">
- <slot name="content"></slot>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.content {
- padding: 20px 0;
- height: calc(100% - 32px);
-}
-</style>
\ No newline at end of file
diff --git a/src/views/survey/components/box/unitContent.vue b/src/views/survey/components/box/unitContent.vue
index e38a6b6..7e68486 100644
--- a/src/views/survey/components/box/unitContent.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/survey/components/leftContainer.vue b/src/views/survey/components/leftContainer.vue
index 94e09ea..581965a 100644
--- a/src/views/survey/components/leftContainer.vue
+++ b/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>
diff --git a/src/views/survey/components/rightContainer.vue b/src/views/survey/components/rightContainer.vue
index 6932b8a..099cf8b 100644
--- a/src/views/survey/components/rightContainer.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
--
Gitblit v1.9.3