recom-gorse/web/src/components/menus/GraphImport.vue

<template>
  <div>
    <div class="menu-title">
      知识图谱导入
    </div>
    <div class="menu-content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="本体导入" name="first">
          <el-row :gutter="5" style="margin: 20px 0">
            <el-col :span="7">
              <div>
                <label>请选择本体：</label>
                <el-select v-model="ontologyId" placeholder="请选择本体">
                  <el-option v-for="item in ontologyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="10">
              <div>
                <label>请选择文件：</label>
                <el-input v-model="fileName" readonly style="width: 300px;margin-right: 20px" disabled></el-input>
                <el-upload
                        ref="upload" style="display: inline-block"
                        :auto-upload="false"
                        action="#" accept=".xls, .xlsx"
                        :on-change="handleFileChange"
                        :limit="2"
                        :show-file-list="false">
                  <el-button type="primary">上传文件</el-button>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="float:right;" @click="queryData" :loading="btLoading">执行</el-button>
            </el-col>
          </el-row>
          <div><a :href="path+'template.xlsx'" download="template.xlsx" style="text-decoration:underline;color: #0D6DFF">下载模板</a></div>
          <div class="result" style="width: 100%;margin-top: 20px;color: #5c5c5c;" v-if="showFlag && activeName == 'first'">成功导入</div>
          <div  style="margin-top: 20px;height:20px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px" v-if="showFlag && activeName == 'first'">
            <el-descriptions title="" :column="3" >
              <el-descriptions-item label="概念数量">{{resultCmd.gncount.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
              <el-descriptions-item label="对象属性数量">{{resultCmd.gxscount.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
              <el-descriptions-item label="值属性数量">{{resultCmd.zsxcount.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图谱数据导入" name="second">
          <el-row :gutter="5" style="margin: 20px 0">
            <el-col :span="7">
              <div>
                <label>请选择图谱：</label>
                <el-select v-model="spaceName" placeholder="请选择图谱" style="width: calc(100% - 204px)">
                  <el-option v-for="item in spaceList" :label="item.comment" :value="item.name"></el-option>
                </el-select>
                <!--<el-button type="primary" style="margin-left: 20px;" @click="addCmd">新建图谱</el-button>-->
              </div>
            </el-col>
            <el-col :span="10">
              <div >
                <label>请选择文件：</label>
                <el-input v-model="fileName" readonly style="margin-right: 20px;width: calc(100% - 204px)" disabled></el-input>
                <el-upload
                        ref="upload" style="display: inline-block"
                        :auto-upload="false"
                        action="#" accept=".zip"
                        :on-change="handleFileChange"
                        :limit="2"
                        :show-file-list="false">
                  <el-button type="primary">上传文件</el-button>
                </el-upload>
              </div>
              <div style="color: red;margin-top: 10px">* zip文件必须包含vertex.json、edge.json</div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="float:right;" @click="startSpace">执行</el-button>
            </el-col>
          </el-row>
          <div><a :href="path+'图谱数据.zip'" download="图谱数据.zip" style="text-decoration:underline;color: #0D6DFF">下载模板</a></div>
          <div class="result" style="width: 100%;margin-top: 20px;color: #5c5c5c;" v-if="showFlag && activeName == 'second'">{{message}}</div>
          <div  style="margin-top: 20px;" v-if="showFlag && activeName == 'second'">
            <el-table :data="resultCmd1" border style="width: 100%" >
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="gf_name" label="文件名"></el-table-column>
              <el-table-column prop="flag" label="状态">
                <template slot-scope="scope">
                  <label :style="{color:scope.row.flag?'#67c23a':'#f56c6c'}">{{scope.row.flag?"成功":"失败"}}</label>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="新建图谱" :visible.sync="cmdDialogVisible" width="40%">
      <el-steps :active="active" finish-status="success" style="margin-bottom: 20px">
        <el-step title="新建图谱"></el-step>
        <el-step title="选择本体"></el-step>
      </el-steps>
      <el-form ref="cmd" label-width="120px" :model="cmd" v-if="active == 0">
        <el-form-item label="图谱名称：">
          <el-input v-model="cmd.name" style="width: 100%" ></el-input>
        </el-form-item>
        <el-form-item label="图谱描述：">
          <el-input v-model="cmd.comment" style="width: 100%" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="active == 0">
        <el-button type="primary" @click="createSpace">下一步</el-button>
      </span>
      <el-form ref="cmd" label-width="130px" :model="cmd" v-if="active == 1">
        <el-form-item label="选择本体：">
          <el-select v-model="cmd.ontologyId" placeholder="请选择本体" style="width: 100%">
            <el-option v-for="item in ontologyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="active == 1">
        <el-button @click="cmdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitModify" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request,{getFileUrl} from '@/utils/request';

var _this;
export default {
  name: "codeWarehouse",
  data() {
    return {
        activeName: 'first',
        ontologyId:"",
        fileName:"",
        file:"",
        ontologyList:[],
        resultCmd:{
            gncount:"",
            gxscount:"",
            zsxcount:""
        },
        resultCmd1:{},
        showFlag:false,
        cmd:{},
        cmdDialogVisible:false,
        spaceList:[],
        active:0,
        spaceName:"",
        loading:false,
        path:getFileUrl(),
        message:"",
        btLoading:false
    }
  },
  mounted() {
    _this = this;
    _this.queryOntology();
    _this.querySpaceList();
  },
  methods: {
      handleClick(tab, event) {
          _this.fileName = "";
          _this.file = "";
          _this.resultCmd = {};
          _this.showFlag = false;
          _this.btLoading = false;
      },
      handleFileChange(file) {
          this.$refs.upload.clearFiles();
          _this.fileName = file.raw.name;
          _this.file = file.raw;
      },
      queryOntology() {
          request({
              url: `/ontology/query_list`,
              method: 'post',
              data: {EQI_sourceType: 1}
          }).then(res => {
              _this.ontologyList = res.data;
          });
      },
      querySpaceList() {
          request({
              url: '/nebula_operate/showspace',
              method: 'get'
          }).then(res => {
              _this.spaceList = res.data;
          });
      },
      queryData() {
          _this.resultCmd = {};
          _this.showFlag = false;

          if(!_this.ontologyId){
              _this.$message.warning("请选择本体");
              return false;
          }
          if(!_this.file){
              _this.$message.warning("请选择文件");
              return false;
          }

          _this.btLoading = true;
          _this.$message.info("数据在执行中。。");
          let formData = new FormData();
          formData.append("file", _this.file);
          formData.append("ontologyId", _this.ontologyId);
          request({
              url: '/nebula_model/importmodel/'+_this.ontologyId,
              method: 'post',
              data: formData
          }).then(res => {
              _this.resultCmd = res.data;
              _this.showFlag = true;
              _this.btLoading = false;
          });
      },
      addCmd(){
          _this.active = 0;
          _this.cmd = {
              ontologyId:"",
              name:"",
              comment:""
          }
          _this.loading = false;
          _this.cmdDialogVisible = true;
      },
      createSpace(){
          if(!_this.cmd.name){
              _this.$message.warning("请输入图谱名称");
              return false;
          }
          if(!_this.cmd.comment){
              _this.$message.warning("请输入图谱描述");
              return false;
          }

          _this.active = 1;
      },
      submitModify(){
          if(!_this.cmd.ontologyId){
              _this.$message.warning("请选择本体");
              return false;
          }

          _this.loading = true;
          this.$message({
              message: '正在初始化图空间，请等待...',
              type:"info",
              duration:20000
          });
          request({
              url: '/nebula_operate/createspace',
              method: 'post',
              data: {name:_this.cmd.name,comment:_this.cmd.comment}
          }).then(res => {
              var timer = setTimeout(function(){
                  request({
                      url: '/nebula_model/initgraphdatabase/'+_this.cmd.ontologyId+'/'+_this.cmd.name,
                      method: 'get',
                      data: {}
                  }).then(res => {
                      _this.$message.success("新建图谱成功");
                      clearTimeout(timer);
                      _this.loading = false;
                      _this.cmdDialogVisible = false;
                      _this.querySpaceList();
                  });
              },20000)
          });
      },
      startSpace(){
          _this.resultCmd = {};
          _this.showFlag = false;

          if(!_this.spaceName){
              _this.$message.warning("请选择图谱");
              return false;
          }
          if(!_this.file){
              _this.$message.warning("请选择文件");
              return false;
          }

          request({
              url: '/graph-task/query_list/'+_this.spaceName,
              method: 'get',
              data: {}
          }).then(res => {
              if(res.data.length <= 0){
                  let formData = new FormData();
                  formData.append("file", _this.file);
                  request({
                      url: '/nebula_graph_import/uploadfile/'+_this.spaceName,
                      method: 'put',
                      data: formData
                  }).then(res => {
                      _this.resultCmd1 = res.data;
                      var flag = true;
                      res.data.forEach(item => {
                          if(!item.flag){
                              _this.message = "导入失败";
                              flag = false;
                          }
                      })
                      if(flag){
                          _this.message = "导入成功";
                      }
                      _this.showFlag = true;
                  });
              }else{
                  _this.$message.warning("该图谱在执行中。。");
              }
          });
      }
  }
}
</script>

<style lang="scss">
  .upload-btn {
    display: inline-block;
    margin-left: 20px;
  }
</style>