EOC-UI/src/views/right/components/handleProcess/index.vue

<template>
  <div class="handle-process">
    <div class="top-box">
      <div class="top-item">
        <rightMinTitleContent class="title-content" title="出动人员">
          <div class="arrow-box" @click="handlePeopleChudong"></div>
        </rightMinTitleContent>
        <div class="bottom-item">
          <div class="people-box">
            <div class="icon-box"></div>
            <div class="text">指挥长</div>
            <div class="name">张三</div>
          </div>
          <div class="center-item"></div>
          <div class="people-box">
            <div class="icon-box icon-box1"></div>
            <div class="text">出动数</div>
            <div class="name1">12</div>
          </div>
        </div>
      </div>
      <div class="top-item">
        <rightMinTitleContent class="title-content" title="出动装备">
          <div class="arrow-box"></div
        ></rightMinTitleContent>
        <div class="bottom-item">
          <div class="people-box">
            <div class="icon-box icon-box2"></div>
            <div class="text">车辆</div>
            <div class="name">12</div>
          </div>
          <div class="center-item"></div>
          <div class="people-box">
            <div class="icon-box icon-box3"></div>
            <div class="text">单兵装备</div>
            <div class="name1">12</div>
          </div>
        </div>
      </div>
    </div>
    <div class="top-box top-box-second">
      <div class="top-item">
        <rightMinTitleContent class="title-content" title="应急管理">
          <div class="arrow-box" @click="handleEmergencyVisible"></div>
        </rightMinTitleContent>
        <div class="yingji-manage">
          <div class="time-box">2024.11.20 12:12</div>
          <div class="info-report">
            <div class="left-arrow"></div>
            <div class="right-box">
              <span class="title">信息报告</span>
              <span class="name">张三</span>
            </div>
          </div>
        </div>
      </div>
      <div class="top-item">
        <rightMinTitleContent class="title-content" title="派单情况">
          <div class="arrow-box"></div
        ></rightMinTitleContent>
        <div class="bottom-item paidan-info">
          <div class="people-box">
            <div class="icon-box icon-box4"></div>
            <div class="text">发出指令</div>
            <div class="name1">25</div>
          </div>
          <div class="people-box">
            <div class="icon-box icon-box5"></div>
            <div class="text">签收指令</div>
            <div class="name1">22</div>
          </div>
          <div class="people-box">
            <div class="icon-box icon-box6"></div>
            <div class="text">完成指令</div>
            <div class="name1">17</div>
          </div>
        </div>
      </div>
    </div>

    <div class="opinion-monitoring">
      <rightMediumTitleContent class="title-content" title="舆情监测">
        <div class="arrow-box"></div>
      </rightMediumTitleContent>
      <div class="yun-echarts" ref="yunEchartsRef"></div>
    </div>

    <div class="bottom-first-box">
      <div class="bottom-first-item">
        <rightMinTitleContent class="title-content" title="病例报告">
          <div class="arrow-box"></div>
        </rightMinTitleContent>
        <div class="time-report-box">
          <div class="time-container">
            <span>2024-10-01</span><br />
            <span>12:12</span>
          </div>
          <div class="name">张三</div>
          <div class="title">疑似病例</div>
        </div>
      </div>
      <div class="bottom-first-item">
        <rightMinTitleContent
          class="title-content tufa"
          title="突发公共卫生事件报告"
        >
          <div class="arrow-box"></div
        ></rightMinTitleContent>
        <div class="time-report-box">
          <div class="time-container">
            <span>2024-10-01</span><br />
            <span>12:12</span>
          </div>
          <div class="name">一般事件</div>
          <div class="title">初次报告</div>
        </div>
      </div>
    </div>

    <div class="opinion-video">
      <rightMediumTitleContent class="title-content" title="现场处置视频">
        <div class="arrow-box"></div>
      </rightMediumTitleContent>
      <div class="video-box">
        <div class="video-item"></div>
        <div class="video-item"></div>
        <div class="video-item"></div>
      </div>
    </div>
  </div>
  <EmergencyManage v-if="rightPanelStore.emergencyVisible" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import rightMinTitleContent from "../common/RightMinTitleContent.vue";
import rightMediumTitleContent from "../common/RightMediumTitleContent.vue";
import EmergencyManage from "./comp/EmergencyManage.vue";
import { WordColudOption } from "../../echarts/echartsOption";
import { useRightPanelStore } from "@/store/rightPanel";

const rightPanelStore = useRightPanelStore();
const handleEmergencyVisible = () => {
  rightPanelStore.emergencyVisible = true;
};

const yunEchartsRef = ref();
const ciData = ref([
  { name: "雨雪冰冻", value: 106 },
  { name: "台风", value: 46 },
  { name: "冰雹", value: 6 },
  { name: "交通事故", value: 106 },
  { name: "道路故障", value: 16 },
  { name: "积水", value: 306 },
  { name: "冰雹", value: 26 },
  { name: "道路积水", value: 96 },
  { name: "交通事故", value: 106 },
  { name: "道路故障", value: 16 },
  { name: "积水", value: 306 },
  { name: "冰雹", value: 26 },
  { name: "道路积水", value: 96 },
  { name: "雨雪冰冻", value: 106 },
  { name: "冰雹", value: 6 },
  { name: "交通事故", value: 106 },
  { name: "道路故障", value: 16 },
  { name: "积水", value: 306 },
  { name: "冰雹", value: 26 },
  { name: "道路积水", value: 96 },
  { name: "交通事故", value: 106 },
  { name: "道路故障", value: 16 },
  { name: "积水", value: 306 },
  { name: "冰雹", value: 26 },
  { name: "道路积水", value: 96 },
  { name: "雨雪冰冻", value: 106 },
]);
const initEcharts = (echartRef) => {
  const option = WordColudOption(ciData.value);
  const myEcharts = echarts.init(echartRef);
  myEcharts.setOption(option);
};

onMounted(() => {
  initEcharts(yunEchartsRef.value);
});
</script>

<style lang="scss" scoped>
.handle-process {
  width: 560px;
  .top-box {
    display: flex;
    gap: 16px;
    &.top-box-second {
      margin-top: 16px;
    }
    .top-item {
      position: relative;
      width: 50%;
      height: 160px;
      background: linear-gradient(
        180deg,
        rgba(32, 70, 121, 0) 2%,
        rgba(32, 70, 121, 0.6) 100%
      );
      border-radius: 0px 0px 0px 0px;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 150, 255, 1),
          rgba(7, 108, 208, 1)
        )
        1 1;
      .arrow-box {
        width: 35px;
        height: 35px;
        background-image: url("../../../../assets/img/展开箭头.png");
        background-size: 100% 100%;
        margin-left: 15px;
        cursor: pointer;
      }
      .title-content {
        padding-left: 40px;
      }

      &::after {
        position: absolute;
        content: "";
        left: 0%;
        right: 0%;
        bottom: 0;
        height: 3px;
        background: url("../../../../assets/img/image-bottom.png") no-repeat;
        background-size: 100% 50%;
      }

      .bottom-item {
        display: flex;
        justify-content: space-between;
        padding: 0 60px;
        .people-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          .icon-box {
            width: 44px;
            height: 40px;
            background-image: url("../../../../assets/img/Frame 1321316117@2x.png");
            background-size: 100% 100%;
          }
          .icon-box1 {
            background-image: url("../../../../assets/img/Frame 1321316117@2x(1).png");
          }
          .icon-box2 {
            background-image: url("../../../../assets/img/Frame car.png");
          }
          .icon-box3 {
            background-image: url("../../../../assets/img/Framedanbing.png");
          }
          .icon-box4 {
            width: 44px;
            height: 44px;
            background-image: url("../../../../assets/img/fachu.png");
          }
          .icon-box5 {
            width: 44px;
            height: 44px;
            background-image: url("../../../../assets/img/qianchu.png");
          }
          .icon-box6 {
            width: 44px;
            height: 44px;
            background-image: url("../../../../assets/img/wancheng.png");
          }
          .text {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 19px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-bottom: 5px;
          }
          .name {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 20px;
            color: #08ffe5;
            line-height: 24px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
          .name1 {
            font-family: Roboto;
            font-weight: bold;
            font-size: 20px;
            line-height: 24px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .center-item {
          width: 3px;
          height: 100px;
          background-image: url("../../../../assets/img/image 781@2x.png");
          background-size: 100% 100%;
        }
      }
      .yingji-manage {
        padding-left: 12px;
        .time-box {
          margin-top: 0px;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 18px;
          color: #50e0ff;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .info-report {
          display: flex;
          align-items: center;
          margin-top: 12px;
          .left-arrow {
            width: 23px;
            height: 23px;
            background-image: url("../../../../assets/img/原创-箭头right.png");
            background-size: 100% 100%;
          }
          .right-box {
            display: flex;
            align-items: center;
            width: 220px;
            height: 36px;
            margin-left: 8px;
            padding-left: 24px;
            background: linear-gradient(
              to left,
              rgba(62, 174, 255, 0) 0%,
              #1b82cbe2 85%,
              rgba(27, 129, 203, 0.3) 100%
            );
            border-radius: 0px 0px 0px 0px;
            .title {
              font-family: Alibaba PuHuiTi;
              margin-right: 12px;
              font-weight: normal;
              font-size: 20px;
              color: #ffd43c;
              text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
            .name {
              font-family: Alibaba PuHuiTi;
              font-weight: normal;
              font-size: 16px;
              color: #ffffff;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
      .paidan-info {
        padding: 0 20px !important;
        .people-box {
          .text {
            white-space: nowrap;
          }
        }
      }
    }
  }

  .opinion-monitoring {
    position: relative;
    width: 100%;
    height: 271px;
    background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
    border-radius: 0px 0px 0px 0px;
    margin-top: 16px;
    border: 1px solid;
    border-image: linear-gradient(
        180deg,
        rgba(0, 150, 255, 1),
        rgba(7, 108, 208, 1)
      )
      1 1;
    &::after {
      position: absolute;
      content: "";
      left: 0%;
      right: 0%;
      bottom: 0;
      height: 3px;
      background: url("../../../../assets/img/image-bottom.png") no-repeat;
      background-size: 100% 50%;
    }
    .yun-echarts {
      position: relative;
      top: -10px;
      width: 100%;
      height: calc(100% - 65px);
    }
  }

  .bottom-first-box {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    border: 1px solid;
    border-image: linear-gradient(
        180deg,
        rgba(0, 150, 255, 1),
        rgba(7, 108, 208, 1)
      )
      1 1;
    .bottom-first-item {
      position: relative;
      width: 50%;
      height: 121px;
      background: linear-gradient(
        180deg,
        rgba(32, 70, 121, 0) 2%,
        rgba(32, 70, 121, 0.6) 100%
      );
      border-radius: 0px 0px 0px 0px;
      padding: 0 10px;
      .arrow-box {
        width: 35px;
        height: 35px;
        background-image: url("../../../../assets/img/展开箭头.png");
        background-size: 100% 100%;
        margin-left: 15px;
        cursor: pointer;
      }
      .title-content {
        padding-left: 40px;
      }
      &::after {
        position: absolute;
        content: "";
        left: 0%;
        right: 0%;
        bottom: 0;
        height: 3px;
        background-image: url("../../../../assets/img/image-bottom.png");
        background-size: 100% 50%;
      }
      .tufa {
        padding-left: 30px;

        :deep(.text-box) {
          font-size: 19px !important;
          white-space: nowrap;
          padding-right: 5px;
        }
        .arrow-box {
          margin-left: 5px;
        }
      }
      .time-report-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 50px;
        background: linear-gradient(
          to left,
          rgba(62, 174, 255, 0) 0%,
          #1b81cb 85%,
          rgba(27, 129, 203, 0.3) 100%
        );
        border-radius: 0px 0px 0px 0px;
        .time-container {
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 16px;
          color: #50e0ff;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .name {
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          line-height: 24px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .title {
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: #f5f3f3;
          line-height: 24px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
  .opinion-video {
    position: relative;
    width: 100%;
    height: 162px;
    background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
    border-radius: 0px 0px 0px 0px;
    margin-top: 16px;
    border: 1px solid;
    border-image: linear-gradient(
        180deg,
        rgba(0, 150, 255, 1),
        rgba(7, 108, 208, 1)
      )
      1 1;
    &::after {
      position: absolute;
      content: "";
      left: 0%;
      right: 0%;
      bottom: 0;
      height: 3px;
      background: url("../../../../assets/img/image-bottom.png") no-repeat;
      background-size: 100% 50%;
    }
    .video-box {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      .video-item {
        width: 167px;
        height: 90px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(111, 229, 255, 0.8);
      }
    }
  }
}
</style>