simulation-front/src/views/sceneLibrary/standardRegulationSimulationScenarioList.vue

<template>
  <div>
    <search-layout :needBox="true">
      <template slot="searchItem1">
        <span class="label">场景名称</span>
        <el-input
          v-model="searchParams.sceneName"
          size="small"
          maxlength="60"
          clearable
          placeholder="请输入"
          @keyup.enter.native="doSearch"
        >
        </el-input>
      </template>
      <template slot="searchItem2">
        <span class="label">法规类型</span>
        <el-select
          v-model="searchParams.regulationType"
          multiple
          clearable
          size="small"
        >
          <el-option
            v-for="item in regulationTypeList"
            :label="item.caption"
            :value="item.code"
            :key="item.code"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchItem3">
        <span class="label">标准类型</span>
        <el-input
          v-model="searchParams.standardType"
          size="small"
          maxlength="60"
          clearable
          placeholder="请输入"
          @keyup.enter.native="doSearch"
        >
        </el-input>
      </template>
      <!-- 复杂度 -->
      <template slot="searchItem6">
        <span class="label">复杂度</span>
        <el-input
          v-model="searchParams.a"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
        <span class="dateSeparator">至</span>
        <el-input
          v-model="searchParams.b"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
      </template>
      <!-- 危险度 -->
      <template slot="searchItem6">
        <span class="label">危险度</span>
        <el-input
          v-model="searchParams.a"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
        <span class="dateSeparator">至</span>
        <el-input
          v-model="searchParams.b"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
      </template>
      <template slot="searchItem8">
        <span class="label">复杂度等级</span>
        <el-select
          v-model="searchParams.scenarioRoadType"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in scenarioRoadTypeList"
            :label="item.caption"
            :value="item.code"
            :key="item.code"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchItem8">
        <span class="label">危险度等级</span>
        <el-select
          v-model="searchParams.scenarioRoadType"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in scenarioRoadTypeList"
            :label="item.caption"
            :value="item.code"
            :key="item.code"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchItem27">
        <!-- <el-checkbox-group v-model="labels">
                    <el-checkbox-button label="ISO" :key="1" class="labelA"
                        >ISO</el-checkbox-button
                    >
                    <el-checkbox-button label="GB" :key="2" class="labelB"
                        >GB</el-checkbox-button
                    >
                    <el-checkbox-button label="C-NCAP" :key="3" class="labelC"
                        >C-NCAP</el-checkbox-button
                    >
                    <el-checkbox-button label="E-NCAP" :key="4" class="labelD"
                        >E-NCAP</el-checkbox-button
                    >
                </el-checkbox-group> -->
        <div class="labelsBox">
          <b class="labelA" @click="conditions(1)">ISO</b>
          <b class="labelB" @click="conditions(2)">GB</b>
          <b class="labelC" @click="conditions(3)">C-NCAP</b>
          <b class="labelD" @click="conditions(4)">E-NCAP</b>
        </div>
      </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 class="myTabsBox">
      <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
        <el-tab-pane label="公有" name="1"></el-tab-pane>
        <el-tab-pane label="私有" name="2"></el-tab-pane>
      </el-tabs>
    </div>

    <tableList
      ref="table"
      style="margin: 0 30px 30px"
      :columns="columns"
      :getDataWay="getDataWay"
      :pagination="pagination"
      index
    >
      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
        <template v-slot="scope">
          <i
            @click="viewRow(scope.row)"
            class="el-icon-view elIcon cursor"
            title="查看"
          >
          </i>
          <span @click="jumpScene(scope.row)" class="elIcon"> 场景评价 </span>
        </template>
      </el-table-column>
    </tableList>

    <el-dialog
      :title="videoDiaTitle"
      :visible.sync="dialogVisible"
      width="690px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="diaClose"
    >
      <div class="videoBox">
        <video autoplay :src="videoSrc" controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import searchLayout from '@/components/grid/searchLayout'
import tableList from '@/components/grid/TableList'
import { mapState } from 'vuex'

export default {
  name: 'standardRegulationSimulationScenarioList', // 标准法规场景
  components: { searchLayout, tableList },
  data() {
    return {
      activeName: '2',
      searchParams: {
        //搜索参数
        sceneName: '', //场景名称
        regulationType: [], //法规类型
        standardType: '', //标准类型
        label: [],
        share: '0',
      },
      labels: [], // 标签
      regulationTypeList: [],
      columns: [
        //表格列
        {
          label: '场景名称',
          prop: 'sceneName',
        },
        {
          label: '法规类型',
          prop: 'regulationType',
        },
        {
          label: '标准类型',
          prop: 'standardType',
        },
        {
          label: '标签',
          prop: 'regulationType',
        },
        {
          label: '复杂度',
          prop: 'complexity',
        },
        {
          label: '复杂度等级',
          prop: 'complexityLevel',
        },
        {
          label: '危险度',
          prop: 'risk',
        },
        {
          label: '危险度等级',
          prop: 'riskLevel',
        },
        {
          label: '操作',
          prop: 'cgInfos',
          template: true,
          // videoAddress
        },
      ],
      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',
        // firstRequest: false,
        data: this.$api.sceneLibrary.queryStandardsRegulationsList,
        param: {
          share: '0',
        },
      },
      dialogVisible: false,
      autoplay: false,
      videoSrc: '',
      objectPath: '',
      videoDiaTitle: '',
    }
  },

  computed: {
    ...mapState(['fileHost', 'fileUrl']),
  },

  methods: {
    doSearch() {
      // this.searchParams.label = [...this.labels];
      this.searchParams.share = this.activeName === '1' ? '1' : '0'
      this.refreshList(this.searchParams)
    },
    //刷新table
    refreshList(param) {
      param
        ? this.$refs['table'].loadData(param)
        : this.$refs['table'].loadData()
    },
    doReset() {
      this.searchParams = {
        sceneName: '',
        regulationType: [],
        standardType: '',
        label: [],
        share: this.activeName === '1' ? '1' : '0',
      }
      // this.labels = [];
      this.doSearch()
    },
    pageControl(data) {
      this.activeName = data.name
      this.doSearch()
    },
    conditions(v) {
      switch (v) {
        case 1:
          if (!this.searchParams.regulationType.includes('ISO')) {
            this.searchParams.regulationType = [
              ...this.searchParams.regulationType,
              'ISO',
            ]
          }
          break
        case 2:
          if (!this.searchParams.regulationType.includes('GB')) {
            this.searchParams.regulationType = [
              ...this.searchParams.regulationType,
              'GB',
            ]
          }
          break
        case 3:
          if (!this.searchParams.regulationType.includes('C-NCAP')) {
            this.searchParams.regulationType = [
              ...this.searchParams.regulationType,
              'C-NCAP',
            ]
          }
          break
        case 4:
          if (!this.searchParams.regulationType.includes('E-NCAP')) {
            this.searchParams.regulationType = [
              ...this.searchParams.regulationType,
              'E-NCAP',
            ]
          }
          break
        default:
          break
      }
    },
    jumpScene(row) {
      this.$store.commit('getSceneId', row.regulationsId)
      this.$router.push({
        path: '/sceneEvaluation',
      })
    },
    viewRow(row) {
      if (!row.videoAddress) {
        this.$message.warning('本场景无仿真视频')
        return
      }

      this.dialogVisible = true
      this.videoDiaTitle = row.sceneName

      let url = ''
      if (process.env.VUE_APP_IS_DEV == 'true') {
        url = this.fileHost + this.fileUrl
      } else {
        url = this.fileUrl
      }

      let token = localStorage.getItem('Authorization').split(' ')[1]
      this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`
      this.autoplay = true
    },
    delRow(row) {
      this.$confirm('确认是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios({
          method: 'post',
          url: this.$api.sceneLibrary.deleteStandardsRegulations,
          data: {
            regulationsId: row.regulationsId,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.message || '删除失败')
          }
          this.doSearch()
        })
      })
    },
    diaClose(done) {
      this.autoplay = false
      this.videoSrc = ''
      done()
    },
    openFileDia() {
      this.objectPath = Math.random().toString()
      this.$refs.fileDialog.fileVisible = true
    },
    fileClose() {
      this.objectPath = ''
      this.doSearch()
    },
  },

  async mounted() {
    await this.$dicsListsInit({
      regulationTypeList: 'regulationType',
    })
  },
}
</script>

<style lang='less' scoped>
@import './common/util.less';
.btnsPanel {
  text-align: right;
}
</style>