simulation-front/src/views/multimodeSimulation/simulationHome.vue

<template>
  <div class="multimodeSimulation">
    <search-layout :needBox="true">
      <template slot="searchItem1">
        <span class="label">项目ID</span>
        <el-input
          v-model="searchParams.projectId"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
        >
        </el-input>
      </template>
      <template slot="searchItem1">
        <span class="label">项目名称</span>
        <el-input
          v-model="searchParams.projectName"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
        >
        </el-input>
      </template>
      <template slot="searchItem4">
        <span class="label">项目进度</span>
        <el-select
          v-model="searchParams.projectStatus"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
        >
          <el-option
            v-for="(item, idx) in [
              { label: '未开始', value: '0' },
              { label: '运行中', value: '1' },
              { label: '已终止', value: '2' },
              { label: '已完成', value: '3' },
            ]"
            :label="item.label"
            :value="item.value"
            :key="idx"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchBtn1">
        <el-button type="primary" @click="doSearch">查询</el-button>
      </template>
      <template slot="searchBtn2">
        <!-- <el-button type="primary" @click="doReset">重置</el-button> -->
      </template>
    </search-layout>
    <div></div>
    <div style="display: flex; justify-content: end; margin: 20px 50px">
      <el-button
        class="addBtn"
        icon="el-icon-circle-plus-outline"
        @click="mapConfig"
        type="primary"
        >地图管理</el-button>
      <el-button
        class="addBtn"
        icon="el-icon-circle-plus-outline"
        @click="addConfig"
        type="primary"
        >新增</el-button
      >
    </div>
    <tableList
      ref="table"
      style="margin: 0 30px 30px"
      :columns="simulationColumns"
      :getDataWay="getDataWay"
      :pagination="pagination"
      index
    >
      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
        <template v-slot="scope">
          <!-- <span v-if="scope.row.projectStatus==1" @click="" class="elIcon"> 查看 </span> -->
          <span
            v-if="scope.row.projectStatus == '3'"
            @click="jumpDetailPage('preview',scope.row.id)"
            class="elIcon"
          >
            查看
          </span>
          <span
            v-if="scope.row.projectStatus == '0'"
            @click="jumpDetailPage('edit',scope.row.id)"
            class="elIcon"
          >
            编辑
          </span>
          <span @click="downloadTask(scope.row)" v-if="scope.row.projectStatus == '3'" class="elIcon">
             下载
          </span>
          <span @click="deleteById(scope.row)" class="elIcon"> 删除 </span>
          <span
            v-if="scope.row.projectStatus == '2'"
            @click="updateTask(scope.row)"
            class="elIcon"
          >
            终止
          </span>

          <span
            v-if="scope.row.projectStatus == '0'"
            @click="updateTask(scope.row)"
            class="elIcon"
          >
            运行
          </span>
        </template>
      </el-table-column>
    </tableList>
  </div>
</template>
<script>
import searchLayout from '@/components/grid/searchLayout'
import tableList from '@/components/grid/TableList'
import { mapState } from 'vuex'
export default {
  name: 'simulationHome', // 多模式仿真
  components: { searchLayout, tableList },
  data() {
    return {
      searchParams: {
        projectId: '', // 项目id
        projectName: '', // 项目名称
        projectStatus: '', // 项目进度
      },
      // 多模式仿真表头
      simulationColumns: [
        {
          label: '项目ID',
          prop: 'id',
        },
        {
          label: '项目名称',
          prop: 'projectName',
        },
        {
          label: '场景数量',
          prop: 'sceneNums',
        },
        {
          label: '创建时间',
          prop: 'createTime',
        },
        {
          label: '进度',
          prop: 'projectStatusValue',
        },
        {
          label: '操作',
          prop: 'cgInfos',
          template: true,
        },
      ],
      pagination: {
        //分页使用
        currentPage: 1,
        pageSize: 10,
        position: 'right',
        pageSizes: [10, 30, 50, 100, 200],
        layout: 'sizes, total, prev, pager, next, jumper',
      },
      getDataWay: {
        //加载表格数据
        dataType: 'url',
        type: 'post',
        data: this.$api.multimode.queryMulationList,
        param: {},
      },
    }
  },
  methods: {
    refreshList(param) {
      param
        ? this.$refs['table'].loadData(param)
        : this.$refs['table'].loadData()
    },
    doSearch() {
      this.refreshList({ ...this.searchParams })
    },
    doReset() {
      this.searchParams = {
        projectId: '', // 项目id
        projectName: '', // 项目名称
        projectStatus: '', // 项目进度
      }
      this.refreshList()
    },
    // 仿真任务状态更新
    updateTask(row) {
      const { id, projectStatus } = row
      this.$axios({
        method: 'post',
        url: this.$api.multimode.updateMulationStatus,
        data: {
          projectId: id,
          projectStatus: projectStatus == 0 || 2 ? 1 : 2,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('状态更新成功')
          this.doSearch()
        } else {
          this.$message.error(res.message || '更新失败')
        }
      })
    },
    // 删除仿真列表
    deleteById(row) {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.deleteMulationById,
        data: { projectId: row.id },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.doSearch()
        } else {
          this.$message.error(res.message || '删除失败')
        }
      })
    },
    // 下载仿真任务
    downloadTask(row){
      this.$axios({
        method: 'get',
        url: `${this.$api.multimode.downloadMulation}?projectId=${row.id}`,
        responseType: "blob", 
      }).then((res) => {
       this.$blobZipDown(res,row.projectName)
      })
    },
    addConfig() {
      this.$router.push({
        path: '/simulationEdit',
        query: { mode: 'add' },
      })
    },
    // 跳转地图管理
    mapConfig(){
      this.$router.push({
        path: '/simulationMap',
      })
    },
    jumpDetailPage(mode,id) {
      this.$router.push({
        path: '/simulationEdit',
        query: { mode,id },
      })
    },
  },
}
</script>
<style lang='less' scoped>
// @import './common/util.less';
.naturalDrivingScenarioListPanel {
  .inputBox {
    .label {
      min-width: 75px;
    }
  }

  .btnsPanel {
    text-align: right;
  }
}
</style>