|
|
@@ -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>
|
zhangliang2