迭代四

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -5,7 +5,9 @@
         <div class="weather-box">
           <div class="weather-item">
             <div class="weatherBox1">天气</div>
-            <div class="weatherBox2">天气图片</div>
+            <div class="weatherBox2">
+              <img :src="weatherImageUrl" alt="Weather Image" />
+            </div>
           </div>
           <div class="weather-item">
             <div class="weatherBox1">温度</div>
@@ -30,27 +32,24 @@
       <div class="title gradient-text">灾害信息</div>
       <div class="card-content">
         <div class="eventBox1">
-          <div class="icon1"></div>
           <div class="line"></div>
           <div class="duration-box">
-            <div class="gradient-text text">持续时长</div>
             <div class="time-box">
-              <span class="time-text">{{ eventData.duration?.day }}</span>
+              <div class="gradient-text text">响应时间：</div>
+              <span class="time-text">{{ duration.days }}</span>
               <span>天</span>
-              <span class="time-text">{{ eventData.duration?.hour }}</span>
-              <span>小时</span>-->
-              <span class="time-text">{{ eventData.duration?.minute }}</span>
-              <span>分</span>-->
-              <span class="time-text">{{ eventData.duration?.second }}</span>
+              <span class="time-text">{{ duration.hours }}</span>
+              <span>小时</span>
+              <span class="time-text">{{ duration.minutes }}</span>
+              <span>分</span>
+              <span class="time-text">{{ duration.seconds }}</span>
               <span>秒</span>
             </div>
           </div>
-          <div style="margin-left: 20px">
-            <div class="line2"></div>
-            <div class="finish-btn" @click="endProcess">
-              <div class="finish-icon"></div>
-              <div class="finish-text">结束处置</div>
-            </div>
+          <div class="line2"></div>
+          <div class="finish-btn" @click="endProcess">
+            <div class="finish-icon"></div>
+            <div class="finish-text">结束处置</div>
           </div>
         </div>
         <div class="event-box">
@@ -116,22 +115,48 @@
 <script lang="ts" setup name="LeftSection">
 import { getEventDetail } from '@/api/duty/eventing';
 import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
-const duration = ref(0);
-const formattedDuration = ref('');
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import axios from 'axios';
 const route = useRoute();
 const router = useRouter();
-const updateDuration = () => {
-  duration.value += 1;
-  const days = Math.floor(duration.value / (24 * 3600));
-  const hours = Math.floor((duration.value % (24 * 3600)) / 3600);
-  const minutes = Math.floor((duration.value % 3600) / 60);
-  const seconds = duration.value % 60;
-  formattedDuration.value = `持续时长：${days}天${hours}小时${minutes}分${seconds}秒`;
-};
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
   proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
 );
+interface WeatherData {
+  location: string;
+  temperature: string;
+  condition: string;
+}
+const weatherData = ref<WeatherData>({
+  location: '',
+  temperature: '',
+  condition: ''
+});
+const weatherImageUrl = ref<string>('');
+
+const fetchWeatherData = async () => {
+  try {
+    const response = await axios.get<WeatherData>('https://api.example.com/weather'); // 替换为实际的API URL
+    weatherData.value = response.data;
+    weatherImageUrl.value = getWeatherImageUrl(weatherData.value.condition);
+  } catch (error) {
+    console.error('Error fetching weather data:', error);
+  }
+};
+
+const getWeatherImageUrl = (condition: string): string => {
+  const weatherToImageUrl = {
+    sunny: 'https://example.com/images/sunny.png',
+    cloudy: 'https://example.com/images/cloudy.png',
+    rainy: 'https://example.com/images/rainy.png',
+    snowy: 'https://example.com/images/snowy.png',
+    // 添加更多天气条件
+    default: 'https://example.com/images/default.png'
+  };
+
+  return weatherToImageUrl[condition] || weatherToImageUrl.default;
+};
 let eventId = ref('');
 // 事件信息
 const eventData = ref({
@@ -141,6 +166,7 @@ const eventData = ref({
   address: '',
   event_status: '',
   event_source: '',
+  event_time: '',
   report_time: ''
 });
 const fetchEventDetail = () => {
@@ -178,12 +204,7 @@ const initData = () => {
     status: '',
     unit: '',
     time: '',
-    duration: {
-      day: '',
-      hour: '',
-      minute: '',
-      second: ''
-    }
+    event_time: ''
   };
   // 综合值守
   comprehensiveDutyState.value = {
@@ -239,11 +260,45 @@ const initData = () => {
     }
   ];
 };
+const elapsedTime = ref(0);
+let intervalId = null;
+
+const updateTime = () => {
+  if (eventData.value.event_time && typeof eventData.value.event_time === 'string') {
+    const eventTime = new Date(eventData.value.event_time);
+    if (!isNaN(eventTime.getTime())) {
+      elapsedTime.value = Date.now() - eventTime.getTime();
+    } else {
+      console.error('Invalid date format:', eventData.value.event_time);
+    }
+  }
+};
+
+const duration = computed(() => {
+  if (isNaN(elapsedTime.value) || elapsedTime.value < 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+  }
+
+  const totalSeconds = Math.floor(elapsedTime.value / 1000);
+  const days = Math.floor(totalSeconds / (24 * 3600));
+  const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return { days, hours, minutes, seconds };
+});
 onMounted(() => {
   initData();
-  setInterval(updateDuration, 800);
+  // setInterval(updateDuration, 800);
   eventId.value = route.query.event_id as string;
   fetchEventDetail();
+  fetchWeatherData();
+  intervalId = setInterval(updateTime, 1000);
+});
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
 });
 </script>
 
@@ -308,7 +363,7 @@ onMounted(() => {
     align-items: center;
     .title {
       position: absolute;
-      top: 600px;
+      top: 580px;
       left: 200px;
       font-size: 60px;
     }
@@ -316,7 +371,7 @@ onMounted(() => {
       width: 2387px;
       height: 350px;
       background: url('@/assets/images/emergencyCommandMap/comprehensiveDutyContent.png') no-repeat 100% 100%;
-      margin-top: 90px;
+      margin-top: 60px;
       //padding-top: 30px;
       padding-left: 200px;
       padding-right: 220px;
@@ -328,7 +383,7 @@ onMounted(() => {
       font-family: 'BEBAS-1';
       font-size: 38px;
       color: #00e8ff;
-      margin-top: -35px;
+      margin-top: -20px;
       .icon1 {
         width: 143px;
         height: 143px;
@@ -434,17 +489,23 @@ onMounted(() => {
   }
   .line {
     width: 2px;
-    height: 189px;
+    height: 143px;
     background-repeat: no-repeat;
-    background-size: 2px 154px;
+    background-size: 2px 143px;
     background-position: center center;
     margin-left: 75px;
     margin-right: 65px;
   }
+  .line2 {
+    width: 2px;
+    height: 143px;
+    margin-left: 82px;
+    margin-right: 113px;
+  }
   .duration-box {
-    width: 1000px;
-    height: 284px;
-    padding-left: 180px;
+    width: 1350px;
+    height: 200px;
+    padding-left: 250px;
     .text {
       font-size: 44px;
     }
@@ -474,23 +535,12 @@ onMounted(() => {
       }
     }
   }
-  .line2 {
-    width: 2px;
-    height: 189px;
-    margin-left: 82px;
-    margin-right: 113px;
-  }
   .finish-btn {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    margin-top: -160px;
     justify-content: center;
     cursor: pointer;
-    .finish-icon {
-      width: 97px;
-      height: 107px;
-      background: url('@/assets/images/emergencyCommandMap/finishBtn.png') no-repeat 100% 100%;
-    }
     .finish-text {
       font-size: 30.58px;
       /* 设置字体透明 */