Merge remote-tracking branch 'origin/dev' into dev

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -1,57 +1,72 @@
 <template>
   <div class="left-section">
-    <div class="event-card">
+    <div class="weather-card">
       <div class="card-content">
-        <div class="event-box">
-          <div style="padding-top: 15px">
-            <div class="label-box">
-              <div class="gradient-text">{{ eventData.event_title }}</div>
-            </div>
-            <div class="time-text">{{ eventData.report_time }}</div>
-            <div class="address-box">
-              <i class="address-icon"></i>
-              <div class="address-text">{{ eventData.address }}</div>
+        <div class="weather-box">
+          <div class="weather-item">
+            <div class="weatherBox1">天气</div>
+            <div class="weatherBox2">
+              <img :src="weatherImageUrl" alt="Weather Image" />
             </div>
           </div>
-          <div style="margin-left: 95px">
-            <div class="flex">
-              <div class="status-box warning-status">
-                <div class="text">
-                  <dict-tag :options="mm_event_level" :value="eventData.event_level" />
-                </div>
-              </div>
-              <div class="status-box danger-status">
-                <div class="text">
-                  <dict-tag :options="mm_event_type" :value="eventData.event_type" />
-                </div>
-              </div>
-              <div class="status-box">
-                <div class="text">
-                  <dict-tag :options="mm_event_state" :value="eventData.event_status" />
-                </div>
-              </div>
-            </div>
-            <div class="unit-box">报送单位：{{ eventData.event_source }}</div>
+          <div class="weather-item">
+            <div class="weatherBox1">温度</div>
+            <div class="weatherBox2">31℃</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">湿度</div>
+            <div class="weatherBox2">45%</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">风力风向</div>
+            <div class="weatherBox2">北风1级</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">降雨量</div>
+            <div class="weatherBox2">0.0mm</div>
           </div>
         </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>
-            <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>秒</span>
+      </div>
+    </div>
+    <div class="event-card">
+      <div class="title gradient-text">灾害信息</div>
+      <div class="card-content">
+        <div class="eventBox1">
+          <div class="line"></div>
+          <div class="duration-box">
+            <div class="time-box">
+              <div class="gradient-text text">响应时间：</div>
+              <span class="time-text">{{ duration.days }}</span>
+              <span>天</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 class="line2"></div>
+          <div class="finish-btn" @click="endProcess">
+            <div class="finish-icon"></div>
+            <div class="finish-text">结束处置</div>
           </div>
         </div>
-        <div class="line2"></div>
-        <div class="finish-btn" @click="endProcess">
-          <div class="finish-icon"></div>
-          <div class="finish-text">结束处置</div>
+        <div class="event-box">
+          <div class="event-item">
+            <div class="eventBox2">灾害事件</div>
+            <div class="eventBox3">{{ eventData.event_title }}</div>
+          </div>
+          <div class="event-item">
+            <div class="eventBox2">灾害地点</div>
+            <div class="eventBox3">{{ eventData.address }}</div>
+          </div>
+          <div class="event-item">
+            <div class="eventBox2">灾害级别</div>
+            <div class="eventBox3">
+              <dict-tag :options="mm_event_level" :value="eventData.event_level" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -97,26 +112,51 @@
     <VideoMonitor />
   </div>
 </template>
-
 <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({
@@ -126,6 +166,7 @@ const eventData = ref({
   address: '',
   event_status: '',
   event_source: '',
+  event_time: '',
   report_time: ''
 });
 const fetchEventDetail = () => {
@@ -163,12 +204,7 @@ const initData = () => {
     status: '',
     unit: '',
     time: '',
-    duration: {
-      day: '',
-      hour: '',
-      minute: '',
-      second: ''
-    }
+    event_time: ''
   };
   // 综合值守
   comprehensiveDutyState.value = {
@@ -224,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>
 
@@ -239,114 +309,113 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 74px;
-  .event-card {
+  .weather-card {
     width: 2599px;
-    height: 422px;
-    background: url('@/assets/images/emergencyCommandMap/eventBox.png') no-repeat 100% 100%;
+    height: 300px;
+    background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .card-content {
-      width: 2541px;
-      height: 260px;
-      background: url('@/assets/images/emergencyCommandMap/eventContent.png') no-repeat 100% 100%;
-      margin-top: 120px;
-      padding-top: 30px;
-      padding-left: 60px;
+      width: 2387px;
+      height: 180px;
+      margin-top: 30px;
+      //padding-top: 30px;
+      padding-left: 200px;
+      padding-right: 220px;
+    }
+    .weather-box {
       display: flex;
-      .event-box {
-        display: flex;
-        .label-box {
-          font-size: 44px;
-          background-image: url('@/assets/images/emergencyCommandMap/labelBox.png');
-          background-repeat: no-repeat;
-          background-size: 311px 56px;
-          padding-left: 60px;
-        }
-        .time-text {
-          font-size: 32px;
-          color: #00e8ff;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      .weather-item {
+        font-size: 38px;
+        margin-top: -20px;
+        .weatherBox1 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          height: 60px;
           padding-left: 60px;
-          font-family: 'BEBAS-1';
+          margin-left: -30px;
         }
-        .address-box {
+        .weatherBox2 {
           display: flex;
+          justify-content: center;
           align-items: center;
-          padding-left: 40px;
-          .address-icon {
-            width: 60px;
-            height: 71px;
-            background: url('@/assets/images/emergencyCommandMap/address.png') no-repeat 100% 100%;
-          }
-          .address-text {
-            font-size: 32px;
-            color: #a8ccde;
-            width: 500px;
-          }
+          width: 317px;
+          height: 82px;
+          margin-top: 10px;
         }
       }
-      .status-box {
-        width: 113.31px;
-        height: 31px;
-        border-radius: 4px;
-        color: #fff;
-        position: relative;
-        margin-left: 10px;
-        .text {
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          left: -5px;
-          text-align: center;
-          font-size: 24px;
-          color: #fff;
-          font-family: 'YouSheBiaoTiHei';
-        }
-        &:first-child {
-          margin-left: 0;
-        }
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: #40c75f;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-        }
+    }
+  }
+  .event-card {
+    width: 2599px;
+    height: 400px;
+    background: rgba(0, 4, 52, 1) no-repeat 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title {
+      position: absolute;
+      top: 580px;
+      left: 200px;
+      font-size: 60px;
+    }
+    .card-content {
+      width: 2387px;
+      height: 350px;
+      background: url('@/assets/images/emergencyCommandMap/comprehensiveDutyContent.png') no-repeat 100% 100%;
+      margin-top: 60px;
+      //padding-top: 30px;
+      padding-left: 200px;
+      padding-right: 220px;
+    }
+    .eventBox1 {
+      display: flex;
+      justify-content: right;
+      align-items: center;
+      font-family: 'BEBAS-1';
+      font-size: 38px;
+      color: #00e8ff;
+      margin-top: -20px;
+      .icon1 {
+        width: 143px;
+        height: 143px;
+        background: url('@/assets/images/emergencyCommandMap/time.png') no-repeat 100% 100%;
       }
-      .warning-status {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-          background: #ffaf00;
+    }
+    .event-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      .event-item {
+        font-size: 38px;
+        margin-top: -20px;
+        .eventBox2 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          height: 60px;
+          padding-left: 60px;
+          margin-left: -30px;
         }
-      }
-      .danger-status {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-          background: #ff2f3c;
+        .eventBox3 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 600px;
+          height: 82px;
+          margin-top: 10px;
         }
       }
-      .unit-box {
-        margin-top: 55px;
-        font-size: 32px;
-        text-align: right;
-        color: #a8ccde;
-      }
     }
   }
   .duty-card {
@@ -420,19 +489,23 @@ onMounted(() => {
   }
   .line {
     width: 2px;
-    height: 189px;
-    background-image: url('@/assets/images/emergencyCommandMap/line.png');
+    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: 893px;
-    height: 284px;
-    background: url('@/assets/images/emergencyCommandMap/durationBg.png') no-repeat 100% 100%;
-    padding-left: 180px;
+    width: 1350px;
+    height: 200px;
+    padding-left: 250px;
     .text {
       font-size: 44px;
     }
@@ -462,27 +535,12 @@ onMounted(() => {
       }
     }
   }
-  .line2 {
-    width: 2px;
-    height: 189px;
-    background-image: url('@/assets/images/emergencyCommandMap/line.png');
-    background-repeat: no-repeat;
-    background-size: 2px 154px;
-    background-position: center center;
-    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;
       /* 设置字体透明 */
@@ -499,6 +557,7 @@ onMounted(() => {
     }
   }
 }
+
 @keyframes slide {
   0% {
     transform: translateX(-80%);