添加屏幕扩展动画

src/views/ProjectScreen/components/leftPage.vue

@@ -4,11 +4,11 @@
       <Title title="项目公告" />
 
       <div class="content">
-        <div class="content_item" v-for="item in 6" :key="item">
+        <div class="content_item" v-for="item in news" :key="item.id">
           <div class="round">
             <div class="sub_round"></div>
           </div>
-          <div class="ellipsis">2025年6月23日 重庆市两江新区广场前期准备与审批完毕区广场前期准备与审批完毕前期准备与审批完毕区广场前期准备与审批完毕</div>
+          <div class="ellipsis">{{ item.title }}</div>
         </div>
       </div>
     </div>
@@ -17,6 +17,7 @@
 
       <div class="map">
         <img src="@/assets/projectLarge/map.svg" alt="">
+        <!-- <div ref="mapChartRef"></div> -->
       </div>
 
       <div class="attendance_tag">
@@ -51,7 +52,20 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import Title from './title.vue'
+import { getScreenNews } from '@/api/projectScreen';
+import { mapOption } from './optionList'
+import * as echarts from 'echarts';
 
+const props = defineProps({
+  projectId: {
+    type: String,
+    default: ''
+  }
+})
+
+let mapChart = null
+const mapChartRef = ref<HTMLDivElement | null>(null);
+const news = ref([])
 const list = ref([
   { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
   { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
@@ -60,20 +74,49 @@ const list = ref([
   { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
   { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
 ])
-
 const tagList = ref([
   { title: '出勤人数', number: 259 },
   { title: '在岗人数', number: 100 },
   { title: '出勤率', number: 100 },
 ])
+
+/**
+ * 初始化地图
+ */
+const initMapChart = () => {
+  if (!mapChartRef.value) {
+    return;
+  }
+  mapChart = echarts.init(mapChartRef.value);
+  mapChart.setOption(mapOption);
+}
+
+onMounted(() => {
+  // nextTick(() => {
+  //   initMapChart();
+  // });
+  getScreenNews(props.projectId).then(res => {
+    const { data, code } = res
+    if (code === 200) {
+      news.value = data
+    }
+  })
+})
+
+onUnmounted(() => {
+  // if (mapChart) {
+  //   mapChart.dispose();
+  //   mapChart = null;
+  // }
+});
+
 </script>
 
 <style scoped lang="scss">
 .leftPage {
   display: flex;
   flex-direction: column;
-  width: calc(25vw - 30px);
-  margin: 0 15px;
+  width: 25vw;
   height: 100%;
 
   .topPage,