feat(screen): 更新区域大屏安全指数获取逻辑并优化界面布局
- 在 mainScreen.vue 和 regionScreen.vue 中新增安全指数独立报表获取逻辑 - 修复 regionScreen.vue 中的模板标签格式和属性换行问题-优化 regionScreen.vue 中的 CSS 背景图片设置和布局结构 - 移除 mainScreen.vue 中未使用的 echarts 日志导入 - 调整多个组件标签的属性排列以提高可读性 -优化 regionScreen.vue 中的数据处理逻辑和查询参数传递方式- 清理 regionScreen.vue 中多余的空行和样式代码
This commit is contained in:
@@ -60,6 +60,7 @@ import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
|||||||
import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
|
import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
|
||||||
import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
|
import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
|
||||||
import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
|
import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
|
||||||
|
import {error} from "echarts/types/src/util/log";
|
||||||
|
|
||||||
// 类型定义
|
// 类型定义
|
||||||
interface AlertItem {
|
interface AlertItem {
|
||||||
@@ -484,7 +485,16 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
_data2.general = Number(res.records[0].general)
|
_data2.general = Number(res.records[0].general)
|
||||||
_data2.major = Number(res.records[0].major)
|
_data2.major = Number(res.records[0].major)
|
||||||
|
|
||||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
// 安全指数另算,再起一个报表
|
||||||
|
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
|
// 在这里添加获取安全指数的逻辑
|
||||||
|
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||||
|
if (res.records && res.records.length > 0) {
|
||||||
|
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取隐患排查治理数据失败:', error)
|
||||||
|
})
|
||||||
|
|
||||||
// 获取隐患排查治理处理进度数据
|
// 获取隐患排查治理处理进度数据
|
||||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
<img class="back-img" @click="returnToHeadquarters"
|
||||||
|
src="@/assets/images/screen/back_image.png"/>
|
||||||
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
|
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
|
||||||
<span>···</span>
|
<span>···</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -16,39 +17,44 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 天气预报 -->
|
<!-- 天气预报 -->
|
||||||
<WeatherWarning />
|
<WeatherWarning/>
|
||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
<div class="content-container">
|
<div class="content-container">
|
||||||
<div class="left-wrapper">
|
<div class="left-wrapper">
|
||||||
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
||||||
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
||||||
:externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
|
:externalStaffCount="dashboardData?.externalStaffCount || 0"
|
||||||
:parkStatistics="dashboardData?.parkStatistics" />
|
:visitorCount="dashboardData?.visitorCount || 0"
|
||||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
:parkStatistics="dashboardData?.parkStatistics"/>
|
||||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||||
|
:park="parkValue"
|
||||||
|
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-wrapper">
|
<div class="right-wrapper">
|
||||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
<HighRiskAlertPanel :alertData="dashboardData?.alertData"
|
||||||
:sourceIndex="sourceIndex" />
|
:alertDetails="dashboardData?.alertData.details"
|
||||||
|
:sourceIndex="sourceIndex"/>
|
||||||
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||||
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
|
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
||||||
|
:sourceIndex="sourceIndex"/>
|
||||||
</div>
|
</div>
|
||||||
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
|
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 区域选择弹窗 -->
|
<!-- 区域选择弹窗 -->
|
||||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark" :regions="regionOption"
|
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark"
|
||||||
@change="onRegionChange" />
|
:regions="regionOption"
|
||||||
|
@change="onRegionChange"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getTableList, getTableData } from './report'
|
import {getTableList, getTableData} from './report'
|
||||||
import { ref, onMounted, watch, onUnmounted } from 'vue'
|
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
import RegionSelector from './components/RegionSelector.vue'
|
import RegionSelector from './components/RegionSelector.vue'
|
||||||
import WeatherWarning from './components/WeatherWarning.vue'
|
import WeatherWarning from './components/WeatherWarning.vue'
|
||||||
import { getDashboardData, getAlertDetails, type DashboardData } from '@/api/dashboard'
|
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
|
||||||
|
|
||||||
import OverviewPanel from './components/OverviewPanel.vue'
|
import OverviewPanel from './components/OverviewPanel.vue'
|
||||||
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||||
@@ -225,7 +231,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let { records } = await getTableList(
|
let {records} = await getTableList(
|
||||||
'park_info_list'
|
'park_info_list'
|
||||||
)
|
)
|
||||||
// records = [
|
// records = [
|
||||||
@@ -252,7 +258,9 @@ onMounted(async () => {
|
|||||||
// 去重region字段,使用Map来确保唯一性
|
// 去重region字段,使用Map来确保唯一性
|
||||||
const regionMap = new Map()
|
const regionMap = new Map()
|
||||||
records.filter((el) => el.region_id == query.regionCode)
|
records.filter((el) => el.region_id == query.regionCode)
|
||||||
.map(el => { return el })
|
.map(el => {
|
||||||
|
return el
|
||||||
|
})
|
||||||
.forEach(el => {
|
.forEach(el => {
|
||||||
if (!regionMap.has(el.park_name)) {
|
if (!regionMap.has(el.park_name)) {
|
||||||
regionMap.set(el.park_name, {
|
regionMap.set(el.park_name, {
|
||||||
@@ -480,7 +488,16 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
_data2.general = Number(res.records[0].general)
|
_data2.general = Number(res.records[0].general)
|
||||||
_data2.major = Number(res.records[0].major)
|
_data2.major = Number(res.records[0].major)
|
||||||
|
|
||||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
// 安全指数另算,再起一个报表
|
||||||
|
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
|
// 在这里添加获取安全指数的逻辑
|
||||||
|
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||||
|
if (res.records && res.records.length > 0) {
|
||||||
|
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取隐患排查治理数据失败:', error)
|
||||||
|
})
|
||||||
|
|
||||||
// 获取隐患排查治理处理进度数据
|
// 获取隐患排查治理处理进度数据
|
||||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||||
@@ -571,7 +588,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
|||||||
// 根据不同的tab请求不同的接口
|
// 根据不同的tab请求不同的接口
|
||||||
getTableList(
|
getTableList(
|
||||||
code,
|
code,
|
||||||
{ ...query, activeTab: tab }
|
{...query, activeTab: tab}
|
||||||
).then(response => {
|
).then(response => {
|
||||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
if (response.records && response.records.length > 0) {
|
if (response.records && response.records.length > 0) {
|
||||||
@@ -620,7 +637,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
|||||||
// 根据不同的tab请求不同的接口
|
// 根据不同的tab请求不同的接口
|
||||||
getTableList(
|
getTableList(
|
||||||
code,
|
code,
|
||||||
{ ...query, activeTab: tab }
|
{...query, activeTab: tab}
|
||||||
).then(response => {
|
).then(response => {
|
||||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
if (response.records && response.records.length > 0) {
|
if (response.records && response.records.length > 0) {
|
||||||
@@ -650,7 +667,7 @@ const onRegionChange = (item: RegionItem): void => {
|
|||||||
parkValue.value = item.code
|
parkValue.value = item.code
|
||||||
router.push({
|
router.push({
|
||||||
path: '/screen/company',
|
path: '/screen/company',
|
||||||
query: { parkName: item.name, parkCode: item.code }
|
query: {parkName: item.name, parkCode: item.code}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1219,23 +1236,20 @@ const timeOut1 = (): void => {
|
|||||||
|
|
||||||
.left-top {
|
.left-top {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
background-image:
|
background-image: url('@/assets/images/screen/left_top_img.png'),
|
||||||
url('@/assets/images/screen/left_top_img.png'),
|
url('@/assets/images/screen/left_center_img.png'),
|
||||||
url('@/assets/images/screen/left_center_img.png'),
|
url('@/assets/images/screen/left_bottom_img.png');
|
||||||
url('@/assets/images/screen/left_bottom_img.png');
|
background-position: top center,
|
||||||
background-position:
|
left center,
|
||||||
top center,
|
bottom center;
|
||||||
left center,
|
|
||||||
bottom center;
|
|
||||||
|
|
||||||
/* 设置大小,注意中间的背景图应该覆盖整个容器 */
|
/* 设置大小,注意中间的背景图应该覆盖整个容器 */
|
||||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||||
|
|
||||||
/* 设置位置 */
|
/* 设置位置 */
|
||||||
background-size:
|
background-size: 100% 90px,
|
||||||
100% 90px,
|
cover,
|
||||||
cover,
|
100% 68px;
|
||||||
100% 68px;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
/* 设置重复方式 */
|
/* 设置重复方式 */
|
||||||
@@ -1396,23 +1410,20 @@ const timeOut1 = (): void => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.left-bottom {
|
.left-bottom {
|
||||||
background-image:
|
background-image: url('@/assets/images/screen/left_top_2_img.png'),
|
||||||
url('@/assets/images/screen/left_top_2_img.png'),
|
url('@/assets/images/screen/left_center_img.png'),
|
||||||
url('@/assets/images/screen/left_center_img.png'),
|
url('@/assets/images/screen/left_bottom_img.png');
|
||||||
url('@/assets/images/screen/left_bottom_img.png');
|
background-position: top center,
|
||||||
background-position:
|
left center,
|
||||||
top center,
|
bottom center;
|
||||||
left center,
|
|
||||||
bottom center;
|
|
||||||
|
|
||||||
/* 设置大小,注意中间的背景图应该覆盖整个容器 */
|
/* 设置大小,注意中间的背景图应该覆盖整个容器 */
|
||||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||||
|
|
||||||
/* 设置位置 */
|
/* 设置位置 */
|
||||||
background-size:
|
background-size: 100% 90px,
|
||||||
100% 90px,
|
cover,
|
||||||
cover,
|
100% 68px;
|
||||||
100% 68px;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
/* 设置重复方式 */
|
/* 设置重复方式 */
|
||||||
@@ -1462,8 +1473,6 @@ const timeOut1 = (): void => {
|
|||||||
row-gap: 1rem;
|
row-gap: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-container {
|
.center-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user