123

ruoyi-screen/src/components/ScreenChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue"
+import { onMounted, onUnmounted, ref, watch } from "vue"
 import * as echarts from "echarts"
 import "echarts-wordcloud"
 
@@ -14,14 +14,31 @@ const props = defineProps({
 const chartRef = ref(null)
 let chartInstance = null
 let resizeObserver = null
+let resizeTimer = null
+let lastSize = { w: 0, h: 0 }
+
+const DEFAULT_ANIMATION = {
+  animation: true,
+  animationDuration: 1000,
+  animationEasing: 'cubicOut',
+  animationDurationUpdate: 600,
+  animationEasingUpdate: 'cubicOut'
+}
+
+/** 合并默认动画；各页/系列可显式 animation: false 覆盖 */
+function withAnimation(opt) {
+  if (!opt || opt.animation === false) {
+    return opt
+  }
+  return { ...DEFAULT_ANIMATION, ...opt }
+}
 
 /** 写入配置并强制整表替换，避免从「暂无数据」切到真实图表时残留 title */
 function applyOption(opt) {
   if (!chartInstance || !opt) {
     return
   }
-  chartInstance.setOption(opt, { notMerge: true })
-  chartInstance.resize()
+  chartInstance.setOption(withAnimation(opt), { notMerge: true })
 }
 
 /** 在挂载点创建实例并塞入配置 */
@@ -32,18 +49,43 @@ function initChart() {
   if (chartInstance) {
     chartInstance.dispose()
   }
+  lastSize = { w: 0, h: 0 }
   chartInstance = echarts.init(chartRef.value)
   applyOption(props.option)
+  scheduleResize()
 }
 
-/** 外层 div 尺寸变化时重绘，避免缩放过后面糊或留白 */
-function resize() {
-  chartInstance?.resize()
+/** 仅容器尺寸变化时 resize；避免 setOption 后立即 resize 打断入场动画 */
+function resizeIfChanged() {
+  const el = chartRef.value
+  if (!chartInstance || !el) {
+    return
+  }
+  const w = el.clientWidth
+  const h = el.clientHeight
+  if (w <= 0 || h <= 0) {
+    return
+  }
+  if (w === lastSize.w && h === lastSize.h) {
+    return
+  }
+  lastSize = { w, h }
+  chartInstance.resize()
+}
+
+function scheduleResize() {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+  resizeTimer = window.setTimeout(() => {
+    resizeTimer = null
+    resizeIfChanged()
+  }, 80)
 }
 
 onMounted(() => {
   initChart()
-  resizeObserver = new ResizeObserver(() => resize())
+  resizeObserver = new ResizeObserver(() => scheduleResize())
   if (chartRef.value) {
     resizeObserver.observe(chartRef.value)
   }
@@ -53,12 +95,15 @@ watch(
   () => props.option,
   (opt) => {
     applyOption(opt)
-    nextTick(() => resize())
   },
   { deep: true }
 )
 
 onUnmounted(() => {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+    resizeTimer = null
+  }
   resizeObserver?.disconnect()
   resizeObserver = null
   chartInstance?.dispose()

ruoyi-screen/src/views/commonProsperity/index.vue

@@ -192,7 +192,15 @@
             <div class="cp-project-scroll" @scroll="onProjectScroll">
               <div v-if="projectLoading && !projectRows.length" class="cp-project-empty">加载中…</div>
               <div v-else-if="!projectRows.length" class="cp-project-empty">暂无共富项目</div>
-              <div v-for="row in projectRows" :key="row.id" class="cp-project-row">
+              <div
+                v-for="row in projectRows"
+                :key="row.id"
+                class="cp-project-row cp-project-row--clickable"
+                role="button"
+                tabindex="0"
+                @click="openProjectDetail(row)"
+                @keyup.enter="openProjectDetail(row)"
+              >
                 <div class="cp-project-row__main">
                   <div class="cp-project-row__name" :title="row.projectName">
                     {{ row.projectName || '—' }}
@@ -214,11 +222,118 @@
         </div>
       </div>
     </div>
+
+    <Teleport to="body">
+      <div
+        v-if="projectDetailVisible && selectedProject"
+        class="cp-detail-mask"
+        @click.self="closeProjectDetail"
+      >
+        <div class="cp-detail-panel" role="dialog" aria-modal="true">
+          <button type="button" class="cp-detail-close" aria-label="关闭" @click="closeProjectDetail">
+            ×
+          </button>
+          <div class="cp-detail-title">共富项目详情</div>
+          <div class="cp-detail-body">
+            <div class="cp-detail-name">{{ selectedProject.projectName || '—' }}</div>
+            <div class="cp-detail-grid">
+              <div class="cp-detail-item">
+                <span class="cp-detail-label">项目类型</span>
+                <span class="cp-detail-value">{{ selectedProject.projectTypeName || '—' }}</span>
+              </div>
+              <div class="cp-detail-item">
+                <span class="cp-detail-label">实施周期</span>
+                <span class="cp-detail-value">
+                  {{ selectedProject.implStartDate || '—' }} ~ {{ selectedProject.implEndDate || '—' }}
+                </span>
+              </div>
+              <div class="cp-detail-item">
+                <span class="cp-detail-label">发布时间</span>
+                <span class="cp-detail-value">{{ selectedProject.publishTime || '—' }}</span>
+              </div>
+            </div>
+            <div class="cp-detail-block">
+              <div class="cp-detail-label">项目简介</div>
+              <div class="cp-detail-text">{{ selectedProject.introduction || '—' }}</div>
+            </div>
+            <div class="cp-detail-block">
+              <div class="cp-detail-label">项目内容</div>
+              <div class="cp-detail-text">{{ selectedProject.projectContent || '—' }}</div>
+            </div>
+            <div v-if="selectedProject.coverFileUrl" class="cp-detail-block">
+              <div class="cp-detail-label">封面</div>
+              <img
+                class="cp-detail-cover"
+                :src="mediaUrl(selectedProject.coverFileUrl)"
+                alt="封面"
+              />
+            </div>
+            <div v-if="selectedProject.operationImages?.length" class="cp-detail-block">
+              <div class="cp-detail-label">运营图片</div>
+              <div class="cp-detail-carousel">
+                <button
+                  v-if="opImageCount > 1"
+                  type="button"
+                  class="cp-detail-carousel__nav cp-detail-carousel__nav--prev"
+                  aria-label="上一张"
+                  @click="prevOpImage"
+                >
+                  ‹
+                </button>
+                <div class="cp-detail-carousel__viewport">
+                  <div
+                    class="cp-detail-carousel__track"
+                    :style="{ transform: `translateX(-${opImageIndex * 100}%)` }"
+                  >
+                    <div
+                      v-for="(img, idx) in selectedProject.operationImages"
+                      :key="idx"
+                      class="cp-detail-carousel__slide"
+                    >
+                      <img :src="mediaUrl(img.fileUrl)" alt="运营图片" />
+                    </div>
+                  </div>
+                </div>
+                <button
+                  v-if="opImageCount > 1"
+                  type="button"
+                  class="cp-detail-carousel__nav cp-detail-carousel__nav--next"
+                  aria-label="下一张"
+                  @click="nextOpImage"
+                >
+                  ›
+                </button>
+                <div v-if="opImageCount > 1" class="cp-detail-carousel__dots">
+                  <button
+                    v-for="(_, idx) in selectedProject.operationImages"
+                    :key="idx"
+                    type="button"
+                    class="cp-detail-carousel__dot"
+                    :class="{ 'cp-detail-carousel__dot--on': opImageIndex === idx }"
+                    :aria-label="`第 ${idx + 1} 张`"
+                    @click="goOpImage(idx)"
+                  />
+                </div>
+              </div>
+            </div>
+            <div v-if="selectedProject.videoFileUrl" class="cp-detail-block">
+              <div class="cp-detail-label">运营视频</div>
+              <video
+                class="cp-detail-video"
+                :src="mediaUrl(selectedProject.videoFileUrl)"
+                controls
+                preload="metadata"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
 import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
 import { getCommonProsperityDashboard, getCommonProsperityProjects } from '@/api/commonProsperity'
@@ -251,6 +366,13 @@ const projectTotal = ref(0)
 const projectLoadingMore = ref(false)
 const projectScrollLoading = ref(false)
 
+const projectDetailVisible = ref(false)
+const selectedProject = ref(null)
+const opImageIndex = ref(0)
+let opImageTimer = null
+
+const opImageCount = computed(() => selectedProject.value?.operationImages?.length ?? 0)
+
 const summary = computed(() =>
   achievement.value?.hasData ? achievement.value.summary : null
 )
@@ -406,6 +528,75 @@ function onProjectScroll(event) {
   loadMoreProjects()
 }
 
+function mediaUrl(url) {
+  if (!url) {
+    return ''
+  }
+  if (/^https?:\/\//i.test(url)) {
+    return url
+  }
+  const base = import.meta.env.VITE_APP_BASE_API || ''
+  return url.startsWith('/') ? `${base}${url}` : `${base}/${url}`
+}
+
+function openProjectDetail(row) {
+  if (!row) {
+    return
+  }
+  selectedProject.value = row
+  opImageIndex.value = 0
+  projectDetailVisible.value = true
+  startOpImageAutoplay()
+}
+
+function closeProjectDetail() {
+  stopOpImageAutoplay()
+  projectDetailVisible.value = false
+  selectedProject.value = null
+  opImageIndex.value = 0
+}
+
+function stopOpImageAutoplay() {
+  if (opImageTimer) {
+    clearInterval(opImageTimer)
+    opImageTimer = null
+  }
+}
+
+function startOpImageAutoplay() {
+  stopOpImageAutoplay()
+  if (!projectDetailVisible.value || opImageCount.value <= 1) {
+    return
+  }
+  opImageTimer = window.setInterval(() => {
+    opImageIndex.value = (opImageIndex.value + 1) % opImageCount.value
+  }, 4000)
+}
+
+function prevOpImage() {
+  if (opImageCount.value <= 1) {
+    return
+  }
+  opImageIndex.value = (opImageIndex.value - 1 + opImageCount.value) % opImageCount.value
+  startOpImageAutoplay()
+}
+
+function nextOpImage() {
+  if (opImageCount.value <= 1) {
+    return
+  }
+  opImageIndex.value = (opImageIndex.value + 1) % opImageCount.value
+  startOpImageAutoplay()
+}
+
+function goOpImage(idx) {
+  if (idx < 0 || idx >= opImageCount.value) {
+    return
+  }
+  opImageIndex.value = idx
+  startOpImageAutoplay()
+}
+
 function onYearChange() {
   fetchDashboard()
 }
@@ -413,6 +604,10 @@ function onYearChange() {
 onMounted(() => {
   fetchDashboard()
 })
+
+onUnmounted(() => {
+  stopOpImageAutoplay()
+})
 </script>
 
 <style scoped>
@@ -791,6 +986,19 @@ onMounted(() => {
   border-bottom: 1px solid rgba(61, 217, 176, 0.15);
 }
 
+.cp-project-row--clickable {
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.cp-project-row--clickable:hover {
+  background: rgba(69, 240, 184, 0.08);
+}
+
+.cp-project-row--clickable:active {
+  background: rgba(69, 240, 184, 0.14);
+}
+
 .cp-project-row__name {
   font-size: 12px;
   color: #e8eef5;
@@ -832,4 +1040,235 @@ onMounted(() => {
   font-size: 10px;
   color: #6a9f90;
 }
+
+.cp-detail-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: rgba(2, 18, 15, 0.72);
+  backdrop-filter: blur(2px);
+}
+
+.cp-detail-panel {
+  position: relative;
+  width: min(920px, calc(100vw - 48px));
+  max-height: min(82vh, 720px);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 1px solid rgba(69, 240, 184, 0.45);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(4, 48, 40, 0.96) 0%, rgba(3, 28, 24, 0.98) 100%);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+}
+
+.cp-detail-close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  font-size: 22px;
+  line-height: 1;
+  color: #a8d4c8;
+  background: rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+}
+
+.cp-detail-close:hover {
+  color: #e8eef5;
+  background: rgba(69, 240, 184, 0.15);
+}
+
+.cp-detail-title {
+  flex-shrink: 0;
+  padding: 14px 48px 10px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  border-bottom: 1px solid rgba(61, 217, 176, 0.2);
+}
+
+.cp-detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px 28px 22px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(69, 240, 184, 0.45) rgba(4, 30, 26, 0.35);
+}
+
+.cp-detail-body::-webkit-scrollbar {
+  width: 4px;
+}
+
+.cp-detail-body::-webkit-scrollbar-thumb {
+  background: rgba(69, 240, 184, 0.42);
+  border-radius: 2px;
+}
+
+.cp-detail-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #ecd27b;
+  line-height: 1.4;
+  margin-bottom: 12px;
+}
+
+.cp-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px 24px;
+  margin-bottom: 14px;
+}
+
+.cp-detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.cp-detail-label {
+  font-size: 11px;
+  color: #6a9f90;
+}
+
+.cp-detail-value {
+  font-size: 12px;
+  color: #e8eef5;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.cp-detail-block {
+  margin-bottom: 14px;
+}
+
+.cp-detail-block:last-child {
+  margin-bottom: 0;
+}
+
+.cp-detail-block > .cp-detail-label {
+  margin-bottom: 6px;
+}
+
+.cp-detail-text {
+  font-size: 12px;
+  line-height: 1.6;
+  color: #c8ddd6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cp-detail-cover {
+  display: block;
+  width: 320px;
+  max-width: 100%;
+  height: auto;
+  max-height: 240px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid rgba(61, 217, 176, 0.25);
+}
+
+.cp-detail-carousel {
+  position: relative;
+  width: 480px;
+  max-width: 100%;
+}
+
+.cp-detail-carousel__viewport {
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid rgba(61, 217, 176, 0.25);
+  background: rgba(4, 30, 26, 0.5);
+}
+
+.cp-detail-carousel__track {
+  display: flex;
+  transition: transform 0.45s ease;
+}
+
+.cp-detail-carousel__slide {
+  flex: 0 0 100%;
+  height: 240px;
+}
+
+.cp-detail-carousel__slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cp-detail-carousel__nav {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  font-size: 28px;
+  line-height: 1;
+  color: #e8eef5;
+  background: rgba(4, 30, 26, 0.65);
+  cursor: pointer;
+}
+
+.cp-detail-carousel__nav:hover {
+  background: rgba(69, 240, 184, 0.25);
+  color: #5ef0c8;
+}
+
+.cp-detail-carousel__nav--prev {
+  left: 6px;
+}
+
+.cp-detail-carousel__nav--next {
+  right: 6px;
+}
+
+.cp-detail-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.cp-detail-carousel__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(168, 212, 200, 0.35);
+  cursor: pointer;
+}
+
+.cp-detail-carousel__dot--on {
+  background: #5ef0c8;
+  box-shadow: 0 0 6px rgba(94, 240, 200, 0.55);
+}
+
+.cp-detail-video {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  border-radius: 6px;
+  background: #000;
+}
 </style>