carsim优化

src/assets/common/css/theme.less

@@ -280,7 +280,7 @@
         width: 5px;
         height: 5px;
         background-color: @themeColor;
-        transform: translate(-2.5px,-2.5px);
+        transform: translate(-2.5px, -2.5px);
     }
 }
 
@@ -292,6 +292,10 @@
     width: 160px;
 }
 
+// /deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
+//     content: "";
+// }
+
 
 
 

src/components/echarts/common/tool.js

@@ -0,0 +1,93 @@
+import {
+    mapState
+} from "vuex";
+
+export default {
+    data() {
+        return {
+            option1: {
+                title: {
+                    text: "暂无数据",
+                    show: true,
+                    left: "center",
+                    top: "center",
+                },
+                tooltip: {
+                    //提示框，可以在全局也可以在
+                    trigger: "item", //提示框的样式
+                    formatter: "{b}: {c}",
+                    color: "#000", //提示框的背景色
+                    textStyle: {
+                        //提示的字体样式
+                        color: "#ffffff",
+                    },
+                    confine: true,
+                },
+                xAxis: {
+                    name: this.xName,
+                    type: "value",
+                    // type: "category",
+                    boundaryGap: false,
+                    data: [],
+                    axisTick: { inside: true },
+                },
+                yAxis: {
+                    name: this.yName,
+                    type: "value",
+                    axisTick: { inside: true },
+                },
+                series: [{
+                    data: [],
+                    type: "line",
+                    smooth: false,
+                    symbol: "circle",
+                    symbolSize: 6,
+                    lineStyle: {
+                        normal: {
+                            width: 1.5,
+                            // color: this.themeColor,
+                        },
+                    },
+                    itemStyle: {
+                        normal: {
+                            // color: this.themeColor,
+                        },
+                    },
+                }, ],
+                grid: {
+                    top: "30px",
+                    left: "60px",
+                    right: "108px",
+                    bottom: "10%",
+                    containLabel: true,
+                },
+            },
+        }
+    },
+
+    computed: {
+        ...mapState(["themeColor"]),
+    },
+
+    methods: {
+        isSorted(arr = []) {
+            return arr.every((x, i) => i === 0 || +x > +arr[i - 1]);
+        },
+    },
+
+    mounted() {
+        this.charts = this.$echarts.init(document.getElementById(this.id));
+
+        this.initStateList();
+
+        this.$nextTick(() => {
+            window.addEventListener("resize", () => {
+                this.charts.resize();
+            });
+        });
+    },
+
+    destroyed() {
+        this.charts.dispose();
+    },
+}

src/components/echarts/lineChartCarsim.vue

@@ -3,10 +3,11 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import tool from "./common/tool.js";
 
 export default {
     name: "lineChartCarsim", // carsim-折线图
+    mixins: [tool],
     props: {
         id: {
             default: "lineChartCarsim",
@@ -36,8 +37,6 @@ export default {
 
     data() {
         return {
-            tipData: [], //线数据
-            showData: [], //展示数据
             charts: "",
         };
     },
@@ -53,10 +52,6 @@ export default {
         },
     },
 
-    computed: {
-        ...mapState(["themeColor"]),
-    },
-
     methods: {
         initStateList() {
             let array = this.dataList;
@@ -67,99 +62,52 @@ export default {
                 let flag = Object.values(element).some((i) => i === "");
 
                 if (flag) {
-                    let option1 = {
-                        title: {
-                            text: "暂无数据",
-                            show: flag,
-                            left: "center",
-                            top: "center",
-                        },
-                        tooltip: {
-                            //提示框，可以在全局也可以在
-                            trigger: "item", //提示框的样式
-                            formatter: "{b}: {c}",
-                            color: "#000", //提示框的背景色
-                            textStyle: {
-                                //提示的字体样式
-                                color: "#ffffff",
-                            },
-                            confine: true,
-                        },
-                        xAxis: {
-                            name: this.xName,
-                            nameLocation: "end",
-                            type: "category",
-                            boundaryGap: false,
-                            data: [],
-                        },
-                        yAxis: {
-                            name: this.yName,
-                        },
-                        series: [
-                            {
-                                data: [],
-                                type: "line",
-                                smooth: true,
-                                symbol: "circle",
-                                symbolSize: 6,
-                                lineStyle: {
-                                    normal: {
-                                        width: 1.5,
-                                        // color: this.themeColor,
-                                    },
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        // color: this.themeColor,
-                                    },
-                                },
-                            },
-                        ],
-                        grid: {
-                            top: "30px",
-                            left: "60px",
-                            right: "108px",
-                            bottom: "10%",
-                            containLabel: true,
-                        },
-                    };
                     this.charts.clear();
-                    this.charts.setOption(option1);
+                    this.charts.setOption(this.option1);
                     return;
                 }
             }
 
+            if (!this.isSorted(array.map((i) => i.x))) {
+                this.$message.error("X轴的坐标应逐渐增大");
+                this.charts.clear();
+                this.charts.setOption(this.option1);
+                return;
+            }
+
             let props = [];
 
             this.columns.forEach((i) => {
                 props.push(i.prop); // ['x', '1.0', '2.0', '3.0', '4.0']
             });
 
-            let xData = [];
-            let yData = [];
+            // let xData = [];
+            // let yData = [];
+
+            let series = [];
+
+            props.forEach((j, index) => {
+                let a = [];
+                if (j === "x") return;
 
-            props.forEach((j) => {
-                let arr = [];
                 array.forEach((i) => {
-                    let a = i[j] || 0;
-                    if (j === "x") {
-                        xData.push(a);
-                    } else {
-                        arr.push(a);
-                    }
+                    a.push([i.x, i[j]]);
                 });
 
-                if (j != "x") yData.push(arr);
+                series.push({
+                    data: a,
+                    type: "line",
+                    name: j,
+                    smooth: false,
+                });
             });
 
-            let series = [];
-
-            yData.forEach((i, index) => {
+            /* yData.forEach((i, index) => {
                 series.push({
                     name: props[index + 1],
                     data: i,
                     type: "line",
-                    smooth: true,
+                    smooth: false,
                     symbol: "circle",
                     symbolSize: 6,
                     lineStyle: {
@@ -174,12 +122,12 @@ export default {
                         },
                     },
                 });
-            });
+            }); */
 
             let option = {
                 title: {
                     text: "暂无数据",
-                    show: yData.length === 0,
+                    show: series.length === 0,
                     left: "center",
                     top: "center",
                 },
@@ -197,17 +145,20 @@ export default {
                 xAxis: {
                     name: this.xName,
                     nameLocation: "end",
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
+                    type: "value",
+                    axisTick: { inside: true },
+                    // boundaryGap: false,
                 },
                 yAxis: {
                     name: this.yName,
+                    type: "value",
+                    axisTick: { inside: true },
+                    scale: true,
                 },
                 legend: {},
                 series,
                 grid: {
-                    top: "30px",
+                    top: "75px",
                     left: "60px",
                     right: "108px",
                     bottom: "10%",
@@ -217,22 +168,6 @@ export default {
             this.charts.setOption(option);
         },
     },
-
-    mounted() {
-        this.charts = this.$echarts.init(document.getElementById(this.id));
-
-        this.initStateList();
-
-        this.$nextTick(() => {
-            window.addEventListener("resize", () => {
-                this.charts.resize();
-            });
-        });
-    },
-
-    destroyed() {
-        this.charts.dispose();
-    },
 };
 </script>
 

src/components/echarts/lineChartCarsimA.vue

@@ -3,10 +3,11 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import tool from "./common/tool.js";
 
 export default {
     name: "lineChartCarsimA", // carsim-折线图
+    mixins: [tool],
     props: {
         id: {
             default: "lineChartCarsimA",
@@ -34,11 +35,9 @@ export default {
 
     data() {
         return {
-            tipData: [], //线数据
-            showData: [], //展示数据
             charts: "",
             xName: "油门位置",
-            yName: "低档输出转速(rpm)",
+            yName: "低挡输出转速(rpm)",
         };
     },
 
@@ -61,10 +60,6 @@ export default {
         },
     },
 
-    computed: {
-        ...mapState(["themeColor"]),
-    },
-
     methods: {
         initStateList() {
             let array = this.dataList;
@@ -76,63 +71,8 @@ export default {
                 let flag = Object.values(element).some((i) => i === "");
 
                 if (flag) {
-                    let option1 = {
-                        title: {
-                            text: "暂无数据",
-                            show: flag,
-                            left: "center",
-                            top: "center",
-                        },
-                        tooltip: {
-                            //提示框，可以在全局也可以在
-                            trigger: "item", //提示框的样式
-                            formatter: "{b}: {c}",
-                            color: "#000", //提示框的背景色
-                            textStyle: {
-                                //提示的字体样式
-                                color: "#ffffff",
-                            },
-                            confine: true,
-                        },
-                        xAxis: {
-                            name: this.xName,
-                            type: "category",
-                            boundaryGap: false,
-                            data: [],
-                        },
-                        yAxis: {
-                            name: this.yName,
-                        },
-                        series: [
-                            {
-                                data: [],
-                                type: "line",
-                                smooth: true,
-                                symbol: "circle",
-                                symbolSize: 6,
-                                lineStyle: {
-                                    normal: {
-                                        width: 1.5,
-                                        // color: this.themeColor,
-                                    },
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        // color: this.themeColor,
-                                    },
-                                },
-                            },
-                        ],
-                        grid: {
-                            top: "30px",
-                            left: "60px",
-                            right: "108px",
-                            bottom: "10%",
-                            containLabel: true,
-                        },
-                    };
                     this.charts.clear();
-                    this.charts.setOption(option1);
+                    this.charts.setOption(this.option1);
                     return;
                 }
             }
@@ -143,73 +83,28 @@ export default {
                 let flag = Object.values(element).some((i) => i === "");
 
                 if (flag) {
-                    let option1 = {
-                        title: {
-                            text: "暂无数据",
-                            show: flag,
-                            left: "center",
-                            top: "center",
-                        },
-                        tooltip: {
-                            //提示框，可以在全局也可以在
-                            trigger: "item", //提示框的样式
-                            formatter: "{b}: {c}",
-                            color: "#000", //提示框的背景色
-                            textStyle: {
-                                //提示的字体样式
-                                color: "#ffffff",
-                            },
-                            confine: true,
-                        },
-                        xAxis: {
-                            name: this.xName,
-                            type: "category",
-                            boundaryGap: false,
-                            data: [],
-                        },
-                        yAxis: {
-                            name: this.yName,
-                        },
-                        series: [
-                            {
-                                data: [],
-                                type: "line",
-                                smooth: true,
-                                symbol: "circle",
-                                symbolSize: 6,
-                                lineStyle: {
-                                    normal: {
-                                        width: 1.5,
-                                        // color: this.themeColor,
-                                    },
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        // color: this.themeColor,
-                                    },
-                                },
-                            },
-                        ],
-                        grid: {
-                            top: "30px",
-                            left: "60px",
-                            right: "108px",
-                            bottom: "10%",
-                            containLabel: true,
-                        },
-                    };
                     this.charts.clear();
-                    this.charts.setOption(option1);
+                    this.charts.setOption(this.option1);
                     return;
                 }
             }
 
-            let props = ["x", "y"];
+            if (
+                !this.isSorted(array.map((i) => i.x)) ||
+                !this.isSorted(array1.map((i) => i.x))
+            ) {
+                this.$message.error("X轴的坐标应逐渐增大");
+                this.charts.clear();
+                this.charts.setOption(this.option1);
+                return;
+            }
+
+            // let props = ["x", "y"];
 
-            let xData = [];
-            let yData = [];
+            // let xData = [];
+            // let yData = [];
 
-            props.forEach((j) => {
+            /* props.forEach((j) => {
                 let arr = [];
                 array.forEach((i) => {
                     let a = i[j] || 0;
@@ -221,9 +116,9 @@ export default {
                 });
 
                 if (j != "x") yData.push(arr);
-            });
+            }); */
 
-            props.forEach((j) => {
+            /* props.forEach((j) => {
                 let arr = [];
                 array1.forEach((i) => {
                     let a = i[j] || 0;
@@ -233,18 +128,43 @@ export default {
                 });
 
                 if (j != "x") yData.push(arr);
-            });
+            }); */
 
             let series = [];
 
-            let names = ["up-shifting", "down-shifting"];
+            let names = ["升挡", "降挡"];
+
+            let brr = [];
+            let brr1 = [];
 
-            yData.forEach((i, index) => {
+            array.forEach((i) => {
+                brr.push([i.x, i.y]);
+            });
+
+            array1.forEach((i) => {
+                brr1.push([i.x, i.y]);
+            });
+
+            series[0] = {
+                data: brr,
+                type: "line",
+                name: names[0],
+                smooth: false,
+            };
+
+            series[1] = {
+                data: brr1,
+                type: "line",
+                name: names[1],
+                smooth: false,
+            };
+
+            /* yData.forEach((i, index) => {
                 series.push({
                     name: names[index],
                     data: i,
                     type: "line",
-                    smooth: true,
+                    smooth: false,
                     symbol: "circle",
                     symbolSize: 6,
                     lineStyle: {
@@ -259,12 +179,12 @@ export default {
                         },
                     },
                 });
-            });
+            }); */
 
             let option = {
                 title: {
                     text: "暂无数据",
-                    show: yData.length === 0,
+                    show: series.length === 0,
                     left: "center",
                     top: "center",
                 },
@@ -281,19 +201,25 @@ export default {
                 },
                 xAxis: {
                     name: this.xName,
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    // min: 0,
-                    // max: 1,
+                    type: "value",
+                    // type: "category",
+                    // boundaryGap: false,
+                    // data: xData,
+                    min: 0,
+                    max: 1,
+                    axisTick: { inside: true },
                 },
                 yAxis: {
                     name: this.yName,
+                    axisTick: { inside: true },
+                    type: "value",
+                    scale: true,
+                    // nameGap: 45
                 },
                 legend: {},
                 series,
                 grid: {
-                    top: "30px",
+                    top: "60px",
                     left: "60px",
                     right: "108px",
                     bottom: "10%",
@@ -303,22 +229,6 @@ export default {
             this.charts.setOption(option);
         },
     },
-
-    mounted() {
-        this.charts = this.$echarts.init(document.getElementById(this.id));
-
-        this.initStateList();
-
-        this.$nextTick(() => {
-            window.addEventListener("resize", () => {
-                this.charts.resize();
-            });
-        });
-    },
-
-    destroyed() {
-        this.charts.dispose();
-    },
 };
 </script>
 

src/components/echarts/lineChartCarsimB.vue

@@ -3,10 +3,11 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import tool from "./common/tool.js";
 
 export default {
     name: "lineChartCarsimB", // carsim-折线图
+    mixins: [tool],
     props: {
         id: {
             default: "lineChartCarsimB",
@@ -36,8 +37,6 @@ export default {
 
     data() {
         return {
-            tipData: [], //线数据
-            showData: [], //展示数据
             charts: "",
         };
     },
@@ -53,10 +52,6 @@ export default {
         },
     },
 
-    computed: {
-        ...mapState(["themeColor"]),
-    },
-
     methods: {
         initStateList() {
             let array = this.dataList;
@@ -67,73 +62,25 @@ export default {
                 let flag = Object.values(element).some((i) => i === "");
 
                 if (flag) {
-                    let option1 = {
-                        title: {
-                            text: "暂无数据",
-                            show: flag,
-                            left: "center",
-                            top: "center",
-                        },
-                        tooltip: {
-                            //提示框，可以在全局也可以在
-                            trigger: "item", //提示框的样式
-                            formatter: "{b}: {c}",
-                            color: "#000", //提示框的背景色
-                            textStyle: {
-                                //提示的字体样式
-                                color: "#ffffff",
-                            },
-                            confine: true,
-                        },
-                        xAxis: {
-                            name: this.xName,
-                            type: "category",
-                            boundaryGap: false,
-                            data: [],
-                        },
-                        yAxis: {
-                            name: this.yName,
-                        },
-                        series: [
-                            {
-                                data: [],
-                                type: "line",
-                                smooth: true,
-                                symbol: "circle",
-                                symbolSize: 6,
-                                lineStyle: {
-                                    normal: {
-                                        width: 1.5,
-                                        color: this.themeColor,
-                                    },
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        color: this.themeColor,
-                                    },
-                                },
-                            },
-                        ],
-                        grid: {
-                            top: "30px",
-                            left: "60px",
-                            right: "108px",
-                            bottom: "10%",
-                            containLabel: true,
-                        },
-                    };
                     this.charts.clear();
-                    this.charts.setOption(option1);
+                    this.charts.setOption(this.option1);
                     return;
                 }
             }
 
-            let props = ["x", "y"];
+            if (!this.isSorted(array.map((i) => i.x))) {
+                this.$message.error("X轴的坐标应逐渐增大");
+                this.charts.clear();
+                this.charts.setOption(this.option1);
+                return;
+            }
+
+            // let props = ["x", "y"];
 
-            let xData = [];
-            let yData = [];
+            // let xData = [];
+            // let yData = [];
 
-            props.forEach((j) => {
+            /* props.forEach((j) => {
                 let arr = [];
                 array.forEach((i) => {
                     let a = i[j] || 0;
@@ -145,16 +92,42 @@ export default {
                 });
 
                 if (j != "x") yData.push(arr);
+            }); */
+
+            let brr = [];
+
+            array.forEach((i) => {
+                brr.push([i.x, i.y]);
             });
 
             let series = [];
 
-            yData.forEach((i, index) => {
+            series[0] = {
+                data: brr,
+                type: "line",
+                name: "Y Axis",
+                smooth: false,
+                symbol: "circle",
+                symbolSize: 6,
+                lineStyle: {
+                    normal: {
+                        width: 1.5,
+                        color: this.themeColor,
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: this.themeColor,
+                    },
+                },
+            };
+
+            /* yData.forEach((i, index) => {
                 series.push({
                     name: "数据",
                     data: i,
                     type: "line",
-                    smooth: true,
+                    smooth: false,
                     symbol: "circle",
                     symbolSize: 6,
                     lineStyle: {
@@ -169,12 +142,12 @@ export default {
                         },
                     },
                 });
-            });
+            }); */
 
             let option = {
                 title: {
                     text: "暂无数据",
-                    show: yData.length === 0,
+                    show: series.length === 0,
                     left: "center",
                     top: "center",
                 },
@@ -191,17 +164,21 @@ export default {
                 },
                 xAxis: {
                     name: this.xName,
-                    type: "category",
+                    type: "value",
                     boundaryGap: false,
-                    data: xData,
+                    axisTick: { inside: true },
+                    // data: xData,
                 },
                 yAxis: {
                     name: this.yName,
+                    type: "value",
+                    axisTick: { inside: true },
+                    scale: true,
                 },
                 legend: {},
                 series,
                 grid: {
-                    top: "30px",
+                    top: "60px",
                     left: "60px",
                     right: "108px",
                     bottom: "10%",
@@ -211,22 +188,6 @@ export default {
             this.charts.setOption(option);
         },
     },
-
-    mounted() {
-        this.charts = this.$echarts.init(document.getElementById(this.id));
-
-        this.initStateList();
-
-        this.$nextTick(() => {
-            window.addEventListener("resize", () => {
-                this.charts.resize();
-            });
-        });
-    },
-
-    destroyed() {
-        this.charts.dispose();
-    },
 };
 </script>
 

src/components/grid/TableList.vue

@@ -260,7 +260,7 @@
                 default:'',
                 type: String
             },
-            propHeight:Number,
+            propHeight:String,
             propHeaderCellClassName:Function,
             propDefaultExpandAll:{
                 default:true,
@@ -284,7 +284,7 @@
                 type: Function
             },
             propIndent:Number,
-            propMaxHeight:Number,
+            propMaxHeight:String,
             //loaddata接口报错时是否清空列表
             errorClearing: {
                 type: Boolean,

src/store/index.js

@@ -19,6 +19,7 @@ export default new Vuex.Store({
     roleCode: '', //用户角色
     useType: '', //独占类型
     scale: 1.5, // 物体加载换算倍数
+    scaleRate: 1.8, // 处理矿车等需要微调的
     projectInfoTabname: "",
     taskInfoTabname: "",
   },

src/views/modelLibrary/components/threeAxesHelper.vue

@@ -0,0 +1,307 @@
+<template>
+    <div>
+        <div id="container66"></div>
+    </div>
+</template>
+
+<script>
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { mapState } from "vuex";
+import CoordinateAxes from "../common/coordinateAxes";
+
+export default {
+    name: "threeAxesHelper", // 车辆配置详情中的axesHelperBox
+    components: {},
+
+    data() {
+        return {
+            publicPath: process.env.BASE_URL,
+            scene: null,
+            scene2: null,
+            camera: null,
+            camera2: null,
+            renderer: null,
+            light: null,
+            transformControls: null,
+            geometryName: null,
+            controls: null,
+            mesh: null,
+            cube: null,
+            cacheList: [],
+            xAngle: 0,
+            yAngle: 0,
+            zAngle: 0,
+            container: null,
+            car: null,
+            cubeTexture: null,
+            raf: null,
+            canDrag: true, // 是否可移动
+            dragControls: null,
+            sensor: null, // 当前操作的传感器配置
+            ogt: null,
+            // scale: 2, // 物体加载换算倍数
+            // rate: 20, // 坐标换算倍数
+        };
+    },
+
+    computed: {
+        ...mapState(["scale"]),
+    },
+
+    props: {
+        controlsCanMove: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    watch: {
+        controlsCanMove(newVal, oldVal) {
+            if (this.controls) this.controls.enabled = newVal;
+        },
+    },
+
+    methods: {
+        // 场景
+        initScene() {
+            this.scene = new THREE.Scene();
+            let cube = new CoordinateAxes();
+            this.scene.add(cube);
+        },
+        // 相机
+        initCamera() {
+            /* this.camera = new THREE.OrthographicCamera(
+                this.container.clientWidth / -2,
+                this.container.clientWidth / 2,
+                this.container.clientHeight / 2,
+                this.container.clientHeight / -2,
+                1,
+                // 0.1,
+                1000
+            ); */
+
+            this.camera = new THREE.PerspectiveCamera(
+                75,
+                this.container.clientWidth / this.container.clientHeight,
+                0.1,
+                1000
+            );
+
+            // this.camera = new THREE.PerspectiveCamera(45, 1.5, 1, 1000);
+            // this.camera.position.set(600, 600, 600);
+            this.camera.position.set(200, 200, 200);
+            // this.camera.lookAt(this.scene.position);
+            // this.scene.add(this.camera);
+            // this.scene.add(this.camera2);
+
+            this.camera2 = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+            // this.camera2 = new THREE.PerspectiveCamera(40, 1, 1, 1000);
+            // this.camera2.position.copy(this.camera.position);
+            // this.camera.layers.set(1);
+        },
+        // 渲染器
+        initRenderer() {
+            this.renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                alpha: true,
+            });
+            this.renderer.setSize(
+                this.container.clientWidth,
+                this.container.clientHeight
+            );
+            this.container.appendChild(this.renderer.domElement);
+        },
+        // 初始化灯光
+        initLight() {
+            var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
+            hemiLight.position.set(0, 20, 0);
+            this.scene.add(hemiLight);
+
+            // 环境光会均匀的照亮场景中的所有物体
+            const light = new THREE.AmbientLight(0x5c5c5c, 0.4); // soft white light
+            this.scene.add(light);
+
+            // 点光源
+            // const light1 = new THREE.PointLight(0xffffff, 2, 100);
+            // light1.position.set(0, 0, -100);
+            // this.scene.add(light1);
+
+            // 平行光是沿着特定方向发射的光
+            const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            // const dirLight = new THREE.DirectionalLight(0xffffff);
+            // dirLight.position.set(0, 200, 100);
+            // dirLight.castShadow = true;
+            // dirLight.shadow.camera.top = 180;
+            // dirLight.shadow.camera.bottom = -100;
+            // dirLight.shadow.camera.left = -120;
+            // dirLight.shadow.camera.right = 120;
+
+            // dirLight.shadow.camera.near = 0.01;
+            // dirLight.shadow.camera.far = 60;
+            // dirLight.shadow.camera.top = 22;
+            // dirLight.shadow.camera.bottom = -22;
+            // dirLight.shadow.camera.left = -35;
+            // dirLight.shadow.camera.right = 35;
+            // // //设置阴影分辨率
+            // dirLight.shadow.mapSize.width = 2048; // default
+            // dirLight.shadow.mapSize.height = 2048; // default
+            // //阴影限制
+            // dirLight.shadow.radius = 1;
+            // this.scene.add(dirLight);
+
+            // const spotLight = new THREE.SpotLight(0xffffff);
+            // spotLight.position.set(100, 1000, 100);
+
+            // spotLight.castShadow = true;
+
+            // spotLight.shadow.mapSize.width = 1024;
+            // spotLight.shadow.mapSize.height = 1024;
+
+            // spotLight.shadow.camera.near = 500;
+            // spotLight.shadow.camera.far = 4000;
+            // spotLight.shadow.camera.fov = 30;
+
+            // this.scene.add(spotLight);
+        },
+        // 初始化
+        init() {
+            this.initScene();
+            this.initCamera();
+            this.initRenderer();
+            this.initLight();
+
+            this.controls = new OrbitControls(
+                this.camera,
+                // this.renderer.domElement
+                document.getElementById("container")
+            ); //创建控件对象
+            this.controls.minDistance = 30;
+            this.controls.maxDistance = 600;
+            // this.controls.autoRotate=true;
+            this.controls.update();
+            // this.controls.target = this.cube.position
+        },
+        animate() {
+            this.raf = requestAnimationFrame(this.animate);
+            // this.renderer.render(this.scene, this.camera);
+            if (this.transformControls) {
+                this.transformControls.update();
+            }
+
+            this.controls.update();
+
+            this.renderer.render(this.scene, this.camera);
+        },
+        onWindowResize() {
+            this.camera.aspect =
+                this.container.clientWidth / this.container.clientHeight;
+            this.camera.updateProjectionMatrix();
+
+            this.renderer.setSize(
+                this.container.clientWidth,
+                this.container.clientHeight
+            );
+
+            let insetWidth = this.container.clientWidth / 6; // square
+            let insetHeight = this.container.clientHeight / 6;
+
+            this.camera2.aspect = insetWidth / insetHeight;
+            this.camera2.updateProjectionMatrix();
+        },
+        go() {
+            this.container = document.getElementById("container66");
+            this.init();
+            this.animate();
+
+            window.addEventListener("resize", this.onWindowResize);
+        },
+        removeScene() {
+            this.clearScene();
+        },
+        clearCache(item) {
+            if (item.geometry && item.geometry.dispose) item.geometry.dispose();
+            if (item.material && item.material.dispose) item.material.dispose();
+        },
+        clearScene() {
+            this.removeObj(this.scene);
+        },
+        removeObj(obj) {
+            let arr = obj.children.filter((x) => x);
+            arr.forEach((item) => {
+                if (item.children.length) {
+                    this.removeObj(item);
+                } else {
+                    this.clearCache(item);
+                    item.clear();
+                }
+            }),
+                obj.clear();
+            arr = null;
+        },
+    },
+
+    mounted() {
+        this.go();
+    },
+    destroyed() {
+        window.removeEventListener("resize", this.onWindowResize);
+        cancelAnimationFrame(this.raf);
+
+        if (this.renderer) {
+            this.renderer.renderLists.dispose();
+            this.renderer.dispose();
+            this.renderer.forceContextLoss();
+            this.renderer.domElement = null;
+            this.renderer.content = null;
+            this.renderer = null;
+        }
+
+        if (this.dragControls) {
+            this.dragControls.deactivate();
+            this.dragControls.dispose();
+            this.dragControls = null;
+        }
+
+        if (this.controls) {
+            this.controls.dispose();
+            this.controls = null;
+        }
+
+        if (this.transformControls) {
+            this.transformControls.detach();
+            this.transformControls.dispose();
+            this.transformControls = null;
+        }
+
+        if (this.cacheList.length > 0) {
+            // this.scene.remove(...this.cacheList);
+            this.cacheList = [];
+        }
+
+        this.clearScene();
+
+        this.scene = null;
+        this.scene2 = null;
+        this.camera = null;
+        this.camera2 = null;
+        this.light = null;
+        this.geometryName = null;
+        this.mesh = null;
+        this.cube = null;
+        this.container = null;
+        this.car = null;
+        this.cubeTexture = null;
+        this.raf = null;
+
+        THREE.Cache.clear();
+    },
+};
+</script>
+
+<style lang="less" scoped>
+#container66 {
+    width: 100%;
+    height: 150px;
+}
+</style>

src/views/modelLibrary/components/threeVehicleConfiguration.vue

@@ -63,7 +63,7 @@ export default {
     },
 
     computed: {
-        ...mapState(["scale"]),
+        ...mapState(["scale", "scaleRate"]),
         // 坐标换算倍数
         rate() {
             return 40 / this.scale;
@@ -104,7 +104,11 @@ export default {
             default: false,
         },
         configList: {
-            default: {},
+            // default: {},
+            // type: Object,
+            default: function () {
+                return {};
+            },
             type: Object,
         },
     },
@@ -196,6 +200,8 @@ export default {
             gridHelper.material.transparent = true;
             this.scene.add(gridHelper);
 
+            return;
+
             /* var cubeGeometry = new THREE.ConeGeometry(75, 150, 6, 1, false);
             cubeGeometry.translate(0, -75, 0);
 
@@ -214,10 +220,10 @@ export default {
 
             this.scene2 = new THREE.Scene();
             let cube = new CoordinateAxes();
+            // this.scene2.background = null;
+            // this.scene2.background = new THREE.Color(0x00000, 1.0);
             this.scene2.add(cube);
 
-            return;
-
             // const geometry = new THREE.BoxGeometry(100, 100, 100);
             // const material = new THREE.MeshBasicMaterial({
             //     color: 0xffffff,
@@ -385,9 +391,11 @@ export default {
             });
             this.transformControls.addEventListener("mouseDown", (e) => {
                 this.controls.enabled = false;
+                this.$emit("controlsEnabled", false);
             });
             this.transformControls.addEventListener("mouseUp", (e) => {
                 this.controls.enabled = true;
+                this.$emit("controlsEnabled", true);
             });
             this.scene.add(this.transformControls);
         },
@@ -486,6 +494,7 @@ export default {
             // });
 
             this.dragControls.addEventListener("drag", (e) => {
+                console.log(e);
                 if (!this.canDrag) return;
                 // this.$emit("posChange", (e.object.position.x + 0.5) >> 0, "x");
                 // this.$emit("posChange", (e.object.position.y + 0.5) >> 0, "y");
@@ -548,7 +557,14 @@ export default {
                         (-180 * Math.PI) / 180
                     );
 
-                    let scale = 30 * that.scale;
+                    let s = 0;
+                    if (model.includes("928.glb")) {
+                        s = that.scale / that.scaleRate;
+                    } else {
+                        s = that.scale;
+                    }
+
+                    let scale = 30 * s;
                     obj.scene.scale.set(scale, scale, scale);
                     // obj.scene.scale.set(30, 30, 30);
 
@@ -846,12 +862,20 @@ export default {
 
             this.controls = new OrbitControls(
                 this.camera,
-                this.renderer.domElement
+                // this.renderer.domElement
+                document.getElementById("container")
             ); //创建控件对象
             this.controls.minDistance = 30;
             this.controls.maxDistance = 600;
             this.controls.update();
             // this.controls.target = this.cube.position
+            // this.controls.addEventListener("change", (e) => {
+            //     // console.log(document.getElementById("container"));
+
+            //     console.log(this.renderer.domElement);
+            //     console.log(document.querySelector('#container canvas'));
+            //     // console.log(this.controls.getAzimuthalAngle(),this.controls.getPolarAngle());
+            // });
         },
         animate() {
             this.raf = requestAnimationFrame(this.animate);
@@ -864,35 +888,49 @@ export default {
 
             // this.renderer.setClearColor("#272727");
 
-            this.renderer.setViewport(
-                0,
-                0,
-                this.container.clientWidth,
-                this.container.clientHeight
-            );
+            // this.renderer.setViewport(
+            //     0,
+            //     0,
+            //     this.container.clientWidth,
+            //     this.container.clientHeight
+            // );
 
             this.renderer.render(this.scene, this.camera);
+            return;
 
             // inset scene
 
             // this.renderer.setClearColor(0xdddddd, 1);
+            // this.renderer.setClearColor(0xffffff, 0);
+            // this.renderer.setClearAlpha(0);
 
             this.renderer.clearDepth(); // important!
+            // this.scene2.background = new THREE.Color('hsla(100%, 100%, 100%, 0)');
+            // this.scene2.background = new THREE.Color('rgba(255, 255, 255, 0)');
+            // this.scene2.background = new THREE.Color('transparent');
+            // this.scene2.background = 0xffffff;
 
             this.renderer.setScissorTest(true);
+            // this.renderer.setClearColor(0xffffff, 0.3);
+            // this.renderer.clearColor();
+            // this.renderer.setClearAlpha(0);
 
-            let insetWidth = this.container.clientWidth / 4; // square
-            let insetHeight = this.container.clientHeight / 4;
+            let insetWidth = this.container.clientWidth / 6; // square
+            let insetHeight = this.container.clientHeight / 6;
 
-            this.renderer.setScissor(2, 350, insetWidth, insetHeight);
+            let x = insetHeight / 45;
+            let y = insetHeight * 4.2;
 
-            this.renderer.setViewport(2, 350, insetWidth, insetHeight);
+            this.renderer.setScissor(x, y, insetWidth, insetHeight);
+
+            this.renderer.setViewport(x, y, insetWidth, insetHeight);
 
             this.camera2.position.copy(this.camera.position);
             this.camera2.quaternion.copy(this.camera.quaternion);
 
             this.renderer.render(this.scene2, this.camera2);
-
+            // this.renderer.setClearAlpha(0);
+            // this.scene2.background = null;
             this.renderer.setScissorTest(false);
         },
         onWindowResize() {
@@ -905,8 +943,8 @@ export default {
                 this.container.clientHeight
             );
 
-            let insetWidth = this.container.clientWidth / 4; // square
-            let insetHeight = this.container.clientHeight / 4;
+            let insetWidth = this.container.clientWidth / 6; // square
+            let insetHeight = this.container.clientHeight / 6;
 
             this.camera2.aspect = insetWidth / insetHeight;
             this.camera2.updateProjectionMatrix();
@@ -1625,8 +1663,8 @@ export default {
 
                 renderer.setSize(container.clientWidth, container.clientHeight);
 
-                insetWidth = container.clientHeight / 4; // square
-                insetHeight = container.clientHeight / 4;
+                insetWidth = container.clientHeight / 6; // square
+                insetHeight = container.clientHeight / 6;
 
                 camera2.aspect = insetWidth / insetHeight;
                 camera2.updateProjectionMatrix();

src/views/modelLibrary/components/threeVehicleModel.vue

@@ -37,7 +37,7 @@ export default {
     },
 
     computed: {
-        ...mapState(["scale"]),
+        ...mapState(["scale", "scaleRate"]),
     },
 
     props: {
@@ -129,7 +129,14 @@ export default {
                         (-180 * Math.PI) / 180
                     );
 
-                    let scale = 30 * that.scale;
+                    let s = 0;
+                    if (model.includes("928.glb")) {
+                        s = that.scale / that.scaleRate;
+                    } else {
+                        s = that.scale;
+                    }
+
+                    let scale = 30 * s;
                     obj.scene.scale.set(scale, scale, scale);
                     that.scene.add(obj.scene);
                     that.car = obj.scene;

src/views/modelLibrary/index.vue

@@ -23,4 +23,9 @@ export default {
 </script>
 
 <style lang='less' scoped>
+// /deep/
+//     .el-form-item.is-required:not(.is-no-asterisk)
+//     > .el-form-item__label:before {
+//     content: "";
+// }
 </style>

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -159,6 +159,13 @@
                     <div class="axesHelperPic"></div>
                 </div> -->
 
+                <div class="axesBox">
+                    <three-axes-helper
+                        ref="threeSensor1"
+                        :controlsCanMove="controlsCanMove"
+                    ></three-axes-helper>
+                </div>
+
                 <three-sensor
                     ref="threeSensor"
                     :xValue="coordinate.y"
@@ -171,6 +178,7 @@
                     :isAdd="!!$route.query.id"
                     :configList="configList"
                     @posChange="posChange"
+                    @controlsEnabled="controlsEnabled"
                 ></three-sensor>
 
                 <div v-show="configBox" class="conditions">
@@ -315,11 +323,17 @@
 import handleConfigList from "./components/handleConfigList.vue";
 import canvasSensor from "./components/canvasVehicleConfiguration.vue";
 import threeSensor from "./components/threeVehicleConfiguration.vue";
+import threeAxesHelper from "./components/threeAxesHelper.vue";
 import { mapState } from "vuex";
 
 export default {
     name: "vehicleConfigurationDetail", // 车辆配置详情
-    components: { handleConfigList, canvasSensor, threeSensor },
+    components: {
+        handleConfigList,
+        canvasSensor,
+        threeSensor,
+        threeAxesHelper,
+    },
     data() {
         // 校验最多4位小数
         let validateNum = (rule, value, callback) => {
@@ -479,6 +493,7 @@ export default {
             carModel: "", // 车模型
             // rate: 20, // 坐标换算倍数
             isOpen: false, // 是否已展示全部传感器
+            controlsCanMove: true,
         };
     },
 
@@ -676,7 +691,7 @@ export default {
 
                 this.$refs.threeSensor.reset(null, true);
                 this.closeConfig();
-                
+
                 this.isOpen = false;
             }
 
@@ -819,6 +834,9 @@ export default {
 
             this.isOpen = needOpen;
         },
+        controlsEnabled(flag) {
+            this.controlsCanMove = flag;
+        },
     },
 
     mounted() {
@@ -1015,12 +1033,20 @@ export default {
             .axesHelperPic {
                 width: 100%;
                 height: 100%;
-                background: url("../../assets/common/image/axesHelper.png")
+                background: url("../../assets/common/image/others/axesHelper.png")
                     center no-repeat;
                 background-size: contain;
             }
         }
 
+        .axesBox {
+            position: absolute;
+            left: 18px;
+            top: 48px;
+            width: 150px;
+            height: 150px;
+        }
+
         .conditions {
             position: absolute;
             right: 2px;

src/views/modelLibrary/vehicleModel.vue

@@ -451,6 +451,7 @@ export default {
 
                 this.$refs.vtd.form = form;
             } else {
+                form.vehicleLength = o.vehicleLength;
                 form.sprungMass = o.sprungMass;
                 form.vehicleWidth = o.vehicleWidth;
                 form.rotationalInertiaX = o.rotationalInertiaX;
@@ -578,7 +579,7 @@ export default {
         },
         showInfo(id) {
             this.file = "";
-            
+
             this.$axios({
                 method: "post",
                 url: this.$api.modelLibrary.getVehicleInfo,

src/views/workManagement/components/threeProjectInfo.vue

@@ -47,7 +47,7 @@ export default {
     },
 
     computed: {
-        ...mapState(["scale"]),
+        ...mapState(["scale", "scaleRate"]),
         // 坐标换算倍数
         rate() {
             return 40 / this.scale;
@@ -213,7 +213,14 @@ export default {
                         (-180 * Math.PI) / 180
                     );
 
-                    let scale = 30 * that.scale;
+                    let s = 0;
+                    if (model.includes("928.glb")) {
+                        s = that.scale / that.scaleRate;
+                    } else {
+                        s = that.scale;
+                    }
+
+                    let scale = 30 * s;
                     obj.scene.scale.set(scale, scale, scale);
 
                     that.scene.add(obj.scene);