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

<template>
  <div class="risk_table_container">
    <div class="risk_table_header">
      <div class="risk_table_header_tab">
        <el-button class="parallelogram-button" v-for="(item, index) in buttons" :key="index" :class="{ highlight: activeIndex === index }" @click="setActive(index)">
          <span class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">{{ item.title }}</span>
        </el-button>
      </div>
      <div class="risk_table_header_back" @click="goBack"></div>
    </div>
    <div class="risk_table_search">
      <div class="title_content">
        <div class="title">
          <img src="../../../assets/img/Group 4645(1).png" alt="" />
          <span>风险情况</span>
        </div>

        <div class="select_search">
          <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-select v-model="selectSearchObj.type" placeholder="风险类型" popper-class="custom-select">
            <el-option v-for="item in 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>
        </div>
      </div>
      <div class="line"></div>
    </div>

    <el-table :data="tableData" class="dialog_table" @row-click="handleRowClick">
      <el-table-column type="index" width="80" label="编号" />
      <el-table-column prop="date" label="风险名称" align="center" />
      <el-table-column prop="name" label="风险等级" align="center" />
      <el-table-column prop="name" label="报告单位" align="center" />
      <el-table-column prop="name" label="报告时间" align="center" />
      <el-table-column prop="name" label="发生地址" align="center" />
      <el-table-column prop="name" label="处置单位" align="center" />
      <el-table-column prop="name" label="病例数" align="center" />
      <el-table-column prop="name" label="重点场所" align="center" />
      <el-table-column prop="name" label="重点人群" align="center" />
      <el-table-column prop="name" label="最新状态" align="center" />
    </el-table>
  </div>
</template>
<script setup>
import TowLevelTitle from '../../../components/TowLevelTitle'
import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRiskTableStore } from '@/store/riskTable.js'
let riskTableStore = useRiskTableStore()
import { useCommonStore } from '@/store/common.js'
let commonStore = useCommonStore()

const emit = defineEmits(['changeRiskView'])
// const props = defineProps({
//   comeFrom: {}
// })

watch(
  () => riskTableStore.comeFrom,
  (newObj, oldObj) => {},
  {
    deep: true,
    immediate: true
  }
)

let buttons = ref([
  { id: 0, title: '当日', active: true },
  { id: 1, title: '当月', active: false },
  { id: 1, title: '当年', active: false }
])
let activeIndex = ref(0) // 存储当前高亮按钮的索引

function setActive(index) {
  // 切换高亮按钮，点击时高亮切换
  activeIndex.value = index
}

let selectSearchObj = ref({})
const riskTypeOptions = ref([
  { value: 1, label: '风险个案' },
  { value: 2, label: '风险事件' },
  { value: 3, label: '风险信息' }
])

const tableData = ref([
  {
    date: '浦东新区',
    name: '22',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '浦东新区',
    name: '22',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '浦东新区',
    name: '22',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '浦东新区',
    name: '22',
    address: 'No. 189, Grove St, Los Angeles'
  }
])

function handleRowClick() {
  if (riskTableStore.getComeFrom() === '风险列表') {
    // commonStore.setActiveIndex(1)
    riskTableStore.setInitShow(false)
    riskTableStore.setBigRiskTableShow(false)
    riskTableStore.setDisposalShow(true)
    riskTableStore.setCurrentBackground(1)
  } else {
    commonStore.setActiveIndex(1)
    riskTableStore.setInitShow(false)
    riskTableStore.setBigRiskTableShow(false)
    riskTableStore.setDisposalShow(true)
  }

  if (riskTableStore.getComeFrom() === '风险概况') {
    riskTableStore.setCurrentBackground(1)
  } else if (riskTableStore.getComeFrom() === '个案处置') {
    riskTableStore.setCurrentBackground(2)
  } else if (riskTableStore.getComeFrom() === '信息报告') {
    riskTableStore.setCurrentBackground(3)
  }
}

function goBack() {
  if (riskTableStore.getComeFrom() === '风险列表') {
    // commonStore.setActiveIndex(0)
    riskTableStore.setInitShow(true)
    riskTableStore.setBigRiskTableShow(false)
    riskTableStore.setDisposalShow(false)
  } else {
    // commonStore.setActiveIndex(1)
    riskTableStore.setInitShow(false)
    riskTableStore.setBigRiskTableShow(false)
    riskTableStore.setDisposalShow(true)
  }

  if (riskTableStore.getComeFrom() === '风险概况') {
    riskTableStore.setCurrentBackground(1)
  } else if (riskTableStore.getComeFrom() === '个案处置') {
    riskTableStore.setCurrentBackground(2)
  } else if (riskTableStore.getComeFrom() === '信息报告') {
    riskTableStore.setCurrentBackground(3)
  }
}
</script>
<style lang="scss" scoped>
.risk_table_container {
  width: 1092px;
  height: 100%;
  // background-color: pink;

  .risk_table_header {
    width: 1092px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .risk_table_header_tab {
      .parallelogram-button {
        margin: 0;
        display: inline-block;
        width: 100px;
        height: 40px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #e4ebf4;
        line-height: 19px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        text-align: center;
        border: none;
        cursor: pointer;
        transform: skew(-10deg);
        /* 倾斜生成平行四边形 */
        background: url(../../../assets/img/risk_tab.png) no-repeat;
        background-size: 100% 100%;

        .text-container {
          transform: skew(10deg);
        }

        .text-container-highlight {
        }
      }

      .parallelogram-button.highlight {
        background: url(../../../assets/img/risk_tab_active.png) no-repeat;
        background-size: 100% 100%;
      }

      .parallelogram-button:hover {
        // background-color: #66b1ff;
      }
    }

    .risk_table_header_back {
      width: 132px;
      height: 34px;
      background: url(../../../assets/img/back.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #e0e5fa;
    }
  }

  .risk_table_search {
    // display: flex;
    height: 28px;
    width: 100%;
    margin-bottom: 14px;
    .title_content {
      width: 100%;
      display: flex;
      align-items: center;

      // margin-bottom:5px;
      .title {
        width: 100%;
        display: flex;
        align-items: center;
        width: 100%;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        text-shadow: 0px 0px 9px #158eff;
        text-align: left;
        font-style: normal;
        text-transform: none;

        > img {
          margin-right: 10px;
        }
      }

      .select_search {
        display: flex;
        gap: 7px;
        width: 915px;

        > .el-select {
          width: 177px;
          height: 24px;
        }
      }
    }

    .line {
      margin-top: 5px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(59, 220, 255, 0) 0%, rgba(59, 220, 255, 0.6) 34%, rgba(59, 220, 255, 0) 100%);
    border-radius: 0px 0px 0px 0px;
    }
  }
}

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

:deep(.el-table__inner-wrapper:before) {
  height: 0;
}
</style>