修复浏览器缩小后展示问题及3d模型局部加载优化和删除对齐

src/components/echarts/lineChartMainPage.vue

@@ -2,7 +2,7 @@
     <div
         class="linechart"
         :id="id"
-        style="width: calc(100vw - 270px); height: calc(80vh - 260px)"
+        style="width: calc(100vw - 270px); min-width: 1096px; height: calc(80vh - 260px)"
     ></div>
 </template>
 

src/components/echarts/lineChartMainPageA.vue

@@ -2,7 +2,7 @@
     <div
         class="linechart"
         :id="id"
-        style="width: calc(100vw - 240px); height: calc(48vh - 165px)"
+        style="width: calc(100vw - 240px); min-width: 1125px; height: calc(48vh - 165px)"
     ></div>
 </template>
 

src/components/echarts/pieChartMainPage.vue

@@ -2,7 +2,7 @@
     <div
         class="linechart"
         :id="id"
-        style="width: calc(37.5vw - 180px); height: calc(42vh - 165px)"
+        style="min-width: 330px; width: calc(37.5vw - 180px); min-height: 110px; height: calc(42vh - 165px)"
     ></div>
 </template>
 

src/router/modelLibrary.js

@@ -1,42 +1,42 @@
 export default [{
-        path: "/vehicleConfigurationList",
-        name: "vehicleConfigurationList",
-        meta: {
-            tabname: "车辆配置",
-            menuKind: "modelLibrary",
-            login: true
-        },
-        component: () => import("@/views/modelLibrary/vehicleConfigurationList"),
-        children: [{
-            path: "/vehicleConfigurationDetail",
-            name: "vehicleConfigurationDetail",
-            meta: {
-                tabname: "车辆配置详情",
-                menuKind: "modelLibrary",
-                login: true
-            },
-            component: () => import("@/views/modelLibrary/vehicleConfigurationDetail")
-        },
-    ]
+    path: "/vehicleConfigurationList",
+    name: "vehicleConfigurationList",
+    meta: {
+        tabname: "车辆配置",
+        menuKind: "modelLibrary",
+        login: true
     },
-    {
-        path: "/sensorModel",
-        name: "sensorModel",
+    component: () => import("@/views/modelLibrary/vehicleConfigurationList"),
+    children: [{
+        path: "/vehicleConfigurationDetail",
+        name: "vehicleConfigurationDetail",
         meta: {
-            tabname: "传感器配置",
+            tabname: "车辆配置详情",
             menuKind: "modelLibrary",
             login: true
         },
-        component: () => import("@/views/modelLibrary/sensorModel")
+        component: () => import("@/views/modelLibrary/vehicleConfigurationDetail")
     },
-    {
-        path: "/vehicleModel",
-        name: "vehicleModel",
-        meta: {
-            tabname: "动力学配置",
-            menuKind: "modelLibrary",
-            login: true
-        },
-        component: () => import("@/views/modelLibrary/vehicleModel")
+    ]
+},
+{
+    path: "/sensorModel",
+    name: "sensorModel",
+    meta: {
+        tabname: "传感器配置",
+        menuKind: "modelLibrary",
+        login: true
+    },
+    component: () => import("@/views/modelLibrary/sensorModel")
+},
+{
+    path: "/vehicleModel",
+    name: "vehicleModel",
+    meta: {
+        tabname: "动力学配置",
+        menuKind: "modelLibrary",
+        login: true
     },
+    component: () => import("@/views/modelLibrary/vehicleModel")
+},
 ]

src/store/index.js

@@ -27,6 +27,12 @@ export default new Vuex.Store({
     exportAlgorithmsTabName: "", // 导入算法详情
     gradingRuleDetailTabName: "", // 评分规则详情
     scenePacketListTabName: "", // 场景测试包详情
+    parameterDetailTabName: "", // 编辑参数管理
+    clusteringDetailTabName: "", // 编辑集群配置
+    scenePacketDetailTabName: "", // 场景包详情
+    scenePacketDistributionDetailTabName: "", // 场景包分配详情
+    editAccountTabName: "", // 编辑账户详情
+    vehicleModelDetailTabName: "", // 车辆设置详情
   },
   mutations: {
     getUserId(state, data) {

src/views/mainPage.vue

@@ -606,10 +606,12 @@ export default {
     }
 
     .chartABox {
+        min-height: 261px;
         height: calc(80vh - 260px);
     }
 
     .chartBBox {
+        min-height: 147px;
         height: calc(48vh - 165px);
         overflow: hidden;
     }
@@ -624,6 +626,7 @@ export default {
     }
 
     .pieBox {
+        min-height: 110px;
         height: calc(42vh - 165px);
 
         .shadowBox {

src/views/modelLibrary/components/modelList.vue

@@ -186,6 +186,9 @@ export default {
         .list {
             margin: 0 10px 40px 26px;
             border-top: 1px solid @grayLine;
+            overflow-y: scroll;
+            // 针对Firefox的滚动条
+            // scrollbar-color: #e6e6e6 #d3d3d3;
 
             li {
                 padding-right: 10px;
@@ -207,7 +210,7 @@ export default {
         .listPub,
         .listPri {
             height: calc(50% - 91px);
-            overflow-y: auto;
+            overflow-y: scroll;
         }
 
         .listPub li, .listPri li {
@@ -254,4 +257,23 @@ export default {
         border-bottom: 0;
     }
 }
+
+// 针对chrome的滚动条
+/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar
+{
+    width: 15px;
+    background-color:#f6f6f6;
+}
+/*定义滚动条轨道：内阴影+圆角*/
+::-webkit-scrollbar-track
+{
+    background-color:#d3d3d3;
+}
+/*定义滑块：内阴影+圆角*/
+::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    background-color:#e6e6e6;
+}
 </style>

src/views/modelLibrary/components/threeSensorModel.vue

@@ -10,11 +10,12 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { ConvexGeometry } from "three/examples/jsm/geometries/ConvexGeometry.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+// import { mergeVertices } from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { mapState } from "vuex";
-import {
-    showFullScreenLoading,
-    tryHideFullScreenLoading,
-} from "../../../axios/filter";
+// import {
+//     showFullScreenLoading,
+//     tryHideFullScreenLoading,
+// } from "../../../axios/filter";
 
 export default {
     name: "threeSensorModel", // 传感器配置中的threeJS
@@ -340,18 +341,22 @@ export default {
                 objUrl = `${that.publicPath}sensor/gps/lidar.obj`;
             }
 
-            if (type === "ogt") {
-                showFullScreenLoading();
-            }
+            this.$emit('loadingDone', 'carStart');
+
+            // if (type === "ogt") {
+            //     showFullScreenLoading();
+            // }
 
             Loader.load(
                 mtlUrl,
                 function (materials) {
                     loader.setMaterials(materials);
                     loader.load(objUrl, function (obj) {
-                        if (type === "ogt") {
-                            tryHideFullScreenLoading();
-                        }
+                        // if (type === "ogt") {
+                        //     tryHideFullScreenLoading();
+                        // }
+
+                        that.$emit('loadingDone', 'carDone');
 
                         if (type === "camera") {
                             that.cameraSensor = obj;
@@ -391,9 +396,12 @@ export default {
                     // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                 },
                 (error) => {
-                    if (type === "ogt") {
-                        tryHideFullScreenLoading();
-                    }
+                    // if (type === "ogt") {
+                    //     tryHideFullScreenLoading();
+                    // }
+
+                    that.$emit('loadingDone', 'carDone');
+
                     console.error(error);
                 }
             );

src/views/modelLibrary/components/threeVehicleConfiguration.vue

@@ -21,10 +21,10 @@ import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 // import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 // import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2.js";
 // import { Line2 } from "three/examples/jsm/lines/Line2.js";
-import {
-    showFullScreenLoading,
-    tryHideFullScreenLoading,
-} from "../../../axios/filter";
+// import {
+//     showFullScreenLoading,
+//     tryHideFullScreenLoading,
+// } from "../../../axios/filter";
 import { mapState } from "vuex";
 import CoordinateAxes from "../common/coordinateAxes";
 
@@ -60,6 +60,8 @@ export default {
             ogt: null,
             // scale: 2, // 物体加载换算倍数
             // rate: 20, // 坐标换算倍数
+            isLoading: false, // 判断是否正在记载车辆
+            lastCarModel: "", // 记录上一次加载的carModel
         };
     },
 
@@ -190,7 +192,8 @@ export default {
             }
         },
         carModel(newVal, oldVal) {
-            if (newVal && newVal != oldVal) {
+            if (newVal != oldVal && !this.isLoading) {
+                this.lastCarModel = newVal;
                 this.initCar(newVal);
             }
         },
@@ -770,7 +773,10 @@ export default {
             //     background: "rgba(0, 0, 0, 0.2)",
             // });
 
-            showFullScreenLoading();
+            // showFullScreenLoading();
+
+            this.$emit('loadingDone', 'carStart');
+            this.isLoading = true;
 
             var that = this;
             var loader = new GLTFLoader(); //创建一个FBX加载器
@@ -788,7 +794,7 @@ export default {
                 model,
                 function (obj) {
                     // loading.close();
-                    tryHideFullScreenLoading();
+                    // tryHideFullScreenLoading();
                     // console.log(obj);
 
                     /*  for (let i = 0; i < obj.children.length; i++) {
@@ -827,6 +833,10 @@ export default {
                     // that.scene.add(obj);
                     that.scene.add(obj.scene);
                     that.car = obj.scene;
+
+                    that.$emit('loadingDone', 'carDone');
+                    that.isLoading = false;
+                    that.needCar();
                 },
                 (xhr) => {
                     // console.log(xhr);
@@ -834,7 +844,10 @@ export default {
                 },
                 (error) => {
                     // loading.close();
-                    tryHideFullScreenLoading();
+                    // tryHideFullScreenLoading();
+                    that.$emit('loadingDone', 'carDone');
+                    that.isLoading = false;
+                    that.needCar();
                     console.error(error);
                 }
             );
@@ -1106,6 +1119,13 @@ export default {
                 }
             }); */
         },
+        // 判断是否继续加载car，为了应对上一个car正在加载中的时候，用户选择了新的car
+        needCar() {
+            if (this.carModel != this.lastCarModel) {
+                this.lastCarModel = this.carModel;
+                this.initCar(this.carModel);
+            }
+        },
         // 初始化
         init() {
             this.initScene();

src/views/modelLibrary/components/threeVehicleModel.vue

@@ -9,10 +9,10 @@ import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import {
-    showFullScreenLoading,
-    tryHideFullScreenLoading,
-} from "../../../axios/filter";
+// import {
+//     showFullScreenLoading,
+//     tryHideFullScreenLoading,
+// } from "../../../axios/filter";
 import { mapState } from "vuex";
 
 export default {
@@ -34,6 +34,8 @@ export default {
             cubeTexture: null,
             raf: null,
             // scale: 2, // 物体加载换算倍数
+            isLoading: false, // 判断是否正在记载车辆
+            lastCarModel: "", // 记录上一次加载的carModel
         };
     },
 
@@ -50,7 +52,8 @@ export default {
 
     watch: {
         carModel(newVal, oldVal) {
-            if (newVal != oldVal) {
+            if (newVal != oldVal && !this.isLoading) {
+                this.lastCarModel = newVal;
                 this.initCar(newVal);
             }
         },
@@ -123,12 +126,15 @@ export default {
             dracoLoader.preload(); // 初始化_initDecoder 解码器
             loader.setDRACOLoader(dracoLoader); // gltfloader使用dracoLoader
 
-            showFullScreenLoading();
+            // showFullScreenLoading();
+
+            this.$emit('loadingDone', 'carStart');
+            this.isLoading = true;
 
             loader.load(
                 model,
                 function (obj) {
-                    tryHideFullScreenLoading();
+                    // tryHideFullScreenLoading();
 
                     obj.scene.rotation.set(
                         (-90 * Math.PI) / 180,
@@ -147,16 +153,30 @@ export default {
                     obj.scene.scale.set(scale, scale, scale);
                     that.scene.add(obj.scene);
                     that.car = obj.scene;
+
+                    that.$emit('loadingDone', 'carDone');
+                    that.isLoading = false;
+                    that.needCar();
                 },
                 (xhr) => {
                     // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                 },
                 (error) => {
-                    tryHideFullScreenLoading();
+                    // tryHideFullScreenLoading();
+                    that.$emit('loadingDone', 'carDone');
+                    that.isLoading = false;
+                    that.needCar();
                     console.error(error);
                 }
             );
         },
+        // 判断是否继续加载car，为了应对上一个car正在加载中的时候，用户选择了新的car
+        needCar() {
+            if (this.carModel != this.lastCarModel) {
+                this.lastCarModel = this.carModel;
+                this.initCar(this.carModel);
+            }
+        },
         // 初始化
         init() {
             this.initScene();

src/views/modelLibrary/sensorModel.vue

@@ -72,6 +72,8 @@
                         :coordinate="coordinateA"
                     ></canvas-sensorA> -->
                     <three-show
+                        v-loading="loading"
+                        @loadingDone="loadingDone"
                         ref="threeShow"
                         :coordinate="coordinate"
                         :coordinateA="coordinateA"
@@ -149,6 +151,7 @@ export default {
                 share: "",
                 id: "",
             },
+            loading: true,
         };
     },
 
@@ -331,6 +334,13 @@ export default {
                 this.$refs.threeShow.initContent();
             }, 0);
         },
+        loadingDone(done) {
+            if (done === 'carDone') {
+                this.loading = false;
+            }else {
+                this.loading = true;
+            }
+        },
     },
 
     // mounted() {},
@@ -347,6 +357,8 @@ export default {
         position: fixed;
         top: 65px;
         left: 180px;
+        z-index: 6;
+        background: #ffffff;
     }
 
     .modelList /deep/ .listPanel {

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -187,6 +187,7 @@
                 </div>
 
                 <three-sensor
+                    v-loading="loading"
                     ref="threeSensor"
                     :xValue="coordinate.y"
                     :yValue="coordinate.z"
@@ -200,6 +201,7 @@
                     :allSensor="allSensor"
                     @posChange="posChange"
                     @controlsEnabled="controlsEnabled"
+                    @loadingDone="loadingDone"
                 ></three-sensor>
 
                 <div v-show="configBox" class="conditions">
@@ -523,6 +525,7 @@ export default {
             // rate: 20, // 坐标换算倍数
             isOpen: false, // 是否已展示全部传感器
             controlsCanMove: true,
+            loading: true,
         };
     },
 
@@ -898,6 +901,13 @@ export default {
                 }
             });
         },
+        loadingDone(done) {
+            if (done === 'carDone') {
+                this.loading = false;
+            }else {
+                this.loading = true;
+            }
+        },
     },
 
     mounted() {

src/views/modelLibrary/vehicleModel.vue

@@ -117,8 +117,10 @@
 
                 <div class="modelBox">
                     <three-show
+                        v-loading="loading"
                         ref="threeShow"
                         :carModel="carModel"
+                        @loadingDone="loadingDone"
                     ></three-show>
                 </div>
             </el-form>
@@ -417,6 +419,7 @@ export default {
             },
             carModel: "",
             file: "", // 参数文件
+            loading: true,
         };
     },
 
@@ -800,6 +803,13 @@ export default {
         parameterTypeChange() {
             this.file = "";
         },
+        loadingDone(done) {
+            if (done === 'carDone') {
+                this.loading = false;
+            }else {
+                this.loading = true;
+            }
+        },
     },
 
     async mounted() {
@@ -829,6 +839,8 @@ export default {
         position: fixed;
         top: 65px;
         left: 180px;
+        z-index: 6;
+        background: #ffffff;
     }
 
     .modelList /deep/ .listPanel {