添加投影配置页面

zhangzengfei

2022-12-30 804d59e162b72be684d0087a8cd74dbd6fecbf4d

添加投影配置页面

 src/pages/projectionSetting/index/App.vue

New file
@@ -0,0 +1,265 @@
<template>
  <div class="s-projection">
    <el-tabs v-model="activeName" v-loading="loading" :element-loading-text="loadingText" type="border-card">
      <el-tab-pane label="算法配置" name="config">
        <div style="width: 775px">
          <!-- 算法配置 -->
          <el-form :model="config" :rules="rules" label-width="130px" class="alarmSetting" ref="config">
            <el-form-item label="算法库路径" prop="so_file_path">
              <el-input v-model="config.so_file_path" placeholder="算法库路径" size="small"></el-input>
            </el-form-item>
            <el-form-item label="算法运行环境" prop="runtime">
              <el-input v-model="config.runtime" placeholder="算法运行环境" size="small"></el-input>
            </el-form-item>
            <el-form-item label="底图" prop="modelboard_path">
              <el-input v-model="config.modelboard_path" placeholder="算法运行环境" size="small"></el-input>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :http-request="uploadFile"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="rotation" prop="rotation">
              <el-input v-model="config.rotation" placeholder="rotation" size="small"></el-input>
            </el-form-item>
            <el-form-item label="translation" prop="translation">
              <el-input v-model="config.translation" placeholder="translation" size="small"></el-input>
            </el-form-item>

            <el-form-item style="float: right">
              <el-button type="primary" @click="submitConfig" size="small">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getConfig, saveConfig, uploadPic } from "./api"

// 投影算法配置
export default {
  name: "projectionSetting",

  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },

  data() {
    return {
      activeName: "config",
      loading: false,
      loadingText: "",
      config: {
        so_file_path: "",
        runtime: ""
      },
      rules: {
        so_file_path: [
          {
            required: true,
            message: "算法库路径不能为空",
            trigger: "change"
          }
        ],
        runtime: [
          {
            required: true,
            message: "运行环境不能为空",
            trigger: "change"
          }
        ],
        modelboard_path: [
          {
            required: true,
            message: "配置不能为空",
            trigger: "change"
          }
        ],
        rotation: [
          {
            required: true,
            message: "配置不能为空",
            trigger: "change"
          }
        ],
        translation: [
          {
            required: true,
            message: "配置不能为空",
            trigger: "change"
          }
        ]
      }
    }
  },
  mounted() {
    this.initConf()
    this.cleanConfig()
  },
  methods: {
    uploadFile(params) {
      let param = new FormData()
      param.append("file", params.file)
      uploadPic(param).then((rsp) => {
        if (rsp && rsp.success) {
          this.config.modelboard_path = rsp.data.filePath
        }
      })
    },
    cleanConfig() {
      this.config = {
        modelboard_path: "",
        rotation: "",
        translation: "",
        runtime: "",
        so_file_path: ""
      }
    },
    initConf() {
      getConfig().then((rsp) => {
        this.$refs["config"].resetFields()

        if (rsp && rsp.success) {
          this.config.runtime = rsp.data.runtime
          this.config.so_file_path = rsp.data.so_file_path
          this.config.modelboard_path = rsp.data.param.modelboard_path
          if (rsp.data.param.rotation && rsp.data.param.rotation.length > 0) {
            this.config.rotation = rsp.data.param.rotation.join(",")
          }
          if (rsp.data.param.translation && rsp.data.param.translation.length > 0) {
            this.config.translation = rsp.data.param.translation.join(",")
          }
        }
      })
    },
    submitConfig() {
      this.$refs["config"].validate((valid) => {
        if (valid) {
          let zconf = {
            runtime: this.config.runtime,
            so_file_path: this.config.so_file_path,
            param: {
              modelboard_path: this.config.modelboard_path,
              translation: this.config.translation.split(",").map(parseFloat),
              rotation: this.config.rotation.split(",").map(parseFloat)
            }
          }
          saveConfig(zconf).then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "设置保存成功"
              })
            }
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.s-projection {
  width: 100% !important;
  min-width: 1067px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f8f9fb;

  .el-tabs--border-card {
    border: 0px solid #dcdfe6;
    -webkit-box-shadow: none;
    box-shadow: none;
    .el-tabs__header {
      border: 0px solid #dcdfe6;
      .el-tabs__item {
        padding: 5px 50px;
        height: 50px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #222222;
        text-align: center;
        border: 0px solid transparent;
      }
      .el-tabs__item:nth-child(2) {
        padding-left: 50px !important;
      }
      .el-tabs__item:last-child {
        padding-right: 50px !important;
      }
      .el-tabs__item.is-active {
        color: #3d68e1;

        // border-right-color: #fff;
        // border-left-color: #fff;
      }
      .el-tabs__item:not(.is-disabled):hover {
        color: #3d68e1;
      }
    }
  }
  .el-tabs__header {
    margin-bottom: 0;
  }
  .el-tabs__content {
    height: calc(100% - 64px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 20px 40px !important;
    background: #fff;
    .el-tab-pane {
      width: 100%;
      .s-title {
        text-align: left;
        padding: 15px 0px;
        font-size: 16px;
      }
    }
  }

  .s-table {
    border: 1px solid #e8e8e9;
    margin-top: 40px;
  }

  .ui-top-title {
    padding-bottom: 10px;
    /* border-bottom: 1px solid #ebebeb; */
    position: relative;
    text-align: left;
    padding-left: 15px;
    font-size: 16px;
    font-weight: bold;
  }

  .ui-top-title:before {
    content: " ";
    border-left: 4px solid #f53d3d;
    display: inline-block;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -13px;
  }

  .el-button--text {
    color: #3d68e1;
    text-decoration: underline;
  }
}
</style>

 src/pages/projectionSetting/index/api.ts

New file
@@ -0,0 +1,23 @@
import request from "@/scripts/httpRequest"

export const getConfig = () => {
  return request({
    url: "/data/api-v/projection/getConfig",
    method: "get"
  })
}

export const saveConfig = (query: any) => {
  return request({
    url: "/data/api-v/projection/setConfig",
    method: "post",
    data: query
  })
}

export const uploadPic = (data: any) =>
  request({
    url: "/data/api-v/projection/upload",
    method: "post",
    data
  })

 src/pages/projectionSetting/index/main.ts

New file
@@ -0,0 +1,12 @@
import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})