front
/
knowledgeMap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识图谱维护管理</title>
  <link rel="stylesheet" href="/elementUI/2.7.2/theme-chalk/index.css">
  </script>
  <style>

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-container v-cloak>
      <el-header v-if="!simpleUpdataPage">
        <div class="logo" contenteditable="false">知识图谱维护管理</div>
        <div class="time">{{nowDate}}</div>
        <div class="user-area">
          <span class="icon-avatar"></span>
          <span class="user-identity">{{username}}</span>
          <span class="icon-dropdown-down"></span>
        </div>
      </el-header>
      <el-container>
        <!-- background-color="#D5E9FE" -->
        <el-aside :width="isCollapse?'69px':'268px'" v-if="!simpleUpdataPage">
          <!-- <div class="logo" contenteditable="false">知识图谱维护管理</div> -->
          <div :class="isCollapse? 'collapse-sign collapse-sign-open': 'collapse-sign collapse-sign-close'"
            @click="isCollapse=!isCollapse"></div>
          <el-menu :default-active="currentPage.id" :collapse-transition="false" :collapse="isCollapse"
            background-color="#e5f0fb" text-color="#000000" active-text-color="#0088F4">
            <el-submenu v-for="menu in menuData" :key="menu.id" :index="menu.id">
              <template slot="title">
                <i class="menu-label"><img :src="menu.label" alt="图标"></i>
                <span class="menu-title-text">{{menu.title}}</span>
              </template>
              <el-menu-item v-for="i in menu.children" @click="menuSelect(i)" class="submenu" :key="i.id" :index="i.id">
                <span class="submenu-text">{{i.title}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="tags" v-if="!simpleUpdataPage">
            <el-tabs v-model="editableTabsValue" @tab-click="tabClick" type="card" :editable="false">
              <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :closable="false" :label="item.title"
                :name="item.name">
                <span slot="label">
                  {{item.title}}
                  <i :class="item.name==currentPage.id?'icon-close-blue':'icon-close-gray'"
                    @click.stop="removeTab(index)"></i>
                </span>
              </el-tab-pane>
            </el-tabs>
            <div class="padding"></div>
          </div>
          <div class="content">
            <iframe ref="iframe" v-show="currentPage.url" :src="currentPage.url" frameborder="0"></iframe>
            <!-- <el-empty v-show="!currentPage.url" description="这里什么都没有"></el-empty> -->
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- 对话框 -->
    <el-dialog :title="dialogData.title" :visible.sync="dialogVisible" ref="dialogRef"
      :width="dialogData.width?dialogData.width:'686px'" height="491px" :center="false" :close-on-click-modal="false">
      <template #default>
        <div v-if="dialogData.opType=='addEntity'" class="addEntity">
          <div class="tools">
            <span>导出模板</span>
            <span>导入</span>
            <span @click="addEntityAddRow" class="add-row add-row"><span class="icon-add"></span>新增行</span>
          </div>
          <div class="content">
            <el-table border :data="tableData" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="name" label="实体名称">
                <template slot-scope="scope">
                  <el-input type="text" v-model="tableData[scope.$index].name" placeholder="请输入实体名称">
                </template>
              </el-table-column>
              <el-table-column prop="label" label="实体类型" width="152">
                <template slot-scope="scope">
                  <el-select v-model="tableData[scope.$index].label" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" type="text" size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div v-if="dialogData.opType=='modifyEntityName-dropdown'" class="modifyEntityName-dropdown">
          <div class="tools">
            <el-select v-model="selectedName" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="searchInp" placeholder="请输入实体名称"></el-input>
            <el-button type="primary" @click="getNode">搜索</el-button>
          </div>
          <div class="content">
            <el-table border :data="nodeTable" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="oldName" label="原实体名称"></el-table-column>
              <el-table-column prop="name" label="实体名称" width="152">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.name" placeholder="请输入实体名称">
                </template>
              </el-table-column>
              <el-table-column prop="type" label="实体类型"></el-table-column>
              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="updateEntityName([scope.row],scope.$index)" type="text"
                    size="small">
                    确认
                  </el-button>
                  <el-button @click.native.prevent="deleteRow(scope.$index,nodeTable)" type="text" size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 下拉框删除实体 -->
        <div v-if="dialogData.opType=='deleteEntity-dropdown' && nodeTable" class="modifyEntityName-dropdown">
          <div class="tools">
            <el-select v-model="selectedName" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model.trim="searchInp" placeholder="请输入实体名称"></el-input>
            <el-button type="primary" @click="getNode">搜索</el-button>
          </div>
          <div class="content">
            <el-table border :data="nodeTable" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="oldName" label="实体名称"></el-table-column>
              <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteEntityFunc([scope.row.nodeId],scope.$index)" type="text"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 下拉新增关系 -->
        <div v-if="dialogData.opType=='addRelationship-dropdown'" class="addEntity">
          <div class="tools">
            <span>导出模板</span>
            <span>导入</span>
            <span @click="addRelationshipDropdownAddRow" class="add-row"><span class="icon-add"></span>新增行</span>
          </div>
          <div class="content">
            <el-table border :data="addRelationshipDropdown" style="width: 100%" height="250">
              <el-table-column type="index" label="序号" width="70"></el-table-column>
              <el-table-column label="起始实体类型">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.startLabel" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="startName" label="起始实体名称" width="150">
                <template slot-scope="scope">
                  <el-autocomplete v-model.trim="scope.row.startName"
                    :fetch-suggestions="(queryString,cb)=>{querySearchAsync(queryString,cb,scope.row.startLabel)}"
                    @select="handleSelect($event, scope.row,'start')" placeholder="请选择起始实体"
                    :popper-append-to-body="false"></el-autocomplete>
                </template>
              </el-table-column>
              <el-table-column label="目标实体类型">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.endLabel" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="endName" label="目标实体名称" width="150">
                <template slot-scope="scope">
                  <el-autocomplete v-model.trim="scope.row.endName" placeholder="请选择起目标实体"
                    :fetch-suggestions="((queryString,cb)=>{querySearchAsync(queryString,cb,scope.row.endLabel)})"
                    @select="handleSelect($event, scope.row,'end')"></el-autocomplete>
                </template>
              </el-table-column>
              <el-table-column prop="relationshipType" width="170" label="关系名称">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.relationshipType" placeholder="请输入关系（边）名称">
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,addRelationshipDropdown)" type="text"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-if="dialogData.opType=='modifyRelationshipName-dropdown'" class="modifyEntityName-dropdown">
          <div class="tools">
            <el-input v-model.trim="searchRelationshipName" placeholder="请输入关系名称"></el-input>
            <el-button type="primary" @click="findRelationshipType">搜索</el-button>
          </div>
          <div class="content">
            <el-table border :data="modifyRelationshipNameDropdown" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="oldRelationshipType" label="原关系名称"></el-table-column>
              <el-table-column prop="newRelationshipType" label="修改为">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.newRelationshipType" placeholder="请输入关系名称">
                </template>
              </el-table-column>
              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="updateRelationshipType(modifyRelationshipNameDropdown,scope.$index)"
                    type="text" size="small">
                    确认
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 下拉属性新增 -->
        <div v-if="dialogData.opType=='addProperty-dropdown'" class="modifyEntityName-dropdown">
          <div class="tools-2">
            <div class="tools-2-up">
              <div class="left">
                <span>实体类型：</span>
                <el-select v-model="addPropertyDropdown.label" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <span style="margin-left: 10px;">实体名称：</span>
                <!-- <el-autocomplete v-model.trim="addPropertyDropdown.name"
                  :fetch-suggestions="((queryString,cb)=>{querySearchAsync(queryString,cb,addPropertyDropdown.label)})"
                  @select="handleSelect($event,addPropertyDropdown,'addProperty-dropdown')"
                  placeholder="请输入实体名称"></el-autocomplete> -->

                <el-select class="select-entity-name" v-model.trim="addPropertyDropdown.nodeId" filterable remote
                  placeholder="请输入实体名称" @change="addPropertyDropdownValueChange"
                  :remote-method="((query)=>addPropertyDropdownRemoteMethod(query,addPropertyDropdown.label))"
                  :loading="false">
                  <el-option v-for="item in addPropertyDropdownOptions" :key="item.nodeId" :label="item.name"
                    :value="item.nodeId">
                  </el-option>
                </el-select>

              </div>
              <div class="right">
                <span class="blue">导出模板</span>
                <span class="blue">导出</span>
                <span @click="addPropertyDropdownAddRow()" class="blue add-row"><span class="icon-add"></span>新增行</span>
              </div>
            </div>
            <div class="tools-2-down"> <span>请添加实体：<span class="blue">{{addPropertyDropdown.name}}</span> 相关的属性值</span>
            </div>
          </div>
          <div class="content">
            <el-table border :data="addPropertyDropdown.property" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="key" label="属性名称">

                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.key" placeholder="请输入属性名称">
                </template>
              </el-table-column>
              <el-table-column prop="value" label="属性值">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.value" placeholder="请输入关系名称">
                </template>
              </el-table-column>

              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,addPropertyDropdown.property)" type="text"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 右键属性新增 -->
        <div v-if="dialogData.opType=='addProperty'" class="modifyEntityName-dropdown">
          <div class="tools-2">
            <div class="tools-2-up">
              <div class="left">
                <span>实体名称：{{addProperty.name}}</span>
              </div>
              <div class="right">
                <span @click="addPropertyAddRow()" class="blue add-row"><span class="icon-add"></span>新增行</span>
              </div>
            </div>
            <div class="tools-2-down"></div>
          </div>
          <div class="content">
            <el-table border :data="addProperty.property" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column prop="key" label="属性名称">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.key" placeholder="请输入属性名称">
                </template>
              </el-table-column>
              <el-table-column prop="value" label="属性值">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.value" placeholder="请输入关系名称">
                </template>
              </el-table-column>

              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,addProperty.property)" type="text"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 删除关系 -->
        <div v-if="dialogData.opType=='deleteRelationship'" class="deleteRelationship">
          <div class="content">
            是否确认删除{{deleteRelationship.startName}}（起始节点）→{{deleteRelationship.endName}}（目标节点）之间的关系：{{deleteRelationship.relationshipType}}
            ?
          </div>
        </div>
        <!-- 修改关系 -->
        <div v-if="dialogData.opType=='modifyRelationship'" class="modifyRelationship">
          <div class="content">
            <div class="up">原关系名称：{{modifyRelationship.oldVal}}</div>
            <div class="down">修改为：<el-input v-model.trim="modifyRelationship.newVal"></el-input></div>
          </div>
        </div>
        <!-- 修改关系实体名称-右键 -->
        <div v-if="dialogData.opType=='modifyEntityName'" class="modifyEntityName">
          <div class="content">
            <div class="up">原实体名称：{{modifyEntityName.oldName}}</div>
            <div class="center">实体名称：<el-input v-model.trim="modifyEntityName.name"></el-input></div>
            <div class="down">实体类型：
              <el-select v-model="modifyEntityName.label" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 右键删除实体 -->
        <div v-if="dialogData.opType=='deleteEntity'" class="deleteRelationship">
          <div class="content">
            删除实体节点提交保存后会将数据库中节点所有一层以内的关系及属性一同删除。是否确认删除实体-{{deleteEntity.name}} ?
          </div>
        </div>
        <!-- 右键删除实体属性 -->
        <div v-if="dialogData.opType=='deleteProperty'" class="deleteRelationship">
          <div class="content">
            是否确认删除实体{{deleteProperty.name}}的属性-{{deleteProperty.propertyName}} ?
          </div>
        </div>
        <!-- //右键新增关系-->
        <div v-if="dialogData.opType=='addRelationship'" class="modifyEntityName">
          <div class="content">
            <div class="up">起始实体名称：{{addRelationship.startName}}</div>
            <div class="center">
              目标实体类型：<el-select v-model="addRelationship.endLabel" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="center">
              目标实体名称： <el-autocomplete v-model.trim="addRelationship.endName"
                :fetch-suggestions="((queryString,cb)=>{querySearchAsync(queryString,cb,addRelationship.endLabel)})"
                @select="handleSelect($event, addRelationship,'addRelationship')"
                placeholder="请输入实体名称"></el-autocomplete>
            </div>
            <div class="down">关系名称：<el-input v-model.trim="addRelationship.relationshipType"
                placeholder="请输入关系名称"></el-input>
            </div>
          </div>
        </div>
        <div v-if="dialogData.opType=='modifyProperty-dropdown'" class="modifyProperty-dropdown">
          <div class="tools">
            <el-select v-model="modifyPropertyDropdown.label" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-autocomplete v-model="modifyPropertyDropdown.name" :fetch-suggestions="querySearchAsync2"
              @select="handleSelect($event, modifyPropertyDropdown.properties,'modifyProperty-dropdown')"
              placeholder="请输入实体名称">
            </el-autocomplete>
          </div>
          <div class="content">
            <el-table border :data="modifyPropertyDropdown.properties" style="width: 100%" height="230">
              <el-table-column type="index" label="序号" width="73"></el-table-column>
              <el-table-column label="原属性名称" prop="oldPropertyName"></el-table-column>
              <el-table-column prop="key" label="属性名称" width="130">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.newPropertyName" placeholder="请输入属性名称">
                </template>
              </el-table-column>
              <el-table-column label="原属性值" prop="oldPropertyValue"></el-table-column>
              <el-table-column prop="value" label="属性值">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.newPropertyValue" placeholder="请输入属性值">
                </template>
              </el-table-column>
              <el-table-column label="操作" width="103">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="modifyPropertyDropdownConfirm(scope.$index,modifyPropertyDropdown.properties)"
                    type="text" size="small">
                    确定
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 右键修改实体属性 -->
        <div v-if="dialogData.opType=='modifyProperty'" class="modifyEntityName">
          <div class="content">
            <div class="up">
              <span>原属性名称：{{modifyProperty.oldPropertyName}}</span>
              <span>原属性值：{{modifyProperty.oldPropertyValue}}</span>
            </div>
            <div class="center">
              属性名称：<el-input v-model.trim="modifyProperty.newPropertyName" placeholder="请输入属性名称"></el-input>
              属性值：<el-input v-model.trim="modifyProperty.newPropertyValue" placeholder="请输入属性值"></el-input>
            </div>
            <!-- <div class="down">
              属性类型：<el-input v-model.trim="addRelationship.relationshipType"
                placeholder="请输入关系名称"></el-input>
            </div> -->
          </div>
        </div>

        <div v-if="dialogData.opType=='merge-entity'" class="merge-entity">
          <div class="content">
            <div class="text">
              确认实体-{{mergeEntity.firstName}}、实体-{{mergeEntity.secondName}}是否需要合并，合并后实体的关系及属性一同合并。
            </div>
            <div class="input">
              合并后的名称：<el-input v-model.trim="mergeEntity.newName" placeholder="请输入实体名称"></el-input>
            </div>
          </div>
        </div>
        <div v-show="dialogData.opType==='entityLink'" class="entityLink" id="entityLink">

        </div>
      </template>
      <span slot="footer" class="dialog-footer" v-show="dialogData.showFooter">
        <el-button @click="dialogVisible = false" class="cancel">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit" class="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script>

</script>

</html>