发布模型发布管理页面接口对接

suerprisePlus

2024-07-04 121b2ce562afa4fe69de89853f549687f11b7d1f

发布模型发布管理页面接口对接

 src/api/iot/modelServer.js

@@ -7,3 +7,28 @@
        params: query,
    });
}
export function modelSelectPublishByPage(query) {
    return request({
        url: 'model/selectPublishByPage',
        method: 'get',
        params: query,
    });
}

export function modelPubMetas(data) {
    return request({
        url: 'model/pubMetas',
        method: 'post',
        data: data,
    });
}


export function modelDeletePublishes(query) {
    return request({
        url: 'model/deletePublishes',
        method: 'get',
        params: query,
    });
}


 src/views/iot/modelLibrary/index.vue

@@ -39,15 +39,11 @@
                    <el-table-column label="描述" align="center" prop="bak" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
                        <template slot-scope="scope">
                            <!-- <el-button size="small" type="primary" style="padding: 5px" icon="el-icon-edit"
                                v-hasPermi="['iot:modelLibrary:add']">修改</el-button> -->
                            <!-- <el-button size="small" type="danger" style="padding: 5px" icon="el-icon-delete"
                                v-hasPermi="['iot:modelLibrary:remove']">删除</el-button> -->
                             
                            <el-button size="small" @click="setModelLibraryExport(scope.row)" type="warning"
                                style="padding: 5px" icon="el-icon-download"
                                v-hasPermi="['iot:modelLibrary:export']">下载</el-button>
                            <!-- <el-button size="small" type="success" style="padding: 5px"
                                icon="el-icon-monitor">预览</el-button> -->
                        
                        </template>
                    </el-table-column>
                </el-table>
@@ -237,7 +233,7 @@
        },
        setModelLibraryExport(row) {
            modelDownloadetaReq({ ids: [row.id] }).then((response) => {
                if (response.code == 200) {
                if (response.code == 200 && response.msg) {
                    this.setModelDownloadFile(response.msg)
                } else {
                    this.$message(response.msg);

 src/views/iot/modelserver/index.vue

@@ -8,72 +8,59 @@
                        @keyup.enter.native="setQueryParamsQuery" />
                </el-form-item>
                <el-form-item label="服务类别" prop="type">

                    <el-select v-model="queryParams.type" @change="getList" placeholder="请选择模型类别" clearable
                        size="small">
                        <el-option v-for="dict in dict.type.iot_model_library_type" :key="dict.value"
                            :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini"
                        @click="setQueryParamsQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="setQueryParamsRest">重置</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card class="modelLibiraryContent">
            <el-tabs v-model="activeName" @tab-click="setQueryParamsRest">
                <el-tab-pane label="未发布模型数据" name="first"></el-tab-pane>
                <el-tab-pane label="已发布模型数据" name="second"></el-tab-pane>
            </el-tabs>
            <div class="modelLibiraryTable">
                <el-table :data="templateList" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="模型名称" align="center" prop="name" />
                    <el-table-column label="模型类型" align="center" prop="type" />
                    <el-table-column label="模型大小" align="center" prop="sizes" :formatter="formatterSize" />
                    <el-table-column label="创建时间" align="center" prop="createTime" :formatter="formatterTime" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
                        <template slot-scope="scope">

                            <el-button v-show="!scope.row.url" size="small" @click="setModelLibraryExport(scope.row)"
                                type="success" style="padding: 5px" icon="el-icon-position"
                                v-hasPermi="['iot:modelLibrary:export']">发布</el-button>
                <div class="modelLibiraryTable">
                    <el-table :data="templateList" border>
                        <!-- <el-table-column type="selection" width="55" /> -->
                        <el-table-column label="模型名称" align="center" prop="name" />
                        <el-table-column label="模型类型" align="center" prop="type" />
                        <el-table-column label="模型大小" align="center" prop="sizes" :formatter="formatterSize" />
                        <el-table-column label="发布状态" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.url">已发布</span>
                                <span v-else>未发布</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发布地址" align="center" prop="url" />

                        </template>
                    </el-table-column>
                </el-table>
                        <el-table-column label="创建时间" align="center" prop="createTime" :formatter="formatterTime" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
                            <template slot-scope="scope">

                                <el-button v-show="activeName == 'first' && !scope.row.url" type="success" size="small"
                                    @click="setModelLibraryExport(scope.row)" icon="el-icon-position">发布</el-button>
                                <el-button v-show="activeName == 'second'" size="small"
                                    @click="setModelLibraryDelete(scope.row)" type="warning"
                                    icon="el-icon-delete">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </div>
        </el-card>
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
            <el-form ref="modelFrom" :model="modelFrom" :rules="rules" label-width="80px">
                <!-- <el-form-item label="模型名称" prop="name">
                    <el-input v-model="modelFrom.name"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="模型类别" prop="type">
                    <el-select v-model="modelFrom.type" style="width: 100%" placeholder="请选择模型类别" clearable
                        size="small">
                        <el-option v-for="dict in dict.type.iot_model_library_type" :key="dict.value"
                            :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="模型地址" prop="path">
                    <div style="display: flex">
                        <div style="flex: 1">
                            <input style="display: none" @change="setFileChange" id="fileInput" type="file"
                                accept=".zip"></input>
                            <el-input disabled v-model="modelFrom.path" />
                        </div>
                        <div style="margin-left: 10px">
                            <el-link style="margin: 0px 10px" title="选择" :underline="false" icon="el-icon-plus"
                                @click="setFileCheck"></el-link>
                            <el-link style="margin: 0px 10px" title="上传" :underline="false" icon="el-icon-upload2"
                                @click="setFileInset"></el-link>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="描述">
                    <el-input v-model="modelFrom.bak"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" v-show="modelFrom.ids">修 改</el-button> -->
                <el-button type="primary" @click="setSsubmitForm('modelFrom')">新 增</el-button>
                <el-button>取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

@@ -82,12 +69,15 @@
import configTools from '../../../assets/js/configTools';
import { getToken } from "@/utils/auth";
import {
    modelSelectMetasByPage
    modelSelectMetasByPage,
    modelSelectPublishByPage,
    modelPubMetas,
    modelDeletePublishes
} from '@/api/iot/modelServer';

export default {
    name: 'modelserver',

    dicts: ['iot_model_library_type'],
    data() {
        return {
            loading: false,
@@ -130,18 +120,27 @@
            },
            multipleSelection: [],
            headers: { Authorization: "Bearer " + getToken() },
            activeName: 'first'
        };
    },
    created() {
        this.init();
    },
    methods: {

        handleClick() {
            if (this.activeName == 'first') {
                this.getList()
            } else {
                this.getListSource();
            }
        },
        init() {
            if (this.$store.state.user.roles.indexOf('tenant') !== -1) {
                this.isTenant = true;
            }

            this.getList();
            this.handleClick();
        },
        getSelectPath() {
            modelSelectPath().then((response) => {
@@ -158,7 +157,7 @@
        //查询
        setQueryParamsQuery() {
            this.queryParams.pageIndex = 1;
            this.getList();
            this.handleClick();
        },
        // 重置
        setQueryParamsRest() {
@@ -168,176 +167,72 @@
                name: null,
                type: null,
            }
            this.getList();
            this.handleClick();
        },
        // 搜索
        getList() {
            modelSelectMetasByPage(this.queryParams).then((response) => {
                if (response.code == 200) {

                    this.total = response.data.length;
                    this.templateList = response.data;
                    if (response.data) {
                        this.total = response.data.length;
                        this.templateList = response.data;
                    } else {
                        this.total = 0;
                        this.templateList = [];
                    }

                } else {
                    this.$message('模型数据列表获取失败。');
                }
            })
        },
        setModelLibraryRemove() {
            if (this.multipleSelection.length <= 0) {
                return this.$message('请选择要删除的数据');
            }
            const std = [];
            this.multipleSelection.filter((response) => {
                std.push(response.id);
        getListSource() {
            modelSelectPublishByPage(this.queryParams).then((response) => {
                if (response.code == 200) {
                    if (response.data) {
                        this.total = response.data.length;
                        this.templateList = response.data;
                    } else {
                        this.total = 0;
                        this.templateList = [];
                    }
                } else {
                    this.$message('模型数据列表获取失败。');
                }
            })
            modelDeleteMetas({ ids: std.toString() }).then((response) => {
        },
        setModelLibraryExport(res) {
            modelPubMetas({
                ids: [res.id]
            }).then(response => {
                if (response.code == 200) {
                    this.$message({
                        message: '三维模型删除成功',
                        message: '模型数据发布成功。',
                        type: 'success'
                    });
                    this.setQueryParamsQuery();
                    this.handleClick();
                } else {
                    this.$message('三维模型删除失败');
                    this.$message('模型数据发布失败。');
                }
            })
        },
        setModelLibraryExport(row) {
            modelDownloadetaReq({ ids: [row.id] }).then((response) => {
                if (response.code == 200) {
                    this.setModelDownloadFile(response.msg)
                } else {
                    this.$message(response.msg);
                }
            })
        },
        setModelDownloadFile(res) {
            axios.get(process.env.VUE_APP_BASE_API + "model/downloadFile?guid=" + res, {
                responseType: 'blob',
                headers: this.headers
            }).then((response) => {
                if (response.status === 200) {
                    var elink = document.createElement('a');
                    console.log(response.headers['content-disposition']);
                    debugger
                    // 使用后端提供的文件名  命名
                    // const fileName = response.headers['content-disposition'].split('=')[1];
                    // elink.style.display = 'none';
                    // // 文件下载地址赋值
                    // elink.href = window.URL.createObjectURL(response.data);
                    // let str = fileName;
                    // if (fileName.indexOf("UTF-8''") > -1) {
                    //     str = fileName.replace("UTF-8''", '')
                    // }
                    // elink.download = str;
                    // elink.click();
                    // this.$message({
                    //     message: '文件导出成功',
                    //     type: 'success'
                    // });
                }
            })
        },
        // 添加三维模型
        setModelLibraryAdd() {
            this.setFromRest();
            this.open = true;
            this.title = '添加三维模型';
        },
        setModelLibraryCannel() {
            this.open = false;
            this.title = '';
            this.setFromRest();
            document.getElementById('fileInput').value = "";
            this.selectMappers = null;
        },
        setSsubmitForm(formName) {
            if (!this.selectMappers) {
                this.$message('三维模型未上传无法新增');
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.setModelInsertFiles(this.selectMappers)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        setModelInsertFiles(res) {
            modelInsertFiles(JSON.stringify(res)).then((response) => {
                if (response.code == 200) {
                    this.$message({
                        message: '三维模型添加成功',
                        type: 'success'
                    });
                    this.setModelLibraryCannel();
                    this.setQueryParamsQuery();
                } else {
                    this.$message('三维模型添加失败');
                }
            })
        },
        // 文件选择
        setFileCheck() {
            document.getElementById('fileInput').click();
        },

        setFileChange() {
            const inputFile = document.getElementById('fileInput').files;
            if (inputFile.length > 0) {
                this.modelFrom.path = inputFile[0].name;
            } else {
                this.$message('获取上传文件信息失败，请重新尝试');
            }
            })
        },
        // 文件上传
        setFileInset() {
            if (!this.selectPath) {
                this.getSelectPath();
            }
            var formData = new FormData();
            const fs = document.getElementById('fileInput').files;
            for (var i = 0, c = fs.length; i < c; i++) {
                formData.append(fs[i].name, fs[i]); // fs.files[i].name,file
            }
            modelUploadFiles(this.selectPath, formData).then((response) => {
        setModelLibraryDelete(res) {
            modelDeletePublishes({
                ids: [res.id].toString()
            }).then(response => {
                if (response.code == 200) {
                    this.$message({
                        message: '数据上传成功',
                        message: '模型服务移除成功。',
                        type: 'success'
                    });
                    this.setModelSelectMappers()
                    this.handleClick();
                } else {
                    this.$message('数据上传失败');
                    this.$message('模型服务移除失败。');
                }

            })
        },
        setModelSelectMappers() {
            if (!this.selectPath) {
                this.getSelectPath();
            }
            this.selectMappers = null;
            modelSelectMappers({ path: this.selectPath }).then((response) => {
                if (response.code == 200) {
                    this.selectMappers = response.data;
                } else {
                    this.$message('数据映射查询失败');
                }
            })
        },
        // 表单重置
        setFromRest() {
            this.modelFrom = {
                name: '',
                type: '',
                path: '',
                bak: '',
                ids: '',
            };
        },
        formatterSize(row, column, cellValue, index) {
            return configTools.formatterSize(cellValue);
        },
        formatterTime(row, column, cellValue, index) {
            if (cellValue) {
@@ -346,7 +241,15 @@
                return null
            }

        }
        },
        formatterSize(row, column, cellValue, index) {

            if (cellValue) {
                return configTools.formatterSize(cellValue);
            } else {
                return null
            }
        },
    },
};
</script>