EOC-UI/src/views/left/modules/ReportDisposal.vue

<template>
  <div class="body_container">
    <!-- 1.============= -->
    <div class="content_one">
      <!-- 风险报告 -->
      <div class="modules_bg_color modules_bg">
        <TitleHeadermini :title="'风险报告'"></TitleHeadermini>

        <div>
          <RiskReport :levelObj="riskReportObj"></RiskReport>
        </div>
      </div>

      <!-- 风险总览 -->
      <div class="modules_bg_color modules_bg2">
        <TitleHeader :title="'风险总览'" :buttons="riskOverViewButtons"></TitleHeader>
        <div class="modules_bg2_body">
          <div>
            <RiskReport :levelObj="riskOverViewObj"></RiskReport>
          </div>
          <div class="modules_bg2_body_right">
            <TowLevelTitle :title="riskOverViewtTitle" :buttons="riskOverViewTwoButtons"></TowLevelTitle>

            <div class="modules_bg2_body_bar">
              <RingChart></RingChart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.=================== -->
    <div class="content_two">
      <!-- 风险处置 -->
      <div class="modules_bg_color modules_bg_340">
        <TitleHeadersmall :title="'风险处置'" :buttons="timeButtons"></TitleHeadersmall>
        <div class="two_level_body">
          <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView>
        </div>
      </div>

      <!-- 重大活动保障 -->
      <div class="modules_bg_color modules_bg_340">
        <TitleHeadersmall :title="'重大活动保障'" :buttons="timeButtons"></TitleHeadersmall>
        <div class="two_level_body">
          <RiskTwoView :levelObj="majorEventGuaranteeObj"></RiskTwoView>
        </div>
      </div>

      <!-- 已结案风险 -->
      <div class="modules_bg_color modules_bg_412">
        <TitleHeadersmall :title="'已结案风险'" :buttons="timeButtons"></TitleHeadersmall>
        <div class="two_level_body">
          <RiskTwoView :levelObj="riskClosedCaseObj"></RiskTwoView>
        </div>
      </div>
    </div>

    <!-- 3.========================= -->
    <div class="content_three">
      <div class="open_icon" @click="openRiskBigTable"><img src="../../../assets/img/展开箭头.png" alt="" /></div>
      <TitleHeaderLong :title="'风险列表'" :buttons="riskTableButtons"></TitleHeaderLong>
      <dv-scroll-board :config="riskTableconfig" class="scroll_table" ref="scrollBoard" />
    </div>

    <!-- 4.===================== -->
    <div class="content_four">
      <TitleHeaderLong :title="'应急处置资源'" :buttons="[]"></TitleHeaderLong>
      <div class="modules_bg_color content_four_body">
        <!-- 检测设备 -->
        <div class="modules_bg_color modules_bg_jcsb">
          <TowLevelTitle :title="'检测设备'"></TowLevelTitle>
          <div class="modules_bg_jcsb_body">
            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
            <div class="modules_bg_jcsb_body_left">
              <div class="modules_bg_jcsb_body_left_content">
                <div>
                  <img src="../../../assets//img/装备总数.png" alt="" />
                  <div>装备总数</div>
                  <span>205</span>
                </div>
                <img src="../../../assets/img/方向箭头.png" alt="" />
                <div>
                  <div>使用中</div>
                  <span>108</span>
                </div>
              </div>
            </div>
            <div class="progress">
              <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
              <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->

                   <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
              <span class="text">使用率</span>
            </div>
          </div>
        </div>

        <!-- 派单情况 -->
        <div class="modules_bg_color modules_bg_pdqk">
          <TowLevelTitle :title="'派单情况'"></TowLevelTitle>
          <div class="modules_bg_pdqk_body">
            <div class="modules_bg_pdqk_body_item">
              <img src="../../../assets//img/发出指令.png" alt="" />
              <div>发出指令</div>
              <span>25</span>
            </div>
            <!-- <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img"> -->
            <div class="modules_bg_pdqk_body_item">
              <img src="../../../assets//img/签收指令.png" alt="" />
              <div>签收指令</div>
              <span>22</span>
            </div>
            <!-- <img src="../../../assets/img/连线方向箭头.png" alt=""  class="line_img"> -->
            <div class="modules_bg_pdqk_body_item">
              <img src="../../../assets//img/完成指令.png" alt="" />
              <div>完成指令</div>
              <span>17</span>
            </div>

            <div class="line">
              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" />
              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2" />
            </div>
          </div>
        </div>

        <!-- 应急人员 -->
        <div class="modules_bg_color modules_bg_yjry">
          <TowLevelTitle :title="'应急人员'"></TowLevelTitle>
          <div class="modules_bg_yjry_body">
            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
            <div class="modules_bg_yjry_body_zhz">
              <img src="../../../assets//img/指挥长.png" alt="" />
              <span>指挥长</span>
              <div>
                张三
                <img src="../../../assets/img/视频电话.png" alt="" />
              </div>
            </div>
            <div class="line"></div>
            <div class="modules_bg_yjry_left_content">
              <div class="modules_bg_yjry_left">
                <div class="modules_bg_yjry_left_content">
                  <div>
                    <img src="../../../assets//img/装备总数.png" alt="" />
                    <div>备班人数</div>
                    <span>205</span>
                  </div>
                  <img src="../../../assets/img/方向箭头.png" alt="" />
                  <div>
                    <div>出动数</div>
                    <span>108</span>
                  </div>
                </div>
              </div>
              <div class="progress">
                <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
                <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
                  <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
                <span class="text">出动率</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 应急车辆 -->
        <div class="modules_bg_color modules_bg_jcsb">
          <TowLevelTitle :title="'应急车辆'"></TowLevelTitle>
          <div class="modules_bg_jcsb_body">
            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
            <div class="modules_bg_jcsb_body_left">
              <div class="modules_bg_jcsb_body_left_content">
                <div>
                  <img src="../../../assets//img/车辆.png" alt="" />
                  <div>车辆</div>
                  <span>115</span>
                </div>
                <img src="../../../assets/img/方向箭头.png" alt="" />
                <div>
                  <div>出动数</div>
                  <span>90</span>
                </div>
              </div>
            </div>
            <div class="progress">
              <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
              <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
              <span class="text">出动率</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import RingChart from '../comp/RingChart.vue'

import TitleHeadermini from '../../../components/TitleHeadermini'
import TitleHeadersmall from '../../../components/TitleHeadersmall'
import TitleHeader from '../../../components/TitleHeader'
import TitleHeaderLong from '../../../components/TitleHeaderLong'

import TowLevelTitle from '../../../components/TowLevelTitle'
import RiskReport from '../comp/RiskReport.vue'
import RiskTwoView from '../comp/RiskTwoView.vue'

import MyProgress from './common/MyProgress'

import { ref, nextTick, toRaw, reactive, toRefs, onBeforeMount, onMounted } from 'vue'

// let riskReportObj = ref([{ id: 1, level: 'A', count: 0 }, { id: 2, level: 'B', count: 0 }, { id: 3, level: 'C', count: 0 }, { id: 4, level: 'D', count: 0 },])
const emit = defineEmits(['openRiskBigTable'])

// 1.=====================================
let riskReportObj = ref({
  name: '当日新增',
  count: 5,
  levelList: [
    { id: 1, level: 'A', count: 1 },
    { id: 2, level: 'B', count: 0 },
    { id: 3, level: 'C', count: 2 },
    { id: 4, level: 'D', count: 3 }
  ]
})

let riskOverViewObj = ref({
  name: '当年累计',
  count: 102,
  levelList: [
    { id: 1, level: 'A', count: 12 },
    { id: 2, level: 'B', count: 51 },
    { id: 3, level: 'C', count: 33 },
    { id: 4, level: 'D', count: 42 }
  ]
})
const riskOverViewButtons = ref([
  { id: 1, name: '月', active: false },
  { id: 2, name: '年', active: true }
])

const riskOverViewTwoButtons = ref([
  { id: 1, name: '按分类', active: false },
  { id: 2, name: '按级别', active: true }
])

const riskOverViewtTitle = ref('公共卫生风险分布图')

// 2.====================================================
const timeButtons = ref([
  { id: 1, name: '日', active: false },
  { id: 1, name: '月', active: false },
  { id: 2, name: '年', active: true }
])

// 风险处置
const riskTwoViewObj = ref({
  name: '处置中',
  count: 102,
  levelList: [
    { id: 1, level: 'A', count: 12 },
    { id: 2, level: 'B', count: 51 },
    { id: 3, level: 'C', count: 33 },
    { id: 4, level: 'D', count: 42 }
  ]
})

// 重大活动保障
const majorEventGuaranteeObj = ref({
  name: '处置中',
  count: 102,
  levelList: [
    { id: 1, level: 'A', count: 12 },
    { id: 2, level: 'B', count: 51 },
    { id: 3, level: 'C', count: 33 },
    { id: 4, level: 'D', count: 42 }
  ]
})

// 已结案风险
const riskClosedCaseObj = ref({
  name: '已结案',
  count: 5,
  levelList: [
    { id: 1, level: 'A', count: 1 },
    { id: 2, level: 'B', count: 0 },
    { id: 3, level: 'C', count: 2 },
    { id: 4, level: 'D', count: 3 },
    { id: 4, level: '突发', count: 3 }
  ]
})

// 3.风险列表=======================
const riskTableButtons = ref([
  { id: 1, name: '处置中', active: false },
  { id: 2, name: '已结案', active: true },
  { id: 3, name: '重大活动', active: true }
])

const riskTableconfig = ref({
  indexHeader: '编号',
  header: ['事件名称', '风险等级', '报告单位', '报告时间', '发生地点', '处置单位', '病例数', '重点场所', '重点人群', '最新状态'],
  data: [
    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ],
  rowNum: 3,
  index: true,
  columnWidth: [50],
  align: ['center'],
  headerBGC: 'rgba(34, 155, 188, 0.3)',
  headerHeight: 38,
  oddRowBGC: 'rgba(0, 170, 255, 0.15)',
  evenRowBGC: 'rgba(10, 39, 50, 0.15)',
  hoverPause: true,
  rowClass: 'custom-row-style'
  // itemStyle: {
  //   height: '40px',
  //   lineHeight: '40px',
  //   marginBottom: '10px'
  // }
})

function openRiskBigTable() {
  console.log('openRiskBigTable')
  emit('openRiskBigTable')
}
</script>
<style lang="scss" scoped>
.body_container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.content_one {
  display: flex;
  gap: 20px;
}

.modules_bg_color {
  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(7, 108, 208, 0), rgba(168, 212, 235, 1)) 1 1;
}

.modules_bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 253px;

  // background: url('../../../assets/img/m_bg.png');
}

.modules_bg2 {
  width: 808px;
  height: 253px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modules_bg2_body {
  display: flex;
  justify-content: space-between;
}

.modules_bg2_body_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 494px;
  margin-left: 10px;
}

.modules_bg2_body_bar {
  // flex: 1;
  width: 444px;
  height: 144px;
  color: azure;
  // background-color: pink;
  margin: 0 auto;
}

.content_two {
  display: flex;
  gap: 20px;
}

.modules_bg_340 {
  width: 340px;
  height: 187px;
  padding: 0 10px;
}

.modules_bg_412 {
  width: 412px;
  height: 187px;
  padding: 0 10px;
}

.two_level_body {
  width: 100%;
}

.content_three {
  width: 1124px;
  height: 222px;
  position: relative;

  .open_icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 6px;
    left: 180px;
    z-index: 999;
  }

  .scroll_table {
    height: 166px;
    width: 100%;
  }
}

.content_four {
  // flex: 1;
  width: 100%;
  height: 202px;

  .content_four_body {
    height: 146px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    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(7, 108, 208, 0), rgba(168, 212, 235, 1)) 1 1;
  }

  // 检测设备  应急车辆
  .modules_bg_jcsb {
    width: 223px;
    height: 126px;
    padding: 5px 5px 0px;
    // padding-left: 5px;
    box-sizing: border-box;
    .modules_bg_jcsb_body {
      display: flex;
      justify-content: space-between;
      .modules_bg_jcsb_body_left {
        width: 140px;
        .modules_bg_jcsb_body_left_content {
          display: flex;
          align-items: end;
          justify-content: space-between;
          width: 140;
          > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            font-style: normal;
            text-transform: none;
            > span {
              font-family: Roboto, Roboto;
              font-weight: bold;
              font-size: 16px;
              font-style: normal;
              text-transform: none;
              background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          > img {
            width: 22px;
            height: 21px;
            margin: 0px 5px 10px 5px;
          }
        }
      }
      .progress {
        margin-top: 5px;
        width: 54px;
        height: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;

        .text {
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          font-style: normal;
          text-transform: none;
          margin-top: 6px;
        }
        .circle {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 12px;
          width: 48px;
          height: 48px;
          :deep(.el-progress-circle) {
            width: 48px !important;
            height: 48px !important;
          }
        }
      }
    }
  }

  // 派单情况
  .modules_bg_pdqk {
    width: 300px;
    height: 126px;
    padding: 5px 20px 10px;
    box-sizing: border-box;
    .modules_bg_pdqk_body {
      display: flex;
      align-items: start;
      justify-content: space-between;
      position: relative;
      .modules_bg_pdqk_body_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        font-style: normal;
        text-transform: none;
        > span {
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 16px;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .line_img {
          width: 16px;
          height: 16px;
        }
      }

      .line {
        position: absolute;
        top: 10px;
        left: 24px;
        width: 192px;
        height: 16px;
        border-bottom: 2px dashed #175a7e;
        // position: relative;
        .line_img1 {
          //  position: absolute;
          // top:0px;
          // left: 0px;
          width: 26px;
          height: 26px;
          margin-left: 50px;
          margin-top: 4px;
          margin-right: 70px;
        }
        .line_img2 {
          margin-top: 4px;
          width: 26px;
          height: 26px;
        }
      }
    }
  }

  // 应急人员
  .modules_bg_yjry {
    width: 322px;
    height: 126px;
    padding: 5px 5px 5px;
    // padding-left: 10px;
    box-sizing: border-box;
    .modules_bg_yjry_body {
      display: flex;
      align-items: center;
      height: 82px;
      .modules_bg_yjry_body_zhz {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        font-style: normal;
        text-transform: none;
        > div {
          display: flex;
          align-items: center;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 14px;
          color: #08ffe5;
          font-style: normal;
          text-transform: none;
          > img {
            width: 24px;
            height: 24px;
            margin-left: 5px;
          }
        }
      }
      .modules_bg_yjry_left_content {
        display: flex;
        align-items: center;
        width: 150px;
        .modules_bg_yjry_left {
          width: 150px;
          margin-right: 15px;
          .modules_bg_yjry_left_content {
            display: flex;
            align-items: end;
            justify-content: space-between;
            width: 150;
            > div {
              display: flex;
              flex-direction: column;
              align-items: center;
              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
              font-weight: normal;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.9);
              font-style: normal;
              text-transform: none;
              > span {
                font-family: Roboto, Roboto;
                font-weight: bold;
                font-size: 16px;
                font-style: normal;
                text-transform: none;
                background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            > img {
              width: 22px;
              height: 21px;
              margin: 0px 5px 10px 5px;
            }
          }
        }
        .progress {
          width: 54px;
          height: 76px;
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;

          .text {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            font-style: normal;
            text-transform: none;
            margin-top: 6px;
          }
          .circle {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
            width: 48px;
            height: 48px;
            :deep(.el-progress-circle) {
              width: 48px !important;
              height: 48px !important;
            }
          }
        }
      }
      .line {
        height: 50px;
        width: 2px;
        background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
        margin: 0 15px;
      }
    }
  }

  .modules_bg_yjcl {
    width: 223px;
    height: 126px;
    padding: 5px 20px 10px;
    box-sizing: border-box;
  }
}
</style>