EOC-UI/src/views/left/dialog/PublicHealthRisksDialog.vue

<template>
  <div class="table_container">
    <TowLevelTitle :title="'公共卫生风险'" :buttons="buttons"></TowLevelTitle>
    <div class="select_search">
      <el-select v-model="dialogStore.selectSearchObj.type" placeholder="风险类型" popper-class="custom-select">
        <el-option v-for="item in dialogStore.riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <!-- <el-select v-model="selectSearchObj.value" placeholder="日期" popper-class="custom-select">
        <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->

      <el-date-picker v-model="dialogStore.selectSearchObj.time" type="date" placeholder="请选择日期" size="small" popper-class="date_picker_custom-class"></el-date-picker>
      <el-select v-model="dialogStore.selectSearchObj.status" placeholder="状态" popper-class="custom-select">
        <el-option v-for="item in dialogStore.riskStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>

    <el-table :data="tableData" class="dialog_table" :row-class-name="rowClassName" @row-click="handleRowClick">
      <el-table-column prop="area" label="行政区划" align="center" />
      <el-table-column prop="riskLevelA" label="A级" align="center" width="55" />
      <el-table-column prop="riskLevelB" label="B级" align="center" width="55" />
      <el-table-column prop="riskLevelC" label="C级" align="center" width="55" />
      <el-table-column prop="riskLevelD" label="D级" align="center" width="60" />
    </el-table>
  </div>
</template>
<script setup>
import TowLevelTitle from '../../../components/TowLevelTitle'
import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()

import {
  riskTypeOptions,
  riskLevelList,
  riskStatusOptions
} from "@/data/dict.js";

const buttons = ref([
  { id: 1, name: '报告地', active: false },
  { id: 2, name: '发生地', active: true }
])
let selectSearchObj = ref({})
// const riskTypeOptions = ref([
//   { value: 1, label: '风险个案' },
//   { value: 2, label: '风险事件' },
//   { value: 3, label: '风险信息' }
// ])

// const riskStatusOptions = ref([
//   { value: 1, label: '处置中' },
//   { value: 2, label: '已结案' }
// ])

const tableData = ref([
  {
    area: '全市',
    riskLevelA: '16',
    riskLevelB: '16',
    riskLevelC: '16',
    riskLevelD: '16'
  },
  {
    area: '黄浦区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '徐汇区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '静安区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '长宁区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '静安区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '普陀区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '虹口区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '长宁区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '闵行区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '宝山区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '嘉定区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '浦东新区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '金山区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '松江区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '青浦区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '奉贤区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  },
  {
    area: '崇明区',
    riskLevelA: '2',
    riskLevelB: '2',
    riskLevelC: '2',
    riskLevelD: '2'
  }
])

// function rowStyle () {
//   return {
//     height: '28px',
//     background: 'rgba(0, 170, 255, 0.15) ',
//     borderRadius: '0px 0px 0px 0px',
//     fontFamily: 'Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30',
//     fontWeight: 'normal',
//     fontSize: '12px',
//     color: 'rgba(255, 255, 255, 0.9)',
//   }
// }

const selectedRowIndex = ref(null)
function rowClassName({ row, rowIndex }) {
  let className = ''
  if (rowIndex === 0) {
    return 'yellow-text' // 第一行文字为黄色
  }
}

function handleRowClick() {}
</script>
<style lang="scss" scoped>
.table_container {
  width: 360px;
  height: 721px;
  background: url('../../../assets/img/疫情风险数据弹窗(1).png');
  background-size: 100% 100%;
  position: absolute;
  top: 65px;
  right: -440px;
  padding: 23px 22px;
  box-sizing: border-box;
}

.select_search {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.dialog_table {
  width: 100%;
  height: 600px;
}

// 表格行间距
:deep(.el-table__body) {
  -webkit-border-vertical-spacing: 10px;
}

:deep(.el-table__inner-wrapper:before) {
  height: 0;
}

:deep(.el-select__wrapper) {
  min-height: 24px !important;
}

:deep(.el-table) {
  tr {
    background-color: rgba(0, 170, 255, 0.15) !important;
    font-weight: 400 !important;
  }
}
</style>
<style lang="scss">
//下拉框文字
:deep(.el-input__inner) {
  //  color:#e1dcdc;
  //  color: var(--TextColor);
}

//下拉框背景色
.el-popper.is-light.custom-select {
  // background-color: rgba(16,104,179, 0.3) !important;
  background-color: rgba(16, 104, 179, 0.3) !important;
  // border: 1px solid #1d85a9 !important;
  border: 1px solid #1d85a9 !important;
  background: #003861 !important;
  box-shadow: inset 0px 0px 8px 0px rgba(64, 211, 255, 0.5) !important;
  border-radius: 4px 4px 4px 4px;
}

.el-select-dropdown__empty,
.el-select-dropdown__loading {
  color: #ffffff !important;
}

.el-select__placeholder {
  color: #ffffff !important;
}

//下拉框的链接小方块
.custom-select.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
  // background: rgba(1, 28, 82, 0.8) !important;
  // background-color: rgba(16,104,179, 0.3) !important;
  display: none;
  // border: 1px solid #1d85a9 !important;
}

.custom-select.el-popper[data-popper-placement^='top'] .el-popper__arrow::before {
  // background: #254277 !important;
  // background-color: rgba(16,104,179, 0.3)!important;
  // border: 1px solid #1d85a9 !important;
}

//鼠标移动上去的选中色
.custom-select {
  .el-select-dropdown__item.is-hovering {
    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
    border-radius: 2px 2px 2px 2px;
  }

  //下拉框的文本颜色
  .custom-select .el-select-dropdown__item {
    // color: #B3BCCE  !important;
    // color: var(--SelectrColor) !important;
    color: #ffffff !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    // background: var(--SelectredBgc2) !important;
    // color: var(--SelectredColor) !important;

    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
    border-radius: 2px 2px 2px 2px;
  }

  padding: 0 2px !important;
}

.el-select {
  --el-border-color-hover: rgba(10, 192, 246, 1);
  --el-border-color: rgba(111, 229, 255, 0.3);
}

// 表格
.el-table {
  // background-color: rgba(0, 170, 255, 0.15);
  background-color: rgba(10, 39, 50, 0.15);
  --el-table-border-color: transparent !important;
  --el-font-size-base: 12px !important;
  // color: #ffffff;
}

.dialog_table .yellow-text {
  color: #ffd15c !important;
  // background: rgba(0, 170, 255, 0.15) !important
}

/* 为选中行添加深蓝色背景 */
.dialog_table .el-table__row {
  height: 28px;
  border-radius: 0px 0px 0px 0px;
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 170, 255, 0.15) !important;
}

.dialog_table th {
  height: 28px;
  border-radius: 0px 0px 0px 0px;
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  // background-color: rgba(0, 170, 255, 0.15) !important;
  background-color: rgba(0, 170, 255, 0.15) !important;
  font-weight: normal !important;
}

// table伪类显示白色问题
.el-table__body tr.hover-row > td.el-table__cell,
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(15, 61, 151, 0.8) !important;
}

.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: transparent;
}

// .date_picker_custom-class {
//   // .el----(自己需要修改的样式类名){
//   // 	padding:unset;//需要修改什么样式，直接修改就好
//   // }
//   .el-date-picker{
//      background-color: rgba(0, 170, 255, 0.15) !important;
//   }
//   .el-picker-panel__body-wrapper{
//      background-color: rgba(0, 170, 255, 0.15) !important;
//   }
//   .el-picker-panel__body {
//     font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
//     font-size: 16px;
//     color: rgba(255, 255, 255, 0.9);
//     // background-color: rgba(0, 170, 255, 0.15) !important;
//     background-color: rgba(0, 170, 255, 0.15) !important;
//   }
// }

/* 针对日期选择器面板整体背景和文字颜色 */
.date_picker_custom-class {
  // background-color: #2c2c2c !important;
  background-color: #214370 !important;

  border: 1px solid #1d85a9 !important;
  color: #fff !important;
}

// .el-picker__popper.el-popper{
//    background-color: rgba(0, 170, 255, 0.15) !important;
// }

/* ✅ 修改日期切换箭头颜色 */
.date_picker_custom-class .el-picker-panel__icon-btn {
  color: #1d85a9 !important; /* 修改箭头颜色 */
}

/* 选中时箭头的颜色 */
.date_picker_custom-class .el-picker-panel__icon-btn:hover {
  color: #00ffaa !important; /* 鼠标悬停时箭头颜色 */
}

/* ✅ 隐藏下拉控件的箭头 */
.date_picker_custom-class .el-popper__arrow {
  display: none !important;
}

.el-date-picker__header-label {
  color: #fff !important;
}
/* 针对面板内容区域 */
.date_picker_custom-class .el-picker-panel__body {
  background-color: #214370;
  color: #fff;
}

/* 针对日期表格的表头和单元格 */
.date_picker_custom-class .el-date-table th,
.date_picker_custom-class .el-date-table td {
  background-color: #214370;
  color: #fff;
}

/* 鼠标悬停时改变单元格背景色 */
.date_picker_custom-class .el-date-table td:hover {
  background-color: #3a3a3a;
}

/* 针对面板底部的按钮区域 */
.date_picker_custom-class .el-picker-panel__footer {
  background-color: #214370;
  color: #fff;
}
</style>