项目实训：正在处理的图表页面展示

正在处理的图表页面展示

任务

由于实现异步分析，所以需要对处于队列中的图表进行，展示故开发一个新的页面

1. 前端，主要展示图表名称，状态，部分信息、

   v-if逻辑，如果没有就展示空状态，如果有就展示正在处理的状态

<template>
  <div class="app-container">
    <el-empty description="暂时没有任务" v-if="isEmpty" ></el-empty>
    <div v-if="!isEmpty">
    <el-row :gutter="20"> <!-- 添加gutter可以设置卡片之间的间隔 -->
      <el-col :span="8" v-for="(chartData, index) in chartSet" :key="index"> <!-- 每个卡片占6列，共4列 -->
        <el-card
          :body-style="{ padding: '10px',height:'545px'}"
          shadow="hover"
          class="chart-card"
        >
        <p style="text-align: center; width: fit-content; margin: 0 auto;color: teal;font-weight: bold;">图表名称：{{chartData.name }}</p>
        <el-divider></el-divider>
        <p>图表信息摘要</p>
        <p>{{subString(chartData.rawData) }}</p>
        <el-result  title="图表生成中">
          <template slot="icon">
            <el-image src="http://www.easyicon.cn/api/resizeApi.php?id=1291258&size=128" ></el-image>
          </template>
          <template slot="extra">
            <p style="text-align: center; width: fit-content; margin: 0 auto;color: teal;font-weight: bold;">图表状态：{{chartData.status }}</p>
          </template>
        </el-result>
        
        </el-card>
     </el-col>
   </el-row>
  </div>
  </div>
</template>

<el-empty> 组件：当 isEmpty 为 true 时显示，用于展示“暂时没有任务”。
v-if=“!isEmpty”：当 isEmpty 为 false 时显示整个图表展示区域。
<el-row> 和 <el-col>：基于 Element UI 的布局组件，用于实现响应式布局，<el-col> 内部循环显示每个图表的卡片。
<el-card>：Element UI 的卡片组件，用于展示图表相关信息。
{{ chartData.name }} 和 {{ chartData.status }}：动态显示每个图表的名称和状态。
<el-result>：Element UI 的结果组件，用于展示图表生成中的状态，包含图标和额外信息。

<script>
import { queryByChartStatus } from '@/api/chart';
import { mapGetters } from 'vuex'
export default {
  name: 'Task',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
     chartSet:[],
     isEmpty:true,
    }
  },
  created(){
    queryByChartStatus({data:{userAccount:this.name,status:"succeed"}}).then(response=>{
      this.chartSet=response.data
      if(this.chartSet!=null){
        this.isEmpty=false
      }
    })
  },
  watch: {

  },

  methods: {
    subString(data){
      if(data.length>72){
        return data.substring(0,72)+"....."
      }else{
        return data
      }
    }
  }
}
</script>

computed 属性：使用 vuex 的 mapGetters 获取 name。
data 数据：chartSet 存储从后端查询的图表数据，isEmpty 控制是否展示空状态。
created() 钩子函数：组件创建时调用 queryByChartStatus 函数从后端查询符合条件的图表数据，并根据返回结果设置 chartSet 和 isEmpty。
subString(data) 方法：用于截取过长的图表数据摘要，保证显示的信息不过长。

动态展示图表任务状态和信息的前端组件。根据 isEmpty 的状态，决定展示空状态或者每个图表的详细信息。通过 queryByChartStatus 异步请求获取数据，并在页面上动态展示，同时利用 Element UI 的组件来实现页面的布局和样式。

• 空状态

  

• 存在处理的图表

  

2. 后端，主要是根据状态查询数据库中的没有完成的图表数据

   • 控制层

       @PostMapping("/queryRunningChart")
       public DataResponse queryRunningChart(@RequestBody DataRequest dataRequest){
           String userAccount= dataRequest.getString("userAccount");
           int userId=userService.GetUserId(userAccount);
           String status= dataRequest.getString("status");
           List<Chart> data=chartService.queryChartByStatus(userId,status);
           return CommonMethod.getReturnData(200,data,"ok!");
       }
   

   注解和方法签名：
   @PostMapping(“/queryRunningChart”)：注解指示这是一个处理POST请求的方法，并且请求的路径是"/queryRunningChart"。
   public DataResponse queryRunningChart(@RequestBody DataRequest dataRequest)：方法接收一个DataRequest对象作为请求体，并返回一个DataResponse对象作为响应体。

   方法实现：
   从dataRequest中获取userAccount，这个账号用于找到对应的用户ID。
   通过调用userService.GetUserId(userAccount)获取用户ID。
   从dataRequest中获取status，表示要查询的图表数据的状态。
   调用chartService.queryChartByStatus(userId, status)来查询符合条件的图表数据。
   最后，调用CommonMethod.getReturnData(200, data, “ok!”)生成一个DataResponse对象作为响应，包含HTTP状态码200，查询到的数据data，以及消息"ok!"。

   • 服务层

       public List<Chart> queryChartByStatus(int userId, String status) {
           QueryWrapper<Chart> queryWrapper = new QueryWrapper<>();
           queryWrapper.eq("userId",userId);
           queryWrapper.ne("status",status);
           return this.baseMapper.selectList(queryWrapper);
       }
   

   方法定义：

   public List<Chart> queryChartByStatus(int userId, String status)：方法接收一个userId和status作为参数，用于查询符合条件的图表数据列表。

   方法实现：
   创建一个QueryWrapper对象queryWrapper，用于构建查询条件。
   使用queryWrapper.eq(“userId”, userId)添加查询条件，要求userId字段等于给定的userId。
   使用queryWrapper.ne(“status”, status)添加查询条件，要求status字段不等于给定的status。
   调用this.baseMapper.selectList(queryWrapper)执行查询操作，baseMapper表示当前服务类的基础映射器，这里执行的是selectList方法，根据queryWrapper中的条件查询符合条件的Chart对象列表。

根据用户和状态查询数据库中未完成的图表数据。控制层负责接收请求、解析参数、调用服务层方法并返回响应。服务层负责实际的数据查询操作，利用QueryWrapper构建复杂的查询条件，并通过baseMapper执行数据库查询操作，最终返回符合条件的图表数据列表。