风险管理

2026-01-06 12:08:08 +08:00
parent 1354380b10
commit f909230546
7 changed files with 870 additions and 319 deletions
--- a/src/views/screen/companyScreen.vue
+++ b/src/views/screen/companyScreen.vue
@@ -2,10 +2,15 @@
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header-container">
-      <div class="header-left">
-        <img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
-        <div class="back-button"> {{ selectedPark }} </div>
-      </div>
+      <HeaderSelector
+        back-button-type="image"
+        :show-back-button="true"
+        :on-back="returnToHeadquarters"
+        :display-text="selectedPark"
+        :clickable="false"
+        :show-selector-indicator="false"
+        selector-type="none"
+      />
      <h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
      <div class="date-wrapper">
        <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -257,6 +262,7 @@ import WeatherWarning from './components/WeatherWarning.vue'
 import AlertList from './components/AlertList.vue'
 import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
 import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
+import HeaderSelector from './components/HeaderSelector.vue'

 interface PointPosition {
  label: string
--- a/src/views/screen/components/HeaderSelector.vue
+++ b/src/views/screen/components/HeaderSelector.vue
@@ -0,0 +1,398 @@
+<template>
+  <div :class="['header-left', `theme-${theme}`]">
+    <!-- 返回按钮 - PNG图片类型（暗色系主题使用，保持原样） -->
+    <img
+      v-if="backButtonType === 'image' && showBackButton && theme === 'dark'"
+      class="back-img"
+      @click="handleBack"
+      src="@/assets/images/screen/back_image.png"
+    />
+    <!-- 返回按钮 - SVG图片类型（亮色系主题使用，支持主题颜色） -->
+    <svg
+      v-if="backButtonType === 'image' && showBackButton && theme === 'light'"
+      class="back-svg"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="handleBack"
+    >
+      <path
+        d="M620.8 348.16H276.48l102.4-102.4c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L197.12 354.56c-5.12 5.12-7.68 11.52-7.68 17.92 0 6.4 2.56 12.8 7.68 17.92l144.64 144.64c10.24 10.24 25.6 10.24 35.84 0 10.24-10.24 10.24-25.6 0-35.84L277.76 399.36h343.04C716.8 399.36 793.6 476.16 793.6 572.16S716.8 744.96 620.8 744.96H358.4c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h262.4a223.4368 223.4368 0 0 0 224-224A223.4368 223.4368 0 0 0 620.8 348.16z"
+        :fill="svgFillColor"
+      />
+    </svg>
+    <!-- 返回按钮 - 图标类型 -->
+    <el-icon
+      v-if="backButtonType === 'icon' && showBackButton"
+      class="back-arrow"
+      @click="handleBack"
+    >
+      <ArrowLeft />
+    </el-icon>
+    <!-- 文本按钮/显示 -->
+    <div
+      v-if="displayText"
+      :class="[
+        'back-button',
+        {
+          'clickable': clickable,
+          'non-clickable': !clickable
+        }
+      ]"
+      @click="handleTextClick"
+    >
+      {{ displayText }}
+      <span v-if="showSelectorIndicator">···</span>
+    </div>
+  </div>
+
+  <!-- 区域/园区选择弹窗 -->
+  <RegionSelector
+    v-model="selectorVisible"
+    :modelSelected="selectedValue"
+    :regions="options"
+    @change="handleSelectorChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowLeft } from '@element-plus/icons-vue'
+import RegionSelector from './RegionSelector.vue'
+import { getTableList } from '@/api/design/report'
+
+interface OptionItem {
+  name: string
+  code: string
+}
+
+interface Props {
+  // 返回按钮类型：'image' | 'icon' | 'none'
+  backButtonType?: 'image' | 'icon' | 'none'
+  // 是否显示返回按钮
+  showBackButton?: boolean
+  // 返回按钮点击事件
+  onBack?: () => void
+  // 显示的文本
+  displayText?: string
+  // 文本是否可点击
+  clickable?: boolean
+  // 是否显示选择器指示器（···）
+  showSelectorIndicator?: boolean
+  // 选择器类型：'region' | 'park' | 'none'
+  selectorType?: 'region' | 'park' | 'none'
+  // 选择器选项（如果不提供，会根据 selectorType 自动获取）
+  options?: OptionItem[]
+  // 当前选中的值
+  selectedValue?: string
+  // 选择器变化事件
+  onSelectorChange?: (item: OptionItem) => void
+  // 区域代码（用于获取园区列表）
+  regionCode?: string
+  // 主题：'light' | 'dark'
+  theme?: 'light' | 'dark'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  backButtonType: 'none',
+  showBackButton: false,
+  clickable: true,
+  showSelectorIndicator: false,
+  selectorType: 'none',
+  options: () => [],
+  selectedValue: '',
+  regionCode: '',
+  theme: 'dark'
+})
+
+const emit = defineEmits<{
+  selectorChange: [item: OptionItem]
+}>()
+
+const router = useRouter()
+
+const selectorVisible = ref(false)
+const options = ref<OptionItem[]>(props.options || [])
+
+// 根据主题计算 SVG 填充颜色
+const svgFillColor = computed(() => {
+  return props.theme === 'light' ? '#409eff' : '#ffffff'
+})
+
+// 监听 props.options 的变化
+watch(() => props.options, (newOptions) => {
+  if (newOptions && newOptions.length > 0) {
+    options.value = newOptions
+  }
+}, { immediate: true, deep: true })
+
+// 缓存工具函数
+const CACHE_KEY = 'shared_regionOption_cache'
+
+interface CacheData {
+  records: any[]
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      return cacheData.records
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
+// 初始化选项数据 - 统一从内部获取，不再依赖外部传入
+const initOptions = async () => {
+  // 如果外部传入了 options，优先使用（保留兼容性）
+  if (props.options && props.options.length > 0) {
+    options.value = props.options
+    return
+  }
+
+  if (props.selectorType === 'none') {
+    return
+  }
+
+  try {
+    // 先检查缓存
+    const cachedRecords = getCachedRegionOption()
+    let records = cachedRecords
+
+    if (!records || records.length === 0) {
+      // 缓存不存在或已过期，调用接口
+      const result = await getTableList('park_info_list')
+      records = result.records || []
+
+      if (records && records.length > 0) {
+        // 保存到缓存
+        setCachedRegionOption(records)
+      }
+    }
+
+    if (records && records.length > 0) {
+      if (props.selectorType === 'region') {
+        // 区域选择：去重region字段
+        const regionMap = new Map()
+        records.forEach((el: any) => {
+          if (!regionMap.has(el.region)) {
+            regionMap.set(el.region, {
+              name: el.region,
+              code: el.region_id
+            })
+          }
+        })
+        options.value = Array.from(regionMap.values())
+      } else if (props.selectorType === 'park') {
+        // 园区选择：根据regionCode过滤，去重park_name字段
+        if (!props.regionCode) {
+          // 如果 regionCode 还没有值，等待它被设置
+          console.log('等待 regionCode 设置...')
+          return
+        }
+        const parkMap = new Map()
+        const filteredRecords = records.filter((el: any) => el.region_id == props.regionCode)
+        if (filteredRecords.length === 0) {
+          console.warn(`未找到 regionCode 为 ${props.regionCode} 的园区数据`)
+        }
+        filteredRecords.forEach((el: any) => {
+          if (!parkMap.has(el.park_name)) {
+            parkMap.set(el.park_name, {
+              name: el.park_name,
+              code: el.park_code
+            })
+          }
+        })
+        options.value = Array.from(parkMap.values())
+        console.log('园区选项已更新:', options.value)
+      }
+    }
+  } catch (error) {
+    console.error('初始化选项数据失败:', error)
+  }
+}
+
+// 处理返回按钮点击
+const handleBack = () => {
+  if (props.onBack) {
+    props.onBack()
+  } else {
+    router.back()
+  }
+}
+
+// 处理文本点击
+const handleTextClick = () => {
+  if (!props.clickable) {
+    return
+  }
+
+  if (props.selectorType !== 'none') {
+    selectorVisible.value = true
+  }
+}
+
+// 处理选择器变化
+const handleSelectorChange = (item: OptionItem) => {
+  if (props.onSelectorChange) {
+    props.onSelectorChange(item)
+  }
+  // 同时发出事件，供父组件使用 @selector-change 监听
+  emit('selectorChange', item)
+}
+
+onMounted(() => {
+  initOptions()
+})
+
+// 监听 regionCode 的变化，当它变化时重新初始化选项（用于园区选择）
+watch(() => props.regionCode, (newRegionCode) => {
+  if (props.selectorType === 'park' && newRegionCode) {
+    initOptions()
+  }
+}, { immediate: false })
+</script>
+
+<style scoped lang="scss">
+.header-left {
+  display: flex;
+  padding-left: 1vw;
+  line-height: 80px;
+  flex: 1;
+  align-items: center;
+
+  .back-img {
+    height: 3vh;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .back-svg {
+    height: 3vh;
+    width: auto;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .back-arrow {
+    font-size: 20px;
+    color: #409eff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #79bbff;
+      transform: translateX(-2px);
+    }
+  }
+
+  .back-button {
+    display: inline-flex;
+    height: 2vh;
+    min-width: 6vw;
+    padding: 4px 16px;
+    margin-left: 0.5vw;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    &.non-clickable {
+      cursor: default;
+    }
+
+    span {
+      font-size: 18px;
+      line-height: 1;
+    }
+  }
+
+  // 暗色系主题（默认）
+  &.theme-dark {
+    .back-button {
+      background: rgb(13 24 84 / 80%);
+      border: 1px solid rgb(59 130 246 / 40%);
+
+      &:hover {
+        background: rgb(59 130 246 / 30%);
+        border-color: rgb(59 130 246 / 60%);
+      }
+    }
+  }
+
+  // 亮色系主题 - 只改颜色，保持UI结构
+  &.theme-light {
+    .back-button {
+      background: #409eff;
+      border: 1px solid #e5e7eb;
+
+      &:hover {
+        background: #79bbff;
+        border-color: #cbd5e1;
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (width <= 1024px) {
+  .header-left .back-button {
+    min-width: 8vw;
+    font-size: 0.8rem;
+  }
+}
+
+@media (width <= 768px) {
+  .header-left {
+    line-height: 70px;
+
+    .back-button {
+      min-width: 12vw;
+      padding: 3px 12px;
+      font-size: 0.7rem;
+    }
+  }
+}
+
+@media (width <= 480px) {
+  .header-left {
+    line-height: 60px;
+
+    .back-button {
+      min-width: 15vw;
+      padding: 2px 10px;
+      font-size: 0.65rem;
+    }
+  }
+}
+</style>
+
--- a/src/views/screen/mainScreen.vue
+++ b/src/views/screen/mainScreen.vue
@@ -2,11 +2,16 @@
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header-container">
-      <div class="header-left">
-        <div class="back-button" @click="openRegionSelector"> 集团
-          <span>···</span>
-        </div>
-      </div>
+      <HeaderSelector
+        back-button-type="none"
+        :show-back-button="false"
+        display-text="集团"
+        :clickable="true"
+        :show-selector-indicator="true"
+        selector-type="region"
+        :selected-value="selectedRegion"
+        @selector-change="onRegionChange"
+      />
      <h1 class="header-title">总部综合监控大屏</h1>
      <div class="date-wrapper">
        <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -41,17 +46,13 @@
    </div>
  </div>

-  <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion"
-                  :regions="regionOption"
-                  @change="onRegionChange"/>
 </template>

 <script setup lang="ts">
 import {getTableList, getTableData, getWorkOrderStatistics} from './report'
 import {ref, onMounted, watch, onUnmounted} from 'vue'
 import {useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'

@@ -80,7 +81,6 @@ const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)

@@ -201,7 +201,6 @@ const updateAllCounts = (counts: {
 // 路由
 const router = useRouter()

-const regionOption = ref<RegionItem[]>([])
 // 定时器ID
 const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
 const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -280,21 +279,6 @@ onMounted(async () => {
  }

  if (records && records.length > 0) {
-    // 去重region字段，使用Map来确保唯一性
-    const regionMap = new Map()
-    records.forEach(el => {
-      if (!regionMap.has(el.region)) {
-        regionMap.set(el.region, {
-          name: el.region,
-          code: el.region_id // 使用region_id作为code
-        })
-      }
-    })
-    // 转换为数组
-    regionOption.value = Array.from(regionMap.values())
-
-    console.log('regionOption.value>>>>', regionOption.value);
-
    // 将园区信息去重
    const parkMap = new Map();
    records.forEach(el => {
@@ -717,11 +701,6 @@ const onRegionChange = (item: RegionItem): void => {
  })
 }

-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
  const now = new Date()
--- a/src/views/screen/regionScreen.vue
+++ b/src/views/screen/regionScreen.vue
@@ -2,13 +2,18 @@
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header-container">
-      <div class="header-left">
-        <img class="back-img" @click="returnToHeadquarters"
-             src="@/assets/images/screen/back_image.png"/>
-        <div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
-          <span>···</span>
-        </div>
-      </div>
+      <HeaderSelector
+        back-button-type="image"
+        :show-back-button="true"
+        :on-back="returnToHeadquarters"
+        :display-text="selectedRegion"
+        :clickable="true"
+        :show-selector-indicator="true"
+        selector-type="park"
+        :selected-value="selectedPark"
+        :region-code="query.regionCode"
+        @selector-change="onRegionChange"
+      />
      <h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
      <div class="date-wrapper">
        <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -44,17 +49,13 @@
    </div>
  </div>

-  <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark"
-                  :regions="regionOption"
-                  @change="onRegionChange"/>
 </template>

 <script setup lang="ts">
 import {getTableList, getTableData, getWorkOrderStatistics} from './report'
 import {ref, onMounted, watch, onUnmounted} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'

@@ -82,7 +83,6 @@ const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)

@@ -202,7 +202,6 @@ const updateAllCounts = (counts: {
 const router = useRouter()
 const route = useRoute()

-const regionOption = ref<RegionItem[]>([])
 const selectedPark = ref<string>('')
 const parkValue = ref<string>('')
 // 定时器ID
@@ -304,20 +303,20 @@ onMounted(async () => {
          })
        }
      })
-    // 转换为数组
-    regionOption.value = Array.from(regionMap.values())
-    console.log('regionOption.value>>>>', regionOption.value);
-
-    query.campus_id = regionOption.value.map(el => el.code).join()
+    // 转换为数组并设置 campus_id
+    const regionArray = Array.from(regionMap.values())
+    query.campus_id = regionArray.map(el => el.code).join()
  }
-  // 暂时先放在这里
-  dashboardData.value.hiddenDangerData.general = 0
-  dashboardData.value.hiddenDangerData.major = 0
-  dashboardData.value.hiddenDangerData.progress.overdue = 0
-  dashboardData.value.hiddenDangerData.progress.processed = 0
-  dashboardData.value.hiddenDangerData.progress.processing = 0
-  // 初始化数据
+  // 初始化数据 - 先加载数据，再设置初始值
  await loadDashboardData()
+  // 暂时先放在这里 - 确保 dashboardData.value 已初始化后再访问
+  if (dashboardData.value && dashboardData.value.hiddenDangerData) {
+    dashboardData.value.hiddenDangerData.general = 0
+    dashboardData.value.hiddenDangerData.major = 0
+    dashboardData.value.hiddenDangerData.progress.overdue = 0
+    dashboardData.value.hiddenDangerData.progress.processed = 0
+    dashboardData.value.hiddenDangerData.progress.processing = 0
+  }

  // 启动定时器
  timeOut1()
@@ -740,11 +739,6 @@ const onRegionChange = (item: RegionItem): void => {
  })
 }

-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
  const now = new Date()