分公有私有、筛选条件更改、列表展示修改及增加详情展示

src/views/sceneLibrary/generalizationScenarioList.vue

@@ -30,6 +30,22 @@
                 </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="searchItem3">
                 <span class="label">天气</span>
                 <el-select
                     v-model="searchParams.scenarioWeather"
@@ -44,8 +60,8 @@
                         :key="item.code"
                     ></el-option>
                 </el-select>
-            </template>
-            <template slot="searchItem4">
+            </template> -->
+            <!-- <template slot="searchItem4">
                 <span class="label">场景发生时刻</span>
                 <el-time-picker
                     v-model="searchParams.scenarioTime"
@@ -53,31 +69,6 @@
                     placeholder="请选择"
                 >
                 </el-time-picker>
-            </template>
-            <!-- <template slot="searchItem27">
-                <el-checkbox-group v-model="labels">
-                    <el-checkbox-button label="1" :key="1" class="labelA"
-                        >高速</el-checkbox-button
-                    >
-                    <el-checkbox-button label="2" :key="2" class="labelB"
-                        >切入</el-checkbox-button
-                    >
-                    <el-checkbox-button label="3" :key="3" class="labelC"
-                        >切出</el-checkbox-button
-                    >
-                    <el-checkbox-button label="4" :key="4" class="labelD"
-                        >变道</el-checkbox-button
-                    >
-                    <el-checkbox-button label="5" :key="5" class="labelA"
-                        >匝道</el-checkbox-button
-                    >
-                    <el-checkbox-button label="6" :key="6" class="labelB"
-                        >隧道</el-checkbox-button
-                    >
-                    <el-checkbox-button label="7" :key="7" class="labelC"
-                        >掉头</el-checkbox-button
-                    >
-                </el-checkbox-group>
             </template> -->
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
@@ -87,13 +78,16 @@
             </template>
         </search-layout>
 
-        <!-- <div class="btnsPanel">
-            <upload ref="upload" :limit="1" @didUpload="didUpload"></upload>
-        </div> -->
+        <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: 30px"
+            style="margin: 0 30px 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -105,19 +99,31 @@
                 align="center"
                 width="180"
             >
+                <template v-slot="scope">
+                    <span @click="viewRow(scope.row)" class="elIcon">
+                        查看模板
+                    </span>
+                </template>
             </el-table-column>
         </tableList>
 
         <el-dialog
-            :title="videoDiaTitle"
-            :visible.sync="dialogVisible"
-            width="690px"
+            v-if="generalizationVisible"
+            :visible.sync="generalizationVisible"
+            title="泛化模板"
+            width="90%"
+            class="generalizationDia"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
-            :before-close="diaClose"
+            :before-close="generalizationCancel"
         >
-            <div class="videoBox">
-                <video autoplay :src="videoSrc" controls></video>
+            <div>
+                <generalization-detail
+                    ref="generalizationDetail"
+                    :disabled="true"
+                    :id="generalizationId"
+                    :genUrlType="1"
+                ></generalization-detail>
             </div>
         </el-dialog>
     </div>
@@ -126,31 +132,27 @@
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+import generalizationDetail from "./components/generalizationDetail";
 import { mapState } from "vuex";
 
 export default {
     name: "generalizationScenarioList", // 泛化场景模板
-    components: { searchLayout, tableList },
+    components: { searchLayout, tableList, generalizationDetail },
     data() {
         return {
+            activeName: "2",
             searchParams: {
                 //搜索参数
                 sceneId: "", // 场景类型编号
                 fileName: [], // 功能模块
-                scenarioWeather: [], // 天气
-                scenarioTime: "", // 场景发生时刻
-
-                // highSpeed: [], // 高速
-                // ramp: [], // 匝道
-                // tunnel: [], // 隧道
-                // cutIn: [], // 切入
-                // cutOut: [], // 切出
-                // laneChange: [], // 变道
-                // turnAround: [], // 掉头
+                scenarioRoadType: [], // 道路类型
+                share: "0",
+                // scenarioWeather: [], // 天气
+                // scenarioTime: "", // 场景发生时刻
             },
-            labels: [],
             fileNameList: [],
-            scenarioWeatherList: [],
+            scenarioRoadTypeList: [],
+            // scenarioWeatherList: [],
             props: {
                 multiple: true,
                 label: "dictName",
@@ -175,22 +177,22 @@ export default {
                     prop: "scenarioRoadType",
                 },
                 {
-                    label: "场景发生时刻",
-                    prop: "scenarioTime",
-                },
-                {
-                    label: "天气",
-                    prop: "scenarioWeather",
+                    label: "场景简述",
+                    prop: "scenarioResume",
                 },
                 // {
-                //     label: "标签",
-                //     prop: "label",
+                //     label: "场景发生时刻",
+                //     prop: "scenarioTime",
                 // },
                 // {
-                //     label: "操作",
-                //     prop: "cgInfos",
-                //     template: true,
+                //     label: "天气",
+                //     prop: "scenarioWeather",
                 // },
+                {
+                    label: "操作",
+                    prop: "cgInfos",
+                    template: true,
+                },
             ],
             pagination: {
                 //分页使用
@@ -206,12 +208,12 @@ export default {
                 type: "post",
                 // firstRequest: false,
                 data: this.$api.sceneLibrary.querySceneGeneralTemplateList,
-                param: {},
+                param: {
+                    share: "0",
+                },
             },
-            dialogVisible: false,
-            autoplay: false,
-            videoSrc: "",
-            videoDiaTitle: "",
+            generalizationVisible: false, // 泛化dialog
+            generalizationId: "", // 泛化详情id
         };
     },
 
@@ -221,101 +223,7 @@ export default {
 
     methods: {
         doSearch() {
-            /* this.searchParams.highSpeed = this.labels.includes("1")
-                ? [["roadType", "高速"]]
-                : [];
-            this.searchParams.cutIn = this.labels.includes("2")
-                ? [
-                      [
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "机动车从左侧切入成功",
-                      ],
-                      [
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "机动车从右侧切入成功",
-                      ],
-                  ]
-                : [];
-            this.searchParams.cutOut = this.labels.includes("3")
-                ? [
-                      [
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "机动车向左侧切出成功",
-                      ],
-                      [
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "targetBehavior",
-                          "机动车向右侧切出成功",
-                      ],
-                  ]
-                : [];
-            this.searchParams.laneChange = this.labels.includes("4")
-                ? [
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向左变道成功",
-                      ],
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向右变道成功",
-                      ],
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向左连续变道",
-                      ],
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向右连续变道",
-                      ],
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向左变道超车",
-                      ],
-                      [
-                          "selfBehavior",
-                          "selfBehavior",
-                          "selfBehavior",
-                          "向右变道超车",
-                      ],
-                  ]
-                : [];
-            this.searchParams.ramp = this.labels.includes("5")
-                ? [["ramp", "是"]]
-                : [];
-            this.searchParams.tunnel = this.labels.includes("6")
-                ? [["tunnel", "是"]]
-                : [];
-            this.searchParams.turnAround = this.labels.includes("7")
-                ? [
-                      ["selfBehavior", "直路掉头"],
-                      ["selfBehavior", "selfBehavior", "路口掉头"],
-                  ]
-                : []; */
+            this.searchParams.share = this.activeName === "1" ? "1" : "0";
             this.refreshList(this.searchParams);
         },
         //刷新table
@@ -328,35 +236,21 @@ export default {
             this.searchParams = {
                 sceneId: "",
                 fileName: [],
-                scenarioWeather: [],
-                scenarioTime: "",
+                scenarioRoadType: [],
+                share: this.activeName === "1" ? "1" : "0",
+                // scenarioWeather: [],
+                // scenarioTime: "",
             };
-            this.labels = [];
             this.doSearch();
         },
-        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;
-        },
-        diaClose(done) {
-            this.autoplay = false;
-            this.videoSrc = "";
-            done();
-        },
-        didUpload() {
+        pageControl(data) {
+            this.activeName = data.name;
             this.doSearch();
         },
+        viewRow(row) {
+            this.generalizationId = row.id;
+            this.generalizationVisible = true;
+        },
         getFileNameList() {
             this.$axios({
                 method: "post",
@@ -377,11 +271,16 @@ export default {
                 }
             });
         },
+        // 泛化-取消
+        generalizationCancel() {
+            this.generalizationVisible = false;
+        },
     },
 
     async mounted() {
         await this.$dicsListsInit({
-            scenarioWeatherList: "scenarioWeather",
+            // scenarioWeatherList: "scenarioWeather",
+            scenarioRoadTypeList: "scenarioRoadType",
         });
 
         this.getFileNameList();
@@ -401,5 +300,18 @@ export default {
     .btnsPanel {
         text-align: right;
     }
+
+    .generalizationDia {
+        /deep/ .el-dialog__body {
+            position: relative;
+            padding: 20px 60px;
+
+            .changeBtn {
+                position: absolute;
+                top: 20px;
+                right: 60px;
+            }
+        }
+    }
 }
 </style>