传感器模型-摄像头-分辨率增加选项改为下拉

src/views/modelLibrary/components/formCamera.vue

@@ -71,12 +71,20 @@
                 </el-input>
             </el-form-item>
             <el-form-item label="分辨率:" prop="resolution">
-                <el-radio v-model="form.resolution" label="1920*1080"
+                <!-- <el-radio v-model="form.resolution" label="1920*1080"
                     >1920x1080</el-radio
                 >
                 <el-radio v-model="form.resolution" label="800*600"
                     >800x600</el-radio
-                >
+                > -->
+                <el-select v-model="form.resolution">
+                    <el-option
+                        v-for="item in resolutionList"
+                        :label="item.caption"
+                        :value="item.code"
+                        :key="item.code"
+                    ></el-option>
+                </el-select>
             </el-form-item>
             <el-form-item label="帧率(HZ):" prop="frameRate">
                 <el-select v-model="form.frameRate">
@@ -132,6 +140,20 @@ export default {
 
         return {
             frameRateList: [],
+            resolutionList: [
+                {
+                    caption: "1920x1080",
+                    code: "1920*1080",
+                },
+                {
+                    caption: "800x600",
+                    code: "800*600",
+                },
+                {
+                    caption: "480x270",
+                    code: "480*270",
+                },
+            ],
             form: {
                 id: "", // id
                 sensorCode: "", // 传感器编码
@@ -141,7 +163,7 @@ export default {
                 farDistance: "", // 探测距离
                 fovH: "", // 水平现场角
                 fovV: "", // 垂直现场角
-                resolution: "1920*1080", // 分辨率
+                resolution: "", // 分辨率
                 frameRate: "", // 帧率
                 selfDisplay: "1", // 是否显示本车
                 share: "", // 是否分享

src/views/modelLibrary/components/threeVehicleConfiguration.vue

@@ -6,7 +6,6 @@
 
 <script>
 import * as THREE from "three";
-// import * as THREE from "three/build/three.min.js";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 import { DragControls } from "three/examples/jsm/controls/DragControls.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
@@ -89,48 +88,69 @@ export default {
     watch: {
         xValue(newVal, oldVal) {
             if (newVal === oldVal) return;
+
             const obj = this.scene.getObjectByName("cube");
-            obj.position.x = newVal || 0;
+            if (obj) obj.position.x = newVal || 0;
+
             if (this.sensor) this.sensor.position.x = newVal || 0;
         },
         yValue(newVal, oldVal) {
             if (newVal === oldVal) return;
+
             const obj = this.scene.getObjectByName("cube");
-            obj.position.y = newVal || 0;
+            if (obj) obj.position.y = newVal || 0;
+
             if (this.sensor) this.sensor.position.y = newVal || 0;
         },
         zValue(newVal, oldVal) {
             if (newVal === oldVal) return;
+
             const obj = this.scene.getObjectByName("cube");
-            obj.position.z = newVal || 0;
+            if (obj) obj.position.z = newVal || 0;
+
             if (this.sensor) this.sensor.position.z = newVal || 0;
         },
         hValue(newVal, oldVal) {
             if (newVal === oldVal) return;
-            let value = newVal || 0;
+
+            let value = (newVal || 0) - 90;
             value = (value * Math.PI) / 180;
-            const obj = this.scene.getObjectByName("cube");
-            obj.rotateX(this.xAngle * -1);
-            obj.rotateX(value);
             this.xAngle = value;
+
+            const obj = this.scene.getObjectByName("cube");
+            if (obj) {
+                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
+            }
+            // obj.rotateX(this.xAngle * -1);
+            // obj.rotateX(value);
+
+            // obj.rotation.x += value;
+            // var axis = new THREE.Vector3(0, 1, 0); //向量axis
+            // obj.rotateOnAxis(axis, value); //绕axis轴旋转π/8
         },
         pValue(newVal, oldVal) {
             if (newVal === oldVal) return;
+
             let value = newVal || 0;
             value = (value * Math.PI) / 180;
-            const obj = this.scene.getObjectByName("cube");
-            obj.rotateY(this.yAngle * -1);
-            obj.rotateY(value);
             this.yAngle = value;
+
+            const obj = this.scene.getObjectByName("cube");
+            if (obj) {
+                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
+            }
         },
         rValue(newVal, oldVal) {
             if (newVal === oldVal) return;
+
             let value = newVal || 0;
             value = (value * Math.PI) / 180;
-            const obj = this.scene.getObjectByName("cube");
-            obj.rotateZ(this.zAngle * -1);
-            obj.rotateZ(value);
             this.zAngle = value;
+
+            const obj = this.scene.getObjectByName("cube");
+            if (obj) {
+                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
+            }
         },
         carModel(newVal, oldVal) {
             if (newVal && newVal != oldVal) {
@@ -142,8 +162,6 @@ export default {
     methods: {
         // 场景
         initScene() {
-            // let that = this;
-
             this.scene = new THREE.Scene();
             let axes = new THREE.AxesHelper(500);
             this.scene.add(axes);
@@ -165,37 +183,7 @@ export default {
             const cubeTextureLoader = new THREE.CubeTextureLoader();
             const environmentMapTexture = cubeTextureLoader.load(urls);
 
-            const geometry = new THREE.SphereBufferGeometry(100, 200, 200);
-            var material = new THREE.MeshStandardMaterial({
-                color: 0xffffff,
-                metalness: 0.7,
-                roughness: 0.1,
-                envMap: environmentMapTexture,
-            }); //立方体
-            var mesh = new THREE.Mesh(geometry, material);
-            // this.scene.add(mesh);
-
             this.scene.background = environmentMapTexture;
-
-            /* const environmentMapTexture = cubeTextureLoader
-                .setPath(`${this.publicPath}pisa/`)
-                .load(
-                    [
-                        "px.png",
-                        "nx.png",
-                        "py.png",
-                        "ny.png",
-                        "pz.png",
-                        "nz.png",
-                    ],
-                    () => {
-                        this.scene.background = environmentMapTexture;
-                    },
-                    undefined,
-                    (e) => {
-                        console.log(e);
-                    }
-                ); */
         },
         // 相机
         initCamera() {
@@ -304,16 +292,6 @@ export default {
                 //     ((e.target.object.rotation.x * 360) / Math.PI) >> 0,
                 //     "h"
                 // );
-                // this.$emit(
-                //     "posChange",
-                //     ((e.target.object.rotation.y * 360) / Math.PI) >> 0,
-                //     "p"
-                // );
-                // this.$emit(
-                //     "posChange",
-                //     ((e.target.object.rotation.z * 360) / Math.PI) >> 0,
-                //     "r"
-                // );
                 if (!this.canDrag) return;
                 this.$emit(
                     "posChange",
@@ -351,16 +329,12 @@ export default {
             cubeGeometry.translate(0, -75, 0);
 
             let obj = {
-                // color: 0xfaff72,
                 color: 0x4c4c4c,
                 // wireframe: true,
                 transparent: true,
                 opacity: 0.3,
                 // ambient: 0x00ff00,
                 // emissive: 0xfaff72,
-                // emissive: 0xff0000,
-                // emissive: 0x00ff00,
-                // emissive: 0x0000ff,
                 lightMapIntensity: 0.1,
                 // emissiveIntensity: 0.1,
                 // envMap: this.cubeTexture,
@@ -389,7 +363,6 @@ export default {
             var cubeMaterial = new THREE.MeshLambertMaterial(obj);
             this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
             this.cube.name = this.geometryName || "cube";
-            // this.cube.layers.set(1);
 
             if (position) {
                 this.cube.position.x = position.x;
@@ -408,14 +381,12 @@ export default {
             if (this.transformControls) {
                 this.transformControls.attach(this.cube);
             }
-            // this.camera.lookAt(this.cube.position);
         },
         // 添加拖拽控件
         initDragControls() {
             // 过滤不是 Mesh 的物体,例如辅助网格
             var objects = [];
             for (let i = 0; i < this.scene.children.length; i++) {
-                // console.log(this.scene.children[i]);
                 if (this.scene.children[i].isMesh) {
                     objects.push(this.scene.children[i]);
                 }
@@ -428,7 +399,6 @@ export default {
             }
 
             // 初始化拖拽控件
-            // var dragControls = new DragControls(
             this.dragControls = new DragControls(
                 objects,
                 this.camera,
@@ -442,19 +412,15 @@ export default {
             // });
 
             this.dragControls.addEventListener("drag", (e) => {
-                console.log(6);
-                // 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");
                 // this.$emit("posChange", (e.object.position.z + 0.5) >> 0, "z");
             });
             this.dragControls.addEventListener("dragstart", (e) => {
-                // console.log(e);
                 this.controls.enabled = false;
             });
             this.dragControls.addEventListener("dragend", (e) => {
-                // console.log(e);
                 this.controls.enabled = true;
             });
         },
@@ -528,7 +494,7 @@ export default {
                             // child.material.emissive = new THREE.Color(1, 1, 1);
                             child.material.emissive = child.material.color;
                             // child.material.emissiveIntensity = 1;
-                            // child.material.emissiveMap = child.material.map;
+                            child.material.emissiveMap = child.material.map;
                             // child.material.envMap = child.material.map;
                             // child.material.emissiveMap = map3;
                             child.castShadow = true;
@@ -698,7 +664,7 @@ export default {
             //     this.initCar1();
             // }
 
-            // this.initCar1();
+            this.initCar1();
 
             // console.log(this.scene);
 
@@ -795,11 +761,9 @@ export default {
             this.sensor = null;
 
             const obj1 = this.scene.getObjectByName("cube");
-            // console.log(obj1);
             if (obj1) {
                 this.scene.remove(obj1);
             }
-            // this.initDragControls();
 
             this.xAngle = 0;
             this.yAngle = 0;
@@ -824,35 +788,26 @@ export default {
             );
 
             setTimeout(() => {
-                // let x = this.$parent.formA.sensorX || 0;
-                // let y = this.$parent.formA.sensorY || 0;
-                // let z = this.$parent.formA.sensorZ || 0;
-                // let h = this.$parent.formA.sensorP || 0;
-                // let p = this.$parent.formA.sensorR || 0;
-                // let r = this.$parent.formA.sensorH || 0;
-
                 this.initSensor({ x, y, z }, type, true);
-                // this.initDragControls();
 
                 const obj = this.scene.getObjectByName("cube");
-                // console.log(obj);
-                // console.log(this.scene);
 
                 obj.position.x = x;
                 obj.position.y = y;
                 obj.position.z = z;
 
-                obj.rotateX(0 * -1);
-                obj.rotateX((h * Math.PI) / 180);
-                this.xAngle = (h * Math.PI) / 180;
+                // obj.rotateX(0 * -1);
+                // obj.rotateX((h * Math.PI) / 180);
+                this.xAngle = ((h-90) * Math.PI) / 180;
 
-                obj.rotateY(0 * -1);
-                obj.rotateY((p * Math.PI) / 180);
+                // obj.rotateY(0 * -1);
+                // obj.rotateY((p * Math.PI) / 180);
                 this.yAngle = (p * Math.PI) / 180;
 
-                obj.rotateZ(0 * -1);
-                obj.rotateZ((r * Math.PI) / 180);
+                // obj.rotateZ(0 * -1);
+                // obj.rotateZ((r * Math.PI) / 180);
                 this.zAngle = (r * Math.PI) / 180;
+                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
             }, 0);
         },
         // 初始化传感器
@@ -900,7 +855,6 @@ export default {
                         that.sensor = obj1;
                     }
                     obj1.name = "ogt";
-                    // console.log(obj1);
                     console.log(that.scene);
 
                     that.scene.add(obj1); //返回的组对象插入场景中
@@ -1059,8 +1013,6 @@ export default {
             }
 
             const obj = this.scene.getObjectByName("cube");
-            // console.log(obj);
-            console.log(this.scene);
             if (obj) {
                 this.scene.remove(obj);
             }

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -1,76 +1,11 @@
 <template>
     <div class="vehicleConfigurationDetailPanel">
         <el-form ref="form" :model="form" :rules="rules" label-width="108px">
-            <!-- <div class="inputBox flexBox">
+            <div class="inputBox flexBox">
                 <span class="label">配置ID</span>
                 <div>{{ form.configCode }}</div>
-            </div> -->
-
-            <el-row class="rowBox">
-                <el-col :span="6">
-                    <el-form-item label="配置名称:" prop="configName">
-                        <el-input
-                            placeholder="请输入"
-                            maxlength="60"
-                            v-autoTrim="{ obj: form, key: 'configName' }"
-                            v-model="form.configName"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item label="配置描述:" prop="configDescription">
-                        <el-input
-                            placeholder="请输入"
-                            maxlength="200"
-                            v-autoTrim="{
-                                obj: form,
-                                key: 'configDescription',
-                            }"
-                            v-model="form.configDescription"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item label="车辆名称:" prop="vehicleId">
-                        <el-select
-                            v-model="form.vehicleId"
-                            @change="vehicleChange"
-                        >
-                            <el-option
-                                v-for="item in vehicleNameList"
-                                :label="item.vehicleName"
-                                :value="item.id"
-                                :key="item.id"
-                            ></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item label="车辆描述:" prop="vehicleDescription">
-                        <el-input
-                            placeholder="请输入"
-                            maxlength="200"
-                            v-autoTrim="{
-                                obj: form,
-                                key: 'vehicleDescription',
-                            }"
-                            v-model="form.vehicleDescription"
-                            disabled
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <!-- <div>
-                <el-button type="primary" @click="drawer = true"
-                    >设置</el-button
-                >
-            </div> -->
-
-            <!-- <div class="flexBox headBox">
+            </div>
+            <div class="flexBox headBox">
                 <el-form-item label="配置名称:" prop="configName">
                     <el-input
                         placeholder="请输入"
@@ -80,16 +15,11 @@
                     >
                     </el-input>
                 </el-form-item>
-            </div>
-            <div class="flexBox headBox">
                 <el-form-item label="配置描述:" prop="configDescription">
                     <el-input
                         placeholder="请输入"
                         maxlength="200"
-                        v-autoTrim="{
-                            obj: form,
-                            key: 'configDescription',
-                        }"
+                        v-autoTrim="{ obj: form, key: 'configDescription' }"
                         v-model="form.configDescription"
                     >
                     </el-input>
@@ -106,255 +36,158 @@
                         ></el-option>
                     </el-select>
                 </el-form-item>
-            </div>
-            <div class="flexBox headBox">
                 <el-form-item label="车辆描述:" prop="vehicleDescription">
                     <el-input
                         placeholder="请输入"
                         maxlength="200"
-                        v-autoTrim="{
-                            obj: form,
-                            key: 'vehicleDescription',
-                        }"
+                        v-autoTrim="{ obj: form, key: 'vehicleDescription' }"
                         v-model="form.vehicleDescription"
                         disabled
                     >
                     </el-input>
                 </el-form-item>
-            </div> -->
+            </div>
         </el-form>
 
-        <div class="panelContent">
-            <!-- <div class="infoLeft"> -->
-            <div class="infoLeft contentBox">
-                <div
-                    class="handleList"
-                    v-bind:class="{
-                        handleListA: form.share === '0' || form.share === '1',
-                    }"
-                >
-                    <el-scrollbar
-                        id="elScrollBarA"
-                        ref="scrollbarA"
-                        view-class="scroll"
-                    >
-                        <handle-config-list
-                            ref="handleConfigList"
-                            @curItem="curItem"
-                            @addOne="addOne"
-                            @delOne="delOne"
-                            :configList="configList"
-                            :curOne="curOne"
-                        ></handle-config-list>
-                    </el-scrollbar>
-                </div>
-
-                <div class="btns">
-                    <el-button
-                        v-if="form.share === '0' || form.share === ''"
-                        type="primary"
-                        @click="save(false)"
-                        >保存</el-button
-                    >
-                    <el-button
-                        v-if="form.share === '1'"
-                        type="primary"
-                        @click="save(true)"
-                        >另存为</el-button
-                    >
-                    <el-button type="primary" plain @click="cancel"
-                        >取消</el-button
-                    >
-                </div>
-
-                <div class="btnsA" v-if="form.share === '0'">
-                    <el-button
-                        v-if="form.share === '0'"
-                        type="primary"
-                        @click="save(true)"
-                        >另存为</el-button
-                    >
-                </div>
+        <div class="contentBox">
+            <div>
+                <handle-config-list
+                    ref="handleConfigList"
+                    @curItem="curItem"
+                    @addOne="addOne"
+                    @delOne="delOne"
+                    :configList="configList"
+                    :curOne="curOne"
+                ></handle-config-list>
+            </div>
 
-                <!-- <canvas-sensor
+            <div
+                class="model"
+                v-bind:style="{ width: width + 'px', height: width / 2 + 'px' }"
+            >
+                <!-- <img :src="modelImgSrc" width="100%" /> -->
+                <canvas-sensor
                     ref="canvasSensor"
                     :coordinate="coordinate"
                     :modelImgSrc="modelImgSrc"
                     :curOneName="curOne.name"
-                ></canvas-sensor> -->
-                <!-- </div> -->
-                <!-- </div> -->
+                ></canvas-sensor>
             </div>
-            <div class="threeRight">
-                <div class="viewBox">
-                    <span
-                        class="view el-icon-view"
-                        @click="showAll"
-                        title="显示全部"
-                    ></span>
-                </div>
 
-                <three-sensor
-                    ref="threeSensor"
-                    :xValue="coordinate.x"
-                    :yValue="coordinate.y"
-                    :zValue="coordinate.z"
-                    :hValue="coordinate.p"
-                    :pValue="coordinate.r"
-                    :rValue="coordinate.h"
-                    :carModel="carModel"
-                    :isAdd="!!$route.query.id"
-                    :configList="configList"
-                    @posChange="posChange"
-                ></three-sensor>
-
-                <div v-show="configBox" class="conditions">
-                    <el-form
-                        ref="formA"
-                        :model="formA"
-                        :rules="rulesA"
-                        label-width="99px"
+            <div class="conditions">
+                <div class="btnBox">
+                    <el-button type="primary" @click="saveConfig"
+                        >保存设置</el-button
                     >
-                        <div class="forms">
-                            <el-form-item label="X(mm):" prop="sensorX">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorX',
-                                    }"
-                                    v-model="formA.sensorX"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="Y(mm):" prop="sensorY">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorY',
-                                    }"
-                                    v-model="formA.sensorY"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="Z(mm):" prop="sensorZ">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorZ',
-                                    }"
-                                    v-model="formA.sensorZ"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="横摆角(deg):" prop="sensorH">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorH',
-                                    }"
-                                    v-model="formA.sensorH"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="俯仰角(deg):" prop="sensorP">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorP',
-                                    }"
-                                    v-model="formA.sensorP"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="翻滚角(deg):" prop="sensorR">
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="12"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorR',
-                                    }"
-                                    v-model="formA.sensorR"
-                                    @input="inputChange"
-                                    type="number"
-                                    step="1"
-                                >
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item
-                                label="端口"
-                                prop="sensorPort"
-                                v-show="curOne.name === 'ogt'"
+                </div>
+
+                <el-form
+                    ref="formA"
+                    :model="formA"
+                    :rules="rulesA"
+                    label-width="108px"
+                >
+                    <div class="forms">
+                        <el-form-item label="X(mm):" prop="sensorX">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorX' }"
+                                v-model="formA.sensorX"
+                                @input="inputChange"
                             >
-                                <el-input
-                                    placeholder="请输入"
-                                    maxlength="9"
-                                    v-autoTrim="{
-                                        obj: formA,
-                                        key: 'sensorPort',
-                                    }"
-                                    v-model="formA.sensorPort"
-                                >
-                                </el-input>
-                            </el-form-item>
-                        </div>
-                    </el-form>
-
-                    <div class="btnBox">
-                        <el-button
-                            type="primary"
-                            @click="saveConfig"
-                            size="small"
-                            >保存设置</el-button
-                        >
-                        <el-button
-                            type="primary"
-                            @click="closeConfig"
-                            plain
-                            size="small"
-                            >关闭</el-button
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="Y(mm):" prop="sensorY">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorY' }"
+                                v-model="formA.sensorY"
+                                @input="inputChange"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="Z(mm):" prop="sensorZ">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorZ' }"
+                                v-model="formA.sensorZ"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="横摆角(deg):" prop="sensorH">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorH' }"
+                                v-model="formA.sensorH"
+                                @input="inputChange"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="俯仰角(deg):" prop="sensorP">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorP' }"
+                                v-model="formA.sensorP"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="翻滚角(deg):" prop="sensorR">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="12"
+                                v-autoTrim="{ obj: formA, key: 'sensorR' }"
+                                v-model="formA.sensorR"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item
+                            label="端口"
+                            prop="sensorPort"
+                            v-show="curOne.name === 'ogt'"
                         >
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="9"
+                                v-autoTrim="{ obj: formA, key: 'sensorPort' }"
+                                v-model="formA.sensorPort"
+                            >
+                            </el-input>
+                        </el-form-item>
                     </div>
-                </div>
+                </el-form>
             </div>
         </div>
+        <div class="btns">
+            <el-button
+                v-if="form.share === '0' || form.share === ''"
+                type="primary"
+                @click="save(false)"
+                >保存</el-button
+            >
+            <el-button
+                v-if="form.share === '0' || form.share === '1'"
+                type="primary"
+                @click="save(true)"
+                >另存为</el-button
+            >
+            <el-button type="primary" plain @click="cancel">取消</el-button>
+        </div>
     </div>
 </template>
 
 <script>
 import handleConfigList from "./components/handleConfigList.vue";
 import canvasSensor from "./components/canvasVehicleConfiguration.vue";
-import threeSensor from "./components/threeVehicleConfiguration.vue";
 import { mapState } from "vuex";
 
 export default {
     name: "vehicleConfigurationDetail", // 车辆配置详情
-    components: { handleConfigList, canvasSensor, threeSensor },
+    components: { handleConfigList, canvasSensor },
     data() {
         // 校验最多4位小数
         let validateNum = (rule, value, callback) => {
@@ -419,7 +252,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -431,7 +264,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -443,7 +276,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -451,12 +284,12 @@ export default {
                     { required: true, message: "请输入", trigger: "blur" },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                     {
                         validator: validateNumC,
-                        message: "-180至180",
+                        message: "请输入不小于-180且不大于180的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -464,12 +297,12 @@ export default {
                     { required: true, message: "请输入", trigger: "blur" },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                     {
                         validator: validateNumC,
-                        message: "-180至180",
+                        message: "请输入不小于-180且不大于180的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -477,12 +310,12 @@ export default {
                     { required: true, message: "请输入", trigger: "blur" },
                     {
                         validator: validateNum,
-                        message: "最多带有4位小数",
+                        message: "请输入最多带有4位小数的数字",
                         trigger: ["blur"],
                     },
                     {
                         validator: validateNumC,
-                        message: "-180至180",
+                        message: "请输入不小于-180且不大于180的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -504,13 +337,7 @@ export default {
             },
             modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
             width: 300,
-            // 若都是0，第一个input改变时，如果值为0，会出现值变了，
-            // 但传感器没有变化的问题，输入其他值和后续输入均无问题
-            // 每切换一次也有此问题，故不能给0
-            coordinate: { x: 0.1, y: 0.1, z: 0.1, h: 0.1, p: 0.1, r: 0.1 }, // 存放传递给展示的值
-            // coordinate: { x: 20, y: 20, z: 20, h: 20, p: 20, r: 20 }, // 存放传递给展示的值
-            configBox: false, // 配置项box
-            carModel: "", // 车模型
+            coordinate: { x: 0, y: 0 }, // 存放传递给canvas的值
         };
     },
 
@@ -596,17 +423,6 @@ export default {
             let item = this.vehicleNameList.find((i) => i.id == id);
             this.form.vehicleDescription = item.description;
             this.modelImgSrc = this.getImgUrl(item.vehicleTopView);
-
-            // console.log('change');
-            // if (/[0-9]/.test(+id.slice(-1))) {
-            //     this.carModel = "2";
-            // } else {
-            //     if (id.slice(-1) === "f") {
-            //         this.carModel = "f";
-            //     } else {
-            //         this.carModel = "7";
-            //     }
-            // }
             // this.$refs.canvasSensor.drawBg();
         },
         // 验证各传感器数组的每一项表单数据是否齐全
@@ -696,7 +512,6 @@ export default {
             }
             //若直接传info即this.form，可能是由于传入了响应式，造成数据会变动
             this.configList[type].unshift({ ...info });
-            this.configBox = true;
         },
         delOne(type, index) {
             this.configList[type].splice(index, 1);
@@ -720,14 +535,6 @@ export default {
                     this.formA,
                     this.configList[item.name][item.index]
                 ); */
-                this.coordinate = {
-                    x: 0.1,
-                    y: 0.1,
-                    z: 0.1,
-                    h: 0.1,
-                    p: 0.1,
-                    r: 0.1,
-                };
                 let formA = this.configList[item.name][item.index];
 
                 this.formA.sensorX = formA.sensorX;
@@ -740,13 +547,8 @@ export default {
                     this.formA.sensorPort = formA.sensorPort;
                 }
             }
-            // this.$refs.canvasSensor.clear();
-            // this.$refs.threeSensor.reset();
-            setTimeout(() => {
-                this.$refs.threeSensor.reset(this.curOne.name);
-            }, 0);
-            this.configBox = true;
-            // this.inputChange();
+            this.$refs.canvasSensor.clear();
+            this.inputChange();
         },
         saveConfig() {
             if (this.curOne.index < 0) {
@@ -780,53 +582,21 @@ export default {
             if (
                 this.formA.sensorX === "" ||
                 this.formA.sensorY === "" ||
-                this.formA.sensorZ === "" ||
-                this.formA.sensorH === "" ||
-                this.formA.sensorP === "" ||
-                this.formA.sensorR === ""
+                this.formA.sensorH === ""
             )
                 return;
             this.coordinate = {
-                x: +this.formA.sensorX,
-                y: +this.formA.sensorY,
-                z: +this.formA.sensorZ,
-                h: +this.formA.sensorH,
-                p: +this.formA.sensorP,
-                r: +this.formA.sensorR,
+                x: this.formA.sensorX,
+                y: this.formA.sensorY,
+                h: this.formA.sensorH,
             };
         },
-        posChange(val, type) {
-            switch (type) {
-                case "x":
-                    this.coordinate.x = +val;
-                    this.formA.sensorX = val;
-                    break;
-                case "y":
-                    this.coordinate.y = +val;
-                    this.formA.sensorY = val;
-                    break;
-                case "z":
-                    this.coordinate.z = +val;
-                    this.formA.sensorZ = val;
-                    break;
-                default:
-                    break;
-            }
-        },
-        closeConfig() {
-            this.configBox = false;
-        },
-        // 显示全部传感器
-        showAll() {
-            this.$refs.threeSensor.showAll();
-            this.closeConfig();
-        },
     },
 
     mounted() {
-        // setTimeout(() => {
-        //     this.domHandle();
-        // }, 0);
+        setTimeout(() => {
+            this.domHandle();
+        }, 0);
 
         this.getMyVehicleList();
 
@@ -835,26 +605,26 @@ export default {
             this.form.id = id = this.$route.query.id;
             this.form.share = this.$route.query.share;
 
-            // if (id) {
-            this.$axios({
-                method: "post",
-                url: this.$api.modelLibrary.getConfigInfo,
-                data: {
-                    id,
-                },
-            }).then((res) => {
-                if (res.code == 200 && res.info) {
-                    this.form = res.info;
-                    this.configList = res.info.configSensors;
-                    this.modelImgSrc = this.getImgUrl(res.info.vehicleTopView);
-                    // this.$refs.threeSensor.initCar();
-                    this.carModel = "1";
-                    // this.validateSensorsList();
-                } else {
-                    this.$message.error(res.message || "获取信息失败");
-                }
-            });
-            // }
+            if (id) {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.modelLibrary.getConfigInfo,
+                    data: {
+                        id,
+                    },
+                }).then((res) => {
+                    if (res.code == 200 && res.info) {
+                        this.form = res.info;
+                        this.configList = res.info.configSensors;
+                        this.modelImgSrc = this.getImgUrl(
+                            res.info.vehicleTopView
+                        );
+                        // this.validateSensorsList();
+                    } else {
+                        this.$message.error(res.message || "获取信息失败");
+                    }
+                });
+            }
         }
     },
 };
@@ -862,20 +632,7 @@ export default {
 
 <style lang='less' scoped>
 .vehicleConfigurationDetailPanel {
-    margin: 20px 0 -60px 20px;
-}
-
-.rowBox {
-    padding-right: 20px;
-
-    .el-input,
-    .el-select {
-        width: 100%;
-    }
-
-    .el-select /deep/ .el-input {
-        width: 100%;
-    }
+    margin: 55px 50px 0;
 }
 
 .headBox {
@@ -896,128 +653,34 @@ export default {
     }
 }
 
-#elScrollBarA {
-    width: 100%;
-    height: 100%;
-}
-
-/deep/ .el-scrollbar__wrap {
-    overflow: auto;
-}
-
-/deep/ .el-scrollbar__bar {
-    opacity: 0.3 !important;
-}
-/deep/ .el-scrollbar__bar:hover {
-    opacity: 0.6 !important;
-}
-
-.panelContent {
+.contentBox {
     display: flex;
-    // height: calc(100vh - 260px);
-
-    .infoLeft {
-        width: 220px;
-        padding-right: 10px;
+    justify-content: space-between;
+    margin-top: 30px;
 
-        // .contentBox {
-        // display: flex;
-        // justify-content: space-between;
-        margin-top: 30px;
-
-        .handleList {
-            width: 210px;
-            height: calc(100vh - 240px);
-            overflow-y: auto;
-
-            &.handleListA {
-                height: calc(100vh - 270px);
-            }
-        }
+    .model {
+        // width: 400px;
+        flex: 1;
+        margin: 0 10%;
+    }
 
-        .model {
-            // width: 400px;
-            // flex: 1;
-            margin: 0 10%;
+    .conditions {
+        .btnBox {
+            padding: 0 0 30px;
         }
-        // }
 
-        .btns {
-            padding-top: 30px;
-            text-align: center;
-
-            // .el-button {
-            //     // min-width: none;
-            //     // width: 70px !important;
-            //     margin-bottom: 10px;
-            // }
+        .forms /deep/ .el-form-item__label {
+            width: 120px !important;
         }
 
-        .btnsA {
-            padding-top: 10px;
-            text-align: center;
+        .forms /deep/ .el-form-item__content {
+            margin-left: 120px !important;
         }
     }
+}
 
-    .threeRight {
-        position: relative;
-        flex: 1;
-        // height: calc(100vh - 360px);
-
-        .viewBox {
-            position: absolute;
-            left: 2px;
-            top: 2px;
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            background-color: #ffffff;
-            opacity: 0.75;
-
-            .view {
-                font-size: 18px;
-                cursor: pointer;
-                color: @themeColor;
-            }
-        }
-
-        .conditions {
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            width: 219px;
-            height: 372px;
-            padding: 10px;
-            background-color: #ffffff;
-
-            .btnBox {
-                padding: 0 0 10px;
-                text-align: center;
-            }
-
-            .forms /deep/ .el-form-item__label {
-                // width: 120px !important;
-                padding-right: 10px;
-                line-height: 22px;
-                font-size: 12px;
-            }
-
-            .forms /deep/ .el-form-item__content {
-                // margin-left: 120px !important;
-                line-height: 22px;
-                font-size: 12px;
-            }
-
-            .el-input {
-                width: 100px;
-                font-size: 12px;
-            }
-
-            .forms /deep/ .el-input__inner {
-                height: 22px;
-            }
-        }
-    }
+.btns {
+    padding-top: 30px;
+    text-align: center;
 }
 </style>

src/views/modelLibrary/vehicleConfigurationDetail1.vue

@@ -0,0 +1,968 @@
+<template>
+    <div class="vehicleConfigurationDetailPanel">
+        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
+            <el-row class="rowBox">
+                <el-col :span="6">
+                    <el-form-item label="配置名称:" prop="configName">
+                        <el-input
+                            placeholder="请输入"
+                            maxlength="60"
+                            v-autoTrim="{ obj: form, key: 'configName' }"
+                            v-model="form.configName"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="配置描述:" prop="configDescription">
+                        <el-input
+                            placeholder="请输入"
+                            maxlength="200"
+                            v-autoTrim="{
+                                obj: form,
+                                key: 'configDescription',
+                            }"
+                            v-model="form.configDescription"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="车辆名称:" prop="vehicleId">
+                        <el-select
+                            v-model="form.vehicleId"
+                            @change="vehicleChange"
+                        >
+                            <el-option
+                                v-for="item in vehicleNameList"
+                                :label="item.vehicleName"
+                                :value="item.id"
+                                :key="item.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="车辆描述:" prop="vehicleDescription">
+                        <el-input
+                            placeholder="请输入"
+                            maxlength="200"
+                            v-autoTrim="{
+                                obj: form,
+                                key: 'vehicleDescription',
+                            }"
+                            v-model="form.vehicleDescription"
+                            disabled
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <div class="panelContent">
+            <!-- <div class="infoLeft"> -->
+            <div class="infoLeft contentBox">
+                <div
+                    class="handleList"
+                    v-bind:class="{
+                        handleListA: form.share === '0' || form.share === '1',
+                    }"
+                >
+                    <el-scrollbar
+                        id="elScrollBarA"
+                        ref="scrollbarA"
+                        view-class="scroll"
+                    >
+                        <handle-config-list
+                            ref="handleConfigList"
+                            @curItem="curItem"
+                            @addOne="addOne"
+                            @delOne="delOne"
+                            :configList="configList"
+                            :curOne="curOne"
+                        ></handle-config-list>
+                    </el-scrollbar>
+                </div>
+
+                <div class="btns">
+                    <el-button
+                        v-if="form.share === '0' || form.share === ''"
+                        type="primary"
+                        @click="save(false)"
+                        >保存</el-button
+                    >
+                    <el-button
+                        v-if="form.share === '1'"
+                        type="primary"
+                        @click="save(true)"
+                        >另存为</el-button
+                    >
+                    <el-button type="primary" plain @click="cancel"
+                        >取消</el-button
+                    >
+                </div>
+
+                <div class="btnsA" v-if="form.share === '0'">
+                    <el-button
+                        v-if="form.share === '0'"
+                        type="primary"
+                        @click="save(true)"
+                        >另存为</el-button
+                    >
+                </div>
+
+                <!-- <canvas-sensor
+                    ref="canvasSensor"
+                    :coordinate="coordinate"
+                    :modelImgSrc="modelImgSrc"
+                    :curOneName="curOne.name"
+                ></canvas-sensor> -->
+                <!-- </div> -->
+                <!-- </div> -->
+            </div>
+            <div class="threeRight">
+                <div class="viewBox">
+                    <span
+                        class="view el-icon-view"
+                        @click="showAll"
+                        title="显示全部"
+                    ></span>
+                </div>
+
+                <three-sensor
+                    ref="threeSensor"
+                    :xValue="coordinate.x"
+                    :yValue="coordinate.y"
+                    :zValue="coordinate.z"
+                    :hValue="coordinate.p"
+                    :pValue="coordinate.r"
+                    :rValue="coordinate.h"
+                    :carModel="carModel"
+                    :isAdd="!!$route.query.id"
+                    :configList="configList"
+                    @posChange="posChange"
+                ></three-sensor>
+
+                <div v-show="configBox" class="conditions">
+                    <el-form
+                        ref="formA"
+                        :model="formA"
+                        :rules="rulesA"
+                        label-width="99px"
+                    >
+                        <div class="forms">
+                            <el-form-item label="X(mm):" prop="sensorX">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorX',
+                                    }"
+                                    v-model="formA.sensorX"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item label="Y(mm):" prop="sensorY">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorY',
+                                    }"
+                                    v-model="formA.sensorY"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item label="Z(mm):" prop="sensorZ">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorZ',
+                                    }"
+                                    v-model="formA.sensorZ"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item label="横摆角(deg):" prop="sensorH">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorH',
+                                    }"
+                                    v-model="formA.sensorH"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item label="俯仰角(deg):" prop="sensorP">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorP',
+                                    }"
+                                    v-model="formA.sensorP"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item label="翻滚角(deg):" prop="sensorR">
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="12"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorR',
+                                    }"
+                                    v-model="formA.sensorR"
+                                    @input="inputChange"
+                                    type="number"
+                                    step="1"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item
+                                label="端口"
+                                prop="sensorPort"
+                                v-show="curOne.name === 'ogt'"
+                            >
+                                <el-input
+                                    placeholder="请输入"
+                                    maxlength="9"
+                                    v-autoTrim="{
+                                        obj: formA,
+                                        key: 'sensorPort',
+                                    }"
+                                    v-model="formA.sensorPort"
+                                >
+                                </el-input>
+                            </el-form-item>
+                        </div>
+                    </el-form>
+
+                    <div class="btnBox">
+                        <el-button
+                            type="primary"
+                            @click="saveConfig"
+                            size="small"
+                            >保存设置</el-button
+                        >
+                        <el-button
+                            type="primary"
+                            @click="closeConfig"
+                            plain
+                            size="small"
+                            >关闭</el-button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import handleConfigList from "./components/handleConfigList.vue";
+import canvasSensor from "./components/canvasVehicleConfiguration.vue";
+import threeSensor from "./components/threeVehicleConfiguration.vue";
+import { mapState } from "vuex";
+
+export default {
+    name: "vehicleConfigurationDetail", // 车辆配置详情
+    components: { handleConfigList, canvasSensor, threeSensor },
+    data() {
+        // 校验最多4位小数
+        let validateNum = (rule, value, callback) => {
+            !/^(-?(0|[1-9][0-9]*))(\.\d{1,4})?$/.test(value) &&
+                callback(new Error(rule.message));
+            callback();
+        };
+        // 校验不大于180且不小于-180
+        let validateNumC = (rule, value, callback) => {
+            if (value < -180 || value > 180) {
+                callback(new Error(rule.message));
+                return;
+            }
+            callback();
+        };
+
+        return {
+            vehicleNameList: [],
+            form: {
+                id: "",
+                configCode: "", // 配置ID
+                configName: "", // 配置名称
+                configDescription: "", // 配置描述
+                vehicleName: "", // 车辆名称
+                vehicleId: "", // 车辆名称
+                vehicleDescription: "", // 车辆描述
+                share: "",
+            },
+            formA: {
+                sensorX: "", // 传感器横向偏移量（x轴）
+                sensorY: "", // 传感器横向偏移量（y轴）
+                sensorZ: "", // 传感器横向偏移量（z轴）
+                sensorH: "", // 横摆角
+                sensorP: "", // 俯仰角
+                sensorR: "", // 横滚角
+                sensorPort: "", // 端口
+            },
+            rules: {
+                configName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                configDescription: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                vehicleId: [
+                    {
+                        required: true,
+                        message: "请选择",
+                        trigger: "change",
+                    },
+                ],
+                vehicleDescription: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+            },
+            rulesA: {
+                sensorX: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorY: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorZ: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorH: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                    {
+                        validator: validateNumC,
+                        message: "-180至180",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorP: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                    {
+                        validator: validateNumC,
+                        message: "-180至180",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorR: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                    {
+                        validator: validateNum,
+                        message: "最多带有4位小数",
+                        trigger: ["blur"],
+                    },
+                    {
+                        validator: validateNumC,
+                        message: "-180至180",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorPort: [
+                    { required: false, message: "请输入", trigger: "blur" },
+                ],
+            },
+            // 传感器对象集合
+            configList: {
+                camera: [],
+                ogt: [],
+                lidar: [],
+                gps: [],
+            },
+            // 用于当前选中项的展示
+            curOne: {
+                name: "",
+                index: -1,
+            },
+            modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
+            width: 300,
+            // 若都是0，第一个input改变时，如果值为0，会出现值变了，
+            // 但传感器没有变化的问题，输入其他值和后续输入均无问题
+            // 每切换一次也有此问题，故不能给0
+            coordinate: { x: 0.1, y: 0.1, z: 0.1, h: 0.1, p: 0.1, r: 0.1 }, // 存放传递给展示的值
+            // coordinate: { x: 0, y: 0, z: 0, h: 0, p: 0, r: 0 }, // 存放传递给展示的值
+            // coordinate: { x: 20, y: 20, z: 20, h: 20, p: 20, r: 20 }, // 存放传递给展示的值
+            configBox: false, // 配置项box
+            carModel: "", // 车模型
+        };
+    },
+
+    watch: {
+        curOne(val) {
+            if (val.name === "ogt") {
+                // 校验端口号
+                let validatePort = (rule, value, callback) => {
+                    !/^(\d{5})$/.test(value) &&
+                        callback(new Error(rule.message));
+
+                    if (value > 65535 || value < 62000) {
+                        callback(new Error(rule.message));
+                        return;
+                    }
+                    callback();
+                };
+
+                let validatePortNoRepeat = (rule, value, callback) => {
+                    let ports = this.configList.ogt.map(
+                        (i) => i.sensorPort + ""
+                    );
+                    ports.splice(this.curOne.index, 1);
+
+                    if (ports.includes(value)) {
+                        callback(new Error(rule.message));
+                        return;
+                    } else {
+                        callback();
+                    }
+                };
+
+                this.rulesA.sensorPort[0].required = true;
+                this.rulesA.sensorPort[1] = {
+                    validator: validatePort,
+                    message: "请输入62000至65535之间的5位数字",
+                    trigger: ["blur"],
+                };
+                this.rulesA.sensorPort[2] = {
+                    validator: validatePortNoRepeat,
+                    message: "端口号重复",
+                    trigger: ["blur"],
+                };
+            } else {
+                this.rulesA.sensorPort[0].required = false;
+                this.rulesA.sensorPort.length = 1;
+            }
+        },
+    },
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
+
+    methods: {
+        // 获取车辆名称私有下拉列表
+        async getMyVehicleList() {
+            await this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getMyVehicleList,
+                data: {},
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.vehicleNameList = res.info;
+                } else {
+                    this.$message.error(res.message || "获取信息失败");
+                }
+            });
+        },
+        getImgUrl(addr) {
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            let src = `${url}?objectName=${addr}&access_token=${token}`;
+            return src;
+        },
+        vehicleChange(id) {
+            let item = this.vehicleNameList.find((i) => i.id == id);
+            this.form.vehicleDescription = item.description;
+            this.modelImgSrc = this.getImgUrl(item.vehicleTopView);
+
+            // console.log('change');
+            // if (/[0-9]/.test(+id.slice(-1))) {
+            //     this.carModel = "2";
+            // } else {
+            //     if (id.slice(-1) === "f") {
+            //         this.carModel = "f";
+            //     } else {
+            //         this.carModel = "7";
+            //     }
+            // }
+            // this.$refs.canvasSensor.drawBg();
+        },
+        // 验证各传感器数组的每一项表单数据是否齐全
+        validateSensorsList() {
+            // console.log(Object.keys(this.configList));
+            // console.log(Object.values(this.configList));
+            // console.log(Object.entries(this.configList));
+
+            let lists = Object.entries(this.configList);
+
+            for (let index = 0; index < lists.length; index++) {
+                const element = lists[index];
+                let oneIndex = element[1].findIndex(
+                    (i) => i.sensorX == null && i.sensorY == null
+                );
+
+                if (oneIndex > -1) {
+                    this.$refs.handleConfigList.configHandle(
+                        element[0],
+                        oneIndex
+                    );
+
+                    // 如果对应项未展开 让其展开
+                    if (
+                        element[0] === "camera" &&
+                        !this.$refs.handleConfigList.isActiveA
+                    ) {
+                        this.$refs.handleConfigList.isActiveA = true;
+                    } else if (
+                        element[0] === "ogt" &&
+                        !this.$refs.handleConfigList.isActiveB
+                    ) {
+                        this.$refs.handleConfigList.isActiveB = true;
+                    } else if (
+                        element[0] === "lidar" &&
+                        !this.$refs.handleConfigList.isActiveC
+                    ) {
+                        this.$refs.handleConfigList.isActiveC = true;
+                    } else if (
+                        element[0] === "gps" &&
+                        !this.$refs.handleConfigList.isActiveE
+                    ) {
+                        this.$refs.handleConfigList.isActiveE = true;
+                    }
+
+                    this.$message.error("请先设置数据并保存");
+                    return false;
+                }
+            }
+            return true;
+        },
+        save(isAdd) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
+
+                    if (!this.validateSensorsList()) return;
+
+                    let data = Object.assign({}, this.form, {
+                        configSensors: this.configList,
+                    });
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveConfig,
+                        data,
+                    }).then((res) => {
+                        if (res.code == 200) {
+                            this.$message.success("保存成功");
+                            this.cancel();
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        /**
+         * info 新增传感器信息
+         * type 传感器类型
+         */
+        addOne(info, type) {
+            // 如果列表里没有对应类型的数组则需手动添加
+            if (!this.configList[type]) {
+                this.configList[type] = [];
+            }
+            //若直接传info即this.form，可能是由于传入了响应式，造成数据会变动
+            this.configList[type].unshift({ ...info });
+            this.configBox = true;
+        },
+        delOne(type, index) {
+            this.configList[type].splice(index, 1);
+        },
+        curItem(item, isAdd) {
+            this.$refs.formA.resetFields();
+            this.curOne = item;
+            if (isAdd) {
+                this.formA.sensorX = "0";
+                this.formA.sensorY = "0";
+                this.formA.sensorZ = "0";
+                this.formA.sensorH = "0";
+                this.formA.sensorP = "0";
+                this.formA.sensorR = "0";
+                if (this.curOne.name === "ogt") {
+                    this.formA.sensorPort = "62000";
+                }
+            } else {
+                // 此写法因formA包含太多信息，直接覆盖式的传后续会有问题
+                /* Object.assign(
+                    this.formA,
+                    this.configList[item.name][item.index]
+                ); */
+                this.coordinate = {
+                    x: 0.1,
+                    y: 0.1,
+                    z: 0.1,
+                    h: 0.1,
+                    p: 0.1,
+                    r: 0.1,
+                };
+                // this.coordinate = {
+                //     x: 0,
+                //     y: 0,
+                //     z: 0,
+                //     h: 0,
+                //     p: 0,
+                //     r: 0,
+                // };
+                let formA = this.configList[item.name][item.index];
+
+                this.formA.sensorX = formA.sensorX;
+                this.formA.sensorY = formA.sensorY;
+                this.formA.sensorZ = formA.sensorZ;
+                this.formA.sensorH = formA.sensorH;
+                this.formA.sensorP = formA.sensorP;
+                this.formA.sensorR = formA.sensorR;
+                if (this.curOne.name === "ogt") {
+                    this.formA.sensorPort = formA.sensorPort;
+                }
+            }
+            // this.$refs.canvasSensor.clear();
+            // this.$refs.threeSensor.reset();
+            setTimeout(() => {
+                this.$refs.threeSensor.reset(this.curOne.name);
+            }, 0);
+            this.configBox = true;
+            // this.inputChange();
+        },
+        saveConfig() {
+            if (this.curOne.index < 0) {
+                this.$message.info("请先选择传感器");
+                return;
+            }
+
+            this.$refs.formA.validate((valid) => {
+                if (valid) {
+                    Object.assign(
+                        this.configList[this.curOne.name][this.curOne.index],
+                        this.formA
+                    );
+                    this.$message.success("保存设置成功");
+                }
+            });
+        },
+        cancel() {
+            this.$router.replace({ path: "/vehicleConfigurationList" });
+        },
+        // 给canvas的外层容器赋值
+        domHandle() {
+            $(document).ready(() => {
+                this.width = $(
+                    ".vehicleConfigurationDetailPanel .model"
+                ).outerWidth();
+            });
+        },
+        inputChange() {
+            if (this.curOne.index < 0) return;
+            if (
+                this.formA.sensorX === "" ||
+                this.formA.sensorY === "" ||
+                this.formA.sensorZ === "" ||
+                this.formA.sensorH === "" ||
+                this.formA.sensorP === "" ||
+                this.formA.sensorR === ""
+            )
+                return;
+            this.coordinate = {
+                x: +this.formA.sensorX,
+                y: +this.formA.sensorY,
+                z: +this.formA.sensorZ,
+                h: +this.formA.sensorH,
+                p: +this.formA.sensorP,
+                r: +this.formA.sensorR,
+            };
+        },
+        posChange(val, type) {
+            switch (type) {
+                case "x":
+                    this.coordinate.x = +val;
+                    this.formA.sensorX = val;
+                    break;
+                case "y":
+                    this.coordinate.y = +val;
+                    this.formA.sensorY = val;
+                    break;
+                case "z":
+                    this.coordinate.z = +val;
+                    this.formA.sensorZ = val;
+                    break;
+                default:
+                    break;
+            }
+        },
+        closeConfig() {
+            this.configBox = false;
+        },
+        // 显示全部传感器
+        showAll() {
+            this.$refs.threeSensor.showAll();
+            this.closeConfig();
+        },
+    },
+
+    mounted() {
+        // setTimeout(() => {
+        //     this.domHandle();
+        // }, 0);
+
+        this.getMyVehicleList();
+
+        if (this.$route.query.id) {
+            let id = "";
+            this.form.id = id = this.$route.query.id;
+            this.form.share = this.$route.query.share;
+
+            // if (id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getConfigInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.form = res.info;
+                    this.configList = res.info.configSensors;
+                    this.modelImgSrc = this.getImgUrl(res.info.vehicleTopView);
+                    // this.$refs.threeSensor.initCar();
+                    this.carModel = "1";
+                    // this.validateSensorsList();
+                } else {
+                    this.$message.error(res.message || "获取信息失败");
+                }
+            });
+            // }
+        }
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.vehicleConfigurationDetailPanel {
+    margin: 20px 0 -60px 20px;
+}
+
+.rowBox {
+    padding-right: 20px;
+
+    .el-input,
+    .el-select {
+        width: 100%;
+    }
+
+    .el-select /deep/ .el-input {
+        width: 100%;
+    }
+}
+
+.headBox {
+    .el-form-item {
+        margin-right: 20px;
+    }
+}
+
+.inputBox.flexBox {
+    margin-bottom: 22px;
+
+    .label {
+        width: 88px;
+    }
+
+    div {
+        line-height: 32px;
+    }
+}
+
+#elScrollBarA {
+    width: 100%;
+    height: 100%;
+}
+
+/deep/ .el-scrollbar__wrap {
+    overflow: auto;
+}
+
+/deep/ .el-scrollbar__bar {
+    opacity: 0.3 !important;
+}
+/deep/ .el-scrollbar__bar:hover {
+    opacity: 0.6 !important;
+}
+
+.panelContent {
+    display: flex;
+    // height: calc(100vh - 260px);
+
+    .infoLeft {
+        width: 220px;
+        padding-right: 10px;
+
+        // .contentBox {
+        // display: flex;
+        // justify-content: space-between;
+        margin-top: 30px;
+
+        .handleList {
+            width: 210px;
+            height: calc(100vh - 240px);
+            overflow-y: auto;
+
+            &.handleListA {
+                height: calc(100vh - 270px);
+            }
+        }
+
+        .model {
+            // width: 400px;
+            // flex: 1;
+            margin: 0 10%;
+        }
+        // }
+
+        .btns {
+            padding-top: 30px;
+            text-align: center;
+
+            // .el-button {
+            //     // min-width: none;
+            //     // width: 70px !important;
+            //     margin-bottom: 10px;
+            // }
+        }
+
+        .btnsA {
+            padding-top: 10px;
+            text-align: center;
+        }
+    }
+
+    .threeRight {
+        position: relative;
+        flex: 1;
+        // height: calc(100vh - 360px);
+
+        .viewBox {
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background-color: #ffffff;
+            opacity: 0.75;
+
+            .view {
+                font-size: 18px;
+                cursor: pointer;
+                color: @themeColor;
+            }
+        }
+
+        .conditions {
+            position: absolute;
+            right: 2px;
+            top: 2px;
+            width: 219px;
+            height: 372px;
+            padding: 10px;
+            background-color: #ffffff;
+
+            .btnBox {
+                padding: 0 0 10px;
+                text-align: center;
+            }
+
+            .forms /deep/ .el-form-item__label {
+                // width: 120px !important;
+                padding-right: 10px;
+                line-height: 22px;
+                font-size: 12px;
+            }
+
+            .forms /deep/ .el-form-item__content {
+                // margin-left: 120px !important;
+                line-height: 22px;
+                font-size: 12px;
+            }
+
+            .el-input {
+                width: 100px;
+                font-size: 12px;
+            }
+
+            .forms /deep/ .el-input__inner {
+                height: 22px;
+            }
+        }
+    }
+}
+</style>