simulation-front/src/views/systemManagement/sceneLibraryManagement/generalizationScene.vue

<template>
    <div class="generalizationScenarioListPanel">
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">场景编号</span>
                <el-input v-model="searchParams.sceneId" size="small" clearable placeholder="请输入" maxlength="60"
                    @keyup.enter.native="doSearch">
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">功能模块</span>
                <el-select v-model="searchParams.fileName" multiple clearable size="small">
                    <el-option v-for="item in fileNameList" :label="item.caption" :value="item.code"
                        :key="item.code"></el-option>
                </el-select>
            </template>
            <template slot="searchItem3">
                <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="searchItem4">
                <span class="label">场景简述</span>
                <el-input v-model="searchParams.scenarioResume" size="small" clearable placeholder="请输入" maxlength="300"
                    @keyup.enter.native="doSearch">
                </el-input>
            </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="btnsPanel">
            <el-button type="primary" plain icon="el-icon-delete" @click="delRows">批量删除</el-button>
        </div>

        <tableList ref="table" style="margin: 0 30px" :columns="columns" :getDataWay="getDataWay" :pagination="pagination"
            :checkedData="checkedArr" selection 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>
                    <i @click="delRow(scope.row)" class="el-icon-delete elIcon" title="删除">
                    </i>
                </template>
            </el-table-column>
        </tableList>

        <el-dialog v-if="generalizationVisible" :visible.sync="generalizationVisible" title="泛化模板" width="90%"
            class="generalizationDia" :close-on-click-modal="false" :close-on-press-escape="false"
            :before-close="generalizationCancel">
            <div>
                <generalization-detail ref="generalizationDetail" :disabled="true" :id="generalizationId"
                    :genUrlType="1"></generalization-detail>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";
import generalizationDetail from "@/views/sceneLibrary/components/generalizationDetail";
import { mapState } from "vuex";

export default {
    name: "generalizationScenarioList", // 泛化场景模板
    components: { searchLayout, tableList, generalizationDetail },
    data() {
        return {
            searchParams: {
                //搜索参数
                sceneId: "", // 场景编号
                fileName: [], // 功能模块
                scenarioRoadType: [], // 道路类型
                scenarioResume: "", // 场景简述
                share: "0",
            },
            labels: [],
            fileNameList: [],
            // scenarioWeatherList: [],
            props: {
                multiple: true,
                label: "dictName",
                value: "dictCode",
            },
            columns: [
                //表格列
                {
                    label: "场景编号",
                    prop: "sceneId",
                },
                {
                    label: "场景名称",
                    prop: "scenarioName",
                },
                {
                    label: "功能模块",
                    prop: "fileName",
                },
                {
                    label: "道路类型",
                    prop: "scenarioRoadType",
                },
                {
                    label: "场景简述",
                    prop: "scenarioResume",
                },
                {
                label: '复杂度',
                prop: 'complexity',
                },
                {
                label: '复杂度等级',
                prop: 'complexityLevel',
                },
                {
                label: '危险度',
                prop: 'risk',
                },
                {
                label: '危险度等级',
                prop: 'riskLevel',
                },
                {
                    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",
                // firstRequest: false,
                data: this.$api.sceneLibrary.querySceneGeneralTemplateList,
                param: {
                    share: "0",
                },
            },
            dialogVisible: false,
            autoplay: false,
            videoSrc: "",
            videoDiaTitle: "",
            generalizationVisible: false, // 泛化dialog
            generalizationId: "", // 泛化详情id
            checkedArr: [],
        };
    },

    props: {
        // scenarioWeatherList: {
        //     type: Array,
        //     default: [],
        // },
        scenarioRoadTypeList: {
            type: Array,
            default: [],
        },
    },

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

    methods: {
        doSearch() {
            this.refreshList(this.searchParams);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                sceneId: "",
                fileName: [],
                scenarioRoadType: [],
                scenarioResume: "",
                share: "0",
            };
            this.labels = [];
            this.doSearch();
        },
        viewRow(row) {
            this.generalizationId = row.id;
            this.generalizationVisible = true;
        },
        // viewRow(row) {
        //     this.dialogVisible = true;
        //     this.videoDiaTitle = row.naturalName;

        //     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.deleteSceneGeneralTemplateById,
                    data: {
                        id: row.id,
                        sceneId: row.sceneId,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
        delRows() {
            let checkedArr = this.checkedArr;

            if (checkedArr.length <= 0) {
                this.$message.info("请先选择数据");
                return;
            }

            let arr = checkedArr.map((i) => i.sceneId);

            this.$confirm("确认是否批量删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.deleteSceneGeneralTemplateByIds,
                    data: {
                        fhNameList: arr,
                    },
                }).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();
        },
        didUpload() {
            this.doSearch();
        },
        getFileNameList() {
            this.$axios({
                method: "post",
                url: this.$api.sceneLibrary.queryType,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    let arr = [];
                    res.info.forEach((item, i) => {
                        arr[i] = {
                            code: item,
                            caption: item,
                        };
                    });
                    this.fileNameList = arr;
                } else {
                    this.$message.error(res.message || "获取功能模块列表失败");
                }
            });
        },
        // 泛化-取消
        generalizationCancel() {
            this.generalizationVisible = false;
        },
    },

    mounted() {
        this.getFileNameList();
    },
};
</script>

<style lang='less' scoped>
@import "./common/util.less";

.generalizationScenarioListPanel {
    .inputBox {
        .label {
            min-width: 90px;
        }
    }

    .btnsPanel {
        text-align: right;
    }

    .generalizationDia {
        /deep/ .el-dialog__body {
            position: relative;
            padding: 20px 60px;

            .changeBtn {
                position: absolute;
                top: 20px;
                right: 60px;
            }
        }
    }
}
</style>