admin-sjzx/src/views/pqs/runManage/assessment/components/assess/index.vue

<template>
  <div :style="height">
      <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
          <pane :size="size">
              <AssessTree
                  :default-expand-all="false"
                  @node-click="handleNodeClick"
                  @init="handleNodeClick"
                  ref="assessTreeRef"
                  :highlight-current = 'true'
                  :current-node-key="currentTreeKey"
                  :expand-on-click-node="false"
              ></AssessTree>
          </pane>
          <pane style="background: #fff">
              <div class="actionButtons mb10">
                <el-button icon="el-icon-Download" type="primary" @click="exportExcelTemplate"  :loading="loading">模版下载</el-button>
                <el-button type="primary" icon="el-icon-Upload" @click="handleImportClick">导入数据背景</el-button>
                  <el-button type="primary" icon="el-icon-Memo" class="ml10" @click="assess2">评估</el-button>
                  <el-button type="primary" icon="el-icon-Download" @click="exportReport">导出报告</el-button>
              </div>
              <div :style="collapseHeight" style="overflow-y: auto">
                  <el-collapse v-model="collapseName" class="pl10 pr10">
                      <el-collapse-item title="基本信息" :name="1">
                        <div class="loading-container">
                          <div v-if="infoLoading" class="loading-wrapper">
                            <el-icon class="is-loading"><Loading /></el-icon>
                            <span class="loading-text">加载中...</span>
                          </div>
                          <information 
                              v-show="!infoLoading" 
                              :node-id="currentNodeId" 
                              @data-loaded="() => infoLoading = false" 
                          />
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="评估结果信息" :name="2">
                        <div class="loading-container">
                          <div v-if="outcomeLoading" class="loading-wrapper">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span class="loading-text">加载中...</span>
                        </div>
                          <Outcome 
                              v-show="!outcomeLoading" 
                              :node-id="currentNodeId" 
                              @data-status="handleDataStatus" 
                              @data-loaded="() => outcomeLoading = false" 
                
                          />
                        </div>
                      </el-collapse-item>
                  </el-collapse>
              </div>
          </pane>
      </splitpanes>
  </div>

 <AssessTemplate ref="assessTemplate" @data-success = "assess"></AssessTemplate>

</template>

<script setup lang="ts">
import { ElMessage, ElLoading } from 'element-plus'
import { onMounted, ref, provide ,nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import AssessTree from '@/components/tree/pqs/assessTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import information from './information.vue'
import Outcome from './outcome.vue'
import {exportResult,downloadAssessTemplate,assessResult,userGetInfo} from '@/api/advance-boot/assess'
import { Loading } from '@element-plus/icons-vue'
import AssessTemplate from './assessTemplate.vue'
import { fa, tr } from 'element-plus/es/locale'


defineOptions({
  // name: 'harmonic-boot/report/word'
})
const collapseName = ref([1, 2])
const height = mainHeight(80)
const collapseHeight = mainHeight(125)
const size = ref(0)
const dotList: any = ref({})
const infoLoading = ref(false)
const outcomeLoading = ref(false)
const loading = ref(false)
const assessTemplate = ref()
// 添加当前节点 ID 的响应式变量
const currentNodeId = ref<string | number | null>(null)
const currentNodeName = ref('')


const tableStore = new TableStore({
  url: '',
  method: 'POST',
  column: [],
  beforeSearchFun: () => {},
  loadCallback: () => {}
})
provide('tableStore', tableStore)

//有无评估结果
const result = ref(true)
const handleDataStatus = (hasData: boolean) => {
if (!hasData) {
  result.value = false
} else {
  result.value = true
}
}

//模板下载
const exportExcelTemplate = async () => {
  loading.value = true
  downloadAssessTemplate().then((res: any) => {
      let blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
      })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = '评估结果模板'
      document.body.appendChild(link)
      link.click()
      link.remove()
  })
  await setTimeout(() => {
      loading.value = false
  }, 0)
}

//导出
const exportReport = () => { 
  if (!result.value){
      ElMessage.warning('请先评估！')
      return
  } 
  
  const loadingMessage = ElMessage({
    message: '正在导出中',
    icon: h(Loading),
    duration: 0 // 不自动关闭
  })
  
  exportResult({}, currentNodeId.value ?? '').then((res: any) => {
      let blob = new Blob([res], {  // 注意使用 res.data 而不是 res
         type: 'application/vnd.ms-excel'
      })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = currentNodeName.value + '-评估结果.xls'  // 建议添加文件扩展名
      document.body.appendChild(link)
      link.click()
      link.remove()
      window.URL.revokeObjectURL(url)
      
      // 关闭加载提示并显示成功消息
      loadingMessage.close() 
      ElMessage.success('导出成功！')
  }).catch(error => {
      // 处理导出失败情况
      loadingMessage.close() 
      ElMessage.error('导出失败，请重试！')
  })
}


//导入
const handleImportClick = () => {
  if (!currentNodeId.value) {
    ElMessage.warning('请选择评估节点！')
    return
  }
  assessTemplate.value.open('导入背景数据', currentNodeId.value.toString())
}


// 导入弹窗关闭后通知父组件更新
const assess = async () => {
    // 展开评估结果
    collapseName.value = [2]
    // 更新评估状态
    result.value = true

    // ✅ 强制更新 nodeId，触发子组件的 watch
    // 可以通过修改 currentNodeId 的值，或者重新赋值来触发 watch
    const tempId = currentNodeId.value
    currentNodeId.value = null // 先置空

    setTimeout(() => {
      currentNodeId.value = tempId // 再恢复，触发 watch
    }, 0)
}

//评估
const assess2 = async () => {
  // 显示导出中提示
  const loading = ElMessage({
    message: '评估结果中',
    icon: h(Loading),
    duration: 0 // 不自动关闭
  })

  userGetInfo({ assessId: currentNodeId.value }).then(res => {
    // 获取昨天的日期
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);

    // 格式化为 yyyy-MM-dd
    const yyyy = yesterday.getFullYear();
    const mm = String(yesterday.getMonth() + 1).padStart(2, '0');
    const dd = String(yesterday.getDate()).padStart(2, '0');
    const yesterdayStr = `${yyyy}-${mm}-${dd}`;

    const assessData = {
    assessId: currentNodeId.value,
    endTime: `${yesterdayStr} 23:59:59`, // 使用动态的昨天日期
    id: res.data.lineId,
    startTime: `${yesterdayStr} 00:00:00` // 使用动态的昨天日期
  };

    assessResult(assessData).then(res => {
      // 关闭加载提示并显示成功消息
      loading.close();
      ElMessage.success('评估成功！');

      // 展开评估结果
      collapseName.value = [2];
      // 更新评估状态
      result.value = true;

      const tempId = currentNodeId.value;
      currentNodeId.value = null; // 先置空
      setTimeout(() => {
        currentNodeId.value = tempId; // 再恢复，触发 watch
      }, 0);
    }).catch(error => {
      // 关闭加载提示并显示失败消息
      loading.close();
      ElMessage.error('评估失败');
    });
  }).catch(error => {
    // 处理 userGetInfo 的错误
    loading.close();
    ElMessage.error('获取用户信息失败');
  });
};

onMounted(() => {
  const dom = document.getElementById('navigation-splitpanes')
  setTimeout(() => {
      if (dom) {
          size.value = Math.round((180 / dom.offsetHeight) * 120)
      }
  }, 100)
})

// 添加树组件的引用
const assessTreeRef = ref<any>(null)
// 控制树组件当前高亮的节点key
const currentTreeKey = ref<string | number | null>(null)
// 保存上一次真正有效的节点key（子节点）
const lastValidNodeKey = ref<string | number | null>(null)

const handleNodeClick = (data: any, node: any) => {
// 阻止点击父节点的逻辑处理
if (!data || 
    (node && !node.isLeaf) || 
    (data.children && data.children.length > 0) ||
    (node && node.childNodes && node.childNodes.length > 0)) {
  
  // 点击父节点时，保持树的高亮状态为上一次有效的子节点
  currentTreeKey.value = lastValidNodeKey.value
  return
}


// 如果点击的是同一个节点，不需要重新加载，但可以提供刷新功能
  if (currentNodeId.value === data?.id) {
    // 可选：如果你希望重复点击能刷新数据，可以保留下面的代码
    // 否则可以直接 return 不做任何操作
    infoLoading.value = true
    outcomeLoading.value = true
    // 强制触发子组件重新加载，通过先置空再恢复
    const tempId = currentNodeId.value
    currentNodeId.value = null
    nextTick(() => {
      currentNodeId.value = tempId
    })
    return
  }

// 点击的是不同的子节点，更新高亮状态
lastValidNodeKey.value = data?.id || null
currentTreeKey.value = lastValidNodeKey.value
dotList.value = data
currentNodeId.value = data?.id || null
currentNodeName.value = data?.name || ''

// ✅ 开启两个 loading
infoLoading.value = true
outcomeLoading.value = true
}
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
  background: #eaeef1;
}

:deep(.el-collapse-item__header) {
  // font-family: AlimamaDongFangDaKai;
  font-size: 20px;
  &::before {
      content: '▍'; /* 添加星号 */
      font-size: 16px;
      color: var(--el-color-primary);

  }
}

.actionButtons {
  display: flex;
  justify-content: end;
}

.loading-container {
position: relative;
min-height: 100px; /* 防止空白时高度塌陷 */
}

.loading-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.loading-text {
margin-left: 8px;
color: #606266;
}


.is-loading {
animation: rotating 2s linear infinite;
}

@keyframes rotating {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

.ml10 {
margin-left: 10px;
}
</style>