bxztApp/packages/screen/src/views/RiskWarning/right.vue

<template>
  <div class="right-panel">
    <SectionHeader title="防范应对" />
    <!-- 防范应对 -->
    <div class="prevention-section">
      <!-- 第一行：队伍、人员、装备、物资 -->
      <div class="resource-grid">
        <div v-for="(item, index) in resourceData" :key="index" class="resource-item">
          <!-- <div class="resource-icon" :class="item.iconClass"></div> -->
          <img class="resource-icon" :src="item.img" alt="" />
          <div class="resource-info">
            <div class="resource-label">{{ item.label }}</div>
            <div class="resource-value">
              {{ item.value }}<span class="unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 管控路段数 -->
      <div class="control-section">
        <div class="control-title">管控路段数 <span class="control-num">2</span></div>
        <div class="control-grid">
          <div
            v-for="(item, index) in controlData"
            :key="index"
            class="control-item"
            :class="{ clickable: item.label === '全幅封闭数' || item.label === '关闭驻地数' }"
            @click="handleControlClick(item)"
          >
            <div class="control-value">{{ item.value }}</div>
            <div class="control-label">{{ item.label }}</div>
          </div>
        </div>
      </div>

      <!-- 巡查公路里程 -->
      <div class="patrol-section">
        <div class="patrol-header">
          <span class="patrol-title">巡查公路里程</span>
          <span class="patrol-mileage">234882km</span>
        </div>
        <div class="patrol-grid">
          <div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
            <div class="patrol-value">{{ item.value }}</div>
            <div class="patrol-label">{{ item.label }}</div>
          </div>
        </div>
      </div>

      <!-- 抢险投入情况 -->
      <div class="rescue-section">
        <div class="rescue-title">抢险投入情况</div>
        <div class="rescue-grid">
          <div v-for="(item, index) in rescueData" :key="index" class="rescue-item">
            <!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
            <img class="rescue-icon" :src="item.img" alt="" />
            <div class="rescue-info">
              <div class="rescue-value">
                {{ item.value }}<span class="unit">{{ item.unit }}</span>
              </div>
              <div class="rescue-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 受灾情况 -->
    <div class="disaster-section">
      <SectionHeader title="受灾情况">
        <template #right>
          <div class="header-filters">
            <span class="filter-item active">本轮</span>
            <div class="date-range-wrapper">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="small"
                popper-class="dark-date-picker"
                :prefix-icon="Calendar"
              />
            </div>
          </div>
        </template>
      </SectionHeader>

      <!-- 阻断情况 -->
      <div class="block-section clickable" @click="handleBlockClick">
        <div class="block-title">阻断情况(已抢通/阻断数)</div>
        <div class="block-grid">
          <div class="block-item">
            <div class="block-num">
              <span class="current">{{ blockData[0].current }}</span>
              <span class="separator">/</span>
              <span class="total">{{ blockData[0].total }}</span>
            </div>
            <div class="block-label">{{ blockData[0].label }}</div>
          </div>
          <div class="divider-line"></div>

          <div class="block-item">
            <div class="block-num">
              <span class="current">{{ blockData[1].current }}</span>
              <span class="separator">/</span>
              <span class="total">{{ blockData[1].total }}</span>
            </div>
            <div class="block-label">{{ blockData[1].label }}</div>
          </div>

          <div class="divider-line"></div>

          <div class="block-item death-item">
            <div class="death-num">{{ deathData.value }}</div>
            <div class="death-label">{{ deathData.label }}</div>
          </div>
        </div>
      </div>

      <!-- 灾害情况 -->
      <div class="damage-section">
        <div class="damage-title">灾害情况</div>
        <div class="damage-grid">
          <div
            v-for="(item, index) in damageData"
            :key="index"
            class="damage-item"
            :class="item.class"
          >
            <div class="damage-value">
              {{ item.value }}<span class="unit">{{ item.unit }}</span>
            </div>
            <div class="damage-label">{{ item.label }}</div>
          </div>
        </div>
      </div>

      <!-- 重大事件 -->
      <div class="event-section">
        <span class="event-title">重大事件：</span>
        <span class="event-num">{{ majorEvent }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

import SectionHeader from "./component/sectionHeader.vue";
import { Calendar } from "@element-plus/icons-vue";

const emit = defineEmits(["openClearanceSituation", "openControlSituation"]);

// 点击管控项
const handleControlClick = (item) => {
  if (item.label === "全幅封闭数") {
    emit("openClearanceSituation");
  } else if (item.label === "关闭驻地数") {
    emit("openControlSituation");
  }
};

// 点击阻断情况
const handleBlockClick = () => {
  emit("openClearanceSituation");
};

import icon1 from "../../assets/RiskWarning_img/icon1@2x.png";
import icon2 from "../../assets/RiskWarning_img/icon2@2x.png";
import icon3 from "../../assets/RiskWarning_img/icon3@2x.png";
import icon4 from "../../assets/RiskWarning_img/icon4@2x.png";

import icon11 from "../../assets/RiskWarning_img/icon-1@2x.png";
import icon12 from "../../assets/RiskWarning_img/icon-1@2x.png";
import icon13 from "../../assets/RiskWarning_img/icon-1@2x.png";

import icon51 from "../../assets/RiskWarning_img/编组5@2x.png";
import icon52 from "../../assets/RiskWarning_img/编组22@2x.png";
import icon55 from "../../assets/RiskWarning_img/路径55@2x.png";

import icon62 from "../../assets/RiskWarning_img/路径62@2x.png";
import icon621 from "../../assets/RiskWarning_img/路径62@2x (1).png";
import icon622 from "../../assets/RiskWarning_img/路径62@2x (2).png";

// 日期范围选择器
const dateRange = ref([]);

// 资源数据（队伍、人员、装备、物资）
const resourceData = [
  {
    label: "全市普通公路抢险队伍",
    value: "39",
    unit: "支",
    iconClass: "icon-team",
    img: icon1,
  },
  { label: "人员", value: "1612", unit: "人", iconClass: "icon-person", img: icon2 },
  { label: "储备装备", value: "1157", unit: "台", iconClass: "icon-equip", img: icon3 },
  { label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
];

// 管控路段数据
const controlData = [
  { label: "全幅封闭数", value: "40" },
  { label: "半幅通行数", value: "40" },
  { label: "限速(限车型)数", value: "30" },
  { label: "告警阻拦处数", value: "42" },
  { label: "停工项目数", value: "24" },
  { label: "关闭驻地数", value: "32" },
  { label: "转移撤离人员数", value: "58" },
];

// 巡查数据
const patrolData = [
  { label: "巡查路段数", value: "2" },
  { label: "巡查桥梁数", value: "1" },
  { label: "巡查边坡数", value: "6" },
  { label: "巡查隧道数", value: "10" },
  { label: "巡查项目数", value: "6" },
];

// 抢险投入数据
const rescueData = [
  {
    label: "本轮出动人次",
    value: "22341",
    unit: "人次",
    iconClass: "icon-rescue-person",
    img: icon11,
  },
  {
    label: "本轮出动设备",
    value: "341",
    unit: "台次",
    iconClass: "icon-rescue-equip",
    img: icon12,
  },
  {
    label: "清理塌方",
    value: "1367",
    unit: "万立方米",
    iconClass: "icon-rescue-clear",
    img: icon13,
  },
];

// 受灾情况 - 阻断数据
const blockData = [
  { label: "今日新增阻断数", current: "19", total: "23" },
  { label: "本轮累计阻断数", current: "10", total: "23" },
];

// 死亡人数
const deathData = { label: "本轮因灾死亡人数", value: "5" };

// 灾害情况数据
const damageData = [
  { label: "本轮塌方量", value: "23", unit: "万立方米", class: "blue" },
  { label: "汛期塌方量", value: "23", unit: "万立方米", class: "blue" },
  { label: "当年塌方量", value: "23", unit: "万立方米", class: "blue" },
  { label: "本轮已损失", value: "80", unit: "万元", class: "red" },
  { label: "汛期已损失", value: "18", unit: "万元", class: "red" },
  { label: "当年已损失", value: "350", unit: "万元", class: "red" },
];

// 重大事件数
const majorEvent = "0";
</script>

<style lang="scss" scoped>
// 视频屏幕自适应 - 基于视口宽度动态调整
// 基准宽度 1920px，使用 vw 单位实现自适应
@function vw($px) {
  @return calc($px / 1920 * 100vw);
}

.right-panel {
  width: 100%;
  height: 100%;
  padding: vw(20);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  // 小屏幕适配
  @media (max-width: 1366px) {
    padding: 12px;
  }

  @media (max-width: 1024px) {
    padding: 8px;
  }
}

.prevention-section {
  // background: linear-gradient(
  //   180deg,
  //   rgba(21, 41, 59, 0.95) 0%,
  //   rgba(13, 28, 42, 0.95) 100%
  // );
  // border: 1px solid rgba(64, 169, 255, 0.3);
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
  align-items: center;
  margin-bottom: vw(15);

  .header-left {
    display: flex;
    align-items: center;
    gap: vw(8);

    .icon-back {
      width: vw(20);
      height: vw(20);
      min-width: 16px;
      min-height: 16px;
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: "←";
        color: #fff;
        font-size: vw(12);
      }
    }

    .title {
      font-size: vw(12);
      font-weight: bold;
      color: #fff;
    }
  }
}

// 资源网格（队伍、人员、装备、物资）
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: vw(10);
  margin-bottom: vw(10);

  .resource-item {
    display: flex;
    align-items: center;
    gap: vw(10);
    padding: vw(8) vw(12);
    background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
    border: 2px solid transparent;
    border-image: linear-gradient(270deg, rgba(80, 201, 191, 0), rgba(39, 135, 153, 1)) 2
      2;
    border-radius: 6px;
    border-right: 0px;

    .resource-icon {
      width: vw(32);
      height: vw(32);
      min-width: 20px;
      min-height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: vw(20);

      &.icon-team::before {
        content: "👷";
      }
      &.icon-person::before {
        content: "👤";
      }
      &.icon-equip::before {
        content: "🚛";
      }
      &.icon-material::before {
        content: "📦";
      }
    }

    .resource-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .resource-label {
        width: 48%;
        font-size: vw(12);
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: vw(4);
      }

      .resource-value {
        font-size: vw(18);
        font-weight: bold;
        color: #40a9ff;

        .unit {
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
          font-weight: normal;
          margin-left: 2px;
        }
      }
    }
  }
}

// 管控路段
.control-section {
  margin-bottom: vw(10);

  .control-title {
    font-size: vw(14);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: vw(10);

    .control-num {
      font-size: vw(16);

      color: #40a9ff;
      font-weight: bold;
      margin-left: vw(5);
    }
  }

  .control-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
     background: rgba(64, 169, 255, 0.1);
    box-shadow: inset 0px 0px 8px 0px #379bff;
    gap: vw(8);

    .control-item {
      text-align: center;
      padding: vw(6) vw(5);
      // background: rgba(64, 169, 255, 0.1);
      border-radius: 4px;

      &.clickable {
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(64, 169, 255, 0.15);

          .control-value {
            color: #69c0ff;
            text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
          }
        }
      }

      .control-value {
        font-size: vw(18);
        font-weight: bold;
        color: #40a9ff;
        margin-bottom: vw(4);
      }

      .control-label {
        font-size: vw(12);
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

// 巡查公路里程
.patrol-section {
  margin-bottom: vw(10);

  .patrol-header {
    display: flex;
    align-items: center;
    gap: vw(10);
    margin-bottom: vw(10);

    .patrol-title {
      font-size: vw(14);
      color: rgba(255, 255, 255, 0.9);
    }

    .patrol-mileage {
      font-size: vw(16);
      font-weight: bold;
      color: #40a9ff;
    }
  }

  .patrol-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: vw(8);

    .patrol-item {
      text-align: center;
      padding: vw(6) vw(5);
      // background: rgba(64, 169, 255, 0.1);
      // border-radius: 4px;
      background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
      background-size: 100% 100%;
      background-position: right;

      .patrol-value {
        font-size: vw(18);
        font-weight: bold;
        color: #40a9ff;
        margin-bottom: vw(4);
        text-align: left;
        margin-left: vw(5);
      }

      .patrol-label {
        font-size: vw(12);
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

// 抢险投入情况
.rescue-section {
  .rescue-title {
    font-size: vw(14);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: vw(10);
  }

  .rescue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: vw(10);

    .rescue-item {
      display: flex;
      align-items: center;
      gap: vw(4);
      padding: vw(8) 0;
      // background: rgba(64, 169, 255, 0.1);
      // border: 1px solid rgba(64, 169, 255, 0.2);
      // border-radius: 6px;
      background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
      background-size: 100% 100%;
      background-position: right;

      .rescue-icon {
        width: vw(36);
        height: vw(36);
        min-width: 24px;
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: vw(22);
        margin-left: vw(5);

        &.icon-rescue-person::before {
          content: "👷";
        }
        &.icon-rescue-equip::before {
          content: "🚜";
        }
        &.icon-rescue-clear::before {
          content: "🏔️";
        }
      }

      .rescue-info {
        .rescue-value {
          font-size: vw(18);
          font-weight: bold;
          color: #40a9ff;
          margin-bottom: vw(4);
          display: flex;
          align-items: center;

          .unit {
            font-size: vw(10);
            color: rgba(255, 255, 255, 0.7);
            font-weight: normal;
            margin-left: 2px;
          }
        }

        .rescue-label {
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

// 受灾情况样式
.disaster-section {
  margin-top: vw(15);

  .block-section {
    margin-bottom: vw(10);

    &.clickable {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        opacity: 0.9;

        .block-title {
          color: #69c0ff;
        }
      }
    }

    .block-title {
      font-size: vw(14);
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: vw(10);
    }

    .block-grid {
      display: flex;
      justify-content: space-between;
      height: 100%;
      padding: 0 vw(20);
      // display: grid;
      // grid-template-columns: repeat(5, 1fr);
      // gap: 10px;
      background-image: url("../../assets/RiskWarning_img/编组22@2x.png");
      background-size: 100% 100%;
      background-position: center;

      .divider-line {
        width: 2px;
        height: vw(40);
        margin: auto 0;
        background: linear-gradient(
          180deg,
          transparent 0%,
          #40a9ff 50%,
          transparent 100%
        );
        // margin: 0 auto;
      }

      .block-item {
        text-align: center;
        padding: vw(8);
        // background: rgba(64, 169, 255, 0.1);
        // border-radius: 6px;
        // background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
        // background-size: 100% 100%;
        // background-position: left;

        .block-num {
          font-size: vw(18);
          font-weight: bold;
          margin-bottom: vw(6);

          .current {
            color: #40a9ff;
          }

          .separator {
            color: rgba(255, 255, 255, 0.5);
            margin: 0 2px;
          }

          .total {
            color: #ff4d4f;
          }
        }

        .block-label {
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
        }

        &.death-item {
          .death-num {
            font-size: vw(18);
            font-weight: bold;
            color: #40a9ff;
            margin-bottom: vw(6);
          }

          .death-label {
            font-size: vw(10);
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
  }

  .damage-section {
    margin-bottom: vw(10);

    .damage-title {
      font-size: vw(14);
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: vw(10);
    }

    .damage-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: vw(10);

      .damage-item {
        text-align: center;
        padding: vw(8);
        // background: rgba(64, 169, 255, 0.1);
        // border-radius: 6px;
        background-image: url("../../assets/RiskWarning_img/路径62@2x.png");
        background-size: 100% 100%;
        background-position: left;

        .damage-value {
          font-size: vw(18);
          font-weight: bold;
          margin-bottom: vw(6);

          .unit {
            font-size: vw(12);
            font-weight: normal;
            margin-left: 2px;
          }
        }

        .damage-label {
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
        }

        &.blue .damage-value {
          color: #40a9ff;
          .unit {
            color: rgba(255, 255, 255, 0.7);
          }
        }

        &.red .damage-value {
          color: #ff4d4f;
          .unit {
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
  }

  .event-section {
    text-align: center;
    padding: vw(12);
    // background: rgba(64, 169, 255, 0.1);
    // border-radius: 6px;
    background-image: url("../../assets/RiskWarning_img/编组5@2x.png");
    background-size: 100% 100%;
    background-position: left;

    .event-title {
      font-size: vw(12);
      color: rgba(255, 255, 255, 0.9);
    }

    .event-num {
      font-size: vw(18);
      font-weight: bold;
      color: #ff4d4f;
    }
  }
}
.header-filters {
  display: flex;
  align-items: center;
  gap: vw(6);
  font-size: vw(10);

  .filter-item {
    color: rgba(255, 255, 255, 0.6);
    padding: vw(3) vw(8);
    border: 1px solid rgba(64, 169, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;

    &.active {
      background: rgba(64, 169, 255, 0.2);
      color: #40a9ff;
      border-color: rgba(64, 169, 255, 0.5);
    }
  }

  .filter-separator {
    color: rgba(255, 255, 255, 0.4);
  }
}
.date-range-wrapper {
  :deep(.el-date-editor) {
    width: 200px;
    background: transparent;
    border: 1px solid rgba(64, 169, 255, 0.3);
    border-radius: 4px;
    background: #183c67;
    box-shadow: inset 0px 0px 8px 0px #4fecff;

    .el-range-input {
      background: transparent;
      color: rgba(255, 255, 255, 0.8);

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .el-range-separator {
      color: rgba(255, 255, 255, 0.4);
    }

    .el-icon {
      color: rgba(255, 255, 255, 0.5);
    }

    // &:hover {
    //   border-color: rgba(64, 169, 255, 0.5);
    // }
  }
}
</style>