|
|
@@ -1,968 +0,0 @@
|
|
|
-<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>
|
zhangliang2