suerprisePlus
2024-06-14 c3be71b180ea95f7928bdffccbec0525911eca9d
src/views/iot/modelLibrary/index.vue
@@ -1,50 +1,111 @@
<template>
    <div v-loading="loading" class="modelLibiraryBox">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                <el-form-item label="模型名称" prop="templateName">
                    <el-input v-model="queryParams.templateName" placeholder="请输入模型名称" clearable size="small" @keyup.enter.native="handleQuery" />
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
                style="margin-bottom: -20px">
                <el-form-item label="模型名称" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable size="small"
                        @keyup.enter.native="setQueryParamsQuery" />
                </el-form-item>
                <el-form-item label="模型类别" prop="type">
                    <el-select v-model="queryParams.type" 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 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">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini">重置</el-button>
                    <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-item style="float: right">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['iot:modelLibrary:add']">新增</el-button>
                    <el-button type="primary" @click="setModelLibraryAdd" plain icon="el-icon-plus" size="mini"
                        v-hasPermi="['iot:modelLibrary:add']">新增</el-button>
                    <el-button type="danger" @click="setModelLibraryRemove" plain icon="el-icon-delete" size="mini"
                        v-hasPermi="['iot:modelLibrary:remove']">删除</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="modelLibiraryContent">
            <div class="modelLibiraryTable">
                <el-table :data="templateList" border>
                <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="type" />
                    <el-table-column label="模型大小" align="center" prop="sizes" :formatter="formatterSize" />
                    <el-table-column label="模型地址" align="center" prop="path" />
                    <el-table-column label="创建时间" align="center" prop="createime" />
                    <el-table-column label="创建时间" align="center" prop="createTime" :formatter="formatterTime" />
                    <el-table-column label="描述" align="center" prop="bak" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                    <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:template:query']" v-if="scope.row.isSys == '0' ? true : !isTenant">修改</el-button>
                            <el-button size="small" type="danger" style="padding: 5px" icon="el-icon-delete" v-hasPermi="['iot:template:remove']" v-if="scope.row.isSys == '0' ? true : !isTenant">删除</el-button>
                            <el-button size="small" type="warning" style="padding: 5px" icon="el-icon-download" v-hasPermi="['iot:template:query']" v-if="scope.row.isSys == '0' ? true : !isTenant">下载</el-button>
                            <!-- <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>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
        </el-card>
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"></el-dialog>
        <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>
<script>
// import { listModelLibrary } from '@/api/iot/modelLibrary';
import {
    modelSelectFiles,
    modelSelectPath,
    modelSelectMetasByPageAndCount,
    modelUploadFiles,
    modelSelectMappers,
    modelInsertFiles,
    modelDeleteMetas,
    modelDownloadFile
} from '@/api/iot/modelLibrary';
import configTools from '../../../assets/js/configTools';
export default {
    name: 'modelLibirary',
    dicts: ['iot_model_library_type'],
@@ -52,7 +113,7 @@
        return {
            loading: false,
            queryParams: {
                pageNum: 1,
                pageIndex: 1,
                pageSize: 10,
                name: null,
                type: null,
@@ -60,15 +121,35 @@
            // 是否为租户
            isTenant: false,
            templateList: [
                {
                    name: 'test',
                },
            ],
            // 总条数
            total: 0,
            title: '',
            // 是否显示弹出层
            open: false,
            modelFrom: {
                name: '',
                type: '',
                path: '',
                bak: '',
                ids: '',
            },
            selectPath: null,
            selectMappers: null,
            //表单验证
            rules: {
                name: [
                    {
                        required: true,
                        message: '模型名称不能为空',
                        trigger: 'blur',
                    },
                ],
                type: [{ required: true, message: '请选择模型类别', trigger: 'change' }],
                path: [{ required: true, message: '请选择需要上传的模型文件', trigger: 'change' }],
            },
            multipleSelection: []
        };
    },
    created() {
@@ -82,10 +163,178 @@
            this.getList();
        },
        getList() {
            // listModelLibrary(this.queryParams).then((response) => {
            // }) ;
        getSelectPath() {
            modelSelectPath().then((response) => {
                if (response.code == 200 && response.msg) {
                    this.selectPath = response.msg;
                } else {
                    this.$message('模型上传路径获取失败: ' + response.msg);
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //查询
        setQueryParamsQuery() {
            this.queryParams.pageIndex = 1;
            this.getList();
        },
        // 重置
        setQueryParamsRest() {
            this.queryParams = {
                pageIndex: 1,
                pageSize: 10,
                name: null,
                type: null,
            }
            this.getList();
        },
        // 搜索
        getList() {
            if (!this.selectPath) {
                this.getSelectPath();
            }
            modelSelectMetasByPageAndCount(this.queryParams).then((response) => {
                if (response.code == 200) {
                    this.total = response.data.length;
                    this.templateList = response.data;
                } else {
                    this.$message('模型数据列表获取失败。');
                }
            })
        },
        setModelLibraryRemove() {
            if (this.multipleSelection.length <= 0) {
                return this.$message('请选择要删除的数据');
            }
            const std = [];
            this.multipleSelection.filter((response) => {
                std.push(response.id);
            })
            modelDeleteMetas({ ids: std.toString() }).then((response) => {
                if (response.code == 200) {
                    this.$message({
                        message: '三维模型删除成功',
                        type: 'success'
                    });
                    this.setQueryParamsQuery();
                } else {
                    this.$message('三维模型删除失败');
                }
            })
        },
        setModelLibraryExport(row){
           modelDownloadFile({guid:row.guid}).then((response)=>{
           })
        },
        // 添加三维模型
        setModelLibraryAdd() {
            this.setFromRest();
            this.open = true;
            this.title = '添加三维模型';
        },
        setModelLibraryCannel() {
            this.open = false;
            this.title = '';
            this.setFromRest();
            document.getElementById('fileInput').value = "";
        },
        setSsubmitForm(formName) {
            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) => {
                if (response.code == 200) {
                    this.$message({
                        message: '数据上传成功',
                        type: 'success'
                    });
                    this.setModelSelectMappers()
                } else {
                    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) {
                return configTools.formatterTime(cellValue);
            } else {
                return null
            }
        }
    },
};
</script>
@@ -98,6 +347,7 @@
    position: absolute;
    display: flex;
    flex-direction: column;
    .modelLibiraryContent {
        margin: 6px 0px;
        flex: 1;
@@ -106,6 +356,7 @@
        ::v-deep .el-card__body {
            padding: 15px !important;
        }
        .modelLibiraryTable {
            width: calc(100% - 30px);
            height: calc(100% - 36px);