From 91049bfd147ab0af4a81da8ba6cc90dbfc04fc52 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Thu, 31 Oct 2024 15:48:28 +0800
Subject: [PATCH] 首页优化
---
src/views/survey/components/box/fireContent.vue | 54 +++++++++-
src/views/survey/components/box/dataContent.vue | 10 +
src/views/survey/components/box/fireSource.vue | 127 +++++++++++++++++++++---
package.json | 9 +
src/views/survey/components/box/fireTrend.vue | 37 ++++--
src/views/survey/components/leftContainer.vue | 4
src/views/survey/components/box/unitContent.vue | 50 ++++++++-
src/App.vue | 7 +
8 files changed, 241 insertions(+), 57 deletions(-)
diff --git a/package.json b/package.json
index da41c69..cd969c2 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,16 @@
"@element-plus/icons-vue": "^2.3.1",
"@fortawesome/fontawesome-free": "^6.6.0",
"axios": "^1.7.7",
+ "crypto-js": "^4.1.1",
+ "echarts": "^5.5.1",
"element-plus": "^2.8.6",
+ "js-base64": "^3.7.4",
+ "js-md5": "^0.7.3",
"nprogress": "^0.2.0",
"pinia": "^2.2.4",
"pinia-plugin-persist": "^1.0.0",
"vue": "^3.5.12",
- "vue-router": "^4.4.5",
- "crypto-js": "^4.1.1",
- "js-base64": "^3.7.4",
- "js-md5": "^0.7.3"
+ "vue-router": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-basic-ssl": "^1.1.0",
diff --git a/src/App.vue b/src/App.vue
index 68dc6d1..c2afb56 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,13 @@
* Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<script setup>
+
+import { provide } from 'vue'
+
+import * as echarts from 'echarts'
+
+provide("echarts", echarts)
+
</script>
<template>
diff --git a/src/views/survey/components/box/dataContent.vue b/src/views/survey/components/box/dataContent.vue
index 7e5cfcc..bed1169 100644
--- a/src/views/survey/components/box/dataContent.vue
+++ b/src/views/survey/components/box/dataContent.vue
@@ -11,7 +11,7 @@
<script setup>
import publicContent from './publicContent.vue'
-// import { ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
import { getPage } from '../../../../api/indParkInfo'
@@ -26,8 +26,8 @@
function getPages() {
getPage().then(res => {
- parkQy = res.data.data.records
- console.log(res)
+ parkQy.value = res.data.data.records
+ // console.log(res)
}).catch(err => {
console.log(err)
})
@@ -58,11 +58,13 @@
.data-content-item {
display: flex;
- margin: 2px 2px;
+ margin: 2px 10px;
padding: 5px 0;
+ text-indent: 1em;
background-color: #747bff;
justify-content: space-between;
// 超过高度自动显示滚动条
overflow-y: auto;
+ border-radius: 5px;
}
</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 7152a88..8cdcd67 100644
--- a/src/views/survey/components/box/fireContent.vue
+++ b/src/views/survey/components/box/fireContent.vue
@@ -9,17 +9,57 @@
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
-import publicContent from './publicContent.vue'
+// import publicContent from './publicContent.vue'
+
+
+import { inject, reactive } from 'vue'
+
+let $echarts = inject('echarts')
+
+console.log("111111111111111111", $echarts)
+
+onMounted(() => {
+ let myEcharts = $echarts.init(document.getElementById('fire-content-echarts'))
+ myEcharts.setOption({
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [10, 22, 28, 43, 49],
+ barWidth: '60%'
+ }
+ ]
+ })
+})
</script>
<template>
- <public-content>
- <template #content>
- <div>
+ <!-- <public-content>
+ <template #content> -->
+ <div class="fireContent-box">
+
+ <div>
+ <div class="fire-content-echarts" id="fire-content-echarts">
+
</div>
- </template>
- </public-content>
+
+ </div>
+
+ </div>
+ <!-- </template>
+ </public-content> -->
</template>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.fireContent-box {
+ color: #fff;
+}
+
+.fire-content-echarts {
+ height: 4.5rem
+}
+</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 fe4a4e3..c61bd38 100644
--- a/src/views/survey/components/box/fireSource.vue
+++ b/src/views/survey/components/box/fireSource.vue
@@ -13,9 +13,11 @@
import { getDetail } from '../../../../api/indParkInfo'
-// import { ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
-var parkInfo = reactive({})
+let state = reactive({
+ parkInfo: {}
+})
@@ -27,9 +29,8 @@
// 获取详情
function getData() {
getDetail().then(res => {
- parkInfo = res.data.data
- console.log("************************", parkInfo)
-
+ state.parkInfo = res.data.data
+ // console.log("************************", parkInfo)
}).catch(err => {
console.log(err)
})
@@ -44,33 +45,121 @@
<template #content> -->
<div class="box-content-box">
<div class="box-content">
-
<div>
<div class="box-content-img">
- <img src="../../../../../public/images/YX.png" alt="">
+ <img :src="state.parkInfo.imageUrls" alt="">
</div>
</div>
- <div>
+ <div class="box-content-text-remark">
<div class="box-content-text">
- {{ parkInfo.remark }}
+ {{ state.parkInfo.remark }}
</div>
</div>
</div>
<div class="container">
- <div class="box-content-sj" v-for="(item, index) in 6" :key="index">
- <!-- public\images\雨量站@2x.png -->
+ <div class="box-content-sj">
<img src="../../../../../public/images/雨量站@2x.png" alt="">
<div>
<div class="box-content-ss">
<div>
<div class="box-content-text-title">
- <span class="box-content-text-title-span">2999</span>
+ <span class="box-content-text-title-span">{{ state.parkInfo.plaArea }}</span>
</div>
</div>
<div>
<div class="box-content-text-content">
- <span class="box-content-text-content-span">企业园区</span>
+ <span class="box-content-text-content-span">园区面积 （公顷）</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-content-sj">
+ <img src="../../../../../public/images/雨量站@2x.png" alt="">
+ <div>
+ <div class="box-content-ss">
+ <div>
+ <div class="box-content-text-title">
+ <span class="box-content-text-title-span">{{ state.parkInfo.recNum }}</span>
+ </div>
+ </div>
+ <div>
+ <div class="box-content-text-content">
+ <span class="box-content-text-content-span">救援人员数量</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-content-sj">
+ <img src="../../../../../public/images/雨量站@2x.png" alt="">
+ <div>
+ <div class="box-content-ss">
+ <div>
+ <div class="box-content-text-title">
+ <span class="box-content-text-title-span">{{ state.parkInfo.riskFirmNum }}</span>
+ </div>
+ </div>
+ <div>
+ <div class="box-content-text-content">
+ <span class="box-content-text-content-span">风险企业数量</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-content-sj">
+ <img src="../../../../../public/images/雨量站@2x.png" alt="">
+ <div>
+ <div class="box-content-ss">
+ <div>
+ <div class="box-content-text-title">
+ <span class="box-content-text-title-span">{{ state.parkInfo.proTarNum }}</span>
+ </div>
+ </div>
+ <div>
+ <div class="box-content-text-content">
+ <span class="box-content-text-content-span">保护目标数量</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-content-sj">
+ <img src="../../../../../public/images/雨量站@2x.png" alt="">
+ <div>
+ <div class="box-content-ss">
+ <div>
+ <div class="box-content-text-title">
+ <span class="box-content-text-title-span">{{ state.parkInfo.spaceNum }}</span>
+ </div>
+ </div>
+ <div>
+ <div class="box-content-text-content">
+ <span class="box-content-text-content-span">应急空间数量</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-content-sj">
+ <img src="../../../../../public/images/雨量站@2x.png" alt="">
+ <div>
+ <div class="box-content-ss">
+ <div>
+ <div class="box-content-text-title">
+ <span class="box-content-text-title-span">{{ state.parkInfo.firmNum }}</span>
+ </div>
+ </div>
+ <div>
+ <div class="box-content-text-content">
+ <span class="box-content-text-content-span">企业数量</span>
</div>
</div>
</div>
@@ -118,8 +207,9 @@
.box-content {
display: flex;
justify-content: space-between;
-
}
+
+.box-content-text-remark {}
.content-qy-info {
display: flex;
@@ -130,7 +220,6 @@
.box-content-img img {
margin: 5px;
- width: 120px;
/* 宽度可以根据实际情况调整 */
height: 120px;
}
@@ -142,11 +231,11 @@
.box-content-text {
padding-left: 5px;
- // width: 60%;
- /* 宽度可以根据实际情况调整 */
height: 130px;
- /* 高度可以根据实际情况调整 */
- overflow: hidden;
+ overflow: scroll;
+ // 隐藏滚动条
+ scrollbar-width: none;
+
}
.container {
diff --git a/src/views/survey/components/box/fireTrend.vue b/src/views/survey/components/box/fireTrend.vue
index c141926..13d2e60 100644
--- a/src/views/survey/components/box/fireTrend.vue
+++ b/src/views/survey/components/box/fireTrend.vue
@@ -10,13 +10,13 @@
-->
<script setup>
import publicContent from './publicContent.vue'
-// import { ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
import { getPage } from '../../../../api/indParkInfo'
-var parkQy = ref([])
+let parkQy = ref([])
-var searchQuery = ref('')
+let searchQuery = ref('')
onMounted(() => {
getPages()
@@ -25,7 +25,16 @@
function getPages() {
getPage().then(res => {
- parkQy = res.data.data.records
+ parkQy.value = res.data.data.records
+ console.log(res)
+ }).catch(err => {
+ console.log(err)
+ })
+}
+
+function search() {
+ getPage({ name: searchQuery.value }).then(res => {
+ parkQy.value = res.data.data.records
console.log(res)
}).catch(err => {
console.log(err)
@@ -42,17 +51,14 @@
<div>
<div class="search-container">
<input type="text" v-model="searchQuery" placeholder="请输入企业名称" class="search-input" />
- <button class="search-button">搜索</button>
+ <button class="search-button" @click="search">搜索</button>
</div>
</div>
<div class="data-content-list">
- <div v-for="item in parkQy" :key="item.id">
- <div class="data-content-item">
- <div> {{ item.name }}</div>
- <el-button size="small" type="primary">{{ item.categoryName }}</el-button>
- </div>
-
+ <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>
@@ -73,7 +79,11 @@
}
.data-content-list {
- height: auto;
+ height: 50%;
+ overflow: scroll;
+ // 隐藏滚动条
+ scrollbar-width: none;
+ text-indent: 1em;
}
.search-input {
@@ -101,11 +111,12 @@
.data-content-item {
display: flex;
- margin: 2px 2px;
+ margin: 2px 10px;
padding: 5px 0;
background-color: #747bff;
justify-content: space-between;
// 超过高度自动显示滚动条
overflow-y: auto;
+ border-radius: 5px;
}
</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 7152a88..47fba66 100644
--- a/src/views/survey/components/box/unitContent.vue
+++ b/src/views/survey/components/box/unitContent.vue
@@ -9,17 +9,51 @@
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
-import publicContent from './publicContent.vue'
+// import publicContent from './publicContent.vue'
+
+import { inject } from 'vue'
+
+let $echarts = inject('echarts')
+
+console.log($echarts)
+
+onMounted(() => {
+ let myEcharts = $echarts.init(document.getElementById('unit-content-echarts'))
+ myEcharts.setOption({
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [10, 22, 28, 43, 49],
+ barWidth: '60%'
+ }
+ ]
+ })
+})
+
</script>
<template>
- <public-content>
- <template #content>
- <div>
+ <!-- <public-content>
+ <template #content> -->
+ <div class="unit-content">
+ <div class="unit-content-echarts" id="unit-content-echarts">
- </div>
- </template>
- </public-content>
+ </div>
+ </div>
+ <!-- </template>
+ </public-content> -->
</template>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.unit-content {
+ color: #fff;
+}
+
+.unit-content-echarts {
+ height: 5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/survey/components/leftContainer.vue b/src/views/survey/components/leftContainer.vue
index 56246b7..a3e7ef8 100644
--- a/src/views/survey/components/leftContainer.vue
+++ b/src/views/survey/components/leftContainer.vue
@@ -28,7 +28,7 @@
<div class="unit box">
<title-box>
<template #titleName>
- 入住单位统计
+ 应急物资统计
</template>
</title-box>
<unit-content></unit-content>
@@ -37,7 +37,7 @@
<div class="fire box">
<title-box>
<template #titleName>
- 实时火警事件
+ 风险源统计
</template>
</title-box>
<fire-content></fire-content>
--
Gitblit v1.9.3