模型库联调

src/App.vue

@@ -6,7 +6,7 @@
 
 <style lang="less">
 #app {
-    min-width: 1350px;
+    min-width: 1347px;
     width: 100%;
     height: 100%;
     margin: 0;

src/api/common.js

@@ -4,10 +4,13 @@ const single = '/simulation/oauth/client/sign/single';
 const getDictListsByTypes = '/simulation/resource/server/dict/getDictListsByTypes'; // 字典 单级下拉
 const getDictTreesByTypes = '/simulation/resource/server/dict/getDictTreesByTypes'; // 字典 多级下拉
 
+const uploadNew = '/simulation/resource/server/file/uploadNew'; // 上传
+
 export default {
     single,
     getDictListsByTypes,
-    getDictTreesByTypes
+    getDictTreesByTypes,
+    uploadNew
 }
 
 //10.15.12.74:7001/simulation/oauth/client/sign/single?code=1001&ticket=1001

src/api/index.js

@@ -3,11 +3,13 @@ import Vue from "vue";
 import common from './common.js'
 import sceneLibrary from './sceneLibrary.js'
 import workManagement from './workManagement.js'
+import modelLibrary from './modelLibrary.js'
 
 const api = {
     common,
     sceneLibrary,
-    workManagement
+    workManagement,
+    modelLibrary
 }
 
 export default api;

src/api/modelLibrary.js

@@ -0,0 +1,88 @@
+const basePart = '/simulation/resource/server';
+
+const getVehicleList = basePart + '/vehicle/getVehicleList'; // 车辆模型查询列表
+const getVehicleInfo = basePart + '/vehicle/getVehicleInfo'; // 车辆模型查询详情
+const saveVehicle = basePart + '/vehicle/saveVehicle'; // 车辆模型保存修改详情
+const shareVehicle = basePart + '/vehicle/shareVehicle'; // 车辆模型分享详情
+const delVehicleById = basePart + '/vehicle/delVehicleById'; // 车辆模型删除详情
+
+const getCameraList = basePart + '/camera/getCameraList'; // 摄像头-列表查询
+const getCameraInfo = basePart + '/camera/getCameraInfo'; // 摄像头-详情查询
+const saveCamera = basePart + '/camera/saveCamera'; // 摄像头-保存修改
+const shareCamera = basePart + '/camera/shareCamera'; // 摄像头-分享
+const delCameraById = basePart + '/camera/delCameraById'; // 摄像头-删除
+
+const getOgtList = basePart + '/ogt/getOgtList'; // 完美传感器-列表查询
+const getOgtInfo = basePart + '/ogt/getOgtInfo'; // 完美传感器-详情查询
+const saveOgt = basePart + '/ogt/saveOgt'; // 完美传感器-保存修改
+const shareOgt = basePart + '/ogt/shareOgt'; // 完美传感器-分享
+const delOgtById = basePart + '/ogt/delOgtById'; // 完美传感器-删除
+
+const getLidarList = basePart + '/lidar/getLidarList'; // 激光雷达对象-列表查询
+const getLidarInfo = basePart + '/lidar/getLidarInfo'; // 激光雷达对象-详情查询
+const saveLidar = basePart + '/lidar/saveLidar'; // 激光雷达对象-保存修改
+const shareLidar = basePart + '/lidar/shareLidar'; // 激光雷达对象-分享
+const delLidarById = basePart + '/lidar/delLidarById'; // 激光雷达对象-删除
+
+const getGpsList = basePart + '/gps/getGpsList'; // GPS-列表查询
+const getGpsInfo = basePart + '/gps/getGpsInfo'; // GPS-详情查询
+const saveGps = basePart + '/gps/saveGps'; // GPS-保存修改
+const shareGps = basePart + '/gps/shareGps'; // GPS-分享
+const delGpsById = basePart + '/gps/delGpsById'; // GPS-删除
+
+const getConfigPageList = basePart + '/config/getConfigPageList'; // 车辆配置列表查询
+const getConfigInfo = basePart + '/config/getConfigInfo'; // 车辆配置详情查询
+const saveConfig = basePart + '/config/saveConfig'; //车辆配置新增修改
+const shareConfigByInfo = basePart + '/config/shareConfigByInfo'; // 车辆配置页面分享
+const shareConfigById = basePart + '/config/shareConfigById'; // 车辆配置列表分享
+const delConfigById = basePart + '/config/delConfigById'; // 车辆配置删除
+const getMyVehicleList = basePart + '/vehicle/getMyVehicleList'; // 车辆名称私有下拉列表
+const getMyCameraList = basePart + '/camera/getMyCameraList'; // 摄像头-私有列表查询
+const getMyOgtList = basePart + '/ogt/getMyOgtList'; // 完美传感器-私有列表查询
+const getMyLidarList = basePart + '/lidar/getMyLidarList'; // 激光雷达对象-私有列表查询
+const getMyGpsList = basePart + '/gps/getMyGpsList'; // GPS-私有列表查询
+
+
+export default {
+    getVehicleList,
+    getVehicleInfo,
+    saveVehicle,
+    shareVehicle,
+    delVehicleById,
+
+    getCameraList,
+    getCameraInfo,
+    saveCamera,
+    shareCamera,
+    delCameraById,
+
+    getOgtList,
+    getOgtInfo,
+    saveOgt,
+    shareOgt,
+    delOgtById,
+
+    getLidarList,
+    getLidarInfo,
+    saveLidar,
+    shareLidar,
+    delLidarById,
+
+    getGpsList,
+    getGpsInfo,
+    saveGps,
+    shareGps,
+    delGpsById,
+
+    getConfigPageList,
+    getConfigInfo,
+    saveConfig,
+    shareConfigByInfo,
+    shareConfigById,
+    delConfigById,
+    getMyVehicleList,
+    getMyCameraList,
+    getMyOgtList,
+    getMyLidarList,
+    getMyGpsList
+}

src/assets/common/css/theme.less

@@ -13,28 +13,6 @@
 @lightBlueBgA: #E8F9FE;
 @purpleA: #7B2CCB;
 @purpleBgA: #F3ECFD;
-// @hoverColor: #b81c24; //链接/按钮悬停
-// @aideYellow: #fbc02d; //辅助色1
-// @aideBlue: #03a9f4; //辅助色2#409EFF
-// @deepBlack: #282828; //最深色
-// @grayColor: #8c8c8c; //灰色
-// @successColor: #00c07c; //成功提示
-// @errorColor: #da3947; //错误提示
-// @textColor1: #282828; //一级文字
-// @textColor2: #595959; //二级文字
-// @textColor3: #8c8c8c; //三级文字
-// @placeholderColor: #bfbfbf; //输入框空状态文字
-// @borderColor: #d9d9d9; //一级背景
-// @borderColor2: #ebeef5; //边框颜色
-// @bgGray: #fafafa; //背景
-// @bgWhite: #fff; //页面背景
-// @bgTransparent: transparent; //透明
-// //胡立国添加fwForm使用颜色begin
-// @fwFormColor: #f52323; //表单主题颜色
-// @inputBorder: #bfbfbf; //input输入框边框
-// @inputFocus: #409eff; //点击input颜色
-// @biaotou: #ccebf8; //表头颜色
-// //胡立国添加fwForm使用颜色end
 // @fontSize30: 30px; //一般是网站最重要的标题，也可以用于阿拉伯数字等
 // @fontSize24: 24px; //一般用于页面标题
 // @fontSize16: 16px; //用于二级页面标题或者阅读文段
@@ -48,210 +26,6 @@
 // @padding16: 16px; //用于同区内次间距,也可是12px
 // @padding12: 12px; //用于同区内次间距
 @padding10: 10px; //用于同区内次间距
-// @padding8: 8px; //用于同区内小间距，也可是4px
-// @padding7: 7px;
-// @padding4: 4px; //用于同区内小间距
-
-// .main-wraper {
-//     padding: 0 @padding24;
-// }
-
-// .move-right {
-//     float: right;
-// }
-
-// .page-title {
-//     //页面大标题
-//     padding: 0 0 24px 0;
-//     border-bottom: 1px solid #d8d8d8;
-//     font-size: 30px;
-//     color: #282828;
-//     font-weight: 700;
-// }
-
-// /*tab切换*/
-// .conditionWrapper {
-//     margin-bottom: 0 !important;
-//     border-bottom: 1px solid @borderColor;
-// }
-
-// .conditionBox {
-//     margin-bottom: -1px;
-// }
-
-// .condition {
-//     width: 114px;
-//     float: left;
-//     margin-right: 3px;
-//     line-height: 40px;
-//     border: 1px solid @borderColor;
-//     border-bottom: none;
-//     border-radius: 4px 4px 0 0;
-//     font-size: 14px;
-//     text-align: center;
-//     color: #666666;
-//     cursor: pointer;
-// }
-
-// .condition.active {
-//     color: @themeColor;
-//     background-color: @bgGray;
-// }
-
-// .main-wraper .el-dropdown-link {
-//     cursor: pointer;
-//     color: @themeColor;
-// }
-
-// .a-link {
-//     color: @themeColor;
-//     cursor: pointer;
-// }
-
-// .el-table th {
-//     background-color: @bgGray;
-// }
-
-// // table边框
-// .el-table td,
-// .el-table th.is-leaf {
-//     border-bottom: 1px solid #c9c9c9;
-//     //border-bottom: 1px solid @borderColor;
-// }
-
-// .el-table--border td,
-// .el-table--border th,
-// .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
-//     border-right: 1px solid #c9c9c9;
-// }
-
-// .el-table--border,
-// .el-table--group {
-//     border: 1px solid #c9c9c9;
-//     border-right: none;
-//     border-bottom: none;
-// }
-
-// .el-table--border::after,
-// .el-table--group::after,
-// .el-table::before {
-//     background-color: #c9c9c9;
-// }
-
-// /**  el-form  **/
-// .df-form {
-//     .df-form-title {
-//         font-size: 24px;
-//         letter-spacing: 3px;
-//         color: @textColor1;
-//         padding: 10px 0 5px 50px;
-//         text-align: left;
-//         border-bottom: 2px solid @borderColor;
-//         margin: 0 20px 15px 20px;
-//     }
-
-//     table {
-//         width: 80%;
-//         margin: auto;
-//         border-collapse: collapse;
-//         height: 30px;
-//         line-height: 30px;
-//         border: 1px solid #fff;
-//     }
-
-//     td {
-//         border: 1px solid #fff;
-//         text-align: center;
-//     }
-
-//     .td-bg-color {
-//         background-color: @bgGray;
-//     }
-
-//     .td-bg-color.is-required:before {
-//         content: "*";
-//         color: #f56c6c;
-//         margin-right: 4px;
-//     }
-
-//     .td-w-1 {
-//         width: 10%;
-//     }
-
-//     .td-w-2 {
-//         width: 20%;
-//     }
-
-//     .td-w-3 {
-//         width: 30%;
-//     }
-
-//     .td-w-4 {
-//         width: 40%;
-//     }
-
-//     .td-w-5 {
-//         width: 50%;
-//     }
-
-//     .td-w-6 {
-//         width: 60%;
-//     }
-
-//     .td-w-7 {
-//         width: 70%;
-//     }
-
-//     .td-w-8 {
-//         width: 80%;
-//     }
-
-//     .td-w-9 {
-//         width: 90%;
-//     }
-
-//     .td-w-10 {
-//         width: 100%;
-//     }
-
-//     .el-form-item {
-//         margin-bottom: unset;
-
-//         .el-form-item__content {
-
-//             .el-input,
-//             .inline-input {
-//                 width: 100%;
-//             }
-//         }
-//     }
-
-//     .el-form-item__error {
-//         position: absolute;
-//         left: auto;
-//         right: 0px;
-//         top: 50%;
-//         padding-top: 0px;
-//         transform: translate(-10%, -50%);
-//     }
-// }
-
-// /**时间选择el-time-picker添加禁用提示**/
-// .myTimeTip {
-//     width: 300px;
-// }
-
-// .myTimeTip .el-time-spinner__item.disabled {
-//     position: relative;
-// }
-
-// .myTimeTip .el-time-spinner__item.disabled:after {
-//     position: absolute;
-//     padding-left: 3px;
-//     color: #c0c4cc;
-//     content: "(不可用)";
-//     z-index: 2;
-// }
 
 .padBot60 {
     padding-bottom: 60px;
@@ -363,6 +137,15 @@
 }
 
 .myTabsBox {
+    position: relative;
+    overflow: hidden;
+
+    .addBtn {
+        position: absolute;
+        right: 40px;
+        top: 45px;
+    }
+
     .el-tabs {
         width: 285px;
         margin: 45px 40px 15px;
@@ -417,10 +200,6 @@
     }
 }
 
-.el-textarea {
-    height: 96px;
-}
-
 .el-range-editor.el-input__inner {
     padding: 0 10px;
 }

src/components/upload/upload.vue

@@ -0,0 +1,1079 @@
+/**
+*  附件上传组件
+*  @params
+***
+*  autoUp 是否开启自动上传
+*  downAll 是否可以批量下载
+*  accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf" 指定可上传的文件类型
+*  show-file-list 是否采用elementUi默认展示方式？
+*  defaultFileList 初始化list数据 展示时使用  不可编辑
+*  draftFileList 初始化list数据  草稿状态使用  仍然可以进行编辑
+*  down-and-preview  show-file-list为true情况下是否可以预览和下载
+*  show-table 和 show-file-list 只能一个为true 或者都为false 自定义 success 回调的展示
+*  show-table  采用表格展示方式 false
+*  columns 采用表格展示，需要配置表头
+**/
+<template>
+    <div class="myupload">
+        <el-upload
+            v-if="ie10Control"
+            class="upload-demo"
+            ref="upload"
+            action="#"
+            :disabled="disabled"
+            :accept="acceptType"
+            :before-upload="beforeUploadFile"
+            :on-change="handleChange"
+            :http-request="toUpload"
+            :on-progress="toUploadProgress"
+            :on-success="toUploadSuccess"
+            :on-error="toUploadError"
+            :on-preview="handlePreview"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+            :on-exceed="handleExceed"
+            :file-list="fileList"
+            :auto-upload="autoUp"
+            :show-file-list="showFileList"
+            :limit="fileNum"
+            :multiple="multipleCtrl"
+        >
+            <span
+                style="
+                    color: red;
+                    margin-left: calc(100% - 485px);
+                    float: left;
+                    display: inline-block;
+                    height: 30px;
+                    line-height: 30px;
+                "
+                v-if="fjShowMsg"
+            >
+                请不要上传、处理、存储、传输涉密信息！</span
+            >
+            <el-button
+                :disabled="disabled"
+                v-if="defaultFileList.length == 0"
+                slot="trigger"
+                size="small"
+                type="primary"
+                icon="el-icon-circle-plus"
+                >选取文件
+            </el-button>
+            <el-button
+                v-if="!autoUp"
+                style="margin-left: 10px"
+                size="small"
+                type="success"
+                @click="submitUpload"
+                icon="el-icon-upload"
+            >
+                上传文件
+            </el-button>
+            <el-button
+                v-if="downAll"
+                style="margin-left: 10px"
+                size="small"
+                type="success"
+                @click.stop="downloadAll"
+                icon="el-icon-download"
+            >
+                批量下载
+            </el-button>
+            <span style="color: red; margin-left: 5px" v-if="isShowUploadMsg"
+                >请不要上传、处理、存储、传输涉密信息！</span
+            >
+            <div slot="tip" class="mytip">
+                <slot name="mytip"></slot>
+                <el-progress
+                    v-if="isMultipartUpload && showProgress"
+                    :key="refresh"
+                    status="success"
+                    :percentage="multipartPercentage"
+                    :text-inside="true"
+                    :stroke-width="13"
+                >
+                </el-progress>
+            </div>
+        </el-upload>
+        <table-list
+            ref="table"
+            v-if="defaultFileList.length > 0"
+            index
+            :getDataWay="getDataWay"
+            :columns="columns"
+        >
+            <el-table-column label="操作" slot="opts" width="200">
+                <template slot-scope="scope">
+                    <el-link
+                        :underline="false"
+                        @click="showPreview(scope.row)"
+                        class="a-link optItem"
+                    >
+                        预览
+                    </el-link>
+                    <el-link
+                        :underline="false"
+                        @click="showDownload(scope.row)"
+                        class="a-link optItem"
+                    >
+                        下载
+                    </el-link>
+                </template>
+            </el-table-column>
+        </table-list>
+        <div v-if="downAndPreview">
+            <el-dialog
+                title="提示"
+                :visible.sync="dialogVisible"
+                width="500px"
+                :close="dialogClose"
+                :close-on-click-modal="false"
+                :close-on-press-escape="false"
+                :modal-append-to-body="true"
+                :append-to-body="true"
+                v-dialogDrag="true"
+            >
+                <span
+                    ><i class="el-icon-warning el-dialog__body-myi"></i
+                    >对该文件进行预览或者下载？</span
+                >
+                <span slot="footer" class="dialog-footer">
+                    <el-button size="small" type="primary" @click="preViewFile"
+                        >文件预览</el-button
+                    >
+                    <el-button size="small" type="primary" @click="downloadFile"
+                        >文件下载</el-button
+                    >
+                    <el-button size="small" @click="dialogVisible = false"
+                        >取 消</el-button
+                    >
+                </span>
+            </el-dialog>
+        </div>
+        <!-- <preview ref="preview"></preview> -->
+    </div>
+</template>
+<script>
+let ifrm;
+
+function ssoVerify(domain) {
+    try {
+        ifrm = document.createElement('<iframe name="ssoIframe"></iframe>');
+    } catch (e) {
+        ifrm = document.createElement("iframe");
+        ifrm.name = "ssoIframe";
+    }
+    ifrm.src =
+        domain +
+        "/ssoCheck.action?toUrl=" +
+        encodeURIComponent(store.state.fileServiceUrl);
+    ifrm.style = "display:none";
+    document.body.appendChild(ifrm);
+}
+
+function noop() {}
+
+function defaultUpload(file) {
+    const is30M = file.size / 1024 / 1024 < 30;
+    if (!is30M) {
+        this.$message.error("上传文件大小不能超过 30MB!");
+    }
+    return is30M;
+}
+// import "@/lib/spark-md5.min.js";
+import TableList from "@/components/grid/TableList";
+// import preview from "@/components/upload/preview";
+export default {
+    name: "upload",
+    props: {
+        //是否显示非mi提示
+        isShowUploadMsg: {
+            type: Boolean,
+            default: false,
+        },
+        //附件页签 显示提示 在选取文件左侧
+        fjShowMsg: {
+            type: Boolean,
+            default: false,
+        },
+        //上传文件新加参数，默认1，只有部门共享文件上传2
+        uploadFileType: {
+            type: String,
+            default: "1",
+        },
+        isMultipartUpload: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        getDataWay: {
+            //初始化list数据
+            type: Object,
+            default: () => ({
+                dataType: "data",
+                data: [{ name: "测试.pdf", size: "1024" }],
+            }),
+        },
+        columns: {
+            //初始化list数据
+            type: Array,
+            default: () => [
+                {
+                    label: "文件名称",
+                    prop: "name",
+                },
+                {
+                    label: "文件大小",
+                    prop: "size",
+                    columnWidth: "100",
+                },
+                {
+                    label: "操作",
+                    prop: "opts",
+                    columnWidth: "200",
+                    template: true,
+                },
+            ],
+        },
+        acceptType: {
+            //接受的上传类型
+            type: String,
+            default: "",
+        },
+        autoUp: {
+            //自动上传
+            type: Boolean,
+            default: false,
+        },
+        downAll: {
+            //下载全部
+            type: Boolean,
+            default: false,
+        },
+        showFileList: {
+            //是否使用elementUi自带的展示方式
+            type: Boolean,
+            default: true,
+        },
+        showTable: {
+            //是否使用elementUi自带的展示方式
+            type: Boolean,
+            default: true,
+        },
+        downAndPreview: {
+            //elementUi展示是否可以预览
+            type: Boolean,
+            default: true,
+        },
+        fileNum: {
+            type: Number,
+            default: 10000,
+        },
+        listType: {
+            type: String,
+            default: "text",
+        },
+        defaultFileList: {
+            //初始化list数据
+            type: Array,
+            default: () => [],
+        },
+        draftFileList: {
+            //草稿初始化list数据
+            type: Array,
+            default: () => [],
+        },
+        md5CheckParams: {
+            type: Object,
+            default: () => ({
+                //md5校验需要的参数
+                userId: "222222",
+                moduleName: "CheckForFrontEnd",
+            }),
+        },
+        upLoadParams: {
+            type: Object,
+            default: () => ({
+                //上传需要的其他参数
+                userId: "222222",
+                moduleName: "CheckForFrontEnd",
+            }),
+        },
+        downLoadOneParams: {
+            type: Object,
+            default: () => ({
+                //下载需要的参数
+                isPreview: 1,
+                forceDocx: 1,
+                webOffice: 1,
+                wordWaterMark: 1,
+                isWpsSecure: 1,
+                caToken: 1,
+                waterMark: 1,
+            }),
+        },
+        downLoadAllParams: {
+            type: Object,
+            default: () => ({
+                //下载需要的参数
+                zipName: "zipDownload.zip",
+            }),
+        },
+        getPdfPathParams: {
+            type: Object,
+            default: () => ({
+                isPreview: 1,
+                forceRefresh: 1,
+                xdocPdf: 1,
+            }),
+        },
+        onUpSuccess: {
+            type: Function,
+            default: noop,
+        },
+        onUpError: {
+            type: Function,
+            default: noop,
+        },
+        onUpProgress: {
+            type: Function,
+            default: noop,
+        },
+        onUpChange: {
+            type: Function,
+            default: noop,
+        },
+        onUpRemove: {
+            type: Function,
+            default: noop,
+        },
+        onUpDownloadOne: {
+            type: Function,
+            default: noop,
+        },
+        onUpDownloadMany: {
+            type: Function,
+            default: noop,
+        },
+        //用于传输上传和删除数据的props
+        transferUploadRes: {
+            type: Function,
+            default: noop,
+        },
+        transferDelete: {
+            type: Function,
+            default: noop,
+        },
+        /*beforeUpload: {
+                    type: Function,
+                    default: defaultUpload
+                },*/
+        multipleCtrl: {
+            //控制是否多选
+            type: Boolean,
+            default: true,
+        },
+    },
+    components: { TableList },
+    data() {
+        return {
+            refresh: 0, //再次上传视频时更新组件
+            showProgress: false, //显示进度条
+            multipartPercentage: 0,
+            dialogVisible: false,
+            fileList: [],
+            currentFileData: {},
+            ie10Control: true,
+            fileIndex: 0,
+        };
+    },
+    computed: {
+        // 控制是否多选
+        // 发文、签报、收文 单选
+        /* multipleCtrl() {
+				
+				// 发文拟稿状态 => 单选
+				if ( this.$route &&
+				     this.$route.name &&
+				     this.$route.name == 'SendProcessForm') {
+					return false;
+				} 
+				// 发文流转状态 => 单选
+				else if ( this.$route &&  
+					 this.$route.query && 
+					 this.$route.query.formData &&
+					 this.$route.query.formData.bizType &&
+					 this.$route.query.formData.bizType == "FW_TYLX" ) {
+					return false;
+				}
+				// 签报拟稿状态 => 单选
+				else if ( this.$route &&
+				     this.$route.name &&
+				     this.$route.name == 'ReportProcessForm') {
+					return false;
+				} 
+				// 签报流转状态 => 单选
+				else if ( this.$route &&  
+					 this.$route.query && 
+					 this.$route.query.formData &&
+					 this.$route.query.formData.bizType &&
+					 this.$route.query.formData.bizType == "QB_TYLX" ) {
+					return false;
+				}
+				// 收文拟稿状态 => 单选
+				if ( this.$route &&
+				     this.$route.name &&
+				     this.$route.name == 'AcceptProcessForm') {
+					return false;
+				} 
+				// 收文流转状态 => 单选
+				else if ( this.$route &&  
+					 this.$route.query && 
+					 this.$route.query.formData &&
+					 this.$route.query.formData.bizType &&
+					 this.$route.query.formData.bizType == "SW_TYLX" ) {
+					return false;
+				}
+				// 其他情况 => 多选
+				else{
+					return true;
+				}
+
+			}, */
+    },
+
+    created() {
+        if (this.defaultFileList && this.defaultFileList.length > 0) {
+            this.getDataWay.data = this.defaultFileList;
+        }
+
+        if (this.draftFileList && this.draftFileList.length > 0) {
+            this.fileList = this.draftFileList;
+        }
+    },
+    watch: {
+        draftFileList: {
+            handler: function () {
+                this.fileList = this.draftFileList;
+            },
+            immediate: true,
+        },
+        defaultFileList: {
+            handler: function () {
+                this.getDataWay.data = this.defaultFileList;
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        beforeUploadFile(file) {
+            let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
+            let acceptType = this.acceptType;
+            if (acceptType && acceptType.indexOf(testmsg) == -1) {
+                this.$message({
+                    message: "上传文件只能是" + acceptType + "格式!",
+                    type: "warning",
+                });
+                return false;
+            }
+
+            //上传前判断
+            // 如果是视频文件或者文件大小超过200M，走分片上传逻辑
+            this.isMultipartUpload =
+                ["mp4", "MP4"].indexOf(testmsg) !== -1 ||
+                file.size > 2.1 * Math.pow(10, 8);
+
+            // let name = file.name;
+            // for (let i = 0; i < this.fileList.length; i++) {
+            //     let listName = this.fileList[i].name;
+            //     if (listName == name) {
+            //         this.$message({
+            //             type: 'warning',
+            //             message: '您已经上传过' + name + ',请勿重复上传！'
+            //         })
+            //         return false;
+            //     }
+            // }
+            return true;
+        },
+        showPreview(row) {
+            this.currentFileData = row;
+            this.preViewFile();
+        },
+        showDownload(row) {
+            this.currentFileData = row;
+            this.downloadFile();
+        },
+        submitUpload() {
+            this.$refs.upload.submit();
+        },
+        toUpload(params) {
+            let that = this;
+            params.file.index = ++that.fileIndex;
+            that.$$md5ByFile(params).then((res) => {
+                let defaultParam = {
+                    file: params.file,
+                    md5: res.md5,
+                };
+                that.$$md5CheckByFile(
+                    Object.assign(defaultParam, that.md5CheckParams)
+                )
+                    .then(async (checkRes) => {
+                        if (checkRes && checkRes.message === "正常上传") {
+                            if (that.isMultipartUpload) {
+                                this.multipartPercentage = 0;
+                                this.refresh++;
+                                that.showProgress = true;
+                                let fileResult = await that.sliceChunkFile(
+                                    params
+                                );
+                                let checkResult = await that.checkChunkFile(
+                                    fileResult.filechunks[0].md5,
+                                    fileResult.filechunks[0].fileSize
+                                );
+                                fileResult.wholeFile = params.file;
+                                await that.uploadChunkFile(
+                                    res.md5,
+                                    fileResult,
+                                    checkResult.info.index + 1
+                                );
+                                this.finishChunkFile(
+                                    res.md5,
+                                    fileResult.chunks,
+                                    params
+                                );
+                            } else {
+                                that.toUploadDfs(params, defaultParam);
+                            }
+                        } else if (checkRes && checkRes.message === "0") {
+                            this.transferUploadRes({
+                                file: defaultParam.file,
+                                md5: defaultParam.md5,
+                                url: checkRes.url,
+                            });
+                            that.$$updateAnyoneDownload(checkRes.url)
+                                .then(function (res) {
+                                    params.onSuccess(checkRes);
+                                })
+                                .catch((error) => {
+                                    that.$message({
+                                        type: "error",
+                                        message: "更新预览状态失败！",
+                                    });
+                                    params.onError(error);
+                                });
+                        } else if (checkRes && checkRes == "ssoNotLogin") {
+                            //that.toNotLogin(params, defaultParam);
+                        } else {
+                            that.$message({
+                                type: "error",
+                                message: "上传失败",
+                            });
+                        }
+                    })
+                    .catch((error) => {
+                        //that.toNotLogin(params, defaultParam);
+                    });
+            });
+        },
+        toUploadDfs(params, defaultParam) {
+            let that = this;
+            that.$$uploadFile(
+                Object.assign(defaultParam, {
+                    progress: params.onProgress,
+                    uploadFileType: this.uploadFileType,
+                })
+            )
+                .then(function (response) {
+                    that.transferUploadRes({
+                        file: response.fileSrcName,
+                        md5: response.md5,
+                        url: response.url,
+                    });
+                    let resObj = {
+                        fileExt: response.fileExt,
+                        secretKey: response.secretKey,
+                        fileSize: response.fileSize,
+                        name: response.fileSrcName,
+                        url: response.url,
+                        md5: response.md5,
+                    };
+                    that.$$updateAnyoneDownload(response.url)
+                        .then(function (res) {
+                            params.onSuccess(Object.assign(resObj, response));
+                        })
+                        .catch((error) => {
+                            that.$message({
+                                type: "error",
+                                message: "更新预览状态失败！",
+                            });
+                            params.onError(error);
+                        });
+                })
+                .catch((error) => {
+                    that.$message({
+                        type: "error",
+                        message: "上传失败",
+                    });
+                    params.onError(error);
+                });
+        },
+        toNotLogin(params, defaultParam) {
+            let that = this;
+            ssoVerify(store.state.ssoServiceUrl);
+            if (ifrm.attachEvent) {
+                //ie
+                ifrm.attachEvent("onload", function () {
+                    that.toUploadDfs(params, defaultParam);
+                });
+            } else {
+                //  chrome
+                ifrm.onload = function () {
+                    that.toUploadDfs(params, defaultParam);
+                };
+            }
+        },
+        sortFileList(fileList) {
+            if (
+                fileList.length > 0 &&
+                fileList[0].raw &&
+                fileList[0].raw.index
+            ) {
+                fileList.sort((a, b) => {
+                    return a.raw.index - b.raw.index;
+                });
+            }
+        },
+        toUploadSuccess(response, file, fileList) {
+            if (this.$IEVersion() <= 10) {
+                this.ie10Control = false;
+                this.$nextTick(() => {
+                    this.ie10Control = true;
+                });
+            }
+            this.sortFileList(fileList);
+            this.onUpSuccess(response, file, fileList);
+            this.fileList = fileList;
+        },
+        toUploadError(err, file, fileList) {
+            this.sortFileList(fileList);
+            this.onUpError(err, file, fileList);
+        },
+        toUploadProgress(event, file, fileList) {
+            this.sortFileList(fileList);
+            this.onUpProgress(event, file, fileList);
+        },
+        handleExceed() {
+            this.$message({
+                type: "warning",
+                message: "文件个数不能超过" + this.fileNum + "个",
+            });
+        },
+        handleChange(file, fileList) {
+            if (file.response) {
+                this.sortFileList(fileList);
+                this.onUpChange(file, fileList);
+            }
+        },
+        async beforeRemove(file, fileList) {
+            this.sortFileList(fileList);
+            this.onUpRemove(file, fileList);
+            this.transferDelete(file.name);
+        },
+        handleRemove(file, fileList) {
+            this.sortFileList(fileList);
+            this.fileList = fileList;
+            this.onUpChange(file, fileList);
+        },
+        handleRemoveSelf(filePath) {
+            for (let i = 0; i < this.fileList.length; i++) {
+                if (this.fileList[i].response.url === filePath) {
+                    this.fileList.splice(i, 1);
+                }
+            }
+        },
+
+        handlePreview(file) {
+            if (file.hasOwnProperty("status") && file.status === "success") {
+                this.currentFileData = Object.assign(file.response, file);
+                this.dialogVisible = true;
+            } else {
+                this.$message({
+                    type: "warning",
+                    message: "请先上传，再对文件进行预览或下载",
+                });
+            }
+        },
+        /* preViewFile() {
+            //文件预览
+            if (this.currentFileData.url) {
+                var suffixArr = this.currentFileData.name.split(".");
+                var suffix = suffixArr[suffixArr.length - 1];
+                this.$refs.preview.preViewFile({
+                    name: this.currentFileData.name,
+                    suffix: "." + suffix,
+                    url: this.currentFileData.url,
+                });
+            } else {
+                this.$message({
+                    type: "warning",
+                    message: "预览失败，请检查文件路径！",
+                });
+            }
+        }, */
+
+        /*单文件下载*/
+        downloadFile() {
+            let that = this;
+            this.$$download(this.currentFileData)
+                .then(() => {
+                    that.$message({
+                        type: "success",
+                        message: "下载成功！",
+                    });
+                })
+                .catch((err) => {
+                    that.$message({
+                        type: "info",
+                        message: "下载失败！",
+                    });
+                });
+            this.dialogVisible = false;
+        },
+
+        dialogClose() {
+            this.currentFileData = {};
+        },
+
+        //批量下载
+        downloadAll() {
+            let that = this;
+            let md5Path = [];
+            let list = [];
+            if (this.defaultFileList && this.defaultFileList.length > 0) {
+                list = this.defaultFileList;
+            } else {
+                list = this.fileList;
+            }
+
+            list.forEach((item, index) => {
+                if (!!item.response.url) {
+                    md5Path.push({
+                        md5Path: item.response.url,
+                        fileName: item.name,
+                    });
+                }
+            });
+            if (Array.isArray(this.downLoadAllParams.downloadFiles)) {
+                this.downLoadAllParams.downloadFiles.forEach((item) => {
+                    for (var i = 0; i < md5Path.length; i++) {
+                        if (
+                            item.md5Path == md5Path[i].md5Path &&
+                            item.fileName == md5Path[i].fileName
+                        ) {
+                            return;
+                        }
+                    }
+                    if (!!item.md5Path) {
+                        md5Path.push({
+                            md5Path: item.md5Path,
+                            fileName: item.fileName,
+                        });
+                    }
+                });
+            }
+
+            // let Params = Object.assign({//拼接参数
+            //     downloadFiles: md5Path,
+            // }, this.downLoadAllParams);
+            let Params = {
+                downloadFiles: md5Path,
+                zipName: this.downLoadAllParams.zipName,
+            };
+            // let arr=[];
+            // Params.md5Paths.forEach((item)=>{
+            //     if(!!item){
+            //         arr.push(item)
+            //     }
+            // });
+            // Params.md5Paths = arr;
+            // Params.md5Path=[...arr];
+            if (!md5Path.length) {
+                this.$message.warning("请先上传文件！");
+                return;
+            }
+
+            this.$$downloadPackage(Params)
+                .then(() => {
+                    // that.$message({
+                    //     type: 'success',
+                    //     message: '下载成功！'
+                    // })
+                })
+                .catch((err) => {
+                    that.$message({
+                        type: "info",
+                        message: "下载失败！",
+                    });
+                });
+        },
+
+        /*
+         * 分片-切片
+         */
+        sliceChunkFile(param) {
+            return new Promise((resolve, reject) => {
+                let blobSlice =
+                    File.prototype.slice ||
+                    File.prototype.mozSlice ||
+                    File.prototype.webkitSlice;
+                let chunkSize = 1024 * 1024 * 2;
+                let filechunks = new Array(
+                    Math.ceil(param.file.size / chunkSize)
+                );
+                let currrentChunk = 0;
+                let reader = new FileReader();
+                let start, end;
+                reader.onload = function (e) {
+                    var chunkfile = e.target.result;
+                    filechunks[currrentChunk] = {
+                        chunk: currrentChunk,
+                        fileSize: chunkfile.byteLength,
+                        chunkSize: chunkSize,
+                        chunkStart: start,
+                        chunkEnd: end,
+                    };
+                    console.log(
+                        `分片计算情况： 分片数：${filechunks.length} -- 当前片：${currrentChunk}`
+                    ); // --片大小:${chunkfile.byteLength}
+                    //spark.append(file);
+                    currrentChunk++;
+                    if (currrentChunk < filechunks.length) {
+                        loadNext();
+                    } else {
+                        console.log("完成分片解析");
+                        resolve({
+                            filechunks: filechunks,
+                            chunks: filechunks.length,
+                            fileName: param.file.name,
+                            //wholeFile: param.file     //完整的文件的传递
+                        });
+                    }
+                };
+                reader.onerror = function () {
+                    reject({ msg: "file too large" });
+                };
+                let loadNext = function () {
+                    start = currrentChunk * chunkSize;
+                    end =
+                        start + chunkSize >= param.file.size
+                            ? param.file.size
+                            : start + chunkSize;
+                    reader.readAsArrayBuffer(
+                        blobSlice.call(param.file, start, end)
+                    );
+                };
+                loadNext();
+            });
+        },
+        /*
+         * 分片-查片
+         */
+        checkChunkFile(md5, fileSize) {
+            return new Promise((resolve, reject) => {
+                this.$asyncAjaxCommon(this.$api.upload.md5Check4Chunk, {
+                    md5: md5,
+                    fileSize: fileSize,
+                })
+                    .then((res) => {
+                        resolve(res);
+                    })
+                    .catch((res) => {
+                        reject(res);
+                    });
+            });
+        },
+        /*
+         * 分片-上传
+         */
+        uploadSingleFile(md5, fileInfo, chunk, chunks, fileName) {
+            let _this = this;
+            return new Promise((resolve, reject) => {
+                let chunkfile = null; //片文件(实际文件)
+                //用于获取文件指定片的参数
+                let blobSlice =
+                    File.prototype.slice ||
+                    File.prototype.mozSlice ||
+                    File.prototype.webkitSlice;
+                let reader = new FileReader();
+                reader.onload = function (e) {
+                    chunkfile = e.target.result;
+                    console.log(`进入了上传(第${chunk}/${chunks}片文件)`);
+                    var formData = new FormData();
+                    formData.append("md5", md5);
+                    let blobFile = new Blob([chunkfile]);
+                    formData.append("file", blobFile);
+                    formData.append("chunk", chunk);
+                    formData.append("chunks", chunks);
+                    formData.append("fileName", fileName);
+                    formData.append("uploadFileType", _this.uploadFileType);
+                    _this
+                        .$axios({
+                            method: "post",
+                            url: _this.$api.upload.upload4Chunk,
+                            data: formData,
+                            withCredentials: true,
+                            headers: {
+                                "Content-type": "multipart/form-data",
+                            },
+                            onUploadProgress: (progressEvent) => {
+                                var precent =
+                                    ((progressEvent.loaded /
+                                        progressEvent.total) *
+                                        100) |
+                                    0;
+                                _this.multipartPercentage =
+                                    (((chunk * 100 + precent) /
+                                        (chunks * 100)) *
+                                        100) >>
+                                    0;
+                            },
+                        })
+                        .then(function (res) {
+                            resolve(res);
+                        })
+                        .catch(function (error) {
+                            reject(error);
+                        });
+                };
+                reader.onerror = function () {
+                    alert("上传出错请联系管理员！");
+                };
+                reader.readAsArrayBuffer(
+                    blobSlice.call(
+                        fileInfo.wholeFile,
+                        fileInfo.chunkStart,
+                        fileInfo.chunkEnd
+                    )
+                );
+            });
+        },
+        uploadChunkFile(allMd5, obj, indexDefualt) {
+            let index = indexDefualt;
+            let chunksNum = obj.chunks; //分片总数
+            let fileName = obj.fileName; //上传的文件名
+            let errorNum = 0;
+            return new Promise((resolve, reject) => {
+                let loop = async (resolve, reject) => {
+                    let chunkFileInfo; //分片的详细信息{chunk：当前片的位数}
+                    if (index >= chunksNum) {
+                        index = null;
+                        chunksNum = null;
+                        resolve(true);
+                        return;
+                    }
+                    chunkFileInfo = obj.filechunks[index];
+                    chunkFileInfo.wholeFile = obj.wholeFile;
+                    //获取单独的一片准备上传
+                    var chunkReuslt = await this.uploadSingleFile(
+                        allMd5,
+                        chunkFileInfo,
+                        chunkFileInfo.chunk,
+                        chunksNum,
+                        fileName
+                    );
+                    if (chunkReuslt.code == "200") {
+                        index++;
+                        loop(resolve, reject);
+                    } else {
+                        errorNum++;
+                        if (errorNum > 10) {
+                            reject(new Error("分片文件上传失败"));
+                            return;
+                        } else {
+                            // 再传一遍
+                            loop(resolve, reject);
+                        }
+                    }
+                };
+                loop(resolve, reject);
+            });
+        },
+        /*
+         * 分片-合并
+         */
+        finishChunkFile(md5, chunks, params) {
+            return new Promise((resolve, reject) => {
+                this.$asyncAjaxCommon(this.$api.upload.finishUpload, {
+                    md5: md5,
+                    businessSysCode: "OA_GT_001",
+                    chunks: chunks,
+                })
+                    .then((res) => {
+                        this.transferUploadRes({
+                            file: res.fileName,
+                            md5: res.md5Path,
+                            url: res.md5Path,
+                        });
+                        let resObj = {
+                            fileExt: res.fileExt,
+                            secretKey: res.secretKey,
+                            fileSize: res.fileSize,
+                            name: res.fileName,
+                            url: res.md5Path,
+                            md5: res.md5Path,
+                        };
+                        this.$$updateAnyoneDownload(res.url)
+                            .then(function (res2) {
+                                params.onSuccess(Object.assign(resObj, res));
+                            })
+                            .catch((error) => {
+                                this.$message({
+                                    type: "error",
+                                    message: "更新预览状态失败！",
+                                });
+                                params.onError(error);
+                            });
+                        resolve(res);
+                    })
+                    .catch((res) => {
+                        this.$ajaxError({
+                            mag: "分片合并失败",
+                        });
+                        reject(res);
+                    });
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.myupload .el-dialog__body {
+    padding: 10px 20px;
+    font-size: 16px;
+}
+
+.myupload .el-dialog__body-myi {
+    color: #eed46f;
+    margin-right: 20px;
+}
+
+.mytip {
+    font-size: 12px;
+    color: #909399;
+    margin: 3px;
+}
+
+.optItem {
+    margin-left: 15px;
+}
+
+/deep/ .el-upload-list {
+    width: fit-content;
+}
+</style>

src/lib/util.js

@@ -1,4 +1,10 @@
 import Vue from "vue";
+// import "@/lib/spark-md5.min.js";
+const SparkMD5 = require('spark-md5')
+// import a form "@/lib/aa.js";
+// console.log(aa);
+
+
 
 // 缓存
 const DicsCatch = {};
@@ -103,4 +109,169 @@ Vue.prototype.$dicsTreesInit = function (selectList) {
             });
         }
     });
-}
+}
+
+
+//上传 param:{md5:"",file,progress:func(percent){},success:func(){},error:func(){}}
+Vue.prototype.$$uploadFileFastDfs = function (param) {
+    const _that = this;
+    const promise = new Promise((resolve, reject) => {
+        let formData = new FormData();
+        formData.append("userId", upLoadParams.userId);
+        formData.append("moduleName", upLoadParams.moduleName);
+        formData.append("md5", param.md5);
+        formData.append("file", param.file);
+        formData.append("isToPdf", true);
+        _that
+            .$axios({
+                method: "post",
+                url: uploadUrl.uploadDfs,
+                data: formData,
+                headers: {
+                    "Content-type": "multipart/form-data"
+                },
+                onUploadProgress: progressEvent => {
+                    let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+                    param.progress && param.progress(percent);
+                }
+            })
+            .then(function (res) {
+                resolve(res);
+            })
+            .catch(function (error) {
+                reject(error);
+            });
+    });
+    return promise;
+};
+
+Vue.prototype.$$updateAnyoneDownload = function (url) {
+    const that = this;
+    const promise = new Promise((resolve, reject) => {
+        let that = this;
+        this.$axios({
+                url: this.$api.upload.updateAnyoneDownload,
+                method: "post",
+                data: {
+                    md5Path: url
+                }
+            })
+            .then(function (res) {
+                resolve(res);
+            })
+            .catch(err => {
+                reject(err);
+            });
+    });
+    return promise;
+};
+
+
+// 获取md5
+Vue.prototype.$$md5ByFile = async function (param) {
+    const promise = new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        console.log(SparkMD5);
+        let spark = new SparkMD5.ArrayBuffer();
+        reader.onload = function (e) {
+            spark.append(e.target.result);
+            let md5 = spark.end();
+            resolve({
+                md5: md5
+            });
+        };
+        reader.onerror = function () {
+            reject({
+                msg: "file too large"
+            });
+        };
+        let file = param.file.size > 1024 * 1024 * 15 ? param.file.slice(0, 1024 * 1024 * 15) : param.file;
+        reader.readAsArrayBuffer(file);
+    });
+    return promise;
+};
+
+
+//md5校验 param:{file,upLoadParams:{userId,moduleName}}
+Vue.prototype.$$md5CheckByFile = function (param) {
+    //uploadUrl.md5Check = store.state.fileServiceUrl + $api.upload.md5CheckUpload;
+    const promise = new Promise((resolve, reject) => {
+        this.$axios({
+                // method: "get",
+                method: "post",
+                url: $api.upload.md5CheckForFrontEnd,
+                withCredentials: true,
+                data: {
+                    md5: param.md5,
+                    fileSize: param.file.size,
+                    fileSrcName: param.file.name,
+                }
+                // method: "get",
+                // url: $api.upload.md5CheckForFrontEnd,
+                // withCredentials: true,
+                // params: {
+                //     md5: param.md5,
+                //     fileSize: param.file.size
+                //     userId: upLoadParams.userId,
+                //     moduleName: upLoadParams.moduleName,
+                //     fileSrcName: param.file.name,
+                //     srcSystem: "OA_GT_001",
+                //     isTemp: "0",
+                //     isPublic: "1",
+                //     noSsoUpload: "1",
+                //     anyoneDownload: "1"
+                // }
+            })
+            .then(function (res) {
+                resolve(res);
+            })
+            .catch(function (error) {
+                reject(error);
+            });
+    });
+    return promise;
+};
+
+
+//上传 param:{md5:"",file,progress:func(percent){},success:func(){},error:func(){}}
+Vue.prototype.$$uploadFile = function (param) {
+    uploadUrl.uploadDfs = this.$api.common.uploadNew;
+    // uploadUrl.uploadDfs = this.$api.upload.uploadDfs;
+    const _that = this;
+    const promise = new Promise((resolve, reject) => {
+        let formData = new FormData();
+        formData.append("userId", upLoadParams.userId);
+        formData.append("moduleName", upLoadParams.moduleName);
+        formData.append("md5", param.md5);
+        formData.append("file", param.file);
+        formData.append("fileSize", param.file.size);
+        formData.append("isTemp", "0");
+        formData.append("isPublic", "1");
+        formData.append("srcSystem", "OA_GT_001"); //自己服务对应的src
+        formData.append("noSsoUpload", "1"); //不需要校验sso
+        formData.append("anyoneDownload", "1"); //任何人都可以下载
+        formData.append("uploadFileType", param.uploadFileType ? param.uploadFileType : '1');
+        //部门共享文件上传时传2，其他默认1或不传
+        _that
+            .$axios({
+                method: "post",
+                url: uploadUrl.uploadDfs,
+                data: formData,
+                withCredentials: true,
+                headers: {
+                    "Content-type": "multipart/form-data"
+                },
+                onUploadProgress: progressEvent => {
+                    let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+                    param.progress && param.progress(percent);
+                }
+            })
+            .then(function (res) {
+                resolve(res);
+            })
+            .catch(function (error) {
+                reject(error);
+            });
+    });
+    return promise;
+};

src/router/modelLibrary.js

@@ -2,17 +2,17 @@ export default [{
         path: "/vehicleConfigurationList",
         name: "vehicleConfigurationList",
         meta: {
-            tabname: "车辆配置"
+            tabname: "车辆配置列表"
         },
         component: () => import("@/views/modelLibrary/vehicleConfigurationList")
     },
     {
-        path: "/addVehicleConfiguration",
-        name: "addVehicleConfiguration",
+        path: "/vehicleConfigurationDetail",
+        name: "vehicleConfigurationDetail",
         meta: {
-            tabname: "新增车辆配置"
+            tabname: "车辆配置详情"
         },
-        component: () => import("@/views/modelLibrary/addVehicleConfiguration")
+        component: () => import("@/views/modelLibrary/vehicleConfigurationDetail")
     },
     {
         path: "/sensorModel",

src/views/mainPage.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="mainPagePanel">
-        <div class="tabsBox myTabsBox">
+        <div class="myTabsBox">
             <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
                 <el-tab-pane label="系统监控" name="1"></el-tab-pane>
                 <el-tab-pane label="系统概览" name="2"></el-tab-pane>
             </el-tabs>
         </div>
 
-        <div v-if="activeName === '1'" class="tabBox">
+        <div v-show="activeName === '1'" class="tabBox">
             <div class="boxContent">
                 <div class="titlePanel">
                     <div class="titlePanelBor">硬件监控</div>
@@ -94,7 +94,7 @@
             </div>
         </div>
 
-        <div v-if="activeName === '2'" class="tabBox">
+        <div v-show="activeName === '2'" class="tabBox">
             <div class="boxContent">
                 <div class="titlePanel">
                     <div class="titlePanelBor">数据橄榄</div>
@@ -362,10 +362,6 @@ export default {
         pageControlA(data) {
             this.activitedPageNumA = data.name;
         },
-        addConfig() {
-            this.$router.push({ path: "/addVehicleConfiguration" });
-        },
-        addMarkDia() {},
     },
 
     // mounted() {},

src/views/modelLibrary/addVehicleConfiguration.vue

@@ -1,305 +0,0 @@
-<template>
-    <div>
-        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
-            <div class="inputBox flexBox">
-                <span class="label">配置ID</span>
-                <div>{{ confId }}</div>
-            </div>
-            <div class="flexBox headBox">
-                <el-form-item label="配置名称:" prop="secrete">
-                    <el-select v-model="form.secrete">
-                        <el-option
-                            v-for="item in confList"
-                            :label="item.caption"
-                            :value="item.code"
-                            :key="item.code"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="配置描述:" prop="title">
-                    <el-input
-                        placeholder="请输入"
-                        maxlength="150"
-                        v-autoTrim="{ obj: form, key: 'title' }"
-                        v-model="form.title"
-                    >
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="车辆名称:" prop="title">
-                    <el-input
-                        placeholder="请输入"
-                        maxlength="150"
-                        v-autoTrim="{ obj: form, key: 'title' }"
-                        v-model="form.title"
-                    >
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="车辆描述:" prop="title">
-                    <el-input
-                        placeholder="请输入"
-                        maxlength="150"
-                        v-autoTrim="{ obj: form, key: 'title' }"
-                        v-model="form.title"
-                    >
-                    </el-input>
-                </el-form-item>
-            </div>
-
-            <div class="contentBox">
-                <div>
-                    <el-button type="primary" class="previewBtn"
-                        >预览</el-button
-                    >
-                    <handle-config-list
-                        v-for="index in 4"
-                        :isActiveA="index === 1"
-                        :titleCode="index - 1"
-                        :key="index"
-                        @curItem="curItem"
-                    ></handle-config-list>
-                </div>
-                <div class="model">
-                    <img src="../../assets/common/image/car.png" width="100%" />
-                </div>
-                <div class="conditions">
-                    <div class="titlePanel">
-                        <i class="el-icon el-icon-video-camera"></i>
-                        <span class="name">{{ curTitle }}</span>
-                    </div>
-                    <div class="forms">
-                        <el-form-item label="X(M):" prop="x">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'x' }"
-                                v-model="form.x"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Y(M):" prop="y">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'y' }"
-                                v-model="form.y"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Z(M):" prop="z">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'z' }"
-                                v-model="form.z"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="横摆角(deg):" prop="title">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'title' }"
-                                v-model="form.title"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="俯仰角(deg):" prop="title">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'title' }"
-                                v-model="form.title"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="翻滚角(deg):" prop="title">
-                            <el-input
-                                placeholder="请输入"
-                                maxlength="15"
-                                v-autoTrim="{ obj: form, key: 'title' }"
-                                v-model="form.title"
-                            >
-                            </el-input>
-                        </el-form-item>
-                    </div>
-                </div>
-            </div>
-            <div class="btns">
-                <el-button type="primary" @click="save">保存</el-button>
-                <el-button type="primary">取消</el-button>
-                <el-button type="primary">分享</el-button>
-            </div>
-        </el-form>
-    </div>
-</template>
-
-<script>
-import handleConfigList from "./components/handleConfigList.vue";
-
-export default {
-    name: "addVehicleConfiguration", // 新增车辆配置
-    components: { handleConfigList },
-    data() {
-        let validateNum = (rule, value, callback) => {
-            // !/^(-?\d+)(\.\d{1,2})?$/.test(value) &&
-            !/^(-?(0|[1-9][0-9]+))(\.\d{1,2})?$/.test(value) &&
-                callback(new Error(rule.message));
-            callback();
-        };
-        return {
-            confId: "l2s2d3k4j5fl90898",
-            confList: [{ caption: "玩儿", code: 1 }],
-            curTitle: "水电费可接受的李逵负荆",
-            form: {
-                title: "",
-                content: "",
-                sendto: "",
-                sendtoIds: "",
-                md5PathList: [],
-                secrete: "",
-                x: "",
-                y: "",
-                z: "",
-            },
-            rules: {
-                title: [
-                    { required: true, message: "请输入标题", trigger: "blur" },
-                ],
-                content: [
-                    { required: true, message: "请输入内容", trigger: "blur" },
-                ],
-                sendto: [
-                    {
-                        required: true,
-                        message: "请选择发送对象",
-                        trigger: "change",
-                    },
-                ],
-                secrete: [
-                    { required: true, message: "请选择密级", trigger: "blur" },
-                ],
-                x: [
-                    {
-                        required: true,
-                        message: "请输入X轴坐标",
-                        trigger: "blur",
-                    },
-                    {
-                        validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
-                        trigger: ["blur"],
-                    },
-                ],
-                y: [
-                    {
-                        required: true,
-                        message: "请输入Y轴坐标",
-                        trigger: "blur",
-                    },
-                    {
-                        validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
-                        trigger: ["blur"],
-                    },
-                ],
-                z: [
-                    {
-                        required: true,
-                        message: "请输入Z轴坐标",
-                        trigger: "blur",
-                    },
-                    {
-                        validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
-                        trigger: ["blur"],
-                    },
-                ],
-            },
-        };
-    },
-
-    computed: {},
-
-    methods: {
-        save() {
-            this.$refs.form.validate().then(
-                async (valid) => {
-                    console.log(6);
-                },
-                (valid) => {
-                    // 表单校验失败
-                    this.$message.error("错了哦");
-                }
-            );
-        },
-        curItem(title) {
-            this.curTitle = title;
-        },
-    },
-
-    // mounted: {},
-};
-</script>
-
-<style lang='less' scoped>
-.el-form {
-    margin: 55px 50px 0;
-}
-
-.headBox {
-    .el-form-item {
-        margin-right: 20px;
-    }
-}
-
-.inputBox.flexBox {
-    margin-bottom: 22px;
-
-    .label {
-        width: 88px;
-    }
-
-    div {
-        line-height: 32px;
-    }
-}
-
-.contentBox {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 30px;
-
-    .previewBtn {
-        width: 100%;
-        margin-bottom: 15px;
-    }
-
-    .model {
-        width: 400px;
-    }
-
-    .conditions {
-        .titlePanel {
-            padding-bottom: 30px;
-            color: @themeColor;
-
-            .name {
-                margin-left: 10px;
-            }
-        }
-
-        .forms /deep/ .el-form-item__label {
-            width: 120px !important;
-        }
-
-        .forms /deep/ .el-form-item__content {
-            margin-left: 120px !important;
-        }
-    }
-}
-
-.btns {
-    padding-top: 30px;
-    text-align: center;
-}
-</style>

src/views/modelLibrary/components/formCamera.vue

@@ -3,24 +3,24 @@
         <el-form ref="form" :model="form" :rules="rules" label-width="160px">
             <div class="inputBox flexBox">
                 <span class="label">传感器ID</span>
-                <div>{{ sensorId }}</div>
+                <div>{{ form.sensorCode }}</div>
             </div>
-            <el-form-item label="传感器名称:" prop="name">
+            <el-form-item label="传感器名称:" prop="sensorName">
                 <el-input
                     placeholder="请输入"
-                    maxlength="30"
-                    v-autoTrim="{ obj: form, key: 'name' }"
-                    v-model="form.name"
+                    maxlength="60"
+                    v-autoTrim="{ obj: form, key: 'sensorName' }"
+                    v-model="form.sensorName"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="传感器描述:" prop="des">
+            <el-form-item label="传感器描述:" prop="description">
                 <el-input
                     v-autoTrim="{
                         obj: form,
-                        key: 'des',
+                        key: 'description',
                     }"
-                    v-model="form.des"
+                    v-model="form.description"
                     type="textarea"
                     placeholder="请输入传感器描述"
                     :autosize="{ minRows: 4, maxRows: 4 }"
@@ -31,52 +31,56 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">内参</div>
             </div>
-            <el-form-item label="盲区距离(m):" prop="x">
+            <el-form-item label="盲区距离(m):" prop="nearDistance">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'nearDistance' }"
+                    v-model="form.nearDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="探测距离(m):" prop="x">
+            <el-form-item label="探测距离(m):" prop="farDistance">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'farDistance' }"
+                    v-model="form.farDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="水平视场角(deg):" prop="x">
+            <el-form-item label="水平视场角(deg):" prop="fovH">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovH' }"
+                    v-model="form.fovH"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="垂直视场角(deg):" prop="x">
+            <el-form-item label="垂直视场角(deg):" prop="fovV">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovV' }"
+                    v-model="form.fovV"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="分辨率:" prop="y">
-                <el-radio v-model="form.y" label="1">1920x1080</el-radio>
-                <el-radio v-model="form.y" label="2">800x600</el-radio>
+            <el-form-item label="分辨率:" prop="resolution">
+                <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-form-item>
-            <el-form-item label="帧率(HZ):" prop="x">
+            <el-form-item label="帧率(HZ):" prop="frameRate">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'frameRate' }"
+                    v-model="form.frameRate"
                 >
                 </el-input>
             </el-form-item>
@@ -84,9 +88,9 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">其他</div>
             </div>
-            <el-form-item label="显示本车:" prop="y">
-                <el-radio v-model="form.z" label="1">是</el-radio>
-                <el-radio v-model="form.z" label="2">否</el-radio>
+            <el-form-item label="显示本车:" prop="selfDisplay">
+                <el-radio v-model="form.selfDisplay" label="1">是</el-radio>
+                <el-radio v-model="form.selfDisplay" label="0">否</el-radio>
             </el-form-item>
         </el-form>
     </div>
@@ -100,32 +104,135 @@ export default {
     components: {},
     data() {
         return {
-            sensorId: "LKJFDLKJ",
             form: {
-                name: "",
-                des: "",
-                x: "",
-                y: "1",
-                z: "1",
+                id: "", // id
+                sensorCode: "", // 传感器编码
+                sensorName: "", // 传感器名称
+                description: "", // 传感器描述
+                nearDistance: "", // 盲区距离
+                farDistance: "", // 探测距离
+                fovH: "", // 水平现场角
+                fovV: "", // 垂直现场角
+                resolution: "1920*1080", // 分辨率
+                frameRate: "", // 帧率
+                selfDisplay: "1", // 是否显示本车
+                share: "", // 是否分享
             },
             rules: {
-                name: [{ required: true, message: "请输入", trigger: "blur" }],
-                des: [{ required: true, message: "请输入", trigger: "blur" }],
-                x: [{ required: true, message: "请输入", trigger: "blur" }],
-                y: [{ required: true, message: "请选择", trigger: "change" }],
-                z: [{ required: true, message: "请选择", trigger: "change" }],
+                sensorName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                description: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                nearDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                farDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovH: [{ required: true, message: "请输入", trigger: "blur" }],
+                fovV: [{ required: true, message: "请输入", trigger: "blur" }],
+                resolution: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
+                frameRate: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                selfDisplay: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
             },
         };
     },
 
-    computed: {},
+    /* props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    }, */
 
-    methods: {},
+    methods: {
+        // 展示详情
+        showInfo(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getCameraInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.$refs.form.clearValidate();
+                    this.form = res.info;
+                    // 传回当前展示form的share，从而改变按钮的展示
+                    this.$emit("changeShare", this.form.share);
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        save(isAdd = false) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    // 判断是否新增
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
+
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveCamera,
+                        data: {
+                            ...this.form,
+                        },
+                    }).then((res) => {
+                        if (res.code == 200 && res.info) {
+                            this.form.id = res.info.id;
+                            this.form.share = res.info.share;
+                            this.$message.success("保存成功");
+                            // this.$parent.$refs.modelList.getList();
+                            this.$emit("changeShare", this.form.share);
+                            this.$emit("getList");
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        share() {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.shareCamera,
+                data: {
+                    ...this.form,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("分享成功");
+                    this.$emit("getList");
+                } else {
+                    this.$message.error(res.message || "分享失败");
+                }
+            });
+        },
+        cancel() {
+            if (this.form.id) {
+                // 取消时有id则重新请求表单
+                this.showInfo(this.form.id);
+            } else {
+                // 清空
+                this.$emit("clearForm");
+            }
+        },
+    },
 
     // mounted: {},
 };
 </script>
 
 <style lang='less' scoped>
-@import '../common/util.less';
+@import "../common/util.less";
 </style>

src/views/modelLibrary/components/formGps.vue

@@ -3,24 +3,24 @@
         <el-form ref="form" :model="form" :rules="rules" label-width="160px">
             <div class="inputBox flexBox">
                 <span class="label">传感器ID</span>
-                <div>{{ sensorId }}</div>
+                <div>{{ form.sensorCode }}</div>
             </div>
-            <el-form-item label="传感器名称:" prop="name">
+            <el-form-item label="传感器名称:" prop="sensorName">
                 <el-input
                     placeholder="请输入"
-                    maxlength="30"
-                    v-autoTrim="{ obj: form, key: 'name' }"
-                    v-model="form.name"
+                    maxlength="60"
+                    v-autoTrim="{ obj: form, key: 'sensorName' }"
+                    v-model="form.sensorName"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="传感器描述:" prop="des">
+            <el-form-item label="传感器描述:" prop="description">
                 <el-input
                     v-autoTrim="{
                         obj: form,
-                        key: 'des',
+                        key: 'description',
                     }"
-                    v-model="form.des"
+                    v-model="form.description"
                     type="textarea"
                     placeholder="请输入传感器描述"
                     :autosize="{ minRows: 4, maxRows: 4 }"
@@ -31,21 +31,21 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">内参</div>
             </div>
-            <el-form-item label="经度偏移量(deg):" prop="x">
+            <el-form-item label="经度偏移量(deg):" prop="longitudeOffset">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'longitudeOffset' }"
+                    v-model="form.longitudeOffset"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="纬度偏移量(deg):" prop="x">
+            <el-form-item label="纬度偏移量(deg):" prop="latitudeOffset">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'latitudeOffset' }"
+                    v-model="form.latitudeOffset"
                 >
                 </el-input>
             </el-form-item>
@@ -53,12 +53,12 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">其他</div>
             </div>
-            <el-form-item label="帧率(HZ):" prop="x">
+            <el-form-item label="帧率(HZ):" prop="frameRate">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'frameRate' }"
+                    v-model="form.frameRate"
                 >
                 </el-input>
             </el-form-item>
@@ -74,27 +74,112 @@ export default {
     components: {},
     data() {
         return {
-            sensorId: "LKJFDLKJ",
             form: {
-                name: "",
-                des: "",
-                x: "",
-                y: "1",
-                z: "1",
+                id: "", // id
+                sensorCode: "", // 传感器编码
+                sensorName: "", // 传感器名称
+                description: "", // 传感器描述
+                longitudeOffset: "", // 经度偏移量
+                latitudeOffset: "", // 纬度偏移量
+                frameRate: "", // 帧率
+                share: "", // 是否分享
             },
             rules: {
-                name: [{ required: true, message: "请输入", trigger: "blur" }],
-                des: [{ required: true, message: "请输入", trigger: "blur" }],
-                x: [{ required: true, message: "请输入", trigger: "blur" }],
-                y: [{ required: true, message: "请选择", trigger: "change" }],
-                z: [{ required: true, message: "请选择", trigger: "change" }],
+                sensorName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                description: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                longitudeOffset: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                latitudeOffset: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                frameRate: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
             },
         };
     },
 
     computed: {},
 
-    methods: {},
+    methods: {
+        // 展示详情
+        showInfo(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getGpsInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.$refs.form.clearValidate();
+                    this.form = res.info;
+                    // 传回当前展示form的share，从而改变按钮的展示
+                    this.$emit("changeShare", this.form.share);
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        save(isAdd = false) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    // 判断是否新增
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
+
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveGps,
+                        data: {
+                            ...this.form,
+                        },
+                    }).then((res) => {
+                        if (res.code == 200 && res.info) {
+                            this.form.id = res.info.id;
+                            this.form.share = res.info.share;
+                            this.$message.success("保存成功");
+                            this.$emit("changeShare", this.form.share);
+                            this.$emit("getList");
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        share() {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.shareGps,
+                data: {
+                    ...this.form,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("分享成功");
+                    this.$emit("getList");
+                } else {
+                    this.$message.error(res.message || "分享失败");
+                }
+            });
+        },
+        cancel() {
+            if (this.form.id) {
+                // 取消时有id则重新请求表单
+                this.showInfo(this.form.id);
+            } else {
+                // 清空
+                this.$emit("clearForm");
+            }
+        },
+    },
 
     // mounted: {},
 };

src/views/modelLibrary/components/formLaserRadar.vue

@@ -3,24 +3,24 @@
         <el-form ref="form" :model="form" :rules="rules" label-width="160px">
             <div class="inputBox flexBox">
                 <span class="label">传感器ID</span>
-                <div>{{ sensorId }}</div>
+                <div>{{ form.sensorCode }}</div>
             </div>
-            <el-form-item label="传感器名称:" prop="name">
+            <el-form-item label="传感器名称:" prop="sensorName">
                 <el-input
                     placeholder="请输入"
-                    maxlength="30"
-                    v-autoTrim="{ obj: form, key: 'name' }"
-                    v-model="form.name"
+                    maxlength="60"
+                    v-autoTrim="{ obj: form, key: 'sensorName' }"
+                    v-model="form.sensorName"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="传感器描述:" prop="des">
+            <el-form-item label="传感器描述:" prop="description">
                 <el-input
                     v-autoTrim="{
                         obj: form,
-                        key: 'des',
+                        key: 'description',
                     }"
-                    v-model="form.des"
+                    v-model="form.description"
                     type="textarea"
                     placeholder="请输入传感器描述"
                     :autosize="{ minRows: 4, maxRows: 4 }"
@@ -31,66 +31,66 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">内参</div>
             </div>
-            <el-form-item label="盲区距离(m):" prop="x">
+            <el-form-item label="盲区距离(m):" prop="nearDistance">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'nearDistance' }"
+                    v-model="form.nearDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="探测距离(m):" prop="x">
+            <el-form-item label="探测距离(m):" prop="farDistance">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'farDistance' }"
+                    v-model="form.farDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="水平视场角(deg):" prop="x">
+            <el-form-item label="水平视场角(deg):" prop="fovH">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'fovH' }"
+                    v-model="form.fovH"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="垂直视场角(deg):" prop="x">
+            <el-form-item label="垂直视场角(deg):" prop="fovV">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'fovV' }"
+                    v-model="form.fovV"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="线数(个):" prop="x">
+            <el-form-item label="线数(个):" prop="lineNumber">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'lineNumber' }"
+                    v-model="form.lineNumber"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="帧率(HZ):" prop="x">
+            <el-form-item label="帧率(HZ):" prop="frameRate">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'frameRate' }"
+                    v-model="form.frameRate"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="出点数(个):" prop="x">
+            <el-form-item label="出点数(个):" prop="outputPoints">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'outputPoints' }"
+                    v-model="form.outputPoints"
                 >
                 </el-input>
             </el-form-item>
@@ -98,9 +98,17 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">其他</div>
             </div>
-            <el-form-item label="输出模式:" prop="y">
-                <el-radio v-model="form.z" label="1">大地坐标系</el-radio>
-                <el-radio v-model="form.z" label="2">相对本车坐标系</el-radio>
+            <el-form-item label="输出模式:" prop="outputMode">
+                <!-- <el-radio v-model="form.outputMode" label="1">大地坐标系</el-radio>
+                <el-radio v-model="form.outputMode" label="2">相对本车坐标系</el-radio> -->
+                <el-select v-model="form.outputMode">
+                    <el-option
+                        v-for="item in outputModeList"
+                        :label="item.caption"
+                        :value="item.code"
+                        :key="item.code"
+                    ></el-option>
+                </el-select>
             </el-form-item>
         </el-form>
     </div>
@@ -114,29 +122,135 @@ export default {
     components: {},
     data() {
         return {
-            sensorId: "LKJFDLKJ",
+            outputModeList: [],
             form: {
-                name: "",
-                des: "",
-                x: "",
-                y: "1",
-                z: "1",
+                id: "", // id
+                sensorCode: "", // 传感器编码
+                sensorName: "", // 传感器名称
+                description: "", // 传感器描述
+                nearDistance: "", // 盲区距离
+                farDistance: "", // 探测距离
+                fovH: "", // 水平现场角
+                fovV: "", // 垂直现场角
+                lineNumber: "", // 线数
+                frameRate: "", // 帧率
+                outputPoints: "", // 出点数
+                outputMode: "", // 输出模式
+                share: "", // 是否分享
             },
             rules: {
-                name: [{ required: true, message: "请输入", trigger: "blur" }],
-                des: [{ required: true, message: "请输入", trigger: "blur" }],
-                x: [{ required: true, message: "请输入", trigger: "blur" }],
-                y: [{ required: true, message: "请选择", trigger: "change" }],
-                z: [{ required: true, message: "请选择", trigger: "change" }],
+                sensorName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                description: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                nearDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                farDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovH: [{ required: true, message: "请输入", trigger: "blur" }],
+                fovV: [{ required: true, message: "请输入", trigger: "blur" }],
+                lineNumber: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                frameRate: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                outputPoints: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                outputMode: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
             },
         };
     },
 
     computed: {},
 
-    methods: {},
+    methods: {
+        // 展示详情
+        showInfo(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getLidarInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.$refs.form.clearValidate();
+                    this.form = res.info;
+                    // 传回当前展示form的share，从而改变按钮的展示
+                    this.$emit("changeShare", this.form.share);
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        save(isAdd = false) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    // 判断是否新增
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
 
-    // mounted: {},
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveLidar,
+                        data: {
+                            ...this.form,
+                        },
+                    }).then((res) => {
+                        if (res.code == 200 && res.info) {
+                            this.form.id = res.info.id;
+                            this.form.share = res.info.share;
+                            this.$message.success("保存成功");
+                            this.$emit("changeShare", this.form.share);
+                            this.$emit("getList");
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        share() {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.shareLidar,
+                data: {
+                    ...this.form,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("分享成功");
+                    this.$emit("getList");
+                } else {
+                    this.$message.error(res.message || "分享失败");
+                }
+            });
+        },
+        cancel() {
+            if (this.form.id) {
+                // 取消时有id则重新请求表单
+                this.showInfo(this.form.id);
+            } else {
+                // 清空
+                this.$emit("clearForm");
+            }
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            outputModeList: "coordinate",
+        });
+    },
 };
 </script>
 

src/views/modelLibrary/components/formPerfectSensor.vue

@@ -3,24 +3,24 @@
         <el-form ref="form" :model="form" :rules="rules" label-width="160px">
             <div class="inputBox flexBox">
                 <span class="label">传感器ID</span>
-                <div>{{ sensorId }}</div>
+                <div>{{ form.sensorCode }}</div>
             </div>
-            <el-form-item label="传感器名称:" prop="name">
+            <el-form-item label="传感器名称:" prop="sensorName">
                 <el-input
                     placeholder="请输入"
-                    maxlength="30"
-                    v-autoTrim="{ obj: form, key: 'name' }"
-                    v-model="form.name"
+                    maxlength="60"
+                    v-autoTrim="{ obj: form, key: 'sensorName' }"
+                    v-model="form.sensorName"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="传感器描述:" prop="des">
+            <el-form-item label="传感器描述:" prop="description">
                 <el-input
                     v-autoTrim="{
                         obj: form,
-                        key: 'des',
+                        key: 'description',
                     }"
-                    v-model="form.des"
+                    v-model="form.description"
                     type="textarea"
                     placeholder="请输入传感器描述"
                     :autosize="{ minRows: 4, maxRows: 4 }"
@@ -31,57 +31,57 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">内参</div>
             </div>
-            <el-form-item label="盲区距离(m):" prop="x">
+            <el-form-item label="盲区距离(m):" prop="nearDistance">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'nearDistance' }"
+                    v-model="form.nearDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="探测距离(m):" prop="x">
+            <el-form-item label="探测距离(m):" prop="farDistance">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'farDistance' }"
+                    v-model="form.farDistance"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="水平视场角左(deg):" prop="x">
+            <el-form-item label="水平视场角左(deg):" prop="fovHLeft">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovHLeft' }"
+                    v-model="form.fovHLeft"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="水平视场角右(deg):" prop="x">
+            <el-form-item label="水平视场角右(deg):" prop="fovHRight">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovHRight' }"
+                    v-model="form.fovHRight"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="垂直视场角顶(deg):" prop="x">
+            <el-form-item label="垂直视场角顶(deg):" prop="fovVTop">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovVTop' }"
+                    v-model="form.fovVTop"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="垂直视场角底(deg):" prop="x">
+            <el-form-item label="垂直视场角底(deg):" prop="fovVBottom">
                 <el-input
                     placeholder="请输入"
                     maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    v-autoTrim="{ obj: form, key: 'fovVBottom' }"
+                    v-model="form.fovVBottom"
                 >
                 </el-input>
             </el-form-item>
@@ -89,30 +89,30 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">其他</div>
             </div>
-            <el-form-item label="显示探测锥:" prop="y">
-                <el-radio v-model="form.z" label="1">是</el-radio>
-                <el-radio v-model="form.z" label="2">否</el-radio>
+            <el-form-item label="显示探测锥:" prop="rangeDisplay">
+                <el-radio v-model="form.rangeDisplay" label="1">是</el-radio>
+                <el-radio v-model="form.rangeDisplay" label="0">否</el-radio>
             </el-form-item>
-            <el-form-item label="最大目标物数量(个):" prop="x">
+            <el-form-item label="最大目标物数量(个):" prop="maxObjects">
                 <el-input
                     placeholder="请输入"
-                    maxlength="15"
-                    v-autoTrim="{ obj: form, key: 'x' }"
-                    v-model="form.x"
+                    maxlength="10"
+                    v-autoTrim="{ obj: form, key: 'maxObjects' }"
+                    v-model="form.maxObjects"
                 >
                 </el-input>
             </el-form-item>
-            <el-form-item label="坐标系:" prop="s">
-                <el-select v-model="form.s">
+            <el-form-item label="坐标系:" prop="coordinateSystem">
+                <el-select v-model="form.coordinateSystem">
                     <el-option
-                        v-for="item in sList"
+                        v-for="item in coordinateSystemList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
                     ></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="目标物筛选:" prop="targetSel">
+            <el-form-item label="目标物筛选:" prop="targetFilter">
                 <el-checkbox
                     :indeterminate="isIndeterminate"
                     v-model="checkAll"
@@ -120,14 +120,14 @@
                     >全选</el-checkbox
                 >
                 <el-checkbox-group
-                    v-model="form.targetSel"
+                    v-model="form.targetFilter"
                     @change="handleCheckedTargetChange"
                 >
                     <el-checkbox
                         v-for="target in targetOptions"
                         :label="target.code"
                         :key="target.code"
-                        >{{ target.title }}</el-checkbox
+                        >{{ target.caption }}</el-checkbox
                     >
                 </el-checkbox-group>
             </el-form-item>
@@ -138,45 +138,69 @@
 <script>
 //import  from '';
 
-const targetOptions = [
-    { code: "1", title: "车辆" },
-    { code: "2", title: "行人" },
-    { code: "3", title: "路灯" },
-    { code: "4", title: "信号灯" },
-    { code: "5", title: "障碍物" },
-    { code: "6", title: "道路信息" },
-    { code: "7", title: "车道信息" },
-    { code: "8", title: "车道完整信息" },
-    { code: "9", title: "路标" },
-];
-
 export default {
     name: "formPerfectSensor", // form-完美传感器
     components: {},
     data() {
         return {
-            sensorId: "LKJFDLKJ",
-            sList: [],
+            coordinateSystemList: [],
             checkAll: false,
             isIndeterminate: false,
-            targetOptions: targetOptions,
+            targetOptions: [],
             form: {
-                name: "",
-                des: "",
-                x: "",
-                y: "1",
-                z: "1",
-                s: "",
-                b: "",
-                targetSel: [],
+                id: "", // id
+                sensorCode: "", // 传感器编码
+                sensorName: "", // 传感器名称
+                description: "", // 传感器描述
+                nearDistance: "", // 盲区距离
+                farDistance: "", // 探测距离
+                fovHLeft: "", // 水平现场角左
+                fovHRight: "", // 水平现场角右
+                fovVTop: "", // 垂直现场角顶
+                fovVBottom: "", // 垂直现场角底
+                rangeDisplay: "1", // 显示探测锥
+                maxObjects: "", // 最大目标物个数
+                coordinateSystem: "", // 坐标系
+                targetFilter: [], // 目标物筛选
+                share: "", // 是否分享
             },
             rules: {
-                name: [{ required: true, message: "请输入", trigger: "blur" }],
-                des: [{ required: true, message: "请输入", trigger: "blur" }],
-                x: [{ required: true, message: "请输入", trigger: "blur" }],
-                y: [{ required: true, message: "请选择", trigger: "change" }],
-                z: [{ required: true, message: "请选择", trigger: "change" }],
-                s: [{ required: true, message: "请选择", trigger: "change" }],
+                sensorName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                description: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                nearDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                farDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovHLeft: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovHRight: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovVTop: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                fovVBottom: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                rangeDisplay: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
+                maxObjects: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                coordinateSystem: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
+                targetFilter: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
             },
         };
     },
@@ -184,19 +208,104 @@ export default {
     computed: {},
 
     methods: {
+        showInfo(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getOgtInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.$refs.form.clearValidate();
+                    this.form = res.info;
+                    this.form.targetFilter = res.info.targetFilter.split(",");
+                    // 传回当前展示form的share，从而改变按钮的展示
+                    this.$emit("changeShare", this.form.share);
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        save(isAdd = false) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    // 判断是否新增
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
+
+                    let data = {
+                        ...this.form,
+                        targetFilter: this.form.targetFilter.join(","),
+                    };
+
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveOgt,
+                        data,
+                    }).then((res) => {
+                        if (res.code == 200 && res.info) {
+                            this.form.id = res.info.id;
+                            this.form.share = res.info.share;
+                            this.$message.success("保存成功");
+                            this.$emit("changeShare", this.form.share);
+                            this.$emit("getList");
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        share() {
+            let data = {
+                ...this.form,
+                targetFilter: this.form.targetFilter.join(","),
+            };
+
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.shareOgt,
+                data,
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("分享成功");
+                    this.$emit("getList");
+                } else {
+                    this.$message.error(res.message || "分享失败");
+                }
+            });
+        },
+        cancel() {
+            if (this.form.id) {
+                // 取消时有id则重新请求表单
+                this.showInfo(this.form.id);
+            } else {
+                // 清空
+                this.$emit("clearForm");
+            }
+        },
         handleCheckAllChange(val) {
-            this.form.targetSel = val ? targetOptions.map((i)=>i.code) : [];
+            this.form.targetFilter = val
+                ? this.targetOptions.map((i) => i.code)
+                : [];
             this.isIndeterminate = false;
         },
         handleCheckedTargetChange(value) {
             let checkedCount = value.length;
-            this.checkAll = checkedCount === this.form.targetSel.length;
+            this.checkAll = checkedCount === this.form.targetFilter.length;
             this.isIndeterminate =
                 checkedCount > 0 && checkedCount < this.targetOptions.length;
         },
     },
 
-    // mounted: {},
+    async mounted() {
+        await this.$dicsListsInit({
+            coordinateSystemList: "coordinate",
+            targetOptions: "targetFilter",
+        });
+    },
 };
 </script>
 

src/views/modelLibrary/components/handleConfigList.vue

@@ -1,22 +1,170 @@
 <template>
-    <div v-bind:class="{ isActive: isActive }">
-        <div class="titlePanel">
-            <i class="el-icon el-icon-caret-right" @click="handleChange"></i>
-            <span class="title" @click="handleChange">{{ titleText }}</span>
-            <i class="el-icon el-icon-circle-plus-outline" @click="add" v-if="showBtns"></i>
+    <div class="handleConfigListPanel">
+        <div v-bind:class="{ isActive: isActiveA }">
+            <div class="titlePanel">
+                <i
+                    class="el-icon el-icon-caret-right"
+                    @click="handleChange('isActiveA')"
+                ></i>
+                <span class="title" @click="handleChange('isActiveA')">{{
+                    configTitleList[0]
+                }}</span>
+                <i
+                    class="el-icon el-icon-circle-plus-outline"
+                    @click="add('camera', 0)"
+                    v-if="showBtns"
+                ></i>
+            </div>
+            <ul class="listPanel">
+                <li
+                    class="content"
+                    v-for="(item, index) in configList.camera"
+                    :key="item.id"
+                >
+                    <div
+                        class="nameBox"
+                        v-bind:class="{
+                            isCur:
+                                curOne.name === 'camera' &&
+                                curOne.index === index,
+                        }"
+                        @click="configHandle('camera', index)"
+                    >
+                        <i class="sensorIcon sensorIconA"></i>
+                        <span class="name">{{ item.sensorName }}</span>
+                    </div>
+                    <i
+                        class="el-icon el-icon-delete"
+                        v-if="showBtns"
+                        @click="delOne('camera', index)"
+                    ></i>
+                </li>
+            </ul>
+        </div>
+
+        <div v-bind:class="{ isActive: isActiveB }">
+            <div class="titlePanel">
+                <i
+                    class="el-icon el-icon-caret-right"
+                    @click="handleChange('isActiveB')"
+                ></i>
+                <span class="title" @click="handleChange('isActiveB')">{{
+                    configTitleList[1]
+                }}</span>
+                <i
+                    class="el-icon el-icon-circle-plus-outline"
+                    @click="add('ogt', 1)"
+                    v-if="showBtns"
+                ></i>
+            </div>
+            <ul class="listPanel">
+                <li
+                    class="content"
+                    v-for="(item, index) in configList.ogt"
+                    :key="item.id"
+                >
+                    <div
+                        class="nameBox"
+                        v-bind:class="{
+                            isCur:
+                                curOne.name === 'ogt' && curOne.index === index,
+                        }"
+                        @click="configHandle('ogt', index)"
+                    >
+                        <i class="sensorIcon sensorIconB"></i>
+                        <span class="name">{{ item.sensorName }}</span>
+                    </div>
+                    <i
+                        class="el-icon el-icon-delete"
+                        v-if="showBtns"
+                        @click="delOne('ogt', index)"
+                    ></i>
+                </li>
+            </ul>
+        </div>
+
+        <div v-bind:class="{ isActive: isActiveC }">
+            <div class="titlePanel">
+                <i
+                    class="el-icon el-icon-caret-right"
+                    @click="handleChange('isActiveC')"
+                ></i>
+                <span class="title" @click="handleChange('isActiveC')">{{
+                    configTitleList[2]
+                }}</span>
+                <i
+                    class="el-icon el-icon-circle-plus-outline"
+                    @click="add('lidar', 2)"
+                    v-if="showBtns"
+                ></i>
+            </div>
+            <ul class="listPanel">
+                <li
+                    class="content"
+                    v-for="(item, index) in configList.lidar"
+                    :key="item.id"
+                >
+                    <div
+                        class="nameBox"
+                        v-bind:class="{
+                            isCur:
+                                curOne.name === 'lidar' &&
+                                curOne.index === index,
+                        }"
+                        @click="configHandle('lidar', index)"
+                    >
+                        <i class="sensorIcon sensorIconC"></i>
+                        <span class="name">{{ item.sensorName }}</span>
+                    </div>
+                    <i
+                        class="el-icon el-icon-delete"
+                        v-if="showBtns"
+                        @click="delOne('lidar', index)"
+                    ></i>
+                </li>
+            </ul>
+        </div>
+
+        <div v-bind:class="{ isActive: isActiveE }">
+            <div class="titlePanel">
+                <i
+                    class="el-icon el-icon-caret-right"
+                    @click="handleChange('isActiveE')"
+                ></i>
+                <span class="title" @click="handleChange('isActiveE')">{{
+                    configTitleList[3]
+                }}</span>
+                <i
+                    class="el-icon el-icon-circle-plus-outline"
+                    @click="add('gps', 3)"
+                    v-if="showBtns"
+                ></i>
+            </div>
+            <ul class="listPanel">
+                <li
+                    class="content"
+                    v-for="(item, index) in configList.gps"
+                    :key="item.id"
+                >
+                    <div
+                        class="nameBox"
+                        v-bind:class="{
+                            isCur:
+                                curOne.name === 'gps' && curOne.index === index,
+                        }"
+                        @click="configHandle('gps', index)"
+                    >
+                        <i class="sensorIcon sensorIconE"></i>
+                        <span class="name">{{ item.sensorName }}</span>
+                    </div>
+                    <i
+                        class="el-icon el-icon-delete"
+                        v-if="showBtns"
+                        @click="delOne('gps', index)"
+                    ></i>
+                </li>
+            </ul>
         </div>
-        <ul class="listPanel">
-            <li class="content">
-                <i class="el-icon el-icon-video-camera" @click="configHandle('水电费可接受的李逵负荆')"></i>
-                <span class="name" @click="configHandle('水电费可接受的李逵负荆')">水电费可接受的李逵负荆</span>
-                <i class="el-icon el-icon-delete"  v-if="showBtns"></i>
-            </li>
-            <li class="content">
-                <i class="el-icon el-icon-video-camera" @click="configHandle('电饭锅')"></i>
-                <span class="name" @click="configHandle('电饭锅')">电饭锅</span>
-                <i class="el-icon el-icon-delete" v-if="showBtns"></i>
-            </li>
-        </ul>
 
         <el-dialog
             v-if="showBtns"
@@ -32,34 +180,33 @@
                 :rules="rules"
                 label-width="108px"
             >
-                <el-form-item label="传感器:" prop="name">
-                    <el-input
-                        placeholder="请输入传感器名称"
-                        maxlength="30"
-                        class="name"
-                        v-autoTrim="{ obj: form, key: 'name' }"
-                        v-model="form.name"
-                    >
-                    </el-input>
+                <el-form-item label="传感器:" prop="sensorId">
+                    <el-select v-model="form.sensorId" @change="sensorChange">
+                        <el-option
+                            v-for="item in sensorNameList"
+                            :label="item.sensorName"
+                            :value="item.id"
+                            :key="item.id"
+                        ></el-option>
+                    </el-select>
                 </el-form-item>
-                <el-form-item label="传感器描述:" prop="des">
+                <el-form-item label="传感器描述:" prop="sensorDescription">
                     <el-input
                         v-autoTrim="{
                             obj: form,
-                            key: 'des',
+                            key: 'sensorDescription',
                         }"
-                        v-model="form.des"
+                        v-model="form.sensorDescription"
                         type="textarea"
-                        placeholder="请输入传感器描述"
+                        placeholder="请输入"
                         :autosize="{ minRows: 4, maxRows: 4 }"
                         maxlength="200"
+                        disabled
                     ></el-input>
                 </el-form-item>
             </el-form>
             <span slot="footer">
-                <el-button type="primary" @click="dialogVisible = false"
-                    >确 定</el-button
-                >
+                <el-button type="primary" @click="diaConfirm">确 定</el-button>
                 <el-button @click="dialogVisible = false">取 消</el-button>
             </span>
         </el-dialog>
@@ -74,18 +221,26 @@ export default {
     components: {},
     data() {
         return {
-            isActive: false,
-            titleText: "",
+            isActiveA: false,
+            isActiveB: false,
+            isActiveC: false,
+            isActiveD: false,
+            isActiveE: false,
+            currentType: "", // 当前操作传感器的类型
             dialogTitle: "",
+            sensorNameList: [],
             // titleTexts: ['摄像头','完美传感器','激光雷达','毫米波雷达','GPS'],
-            // dialogTitle: "",
             dialogVisible: false,
             form: {
-                name: "",
-                des: "",
+                sensorName: "",
+                sensorDescription: "",
+                sensorId: "",
             },
             rules: {
-                name: [
+                sensorId: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
+                sensorDescription: [
                     { required: true, message: "请输入", trigger: "blur" },
                 ],
             },
@@ -96,15 +251,22 @@ export default {
             default: 0,
             type: Number,
         },
-        isActiveA: {
-            default: false,
-            type: Boolean,
-        },
         // 是否展示右侧编辑按钮
         showBtns: {
             default: true,
             type: Boolean,
         },
+        configList: {
+            default: {},
+            type: Object,
+        },
+        curOne: {
+            default: {
+                name: "",
+                index: -1,
+            },
+            type: Object,
+        },
     },
 
     computed: {
@@ -112,37 +274,93 @@ export default {
     },
 
     methods: {
-        handleChange() {
-            if (this.isActive) {
-                this.isActive = false;
+        handleChange(name) {
+            if (this[name]) {
+                this[name] = false;
             } else {
-                this.isActive = true;
+                this[name] = true;
             }
         },
-        add() {
-            this.dialogVisible = true;
+        /**
+         * type传感器类型
+         * index传感器索引
+         */
+        add(type, index) {
+            let apis = [
+                this.$api.modelLibrary.getMyCameraList,
+                this.$api.modelLibrary.getMyOgtList,
+                this.$api.modelLibrary.getMyLidarList,
+                this.$api.modelLibrary.getMyGpsList,
+            ];
+            this.currentType = type;
+            this.dialogTitle = "添加" + this.configTitleList[index];
+            this.sensorNameList = [];
+
+            this.$axios({
+                method: "post",
+                url: apis[index],
+                data: {},
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.sensorNameList = res.info;
+                    this.dialogVisible = true;
+                    this.$refs.form.resetFields();
+                } else {
+                    this.$message.error(res.message || "获取信息失败");
+                }
+            });
+        },
+        sensorChange(id) {
+            let val = this.sensorNameList.find((i) => i.id == id);
+            this.form.sensorName = val.sensorName;
+            this.form.sensorDescription = val.description;
+        },
+        delOne(type, index) {
+            this.$confirm("确认是否删除？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$emit("delOne", type, index);
+            });
+        },
+        diaConfirm() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    let info = this.form;
+                    let type = this.currentType;
+                    this.$emit("addOne", info, type);
+                    this.dialogVisible = false;
+                }
+            });
         },
         handleClose(done) {
             done();
         },
-        configHandle(title){
-            this.$emit('curItem',title);
+        configHandle(type, index) {
+            let curOne = {
+                name: type,
+                index,
+            };
+            this.$emit("curItem", curOne);
         },
     },
 
     mounted() {
         this.isActive = this.isActiveA;
-        this.titleText = this.configTitleList[this.titleCode];
-        this.dialogTitle = "添加" + this.configTitleList[this.titleCode];
     },
 };
 </script>
 
 <style lang='less' scoped>
+.handleConfigListPanel {
+    width: 200px;
+}
+
 .titlePanel {
     display: flex;
     align-items: center;
-    margin-bottom: 24px;
+    margin-bottom: 30px;
     cursor: pointer;
 
     .title {
@@ -170,15 +388,67 @@ export default {
     .content {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         margin-left: 24px;
         margin-bottom: 15px;
-        cursor: pointer;
         transition: all 0.3s;
 
+        &:last-child {
+            margin-bottom: 45px;
+        }
+
+        .nameBox {
+            display: flex;
+            align-items: center;
+            padding: 3px 6px;
+            margin-right: 6px;
+            cursor: pointer;
+
+            &.isCur {
+                background: rgba(81, 149, 247, 0.15);
+                border-radius: 17.5px;
+                color: @themeColor;
+            }
+        }
+
+        .el-icon-delete {
+            cursor: pointer;
+        }
+
         .name {
             flex: 1;
             margin-left: 5px;
             margin-right: 5px;
+            word-break: break-all;
+        }
+
+        .sensorIconA {
+            background: url("../../../assets/common/image/sensor/01.png") center
+                no-repeat;
+        }
+        .sensorIconB {
+            background: url("../../../assets/common/image/sensor/02.png") center
+                no-repeat;
+        }
+        .sensorIconC {
+            background: url("../../../assets/common/image/sensor/03.png") center
+                no-repeat;
+        }
+        .sensorIconD {
+            background: url("../../../assets/common/image/sensor/04.png") center
+                no-repeat;
+        }
+        .sensorIconE {
+            background: url("../../../assets/common/image/sensor/05.png") center
+                no-repeat;
+        }
+
+        .sensorIcon {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+
+            background-size: contain;
         }
     }
 }

src/views/modelLibrary/components/modelList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="modelListPanel">
-        <div class="addBtn">
+        <div class="addBtn" @click="addOne">
             <span>新增</span>
             <i class="el-icon-plus"></i>
         </div>
@@ -8,25 +8,34 @@
             <div class="inputPanel">
                 <el-input
                     placeholder="请输入内容"
-                    v-model="input3"
+                    v-model="searchName"
+                    maxlength="60"
                     class="input-with-select"
+                    clearable
                 >
-                    <el-button slot="append" icon="el-icon-search"></el-button>
+                    <el-button
+                        slot="append"
+                        icon="el-icon-search"
+                        @click="searchOne"
+                    ></el-button>
                 </el-input>
             </div>
             <div class="title">公有</div>
             <ul class="list listPub">
-                <li><span>传感器-1</span></li>
-                <li><span>传感器-2</span></li>
-                <li><span>传感器-3</span></li>
-                <li><span>传感器-4</span></li>
+                <li v-for="item in listPub" :key="item.id">
+                    <span @click="showInfo(item.id)">
+                        {{ item[showName] }}
+                    </span>
+                </li>
             </ul>
             <div class="title">私有</div>
             <ul class="list listPri">
-                <li><span>传感器-1</span><i class="el-icon-delete"></i></li>
-                <li><span>传感器-1</span><i class="el-icon-delete"></i></li>
-                <li><span>传感器-1</span><i class="el-icon-delete"></i></li>
-                <li><span>传感器-1</span><i class="el-icon-delete"></i></li>
+                <li v-for="item in listPri" :key="item.id">
+                    <span @click="showInfo(item.id)">
+                        {{ item[showName] }}
+                    </span>
+                    <i class="el-icon-delete" @click="delOne(item.id)"></i>
+                </li>
             </ul>
         </div>
     </div>
@@ -40,15 +49,66 @@ export default {
     components: {},
     data() {
         return {
-            input3: "",
+            searchName: "",
+            listPub: [], // 公有列表
+            listPri: [], // 私有列表
         };
     },
 
-    computed: {},
+    props: {
+        getListApi: {
+            type: String,
+            default: "",
+        },
+        showName: {
+            type: String,
+            default: "",
+        },
+    },
 
-    methods: {},
+    methods: {
+        getList() {
+            if (!this.getListApi) return;
+
+            let data = {};
+            data[this.showName] = this.searchName;
+
+            this.$axios({
+                method: "post",
+                url: this.getListApi,
+                data,
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.listPub = res.info.filter((i) => i.share === "1");
+                    this.listPri = res.info.filter((i) => i.share === "0");
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        showInfo(id) {
+            this.$emit("showInfo", id);
+        },
+        addOne() {
+            this.$emit("addOne");
+        },
+        delOne(id) {
+            this.$confirm("确认是否删除？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$emit("delOne", id);
+            });
+        },
+        searchOne() {
+            this.getList();
+        },
+    },
 
-    // mounted: {},
+    mounted() {
+        this.getList();
+    },
 };
 </script>
 
@@ -78,6 +138,7 @@ export default {
         border-radius: 4px;
         box-shadow: 3px 0 6px @grayLine, 0 3px 6px @grayLine, 0 0px transparent,
             -3px 0 6px @grayLine;
+        overflow: hidden;
 
         .title {
             border-left: 6px solid @themeColor;
@@ -89,8 +150,7 @@ export default {
         }
 
         .list {
-            padding: 0 10px 40px 26px;
-            margin-right: 6px;
+            margin: 0 10px 40px 26px;
             border-top: 1px solid @grayLine;
 
             li {
@@ -103,6 +163,12 @@ export default {
             }
         }
 
+        .listPub,
+        .listPri {
+            height: calc(50% - 91px);
+            overflow-y: auto;
+        }
+
         .listPri li {
             display: flex;
             justify-content: space-between;

src/views/modelLibrary/sensorModel.vue

@@ -1,6 +1,14 @@
 <template>
     <div class="sensorModelPanel">
-        <model-list class="modelList"></model-list>
+        <model-list
+            ref="modelList"
+            class="modelList"
+            :getListApi="getListApi"
+            :showName="showName"
+            @showInfo="showInfo"
+            @addOne="addOne"
+            @delOne="delOne"
+        ></model-list>
         <div class="contentPanel">
             <toolbarTab
                 :isConnect="true"
@@ -12,26 +20,61 @@
             </toolbarTab>
 
             <div class="tabContent">
-                <form-camera v-if="subPageActiveName === 1"></form-camera>
+                <form-camera
+                    v-show="subPageActiveName === 1"
+                    ref="form1"
+                    @getList="getList"
+                    @changeShare="changeShare"
+                    @clearForm="addOne"
+                ></form-camera>
                 <form-perfect-sensor
-                    v-if="subPageActiveName === 2"
+                    v-show="subPageActiveName === 2"
+                    ref="form2"
+                    @getList="getList"
+                    @changeShare="changeShare"
+                    @clearForm="addOne"
                 ></form-perfect-sensor>
                 <form-laser-radar
-                    v-if="subPageActiveName === 3"
+                    v-show="subPageActiveName === 3"
+                    ref="form3"
+                    @getList="getList"
+                    @changeShare="changeShare"
+                    @clearForm="addOne"
                 ></form-laser-radar>
                 <!-- <form-millimeter-wave-radar
-                    v-if="subPageActiveName === 4"
+                    v-show="subPageActiveName === 4"
                 ></form-millimeter-wave-radar> -->
-                <form-gps v-if="subPageActiveName === 4"></form-gps>
+                <form-gps
+                    v-show="subPageActiveName === 4"
+                    ref="form4"
+                    @getList="getList"
+                    @changeShare="changeShare"
+                    @clearForm="addOne"
+                ></form-gps>
                 <div class="model">
                     <img :src="imgSrc" width="100%" />
                 </div>
             </div>
             <div class="btns">
-                <el-button type="primary">保存</el-button>
-                <el-button type="primary">取消</el-button>
-                <el-button type="primary">分享</el-button>
-                <el-button type="primary">另存为</el-button>
+                <el-button
+                    type="primary"
+                    v-show="currentShare === '0' || currentShare === ''"
+                    @click="save(false)"
+                    >保存</el-button
+                >
+                <el-button
+                    type="primary"
+                    v-show="currentShare === '0'"
+                    @click="share"
+                    >分享</el-button
+                >
+                <el-button
+                    type="primary"
+                    v-show="currentShare === '0' || currentShare === '1'"
+                    @click="save(true)"
+                    >另存为</el-button
+                >
+                <el-button type="primary" plain @click="cancel">取消</el-button>
             </div>
         </div>
     </div>
@@ -60,9 +103,12 @@ export default {
     },
     data() {
         return {
+            getListApi: this.$api.modelLibrary.getCameraList,
+            showName: "sensorName",
             subPageActiveName: 1,
             fromId: 1,
             imgSrc: require("@/assets/common/image/car.png"),
+            currentShare: "",
         };
     },
 
@@ -75,6 +121,7 @@ export default {
                     plain: true,
                     title: this.configTitleList[0],
                     disabled: false,
+                    api: this.$api.modelLibrary.getCameraList,
                     fromId: 1,
                 },
                 {
@@ -82,6 +129,7 @@ export default {
                     plain: true,
                     title: this.configTitleList[1],
                     disabled: false,
+                    api: this.$api.modelLibrary.getOgtList,
                     fromId: 2,
                 },
                 {
@@ -89,6 +137,7 @@ export default {
                     plain: true,
                     title: this.configTitleList[2],
                     disabled: false,
+                    api: this.$api.modelLibrary.getLidarList,
                     fromId: 3,
                 },
                 {
@@ -96,6 +145,7 @@ export default {
                     plain: true,
                     title: this.configTitleList[3],
                     disabled: false,
+                    api: this.$api.modelLibrary.getGpsList,
                     fromId: 4,
                 },
                 // {
@@ -111,11 +161,66 @@ export default {
 
     methods: {
         toolsControl(item) {
+            this.addOne();
+            this.getListApi = item.api;
             this.subPageActiveName = item.fromId;
+            this.$nextTick(() => {
+                this.getList();
+            });
+        },
+        showInfo(id) {
+            this.$refs[`form${this.subPageActiveName}`].showInfo(id);
+        },
+        getList() {
+            this.$refs.modelList.getList();
+        },
+        save(isAdd) {
+            this.$refs[`form${this.subPageActiveName}`].save(isAdd);
+        },
+        share() {
+            this.$refs[`form${this.subPageActiveName}`].share();
+        },
+        cancel() {
+            this.$refs[`form${this.subPageActiveName}`].cancel();
+        },
+        changeShare(share) {
+            // 根据form传回的share进行按钮展示
+            this.currentShare = share;
+        },
+        addOne() {
+            this.$refs[
+                `form${this.subPageActiveName}`
+            ].$refs.form.resetFields();
+            this.$refs[`form${this.subPageActiveName}`].form.sensorCode = "";
+            this.$refs[`form${this.subPageActiveName}`].form.share = "";
+            this.$refs[`form${this.subPageActiveName}`].form.id = "";
+            this.currentShare = "";
+        },
+        delOne(id) {
+            const delApis = [
+                this.$api.modelLibrary.delCameraById,
+                this.$api.modelLibrary.delOgtById,
+                this.$api.modelLibrary.delLidarById,
+                this.$api.modelLibrary.delGpsById,
+            ];
+            this.$axios({
+                method: "post",
+                url: delApis[this.subPageActiveName - 1],
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("删除成功");
+                    this.$refs.modelList.getList();
+                } else {
+                    this.$message.error(res.message || "删除失败");
+                }
+            });
         },
     },
 
-    // mounted: {},
+    // mounted() {},
 };
 </script>
 
@@ -132,6 +237,7 @@ export default {
 
     .contentPanel {
         flex: 1;
+        padding-left: 30px;
     }
 
     .tabContent {
@@ -139,13 +245,14 @@ export default {
         padding-top: 15px;
 
         .model {
-            width: 400px;
+            min-width: 300px;
+            padding-left: 40px;
         }
     }
 
     .btns {
         padding-top: 30px;
-        text-align: center;
+        padding-left: 390px;
     }
 
     /deep/ .el-tabs__item {

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -0,0 +1,473 @@
+<template>
+    <div class="vehicleConfigurationDetailPanel">
+        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
+            <div class="inputBox flexBox">
+                <span class="label">配置ID</span>
+                <div>{{ form.configCode }}</div>
+            </div>
+            <div class="flexBox headBox">
+                <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-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-form-item label="车辆名称:" prop="vehicleName">
+                    <el-select
+                        v-model="form.vehicleName"
+                        @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-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-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>
+            </div>
+        </el-form>
+
+        <div class="contentBox">
+            <div>
+                <handle-config-list
+                    @curItem="curItem"
+                    @addOne="addOne"
+                    @delOne="delOne"
+                    :configList="configList"
+                    :curOne="curOne"
+                ></handle-config-list>
+            </div>
+
+            <div class="model">
+                <img src="../../assets/common/image/car.png" width="100%" />
+            </div>
+
+            <div class="conditions">
+                <div class="btnBox">
+                    <el-button type="primary" @click="saveConfig"
+                        >保存设置</el-button
+                    >
+                </div>
+
+                <el-form
+                    ref="formA"
+                    :model="formA"
+                    :rules="rulesA"
+                    label-width="108px"
+                >
+                    <div class="forms">
+                        <el-form-item label="X(M):" prop="sensorX">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="10"
+                                v-autoTrim="{ obj: formA, key: 'sensorX' }"
+                                v-model="formA.sensorX"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="Y(M):" prop="sensorY">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="10"
+                                v-autoTrim="{ obj: formA, key: 'sensorY' }"
+                                v-model="formA.sensorY"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="Z(M):" prop="sensorZ">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="10"
+                                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="10"
+                                v-autoTrim="{ obj: formA, key: 'sensorH' }"
+                                v-model="formA.sensorH"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="俯仰角(deg):" prop="sensorP">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="10"
+                                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="10"
+                                v-autoTrim="{ obj: formA, key: 'sensorR' }"
+                                v-model="formA.sensorR"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="端口" prop="sensorPort">
+                            <el-input
+                                placeholder="请输入"
+                                maxlength="10"
+                                v-autoTrim="{ obj: formA, key: 'sensorPort' }"
+                                v-model="formA.sensorPort"
+                            >
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                </el-form>
+            </div>
+        </div>
+        <div class="btns">
+            <el-button
+                type="primary"
+                @click="save(false)"
+                v-if="form.share === '0' || form.share === ''"
+                >保存</el-button
+            >
+            <el-button 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";
+
+export default {
+    name: "vehicleConfigurationDetail", // 车辆配置详情
+    components: { handleConfigList },
+    data() {
+        let validateNum = (rule, value, callback) => {
+            // !/^(-?\d+)(\.\d{1,2})?$/.test(value) &&
+            // !(/^(-?(0|[1-9][0-9]+))(\.\d{1,2})?$/.test(value)) &&
+            !/^(-?(0|[1-9]+))(\.\d{1,2})?$/.test(value) &&
+                callback(new Error(rule.message));
+            callback();
+        };
+        return {
+            confId: "l2s2d3k4j5fl90898",
+            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" },
+                ],
+                vehicleName: [
+                    {
+                        required: true,
+                        message: "请选择",
+                        trigger: "change",
+                    },
+                ],
+                vehicleDescription: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+            },
+            rulesA: {
+                sensorX: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "请输入最多带有2位小数的数字",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorY: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "请输入最多带有2位小数的数字",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorZ: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validateNum,
+                        message: "请输入最多带有2位小数的数字",
+                        trigger: ["blur"],
+                    },
+                ],
+                sensorH: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                sensorP: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                sensorR: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                sensorPort: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+            },
+            // 传感器对象集合
+            configList: {
+                camera: [],
+                ogt: [],
+                lidar: [],
+                gps: [],
+            },
+            // 用于当前选中项的展示
+            curOne: {
+                name: "",
+                index: -1,
+            },
+        };
+    },
+
+    computed: {},
+
+    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 || "获取信息失败");
+                }
+            });
+        },
+        vehicleChange(id) {
+            this.form.vehicleDescription = this.vehicleNameList.find(
+                (i) => i.id == id
+            ).description;
+        },
+        // 验证各传感器数组的每一项表单数据是否齐全
+        validateSensorsList(){
+            // console.log(Object.keys(this.configList));
+            // console.log(Object.values(this.configList));
+            // console.log(Object.entries(this.configList));
+
+            let lists = Object.values(this.configList);
+
+        },
+        save(isAdd) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    if (isAdd) {
+                        this.form.id = "";
+                    }
+
+                    // if(!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] = [];
+            }
+            console.log(info);
+            console.log(type);
+            info.sensorType = type;
+            this.configList[type].push(info);
+            console.log(this.configList);
+        },
+        delOne(type, index) {
+            console.log(type, index);
+            this.configList[type].splice(index, 1);
+        },
+        curItem(item) {
+            this.$refs.formA.resetFields();
+            this.curOne = item;
+            Object.assign(this.formA, this.configList[item.name][item.index]);
+        },
+        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" });
+        },
+    },
+
+    mounted() {
+        this.getMyVehicleList();
+        if (this.$route.query.formData) {
+            let id = "";
+            this.form.id = id = this.$route.query.formData.id;
+            this.form.share = this.$route.query.formData.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.validateSensorsList()
+                    } else {
+                        this.$message.error(res.message || "获取信息失败");
+                    }
+                });
+            }
+        }
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.vehicleConfigurationDetailPanel {
+    margin: 55px 50px 0;
+}
+
+.headBox {
+    .el-form-item {
+        margin-right: 20px;
+    }
+}
+
+.inputBox.flexBox {
+    margin-bottom: 22px;
+
+    .label {
+        width: 88px;
+    }
+
+    div {
+        line-height: 32px;
+    }
+}
+
+.contentBox {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+
+    .model {
+        width: 400px;
+    }
+
+    .conditions {
+        .btnBox {
+            padding: 0 0 30px;
+        }
+
+        .forms /deep/ .el-form-item__label {
+            width: 120px !important;
+        }
+
+        .forms /deep/ .el-form-item__content {
+            margin-left: 120px !important;
+        }
+    }
+}
+
+.btns {
+    padding-top: 30px;
+    text-align: center;
+}
+</style>

src/views/modelLibrary/vehicleConfigurationList.vue

@@ -4,160 +4,111 @@
             <template slot="searchItem1">
                 <span class="label">配置ID</span>
                 <el-input
-                    v-model="searchParams.id"
+                    v-model="searchParams.configCode"
                     size="small"
                     clearable
                     placeholder="请输入"
+                    maxlength="60"
                 >
                 </el-input>
             </template>
             <template slot="searchItem2">
                 <span class="label">配置名称</span>
                 <el-input
-                    v-model="searchParams.clientOrgName"
+                    v-model="searchParams.configName"
                     size="small"
                     clearable
                     placeholder="请输入"
+                    maxlength="60"
                 >
                 </el-input>
             </template>
             <template slot="searchItem3">
                 <span class="label">配置描述</span>
                 <el-input
-                    v-model="searchParams.clientOrgName"
+                    v-model="searchParams.configDescription"
                     size="small"
                     clearable
                     placeholder="请输入"
+                    maxlength="200"
                 >
                 </el-input>
             </template>
             <template slot="searchItem4">
                 <span class="label">车辆名称</span>
                 <el-input
-                    v-model="searchParams.clientOrgName"
+                    v-model="searchParams.vehicleName"
                     size="small"
                     clearable
                     placeholder="请输入"
+                    maxlength="60"
                 >
                 </el-input>
             </template>
             <template slot="searchItem5">
                 <span class="label">车辆描述</span>
                 <el-input
-                    v-model="searchParams.clientOrgName"
+                    v-model="searchParams.vehicleDescription"
                     size="small"
                     clearable
                     placeholder="请输入"
+                    maxlength="200"
                 >
                 </el-input>
             </template>
 
             <template slot="searchBtn1">
-                <el-button type="primary">查询</el-button>
+                <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
             <template slot="searchBtn2">
-                <el-button type="primary">重置</el-button>
+                <el-button type="primary" @click="doReset">重置</el-button>
             </template>
         </search-layout>
 
-        <div class="tabsBox">
-            <toolbarTab
-                :isConnect="true"
-                position="top"
-                :subPageActiveName="subPageActiveName"
-                :toolbarItem="pageBtnList"
-                @toolbarClick="pageControl"
-                class="toolbarTab"
-            >
-            </toolbarTab>
+        <div class="myTabsBox">
+            <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
+                <el-tab-pane label="公有" name="1"></el-tab-pane>
+                <el-tab-pane label="私有" name="2"></el-tab-pane>
+            </el-tabs>
             <el-button
+                class="addBtn"
                 icon="el-icon-circle-plus-outline"
-                @click="addConfig"
+                @click="addOne"
                 type="primary"
-                plain
-                :disabled="activitedPageNum === 1"
+                :disabled="activeName === '1'"
                 >新增</el-button
             >
         </div>
 
-        <!-- <div > -->
         <tableList
-            v-if="activitedPageNum === 1"
             ref="table"
-            style="border-top: none; margin: 0 30px"
+            style="margin: 0 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
         >
             <el-table-column label="操作" slot="cgInfos" align="center">
                 <template v-slot="scope">
-                    <!-- <span>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-share elIcon"
-                        ></i
-                        >分享
-                    </span>
-                    <span>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-edit-outline elIcon"
-                        ></i
-                        >编辑
-                    </span>
-                    <span>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-close elIcon"
-                        ></i
-                        >删除
-                    </span> -->
-
                     <i
-                        @click="addMarkDia(scope.row)"
+                        v-if="activeName === '2'"
+                        @click="shareRow(scope.row)"
                         class="el-icon-share elIcon"
+                        title="分享"
                     ></i>
                     <i
-                        @click="addMarkDia(scope.row)"
+                        @click="editRow(scope.row)"
                         class="el-icon-edit-outline elIcon"
+                        title="编辑"
                     ></i>
                     <i
-                        @click="addMarkDia(scope.row)"
+                        v-if="activeName === '2'"
+                        @click="delOne(scope.row)"
                         class="el-icon-delete elIcon"
+                        title="删除"
                     ></i>
                 </template>
             </el-table-column>
         </tableList>
-        <div v-else>
-            <tableList
-                ref="tableA"
-                style="border-top: none; margin: 0 30px"
-                :columns="columnsA"
-                :getDataWay="getDataWayA"
-                :pagination="paginationA"
-            >
-                <el-table-column label="操作" slot="cgInfos" align="center">
-                    <template v-slot="scope">
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-share elIcon"
-                        ></i>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-edit-outline elIcon"
-                        ></i>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-share elIcon"
-                        ></i>
-                        <i
-                            @click="addMarkDia(scope.row)"
-                            class="el-icon-delete elIcon"
-                        ></i>
-                    </template>
-                </el-table-column>
-            </tableList>
-        </div>
     </div>
 </template>
 
@@ -172,101 +123,39 @@ export default {
     data() {
         return {
             searchParams: {
-                //搜索参数
-                id: "", //ID
-                clientOrgName: "", //车辆名称
-                clientOrgName1: "", //配置名称
-                clientOrgName2: "", //配置描述
+                // 搜索参数
+                configCode: "", // 配置ID
+                configName: "", // 配置名称
+                configDescription: "", // 配置描述
+                vehicleName: "", // 车辆名称
+                vehicleDescription: "", // 车辆描述
             },
-            activitedPageNum: 1,
-            subPageActiveName: 1,
-            pageBtnList: [
-                {
-                    type: "primary",
-                    title: "公有",
-                    key: "all",
-                    fromId: 1,
-                    method: "showAll",
-                    plain: true,
-                    disabled: false,
-                },
-                {
-                    type: "primary",
-                    title: "私有",
-                    key: "notRead",
-                    fromId: 2,
-                    method: "showNotRead",
-                    plain: true,
-                    disabled: false,
-                },
-            ],
+            activeName: "1",
             columns: [
                 {
                     label: "配置ID",
-                    prop: "id",
-                    // width: 110,
+                    prop: "configCode",
                 },
                 {
                     label: "配置名称",
-                    prop: "ktName",
-                    // template: true,
+                    prop: "configName",
                 },
                 {
                     label: "配置描述",
-                    prop: "jbSource",
-                    // width: 130,
+                    prop: "configDescription",
+                    // showOverflowTooltip: true,
                 },
                 {
                     label: "车辆名称",
-                    prop: "startDateStr",
-                    width: 120,
+                    prop: "vehicleName",
                 },
                 {
                     label: "车辆描述",
-                    prop: "endDateStr",
-                    width: 120,
+                    prop: "vehicleDescription",
                 },
                 {
                     label: "传感器配置",
-                    prop: "projectDateStr",
-                    width: 120,
-                },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true,
-                },
-            ],
-            columnsA: [
-                {
-                    label: "配置ID",
-                    prop: "id",
-                    // width: 110,
-                },
-                {
-                    label: "配置名称",
-                    prop: "ktName",
-                    // template: true,
-                },
-                {
-                    label: "配置描述",
-                    prop: "jbSource",
-                    // width: 130,
-                },
-                {
-                    label: "车辆名称",
-                    prop: "startDateStr",
-                    width: 120,
-                },
-                {
-                    label: "车辆描述",
-                    prop: "endDateStr",
-                    width: 120,
-                },
-                {
-                    label: "传感器配置",
-                    prop: "projectDateStr",
-                    width: 120,
+                    prop: "configSensors",
                 },
                 {
                     label: "操作",
@@ -282,89 +171,108 @@ export default {
                 pageSizes: [10, 30, 50, 100, 200],
                 layout: "sizes, total, prev, pager, next, jumper",
             },
-            paginationA: {
-                //分页使用
-                currentPage: 1,
-                pageSize: 10,
-                position: "right",
-                pageSizes: [10, 30, 50, 100, 200],
-                layout: "sizes, total, prev, pager, next, jumper",
-            },
             getDataWay: {
                 //加载表格数据
-                dataType: "data",
+                dataType: "url",
                 type: "post",
-                firstRequest: false,
-                data: [
-                    {
-                        id: 1,
-                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 2 },
-                    { id: 3 },
-                    { id: 4 },
-                    { id: 5 },
-                    { id: 6 },
-                ],
-                // data: this.$api.scientificStatistics.typeProjectStatistics,
-                param: {},
-            },
-            getDataWayA: {
-                //加载表格数据
-                dataType: "data",
-                type: "post",
-                firstRequest: false,
-                data: [
-                    {
-                        id: 6,
-                        ktName: "沃尔沃二",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 66 },
-                    {
-                        id: 666,
-                        tName: "沃尔沃二",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 6666 },
-                    { id: 51 },
-                    { id: 6 },
-                ],
-                // data: this.$api.scientificStatistics.typeProjectStatistics,
-                param: {},
+                // firstRequest: false,
+                data: this.$api.modelLibrary.getConfigPageList,
+                param: {
+                    share: "1",
+                },
             },
         };
     },
     methods: {
         pageControl(data) {
-            this.activitedPageNum = data.fromId;
+            this.activeName = data.name;
+            this.doSearch();
+        },
+        doSearch() {
+            let pageMap = {
+                ...this.searchParams,
+                share: this.activeName === "1" ? "1" : "0",
+            };
+            this.refreshList(pageMap);
+        },
+        //刷新table
+        refreshList(param) {
+            param
+                ? this.$refs["table"].loadData(param)
+                : this.$refs["table"].loadData();
+        },
+        doReset() {
+            this.searchParams = {
+                configCode: "",
+                configName: "",
+                configDescription: "",
+                vehicleName: "",
+                vehicleDescription: "",
+            };
+            this.doSearch();
+        },
+        addOne() {
+            this.$router.push({ path: "/vehicleConfigurationDetail" });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: "/vehicleConfigurationDetail",
+                query: {
+                    formData: {
+                        id: row.id,
+                        share: row.share,
+                    },
+                },
+            });
         },
-        addConfig() {
-            this.$router.push({ path: "/addVehicleConfiguration" });
+        delOne(row){
+            this.$confirm("确认是否删除？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.modelLibrary.delConfigById,
+                    data: {
+                        id: row.id,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("删除成功");
+                    } else {
+                        this.$message.error(res.message || "删除失败");
+                    }
+                    this.doSearch();
+                });
+            });
+        },
+        shareRow(row) {
+            this.$confirm("确认是否分享？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.modelLibrary.shareConfigById,
+                    data: {
+                        id: row.id,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("分享成功");
+                    } else {
+                        this.$message.error(res.message || "分享失败");
+                    }
+                    this.doSearch();
+                });
+            });
         },
-        addMarkDia() {},
     },
     created() {},
-    // activated() {
-    //     this.$nextTick(() => {});
-    // },
 };
 </script>
 
 <style scoped lang="less">
-.tabsBox {
-    position: relative;
-    overflow: hidden;
-
-    .el-button {
-        position: absolute;
-        right: 40px;
-        top: 45px;
-    }
-}
-
-.toolbarTab {
-    margin: 45px 40px 15px;
-}
 </style>

src/views/modelLibrary/vehicleModel.vue

@@ -1,6 +1,14 @@
 <template>
     <div class="vehicleModelPanel">
-        <model-list class="modelList"></model-list>
+        <model-list
+            ref="modelList"
+            class="modelList"
+            @showInfo="showInfo"
+            @addOne="addOne"
+            @delOne="delOne"
+            :getListApi="getListApi"
+            :showName="showName"
+        ></model-list>
 
         <div class="contentPanel">
             <el-form
@@ -11,56 +19,70 @@
             >
                 <div class="inputBox flexBox">
                     <span class="label">车辆ID</span>
-                    <div>{{ vehicleId }}</div>
+                    <div>{{ form.vehicleCode }}</div>
                 </div>
 
                 <div class="flexBox">
-                    <el-form-item label="车辆名称:" prop="name">
+                    <el-form-item label="车辆名称:" prop="vehicleName">
                         <el-input
                             placeholder="请输入"
-                            maxlength="30"
-                            v-autoTrim="{ obj: form, key: 'name' }"
-                            v-model="form.name"
+                            maxlength="60"
+                            v-autoTrim="{ obj: form, key: 'vehicleName' }"
+                            v-model="form.vehicleName"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车辆描述:" prop="des">
+                    <el-form-item label="车辆描述:" prop="description">
                         <el-input
-                            v-autoTrim="{ obj: form, key: 'des' }"
-                            v-model="form.des"
+                            v-autoTrim="{ obj: form, key: 'description' }"
+                            v-model="form.description"
                             placeholder="请输入"
                             maxlength="200"
                         ></el-input>
                     </el-form-item>
-                    <el-form-item label="车辆类型:" prop="type">
-                        <el-select v-model="form.type">
+                    <el-form-item label="车辆类型:" prop="vehicleType">
+                        <el-select v-model="form.vehicleType">
                             <el-option
-                                v-for="item in typeList"
+                                v-for="item in vehicleTypeList"
                                 :label="item.caption"
                                 :value="item.code"
                                 :key="item.code"
                             ></el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="车辆型号:" prop="a">
-                        <el-select v-model="form.a" disabled>
+                    <el-form-item label="车辆型号:" prop="vehicleModel">
+                        <el-input
+                            placeholder="请输入"
+                            maxlength="60"
+                            v-autoTrim="{ obj: form, key: 'vehicleModel' }"
+                            v-model="form.vehicleModel"
+                        >
+                        </el-input>
+                        <!-- <el-select v-model="form.vehicleModel" disabled>
                             <el-option
-                                v-for="item in typeList"
+                                v-for="item in vehicleModelList"
                                 :label="item.caption"
                                 :value="item.code"
                                 :key="item.code"
                             ></el-option>
-                        </el-select>
+                        </el-select> -->
                     </el-form-item>
-                    <el-form-item label="车辆颜色:" prop="b">
-                        <el-select v-model="form.b" disabled>
+                    <el-form-item label="车辆颜色:" prop="vehicleColour">
+                        <el-input
+                            placeholder="请输入"
+                            maxlength="60"
+                            v-autoTrim="{ obj: form, key: 'vehicleColour' }"
+                            v-model="form.vehicleColour"
+                        >
+                        </el-input>
+                        <!-- <el-select v-model="form.vehicleColour" disabled>
                             <el-option
-                                v-for="item in typeList"
+                                v-for="item in vehicleColourList"
                                 :label="item.caption"
                                 :value="item.code"
                                 :key="item.code"
                             ></el-option>
-                        </el-select>
+                        </el-select> -->
                     </el-form-item>
                 </div>
 
@@ -68,46 +90,57 @@
                     <div class="titlePanelBor">控制参数</div>
                 </div>
                 <div class="flexBox">
-                    <el-form-item label="最大速度(km/h):" prop="x">
+                    <el-form-item label="最大速度(km/h):" prop="maxSpeed">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'maxSpeed' }"
+                            v-model="form.maxSpeed"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="发动机功率(kW):" prop="x">
+                    <el-form-item label="发动机功率(kW):" prop="enginePower">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'enginePower' }"
+                            v-model="form.enginePower"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="最大减速度(m/s2):" prop="x">
+                    <el-form-item
+                        label="最大减速度(m/s2):"
+                        prop="maxDeceleration"
+                    >
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'maxDeceleration' }"
+                            v-model="form.maxDeceleration"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="最大转向角度(deg):" prop="x">
+                    <el-form-item
+                        label="最大转向角度(deg):"
+                        prop="maxSteeringAngle"
+                    >
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'maxSteeringAngle' }"
+                            v-model="form.maxSteeringAngle"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="输出模式:" prop="y">
-                        <el-radio v-model="form.z" label="1">前驱</el-radio>
-                        <el-radio v-model="form.z" label="2">后驱</el-radio>
-                        <el-radio v-model="form.z" label="3">四驱</el-radio>
+                    <el-form-item label="驱动方式:" prop="wheelDrive">
+                        <el-select v-model="form.wheelDrive">
+                            <el-option
+                                v-for="item in wheelDriveList"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
                     </el-form-item>
                 </div>
 
@@ -115,39 +148,57 @@
                     <div class="titlePanelBor">效率参数</div>
                 </div>
                 <div class="flexBox">
-                    <el-form-item label="总效率:" prop="x">
+                    <el-form-item label="总效率:" prop="overallEfficiency">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'overallEfficiency' }"
+                            v-model="form.overallEfficiency"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="前表面有效面积(㎡):" prop="x">
+                    <el-form-item
+                        label="前表面有效面积(㎡):"
+                        prop="frontSurfaceEffective"
+                    >
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{
+                                obj: form,
+                                key: 'frontSurfaceEffective',
+                            }"
+                            v-model="form.frontSurfaceEffective"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="空气阻力系数:" prop="x">
+                    <el-form-item
+                        label="空气阻力系数:"
+                        prop="airDragCoefficient"
+                    >
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{
+                                obj: form,
+                                key: 'airDragCoefficient',
+                            }"
+                            v-model="form.airDragCoefficient"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="滚动阻力系数:" prop="x">
+                    <el-form-item
+                        label="滚动阻力系数:"
+                        prop="rollingResistanceCoefficient"
+                    >
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{
+                                obj: form,
+                                key: 'rollingResistanceCoefficient',
+                            }"
+                            v-model="form.rollingResistanceCoefficient"
                         >
                         </el-input>
                     </el-form-item>
@@ -157,75 +208,75 @@
                     <div class="titlePanelBor">几何参数</div>
                 </div>
                 <div class="flexBox">
-                    <el-form-item label="车轮直径(m):" prop="x">
+                    <el-form-item label="车轮直径(m):" prop="wheelDiameter">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'wheelDiameter' }"
+                            v-model="form.wheelDiameter"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车前距(m):" prop="x">
+                    <el-form-item label="车前距(m):" prop="frontDistance">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'frontDistance' }"
+                            v-model="form.frontDistance"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车后距(m):" prop="x">
+                    <el-form-item label="车后距(m):" prop="rearDistance">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'rearDistance' }"
+                            v-model="form.rearDistance"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车左距(m):" prop="x">
+                    <el-form-item label="车左距(m):" prop="leftDistance">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'leftDistance' }"
+                            v-model="form.leftDistance"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车右距(m):" prop="x">
+                    <el-form-item label="车右距(m):" prop="rightDistance">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'rightDistance' }"
+                            v-model="form.rightDistance"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="车高(m):" prop="x">
+                    <el-form-item label="车高(m):" prop="heightDistance">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'heightDistance' }"
+                            v-model="form.heightDistance"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="轴距(m):" prop="x">
+                    <el-form-item label="轴距(m):" prop="wheelbase">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'wheelbase' }"
+                            v-model="form.wheelbase"
                         >
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="质量(kg):" prop="x">
+                    <el-form-item label="质量(kg):" prop="mass">
                         <el-input
                             placeholder="请输入"
                             maxlength="15"
-                            v-autoTrim="{ obj: form, key: 'x' }"
-                            v-model="form.x"
+                            v-autoTrim="{ obj: form, key: 'mass' }"
+                            v-model="form.mass"
                         >
                         </el-input>
                     </el-form-item>
@@ -234,16 +285,34 @@
                 <div class="titlePanel">
                     <div class="titlePanelBor">3D视图</div>
                 </div>
-                <div class="model">
+                <div class="modelBox">
                     <img :src="imgSrc" width="100%" />
                 </div>
             </el-form>
 
             <div class="btns">
-                <el-button type="primary">保存</el-button>
-                <el-button type="primary">取消</el-button>
-                <el-button type="primary">分享</el-button>
-                <el-button type="primary">另存为</el-button>
+                <!-- 新增和私有才能修改和保存 -->
+                <!-- 私有才能分享 -->
+                <!-- share有值 才能另存为 -->
+                <el-button
+                    type="primary"
+                    v-show="form.share === '0' || form.share === ''"
+                    @click="save(false)"
+                    >保存</el-button
+                >
+                <el-button
+                    type="primary"
+                    v-show="form.share === '0'"
+                    @click="share"
+                    >分享</el-button
+                >
+                <el-button
+                    type="primary"
+                    v-show="form.share === '0' || form.share === '1'"
+                    @click="save(true)"
+                    >另存为</el-button
+                >
+                <el-button type="primary" plain @click="cancel">取消</el-button>
             </div>
         </div>
     </div>
@@ -257,28 +326,103 @@ export default {
     components: { modelList },
     data() {
         return {
-            vehicleId: "LKJFDLKJ",
+            getListApi: this.$api.modelLibrary.getVehicleList, // 获取列表api
+            showName: "vehicleName",
             typeList: [],
             imgSrc: require("@/assets/common/image/car.png"),
             form: {
-                name: "",
-                des: "",
-                x: "",
-                y: "1",
-                z: "1",
-                a: "",
-                b: "",
-                type: "",
+                vehicleCode: "", // 车辆ID
+                vehicleName: "", // 车辆名称
+                description: "", // 车辆描述
+                vehicleType: "", // 车辆类型
+                vehicleModel: "", // 车辆型号
+                vehicleColour: "", // 车辆颜色
+                maxSpeed: "", // 最大速度
+                enginePower: "", // 发动机功率
+                maxDeceleration: "", // 最大减速度
+                maxSteeringAngle: "", // 最大转角
+                wheelDrive: "", // 驱动方式
+                overallEfficiency: "", // 总效率
+                frontSurfaceEffective: "", // 前表面有效面积
+                airDragCoefficient: "", // 空气阻力系数
+                rollingResistanceCoefficient: "", // 滚动阻力系数
+                wheelDiameter: "", // 车轮直径
+                frontDistance: "", // 车前距
+                rearDistance: "", // 车后距
+                leftDistance: "", // 车左距
+                rightDistance: "", // 车右距
+                heightDistance: "", // 车高
+                wheelbase: "", // 轴距
+                mass: "", // 质量
+                share: "", // 分享
             },
+            vehicleTypeList: [],
+            vehicleModelList: [],
+            vehicleColourList: [],
+            wheelDriveList: [],
             rules: {
-                name: [{ required: true, message: "请输入", trigger: "blur" }],
-                des: [{ required: true, message: "请输入", trigger: "blur" }],
-                x: [{ required: true, message: "请输入", trigger: "blur" }],
-                y: [{ required: true, message: "请选择", trigger: "change" }],
-                z: [{ required: true, message: "请选择", trigger: "change" }],
-                a: [{ required: true, message: "请选择", trigger: "change" }],
-                b: [{ required: true, message: "请选择", trigger: "change" }],
-                type: [
+                vehicleName: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                description: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                vehicleModel: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                vehicleColour: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                maxSpeed: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                enginePower: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                maxDeceleration: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                maxSteeringAngle: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                overallEfficiency: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                frontSurfaceEffective: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                airDragCoefficient: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                rollingResistanceCoefficient: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                wheelDiameter: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                frontDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                rearDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                leftDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                rightDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                heightDistance: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                wheelbase: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                mass: [{ required: true, message: "请输入", trigger: "blur" }],
+                vehicleType: [
+                    { required: true, message: "请选择", trigger: "change" },
+                ],
+                wheelDrive: [
                     { required: true, message: "请选择", trigger: "change" },
                 ],
             },
@@ -287,9 +431,105 @@ export default {
 
     computed: {},
 
-    methods: {},
+    methods: {
+        showInfo(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.getVehicleInfo,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    this.$refs.form.clearValidate();
+                    this.form = res.info;
+                } else {
+                    this.$message.error(res.message || "获取失败");
+                }
+            });
+        },
+        save(isAdd) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    // 判断是否新增
+                    if (isAdd || this.form.share === "") {
+                        this.form.id = "";
+                    }
 
-    // mounted: {},
+                    this.$axios({
+                        method: "post",
+                        url: this.$api.modelLibrary.saveVehicle,
+                        data: {
+                            ...this.form,
+                        },
+                    }).then((res) => {
+                        if (res.code == 200 && res.info) {
+                            this.form.id = res.info.id;
+                            this.form.share = res.info.share;
+                            this.$message.success("保存成功");
+                            this.$refs.modelList.getList();
+                        } else {
+                            this.$message.error(res.message || "保存失败");
+                        }
+                    });
+                }
+            });
+        },
+        addOne() {
+            this.$refs.form.resetFields();
+            this.form.vehicleCode = "";
+            this.form.share = "";
+            this.form.id = "";
+        },
+        delOne(id) {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.delVehicleById,
+                data: {
+                    id,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("删除成功");
+                    this.$refs.modelList.getList();
+                } else {
+                    this.$message.error(res.message || "删除失败");
+                }
+            });
+        },
+        share() {
+            this.$axios({
+                method: "post",
+                url: this.$api.modelLibrary.shareVehicle,
+                data: {
+                    ...this.form,
+                },
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.$message.success("分享成功");
+                    this.$refs.modelList.getList();
+                } else {
+                    this.$message.error(res.message || "分享失败");
+                }
+            });
+        },
+        cancel() {
+            if (this.form.id) {
+                // 取消时有id则重新请求表单
+                this.showInfo(this.form.id);
+            } else {
+                // 清空
+                this.addOne();
+            }
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            vehicleTypeList: "vehicleType",
+            wheelDriveList: "driveType",
+        });
+    },
 };
 </script>
 
@@ -301,7 +541,7 @@ export default {
 
     .modelList /deep/ .listPanel {
         min-height: 400px;
-        height: calc(100vh - 200px);
+        height: calc(100vh - 120px);
     }
 
     .contentPanel {
@@ -329,5 +569,10 @@ export default {
         padding-top: 30px;
         text-align: center;
     }
+
+    .modelBox {
+        width: 60%;
+        min-width: 810px;
+    }
 }
 </style>

src/views/page/pageMenu.vue

@@ -159,9 +159,9 @@ export default {
     created() {
         localStorage.setItem(
             "Authorization",
-            "Bearer 52de2c22-c2f9-4307-b49d-5b5593792352"
+            "Bearer 99d5150c-72d0-423d-9245-37d1c5ed410d"
         );
-        document.cookie = 'Authorization=Bearer 52de2c22-c2f9-4307-b49d-5b5593792352'
+        // document.cookie = 'Authorization=Bearer 52de2c22-c2f9-4307-b49d-5b5593792352'
         // console.log(this.$route);
         /* let { code, ticket } = this.$route.query;
         if (code && ticket) {

src/views/sceneLibrary/common/util.less

@@ -95,4 +95,13 @@
             border-color: @purpleA;
         }
     }
+}
+
+.videoBox {
+    width: 100%;
+    padding: 30 60px;
+
+    video {
+        width: 100%;
+    }
 }

src/views/sceneLibrary/components/realSceneList.vue

@@ -0,0 +1,549 @@
+<template>
+    <div>
+        <div class="tabsBox">
+            <toolbarTab
+                :isConnect="true"
+                position="top"
+                :subPageActiveName="subPageActiveName"
+                :toolbarItem="pageBtnList"
+                @toolbarClick="pageControl"
+                class="toolbarTab"
+            >
+            </toolbarTab>
+
+            <div v-show="activitedPageNum === 1">
+                <search-layout>
+                    <template slot="searchItem1">
+                        <span class="label">场景名称</span>
+                        <el-input
+                            v-model="searchParamsA.id"
+                            size="small"
+                            clearable
+                            placeholder="请输入"
+                        >
+                        </el-input>
+                    </template>
+                    <template slot="searchItem2">
+                        <span class="label">自车驾驶行为</span>
+                        <el-select v-model="searchParamsA.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem3">
+                        <span class="label">目标驾驶行为</span>
+                        <el-select v-model="searchParamsA.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem4">
+                        <span class="label">自车反应行为</span>
+                        <el-select v-model="searchParamsA.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem5">
+                        <span class="label">冲突行为</span>
+                        <el-select v-model="searchParamsA.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem6">
+                        <span class="label">冲突类型</span>
+                        <el-select v-model="searchParamsA.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchBtn1">
+                        <el-button type="primary">查询</el-button>
+                    </template>
+                    <template slot="searchBtn2">
+                        <el-button type="primary">重置</el-button>
+                    </template>
+                </search-layout>
+                <div class="isSelected">
+                    <el-checkbox v-model="selectedA">已选择</el-checkbox>
+                </div>
+                <tableList
+                    ref="tableA"
+                    :columns="columnsA"
+                    :getDataWay="getDataWayA"
+                    :pagination="paginationA"
+                    index
+                    selection
+                >
+                </tableList>
+            </div>
+
+            <div v-show="activitedPageNum === 2">
+                <search-layout>
+                    <template slot="searchItem1">
+                        <span class="label">道路</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem2">
+                        <span class="label">基础设施</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem3">
+                        <span class="label">交通情况</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem4">
+                        <span class="label">自车行为</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem5">
+                        <span class="label">目标行为</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem6">
+                        <span class="label">自然环境</span>
+                        <el-select v-model="searchParamsB.status">
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchBtn1">
+                        <el-button type="primary">查询</el-button>
+                    </template>
+                    <template slot="searchBtn2">
+                        <el-button type="primary">重置</el-button>
+                    </template>
+                </search-layout>
+                <div class="isSelected">
+                    <el-checkbox v-model="selectedB">已选择</el-checkbox>
+                </div>
+                <tableList
+                    ref="tableB"
+                    :columns="columnsB"
+                    :getDataWay="getDataWayB"
+                    :pagination="paginationB"
+                    index
+                    selection
+                >
+                </tableList>
+            </div>
+
+            <div v-show="activitedPageNum === 3">
+                <search-layout>
+                    <template slot="searchItem1">
+                        <span class="label">场景名称</span>
+                        <el-input
+                            v-model="searchParamsC.id"
+                            size="small"
+                            clearable
+                            placeholder="请输入"
+                        >
+                        </el-input>
+                    </template>
+                    <template slot="searchItem2">
+                        <span class="label">法规类型</span>
+                        <el-select v-model="searchParamsC.status" multiple>
+                            <el-option
+                                v-for="item in list"
+                                :label="item.caption"
+                                :value="item.code"
+                                :key="item.code"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template slot="searchItem3">
+                        <span class="label">标准类型</span>
+                        <el-input
+                            v-model="searchParamsC.id"
+                            size="small"
+                            clearable
+                            placeholder="请输入"
+                        >
+                        </el-input>
+                    </template>
+                    <template slot="searchBtn1">
+                        <el-button type="primary">查询</el-button>
+                    </template>
+                    <template slot="searchBtn2">
+                        <el-button type="primary">重置</el-button>
+                    </template>
+                </search-layout>
+                <div class="isSelected">
+                    <el-checkbox v-model="selectedC">已选择</el-checkbox>
+                </div>
+                <tableList
+                    ref="tableC"
+                    :columns="columnsC"
+                    :getDataWay="getDataWayC"
+                    :pagination="paginationC"
+                    index
+                    selection
+                >
+                </tableList>
+            </div>
+        </div>
+
+        <div class="flexBox summaryBox">
+            <div>场景总数: {{ sceneTotal }}</div>
+            <div>交通事故场景: {{ sceneA }}</div>
+            <div>自然驾驶场景: {{ sceneB }}</div>
+            <div>标准法规场景: {{ sceneC }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import searchLayout from "@/components/grid/searchLayout";
+import toolbarTab from "@/components/toolbar/toolbarTab";
+import tableList from "@/components/grid/TableList";
+
+export default {
+    name: "realSceneList", // 真实场景列表-三大列表集合
+    components: { searchLayout, toolbarTab, tableList },
+    data() {
+        return {
+            list: [],
+            activitedPageNum: 1,
+            subPageActiveName: 1,
+            pageBtnList: [
+                {
+                    type: "primary",
+                    title: "交通事故场景",
+                    key: "all",
+                    fromId: 1,
+                    method: "showAll",
+                    plain: true,
+                    disabled: false,
+                },
+                {
+                    type: "primary",
+                    title: "自然驾驶场景",
+                    key: "notRead",
+                    fromId: 2,
+                    method: "showNotRead",
+                    plain: true,
+                    disabled: false,
+                },
+                {
+                    type: "primary",
+                    title: "标准法规场景",
+                    key: "notRead1",
+                    fromId: 3,
+                    method: "showNotRead1",
+                    plain: true,
+                    disabled: false,
+                },
+            ],
+            searchParamsA: {
+                //搜索参数
+                id: "", //ID
+                clientOrgName: "", //车辆名称
+                clientOrgName1: "", //配置名称
+                clientOrgName2: "", //配置描述
+                status: "",
+                x: "1",
+                c: [],
+            },
+            columnsA: [
+                //表格列
+                {
+                    label: "场景名称",
+                    prop: "id",
+                },
+                {
+                    label: "自车驾驶行为",
+                    prop: "aid1",
+                },
+                {
+                    label: "目标驾驶行为",
+                    prop: "ktName",
+                },
+                {
+                    label: "自车反应行为",
+                    prop: "jbSource",
+                },
+                {
+                    label: "冲突行为",
+                    prop: "jbSource",
+                },
+                {
+                    label: "冲突类型",
+                    prop: "jbSource",
+                },
+                {
+                    label: "标签",
+                    prop: "asd",
+                    template: true,
+                },
+                {
+                    label: "操作",
+                    prop: "cgInfos",
+                    template: true,
+                },
+            ],
+            paginationA: {
+                //分页使用
+                currentPage: 1,
+                pageSize: 10,
+                position: "right",
+                pageSizes: [10, 30, 50, 100, 200],
+                layout: "sizes, total, prev, pager, next, jumper",
+            },
+            getDataWayA: {
+                //加载表格数据
+                dataType: "data",
+                type: "post",
+                firstRequest: false,
+                data: [
+                    {
+                        id: 1,
+                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
+                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
+                    },
+                    { id: 2 },
+                    { id: 3 },
+                    { id: 4 },
+                    { id: 51 },
+                    { id: 6 },
+                ],
+                // data: this.$api.scientificStatistics.typeProjectStatistics,
+                param: {},
+            },
+            selectedA: false,
+            searchParamsB: {
+                //搜索参数
+                id: "", //ID
+                clientOrgName: "", //车辆名称
+                clientOrgName1: "", //配置名称
+                clientOrgName2: "", //配置描述
+                status: "",
+                c: [],
+            },
+            columnsB: [
+                //表格列
+                {
+                    label: "场景名称",
+                    prop: "aid1",
+                },
+                {
+                    label: "天气",
+                    prop: "ktName",
+                },
+                {
+                    label: "自车行为",
+                    prop: "jbSource",
+                },
+                {
+                    label: "目标行为",
+                    prop: "jbSource",
+                },
+                {
+                    label: "标签",
+                    prop: "asd",
+                    template: true,
+                },
+                {
+                    label: "操作",
+                    prop: "cgInfos",
+                    template: true,
+                },
+            ],
+            paginationB: {
+                //分页使用
+                currentPage: 1,
+                pageSize: 10,
+                position: "right",
+                pageSizes: [10, 30, 50, 100, 200],
+                layout: "sizes, total, prev, pager, next, jumper",
+            },
+            getDataWayB: {
+                //加载表格数据
+                dataType: "data",
+                type: "post",
+                firstRequest: false,
+                data: [
+                    {
+                        id: 1,
+                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
+                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
+                    },
+                    { id: 2 },
+                    { id: 3 },
+                    { id: 4 },
+                    { id: 51 },
+                    { id: 6 },
+                ],
+                param: {},
+            },
+            selectedB: false,
+            searchParamsC: {
+                //搜索参数
+                id: "", //ID
+                clientOrgName: "", //车辆名称
+                clientOrgName1: "", //配置名称
+                clientOrgName2: "", //配置描述
+                status: "",
+                c: [],
+            },
+            columnsC: [
+                //表格列
+                {
+                    label: "场景名称",
+                    prop: "id",
+                },
+                {
+                    label: "法规类型",
+                    prop: "aid1",
+                },
+                {
+                    label: "标准类型",
+                    prop: "ktName",
+                },
+                {
+                    label: "标签",
+                    prop: "asd",
+                    template: true,
+                },
+                {
+                    label: "操作",
+                    prop: "cgInfos",
+                    template: true,
+                },
+            ],
+            paginationC: {
+                //分页使用
+                currentPage: 1,
+                pageSize: 10,
+                position: "right",
+                pageSizes: [10, 30, 50, 100, 200],
+                layout: "sizes, total, prev, pager, next, jumper",
+            },
+            getDataWayC: {
+                //加载表格数据
+                dataType: "data",
+                type: "post",
+                firstRequest: false,
+                data: [
+                    {
+                        id: 1,
+                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
+                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
+                    },
+                    { id: 2 },
+                    { id: 3 },
+                    { id: 4 },
+                    { id: 51 },
+                    { id: 6 },
+                ],
+                // data: this.$api.scientificStatistics.typeProjectStatistics,
+                param: {},
+            },
+            selectedC: false,
+            sceneTotal: 0,
+            sceneA: 0,
+            sceneB: 0,
+            sceneC: 0,
+        };
+    },
+
+    computed: {},
+
+    methods: {
+        pageControl(data) {
+            this.activitedPageNum = data.fromId;
+        },
+    },
+
+    // mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.tabsBox {
+    .el-input,
+    .el-select {
+        width: 230px;
+    }
+
+    .label {
+        min-width: 90px;
+    }
+
+    .isSelected {
+        padding: 10px 0 10px 30px;
+    }
+}
+
+.summaryBox {
+    padding: 20px 20px 0;
+    margin-top: 20px;
+    border-top: 1px dotted @themeColor;
+    color: @themeColor;
+    font-size: 18px;
+    font-weight: bold;
+
+    > div {
+        margin-right: 30px;
+    }
+}
+</style>

src/views/sceneLibrary/components/upload.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="assign-upload">
+        <upload
+            ref="referUpload"
+            v-show="fileList.length === 0"
+            :downLoadAllParams="{}"
+            :on-up-success="uploadSuccess"
+            :on-up-error="uploadError"
+            :auto-up="true"
+            :down-and-preview="false"
+            :show-file-list="false"
+            :on-up-progress="onProgress"
+            :disabled="!canEdit"
+        >
+        </upload>
+        <div class="assign-upload-show" v-show="fileList.length > 0">
+            <div
+                v-for="(item, index) in fileList"
+                :key="item.attachment"
+                @mouseenter="$set(item, 'onMouse', true)"
+                @mouseleave="$set(item, 'onMouse', false)"
+            >
+                <span
+                    :class="{ 'on-mouse': item.onMouse }"
+                    @click="handleDownload(item)"
+                    class="text-wrap"
+                    >{{ item.fileName }}</span
+                >
+                <el-button
+                    class="del-item"
+                    @click.stop="deleteFile(index)"
+                    v-if="isDeleteShow(fileList, index)"
+                    >×</el-button
+                >
+                <!-- :disabled="isFromApproval" -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import upload from "@/components/upload/upload";
+
+export default {
+    name: "assignUpload",
+    components: { upload },
+    props: {
+        //附件
+        fileList: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        rankId: {
+            type: String,
+            default: "",
+        },
+        canEdit: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    model: {
+        //自定义v-model
+        prop: "fileList",
+        event: "updateAttachment",
+    },
+    methods: {
+        async uploadSuccess(res, file, fileList) {
+            this.fileList.push({
+                attachment: res.url,
+                fileName: file.name,
+            });
+
+            /* let id = this.rankId;
+
+            if (!id) {
+                //没有的话获取id
+                let result = await this.$asyncAjaxCommon(
+                    this.$api.projectInfoApi.wpsGetBusinessId
+                );
+                if (result.code != "200") {
+                    this.$ajaxError(result.msg);
+                    this.$message.error("文件保存报错");
+                    return;
+                }
+                if (result.info) {
+                    id = result.info;
+                    this.$emit("getBusinessId", id);
+                } else {
+                    this.$message.error("文件保存网络异常");
+                    return;
+                }
+            } */
+
+            this.$axios({
+                method: "post",
+                url: this.$api.scientificStatistics.saveAttachment,
+                data: {
+                    businessId: id,
+                    fileName: file.name,
+                    attachment: res.url,
+                },
+            }).then((res) => {
+                if (res.code === "200") {
+                    this.$message.success(res.msg || "文件保存成功！");
+                    this.$emit("updateAttachment", this.fileList);
+                }
+            });
+        },
+        uploadError(err, file, fileList) {
+            this.$message.error(err);
+        },
+        onProgress() {},
+        /*下载*/
+        handleDownload(item) {
+            let obj = {
+                url: item.attachment ? item.attachment : item.fileMd5,
+                name: item.fileName,
+            };
+            this.$$download(obj)
+                .then(() => {
+                    this.$message({
+                        type: "success",
+                        message: "下载成功！",
+                    });
+                })
+                .catch((err) => {
+                    this.$message({
+                        type: "error",
+                        message: "下载失败！",
+                    });
+                });
+        },
+        /*删除一个文件*/
+        deleteFile(index) {
+            this.$refs.referUpload.handleRemoveSelf(
+                this.fileList[index].attachment
+            );
+            this.$axios({
+                method: "post",
+                url: this.$api.scientificStatistics.deleteAttachment,
+                data: {
+                    id: this.fileList[index].id,
+                },
+            }).then((res) => {
+                if (res.code === "200") {
+                    this.$message.success(res.msg || "删除成功");
+                    this.$delete(this.fileList, index);
+                    this.$emit("updateAttachment", this.fileList);
+                } else {
+                    if (res.msg != "业务异常,请联系管理员") {
+                        this.$message.error(res.msg || "删除失败");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                }
+            });
+        },
+        //变更时删除按钮（X）是否显示
+        isDeleteShow(fileList, index) {
+            if (this.canEdit) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+// @import "~@/views/assign/styles/assign";
+.assign-upload-show {
+    > div {
+        display: block;
+        > span {
+            color: @themeColor;
+            cursor: pointer;
+            padding: 0 10px;
+            &.on-mouse {
+                & ~ .del-item {
+                    display: inline-block;
+                }
+            }
+            & ~ .del-item {
+                border: none;
+                color: @themeColor;
+                margin-left: 4px;
+                display: none;
+                width: 16px;
+                height: 16px;
+                border-radius: 16px;
+                text-align: center;
+                padding: 0;
+                background: @gray;
+            }
+        }
+    }
+}
+.text-wrap {
+    white-space: normal;
+    word-break: break-all;
+}
+</style>

src/views/sceneLibrary/gradingRule.vue

@@ -36,7 +36,7 @@
             </el-form-item>
 
             <div class="btns">
-                <!-- 公有列表进，另存为+取消 另存为为新增一天数据 新增数据均为私有 1 -->
+                <!-- 公有列表进，另存为+取消 另存为为新增一条数据 新增数据均为私有 1 -->
                 <!-- 私有列表进，保存+另存为+取消 0 -->
                 <!-- 新增进，保存+取消 -1 -->
                 <el-button
@@ -91,6 +91,7 @@ export default {
 
     methods: {
         save(isAdd) {
+            // 调用save时，应写成save()，给不给参数均可，不写小括号的话，isAdd会是事件源，则为true
             this.$refs.form.validate((valid) => {
                 if (valid) {
                     if (isAdd || !this.$route.query.formData) {

src/views/sceneLibrary/gradingRulesList.vue

@@ -55,7 +55,7 @@
             </template>
         </search-layout>
 
-        <div class="tabsBox myTabsBox">
+        <div class="myTabsBox">
             <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
                 <el-tab-pane label="公有" name="1"></el-tab-pane>
                 <el-tab-pane label="私有" name="2"></el-tab-pane>
@@ -236,7 +236,7 @@ export default {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
-            }).then((e) => {
+            }).then(() => {
                 this.$axios({
                     method: "post",
                     url: this.$api.sceneLibrary.fxScoringRules,
@@ -297,14 +297,4 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.tabsBox {
-    position: relative;
-    overflow: hidden;
-
-    .el-button {
-        position: absolute;
-        bottom: 18px;
-        right: 40px;
-    }
-}
 </style>

src/views/sceneLibrary/naturalDrivingScenarioList.vue

@@ -3,58 +3,48 @@
         <search-layout :needBox="true">
             <template slot="searchItem1">
                 <span class="label">道路</span>
-                <el-select v-model="searchParams.status">
-                    <el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>
-                </el-select>
+                <el-cascader
+                    v-model="searchParams.road"
+                    :options="roadList"
+                    :props="props"
+                    clearable=""
+                ></el-cascader>
             </template>
             <template slot="searchItem2">
                 <span class="label">基础设施</span>
-                <el-select v-model="searchParams.status">
-                    <el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>
-                </el-select>
+                <el-cascader
+                    v-model="searchParams.infrastructure"
+                    :options="infrastructureList"
+                    :props="props"
+                    clearable=""
+                ></el-cascader>
             </template>
             <template slot="searchItem3">
                 <span class="label">交通情况</span>
-                <el-select v-model="searchParams.status">
-                    <el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>
-                </el-select>
+                <el-cascader
+                    v-model="searchParams.trafficCondition"
+                    :options="trafficConditionList"
+                    :props="props"
+                    clearable=""
+                ></el-cascader>
             </template>
             <template slot="searchItem4">
                 <span class="label">自车行为</span>
-                <el-select v-model="searchParams.selfBehavior">
-                    <el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>
-                </el-select>
+                <el-cascader
+                    v-model="searchParams.selfBehavior"
+                    :options="selfBehaviorList"
+                    :props="props"
+                    clearable=""
+                ></el-cascader>
             </template>
             <template slot="searchItem5">
                 <span class="label">目标行为</span>
-                <el-select v-model="searchParams.status">
-                    <el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>
-                </el-select>
+                <el-cascader
+                    v-model="searchParams.targetBehavior"
+                    :options="targetBehaviorList"
+                    :props="props"
+                    clearable=""
+                ></el-cascader>
             </template>
             <template slot="searchItem6">
                 <span class="label">自然环境</span>
@@ -95,9 +85,16 @@
             </template>
         </search-layout>
 
+        <div class="btnsPanel">
+            <el-button type="primary" plain icon="el-icon-upload"
+                >上传文件</el-button
+            >
+            <upload :canEdit="true"></upload>
+        </div>
+
         <tableList
             ref="table"
-            style="border-top: none; margin: 30px"
+            style="margin: 0 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -136,8 +133,11 @@
             width="690px"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
+            :before-close="diaClose"
         >
-            <div>123</div>
+            <div class="videoBox">
+                <video :autoplay="autoplay" :src="videoSrc"></video>
+            </div>
         </el-dialog>
     </div>
 </template>
@@ -145,22 +145,29 @@
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+import upload from "./components/upload";
 
 export default {
     name: "naturalDrivingScenarioList", // 自然驾驶场景
-    components: { searchLayout, tableList },
+    components: { searchLayout, tableList, upload },
     data() {
         return {
             searchParams: {
                 //搜索参数
-                id: "", //ID
-                naturalEnvironment: [], //车辆名称
-                clientOrgName1: "", //配置名称
-                clientOrgName2: "", //配置描述
-                status: "",
+                road: [], // 道路
+                infrastructure: [], // 基础设施
+                trafficCondition: [], // 交通情况
+                selfBehavior: [], // 自车行为
+                targetBehavior: [], // 目标行为
+                naturalEnvironment: [], // 自然环境
                 c: [],
             },
             list: [],
+            roadList: [],
+            infrastructureList: [],
+            trafficConditionList: [],
+            selfBehaviorList: [],
+            targetBehaviorList: [],
             naturalEnvironmentList: [],
             props: {
                 multiple: true,
@@ -213,6 +220,8 @@ export default {
                 param: {},
             },
             dialogVisible: false,
+            autoplay: false,
+            videoSrc: "",
         };
     },
     methods: {
@@ -227,35 +236,34 @@ export default {
         },
         doReset() {
             this.searchParams = {
+                road: [],
+                infrastructure: [],
+                trafficCondition: [],
+                selfBehavior: [],
+                targetBehavior: [],
                 naturalEnvironment: [],
-                regulationType: [],
-                standardType: "",
             };
             this.doSearch();
         },
         viewRow(row) {
             this.dialogVisible = true;
+            this.videoSrc = row.videoPreview;
+            this.autoplay = true;
         },
+        diaClose(done){
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        }
     },
 
-    // mounted() {
-    /* this.$axios({
-            method: "post",
-            url: this.$api.common.getDictTreesByTypes,
-            data: {
-                dictTypes: "naturalEnvironment",
-            },
-        }).then((res) => {
-            if (res.code == 200) {
-                console.log(res);
-            } else {
-                this.$message.error(res.message || "保存失败");
-            }
-        }); */
-    // },
-
     async mounted() {
         await this.$dicsTreesInit({
+            roadList: "road",
+            infrastructureList: "infrastructure",
+            trafficConditionList: "trafficCondition",
+            selfBehaviorList: "selfBehavior",
+            targetBehaviorList: "targetBehavior",
             naturalEnvironmentList: "naturalEnvironment",
         });
     },
@@ -264,4 +272,7 @@ export default {
 
 <style lang='less' scoped>
 @import "./common/util.less";
+.btnsPanel {
+    margin: 45px 40px 15px;
+}
 </style>

src/views/sceneLibrary/scenarioTestPackageManagementList.vue

@@ -43,7 +43,7 @@
             </template>
         </search-layout>
 
-        <div class="tabsBox myTabsBox">
+        <div class="myTabsBox">
             <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
                 <el-tab-pane label="公有" name="1"></el-tab-pane>
                 <el-tab-pane label="私有" name="2"></el-tab-pane>
@@ -245,7 +245,7 @@ export default {
                 path: "/scenePacketList",
                 query: {
                     formData: {
-                        packageId: row.packageId
+                        packageId: row.packageId,
                     },
                 },
             });
@@ -256,14 +256,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-.tabsBox {
-    position: relative;
-    overflow: hidden;
-
-    .el-button {
-        position: absolute;
-        bottom: 18px;
-        right: 40px;
-    }
-}
 </style>

src/views/sceneLibrary/scenePacketList.vue

@@ -145,256 +145,7 @@
             :close-on-click-modal="false"
             :close-on-press-escape="false"
         >
-            <div class="tabsBox">
-                <toolbarTab
-                    :isConnect="true"
-                    position="top"
-                    :subPageActiveName="subPageActiveName"
-                    :toolbarItem="pageBtnList"
-                    @toolbarClick="pageControl"
-                    class="toolbarTab"
-                >
-                </toolbarTab>
-
-                <div v-show="activitedPageNum === 1">
-                    <search-layout>
-                        <template slot="searchItem1">
-                            <span class="label">场景名称</span>
-                            <el-input
-                                v-model="searchParamsA.id"
-                                size="small"
-                                clearable
-                                placeholder="请输入"
-                            >
-                            </el-input>
-                        </template>
-                        <template slot="searchItem2">
-                            <span class="label">自车驾驶行为</span>
-                            <el-select v-model="searchParamsA.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem3">
-                            <span class="label">目标驾驶行为</span>
-                            <el-select v-model="searchParamsA.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem4">
-                            <span class="label">自车反应行为</span>
-                            <el-select v-model="searchParamsA.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem5">
-                            <span class="label">冲突行为</span>
-                            <el-select v-model="searchParamsA.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem6">
-                            <span class="label">冲突类型</span>
-                            <el-select v-model="searchParamsA.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchBtn1">
-                            <el-button type="primary">查询</el-button>
-                        </template>
-                        <template slot="searchBtn2">
-                            <el-button type="primary">重置</el-button>
-                        </template>
-                    </search-layout>
-                    <div class="isSelected">
-                        <el-checkbox v-model="selectedA">已选择</el-checkbox>
-                    </div>
-                    <tableList
-                        ref="tableA"
-                        :columns="columnsA"
-                        :getDataWay="getDataWayA"
-                        :pagination="paginationA"
-                        index
-                        selection
-                    >
-                    </tableList>
-                </div>
-
-                <div v-show="activitedPageNum === 2">
-                    <search-layout>
-                        <template slot="searchItem1">
-                            <span class="label">道路</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem2">
-                            <span class="label">基础设施</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem3">
-                            <span class="label">交通情况</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem4">
-                            <span class="label">自车行为</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem5">
-                            <span class="label">目标行为</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem6">
-                            <span class="label">自然环境</span>
-                            <el-select v-model="searchParamsB.status">
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchBtn1">
-                            <el-button type="primary">查询</el-button>
-                        </template>
-                        <template slot="searchBtn2">
-                            <el-button type="primary">重置</el-button>
-                        </template>
-                    </search-layout>
-                    <div class="isSelected">
-                        <el-checkbox v-model="selectedB">已选择</el-checkbox>
-                    </div>
-                    <tableList
-                        ref="tableB"
-                        :columns="columnsB"
-                        :getDataWay="getDataWayB"
-                        :pagination="paginationB"
-                        index
-                        selection
-                    >
-                    </tableList>
-                </div>
-
-                <div v-show="activitedPageNum === 3">
-                    <search-layout>
-                        <template slot="searchItem1">
-                            <span class="label">场景名称</span>
-                            <el-input
-                                v-model="searchParamsC.id"
-                                size="small"
-                                clearable
-                                placeholder="请输入"
-                            >
-                            </el-input>
-                        </template>
-                        <template slot="searchItem2">
-                            <span class="label">法规类型</span>
-                            <el-select v-model="searchParamsC.status" multiple>
-                                <el-option
-                                    v-for="item in list"
-                                    :label="item.caption"
-                                    :value="item.code"
-                                    :key="item.code"
-                                ></el-option>
-                            </el-select>
-                        </template>
-                        <template slot="searchItem3">
-                            <span class="label">标准类型</span>
-                            <el-input
-                                v-model="searchParamsC.id"
-                                size="small"
-                                clearable
-                                placeholder="请输入"
-                            >
-                            </el-input>
-                        </template>
-                        <template slot="searchBtn1">
-                            <el-button type="primary">查询</el-button>
-                        </template>
-                        <template slot="searchBtn2">
-                            <el-button type="primary">重置</el-button>
-                        </template>
-                    </search-layout>
-                    <div class="isSelected">
-                        <el-checkbox v-model="selectedC">已选择</el-checkbox>
-                    </div>
-                    <tableList
-                        ref="tableC"
-                        :columns="columnsC"
-                        :getDataWay="getDataWayC"
-                        :pagination="paginationC"
-                        index
-                        selection
-                    >
-                    </tableList>
-                </div>
-            </div>
-
-            <div class="flexBox summaryBox">
-                <div>场景总数: {{ sceneTotal }}</div>
-                <div>交通事故场景: {{ sceneA }}</div>
-                <div>自然驾驶场景: {{ sceneB }}</div>
-                <div>标准法规场景: {{ sceneC }}</div>
-            </div>
-
+            <real-scene-list></real-scene-list>
             <span slot="footer">
                 <el-button type="primary" @click="scenarioListsConfirm"
                     >确 定</el-button
@@ -411,10 +162,11 @@
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
 import toolbarTab from "@/components/toolbar/toolbarTab";
+import realSceneList from "./components/realSceneList";
 
 export default {
     name: "scenePacketList", // 场景数据包
-    components: { searchLayout, tableList, toolbarTab },
+    components: { searchLayout, tableList, toolbarTab, realSceneList },
     data() {
         return {
             searchParams: {
@@ -424,37 +176,6 @@ export default {
                 clientOrgName1: "", //配置名称
                 clientOrgName2: "", //配置描述
             },
-            activitedPageNum: 1,
-            subPageActiveName: 1,
-            pageBtnList: [
-                {
-                    type: "primary",
-                    title: "交通事故场景",
-                    key: "all",
-                    fromId: 1,
-                    method: "showAll",
-                    plain: true,
-                    disabled: false,
-                },
-                {
-                    type: "primary",
-                    title: "自然驾驶场景",
-                    key: "notRead",
-                    fromId: 2,
-                    method: "showNotRead",
-                    plain: true,
-                    disabled: false,
-                },
-                {
-                    type: "primary",
-                    title: "标准法规场景",
-                    key: "notRead1",
-                    fromId: 3,
-                    method: "showNotRead1",
-                    plain: true,
-                    disabled: false,
-                },
-            ],
             columns: [
                 {
                     label: "操作",
@@ -523,215 +244,6 @@ export default {
                 y: [{ required: true, message: "请选择", trigger: "change" }],
             },
             listA: [],
-            searchParamsA: {
-                //搜索参数
-                id: "", //ID
-                clientOrgName: "", //车辆名称
-                clientOrgName1: "", //配置名称
-                clientOrgName2: "", //配置描述
-                status: "",
-                x: "1",
-                c: [],
-            },
-            columnsA: [
-                //表格列
-                {
-                    label: "场景名称",
-                    prop: "id",
-                },
-                {
-                    label: "自车驾驶行为",
-                    prop: "aid1",
-                },
-                {
-                    label: "目标驾驶行为",
-                    prop: "ktName",
-                },
-                {
-                    label: "自车反应行为",
-                    prop: "jbSource",
-                },
-                {
-                    label: "冲突行为",
-                    prop: "jbSource",
-                },
-                {
-                    label: "冲突类型",
-                    prop: "jbSource",
-                },
-                {
-                    label: "标签",
-                    prop: "asd",
-                    template: true,
-                },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true,
-                },
-            ],
-            paginationA: {
-                //分页使用
-                currentPage: 1,
-                pageSize: 10,
-                position: "right",
-                pageSizes: [10, 30, 50, 100, 200],
-                layout: "sizes, total, prev, pager, next, jumper",
-            },
-            getDataWayA: {
-                //加载表格数据
-                dataType: "data",
-                type: "post",
-                firstRequest: false,
-                data: [
-                    {
-                        id: 1,
-                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 2 },
-                    { id: 3 },
-                    { id: 4 },
-                    { id: 51 },
-                    { id: 6 },
-                ],
-                // data: this.$api.scientificStatistics.typeProjectStatistics,
-                param: {},
-            },
-            selectedA: false,
-            searchParamsB: {
-                //搜索参数
-                id: "", //ID
-                clientOrgName: "", //车辆名称
-                clientOrgName1: "", //配置名称
-                clientOrgName2: "", //配置描述
-                status: "",
-                c: [],
-            },
-            columnsB: [
-                //表格列
-                {
-                    label: "场景名称",
-                    prop: "aid1",
-                },
-                {
-                    label: "天气",
-                    prop: "ktName",
-                },
-                {
-                    label: "自车行为",
-                    prop: "jbSource",
-                },
-                {
-                    label: "目标行为",
-                    prop: "jbSource",
-                },
-                {
-                    label: "标签",
-                    prop: "asd",
-                    template: true,
-                },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true,
-                },
-            ],
-            paginationB: {
-                //分页使用
-                currentPage: 1,
-                pageSize: 10,
-                position: "right",
-                pageSizes: [10, 30, 50, 100, 200],
-                layout: "sizes, total, prev, pager, next, jumper",
-            },
-            getDataWayB: {
-                //加载表格数据
-                dataType: "data",
-                type: "post",
-                firstRequest: false,
-                data: [
-                    {
-                        id: 1,
-                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 2 },
-                    { id: 3 },
-                    { id: 4 },
-                    { id: 51 },
-                    { id: 6 },
-                ],
-                param: {},
-            },
-            selectedB: false,
-            searchParamsC: {
-                //搜索参数
-                id: "", //ID
-                clientOrgName: "", //车辆名称
-                clientOrgName1: "", //配置名称
-                clientOrgName2: "", //配置描述
-                status: "",
-                c: [],
-            },
-            columnsC: [
-                //表格列
-                {
-                    label: "场景名称",
-                    prop: "id",
-                },
-                {
-                    label: "法规类型",
-                    prop: "aid1",
-                },
-                {
-                    label: "标准类型",
-                    prop: "ktName",
-                },
-                {
-                    label: "标签",
-                    prop: "asd",
-                    template: true,
-                },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true,
-                },
-            ],
-            paginationC: {
-                //分页使用
-                currentPage: 1,
-                pageSize: 10,
-                position: "right",
-                pageSizes: [10, 30, 50, 100, 200],
-                layout: "sizes, total, prev, pager, next, jumper",
-            },
-            getDataWayC: {
-                //加载表格数据
-                dataType: "data",
-                type: "post",
-                firstRequest: false,
-                data: [
-                    {
-                        id: 1,
-                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
-                    },
-                    { id: 2 },
-                    { id: 3 },
-                    { id: 4 },
-                    { id: 51 },
-                    { id: 6 },
-                ],
-                // data: this.$api.scientificStatistics.typeProjectStatistics,
-                param: {},
-            },
-            selectedC: false,
-            sceneTotal: 0,
-            sceneA: 0,
-            sceneB: 0,
-            sceneC: 0,
         };
     },
 
@@ -790,9 +302,7 @@ export default {
         scenarioListsConfirm() {
             this.scenarioListsVisible = false;
         },
-        pageControl(data) {
-            this.activitedPageNum = data.fromId;
-        },
+        
     },
 
     mounted() {
@@ -830,33 +340,5 @@ export default {
         font-size: 12px;
         color: @gray;
     }
-
-    .tabsBox {
-        .el-input,
-        .el-select {
-            width: 230px;
-        }
-
-        .label {
-            min-width: 90px;
-        }
-
-        .isSelected {
-            padding: 10px 0 10px 30px;
-        }
-    }
-
-    .summaryBox {
-        padding: 20px 20px 0;
-        margin-top: 20px;
-        border-top: 1px dotted @themeColor;
-        color: @themeColor;
-        font-size: 18px;
-        font-weight: bold;
-
-        > div {
-            margin-right: 30px;
-        }
-    }
 }
 </style>

src/views/sceneLibrary/standardRegulationSimulationScenarioList.vue

@@ -105,6 +105,7 @@
             width="690px"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
+            :before-close="diaClose"
         >
             <div class="videoBox">
                 <video :autoplay="autoplay" :src="videoSrc"></video>
@@ -261,6 +262,11 @@ export default {
             this.videoSrc = row.videoPreview;
             this.autoplay = true;
         },
+        diaClose(done){
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        }
     },
 
     async mounted() {
@@ -273,12 +279,4 @@ export default {
 
 <style lang='less' scoped>
 @import "./common/util.less";
-.videoBox {
-    width: 100%;
-    padding: 30 60px;
-
-    video {
-        width: 100%;
-    }
-}
 </style>

src/views/sceneLibrary/trafficAccidentSimulationScenarioList.vue

@@ -138,8 +138,11 @@
             width="690px"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
+            :before-close="diaClose"
         >
-            <div>123</div>
+            <div class="videoBox">
+                <video :autoplay="autoplay" :src="videoSrc"></video>
+            </div>
         </el-dialog>
     </div>
 </template>
@@ -160,8 +163,8 @@ export default {
                 targetDriving: [], //目标驾驶行为
                 selfReaction: [], //自车反应行为
                 conflictBehavior: [], //冲突行为
-                conflictType: [] ,//冲突类型
-                c:""
+                conflictType: [], //冲突类型
+                c: "",
             },
             selfDrivingList: [],
             targetDrivingList: [],
@@ -222,6 +225,8 @@ export default {
                 param: {},
             },
             dialogVisible: false,
+            autoplay: false,
+            videoSrc: "",
         };
     },
     methods: {
@@ -241,12 +246,19 @@ export default {
                 targetDriving: [],
                 selfReaction: [],
                 conflictBehavior: [],
-                conflictType: []
+                conflictType: [],
             };
             this.doSearch();
         },
         viewRow(row) {
             this.dialogVisible = true;
+            this.videoSrc = row.videoPreview;
+            this.autoplay = true;
+        },
+        diaClose(done) {
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
         },
     },
 
@@ -256,7 +268,7 @@ export default {
             targetDrivingList: "targetDriving",
             selfReactionList: "selfReaction",
             conflictBehaviorList: "conflictBehavior",
-            conflictTypeList: "conflictType"
+            conflictTypeList: "conflictType",
         });
     },
 };

src/views/workManagement/manualRunProjectDetail.vue

@@ -98,7 +98,7 @@
             </div>
         </el-form>
         <div class="btns">
-            <el-button type="primary" @click="save()">保存</el-button>
+            <el-button type="primary" @click="save(false)">保存</el-button>
             <el-button
                 type="primary"
                 @click="save(true)"
@@ -334,6 +334,10 @@ export default {
         }
     }
 
+    .el-textarea {
+        height: 96px;
+    }
+
     .tipBox {
         margin-left: 20px;
 

src/views/workManagement/manualRunProjectList.vue

@@ -98,7 +98,7 @@
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 0 30px;"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"

vue.config.js

@@ -80,8 +80,8 @@ module.exports = {
                 // target: 'http://10.10.83.145:6888/user-center',
                 // target: 'http://10.15.12.70/simulation',
                 // target: 'http://10.15.12.70:7001', // 登录
-                // target: 'http://10.15.12.73:7003',  // 王志强
-                target: 'http://10.15.12.74:8001',
+                target: 'http://10.15.12.73:7003',  // 王志强
+                // target: 'http://10.15.12.74:8001',
                 changeOrigin: true,
                 secure: false, // 如果是https接口，需要配置这个参数
                 pathRewrite: {
@@ -90,7 +90,8 @@ module.exports = {
             },
             '/simulation/resource/server': {
                 // target: 'http://10.15.12.73:7003',  // 王志强
-                target: 'http://10.15.12.88:7003',  // 王耀栋
+                // target: 'http://10.15.12.88:7003',  // 王耀栋
+                target: 'http://10.15.12.72:7003',  // 王晓峰
                 changeOrigin: true,
                 secure: false, // 如果是https接口，需要配置这个参数
                 pathRewrite: {