From 804d59e162b72be684d0087a8cd74dbd6fecbf4d Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 30 十二月 2022 16:57:18 +0800
Subject: [PATCH] 添加投影配置页面
---
src/pages/projectionSetting/index/main.ts | 12 ++
src/pages/projectionSetting/index/App.vue | 265 +++++++++++++++++++++++++++++++++++++++++++++++++++++
src/pages/projectionSetting/index/api.ts | 23 ++++
3 files changed, 300 insertions(+), 0 deletions(-)
diff --git a/src/pages/projectionSetting/index/App.vue b/src/pages/projectionSetting/index/App.vue
new file mode 100644
index 0000000..7e7308f
--- /dev/null
+++ b/src/pages/projectionSetting/index/App.vue
@@ -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>
diff --git a/src/pages/projectionSetting/index/api.ts b/src/pages/projectionSetting/index/api.ts
new file mode 100644
index 0000000..bfc95cf
--- /dev/null
+++ b/src/pages/projectionSetting/index/api.ts
@@ -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
+ })
diff --git a/src/pages/projectionSetting/index/main.ts b/src/pages/projectionSetting/index/main.ts
new file mode 100644
index 0000000..491ea9a
--- /dev/null
+++ b/src/pages/projectionSetting/index/main.ts
@@ -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)
+})
--
Gitblit v1.8.0