修改

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 煤科建管平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-# VITE_APP_BASE_API = 'http://192.168.110.180:8899'
+VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 # 李陈杰 209
 # VITE_APP_BASE_API = 'http://192.168.110.209:8899'
 # 曾涛
@@ -13,7 +13,7 @@ VITE_APP_ENV = 'development'
 # 罗成
 # VITE_APP_BASE_API = 'http://192.168.110.188:8899'
 # 朱银
-VITE_APP_BASE_API = 'http://192.168.110.149:8899'
+# VITE_APP_BASE_API = 'http://192.168.110.149:8899'
 #曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.171:8899'
 

src/views/ProjectScreen/components/centerPage.vue

@@ -16,8 +16,8 @@
         <div class="swiper_content" ref="swiperContent">
           <div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
             <img :src="item.picture" alt="安全巡检" class="swiper_img">
-            <div class="swiper_date">{{ item.createTime.slice(5) }}</div>
+            <div class="swiper_date">{{ item.createTime.slice(5, 16) }}</div>
-            <div class="swiper_tip">{{ item.label }}</div>
+            <div class="swiper_tip">{{ item.label || '未佩戴安全帽' }}</div>
           </div>
         </div>
         <div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
@@ -89,6 +89,7 @@ const getInspectionList = async () => {
   const res = await getScreenSafetyInspection(props.projectId)
   const { code, data } = res
   if (code === 200) {
+    console.log(violation_level_type.value)
     data.map(item => {
       item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
     })
@@ -146,6 +147,7 @@ const loadBaseMap = (viewer) => {
   // 添加图层到视图
   const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
 }
+
 onMounted(() => {
   getInspectionList()
   createEarth()
@@ -153,7 +155,6 @@ onMounted(() => {
     swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
   }
 })
-
 </script>
 
 <style scoped lang="scss">
@@ -165,10 +166,6 @@ onMounted(() => {
 
 .topPage,
 .endPage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   width: 100%;
   padding: 15px 0;
   border: 1px solid rgba(230, 247, 255, 0.1);
@@ -177,12 +174,16 @@ onMounted(() => {
 
 .topPage {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 23px;
   transition: flex 0.5s ease;
 }
 
 .endPage {
-  max-height: 300px;
+  height: 170px;
   opacity: 1;
   transition: all 0.5s ease;
 }
@@ -202,7 +203,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 20px;
-  padding: 20px 20px 10px 20px;
+  padding: 12px 20px 10px 20px;
 
   .swiper_content {
     width: 100%;
@@ -234,7 +235,7 @@ onMounted(() => {
       position: absolute;
       top: 4px;
       right: 4px;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 400;
       color: rgba(230, 247, 255, 1);
     }

src/views/ProjectScreen/components/header.vue

@@ -4,15 +4,15 @@
       <div class="header_left_img">
         <img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
       </div>
-      <div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
+      <div style="font-size: 0.83vw; padding-left: 10px">安全生产天数：</div>
       <div class="header_left_text">
         {{ safetyDay }}
         <span style="font-size: 12px">天</span>
       </div>
     </div>
     <div class="title">
-      <div>XXX智慧工地管理平台</div>
+      <div>XXX项目</div>
-      <div>XXX Smart Construction Stic Management Dashboard</div>
+      <div>施工现场数智化管理</div>
     </div>
     <div class="header_right">
       <div class="top-bar">
@@ -21,7 +21,7 @@
           <div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
             <div v-for="(item, i) in weatherList" :key="i" class="weather-item"
               :style="{ transform: `translateY(-${offsetY}px)`, transition: transition }">
-              <img :src="`../../../src/assets/images/${item.icon}.png`" alt="" />
+              <img :src="`./src/assets/images/${item.icon}.png`" alt="" />
               <div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
               <div>{{ item.week }}({{ item.date }})</div>
             </div>
@@ -211,7 +211,8 @@ onUnmounted(() => {
   }
 
   .header_left_text {
-    font-weight: 500;
+    font-size: 1.45vw;
+    font-weight: 700;
     text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
   }
 }

src/views/ProjectScreen/components/leftPage.vue

@@ -63,14 +63,18 @@
           <div class="attendance_item_title">出勤率</div>
           <div class="attendance_item_title">出勤时间</div>
         </div>
+      </div>
+
+      <div class="attendance_list scroll">
         <div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
           <div class="attendance_item_title">{{ item.teamName }}</div>
           <div class="attendance_item_number">{{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber
-              }}</span></div>
+          }}</span></div>
-          <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
+          <div class="attendance_item_rate">{{ item.attendanceRate.toFixed(2) }} %</div>
           <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
         </div>
       </div>
+
     </div>
   </div>
 </template>
@@ -141,6 +145,7 @@ const getNewsData = async () => {
 
 var lastTime = 0;
 var scrolltimerTable = null
+var rotate = false
 
 const autoScrollTable = (time: number) => {
   const divData = document.getElementById('event_scroll');
@@ -150,10 +155,21 @@ const autoScrollTable = (time: number) => {
     return; // 如果时间未到，则返回，不执行动画更新
   }
   lastTime = time;
-  divData.scrollTop += 1;
+  if (rotate) {
-  if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight - 1) {
+    divData.scrollTop -= 1;
-    divData.scrollTop = 0;
+  } else {
-    scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    divData.scrollTop += 1;
+  }
+  if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+    rotate = true
+    setTimeout(() => {
+      scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    }, 1000);
+  } else if (divData.scrollTop == 0) {
+    rotate = false
+    setTimeout(() => {
+      scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    }, 1000);
   } else {
     scrolltimerTable = requestAnimationFrame(autoScrollTable);
   }
@@ -298,6 +314,22 @@ onUnmounted(() => {
     grid-template-columns: 3fr 2fr 2fr 3fr;
     margin-top: 20px;
   }
+
+  &.scroll {
+    margin-top: 10px;
+    height: 280px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+      background: rgba(204, 204, 204, 0.1);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(29, 214, 255, 0.78);
+      border-radius: 10px;
+    }
+  }
 }
 
 .subfont {
@@ -314,7 +346,9 @@ onUnmounted(() => {
   overflow-y: auto;
   padding: 10px 15px;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(138, 157, 161, 0.5);
+  border: 2px dashed rgba(29, 214, 255, 0.3);
+  border-right: none;
   border-radius: 4px;
   transition: all 0.3s ease;
   opacity: 0;
@@ -333,22 +367,4 @@ onUnmounted(() => {
     cursor: pointer;
   }
 }
-
-.detailBox::before {
-  content: '';
-  /* 绝对定位相对于父元素 */
-  position: absolute;
-  /* 定位到左侧中间位置 */
-  left: -10px;
-  top: 50%;
-  /* 垂直居中 */
-  transform: translateY(-50%);
-  /* 利用边框创建三角形 */
-  border-width: 10px 10px 10px 0;
-  border-style: solid;
-  /* 三角形颜色与背景匹配，左侧边框透明 */
-  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
-  /* 确保三角形在内容下方 */
-  z-index: -1;
-}
 </style>

src/views/ProjectScreen/components/optionList.ts

@@ -27,7 +27,7 @@ export let pieOption = {
   legend: {
     show: true,
     type: 'plain',
-    bottom: 20,
+    bottom: 0,
     itemWidth: 12,
     itemHeight: 12,
     textStyle: {
@@ -38,7 +38,7 @@ export let pieOption = {
     type: 'pie',
     data: [],
     radius: [50, 80],
-    center: ['50%', '45%'],
+    center: ['50%', '50%'],
     itemStyle: {
       borderColor: '#fff',
       borderWidth: 1
@@ -73,7 +73,7 @@ export let barOption = {
     itemHeight: 12,
     // 调整文字与图标间距
     data: ['计划流转面积', '已流转面积'],
-    top: 0,
+    top: 10,
     right: 20,
     textStyle: {
       color: '#fff',

src/views/ProjectScreen/components/rightPage.vue

@@ -4,12 +4,13 @@
       <Title title="项目概况" />
       <div class="content" v-html="generalize"></div>
     </div>
-    <div class="endPage">
+    <div class="midPage">
       <Title title="形象进度" />
-      <div class="chart_container">
+      <div ref="pieChartRef" class="echart" />
-        <div ref="pieChartRef" class="echart" />
+    </div>
-        <div ref="lineChartRef" class="echart" />
+    <div class="endPage">
-      </div>
+      <Title title="土地流转情况" />
+      <div ref="lineChartRef" class="echart" />
     </div>
   </div>
 </template>
@@ -79,12 +80,6 @@ const initLineChart = () => {
   lineChart.setOption(barOption);
 }
 
-// 响应窗口大小变化
-const handleResize = () => {
-  if (pieChart) pieChart.resize();
-  if (lineChart) lineChart.resize();
-};
-
 /**
  * 获取项目土地统计数据
  */
@@ -124,6 +119,12 @@ const getScreenGeneralizeData = async () => {
   }
 }
 
+// 响应窗口大小变化
+const handleResize = () => {
+  if (pieChart) pieChart.resize();
+  if (lineChart) lineChart.resize();
+};
+
 // 组件挂载时初始化图表
 onMounted(() => {
   getScreenLandData()
@@ -137,7 +138,6 @@ onMounted(() => {
 
 // 组件卸载时清理
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
   if (pieChart) {
     pieChart.dispose();
     pieChart = null;
@@ -156,6 +156,7 @@ onUnmounted(() => {
   height: 100%;
 
   .topPage,
+  .midPage,
   .endPage {
     display: flex;
     flex-direction: column;
@@ -166,20 +167,13 @@ onUnmounted(() => {
     box-sizing: border-box;
   }
 
-  .endPage {
+  .endPage,
+  .midPage {
     flex: 1;
     margin-top: 23px;
 
-    .chart_container {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      width: 100%;
-      height: 100%;
-    }
-
     .echart {
-      height: 48%;
+      height: 100%;
       width: 100%;
     }
   }