jy2025-ui/src/views/hl/bm/component/widget/timeDetail.vue

<template>
  <div class="time-detail-container">
    <el-table :data="hsData" border :style="`width: ${hmsVisible?50:100}%`" max-height="500">
      <el-table-column label="对象类型" width="130">
        <template #default="scope">
          <dict-tag :options="biz_type" :value="scope.row.objType"/>
        </template>
      </el-table-column>
      <el-table-column label="业务对象">
        <template #default="scope">
          <span v-for="(item,index) in scope.row.hlObjList">
            {{item.objName}}<span v-if="index != scope.row.hlObjList.length-1">,</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="分值" width="80" prop="hlScore" />
      <el-table-column label="得分" prop="score"  width="80"/>
      <el-table-column label="操作" width="80" align="center">
        <template #default="scope">
          <el-button type="primary" link icon="edit" @click="handleDetail(scope.row)">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="hmsDetailData" style="width: 48%" border v-if="hmsVisible">
      <el-table-column label="指标名称" prop="metricsName" width="150"/>
      <el-table-column label="指标编码" prop="metricsCode"/>
      <el-table-column label="健康度分值" prop="hlScore" width="100"/>
      <el-table-column label="评分标准" width="120">
        <template #default="scope">
          <dict-tag :options="score_stand" :value="scope.row.hlStand"/>
        </template>
      </el-table-column>
      <el-table-column label="得分"  width="60" align="center">
        <template #default="scope">
          <span :class="{'error':scope.row.score != scope.row.hlScore}" @click="handleScoreDetails(scope.row)">
            {{scope.row.score}}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="scoreVisible" title="得分明细" width="800">
    <score-detail :scoreData="scoreData"/>
  </el-dialog>

</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance()
import {onMounted} from "vue";
import {hcsDetails} from "@/api/hl/hcs"
import {listHmsDetails,getHmsList} from "@/api/hl/hms"
import scoreDetail from "./scoreDetail.vue"
const props = defineProps(['rowData'])
const {biz_type,metrics_small_type} = proxy.useDict('biz_type','metrics_small_type');
const { score_stand } = proxy.useDict('score_stand');
const hsData = ref([])
const hmsDetailData = ref([])
const hmsVisible = ref(false)
const scoreVisible = ref(false)
const scoreData = ref([])

onMounted(()=>{
  getDetail()
})

async function handleDetail(row){
  const res = await listHmsDetails(row.scoreClassId)
  hmsDetailData.value = res.data
  hmsVisible.value = true
}

async function getDetail(){
  hmsDetailData.value = []
  const res = await hcsDetails(props.rowData.hlScoreId)
  hsData.value = res.data
}

async function handleScoreDetails(row){
  const res = await getHmsList(row.scoreMetricsId)
  scoreVisible.value = true
  scoreData.value = res.data
}

</script>
<style scoped lang="scss">
.time-detail-container{
  min-height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .error{
    cursor: pointer;
    color:#e43;
    font-weight: bold;
    &:hover{
      text-decoration: underline;
    }
  }
}
</style>