yjdp-web/src/views/emergencyCommandMap/LeftSection/index.vue

<template>
  <div class="left-section">
    <div class="weather-card">
      <div class="card-content">
        <div class="weather-box">
          <div class="weather-item">
            <div class="weatherBox1">天气</div>
            <div class="weatherBox2">{{ weatherDescription }}</div>
          </div>
          <div class="weather-item">
            <div class="weatherBox1">温度</div>
            <div class="weatherBox2">{{ temperature }}℃</div>
          </div>
          <div class="weather-item">
            <div class="weatherBox1">湿度</div>
            <div class="weatherBox2">{{ humidity }}%</div>
          </div>
          <div class="weather-item">
            <div class="weatherBox1">风力风向</div>
            <div class="weatherBox2">{{ windDirection }} {{ windLevel }}级</div>
          </div>
          <div class="weather-item">
            <div class="weatherBox1">降雨量</div>
            <div class="weatherBox2">{{ rainfall }}mm</div>
          </div>
        </div>
      </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="closeCommand">
            <div class="finish-icon"></div>
            <div class="finish-text">结束处置</div>
          </div>
        </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>
    <div class="duty-card">
      <div class="card-content">
        <div class="box1">
          <div class="icon1"></div>
          <div>{{ comprehensiveDutyState.time1 }}</div>
          <div style="margin-left: 20px">{{ comprehensiveDutyState.time2 }}</div>
        </div>
        <div class="user-box">
          <div class="user-item">
            <div class="box2">
              <div class="icon2"></div>
              带班领导
            </div>
            <div class="box3">{{ comprehensiveDutyState.classLeader }}</div>
          </div>
          <div class="user-item">
            <div class="box2">
              <div class="icon2"></div>
              主班人员
            </div>
            <div class="box3">{{ comprehensiveDutyState.mainShiftPerson }}</div>
          </div>
          <div class="user-item">
            <div class="box2">
              <div class="icon2"></div>
              副班人员
            </div>
            <div class="box3">{{ comprehensiveDutyState.deputyShiftPerson }}</div>
          </div>
          <div class="user-item">
            <div class="box2">
              <div class="icon2"></div>
              备班人员
            </div>
            <div class="box3">{{ comprehensiveDutyState.backupPerson }}</div>
          </div>
        </div>
      </div>
    </div>
    <VideoMonitor />
    <CloseCommand v-model="closeCommandState.show" :title="closeCommandState.title" :event-id="eventId" @update:model-value="fetchEventDetail" />
  </div>
</template>
<script lang="ts" setup name="LeftSection">
import { getEventDetail, getWeather } from '@/api/duty/eventing';
import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import CloseCommand from './CloseCommand.vue';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
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')
);
const weatherDescription = ref('');
const temperature = ref('');
const humidity = ref('');
const windDirection = ref('');
const windLevel = ref('');
const rainfall = ref('');
// 获取天气数据
async function fetchWeatherData() {
  try {
    const response = await getWeather({});
    if (response && response.rows && response.rows.length > 0) {
      const weatherData = response.rows[0];
      weatherDescription.value = weatherData.sk_s;
      temperature.value = weatherData.sk_t;
      humidity.value = weatherData.sk_h;
      windDirection.value = getWindDirection(weatherData.sk_wd);
      windLevel.value = weatherData.sk_wp_level;
      rainfall.value = weatherData.sk_r1h;
    }
  } catch (error) {
    console.error('Failed to fetch weather data:', error);
  }
}
// 根据风向角度获取风向名称
function getWindDirection(angle) {
  const directions = [
    '北',
    '北偏北',
    '北偏东北',
    '东北',
    '东偏东北',
    '东偏东',
    '东',
    '东偏东南',
    '东南',
    '南偏东南',
    '南偏南',
    '南',
    '南偏西南',
    '西南',
    '西偏西南',
    '西偏西',
    '西',
    '西偏西北',
    '西北',
    '北偏西北'
  ];
  const index = Math.floor(((angle + 11.25) % 360) / 22.5);
  return directions[index];
}
let eventId = ref('');
// 事件信息
const eventData = ref({
  event_title: '',
  event_type: '',
  event_level: '',
  address: '',
  event_status: '',
  event_source: '',
  event_time: '',
  report_time: ''
});
const fetchEventDetail = () => {
  console.log('fetchEventDetail');
  getEventDetail({ event_id: eventId.value }).then((res) => {
    eventData.value = res.data;
  });
};

// 综合值守
const comprehensiveDutyState = ref({
  time1: '',
  time2: '',
  classLeader: '',
  deputyShiftPerson: '',
  mainShiftPerson: '',
  backupPerson: ''
});
//结束指挥弹窗
const closeCommandState = reactive({
  show: false,
  title: ''
});
const closeCommand = () => {
  console.log('CloseCommand');
  closeCommandState.title = '结束指挥';
  closeCommandState.show = true;
};
// 分析研判
const analyzeJudge = ref({});

const initData = () => {
  // 事件信息
  eventData.value = {
    event_title: '',
    type: '',
    grade: '',
    address: '',
    status: '',
    unit: '',
    time: '',
    event_time: ''
  };
  // 综合值守
  comprehensiveDutyState.value = {
    // 值班时间
    time1: '2024/5/21',
    time2: '08:30-17:30',
    // 带班领导
    classLeader: '张珊珊',
    // 副班人员
    deputyShiftPerson: '王珊珊',
    // 主班人员
    mainShiftPerson: '林珊珊',
    // 备班人员
    backupPerson: '刘珊珊'
  };
  // 分析研判
  analyzeJudge.value = [
    {
      label: '基础数据',
      children: [
        { icon: 'user', label: '人口', data: 200, unit: '万人' },
        { icon: 'user', label: '人口密度', data: 23, unit: '人/km²' }
      ]
    },
    {
      label: '协同应急',
      children: [
        { icon: 'user', label: '专家', data: 10, unit: '个' },
        { icon: 'user', label: '救援队伍', data: 10, unit: '支' },
        { icon: 'user', label: '通信机构', data: 10, unit: '所' },
        { icon: 'user', label: '医疗机构', data: 10, unit: '间' },
        { icon: 'user', label: '救援车辆', data: 10, unit: '辆' }
      ]
    },
    {
      label: '重点场所',
      children: [
        { icon: 'user', label: '救助站', data: 10, unit: '个' },
        { icon: 'user', label: '应急庇护场所', data: 10, unit: '个' },
        { icon: 'user', label: '人防工程', data: 10, unit: '个' },
        { icon: 'user', label: '水利工程', data: 10, unit: '个' },
        { icon: 'user', label: '物资仓库', data: 10, unit: '个' }
      ]
    },
    {
      label: '重点防护场所',
      children: [
        { icon: 'user', label: '高危企业', data: 10, unit: '个' },
        { icon: 'user', label: '加油站', data: 10, unit: '个' },
        { icon: 'user', label: '学校', data: 10, unit: '个' },
        { icon: 'user', label: '养老院', data: 10, unit: '个' }
      ]
    }
  ];
};
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);
  eventId.value = route.query.event_id as string;
  fetchEventDetail();
  fetchWeatherData();
  intervalId = setInterval(updateTime, 1000);
});
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style lang="scss" scoped>
.left-section {
  width: 2627px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 74px;
  .weather-card {
    width: 2599px;
    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: 2387px;
      height: 180px;
      margin-top: 30px;
      //padding-top: 30px;
      padding-left: 200px;
      padding-right: 220px;
    }
    .weather-box {
      display: flex;
      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;
          margin-left: -30px;
        }
        .weatherBox2 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 317px;
          height: 82px;
          margin-top: 10px;
        }
      }
    }
  }
  .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%;
      }
    }
    .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;
        }
        .eventBox3 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 600px;
          height: 82px;
          margin-top: 10px;
        }
      }
    }
  }
  .duty-card {
    width: 2599px;
    height: 400px;
    background: url('@/assets/images/emergencyCommandMap/comprehensiveDutyBox.png') no-repeat 100% 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .card-content {
      width: 2387px;
      height: 257px;
      background: url('@/assets/images/emergencyCommandMap/comprehensiveDutyContent.png') no-repeat 100% 100%;
      margin-top: 90px;
      //padding-top: 30px;
      padding-left: 200px;
      padding-right: 220px;
    }
    .box1 {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'BEBAS-1';
      font-size: 38px;
      color: #00e8ff;
      margin-top: -35px;
      .icon1 {
        width: 143px;
        height: 143px;
        background: url('@/assets/images/emergencyCommandMap/time.png') no-repeat 100% 100%;
      }
    }
    .user-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      .user-item {
        font-size: 38px;
        margin-top: -20px;
        .box2 {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          height: 60px;
          padding-left: 60px;
          margin-left: -30px;
          .icon2 {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 143px;
            height: 143px;
            background: url('@/assets/images/emergencyCommandMap/classLeader.png') no-repeat 100% 100%;
          }
        }
        .box3 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 317px;
          height: 82px;
          background: url('@/assets/images/emergencyCommandMap/box.png') no-repeat 100% 100%;
          margin-top: 10px;
        }
      }
    }
  }
  .line {
    width: 2px;
    height: 143px;
    background-repeat: no-repeat;
    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: 1350px;
    height: 200px;
    padding-left: 250px;
    .text {
      font-size: 44px;
    }
    .time-box {
      font-size: 30px;
      color: #ffffff;
      margin-top: -10px;
      .time-text {
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image: linear-gradient(to bottom, #fff 20%, #f6d6a7 50%, #e48406 100%);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非Webkit内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
        font-family: 'BEBAS-1';
        font-size: 50px;
        width: 150px;
        text-align: center;
        &:first-child {
          width: 45px;
          text-align: left;
        }
      }
    }
  }
  .finish-btn {
    display: flex;
    flex-direction: column;
    margin-top: -160px;
    justify-content: center;
    cursor: pointer;
    .finish-text {
      font-size: 30.58px;
      /* 设置字体透明 */
      color: transparent;
      /* 设置线性渐变，从红色渐变到蓝色 */
      background-image: linear-gradient(to bottom, #fff 20%, #ff2f3c 50%, #ff2f3c 100%);
      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
      -webkit-background-clip: text;
      /* 非Webkit内核浏览器需要使用标准前缀 */
      background-clip: text;
      /* 把当前元素设置为行内块，以便能够应用背景 */
      display: inline-block;
      font-family: 'YouSheBiaoTiHei';
    }
  }
}

@keyframes slide {
  0% {
    transform: translateX(-80%);
  }
  80% {
    transform: translateX(92px);
  }
  80% {
    transform: translateX(0);
  }
}
</style>