diff --git a/templates/repo/modelmanage/index.tmpl b/templates/repo/modelmanage/index.tmpl
index 0b0f2eb42..e69de29bb 100644
--- a/templates/repo/modelmanage/index.tmpl
+++ b/templates/repo/modelmanage/index.tmpl
@@ -1,373 +0,0 @@
-<!-- 头部导航栏 -->
-{{template "base/head" .}}
-<style>
-.width70{
-    width: 70% !important;
-}
-.width83{
-    width: 83% !important;
-}
-.content-padding{
-    padding: 40px !important;
-}
-</style>
-<!-- 弹窗 -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
-{{$repository := .Repository.ID}}
-<!-- 提示框 -->
-<div class="alert"></div>
-
-<div class="repository release dataset-list view">
-    {{template "repo/header" .}}
-    <!-- 列表容器 -->
-    <div class="ui container">
-        {{template "base/alert" .}}
-        <div class="ui two column stackable grid ">
-            <div class="column"></div>
-            <div class="column right aligned">
-                {{if .Permission.CanWrite $.UnitTypeCloudBrain}}       
-                <a class="ui green button" onclick="showcreate(this)">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}}
-            </div>
-        </div>
-
-        <!-- 中下列表展示区 -->
-        <div class="ui grid">
-            <div class="row">
-                <div class="ui sixteen wide column">
-                    <!-- 任务展示 -->
-                    <div class="dataset list">
-                        <!-- 表头 -->
-                        <div class="ui grid stackable" style="background: #f0f0f0;;">
-                            <div class="row">
-                                <div class="three wide column padding0">
-                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.model_name"}}</span>
-                                </div>
-                                <div class="one wide column text center padding0">
-                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version"}}</span>
-                                </div>
-                                <div class="one wide column text center padding0" style="width: 7.25%!important;">
-                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version_nums"}}</span>
-                                </div>
-                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
-                                        <span>{{$.i18n.Tr "repo.modelarts.model_size"}}</span>
-                                </div>
-                                <div class="two wide column text center padding0" style="width: 8.5%!important;">
-                                        <span>{{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</span>
-                                </div>
-                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
-                                        <span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> 
-                                </div>
-                                <div class="two wide column text center padding0">
-                                        <span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>
-                                </div>
-                                <div class="one wide column text center padding0">
-                                    <span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> 
-                                </div>
-                                <div class="two wide column text center padding0" style="width: 17.5%!important;">
-                                    <span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>
-                                </div>
-
-                            </div>
-                        
-                        </div>                     
-                    
-                        <div class="ui grid stackable item">
-                            <div class="row">
-                            
-                                <!-- 任务名 -->
-                                <div class="three wide column padding0">
-                                    <a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 12px;">
-                                        <span class="fitted" style="vertical-align: middle;">{{svg "octicon-tasklist" 16}}</span>
-                                        <span class="fitted" style="width: 90%;vertical-align: middle;margin-left: 0.4rem;">Model-abcd</span>
-                                    </a>
-                                </div>
-                                <!-- 当前版本 -->
-                                <div class="one wide column text center padding0">   
-                                        <span>0.0.3</span>                                  
-                                </div>
-                                <!-- 版本数量 -->
-                                <div class="one wide column text center padding0" style="width: 7.25%!important;">   
-                                    <span>20</span>                                  
-                                </div>
-                                 <!-- 模型大小 -->
-                                 <div class="two wide column padding0 text center"  style="width: 11.5%!important;">
-                                    <span>20.28MB</span>   
-                                </div>
-                                <!-- AI引擎 -->
-                                <div class="two wide column padding0 text center" style="width: 8.5%!important;">
-                                    <span>Mindspore</span>
-                                </div>
-                                <!-- 计算资源 -->
-                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
-                                    <span style="font-size: 12px;">CPU</span> 
-                                </div>
-                                <!-- 创建时间 -->
-                                <div class="two wide column text center padding0">
-                                    <span style="font-size: 12px;">2021/09/20 12:06:13</span> 
-                                </div>
-                                <!-- 创建者 -->
-                                <div class="one wide column text center padding0">
-                                    {{if .User.Name}}
-                                        <a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>
-                                    {{else}}
-                                        <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
-                                    {{end}}
-                                </div>
-
-                                <div class="two wide column text center padding0" style="width: 17.5%!important;">
-                                    <div style="display: flex;justify-content: space-between;">
-                                        <a>创建新版本</a>
-                                        <a>下载</a>
-                                        <a onclick="assertDelete(this)">删除</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                    </div>
-
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-</div>
-
-<!-- div full height-->
-</div>
-
-
-
-<!-- 确认模态框 -->
-<div id="deletemodel">
-    <div class="ui basic modal first">
-        <div class="ui icon header">
-            <i class="trash icon"></i> 删除任务
-        </div>
-
-        <div class="content">
-            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
-        </div>
-        <div class="actions">
-            <div class="ui red basic inverted cancel button">
-                <i class="remove icon"></i> 取消操作
-            </div>
-            <div class="ui green basic inverted ok button">
-                <i class="checkmark icon"></i> 确定操作
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="newmodel">
-    <div class="ui modal second">
-        <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
-            <h4>导入新模型</h4>
-        </div>
-        <div class="content content-padding">
-            <form class="ui form" action="{{.Link}}" method="post">
-                <div class="two inline fields ">   
-                    <div class="required ten wide field">
-                        <label style="margin-left: -23px;">选择训练任务</label>
-                        <!-- <select class="ui dropdown search width83" name="model_name">
-                            <option name="model_name" value="1">1</option>
-                            <option name="model_version" value="11">11</option>
-                        </select> -->
-                        <div class="ui dropdown selection search width83">
-                            <input type="hidden" name="model_name">
-                            <div class="default text">Select Gender</div>
-                            <i class="dropdown icon"></i>
-                            <div class="menu">
-                                <div class="item" data-value="male">Male</div>
-                                <div class="item" data-value="female">Female</div>
-                            </div>
-                        </div>
-                        
-                    </div>
-                    <div class="required six widde field">
-                        <label>版本</label>
-                        <div class="ui dropdown selection search width70">
-                            <input type="hidden" name="model_version">
-                            <div class="default text">Select Gender</div>
-                            <i class="dropdown icon"></i>
-                            <div class="menu">
-                                <div class="item" data-value="male">Male</div>
-                                <div class="item" data-value="female">Female</div>
-                            </div>
-                        </div>
-                        <!-- <select class="ui dropdown search width70" name="model_version">
-                             <option name="model_version" value="1">1</option>
-                             <option name="model_version" value="11">11</option>
-                        </select> -->
-                    </div>
-                </div>
-
-                <div class="required inline field">
-                    <label>模型名称</label>
-                    <input style="width: 45%;" name="job_name" required maxlength="255">
-                </div>
-                <div class="required inline field">
-                    <label>模型版本</label>
-                    <input style="width: 45%;" name="job_name" required maxlength="255">
-                </div>
-                <div class="required inline field">
-                    <label>模型标签</label>
-                    <input style="width: 83%;" name="job_name" required maxlength="255">
-                </div>
-                <div class="required inline field">
-                    <label for="description">模型描述</label>
-                    <textarea style="width: 83%;" id="description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 256)"></textarea>
-                </div>
-
-                <div class="inline field" style="margin-left: 75px;">
-                    <button class="ui create_train_job green button" style="position: absolute;">
-                    {{.i18n.Tr "repo.cloudbrain.new"}}
-                    </button>
-                </div>
-            </form>
-            <div class="actions" style="display: inline-block;margin-left: 180px;">
-                <button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
-            </div>
-        </div>
-        
-    
-</div>
-
-
-{{template "base/footer" .}}
-
-<script>
-    
-    let url_href = window.location.pathname.split('create')[0]
-    // $(".ui.button.cancel").attr('href',url_href)
-    function showcreate(obj){
-        
-        $('.ui.modal.second')
-        .modal({
-            centered: false,
-            onShow:function(){
-                $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
-            },
-            onHide:function(){
-                $('.ui.dimmer').css({"background-color":""})
-            }
-        })
-        .modal('show')
-        // $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
-    }
-    
-    // 删除时用户确认
-    function assertDelete(obj) {
-        if (obj.style.color == "rgb(204, 204, 204)") {
-            return
-        } else {
-            var delId = obj.parentNode.id
-            flag = 1;
-            $('.ui.basic.modal.first')
-                .modal({
-                    onDeny: function() {
-                        flag = false
-                    },
-                    onApprove: function() {
-                        document.getElementById(delId).submit()
-                        flag = true
-                    },
-                    onHidden: function() {
-                        if (flag == false) {
-                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
-                        }
-                    }
-                })
-                .modal('show')
-        }
-    }
-    
-
-    function loadJobDuration() {
-        $(".job-status").each((index, job) => {
-            const jobID = job.dataset.jobid;
-            const repoPath = job.dataset.repopath;
-            const versionname = job.dataset.version
-            $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
-                    console.log(data)
-                    const duration = data.JobDuration
-                    const jobID = data.JobID
-                    $('#duration-'+jobID).text(duration)
-            })
-            
-        })
-    }
-
-    function loadTrainList(){
-
-        let repolink =  {{.RepoLink}}
-        let repoId = {{$repository}}
-        $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {
-            const train_list = data.filter((lists)=>{
-                return  lists.Status==="COMPLETED"
-            }) 
-            console.log(data)
-            console.log(train_list)
-            
-        })
-    }
-    $(document).ready(loadTrainList)
-    // 获取弹窗
-    var modal = document.getElementById('imageModal');
-
-    // 打开弹窗的按钮对象
-    var btns = document.getElementsByClassName("imageBtn");
-
-    // 获取 <span> 元素，用于关闭弹窗
-    var spans = document.getElementsByClassName('close');
-
-    // 点击按钮打开弹窗
-    for (i = 0; i < btns.length; i++) {
-        btns[i].onclick = function() {
-            modal.style.display = "block";
-        }
-    }
-
-    // 点击 <span> (x), 关闭弹窗
-    for (i = 0; i < spans.length; i++) {
-        spans[i].onclick = function() {
-            modal.style.display = "none";
-        }
-    }
-
-    // 在用户点击其他地方时，关闭弹窗
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-    }
-
-    // 显示弹窗，弹出相应的信息
-    function showmask() {
-        $('#imageModal').css('display', 'none')
-        $('#mask').css('display', 'block')
-
-        $("iframe[name=iframeContent]").on("load", function() {　　
-            var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
-            var json1 = JSON.parse(responseText)
-            $('#mask').css('display', 'none')
-            parent.location.href
-
-            if (json1.result_code === "0") {
-                $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
-            } else {
-                $('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
-            }
-        })
-    }
-</script>
-
diff --git a/web_src/js/components/Model.vue b/web_src/js/components/Model.vue
new file mode 100644
index 000000000..ae71253d6
--- /dev/null
+++ b/web_src/js/components/Model.vue
@@ -0,0 +1,305 @@
+<template>
+<div>
+    <div class="ui container" id="header">
+                <el-row style="margin-top:15px;">
+                    <el-table
+                        :data="tableData1"
+                        style="min-width: 100%"
+                        row-key="id"
+                        lazy
+                        :load="load"
+                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+                        :header-cell-style="tableHeaderStyle"
+                    >
+                        <el-table-column
+                            prop="name"
+                            label="模型名称"
+                            align="left"
+                            min-width="18%"
+                            >
+                            <template slot-scope="scope">
+                                <a class="text-over" style="cursor:default;color:#426290" :title="scope.row.name">{{ scope.row.name }}</a>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="version"
+                            label="版本"
+                            align="center"
+                            min-width="6.5%"
+                            >
+                            <template slot-scope="scope">
+                                <span class="text-over" :title="scope.row.version">{{ scope.row.version}}</span>
+                            </template>
+                        </el-table-column>
+                        
+                        <el-table-column
+                            prop="version_count"
+                            label="版本数"
+                            align="center"
+                            min-width="7.5%"
+                            >
+                            <template slot-scope="scope">
+                                <span class="text-over" :title="scope.row.version_count">{{ scope.row.version_count}}</span>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column
+                            prop="modelsize"
+                            label="模型大小"
+                            align="center"
+                            min-width="10.5%"
+                            >
+                            <template slot-scope="scope">
+                                <span class="text-over" :title="scope.row.modelsize">{{ scope.row.modelsize}}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="aiengine"
+                            label="AI引擎"
+                            align="center"
+                            min-width="8.5%"
+                            >
+                            <template slot-scope="scope">
+                                <span class="text-over" :title="scope.row.aiengine">{{ scope.row.aiengine}}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="computesource"
+                            label="计算资源"
+                            align="center"
+                            min-width="10.5%"
+                            >
+                            <template slot-scope="scope">
+                                <span class="text-over" :title="scope.row.computesource">{{ scope.row.computesource}}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="createtime"
+                            label="创建时间"
+                            align="center"
+                            min-width="13.75%"
+                            >
+                            <template slot-scope="scope">
+                                {{scope.row.createtime}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="creator"
+                            label="创建者"
+                            align="center"
+                            min-width="6.75%"
+                            >
+                            <template slot-scope="scope">
+                                {{scope.row.creator}}
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column label="操作" min-width="18%" align="center">
+                            <template slot-scope="scope">
+                                <a>创建新版本</a>
+                                <a>下载</a>
+                                <a>删除</a>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-row>
+                <div class="ui container" style="margin-top:50px;text-align:center">
+                        <el-pagination
+                            background
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                            :current-page="currentPage"
+                            :page-size="pageSize"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            :total="totalNum">
+                        </el-pagination>
+                </div>
+  </div>
+</div>
+
+  
+</template>
+
+<script>
+
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+
+
+
+
+export default {
+  components: {
+    
+  },
+  data() {
+    return {
+      currentPage:1,
+      pageSize:10,
+      totalNum:0,
+      params:{page:0,pageSize:10},
+      tableData: [],
+      loading:false,
+      tableData1:[{id:27,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz',hasChildren: true},
+      {id:28,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
+      {id:29,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
+      {id:30,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'}],
+      currentPage1:1,
+      pageSize1:10,
+      totalNum1:0,
+      params1:{page:1,size:10,name:''},
+      loading1:false
+    };
+  },
+  methods: {
+    load(tree, treeNode, resolve) {
+        setTimeout(() => {
+          resolve([
+          {id:27-1,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
+          {id:27-2,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
+          ])
+        }, 1000)
+    },
+    tableHeaderStyle({row,column,rowIndex,columnIndex}){
+        
+        if(rowIndex===0){
+            return 'background:#f5f5f6;color:#606266'
+        }
+        
+    },
+    handleSizeChange(val){
+        this.params.size = val
+        this.getImageList()
+
+    },
+    handleCurrentChange(val){
+        console.log(val)
+        this.params.page = val
+        this.getImageList()
+
+    },
+    getModelList(){
+        this.loading = true
+        
+        this.$axios.get(location.href+'_api',{
+            params:this.params
+        }).then((res)=>{
+            console.log("---res----",res)
+            this.totalNum = res.data.count
+            this.tableData = res.data.rows
+            this.loading = false
+        })
+    },
+ 
+  },
+  filters:{
+      clearP(value){
+          console.log("sorce value",value)
+          if(!value) return ''
+          const reg = /\<\/?p\>/g;
+          value = value.replace(reg,'')
+          console.log("repalace:",value)
+          return value
+
+      },
+      transformTimestamp(timestamp){
+                console.log("timestamp",timestamp)
+                let a = new Date(timestamp).getTime();
+                const date = new Date(a);
+                const Y = date.getFullYear() + '-';
+                const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+                const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
+                const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
+                const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;
+                const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 
+                const dateString = Y + M + D + h + m + s;
+                // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
+                return dateString;
+            },
+    
+       
+  },
+  mounted() {
+    this.getModelList()
+  }
+
+};
+</script>
+
+<style scoped>
+.header-wrapper {
+    background-color: #f5f5f6;
+    padding-top: 15px;
+}
+.image_text{
+    padding:25px 0 55px 0 ;
+}
+#header{
+    position: relative;
+    top:-40px;
+}
+.el-dropdown-menu__item--divided{
+    border-top: 1px solid blue;
+}
+.el-table thead{
+    background-color: #f5f5f6;
+}
+/deep/ .el-tabs__item:hover{
+    color: #000;
+    font-weight: 500;
+    
+}
+/deep/ .el-tabs__item.is-active {
+    color: #000;
+    font-weight: 500;
+}
+/deep/ .el-tabs__active-bar{
+    background-color:#000
+}
+
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #5bb973;
+  color: #FFF;
+}
+/deep/ .el-pagination.is-background .el-pager li.active {
+  color: #fff;
+  cursor: default;
+}
+/deep/ .el-pagination.is-background .el-pager li:hover {
+  color: #5bb973;
+}
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #5bb973;
+}
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
+  background-color: #5bb973;
+  color: #FFF;
+}
+
+/deep/ .el-pager li.active {
+  color: #08C0B9;
+  cursor: default;
+}
+/deep/ .el-pagination .el-pager li:hover {
+  color: #08C0B9;
+}
+/deep/ .el-pagination .el-pager li:not(.disabled):hover {
+  color: #08C0B9;
+}
+/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
+    background-color: #5bb973;
+    color: #000;
+} */
+/* /deep/ .el-pager li:hover{
+    color: #000;
+} */
+#success{
+    background-color: #5bb973;
+    color: white;
+}
+.text-over{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+</style>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1b718ed53..0f60504de 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -39,6 +39,7 @@ import Images from './components/Images.vue';
 import EditTopics from './components/EditTopics.vue';
 import DataAnalysis from './components/DataAnalysis.vue'
 import Contributors from './components/Contributors.vue'
+import Model from './components/Model.vue';
 
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
@@ -2916,11 +2917,12 @@ $(document).ready(async () => {
   initVueEditTopic();
   initVueContributors();
   initVueImages();
+  initVueModel();
   initVueDataAnalysis();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
-  // initTopicbar();
+  // initTopicbar();vim 
   // closeTopicbar();
   initU2FAuth();
   initU2FRegister();
@@ -3646,7 +3648,7 @@ function initVueContributors() {
 
 function initVueImages() {
   const el = document.getElementById('images');
-  console.log("el",el)
+  
   
   if (!el) {
     return;
@@ -3658,6 +3660,20 @@ function initVueImages() {
     render: h => h(Images)
   });
 }
+function initVueModel() {
+  const el = document.getElementById('model_list');
+  
+  
+  if (!el) {
+    return;
+  }
+
+  new Vue({
+    el: el,
+    
+    render: h => h(Model)
+  });
+}
 function initVueDataAnalysis() {
   const el = document.getElementById('data_analysis');
   console.log("el",el)