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

<template>
    <div class="trafficAccidentSimulationScenarioListPanel">
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">场景名称</span>
                <el-input
                    v-model="searchParams.sceneName"
                    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.selfDriving"
                    multiple
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in selfDrivingList"
                        :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.targetDriving"
                    multiple
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in targetDrivingList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem4">
                <span class="label">自车反应行为</span>
                <el-select
                    v-model="searchParams.selfReaction"
                    multiple
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in selfReactionList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem5">
                <span class="label">冲突行为</span>
                <el-select
                    v-model="searchParams.conflictBehavior"
                    multiple
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in conflictBehaviorList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem6">
                <span class="label">冲突类型</span>
                <el-select
                    v-model="searchParams.conflictType"
                    multiple
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in conflictTypeList"
                        :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="追尾" :key="1" class="labelA"
                        >追尾</el-checkbox-button
                    >
                    <el-checkbox-button label="切入" :key="2" class="labelB"
                        >目标车切入</el-checkbox-button
                    >
                    <el-checkbox-button
                        label="沿弯道行驶"
                        :key="3"
                        class="labelC"
                        >目标车沿弯道行驶</el-checkbox-button
                    >
                    <el-checkbox-button
                        label="机动车-机动车冲突"
                        :key="4"
                        class="labelD"
                        >机动车-机动车冲突</el-checkbox-button
                    >
                </el-checkbox-group> -->
                <div class="labelsBox">
                    <b class="labelA" @click="conditions(1)">追尾</b>
                    <b class="labelB" @click="conditions(2)">目标车切入</b>
                    <b class="labelC" @click="conditions(3)"
                        >目标车沿弯道行驶</b
                    >
                    <b class="labelD" @click="conditions(4)"
                        >机动车-机动车冲突</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="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
        >
            <!-- <tableList
            ref="table"
            style="margin: 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>
                    <i
                        @click="delRow(scope.row)"
                        class="el-icon-delete elIcon"
                        title="删除"
                    >
                    </i>
                </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: "trafficAccidentSimulationScenarioList", // 交通事故场景
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                sceneName: "", //场景名称
                selfDriving: [], //自车驾驶行为
                targetDriving: [], //目标驾驶行为
                selfReaction: [], //自车反应行为
                conflictBehavior: [], //冲突行为
                conflictType: [], //冲突类型
                rearEndCollision: "", // 追尾
                cutIn: "", // 切入
                driveCurve: "", // 沿弯道行驶
                carConflict: "", // 机动车-机动车冲突
                share: "0",
            },
            labels: [],
            // selfDrivingList: [],
            // targetDrivingList: [],
            // selfReactionList: [],
            // conflictBehaviorList: [],
            // conflictTypeList: [],
            columns: [
                //表格列
                {
                    label: "场景名称",
                    prop: "sceneName",
                },
                {
                    label: "自车驾驶行为",
                    prop: "selfDriving",
                },
                {
                    label: "目标驾驶行为",
                    prop: "targetDriving",
                },
                {
                    label: "自车反应行为",
                    prop: "selfReaction",
                },
                {
                    label: "冲突行为",
                    prop: "conflictBehavior",
                },
                {
                    label: "冲突类型",
                    prop: "conflictType",
                },
                {
                    label: "标签",
                    prop: "label",
                },
                {
                    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.querySceneAccidentList,
                param: {
                    share: "0",
                },
            },
            dialogVisible: false,
            autoplay: false,
            videoSrc: "",
            objectPath: "",
            videoDiaTitle: "",
            checkedArr: [],
        };
    },

    props: {
        selfDrivingList: {
            type: Array,
            default: [],
        },
        targetDrivingList: {
            type: Array,
            default: [],
        },
        selfReactionList: {
            type: Array,
            default: [],
        },
        conflictBehaviorList: {
            type: Array,
            default: [],
        },
        conflictTypeList: {
            type: Array,
            default: [],
        },
    },

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

    methods: {
        doSearch() {
            /* this.searchParams.rearEndCollision = this.labels.includes("追尾")
                ? "追尾"
                : "";
            this.searchParams.cutIn = this.labels.includes("切入")
                ? "切入"
                : "";
            this.searchParams.driveCurve = this.labels.includes("沿弯道行驶")
                ? "沿弯道行驶"
                : "";
            this.searchParams.carConflict = this.labels.includes(
                "机动车-机动车冲突"
            )
                ? "机动车-机动车"
                : ""; */

            this.refreshList(this.searchParams);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                sceneName: "",
                selfDriving: [],
                targetDriving: [],
                selfReaction: [],
                conflictBehavior: [],
                conflictType: [],
                rearEndCollision: "",
                cutIn: "",
                driveCurve: "",
                carConflict: "",
                share: "0",
            };
            // this.labels = [];
            this.doSearch();
        },
        conditions(v) {
            switch (v) {
                case 1:
                    if (!this.searchParams.conflictBehavior.includes("追尾")) {
                        this.searchParams.conflictBehavior = [
                            ...this.searchParams.conflictBehavior,
                            "追尾",
                        ];
                    }
                    break;
                case 2:
                    if (!this.searchParams.targetDriving.includes("切入")) {
                        this.searchParams.targetDriving = [
                            ...this.searchParams.targetDriving,
                            "切入",
                        ];
                    }
                    break;
                case 3:
                    if (
                        !this.searchParams.targetDriving.includes("沿弯道行驶")
                    ) {
                        this.searchParams.targetDriving = [
                            ...this.searchParams.targetDriving,
                            "沿弯道行驶",
                        ];
                    }
                    break;
                case 4:
                    if (
                        !this.searchParams.conflictType.includes(
                            "机动车-机动车"
                        )
                    ) {
                        this.searchParams.conflictType = [
                            ...this.searchParams.conflictType,
                            "机动车-机动车",
                        ];
                    }
                    break;
                default:
                    break;
            }
        },
        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.deleteSceneAccident,
                    data: {
                        accidentId: row.accidentId,
                        sceneName: row.sceneName,
                    },
                }).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.sceneName);

            this.$confirm("确认是否批量删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.batchDeleteSceneAccident,
                    data: {
                        sceneNameList: 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();
        },
        openFileDia() {
            this.objectPath = Math.random().toString();
            this.$refs.fileDialog.fileVisible = true;
        },
        fileClose() {
            this.objectPath = "";
            this.doSearch();
        },
    },
};
</script>

<style lang='less' scoped>
@import "./common/util.less";
.trafficAccidentSimulationScenarioListPanel {
    .inputBox {
        .radioBox {
            width: 340px;
        }

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

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