分公有私有及标签处理

src/views/sceneLibrary/common/util.less

@@ -1,119 +1,172 @@
-.labelPanel {
-    :last-child {
-        margin-right: 0;
+.labelsBox {
+    b {
+        display: inline-block;
+        line-height: 1;
+        font-weight: 500;
+        white-space: nowrap;
+        vertical-align: middle;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        -webkit-appearance: none;
+        text-align: center;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        outline: 0;
+        // margin-bottom: 10px;
+        margin-right: 20px;
+        position: relative;
+        padding: 12px 20px;
+        font-size: 14px;
+        cursor: pointer;
     }
-}
-
-.labelBox {
-    display: inline-block;
-    line-height: 1;
-    font-weight: 500;
-    white-space: nowrap;
-    vertical-align: middle;
-    background: #fff;
-    border: 1px solid #dcdfe6;
-    -webkit-appearance: none;
-    text-align: center;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    outline: 0;
-    margin-bottom: 10px;
-    margin-right: 20px;
-    position: relative;
-    padding: 12px 20px;
-    font-size: 14px;
-}
-
-
-.el-checkbox-button {
-    margin-right: 20px;
-}
 
-.labelA {
-
-    /deep/ .el-checkbox-button__inner,
-    &.labelBox {
+    .labelA {
         border: 1px solid @greenA;
         color: @greenA;
         border-radius: 4px;
         background-color: @greenBgA;
     }
 
-    &.is-checked {
-        /deep/ .el-checkbox-button__inner {
-            color: #FFFFFF;
-            background-color: @greenA;
-            border-color: @greenA;
-        }
-    }
-}
-
-.labelB {
-
-    /deep/ .el-checkbox-button__inner,
-    &.labelBox {
+    .labelB {
         border: 1px solid @orangeA;
         color: @orangeA;
         border-radius: 4px;
         background-color: @orangeBgA;
     }
 
-    &.is-checked {
-        /deep/ .el-checkbox-button__inner {
-            color: #FFFFFF;
-            background-color: @orangeA;
-            border-color: @orangeA;
-        }
-    }
-}
-
-.labelC {
-
-    /deep/ .el-checkbox-button__inner,
-    &.labelBox {
+    .labelC {
         border: 1px solid @lightBlueA;
         color: @lightBlueA;
         border-radius: 4px;
         background-color: @lightBlueBgA;
     }
 
-    &.is-checked {
-        /deep/ .el-checkbox-button__inner {
-            color: #FFFFFF;
-            background-color: @lightBlueA;
-            border-color: @lightBlueA;
-        }
-    }
-}
-
-.labelD {
-
-    /deep/ .el-checkbox-button__inner,
-    &.labelBox {
+    .labelD {
         border: 1px solid @purpleA;
         color: @purpleA;
         border-radius: 4px;
         background-color: @purpleBgA;
     }
-
-    &.is-checked {
-        /deep/ .el-checkbox-button__inner {
-            color: #FFFFFF;
-            background-color: @purpleA;
-            border-color: @purpleA;
-        }
-    }
 }
 
-.videoBox {
-    width: 100%;
-    padding: 30 60px;
 
-    video {
-        width: 100%;
-    }
-}
 
-.btnsPanel {
-    margin: 45px 40px 15px;
-}
+// .labelPanel {
+//     :last-child {
+//         margin-right: 0;
+//     }
+// }
+
+// .labelBox {
+//     display: inline-block;
+//     line-height: 1;
+//     font-weight: 500;
+//     white-space: nowrap;
+//     vertical-align: middle;
+//     background: #fff;
+//     border: 1px solid #dcdfe6;
+//     -webkit-appearance: none;
+//     text-align: center;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+//     outline: 0;
+//     margin-bottom: 10px;
+//     margin-right: 20px;
+//     position: relative;
+//     padding: 12px 20px;
+//     font-size: 14px;
+// }
+
+
+// .el-checkbox-button {
+//     margin-right: 20px;
+// }
+
+// .labelA {
+
+//     /deep/ .el-checkbox-button__inner,
+//     &.labelBox {
+//         border: 1px solid @greenA;
+//         color: @greenA;
+//         border-radius: 4px;
+//         background-color: @greenBgA;
+//     }
+
+//     &.is-checked {
+//         /deep/ .el-checkbox-button__inner {
+//             color: #FFFFFF;
+//             background-color: @greenA;
+//             border-color: @greenA;
+//         }
+//     }
+// }
+
+// .labelB {
+
+//     /deep/ .el-checkbox-button__inner,
+//     &.labelBox {
+//         border: 1px solid @orangeA;
+//         color: @orangeA;
+//         border-radius: 4px;
+//         background-color: @orangeBgA;
+//     }
+
+//     &.is-checked {
+//         /deep/ .el-checkbox-button__inner {
+//             color: #FFFFFF;
+//             background-color: @orangeA;
+//             border-color: @orangeA;
+//         }
+//     }
+// }
+
+// .labelC {
+
+//     /deep/ .el-checkbox-button__inner,
+//     &.labelBox {
+//         border: 1px solid @lightBlueA;
+//         color: @lightBlueA;
+//         border-radius: 4px;
+//         background-color: @lightBlueBgA;
+//     }
+
+//     &.is-checked {
+//         /deep/ .el-checkbox-button__inner {
+//             color: #FFFFFF;
+//             background-color: @lightBlueA;
+//             border-color: @lightBlueA;
+//         }
+//     }
+// }
+
+// .labelD {
+
+//     /deep/ .el-checkbox-button__inner,
+//     &.labelBox {
+//         border: 1px solid @purpleA;
+//         color: @purpleA;
+//         border-radius: 4px;
+//         background-color: @purpleBgA;
+//     }
+
+//     &.is-checked {
+//         /deep/ .el-checkbox-button__inner {
+//             color: #FFFFFF;
+//             background-color: @purpleA;
+//             border-color: @purpleA;
+//         }
+//     }
+// }
+
+// .videoBox {
+//     width: 100%;
+//     padding: 30 60px;
+
+//     video {
+//         width: 100%;
+//     }
+// }
+
+// .btnsPanel {
+//     margin: 45px 40px 15px;
+// }

src/views/sceneLibrary/naturalDrivingScenarioList.vue

@@ -84,8 +84,12 @@
                 ></el-cascader>
             </template>
             <template slot="searchItem27">
-                <el-checkbox-group v-model="labels">
-                    <el-checkbox-button label="1" :key="1" class="labelA"
+                <!-- <el-checkbox-group v-model="labels">
+                    <el-checkbox-button
+                        label="1"
+                        :key="1"
+                        class="labelA"
+                        @click="conditions(1)"
                         >高速</el-checkbox-button
                     >
                     <el-checkbox-button label="2" :key="2" class="labelB"
@@ -106,8 +110,18 @@
                     <el-checkbox-button label="7" :key="7" class="labelC"
                         >掉头</el-checkbox-button
                     >
-                </el-checkbox-group>
+                </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>
+                    <b class="labelA" @click="conditions(5)">匝道</b>
+                    <b class="labelB" @click="conditions(6)">隧道</b>
+                    <b class="labelC" @click="conditions(7)">掉头</b>
+                </div>
             </template>
+
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
@@ -116,9 +130,16 @@
             </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: 30px"
+            style="margin: 0 30px 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -166,6 +187,7 @@ export default {
     components: { searchLayout, tableList },
     data() {
         return {
+            activeName: "2",
             searchParams: {
                 //搜索参数
                 naturalName: "", // 场景名称
@@ -183,6 +205,8 @@ export default {
                 cutOut: [], // 切出
                 laneChange: [], // 变道
                 turnAround: [], // 掉头
+
+                share: "0", // 0 私有 1 公有
             },
             labels: [],
             list: [],
@@ -240,7 +264,9 @@ export default {
                 type: "post",
                 // firstRequest: false,
                 data: this.$api.sceneLibrary.querySceneNaturalList,
-                param: {},
+                param: {
+                    share: "0",
+                },
             },
             dialogVisible: false,
             autoplay: false,
@@ -256,7 +282,7 @@ export default {
 
     methods: {
         doSearch() {
-            this.searchParams.highSpeed = this.labels.includes("1")
+            /* this.searchParams.highSpeed = this.labels.includes("1")
                 ? [["roadType", "高速"]]
                 : [];
             this.searchParams.cutIn = this.labels.includes("2")
@@ -350,7 +376,9 @@ export default {
                       ["selfBehavior", "直路掉头"],
                       ["selfBehavior", "selfBehavior", "路口掉头"],
                   ]
-                : [];
+                : []; */
+
+            this.searchParams.share = this.activeName === "1" ? "1" : "0";
             this.refreshList(this.searchParams);
         },
         //刷新table
@@ -376,10 +404,129 @@ export default {
                 cutOut: [],
                 laneChange: [],
                 turnAround: [],
+                share: this.activeName === "1" ? "1" : "0",
             };
-            this.labels = [];
+            // this.labels = [];
+            this.doSearch();
+        },
+        pageControl(data) {
+            this.activeName = data.name;
             this.doSearch();
         },
+        conditions(v) {
+            switch (v) {
+                case 1:
+                    this.searchParams.road = [
+                        ...this.searchParams.road,
+                        ["roadType", "高速"],
+                    ];
+                    break;
+                case 2:
+                    this.searchParams.targetBehavior = [
+                        ...this.searchParams.targetBehavior,
+                        [
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "机动车从左侧切入成功",
+                        ],
+                        [
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "机动车从右侧切入成功",
+                        ],
+                    ];
+                    break;
+                case 3:
+                    this.searchParams.targetBehavior = [
+                        ...this.searchParams.targetBehavior,
+                        [
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "机动车向左侧切出成功",
+                        ],
+                        [
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "targetBehavior",
+                            "机动车向右侧切出成功",
+                        ],
+                    ];
+                    break;
+                case 4:
+                    this.searchParams.selfBehavior = [
+                        ...this.searchParams.selfBehavior,
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向左变道成功",
+                        ],
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向右变道成功",
+                        ],
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向左连续变道",
+                        ],
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向右连续变道",
+                        ],
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向左变道超车",
+                        ],
+                        [
+                            "selfBehavior",
+                            "selfBehavior",
+                            "selfBehavior",
+                            "向右变道超车",
+                        ],
+                    ];
+                    break;
+                case 5:
+                    this.searchParams.road = [
+                        ...this.searchParams.road,
+                        ["ramp", "是"],
+                    ];
+                    break;
+                case 6:
+                    this.searchParams.road = [
+                        ...this.searchParams.road,
+                        ["tunnel", "是"],
+                    ];
+                    break;
+                case 7:
+                    this.searchParams.selfBehavior = [
+                        ...this.searchParams.selfBehavior,
+                        ["selfBehavior", "直路掉头"],
+                        ["selfBehavior", "selfBehavior", "路口掉头"],
+                    ];
+                    break;
+                default:
+                    break;
+            }
+        },
         viewRow(row) {
             this.dialogVisible = true;
             this.videoDiaTitle = row.naturalName;

src/views/sceneLibrary/standardRegulationSimulationScenarioList.vue

@@ -42,7 +42,7 @@
                 </el-input>
             </template>
             <template slot="searchItem27">
-                <el-checkbox-group v-model="labels">
+                <!-- <el-checkbox-group v-model="labels">
                     <el-checkbox-button label="ISO" :key="1" class="labelA"
                         >ISO</el-checkbox-button
                     >
@@ -55,7 +55,13 @@
                     <el-checkbox-button label="E-NCAP" :key="4" class="labelD"
                         >E-NCAP</el-checkbox-button
                     >
-                </el-checkbox-group>
+                </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>
@@ -65,9 +71,16 @@
             </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: 30px"
+            style="margin: 0 30px 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -115,12 +128,14 @@ export default {
     components: { searchLayout, tableList },
     data() {
         return {
+            activeName: "2",
             searchParams: {
                 //搜索参数
                 sceneName: "", //场景名称
                 regulationType: [], //法规类型
                 standardType: "", //标准类型
                 label: [],
+                share: "0",
             },
             labels: [], // 标签
             regulationTypeList: [],
@@ -163,7 +178,9 @@ export default {
                 type: "post",
                 // firstRequest: false,
                 data: this.$api.sceneLibrary.queryStandardsRegulationsList,
-                param: {},
+                param: {
+                    share: "0",
+                },
             },
             dialogVisible: false,
             autoplay: false,
@@ -179,7 +196,8 @@ export default {
 
     methods: {
         doSearch() {
-            this.searchParams.label = [...this.labels];
+            // this.searchParams.label = [...this.labels];
+            this.searchParams.share = this.activeName === "1" ? "1" : "0";
             this.refreshList(this.searchParams);
         },
         //刷新table
@@ -194,10 +212,53 @@ export default {
                 regulationType: [],
                 standardType: "",
                 label: [],
+                share: this.activeName === "1" ? "1" : "0",
             };
-            this.labels = [];
+            // 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;
+            }
+        },
         viewRow(row) {
             this.dialogVisible = true;
             this.videoDiaTitle = row.sceneName;

src/views/sceneLibrary/trafficAccidentSimulationScenarioList.vue

@@ -94,7 +94,7 @@
                 </el-select>
             </template>
             <template slot="searchItem27">
-                <el-checkbox-group v-model="labels">
+                <!-- <el-checkbox-group v-model="labels">
                     <el-checkbox-button label="追尾" :key="1" class="labelA"
                         >追尾</el-checkbox-button
                     >
@@ -113,7 +113,17 @@
                         class="labelD"
                         >机动车-机动车冲突</el-checkbox-button
                     >
-                </el-checkbox-group>
+                </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>
@@ -123,9 +133,16 @@
             </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: 30px"
+            style="margin: 0 30px 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -173,6 +190,7 @@ export default {
     components: { searchLayout, tableList },
     data() {
         return {
+            activeName: "2",
             searchParams: {
                 //搜索参数
                 sceneName: "", //场景名称
@@ -185,6 +203,7 @@ export default {
                 cutIn: "", // 切入
                 driveCurve: "", // 沿弯道行驶
                 carConflict: "", // 机动车-机动车冲突
+                share: "0",
             },
             labels: [],
             selfDrivingList: [],
@@ -242,7 +261,9 @@ export default {
                 type: "post",
                 // firstRequest: false,
                 data: this.$api.sceneLibrary.querySceneAccidentList,
-                param: {},
+                param: {
+                    share: "0",
+                },
             },
             dialogVisible: false,
             autoplay: false,
@@ -258,7 +279,7 @@ export default {
 
     methods: {
         doSearch() {
-            this.searchParams.rearEndCollision = this.labels.includes("追尾")
+            /* this.searchParams.rearEndCollision = this.labels.includes("追尾")
                 ? "追尾"
                 : "";
             this.searchParams.cutIn = this.labels.includes("切入")
@@ -271,7 +292,9 @@ export default {
                 "机动车-机动车冲突"
             )
                 ? "机动车-机动车"
-                : "";
+                : ""; */
+
+            this.searchParams.share = this.activeName === "1" ? "1" : "0";
             this.refreshList(this.searchParams);
         },
         //刷新table
@@ -292,10 +315,59 @@ export default {
                 cutIn: "",
                 driveCurve: "",
                 carConflict: "",
+                share: this.activeName === "1" ? "1" : "0",
             };
-            this.labels = [];
+            // this.labels = [];
+            this.doSearch();
+        },
+        pageControl(data) {
+            this.activeName = data.name;
             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) {
             this.dialogVisible = true;
             this.videoDiaTitle = row.sceneName;